topic05.html

---
next_text: Selecting readings
next_id: topic06
---

<h3>Accessing MEI attributes</h3>

<p>
   In the SVG output of Verovio, the MEI element name is preserved as class and the <code>xml:id</code> attribute is passed as <code>id</code>. This is a very minimal information that is not always sufficient for interaction. In many cases, it is indeed necessary to have more information about the other attributes of the elements.
</p>

<p>
    In this example, we show how the full attribute list of an element can be retrieved and use for further interaction.
</p>

<p>
    The toolkit method <code>getElementAttr(id)</code> returns a hash of all the attributes for the element with the corresponding xml:id. We use it here to highlight in red all the notes that have a specified <code>@pname</code> attribute.
</p>


{% highlight javascript %}
/////////////////////////////////////////////////////
/* For all notes, get their attribute hash in JSON */
/////////////////////////////////////////////////////
$(".note").each(function(i) {
    var attr = vrvToolkit.getElementAttr($(this).attr("id"));
    if (attr.pname && (attr.pname == pname)) {
        $(this).attr("fill", "#f00").attr("stroke", "#f00");
    }
});
{% endhighlight %}

<p>
   The pname value to be highlighted is simply done via the keyboard input.
</p>

{% highlight javascript %}
///////////////////////////////////////////
/* Key events for switching pname choice */
///////////////////////////////////////////
if (event.keyCode == 67)
    pname = "c";
else if (event.keyCode == 68)
    pname = "d";
else if (event.keyCode == 69)
    pname = "e";
else if (event.keyCode == 70)
    pname = "f";
else if (event.keyCode == 71)
    pname = "g";
else if (event.keyCode == 65)
    pname = "a";
else if (event.keyCode == 66)
    pname = "b";

loadPage();
{% endhighlight %}

{% include html-tutorial.html id="code1" file="topic05-attributes.html" %}
<div id="code1-xml" style="display: none">
{% highlight html %}
{% include_relative gh-tutorial/topic05-attributes.html %}
{% endhighlight %}
</div>

<div class="pull-right">
    <p><a href="./tutorial.xhtml?id={{ page.next_id }}">{{ page.next_text }}</a> →</p>
</div>