search

humdrum-tools / verovio-humdrum-viewer

Verovio Humdrum Viewer
http://verovio.humdrum.org
37 stars 9 forks source link

Marker color resolution #794

Closed craigsapp closed 1 year ago

craigsapp commented 1 year ago

When there are two or more markers for a note, the note is not colored. In such cases, the first marker should be used to assign color to the note (or generate a color that is a mixture of the two color markers).

Example:

**kern  **kern  **kern  **kern
*clefF4 *clefGv2    *clefG2 *clefG2
*k[f#]  *k[f#]  *k[f#]  *k[f#]
*G: *G: *G: *G:
*M3/4   *M3/4   *M3/4   *M3/4
=1  =1  =1  =1
4GN 4BN 4dN 2gN@
4E@ 8cL@    4e@ .
.   8BJ .   .
4F#|    4A| 4d| 4dd|
=   =   =   =
*-  *-  *-  *-
!!!RDF**kern: @ = marked note, color="limegreen"
!!!RDF**kern: | = marked note, color="royalblue"
!!!RDF**kern: N = marked note, color="skyblue"
Click to view MEI conversion ```xml </titleStmt> <pubStmt /> </fileDesc> <encodingDesc> <appInfo> <application isodate="2023-02-27T12:46:16" version="3.15.0-dev-5260bd2-dirty"> <name>Verovio</name> <p>Transcoded from Humdrum</p> </application> </appInfo> </encodingDesc> <workList> <work> <title /> </work> </workList> <extMeta> <frames xmlns="http://www.humdrum.org/ns/humxml"> <metaFrame n="22" token="!!!RDF**kern: @ = marked note, color="limegreen"" xml:id="L23"> <frameInfo> <startTime float="3" /> <frameType>reference</frameType> <referenceKey>RDF**kern</referenceKey> <referenceValue>@ = marked note, color="limegreen"</referenceValue> </frameInfo> </metaFrame> <metaFrame n="31" token="!!!RDF**kern: | = marked note, color="royalblue"" xml:id="L32"> <frameInfo> <startTime float="3" /> <frameType>reference</frameType> <referenceKey>RDF**kern</referenceKey> <referenceValue>| = marked note, color="royalblue"</referenceValue> </frameInfo> </metaFrame> <metaFrame n="47" token="!!!RDF**kern: N = marked note, color="skyblue"" xml:id="L48"> <frameInfo> <startTime float="3" /> <frameType>reference</frameType> <referenceKey>RDF**kern</referenceKey> <referenceValue>N = marked note, color="skyblue"</referenceValue> </frameInfo> </metaFrame> </frames> </extMeta> </meiHead> <music> <body> <mdiv xml:id="mtp96im"> <score xml:id="s195gbzs"> <scoreDef xml:id="srmez02"> <staffGrp xml:id="svwpxe2" symbol="bracket"> <staffDef xml:id="staffdef-L1F4" n="1" lines="5"> <clef xml:id="clef-L2F4" shape="G" line="2" /> <keySig xml:id="keysig-L3F4" pname="g" mode="major" sig="1s" /> <meterSig xml:id="metersig-L5F4" count="3" unit="4" /> </staffDef> <staffDef xml:id="staffdef-L1F3" n="2" lines="5"> <clef xml:id="clef-L2F3" shape="G" line="2" /> <keySig xml:id="keysig-L3F3" pname="g" mode="major" sig="1s" /> <meterSig xml:id="metersig-L5F3" count="3" unit="4" /> </staffDef> <staffDef xml:id="staffdef-L1F2" n="3" lines="5"> <clef xml:id="clef-L2F2" shape="G" line="2" dis="8" dis.place="below" /> <keySig xml:id="keysig-L3F2" pname="g" mode="major" sig="1s" /> <meterSig xml:id="metersig-L5F2" count="3" unit="4" /> </staffDef> <staffDef xml:id="staffdef-L1F1" n="4" lines="5"> <clef xml:id="clef-L2F1" shape="F" line="4" /> <keySig xml:id="keysig-L3F1" pname="g" mode="major" sig="1s" /> <meterSig xml:id="metersig-L5F1" count="3" unit="4" /> </staffDef> </staffGrp> </scoreDef> <section xml:id="section-L1F1"> <measure xml:id="measure-L1" n="1"> <staff xml:id="staff-L1F4" n="1"> <layer xml:id="layer-L1F4N1" n="1"> <note xml:id="note-L7F4" type="marked marked" dur="2" oct="4" pname="g" color="#000000" accid.ges="n" /> <note xml:id="note-L10F4" type="marked" dur="4" oct="5" pname="d" color="royalblue" accid.ges="n" /> </layer> </staff> <staff xml:id="staff-L1F3" n="2"> <layer xml:id="layer-L1F3N1" n="1"> <note xml:id="note-L7F3" type="marked" dur="4" oct="4" pname="d" color="skyblue" accid.ges="n" /> <note xml:id="note-L8F3" type="marked" dur="4" oct="4" pname="e" color="limegreen" accid.ges="n" /> <note xml:id="note-L10F3" type="marked" dur="4" oct="4" pname="d" color="royalblue" accid.ges="n" /> </layer> </staff> <staff xml:id="staff-L1F2" n="3"> <layer xml:id="layer-L1F2N1" n="1"> <note xml:id="note-L7F2" type="marked" dur="4" oct="3" pname="b" color="skyblue" accid.ges="n" /> <beam xml:id="beam-L8F2-L9F2"> <note xml:id="note-L8F2" type="marked" dur="8" oct="4" pname="c" color="limegreen" accid.ges="n" /> <note xml:id="note-L9F2" dur="8" oct="3" pname="b" accid.ges="n" /> </beam> <note xml:id="note-L10F2" type="marked" dur="4" oct="3" pname="a" color="royalblue" accid.ges="n" /> </layer> </staff> <staff xml:id="staff-L1F1" n="4"> <layer xml:id="layer-L1F1N1" n="1"> <note xml:id="note-L7F1" type="marked" dur="4" oct="3" pname="g" color="skyblue" accid.ges="n" /> <note xml:id="note-L8F1" type="marked" dur="4" oct="3" pname="e" color="limegreen" accid.ges="n" /> <note xml:id="note-L10F1" type="marked" dur="4" oct="3" pname="f" color="royalblue" accid.ges="s" /> </layer> </staff> </measure> </section> </score> </mdiv> </body> </music> </mei> ``` </details> <p>Current rendering:</p> <img width="265" alt="Screenshot 2023-02-27 at 12 46 55 PM" src="https://user-images.githubusercontent.com/3487289/221681900-530b2af9-cef7-4cf0-a2bc-70e480f0cbcd.png"> <p>The half note G in the top part should be colored light blue (or blue-green since it is also has a green marking on it).</p> <p>The cause of the problem is that a mixture color is being attempted, but it returns black because symbolic colors are being used. When numeric colors are used, the half note is given a blue-green color:</p> <pre><code class="language-tsv">**kern **kern **kern **kern *clefF4 *clefGv2 *clefG2 *clefG2 *k[f#] *k[f#] *k[f#] *k[f#] *G: *G: *G: *G: *M3/4 *M3/4 *M3/4 *M3/4 =1 =1 =1 =1 4GN 4BN 4dN 2gN@ 4E@ 8cL@ 4e@ . . 8BJ . . 4F#| 4A| 4d| 4dd| = = = = *- *- *- *- !!!RDF**kern: @ = marked note, color="#33cd32" !!!RDF**kern: | = marked note, color="#4269e1" !!!RDF**kern: N = marked note, color="#88cceb"</code></pre> <details> <summary> Click to view MEI data for above example </summary> ```xml <?xml version="1.0" encoding="UTF-8"?> <?xml-model href="https://music-encoding.org/schema/dev/mei-all.rng" type="application/xml" schematypens="http://relaxng.org/ns/structure/1.0"?> <?xml-model href="https://music-encoding.org/schema/dev/mei-all.rng" type="application/xml" schematypens="http://purl.oclc.org/dsdl/schematron"?> <mei xmlns="http://www.music-encoding.org/ns/mei" meiversion="5.0.0-dev"> <meiHead> <fileDesc> <titleStmt> <title /> </titleStmt> <pubStmt /> </fileDesc> <encodingDesc> <appInfo> <application isodate="2023-02-27T12:56:54" version="3.15.0-dev-5260bd2-dirty"> <name>Verovio</name> <p>Transcoded from Humdrum</p> </application> </appInfo> </encodingDesc> <workList> <work> <title /> </work> </workList> <extMeta> <frames xmlns="http://www.humdrum.org/ns/humxml"> <metaFrame n="12" token="!!!RDF**kern: @ = marked note, color="#33cd32"" xml:id="L13"> <frameInfo> <startTime float="3" /> <frameType>reference</frameType> <referenceKey>RDF**kern</referenceKey> <referenceValue>@ = marked note, color="#33cd32"</referenceValue> </frameInfo> </metaFrame> <metaFrame n="13" token="!!!RDF**kern: | = marked note, color="#4269e1"" xml:id="L14"> <frameInfo> <startTime float="3" /> <frameType>reference</frameType> <referenceKey>RDF**kern</referenceKey> <referenceValue>| = marked note, color="#4269e1"</referenceValue> </frameInfo> </metaFrame> <metaFrame n="14" token="!!!RDF**kern: N = marked note, color="#88cceb"" xml:id="L15"> <frameInfo> <startTime float="3" /> <frameType>reference</frameType> <referenceKey>RDF**kern</referenceKey> <referenceValue>N = marked note, color="#88cceb"</referenceValue> </frameInfo> </metaFrame> </frames> </extMeta> </meiHead> <music> <body> <mdiv xml:id="m11aac9y"> <score xml:id="s1ed5jfy"> <scoreDef xml:id="syommb4"> <staffGrp xml:id="s19neh30" symbol="bracket"> <staffDef xml:id="staffdef-L1F4" n="1" lines="5"> <clef xml:id="clef-L2F4" shape="G" line="2" /> <keySig xml:id="keysig-L3F4" pname="g" mode="major" sig="1s" /> <meterSig xml:id="metersig-L5F4" count="3" unit="4" /> </staffDef> <staffDef xml:id="staffdef-L1F3" n="2" lines="5"> <clef xml:id="clef-L2F3" shape="G" line="2" /> <keySig xml:id="keysig-L3F3" pname="g" mode="major" sig="1s" /> <meterSig xml:id="metersig-L5F3" count="3" unit="4" /> </staffDef> <staffDef xml:id="staffdef-L1F2" n="3" lines="5"> <clef xml:id="clef-L2F2" shape="G" line="2" dis="8" dis.place="below" /> <keySig xml:id="keysig-L3F2" pname="g" mode="major" sig="1s" /> <meterSig xml:id="metersig-L5F2" count="3" unit="4" /> </staffDef> <staffDef xml:id="staffdef-L1F1" n="4" lines="5"> <clef xml:id="clef-L2F1" shape="F" line="4" /> <keySig xml:id="keysig-L3F1" pname="g" mode="major" sig="1s" /> <meterSig xml:id="metersig-L5F1" count="3" unit="4" /> </staffDef> </staffGrp> </scoreDef> <section xml:id="section-L1F1"> <measure xml:id="measure-L1" n="1"> <staff xml:id="staff-L1F4" n="1"> <layer xml:id="layer-L1F4N1" n="1"> <note xml:id="note-L7F4" type="marked marked" dur="2" oct="4" pname="g" color="#5DCC8E" accid.ges="n" /> <note xml:id="note-L10F4" type="marked" dur="4" oct="5" pname="d" color="#4269e1" accid.ges="n" /> </layer> </staff> <staff xml:id="staff-L1F3" n="2"> <layer xml:id="layer-L1F3N1" n="1"> <note xml:id="note-L7F3" type="marked" dur="4" oct="4" pname="d" color="#88cceb" accid.ges="n" /> <note xml:id="note-L8F3" type="marked" dur="4" oct="4" pname="e" color="#33cd32" accid.ges="n" /> <note xml:id="note-L10F3" type="marked" dur="4" oct="4" pname="d" color="#4269e1" accid.ges="n" /> </layer> </staff> <staff xml:id="staff-L1F2" n="3"> <layer xml:id="layer-L1F2N1" n="1"> <note xml:id="note-L7F2" type="marked" dur="4" oct="3" pname="b" color="#88cceb" accid.ges="n" /> <beam xml:id="beam-L8F2-L9F2"> <note xml:id="note-L8F2" type="marked" dur="8" oct="4" pname="c" color="#33cd32" accid.ges="n" /> <note xml:id="note-L9F2" dur="8" oct="3" pname="b" accid.ges="n" /> </beam> <note xml:id="note-L10F2" type="marked" dur="4" oct="3" pname="a" color="#4269e1" accid.ges="n" /> </layer> </staff> <staff xml:id="staff-L1F1" n="4"> <layer xml:id="layer-L1F1N1" n="1"> <note xml:id="note-L7F1" type="marked" dur="4" oct="3" pname="g" color="#88cceb" accid.ges="n" /> <note xml:id="note-L8F1" type="marked" dur="4" oct="3" pname="e" color="#33cd32" accid.ges="n" /> <note xml:id="note-L10F1" type="marked" dur="4" oct="3" pname="f" color="#4269e1" accid.ges="s" /> </layer> </staff> </measure> </section> </score> </mdiv> </body> </music> </mei> ``` </details> <p>Rendering:</p> <img width="518" alt="Screenshot 2023-02-27 at 12 56 29 PM" src="https://user-images.githubusercontent.com/3487289/221683845-ac2a2de9-d44b-4869-ad9a-98d7883f8208.png"> <p>So when symbolic colors names are used, either return the first color instead of black, or convert the symbolic colors to a numeric color. Here is discussion about doing that: <a rel="noreferrer nofollow" target="_blank" href="https://stackoverflow.com/questions/1573053/javascript-function-to-convert-color-names-to-hex-codes">https://stackoverflow.com/questions/1573053/javascript-function-to-convert-color-names-to-hex-codes</a></p> <p>Here is a C++ map to store the mappings:</p> <pre><code class="language-cpp">std::map<std::string, std::string> ColorNameToHex = { {"aliceblue", "#f0f8ff"}, {"antiquewhite", "#faebd7"}, {"aqua", "#00ffff"}, {"aquamarine", "#7fffd4"}, {"azure", "#f0ffff"}, {"beige", "#f5f5dc"}, {"bisque", "#ffe4c4"}, {"black", "#000000"}, {"blanchedalmond", "#ffebcd"}, {"blue", "#0000ff"}, {"blueviolet", "#8a2be2"}, {"brown", "#a52a2a"}, {"burlywood", "#deb887"}, {"cadetblue", "#5f9ea0"}, {"chartreuse", "#7fff00"}, {"chocolate", "#d2691e"}, {"coral", "#ff7f50"}, {"cornflowerblue", "#6495ed"}, {"cornsilk", "#fff8dc"}, {"crimson", "#dc143c"}, {"cyan", "#00ffff"}, {"darkblue", "#00008b"}, {"darkcyan", "#008b8b"}, {"darkgoldenrod", "#b8860b"}, {"darkgray", "#a9a9a9"}, {"darkgrey", "#a9a9a9"}, {"darkgreen", "#006400"}, {"darkkhaki", "#bdb76b"}, {"darkmagenta", "#8b008b"}, {"darkolivegreen", "#556b2f"}, {"darkorange", "#ff8c00"}, {"darkorchid", "#9932cc"}, {"darkred", "#8b0000"}, {"darksalmon", "#e9967a"}, {"darkseagreen", "#8fbc8f"}, {"darkslateblue", "#483d8b"}, {"darkslategray", "#2f4f4f"}, {"darkslategrey", "#2f4f4f"}, {"darkturquoise", "#00ced1"}, {"darkviolet", "#9400d3"}, {"deeppink", "#ff1493"}, {"deepskyblue", "#00bfff"}, {"dimgray", "#696969"}, {"dimgrey", "#696969"}, {"dodgerblue", "#1e90ff"}, {"firebrick", "#b22222"}, {"floralwhite", "#fffaf0"}, {"forestgreen", "#228b22"}, {"fuchsia", "#ff00ff"}, {"gainsboro", "#dcdcdc"}, {"ghostwhite", "#f8f8ff"}, {"gold", "#ffd700"}, {"goldenrod", "#daa520"}, {"gray", "#808080"}, {"grey", "#808080"}, {"green", "#008000"}, {"greenyellow", "#adff2f"}, {"honeydew", "#f0fff0"}, {"hotpink", "#ff69b4"}, {"indianred ", "#cd5c5c"}, {"indigo", "#4b0082"}, {"ivory", "#fffff0"}, {"khaki", "#f0e68c"}, {"lavender", "#e6e6fa"}, {"lavenderblush", "#fff0f5"}, {"lawngreen", "#7cfc00"}, {"lemonchiffon", "#fffacd"}, {"lightblue", "#add8e6"}, {"lightcoral", "#f08080"}, {"lightcyan", "#e0ffff"}, {"lightgoldenrodyellow", "#fafad2"}, {"lightgray", "#d3d3d3"}, {"lightgrey", "#d3d3d3"}, {"lightgreen", "#90ee90"}, {"lightpink", "#ffb6c1"}, {"lightsalmon", "#ffa07a"}, {"lightseagreen", "#20b2aa"}, {"lightskyblue", "#87cefa"}, {"lightslategray", "#778899"}, {"lightslategrey", "#778899"}, {"lightsteelblue", "#b0c4de"}, {"lightyellow", "#ffffe0"}, {"lime", "#00ff00"}, {"limegreen", "#32cd32"}, {"linen", "#faf0e6"}, {"magenta", "#ff00ff"}, {"maroon", "#800000"}, {"mediumaquamarine", "#66cdaa"}, {"mediumblue", "#0000cd"}, {"mediumorchid", "#ba55d3"}, {"mediumpurple", "#9370d8"}, {"mediumseagreen", "#3cb371"}, {"mediumslateblue", "#7b68ee"}, {"mediumspringgreen", "#00fa9a"}, {"mediumturquoise", "#48d1cc"}, {"mediumvioletred", "#c71585"}, {"midnightblue", "#191970"}, {"mintcream", "#f5fffa"}, {"mistyrose", "#ffe4e1"}, {"moccasin", "#ffe4b5"}, {"navajowhite", "#ffdead"}, {"navy", "#000080"}, {"oldlace", "#fdf5e6"}, {"olive", "#808000"}, {"olivedrab", "#6b8e23"}, {"orange", "#ffa500"}, {"orangered", "#ff4500"}, {"orchid", "#da70d6"}, {"palegoldenrod", "#eee8aa"}, {"palegreen", "#98fb98"}, {"paleturquoise", "#afeeee"}, {"palevioletred", "#d87093"}, {"papayawhip", "#ffefd5"}, {"peachpuff", "#ffdab9"}, {"peru", "#cd853f"}, {"pink", "#ffc0cb"}, {"plum", "#dda0dd"}, {"powderblue", "#b0e0e6"}, {"purple", "#800080"}, {"rebeccapurple", "#663399"}, {"red", "#ff0000"}, {"rosybrown", "#bc8f8f"}, {"royalblue", "#4169e1"}, {"saddlebrown", "#8b4513"}, {"salmon", "#fa8072"}, {"sandybrown", "#f4a460"}, {"seagreen", "#2e8b57"}, {"seashell", "#fff5ee"}, {"sienna", "#a0522d"}, {"silver", "#c0c0c0"}, {"skyblue", "#87ceeb"}, {"slateblue", "#6a5acd"}, {"slategray", "#708090"}, {"slategrey", "#708090"}, {"snow", "#fffafa"}, {"springgreen", "#00ff7f"}, {"steelblue", "#4682b4"}, {"tan", "#d2b48c"}, {"teal", "#008080"}, {"thistle", "#d8bfd8"}, {"tomato", "#ff6347"}, {"turquoise", "#40e0d0"}, {"violet", "#ee82ee"}, {"wheat", "#f5deb3"}, {"white", "#ffffff"}, {"whitesmoke", "#f5f5f5"}, {"yellow", "#ffff00"}, {"yellowgreen", "#9acd32"} };</code></pre> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/craigsapp"><img src="https://avatars.githubusercontent.com/u/3487289?v=4" />craigsapp</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>Fixed with commit <a href="https://github.com/craigsapp/humlib/commit/50fe344ef0882bf6aa82d7d300ff5b06947c8e7a">https://github.com/craigsapp/humlib/commit/50fe344ef0882bf6aa82d7d300ff5b06947c8e7a</a></p> <p>The problem was due to a typo in checking if the color string was empty.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/craigsapp"><img src="https://avatars.githubusercontent.com/u/3487289?v=4" />craigsapp</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>Here is the view in VHV:</p> <img width="1107" alt="Screenshot 2023-02-28 at 12 48 24 AM" src="https://user-images.githubusercontent.com/3487289/221801060-ef6b30bc-497d-4b7b-bcd9-3207b7751b9a.png"> <p>The named colors are now being mixed so that the half note ls blue-green. </p> <p>A problem is that the VHV CSS styling is using red for marked notes, and the note stems are being displayed in red (but the noteheads are using the SVG-embedded colors).</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/craigsapp"><img src="https://avatars.githubusercontent.com/u/3487289?v=4" />craigsapp</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>Commit <a href="https://github.com/rism-digital/verovio/commit/81f6737e190ab693b6372779ce0dcbfafd5da4da">https://github.com/rism-digital/verovio/commit/81f6737e190ab693b6372779ce0dcbfafd5da4da</a> changes the class for colored notes from <code>marked</code> to <code>color-marked</code> to avoid collision with VHV css styling of marked notes, which have a default color of red if no SVG color is added to the marked note.</p> <p>Now the view in VHV is correct with mixed-colored notes when they have two different color markers, and the stems are no longer red from VHV CSS styling:</p> <img width="645" alt="Screenshot 2023-02-28 at 2 37 21 AM" src="https://user-images.githubusercontent.com/3487289/221829668-b169557e-e784-446f-adbc-61ea9de1d683.png"> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>