<!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: Glyph Demo</title>
	<script src="../dist/abcjs-basic.js" type="text/javascript"></script>
	<script type="text/javascript">
		var abc1 = "X:1\nT:Quarter Tones\n%%scale 3\nK: C ^/f _/B\n_/C^/C _/c^/c _/B^/B|\n";
		var abc2 = "X:1\nT:Koron and Sori\n%%scale 3\nK: C ^/f _/B\n_/C^/C _/c^/c _/B^/B|\n";

		var koron = { d: [
				['M',0,-4],
				['l', 0, 20],
				['l', 1.5, 0],
				['l', 0, -12],
				['l', 8.5, -4],
				['l', -8.5, -4],
				['l', 0, 1.5],
				['l', 6, 2.5],
				['l', -6, 2.5],
				['l', 0, -6.5],
				['z']],w:10,h:20
		};

		var sori = { d: [
				['M',0,-9],
				// left vertical line
				['m',3,0.82],
				['l',0, 19.18],
				['l', 1.70, 0],
				['l', 0, -19.18],
				['z'],

				// right vertical line
				['m',3.06,-0.82],
				['l',0, 19.18],
				['l', 1.7, 0],
				['l', 0, -19.18],
				['z'],

				// top diagonal line
				['m', -6.06,3.2],
				['l', 3, 1.29],
				['l',0, 1.39],
				['l',-3,-1.29],
				['l',0,-1.39],
				['z'],
				['m', 4.7,1.95],
				['l', 1.25, .6],
				['l',0, 1.39],
				['l',-1.25,-.6],
				['l',0,-1.39],
				['z'],
				['m', 3,1.3],
				['l', 4.5, 2.5],
				['l', -2.25,0],
				['l',-2.2,-1.1],
				['l',0,-1.39],
				['z'],

				// bottom diagonal line
				['m', 0,5],
				['l', 4.5, -2.5],
				['l', -2.25,0],
				['l',-2.2,1.1],
				['l',0,1.39],
				['z'],
				['m', -3,1.5],
				['l', 1.25, -.6],
				['l',0, -1.39],
				['l',-1.25,.6],
				['l',0,1.39],
				['z'],
				['m', -4.2,1.7],
				['l', 3, -1.29],
				['l',0, -1.39],
				['l',-3,1.29],
				['l',0,1.39],
				['z']],w:15,h:20
		};

		function load() {
			ABCJS.renderAbc("paper1", abc1);
			ABCJS.setGlyph('accidentals.halfflat', koron);
			ABCJS.setGlyph('accidentals.halfsharp', sori);
			ABCJS.renderAbc("paper2", abc2);
		}

	</script>
</head>
<body onload="load()">
  <header>
    <img src="https://paulrosen.github.io/abcjs/img/abcjs_comp_extended_08.svg" alt="abcjs logo">
    <h1>Changing Glyphs</h1>
  </header>
  <div class="container">
    <p>
      This is an example of modifying the font used to create the music. In this case, the <b>quarter sharp</b>
      and <b>quarter flat</b> symbols are changed to the Koron and Sori symbols.
    </p>
    <p>
      The path supplied must use <b>relative</b> positioning.
    </p>
    <p>
      NOTE: Use this feature at your own risk because the format of the font may change in the future!
    </p>
    <div id="paper1"></div>
    <div id="paper2"></div>
  </div> 
</body>
</html>