Simple split-screen for the integrated web server

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. (310 Bytes)


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.

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.


Hey @Brad, I sent you an email.

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.



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: )


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

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).

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.

Hey @Brad. The iPad connection method ended up being unreliable (too much 2.4Ghz interference, and 5G was too directional to be useful), so now I’m using a small 2nd screen direct from my Cantabile laptop running Chrome to view the web pages. It’s not a touchscreen, so I can’t scroll on it. To change songs I’m using a midi foot pedal, and the Chrome browser displays the Cantabile webpage on my 2nd display. This works perfectly.

The problem is the /split webpage will display the first 24 (give or take) songs in the set list, and won’t scroll down to the next one when I hit the button on the foot pedal for any song past 24. It’ll show the show notes in the right pane and title on top, but not where it is in the list or what comes after it.

The other built in webpage works just fine in this regard. If you select song 20 it will scroll down and put song 20 in the middle of the list, and you can see what is before and after it. I would just use it this way, but then the show notes aren’t displayed, and because it’s not a touch screen I don’t have a way to change it easily.

I’ve taken a look at the differences between the /split and the regular web page, but I can’t figure out what the difference is that’s causing this. Any thoughts?

Thanks in advance.

Hi @Robb_Fesig

I’m not sure off hand - I didn’t actually implement the split screen so I’d need to look into it, but a bit busy at the moment. I’ll try to get to it soon.


1 Like

Thanks @Brad. I know you’re busy working on VST3, whenever you get a chance I’d appreciate it.

@Brad, sorry for being a pest. I’m going to use three smaller sets and just load the second and third during intermissions, so don’t worry about looking into it.

Thanks though.

Hi @Robb_Fesig

I’ve made a fix for this which will be in the next build. In the meantime, you can drop the attached folder into your installation directory and it should resolve it.

Root.webfolder (217.4 KB)



@Brad, I hope you’re ridiculously proud of the work you do, because you should be.

Thank you so much.