Simple split-screen for the integrated web server


#1

Well I waited a while for someone else to come up with a more elegant, easy version of this, but I got tired of waiting so I used my laughably weak html skills to throw this together.

It’s a < 1k file that puts two side-by-side views of the built-in Cantabile web page together in a browser using tables and iframes. It looks like this:

To use this, unzip the file and open index.html file in a text editor. Replace “localhost” with the IP address of your Cantabile server. After saving the file, zip it up and name it SimpleSplit.webfolder (the name is arbitrary, but it must end with .webfolder). Put the file in your Cantabile program directory (usually C:\Program Files\TopTen Software\Cantabile 3.0). Launch Cantabile, then you can connect in Chrome/Firefox/Safari using http://ipaddress:35007/SimpleSplit. If you didn’t name the file SimpleSplit, use what you named the file at the end of the URL.

SimpleSplit.zip (310 Bytes)


#2

I took at look at the source code of the default web stuff. I tried to make it do what I pictured above, but I just couldn’t figure it out. What I’d really like is a single menu bar at the top with song title bar under that, set list on the left, and notes on the right, and a single control bar at the bottom. Word wrap for the notes would be cool too, but might be a lot more to ask.

Anyone got any hints on how to do it the right way so my anal retentive nature can be at ease? Using < table > and < iframe > like it’s 2004 really kind of bother me, plus the double menu bars, times, and controls bars are really a waste of space on an iPad that would be better used elsewhere.


#3

You’ll need to understand JavaScript and Vue.JS. There are tons of great Vue.JS tutorials around and they’re documentation is great. Once you’ve got your head around that, the existing web ui should be pretty easy to understand and adjust to your needs.

Brad


#4

Hey @Brad, I sent you an email.


#5

Hi @Robb_Fesig,

Got your email, and put together a cleaner version of this for you. It’ll be included in the next build or in the meantime, here’s a replacement Root.webfolder. Just copy this over the installed version:

Root.webfolder (217.4 KB)

Once that’s inplace, just navigate to http://localhost:35007/split and you should get this:

I haven’t tested it much, so let me know if any issues.

Brad


#6

You’re the best Brad!
I really appreciate it, I’m testing it out now. Tomorrow I’ll try it with my iPad, but every browser I throw at it at home works perfectly.

Now I’ve got to finish getting all the lyrics in as notes in states, and finish using the transport triggers to automatically display the right lyrics at the right time! (I don’t mind this one bit :slight_smile: )

#CantabileSubscriberForLife

Seriously, this is amazing, and exactly what I need! Thanks again!
Robb


#7

Just a quick note to anyone who uses this before it’s actually released. The web server in Cantabile is case sensitive to file names, so make sure the file is named “Root.webfolder”.

(I’m still so excited about this, I’ll be able to get rid of my Band Helper subscription because Cantabile let’s me do everything right from the web interface).


#8

Hey @Brad. I tested this on my iPad today. When using Safari, only the left pane displays, in Chrome it works perfectly.

I’ve got an iPad Mini 2 running IOS 11.4.1, display resolution of 2048x1536. Let me know if you need any more details.

I prefer Chrome, so this is a non-issue for me, but I thought you’d want to know.