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}: <span class="chordline"> .. </span>
add formating for chord - {c}: <span class="chord" style="display:nοne;"> .. </span>

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:




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)

Feel free to comment this, thanks.

http://localhost:4316/files/print.html

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 '<span><strong><span>[</span>'+$1+'<span>]</span></strong>'+$2+w+$3+'</span>';

};

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 '<span><strong><span>[</span>'+$1+'<span>]</span></strong></span>'+$2+w+$3+'</span>'; // that </span> 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 class="chord" style="display:inline">[\[{]([\(\w#b♭\+\*\d/\)]+)[\]}]<\/span>([\u0080-\uFFFF,\w]*)([\u0080-\uFFFF,\w,\s,\.,\,,\!,\?,\;,\:,\|,\",\',\-,\_]*)(<br>)?/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(['<span class="chord" style="display:inline"><span><strong><span>[</span>', $1, '<span>]</span></strong></span>', $2, w, $3, '</span>', $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.

MattT

Thanks for working on chords. I work in a church in Japan and want to highlight a further way that a "showing chords as ruby text" function you are developing could be very useful elsewhere.

In Japanese the Chinese characters used in writing often need to have the phonetic reading written above them if the character is not a common one, or to help children or foreigners. This happens regularly for words used in the Bible and in Christian songs. However among the free song presentation software programs there are no really competent programs that do that. So we have to use powerpoint and put the phonetic reading in little text boxes above the characters (ppt slide example attached, first word has phonetic reading above it). Very tedious, and inflexible. I think the showing chords function could be used for showing phonetic readings too ("ruby text" or "furigana"). Perhaps you could test it for doing that too and then document it as "adding phonetic readings" in the manual? It would be a great service to the Japanese church (I notice that a Japanese translation of the interface is already completed).

Godisawesome

Can anybody shed light on problem I'm experiencing?

I've installed the OpenLP chords 2.14 plugin on Version 2.05 of OpenLP.

Used this line in a song to display chords :-



p, li { white-space: pre-wrap; }

{cl}I’m {c}C(A){/c} gonna be me, I’m gonna be me, I’m gonna be me,{/cl}

The resulting display at http://localhost:4316/files/slide.html shows the chords on the same line as the lyrics, not on the line above.

Screenshot below - Any assistance would be most appreciated. :-)

STEPHANVS

MattT: The code present on this thread is not implemented in the main release. Though I do not have any experience with the topic, from what you describe, it can be used as such. I am not the owner of this thread, but I think that starting a new one with specific words in the subject and pointing here would do the trick. In time, the two threads will definitely separate, having different goals.

Godisawesome: I suspect the version of OpenLP being 2.05 is the cause. If I am not mistaken, that version did not have the necessary web server implementations needed for this add-on to work.

tomasss

Godisawesome: are you import chords_tags.conf? You can download openlp_chords214.zip and import chords_tags.conf as configuration file. Or add formating manually as in first post.

tomasss

MattT: You can try download openlp_japanese.zip and replace slide.html and slide.js. I set it that you can use any characters in brackets ("[xxx]" or "{xxx}").
I don't use japanese or chinese characters, then I can not test it

tomasss

I updated openlp_chords220.zip and added some buttons to show and hide chords and scale font size.

slide.html

print.html