| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="x-ua-compatible" content="ie=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <link rel="icon" href="favicon.ico" type="image/x-icon"/> |
| <link rel="stylesheet" href="examples-styles.css"/> |
|
|
| <title>abcjs: Annotating</title> |
| <script src="../dist/abcjs-basic.js" type="text/javascript"></script> |
| <script type="text/javascript"> |
| var abc = "T: New Exercise\n" + |
| "M: C\n" + |
| "L: 1/4\n" + |
| "K: C\n" + |
| 'V:1 name="Alto\\n[species 2]\\n[Sop.]"\n'+ |
| '"^1"c2"^2→"G2|B2d2|B2"^5→\\n6→".(A2|C4)|\n' + |
| 'V:2 clef=treble-8 name="Tenor\\n[c.f.]\\n[Alt.]"\n' + |
| '"^4. Consecutive leaps - - -"c4|e4|d4|c4|\n' + |
| 'w:H\n' + |
| 'w:F\n' + |
| 'w:I\n'; |
| |
| function load() { |
| ABCJS.renderAbc("paper", abc, { add_classes: true, staffwidth: 500 }); |
| annotate(); |
| } |
| |
| function annotate() { |
| var red = "#FF3018"; |
| var yellow = "#C9B203"; |
| |
| var els = document.querySelectorAll(".abcjs-annotation"); |
| var list = []; |
| list[0] = { el: els[0], color: yellow}; |
| list[1] = { el: els[1], color: yellow}; |
| list[2] = { el: els[2], color: red}; |
| list[3] = { el: els[3], color: red}; |
| setFlagColors(list); |
| |
| list = []; |
| list[0] = { |
| el1: document.querySelector(".abcjs-note.abcjs-l0.abcjs-v0.abcjs-m0.abcjs-n1"), |
| pos1: "bottom", |
| el2: document.querySelector(".abcjs-note.abcjs-l0.abcjs-v0.abcjs-m1.abcjs-n0"), |
| pos2: "top", |
| color: red, |
| text: "3" |
| } |
| list[1] = { |
| el1: document.querySelector(".abcjs-note.abcjs-l0.abcjs-v0.abcjs-m2.abcjs-n1"), |
| pos1: "bottom", |
| el2: document.querySelector(".abcjs-note.abcjs-l0.abcjs-v0.abcjs-m3.abcjs-n0"), |
| pos2: "top", |
| color: yellow, |
| text: "7" |
| } |
| list[2] = { |
| el1: document.querySelector(".abcjs-note.abcjs-l0.abcjs-v1.abcjs-m0.abcjs-n0"), |
| pos1: "bottom", |
| el2: document.querySelector(".abcjs-note.abcjs-l0.abcjs-v1.abcjs-m1.abcjs-n0"), |
| pos2: "top", |
| color: red, |
| text: "3" |
| } |
| list[3] = { |
| el1: document.querySelector(".abcjs-note.abcjs-l0.abcjs-v1.abcjs-m2.abcjs-n0"), |
| pos1: "bottom", |
| el2: document.querySelector(".abcjs-note.abcjs-l0.abcjs-v1.abcjs-m3.abcjs-n0"), |
| pos2: "top", |
| color: yellow, |
| text: "7" |
| } |
| setConnectors(list); |
| |
| setWordsLine(0, [ |
| { el: ".abcjs-note.abcjs-l0.abcjs-v0.abcjs-m0.abcjs-n0", text: "I" }, |
| { el: ".abcjs-note.abcjs-l0.abcjs-v0.abcjs-m1.abcjs-n0", text: "III7", background: yellow }, |
| { el: ".abcjs-note.abcjs-l0.abcjs-v0.abcjs-m2.abcjs-n0", text: "VII6" }, |
| { el: ".abcjs-note.abcjs-l0.abcjs-v0.abcjs-m2.abcjs-n1", text: "II", background: yellow }, |
| { el: ".abcjs-note.abcjs-l0.abcjs-v0.abcjs-m3.abcjs-n0", text: "I" }, |
| ] ); |
| |
| setWordsLine(1, [ |
| { el: ".abcjs-note.abcjs-l0.abcjs-v0.abcjs-m1.abcjs-n0", text: "8", color: yellow }, |
| { el: ".abcjs-note.abcjs-l0.abcjs-v0.abcjs-m2.abcjs-n1", text: "9\n10", color: yellow }, |
| ] ); |
| |
| setWordsLine(2, [ |
| { el: ".abcjs-note.abcjs-l0.abcjs-v0.abcjs-m0.abcjs-n1", text: "5", background: red }, |
| { el: ".abcjs-note.abcjs-l0.abcjs-v0.abcjs-m1.abcjs-n0", text: "5", background: red }, |
| { el: ".abcjs-note.abcjs-l0.abcjs-v0.abcjs-m3.abcjs-n0", text: "1", background: yellow }, |
| ] ); |
| } |
| |
| function setFlagColors(list) { |
| for (var i = 0; i < list.length; i++) { |
| var item = list[i]; |
| item.el.style = "fill:" + item.color + ";"; |
| } |
| } |
| |
| function setConnectors(list) { |
| for (var i = 0; i < list.length; i++) { |
| var item = list[i]; |
| var el1 = item.el1.getBBox(); |
| var el2 = item.el2.getBBox(); |
| var x1 = el1.x + el1.width + 3; |
| var y1 = item.pos1 === "top" ? el1.y + 3 : el1.y + el1.height - 6; |
| var x2 = el2.x - 3; |
| var y2 = item.pos2 === "top" ? el2.y + 3 : el2.y + el2.height; |
| drawLine({ x1: x1, y1: y1, x2: x2, y2: y2, stroke: item.color }); |
| drawText({ text: item.text, x: x1 + (x2 - x1)/2, y: y1 + (y2 - y1)/2, fill: item.color }) |
| } |
| } |
| |
| function setWordsLine(line, list) { |
| var svg = document.querySelector("#paper svg"); |
| var place = document.querySelector(".abcjs-lyric"); |
| var pos = place.getBBox(); |
| var y = 20 + pos.y + line * 20; |
| for (var i = 0; i < list.length; i++) { |
| var item = list[i]; |
| var el = document.querySelector(item.el); |
| var x = el.getBBox().x + el.getBBox().width/2; |
| drawText({ x: x, y: y, fill: item.color, background: item.background, text: item.text }); |
| } |
| } |
| |
| var svgNS = "http://www.w3.org/2000/svg"; |
| |
| function drawLine(attr) { |
| var svg = document.querySelector("#paper svg"); |
| var el = document.createElementNS(svgNS, 'line'); |
| el.setAttribute("x1", attr.x1); |
| el.setAttribute("x2", attr.x2); |
| el.setAttribute("y1", attr.y1); |
| el.setAttribute("y2", attr.y2); |
| el.setAttribute("stroke", attr.stroke); |
| el.setAttribute("stroke-width", 2); |
| svg.appendChild(el); |
| } |
| |
| function drawText(attr) { |
| var svg = document.querySelector("#paper svg"); |
| var el = document.createElementNS(svgNS, 'text'); |
| el.setAttribute("x", attr.x); |
| el.setAttribute("y", attr.y); |
| if (attr.fill) { |
| el.setAttribute("fill", attr.fill); |
| el.setAttribute("stroke", attr.fill); |
| } |
| el.textContent = attr.text; |
| |
| svg.appendChild(el); |
| } |
| |
| </script> |
| <style> |
| .abcjs-slur { |
| stroke-width: 2; |
| stroke: red; |
| } |
| .abcjs-lyric { |
| fill: none; |
| } |
| label { |
| display:block; |
| } |
| </style> |
| </head> |
| <body onload="load()"> |
| <header> |
| <img src="https://paulrosen.github.io/abcjs/img/abcjs_comp_extended_08.svg" alt="abcjs logo"> |
| <h1>Annotation</h1> |
| </header> |
| <div class="container"> |
| <p> |
| This is a simple example of how elements can be found on the page and how |
| annotations can be drawn. |
| </p> |
| <p>1) Note that annotations above the staves are written into the ABC notation using the syntax "^text".</p> |
| <p>2) Note that room is created for annotations below the staves by creating a w: line and then setting its fill to none on the stylesheet.</p> |
| <p>3) Note that the notes are retrieved by their unique class and their position is retrieved. When the music is changed, |
| this will automatically move the drawn lines to the right place.</p> |
| <div id="paper"></div> |
|
|
| <label for="abc">ABC Notation:</label> |
| <textarea id="abc" cols="50" rows="12" spellcheck="false"> |
| T: New Exercise |
| M: C |
| L: 1/4 |
| K: C |
| V: 1 name="Alto\n[species 2]\n[Sop.]" |
| "^1"c2"^2→"G2|B2d2|B2"^5→\n6→".(A2|C4)| |
| V: 2 clef=treble-8 name="Tenor\n[c.f.]\n[Alt.]" |
| "^4. Consecutive leaps - - -"c4|e4|d4|c4| |
| W: Set this line's fill to none to make space for annotations below the staff. |
| </textarea> |
| <p>Note that \ is a character which must be escaped in JavaScript.</p> |
| </div> |
| </body> |
| </html> |
|
|
