Chords in OpenLP

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:


image

Transpose is still in my mind, but only on stage view.
«1345

Comments

  • edited February 2015
    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 + "\""; */
    ...
    ...

  • I made some small mods to txt_to_openlyrics.html
    here is the result: txt_to_openlyrics_mod_01.html
  • edited February 2015
    thanks, I fixed my html (txt_to_openlp_en.html) and added chorus in italic a option for chords formatting.
  • edited February 2015
    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) {
    ...
    ...
  • 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.

  • 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
    image

  • edited August 2015
    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>';
    };
  • edited August 2015
    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.
  • 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('');
    };
  • edited August 2015
    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.
  • edited August 2015
    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) ;)

  • edited August 2015
    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.
  • edited August 2015
    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;

  • edited August 2015
    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.
  • edited September 2015
    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?
  • edited September 2015
    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.
  • 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).
    image

  • edited October 2015
    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. :-)


    image


  • 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.
  • edited October 2015
    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.
  • 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 :(
  • edited October 2015
    I updated openlp_chords220.zip and added some buttons to show and hide chords and scale font size.

    slide.html
    image
    print.html
    image
Sign In or Register to comment.