<html>
<head>
<link rel="stylesheet" href="guidostylesheet.css" type="text/css" charset="utf-8" />
<script type="text/javascript" src="../../../lang/javascript/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../../../lang/javascript/js/jsBinaryDeviceParser.js"></script>
<script type="text/javascript" src="../../../lang/javascript/js/jsCanvasDeviceFromBinary.js"></script>
<script type="text/javascript" src="server.js"></script>
<script>
function processGMN() {
$.post(guidoservice, "data="+encodeURIComponent($("#gmnSandbox").val()), function(data) {
var xhr = new XMLHttpRequest();
xhr.open('GET',guidoservice+data.ID+"/?format=binary", true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
console.log(this.status);
if (this.status == 201) {
success = true;
console.log(new Uint8Array(this.response));
gU1D0pAR$ER.parseGuidoBinary(this.response, 0, {verbose:true});
$("#warning").text("");
}
}
xhr.send();
}).fail(function() {
$("#warning").text("The GMN code above contains a syntax error.");
});
$("#warning").text("Processing . . .");
}
$(function () {
console.log("loading");
$("#gmnSandbox").on('keyup', processGMN);
gU1D0cANVA$.initGuidoCanvas();
processGMN();
});
</script>
<style type="text/css">
div.column {
display: block;
width: 50%;
}
#gmnSandbox {
width: 95%;
}
#guidoResult {
/*border: 0px;*/
}
</style>
</head>
<body>
<div class="column" style="float:left">
<p>Type your GMN code here:</p>
<textarea id="gmnSandbox" rows="40">
[a b c d]
</textarea>
</div>
<div id="canvasContainer" class="column" style="float:right">
<canvas>
</canvas>
</div>
<div style="clear:both;"></div>
<div id="warning"></div>
<!-- need to insert dummy paragraph to load font -->
<p style="visibility:hidden;font-family:Guido2;">a</p>
</body>
</html>
