amiller/glass.html

## glass.html
<html style="width:100%; height:100%; overflow:hidden">
<head>
    <script src="http://webgl-mjs.googlecode.com/hg/mjs.js" type="text/javascript"></script>
</head>
<body style="width:100%; height:100%; overflow:hidden; margin:0">
<canvas id="offscreen" width="1280" height="720" style="visibility:hidden"></canvas>
<canvas id="canvas" width="640" height="360" style="display:block"></canvas>
<script>
var d = [1, 2, 0, 0, 3, 4, 0, 0,   0, 0, 0, 0,  0, 0, 0, 0];
var e = [5, 6, 0, 0, 1, 1, 0, 0,   0, 0, 0, 0,  0, 0, 0, 0];
var f = M4x4.mul(d, e);
WS.log(JSON.stringify(f));

function drawCircle(x, y) {
    var width = 1280;
    var height = 720;
    var c = document.getElementById("offscreen");
    var ctx = c.getContext("2d");
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, width, height);
    for (var i = 0; i < 40; i++) {
        ctx.beginPath();
        ctx.arc(x,y,10+15*i,0,2*Math.PI);
        ctx.closePath();
        ctx.strokeStyle = 'red';
        ctx.lineWidth = 3;
        ctx.stroke();
    }
    var dataURL = c.toDataURL();
    return dataURL;
}

function server() {
    WS.cameraOn(2, 720, 1280);
    //WS.displayWarpView();
    function sample() {
        setTimeout(function (){
            // Do something with data URL here
            var data = drawCircle(1280/2, 720/2);
            WS.log(data);
            WS.log(data.length);
            //WS.warpDraw(640 / 2, 360 / 2, 10, 255, 0, 0);
        }, 1500)
        //WS.warpPreviewSampleGlass('');
    }
    WS.dataLog(false, true, .15);
    WS.gestureCallback('onGesture', function (gesture) {
        if (gesture === 'TAP') {
            WS.sound('SUCCESS');
            sample();
        }
    });
}
function main() {
    if (WS.scriptVersion(1)) return;
    ctx = document.getElementById('canvas').getContext("2d");
    WS.serverConnect('{{WSUrl}}', 'server');
}
window.onload = main;
</script>
</body>
</html>
	<html style="width:100%; height:100%; overflow:hidden">
	<head>
	<script src="http://webgl-mjs.googlecode.com/hg/mjs.js" type="text/javascript"></script>
	</head>
	<body style="width:100%; height:100%; overflow:hidden; margin:0">
	<canvas id="offscreen" width="1280" height="720" style="visibility:hidden"></canvas>
	<canvas id="canvas" width="640" height="360" style="display:block"></canvas>
	<script>
	var d = [1, 2, 0, 0, 3, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
	var e = [5, 6, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
	var f = M4x4.mul(d, e);
	WS.log(JSON.stringify(f));

	function drawCircle(x, y) {
	var width = 1280;
	var height = 720;
	var c = document.getElementById("offscreen");
	var ctx = c.getContext("2d");
	ctx.fillStyle = 'black';
	ctx.fillRect(0, 0, width, height);
	for (var i = 0; i < 40; i++) {
	ctx.beginPath();
	ctx.arc(x,y,10+15i,0,2Math.PI);
	ctx.closePath();
	ctx.strokeStyle = 'red';
	ctx.lineWidth = 3;
	ctx.stroke();
	}
	var dataURL = c.toDataURL();
	return dataURL;
	}

	function server() {
	WS.cameraOn(2, 720, 1280);
	//WS.displayWarpView();
	function sample() {
	setTimeout(function (){
	// Do something with data URL here
	var data = drawCircle(1280/2, 720/2);
	WS.log(data);
	WS.log(data.length);
	//WS.warpDraw(640 / 2, 360 / 2, 10, 255, 0, 0);
	}, 1500)
	//WS.warpPreviewSampleGlass('');
	}
	WS.dataLog(false, true, .15);
	WS.gestureCallback('onGesture', function (gesture) {
	if (gesture === 'TAP') {
	WS.sound('SUCCESS');
	sample();
	}
	});
	}
	function main() {
	if (WS.scriptVersion(1)) return;
	ctx = document.getElementById('canvas').getContext("2d");
	WS.serverConnect('{{WSUrl}}', 'server');
	}
	window.onload = main;
	</script>
	</body>
	</html>