| <!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: Basic Demo</title> |
| <script src="../dist/abcjs-basic.js" type="text/javascript"></script> |
| <script type="text/javascript"> |
| var abc = "T: Cooley's\n" + |
| "%%measurenb 1\n" + |
| "M: 4/4\n" + |
| "L: 1/8\n" + |
| "R: reel\n" + |
| "K: Emin\n" + |
| "EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|\n" + |
| "EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2D2|\n" + |
| "EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|\n" + |
| "EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2gf|\n" + |
| "eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg|\n" + |
| "eB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2gf|\n" + |
| "eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg|\n" + |
| "eB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2|]"; |
| |
| var minSpacing = 1.8; |
| var maxSpacing = 2.8; |
| var preferredMeasuresPerLine = 4; |
| var staffwidth = 900; |
| |
| function redraw() { |
| ABCJS.renderAbc("paper", abc, { |
| wrap: { |
| minSpacing: minSpacing, |
| maxSpacing: maxSpacing, |
| preferredMeasuresPerLine: preferredMeasuresPerLine |
| }, |
| staffwidth: staffwidth |
| }); |
| } |
| |
| function load() { |
| var el = document.querySelector("#parameters"); |
| el.addEventListener("submit", changeParameters); |
| redraw(); |
| } |
| |
| function changeParameters(ev) { |
| ev.preventDefault(); |
| var data = new FormData( ev.target); |
| minSpacing = data.get("min"); |
| maxSpacing = data.get("max"); |
| preferredMeasuresPerLine = data.get("measures"); |
| staffwidth = data.get("width"); |
| redraw(); |
| } |
| |
| </script> |
| <style> |
| #paper { |
| display: flex; |
| justify-content: center; |
| width: auto; |
| } |
| form { |
| margin: 0 auto 30px auto; |
| max-width: 800px; |
| display: flex; |
| } |
| label { |
| margin: 0 3px; |
| } |
| </style> |
| </head> |
| <body onload="load()"> |
| <header> |
| <img src="https://paulrosen.github.io/abcjs/img/abcjs_comp_extended_08.svg" alt="abcjs logo"> |
| <h1>Wrap</h1> |
| </header> |
| <form id="parameters"> |
| <label>Total width: <input id="width" name="width" type="number" min="300" max="2000" step="10" value="900"></label> |
| <label>Preferred measures per line: <input id="measures" name="measures" type="number" min="0" max="32" step="1" value="4"></label> |
| <label>Minimum spacing: <input id="min" name="min" type="number" min="0" max="5" step=".1" value="1.8"></label> |
| <label>Maximum spacing: <input id="max" name="max" type="number" min="0" max="5" step=".1" value="2.8"></label> |
| <button type="submit">Redraw</button> |
| </form> |
| <div id="paper" class="visible-background"></div> |
| </body> |
| </html> |
|
|
