Siggin0er's Custom Web UI

What a great update!

The webserver now enables me to extend the functionality of cantabile regarding chord presentation to a whole new level! I can use plain html format to display my chords and lyrics and (thanks to html and css) i am able to highlight the actual part of the song automagically depending which state is selected.

Another thing is the flow layout options i can achieve with that: If i have a smaller screen, my chords are floating nicely to fit all.

This is a very early state, just put all together to a first working version. Need much more css styling and the top navigation bar is still completey missing, but there are endless possibilities to extend cantabile. Just thinking about letting Cantabile iron my shorts next… :wink:

Greetings, Tom


Hey @Siggin0er,

This is awesome! Exactly the kind of thing I was hoping people would take on for themselves. Thanks. I think this deserves it’s own topic so I’ve split it out…

Let me know if there’s anything you need help with.


1 Like

Could you show us a little of how you do that formatting, at the HTML/CSS level?


1 Like

Unfortunately I am on vacation the next two weeks, but I attached a zip file of my changed Root.webfolder with one example song (same as above). Just create a song in Cantabile with that name and some of the states in my example above and the script should work.

Mostly I used this and that from Brad, the only script I added for reading the chords and setting the active state can be found in lines 67 to 99 in index.html:

// Read htmlChords
	var xmlHttp = new XMLHttpRequest();
	if (xmlHttp)
	{'GET', '/Chords/' + + '.html', true);
		xmlHttp.onreadystatechange = function ()
			if (xmlHttp.readyState == 4)
				// Set htmlChords
				document.querySelector("div#htmlChords").innerHTML = (xmlHttp.responseText);

				// Set current State as active
				var tmp =' ');
				var state = tmp[0];
				var count = tmp[1];
				var x = document.getElementsByClassName(state);
				var i;
				for (i = 0; i < x.length; i++) {
					if (x[i].className == state) {
					if (x[i].className == state + ' ' + count) {
					if (includes(x[i].className, state) && includes(x[i].className, "\/")) {

Helpful is also to get some idea of Vue.js.

I should mention that my song html files are generated out of csv files with a self written program in VB. An example can be found in the zip file as well. (208.8 KB)

Greetings, Tom


Many Thanks Tom!!:smiley: I will check it out and brush off my code skills !

This looks amazing, thanks for sharing Tom.

I see you use “H” chords a lot, I think my guitar player does as well…

Rumor has it that Bach started the “H” chord so he could spell his name.:wink:

1 Like

@Siggin0er. FYI: If you’ve copied parts of the existing Web UI, you might want to have a look at the changes I’ve introduced in today’s build.

  1. Fixes for scrolling on iOS (diff)

  2. Fixes for older browsers (diff)

When you’re back from your holiday, ping me and we can talk about how to package this up as a separate file that can be more easily shared with others

(rather than replacing the stock root.webfolder you should be able to set this up as siggin0ers.webfolder and then access it at http://localhost:35007/siggin0ers)


Hi Brad!

It was a long vacation :see_no_evil: No, indeed I was busy on gigging.

I am working again on my layout and I managed to pack it in your suggested webfolder, so that is working great.
Since I worked a long time on version 3551, are there any updates in the root files that i should update?
Or: is there a cleaner way to seperate “my changes” from the root files?

Greetings, Tom

Hi @Siggin0er

You can check the full history of changes here. Doesn’t look like much has changed - just a bunch of build version tags.


Hi, I come a little bit late to this topic…sorry…

I have always a Web UI view, there only following items are shown:

  • Set List
  • States
  • Notes
  • Overview of all states without background colours per state
  • Play, pause, stopp

Is there meanwhile a version available, there

  • also a record button is included incl. showing if recording is actual active or not?
  • background colors of states?

The Web UI version of @Siggin0er shows, what is possible. Great example.
Are there any other self developed WEB UI available?