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

[Andrew Hankinson]

You might try adding the text nodes to the SVG before appending them to the HTML. 

You might also try using the built-in JavaScript "createElementNS" for creating the 'g' tag, instead of simply using text. 

See:
http://stackoverflow.com/a/3642265 <http://stackoverflow.com/a/3642265>
http://stackoverflow.com/a/2545257 <http://stackoverflow.com/a/2545257>

-Andrew

> On Jun 7, 2015, at 5:36 AM, SWPFFM <SWPFFM at web.de> wrote:
> 
> 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
> 
> -- 
> Frank Zalkow
> Rintheimer Str. 58
> 76131 Karlsruhe
> 
> Web:   www.frank-zalkow.de
> Mail:  frank_zalkow at web.de
> Phone: +49 172 715 7995
> 
> _______________________________________________
> mei-l mailing list
> mei-l at lists.uni-paderborn.de
> https://lists.uni-paderborn.de/mailman/listinfo/mei-l

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