amiller/glass.html

## glass.html
<html style="width:100%; height:100%; overflow:hidden">
<body style="width:100%; height:100%; overflow:hidden; margin:0">
<canvas id="offscreen" width="640" height="360" style="display:hidden"></canvas>
<script>
function drawCircle(x, y) {
    var width = 640;
    var height = 360;
    var c = document.getElementById("offscreen");
    var ctx = c.getContext("2d");
    ctx.fillStyle = 'black'
    ctx.fillRect(0, 0, width, height);
    for (var i = 0; i < 50; i++) {
        ctx.beginPath();
        ctx.arc(x,y,10+15*i,0,2*Math.PI);
        ctx.closePath();
        ctx.strokeStyle = 'red'
        ctx.stroke();
    }
    var dataURL = c.toDataURL();
    return dataURL; // Need to strip prefix?
}
function cb(h) {
    WS.log(h)
}
function HMultPoint(a, b) {
    var c = [0, 0, 0];
    c[2] = a[6] * b[0] + a[7] * b[1] + a[8];
    c[0] = (a[0] * b[0] + a[1] * b[1] + a[2]) / c[2];
    c[1] = (a[3] * b[0] + a[4] * b[1] + a[5]) / c[2];
    return [c[0], c[1]];
}

function server() {
    WS.cameraOn(.5, 360, 640);
    WS.displayWarpView();
    WS.subscribe('warptags:sample', function (channel, tags) {
        if (tags.length) {
            WS.say(tags[0][0]);
            var t = tags[0];
            var x = (t[1] + t[3] + t[5] + t[7]) / 4;
            var y = (t[2] + t[4] + t[6] + t[8]) / 4;
            WSRAW.warpSetOverlay(drawCircle(x, y).split(',')[1]);

            tags([0])
        } else {
            WS.say('no tag');
        }
    })

    function sample() {
        setTimeout(function (){
                WS.warpGlassToPreviewH(function (H) {
                    WS.log(JSON.stringify(H));
                    /*
                    var pt = HMultPoint(H.h, [640 / 2, 360 / 2]);
                    WSRAW.warpSetOverlay(drawCircle(pt[0], pt[1]).split(',')[1]);
                    WS.log(JSON.stringify(pt))
                    */
            });
        }, 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;
    WS.serverConnect('ws://192.168.1.30:8080', 'server');
}
window.onload = main;
</script>
</body>
</html>

## manifest.json
{"name":"AR Warp with circles"}
	<html style="width:100%; height:100%; overflow:hidden">
	<body style="width:100%; height:100%; overflow:hidden; margin:0">
	<canvas id="offscreen" width="640" height="360" style="display:hidden"></canvas>
	<script>
	function drawCircle(x, y) {
	var width = 640;
	var height = 360;
	var c = document.getElementById("offscreen");
	var ctx = c.getContext("2d");
	ctx.fillStyle = 'black'
	ctx.fillRect(0, 0, width, height);
	for (var i = 0; i < 50; i++) {
	ctx.beginPath();
	ctx.arc(x,y,10+15i,0,2Math.PI);
	ctx.closePath();
	ctx.strokeStyle = 'red'
	ctx.stroke();
	}
	var dataURL = c.toDataURL();
	return dataURL; // Need to strip prefix?
	}
	function cb(h) {
	WS.log(h)
	}
	function HMultPoint(a, b) {
	var c = [0, 0, 0];
	c[2] = a[6] * b[0] + a[7] * b[1] + a[8];
	c[0] = (a[0] * b[0] + a[1] * b[1] + a[2]) / c[2];
	c[1] = (a[3] * b[0] + a[4] * b[1] + a[5]) / c[2];
	return [c[0], c[1]];
	}

	function server() {
	WS.cameraOn(.5, 360, 640);
	WS.displayWarpView();
	WS.subscribe('warptags:sample', function (channel, tags) {
	if (tags.length) {
	WS.say(tags[0][0]);
	var t = tags[0];
	var x = (t[1] + t[3] + t[5] + t[7]) / 4;
	var y = (t[2] + t[4] + t[6] + t[8]) / 4;
	WSRAW.warpSetOverlay(drawCircle(x, y).split(',')[1]);

	tags([0])
	} else {
	WS.say('no tag');
	}
	})

	function sample() {
	setTimeout(function (){
	WS.warpGlassToPreviewH(function (H) {
	WS.log(JSON.stringify(H));
	/*
	var pt = HMultPoint(H.h, [640 / 2, 360 / 2]);
	WSRAW.warpSetOverlay(drawCircle(pt[0], pt[1]).split(',')[1]);
	WS.log(JSON.stringify(pt))
	*/
	});
	}, 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;
	WS.serverConnect('ws://192.168.1.30:8080', 'server');
	}
	window.onload = main;
	</script>
	</body>
	</html>