Custom screens in the Cantabile web host?

I seem to remember discussion about this but cannot wrap my head around what’s available in terms of technical documentation. I want to build Cantabile pages that basically have 3 frames, next to each other horizontally. Left one is the set list; middle one is the state list for the song selected in the set list and right one is the notes. Can I do that? Any hint where I should start?

Any help appreciated and once I get it working I’ll happily share!

Hi @Tom_Tollenaere

Start here: https://www.cantabilesoftware.com/guides/networkDeveloperGuide

Use the existing Root.webfolder in your installation folder as a template. Let me know if you have any questions.

Brad

1 Like

Tx Brad. Glad to see (based on the commit datestamps) you’re still actively working on this!

FYI these link on that page is broken: [https:/

I did find the index.html elsewhere; and it was exactly what I’m looking for. Will take me some time to get to it (life & other stuff you know) but I should manage. I’ll post back here in case of problems and I’ll post the end result as well.

Hi @Tom_Tollenaere

Ah - my bad, they linked to a branch that has since been deleted. Fixed now.

Please do and let me know if there’s anything else that should be added to the docs - the JS api isn’t heavily used by anyone other than myself so it’s probably not totally complete but happy to update with anything that’s missing.

Brad

I finally found the time to play with this - took me an afternoon to get working what I needed.

I have one tiny feature request for the API - which would also make the html code a tad easier: can you include the index in the item list as a javascript field in item (in the html code (at least in split.html - I didn’t really look on index.html). Reason for asking is that I’ve made a web page that allows me to “filter” the songs in setlist (I’ll post that separately). I got that working, but if a song is selected, and I switch the filter, that gives a javascript error (in the debugger - it doesn’t really stop the processing and I don’t care about the error). I had to replace loadSongByIndex() by loadSongByProgram - because if I filter the itemList … the indexes get incorrect… so in setlist-template I now have

v-for=“(i in items” v-bind:class=“itemClasses(i)” v-on:click=“loadSong(i.pr)”>

instead of

v-on:click=“loadSong(index)”

Not sure if this makes sense if you don’t have the context :slight_smile: - I’ll post my use case in a separate thread tomorrow along with code.

Hi @Tom_Tollenaere

My brain has GCed everything about how Vue and the web UI works so I’d need to see the whole thing and debug through it…

Brad

No worries, not worth the hassle for now :slight_smile: .

1 Like