craigsapp
commented
1 year ago Can you post test data for the above images? Sometimes the highlighting of cint search results seems incorrect, so I should double check those. The turquoise color is probably cyan, which is caused by highlighting by green and blue (#00FFFF).
Readability of many colors is not great in any case. There are other possibilities to highlight notes.
Here is the CSS code for highlighting or editing notes in the VHV interface (outside of the verovio coloring of notes):
g[id^="clef-"]:hover,
g[id^="ksig-"]:hover,
g[id^="msig-"]:hover,
g[id^="note-"]:hover,
g[id^="hairpin-"]:hover,
g[id^="accid-"]:hover,
g[id^="trill-"]:hover,
g[id^="artic-"]:hover,
g[id^="slur-"]:hover,
g[id^="tie-"]:hover,
g[id^="slur-"]:hover,
g[id^="fermata-"]:hover,
g[id^="rest-"]:hover {
fill: orange;
stroke: orange;
filter: url(#hover-shadow);
}
/* Highlight barlines:
g[id^="bline-"] path:hover
*/
g[id^="slur-"] path:hover
{
stroke: orange;
}The filter: url(#hover-shadow); is used to enhance the visibility of the highlighting (but is only used in the interface highlighting, not in the verovio-colord notes).
Here are the definitions of the hover (and highlight) shadows used in VHV:
https://github.com/humdrum-tools/verovio-humdrum-viewer/blob/gh-pages/_includes/svgdefs.html
<!-- filters used in styles/styles.css to control highlighting in SVG images -->
<svg height="0" style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">
<filter id="highlight-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="10"/>
<feOffset dx="0" dy="0" result="offsetblur"/>
<feFlood flood-color="black"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="hover-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="10"/>
<feOffset dx="0" dy="0" result="offsetblur"/>
<feFlood flood-color="#D30"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</svg>Another possibility for making highlighting more visible would be to place boxes around the notes instead or in addition to highlighting them.
I have a demo system for doing this:
https://verovio.humdrum.org/?file=beethoven/sonatas/sonata08-3.krn#mh18
#mh18 means to open the score at measure 18 and highlight it.
I insert a <g> element before content in the SVG image:
into which user-generated highlighting boxes/lines/circles can be inserted.
Here is the Javascript class that handles this:
(I will eventually move it to Humdrum Notation Plugin so that it can be used there).
There is a variable in the VHV code called MARKUP:
https://github.com/humdrum-tools/verovio-humdrum-viewer/blob/gh-pages/_includes/vhv-scripts/markup.js
That uses this class, and it processes the output from verovio whenever it is (re)generated on the webpage.
One idea is to link the color markings done in verovio SVGs into boxes (via javascript and this interface). The color could be remove from the note and moved to the box instead. The boxes could have opacity added to them so that overlapping boxes could both be seen.
The current interface can only highlight single measures, but could be expanded to highlighting ranges of notes in various ways (as well as adding lines to connect notes and draw circles/boxes around notes, etc.).
Here is an example of using the interface to manually highlight measures in VHV from the console:
MARKUP.highlightMeasure({measure: 6, color: "limegreen", opacity: 0.5, padding: 0});
MARKUP.highlightMeasure({measure: 5, color: "hotpink", opacity: 0.5, padding: 1});
MARKUP.highlightMeasure({measure: 5, color: "blue", opacity: 0.5, padding: 0});Notice that the purple color is caused by the opacity of the two boxes of pink and blue. The blue box could be made opaque to obscure the pink box:
MARKUP.highlightMeasure({measure: 5, color: "hotpink", opacity: 0.5, padding: 1});
MARKUP.highlightMeasure({measure: 5, color: "skyblue", opacity: 1, padding: 0});
WolfgangDrescher
Related to a discussion in https://github.com/rism-digital/verovio/issues/2690.
It seems that currently it is only possible to use one unicode marker with the
cintfilter. It would be nice to get support for multiple unicode markers since following the docs there are not so many options to bind normal chars as markers:i,j,l,N,V,Z,@,@,+,|,<, and>.In this example, all notes are colorized correctly:
In this example,
--search "6 2 6"and--search "3 -2 3"are both colorized with a new turquoise color:In this example, all cint filters are combined with a barely visible color.