|
|
<!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> |
|
|
|
