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.
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…
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.
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);
}
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.
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)
It was a long vacation 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?
I will check it out and brush off my code skills !
No, indeed I was busy on gigging.