Siggin0er's Custom Web UI


#1

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


Build 3544 - What's New
#2

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.

Brad


#3

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

Neil


#4

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)
	{
		xmlHttp.open('GET', '/Chords/' + C.song.name + '.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 = C.song.currentState.split(' ');
				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) {
						x[i].classList.add("active");
					}
					if (x[i].className == state + ' ' + count) {
						x[i].classList.add("active");
					}
					if (includes(x[i].className, state) && includes(x[i].className, "\/")) {
						x[i].classList.add("active");
					}
				}
			}
		};
		xmlHttp.send(null);
	}

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.

Root.webfolder.zip (208.8 KB)

Greetings, Tom


#5

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


#6

This looks amazing, thanks for sharing Tom.

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


#7

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


#8

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


#9

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)

Brad