<html>

  <head>

    <meta content="text/html; charset=windows-1252"

      http-equiv="Content-Type">

  </head>

  <body bgcolor="#FFFFFF" text="#000000">

    <font size="-1"><font face="DejaVu Sans">Hallo Frank,<br>

        <br>

        sorry für die unhöfliche Kürze, aber ich wollte kurz loswerden,

        dass ich am 1.7. im Karlsruher MuWi-Kolloquium über (digitale)

        Musikedition, LilyPond, LaTeX, Git und MEI berichten werde.<br>

        <br>

        HG<br>

        Urs<br>

      </font></font><br>

    <div class="moz-cite-prefix">Am 07.06.2015 um 11:36 schrieb SWPFFM:<br>

    </div>

    <blockquote cite="mid:55741093.7040500@web.de" type="cite">

      <pre wrap="">Dear MEI List,

I have a question concerning adding svg elements at runtime in the

Javascript version of Verovio. Sorry for this question is not strictly

related to MEI, but I think most Verovio users come from the MEI

community. (And there is no Verovio mailinglist as far as I see.)

I generate some Plaine&Easy Code that is displed by Verovio. Now my

goal is to add a text element above each measure. This is what I have

done so far:

    /* some example pae music */

    data = "@clef:F-4";

    data += "@keysig:\n";

    data += "@timesig:4/4\n";

    data += "@<a class="moz-txt-link-freetext" href="data:,8G,4.A'4C'4C">data:,8G,4.A'4C'4C</a>}/'2G{,8B'8xC}'4D}/";

    var vrvToolkit = new verovio.toolkit();

    var svg = vrvToolkit.renderData(data, JSON.stringify({

                                                inputFormat: 'pae',

                                                pageWidth: 800*2,

                                                scale: 40 }) );

    /* this works fine and displays very nicely rendered music*/

    $("div#output").html(svg);

    /* first get the lowest y value of all notes */

    var yvals = $("g.note use").map(function() {

      return parseFloat( $(this).attr("y"), 10 ) ;

    }).get();

    var lowest_y = (Math.min.apply(Math, yvals) - 500.0).toString();

    /* now add a chord label above the first note of each measure*/

    var chords = ["C major", "D minor"];

    $("g.measure").map(function(index) {

      var chordname = chords[index];

      var fnote = $($(this).find("g.note:first")).find("use:first");

      var text_node = '<g> <text x="' + $(fnote).attr("x") + '" y="' +

lowest_y + '" height="720px" width="720px" style="font-size:20em">' +

chordname + '</text> </g>';

        $("svg svg").prepend(text_node);

    });

The result does not show any chord labels. However, if I copy the

resulting SVG and save it as a standalone SVG file, my browser shows

the chord labels. So I think it is supposed to work like this. How can

it be achieved that the text shows up in embeded svg at runetime?

Thanks for any ideas and suggestions, also thanks alot for Verovio!

Too bad I couldn't be at MEC2015, but I heard it has been a great event!

Best,

Frank

</pre>

    </blockquote>

    <br>

  </body>

</html>