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

[Frank Z.]

Dear Andrew,

thanks alot, using createElementNS instead of manually concatenating
strings solved it!

Best,

Frank

Am 07. Jun 2015 um 20:12 schrieb Andrew Hankinson
<andrew.hankinson at mail.mcgill.ca>:
> 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/2545257
> 
> -Andrew
> 
>> On Jun 7, 2015, at 5:36 AM, SWPFFM <SWPFFM at web.de
>> <mailto: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 <http://www.frank-zalkow.de>
>> Mail:  frank_zalkow at web.de <mailto:frank_zalkow at web.de>
>> Phone: +49 172 715 7995
>>
>> _______________________________________________
>> mei-l mailing list
>> mei-l at lists.uni-paderborn.de <mailto:mei-l at lists.uni-paderborn.de>
>> https://lists.uni-paderborn.de/mailman/listinfo/mei-l
> 
> 
> 
> _______________________________________________
> mei-l mailing list
> mei-l at lists.uni-paderborn.de
> https://lists.uni-paderborn.de/mailman/listinfo/mei-l
> 

-- 
Frank Zalkow
Rintheimer Str. 58
76131 Karlsruhe

Web:   www.frank-zalkow.de
Mail:  frank_zalkow at web.de
Phone: +49 172 715 7995