craigsapp
commented
7 years ago Also, somewhat related: @color on a note in MEI results in @fill and @stroke in the SVG. However, the highlighting system used with MIDI playback in the MEI Viewer is also writing to @fill and @stroke which causes the original color to be removed after the note is played with the MIDI player.
Here is the code for highlighting in the Verovio MEI viewer:
ids.forEach(function(noteid) {
if ($.inArray(noteid, elementsattime.notes) == -1) {
$("#" + noteid ).attr("fill", "#000");
$("#" + noteid ).attr("stroke", "#000");
//$("#" + noteid ).removeClassSVG("highlighted");
}
});
ids = elementsattime.notes;
ids.forEach(function(noteid) {
if ($.inArray(noteid, elementsattime.notes) != -1) {
//console.log(noteid);
$("#" + noteid ).attr("fill", "#c00");
$("#" + noteid ).attr("stroke", "#c00");;
//$("#" + noteid ).addClassSVG("highlighted");
}
});I tried .addClassSVG and it wasn't working (maybe that is why you commented it out). Perhaps that is some plugin for jQuery? In any case I changed the parallel code for VHV to use CSS highlighting using raw JavaScript:
//$("#" + noteid ).attr("fill", "#000");
//$("#" + noteid ).attr("stroke", "#000");
// $("#" + noteid ).removeClassSVG("highlighted");
var element = document.querySelector("#" + noteid);
if (element) {
var classes = element.getAttribute("class");
var classlist = classes.split(" ");
var outclass = "";
for (var i=0; i<classlist.length; i++) {
if (classlist[i] == "highlight") {
continue;
}
outclass += " " + classlist[i];
}
element.setAttribute("class", outclass);
}and turn on highlighting:
// $("#" + noteid ).attr("fill", "#c00");
// $("#" + noteid ).attr("stroke", "#c00");;
// $("#" + noteid ).addClassSVG("highlighted");
var element = document.querySelector("#" + noteid);
if (element) {
var classes = element.getAttribute("class");
var classlist = classes.split(" ");
var outclass = "";
for (var i=0; i<classlist.length; i++) {
if (classlist[i] == "highlight") {
continue;
}
outclass += " " + classlist[i];
}
outclass += " highlight";
element.setAttribute("class", outclass);
}Here is the CSS entry for highlighting:
.highlight {
color: #c00;
fill: #c00;
stroke: #c00;
}Example implementation:
http://verovio.humdrum.org/?file=jrp:Ort3001&filter=dissonant%20-cemxhm
Note the red highlighting of the currently playing MIDI notes, with the green highlighting for the dissonant notes preserved after the notes have played.
lpugin
pe-ro
When adding
@colorto a note, it will also affect any verses attached to the note. Not necessarily a problem, but in some cases also coloring the verses attached to a note will be less desirable.Example:
http://verovio.humdrum.org/?file=jrp:Ock1010d&filter=myank%20-m1-4|dissonant%20-cetext