[MEI-L] Verovio - add svg elements at runtime

[Urs Liska]

Hallo Frank,

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.

HG
Urs

Am 07.06.2015 um 11:36 schrieb SWPFFM:
> 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 += "@data:,8G,4.A'4C'4C}/'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
>

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.uni-paderborn.de/pipermail/mei-l/attachments/20150607/f87d0b36/attachment.html>