<html>
<head>
<title>Vex Glyphs</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
body {
padding: 20px;
background: white;
font-family: Caslon, Garamond, Arial, Helvetica, sans-serif;
font-size: 18px;
color: green;
margin: 0px;
height: 80%;
}
a {
color: #green;
text-decoration: none;
border-bottom: dotted 2px;
}
a.button {
color: #green;
background: #bfb;
text-decoration: none;
padding: 5px;
margin: 2px;
border: 5px solid #aea;
}
div#error {
width: 60%;
padding: 10px;
color: red;
background: #faa;
border: 15px solid #d99;
}
</style>
<script src="vex.js"></script>
<script src="flow.js"></script>
<!-- Replace font below with transform font -->
<script src="fonts/gonville_all.js"></script>
<script src="glyph.js"></script>
<script>
$(function() {
var canvas = document.getElementById("glyphs");
var x = 0;
var y = 40;
// List of glyphs that we want
var valid_glyphs = {
"v0": true, "v1": true, "v2": true, "v3": true,
"v4": true, "v5": true, "v6": true, "v7": true,
"v8": true, "v9": true, "va": true, "vb": true,
"vc": true, "v10": true, "v11": true, "v18": true, "v1b": true,
"v1d": true, "v1e": true, "v1f": true, "v22": true,
"v23": true, "v25": true, "v26": true,
"v28": true, "v2a": true, "v2d": true, "v2f": true,
"v33": true, "v3c": true, "v3e": true, "v3f": true,
"v41": true, "v42": true, "v43": true,
"v44": true, "v45": true, "v46": true, "v47": true,
"v4a": true, "v4d": true, "v4e": true, "v52": true,
"v54": true, "v55": true, "v5b": true, "v5c": true,
"v62": true, "v72": true, "v75": true,
"v79": true, "v7c": true, "v7f": true, "v80": true,
"v81": true, "v83": true, "v84": true, "v8b": true,
"v8c": true, "v8f": true, "v92": true, "v94": true,
"v95": true, "v97": true, "v9a": true, "v9c": true,
"va3": true, "va5": true, "vad": true, "vb6": true,
"vba": true, "vbc": true, "vbf": true, "vc3": true };
// Get number of glyphs and rename elements
var counter = 0;
var valid_counter = 1;
var tmp = null;
for (var glyph in Vex.Flow.Font.glyphs) {
var counter_key = "v" + (counter++).toString(16); // to hex
if (counter_key in valid_glyphs) {
valid_counter++;
tmp = Vex.Flow.Font.glyphs[glyph];
}
delete Vex.Flow.Font.glyphs[glyph];
if (tmp != null) {
Vex.Flow.Font.glyphs[counter_key] = tmp;
tmp = null;
}
}
delete Vex.Flow.Font.original_font_information;
Vex.Flow.Font.familyName = "VexFlow-18";
var canvas_height = ((valid_counter + 1) / (800 / (60 * 2))) * 60;
canvas.height = canvas_height + 25;
canvas.width = 800;
var ctx = canvas.getContext("2d");
ctx.font = "16pt Arial";
for (var glyph in Vex.Flow.Font.glyphs) {
ctx.fillStyle = "#666";
ctx.fillText(glyph, x, y);
x += 60;
ctx.strokeStyle = "#888";
ctx.beginPath();
ctx.moveTo(x - 5, y);
ctx.lineTo(x + 5, y);
ctx.stroke()
ctx.beginPath();
ctx.moveTo(x, y - 5);
ctx.lineTo(x, y + 5);
ctx.stroke()
ctx.fillStyle = "green";
Vex.Flow.renderGlyph(ctx, x, y, 40, glyph, true);
x += 60;
if (x >= 800) {
x = 0;
y += 60;
}
}
// Populate source with glyphs.
var final_source = "Vex.Flow.Font = " + JSON.stringify(Vex.Flow.Font)
+ ";";
$("#source").attr("value", final_source);
$("#download").click(function() {
document.location.href = 'data:application/x-javascript,' + final_source;
});
});
</script>
</head>
<body>
<center>
<h1>Vex Glyphs</h1>
<p>
<i>Cross indicates render coordinates.</i>
</p>
<canvas id="glyphs">
HTML5 Canvas not supported on this browser.
</canvas>
<p/>
<h3>Glyph Code</h3>
<a href="#" id="download">Download</a>
<p/>
<textarea id="source" style="width:800; height:200">
</textarea>
<p>
For more information visit <a href="http://0xfe.blogspot.com">0xfe.blogspot.com</a>.
</p>
</center>
</body>
</html>