Chords in OpenLP

tomasss

I developed some additional funcionality to show chords on stage view, because OpenLP doesn't solve chords in lyrics now. I only summarize my work on this discussion. Inspired by http://wellstyled.com/css-chords-formatting.html. Folow these steps: - download openlp_chords211.zip and unzip to OpenLP, - import setting chords_tags.conf (it rewrites all custom tags!!!) or add formating tags: add formating for chordline - {cl}: .. add formating for chord - {c}: .. Now edit your lyric in OpenLP like:

{cl}How {c}[G]{/c}great is our God, {c}[D/F#]{/c}sing with me,{cl}

and open your browser http://localhost:4316/files/slide.html and now you can see chords above text: <img src="https://copy.com/JFT8SqAf6sfA/openlp/OpenLP211_chords.PNG?download=1" alt="image"> Transpose is still in my mind, but only on stage view.

tomasss

There is some converting tool txt to openlyrics and txt to openlp: txt_to_openlyrics.html and txt_to_openlp_en.html

dm82david

Hi, A little correction for tx_to_openlp_en.html: ... ... //---[Verse:1]--- //---[Chorus:1]--- //---[Bridge:1]--- //---[Pre-Chorus:1]--- //---[Intro:1]--- //---[Ending:1]--- //---[Other:1]---     function openVerse (theLang) {        v_Name = "Verse";       switch (verseName) {         case "v":           v_Name = "Verse";           break;         case "c":           v_Name = "Chorus";           break;         case "b":           v_Name = "Bridge";           break;         case "e":           v_Name = "Ending";           break;         case "p":           v_Name = "Pre-Chorus";           break;         default:       }       destLyrics = destLyrics + "---[" + v_Name + ":" + verseNum + "]---"; /* "    <verse name=\"" + verseName + verseNum + "\""; */ ... ...

dm82david

I made some small mods to txt_to_openlyrics.html here is the result: txt_to_openlyrics_mod_01.html

tomasss

thanks, I fixed my html (txt_to_openlp_en.html) and added chorus in italic a option for chords formatting.

dm82david

for italics you have to remove text highlighted, because if chorus is last verse you get double {/it}:

... ...         }       }             destLyrics = destLyrics + ((lyricForm.elements["cbit"].checked && verseName == "c")?"{/it}":"") + (lyricForm.elements["chordsformat"].checked?"{/cl}":"");       if (fullSong) {         destLyrics = destLyrics + "";       }       return destLyrics;     }     function langInLine (theLine) { ... ...

tomasss

oh, yes, thanks

tomasss

new download link to txt_to_openlp_en.html

tomasss

Hello, I uploaded file txt_to_openlp_en.html I fixed some bugs and added function that if "With chords formatting" is unchecked then no chords are in converted lyric.

tomasss

There is new version of openlp_chords214.zip for OpenLP 2.1.4

fixed for OpenLP 2.1.4

fixed chord formatting - chords close to each (ex.: S[F#m]o[A]ng)

added print.html for print lyric with chords http://localhost:4316/files/print.html

there is some bug with lyric title if song is not in service list (there is only api to get title from servicelist)

</ul>Feel free to comment this, thanks. http://localhost:4316/files/print.html <img src="https://copy.com/JFT8SqAf6sfA/openlp/OpenLP214_print.PNG?download=1">

STEPHANVS

Hello, I sill got some chord overlapping so I changed my replacechors function to distinguish slim and nonslim characters. Thougth I might share it with you:

replaceChords=function(mstr,$1,$2,$3) {

var w='';

var $1len = 0, $2len = 0, slimchars='fiIÍjlrt.,;/';

for (var i = 0; i < $1.length; i++) if (slimchars.indexOf($1.charAt(i)) === -1) {$1len += 2;} else {$1len += 1;}

for (var i = 0; i < $2.length; i++) if (slimchars.indexOf($2.charAt(i)) === -1) {$2len += 2;} else {$2len += 1;}

if ($1len>$2len) if ($2.length&&!$3.length){for(c=0;c<Math.floor(($1len-$2len)/2)+1;c++) {w+='_';}}else{for (c=0;c<$1len-$2len+1;c++) {w+='&nbsp;';}};

return '['+$1+']'+$2+w+$3+'';

};

STEPHANVS

Since I cannot edit the above any more, I will post some findings here:

if ($1len>=$2len) if ($2.length&&!$3.length){for(c=0;c<Math.floor(($1len-$2len)/2)+1;c++) {w+='';}}else{for (c=0;c<$1len-$2len+2;c++) {w+='&nbsp;';}}; // >= for extra cautiousness; +2 '&nbsp;' instead of +1, as it is considered slim

return '['+$1+']'+$2+w+$3+''; // that  was missing, adding it will fix the messed up html code

 

One thing is still work in progress, deciding between '_' and '&nbsp;' is not perfect, as it depends on the next on the next result set of the regexp.

STEPHANVS

Trying not to spam, but I cannot edit my posts after a while.

After lots of trial and error (mostly overlapping or extending too much), I found a decent setup for my chords, so until I will have more time to figure out a proper '&nbsp' vs. '' selection, I will stick to this. Tested with Arial Narrow font.

 

slide.js:

 

regchord = /[{[]}]<\/span>([\u0080-\uFFFF,\w])([\u0080-\uFFFF,\w,\s,.,\,,!,\?,\;,:,|,\",\',-,_])( )?/g,

replaceChords = function(mstr, $1, $2, $3, $4) {

var w='';

var $1len = 0, $2len = 0, slimchars = 'fiIÍjlrt.,;/ ()|"\'!:\';

for (var i = 0; i < $1.length; i++) if (slimchars.indexOf($1.charAt(i)) === -1) {$1len += 2;} else {$1len += 1;}

for (var i = 0; i < $2.length; i++) if (slimchars.indexOf($2.charAt(i)) === -1) {$2len += 2;} else {$2len += 1;}

for (var i = 0; i < $3.length; i++) if (slimchars.indexOf($2.charAt(i)) === -1) {$2len += 2;} else {$2len += 1;}

if ($1len >= $2len && !$4) {

if ($2.length){

if (!$3.length) {

for (c = 0; c < Math.floor(($1len - $2len) / 2) + 1; c++) {w+='_';}

} else {

for (c = 0; c < $1len - $2len + 2; c++) {w += '&nbsp;';}

}

} else {

if (!$3.length) {

for (c = 0; c < Math.ceil(($1len - $2len) / 2); c++) {w += '_';}

} else {

for (c = 0; c < $1len-$2len; c++) {w += '&nbsp;';}

}

};

} else {

if (!$2 && $3.charAt(0) == ' ') {for (c = 0; c < $1len; c++) {w += '&nbsp;';}}

}

return $.grep(['[', $1, ']', $2, w, $3, '', $4], Boolean).join('');

};

tomasss

thanks for your post and for your improvement. I'll try to check it on my lyrics. slimchars for my language (sk): slimchars = 'fiíIÍjlĺľrtť.,;/ ()|"\'!:\'; I think, it's better now.

STEPHANVS

In the meantime I worked on transpose. It's not perfect, but it's working perfectly for me. It saves the transpose settings in html5 localstorage, so next time the song is selected, it loads the transpose number and sets it.

Here B=H, so if you need you can change the notesSharp and notesFlat in the .js: B -> Bb, H -> B... (checkbox for selecting setting is planned).

Also I made the html iOS and Android fullscreen compatible, and font size is relative to viewport width. Font size adjustment is next on my list.

I already set up a few songs, and will test the system live on Saturday (wedding) and Sunday (church) ;)

html.zip

tomasss

That's good job, thanks. I tried to implement transpose via "note" of lyrics, but it is not accesible in API. Sometimes I have problem with mol chords as small letter like h=Hm, c#=C#m. But it's not so big problem to change it to correct form. Thanks again for your job.

tomasss

I put one condition if it's not correct chords: change: transposedChord += currentChord + rest; to: if(!(notesFlat.indexOf(note)===-1 && notesSharp.indexOf(note)===-1)) transposedChord += currentChord + rest; else transposedChord += note + rest;

STEPHANVS

Yes, that was missing. Modified and integrated into the code, which can now handle smallcaps chords.

Pasting the updated transposeChord() is too long for the forum to accept, so I updated the html.zip.

phedders

Is anyone working on integrating these changes to the main codebase?

Would it be sensible to make to put the chords on a "/tabs" page and leave /stage clean?

STEPHANVS

The problem lies in the issue that the chords are present in the text part of the web server reply. I have already issued a bugreport to the wishlist to be able to hide the code between {c} and {/c}. In the meantime you can edit the stage.js and change from the usage of text to html:

line 103: text = slide["text"]; -> text = slide["html"];

line 123: text = text + OpenLP.currentSlides[idx]["text"]; -> text = text + OpenLP.currentSlides[idx]["html"];

This does not change the fact, that the chords are visible in the main window (reason they are in [ ]), but hopefully the change request will be implemented soon.