bwhite/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>
HEIGHT = 360;
WIDTH = 640;

function drawCircle(x, y,tag) {
    var width = WIDTH;
    var height = HEIGHT;
    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();
    }
     ctx.font="20px Georgia";
     ctx.fillStyle="white"
    ctx.fillText(tag,x,y);
    var dataURL = c.toDataURL();
    return dataURL; // Need to strip prefix?
}

function rangeToTag(t) {
    // Crude distance estimation, based on the focal length of the glass
    // camera and the diagonal distance of the AR fiducial. This is only valid
    // when looking *head-on* at the the fiducial marker.
    var x0 = t[1];
    var y0 = t[2];
    var x1 = t[5];
    var y1 = t[6];
    var distPx = Math.sqrt((x0-x1)*(x0-x1) + (y0-y1)*(y0-y1));
    var focalLengthPx = 2968.5/8; // Focal length, for 640x360 view
    var distMeters = 0.287; // Diagonal size of AR tags printed out.
    var rangeMeters = distMeters * focalLengthPx / distPx;
    return rangeMeters;
}

function printTagName(x,y,tag) {
    var width = WIDTH;
    var height = HEIGHT;
    WS.log("Tag" + tag);
    var c = document.getElementById("offscreen");
    var ctx = c.getContext("2d");
    ctx.font="20px Georgia";
    ctx.fillStyle="blue"
    ctx.fillText(tag,x,y);

}

function getData() {
    var c = document.getElementById("offscreen");
    var ctx = c.getContext("2d");
     var dataURL = c.toDataURL();
    return dataURL; // Need to strip prefix?
}

function printClear() {
    var width = WIDTH;
    var height = HEIGHT;
    var c = document.getElementById("offscreen");
    var ctx = c.getContext("2d");
    ctx.fillStyle = 'black'
    ctx.fillRect(0, 0, width, height);
     var dataURL = c.toDataURL();
    return dataURL;
}

function setImage(imageb64) {
    var imageObj = new Image();
      imageObj.onload = function() {
        var c = document.getElementById("offscreen");
        var ctx = c.getContext("2d");
        ctx.drawImage(imageObj, 0, 0);
      };
      imageObj.src = 'data:image/jpg;base64,' + imageb64;
}

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(.25, HEIGHT, WIDTH);

    WS.cvInit(function () {
        WS.displayWarpView([3.0439236881258753, -0.09811170052611454, -1351.6367347302782, 0.03321587552236447, 3.053154626691264, -40.341560801335376, -0.00010172584427831437, -5.8759263127489935e-05, 1.0]);
        WS.log('inited');
            WS.picarusARTagFactory(function (model) {
            WS.say('Loaded');
            model.processWarpTargets(function (tags) {
                WS.log('Got tags: ' + JSON.stringify(tags));
                WS.log(JSON.stringify(tags));
                var out = 'Tag';
                for (var i = 0; i < tags.length; i++)
                    out += ' ' + tags[i].id;
                if (tags.length)
                    WS.say(out);
                var numTags = tags.length;
                printClear();
                //if (tags.length) {
                //return;
                //WS.say(tags[0].length + " tags. Range, " + Math.round(rangeToTag(tags[0])*10)/10. + " meters.");
                for(var cnt=0; cnt < numTags; cnt++) {
                    var x = 0;
                    var y = 0;
                    for (var i = 0; i < 4; i++) {
                        x += tags[cnt].xy[i][0];
                        y += tags[cnt].xy[i][1];
                    }
                    printTagName(x / 4, y / 4, tags[cnt].id);
                }
                WSRAW.warpSetOverlay(getData().split(',')[1]);
            });
        });
    });

    /*WS.subscribe('warptags:sample', function (channel, tags) {

    })*/

    function sample() {
        WS.warpPreviewSampleGlass(function (data) {
            WS.log('got data');
            setImage(data);
        });
    }
    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('{{WSUrl}}', 'server');
}
window.onload = main;
</script>
</body>
</html>

## manifest.json
{"name":"AR Tag Warping"}
	<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>
	HEIGHT = 360;
	WIDTH = 640;

	function drawCircle(x, y,tag) {
	var width = WIDTH;
	var height = HEIGHT;
	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();
	}
	ctx.font="20px Georgia";
	ctx.fillStyle="white"
	ctx.fillText(tag,x,y);
	var dataURL = c.toDataURL();
	return dataURL; // Need to strip prefix?
	}

	function rangeToTag(t) {
	// Crude distance estimation, based on the focal length of the glass
	// camera and the diagonal distance of the AR fiducial. This is only valid
	// when looking head-on at the the fiducial marker.
	var x0 = t[1];
	var y0 = t[2];
	var x1 = t[5];
	var y1 = t[6];
	var distPx = Math.sqrt((x0-x1)(x0-x1) + (y0-y1)(y0-y1));
	var focalLengthPx = 2968.5/8; // Focal length, for 640x360 view
	var distMeters = 0.287; // Diagonal size of AR tags printed out.
	var rangeMeters = distMeters * focalLengthPx / distPx;
	return rangeMeters;
	}

	function printTagName(x,y,tag) {
	var width = WIDTH;
	var height = HEIGHT;
	WS.log("Tag" + tag);
	var c = document.getElementById("offscreen");
	var ctx = c.getContext("2d");
	ctx.font="20px Georgia";
	ctx.fillStyle="blue"
	ctx.fillText(tag,x,y);

	}

	function getData() {
	var c = document.getElementById("offscreen");
	var ctx = c.getContext("2d");
	var dataURL = c.toDataURL();
	return dataURL; // Need to strip prefix?
	}

	function printClear() {
	var width = WIDTH;
	var height = HEIGHT;
	var c = document.getElementById("offscreen");
	var ctx = c.getContext("2d");
	ctx.fillStyle = 'black'
	ctx.fillRect(0, 0, width, height);
	var dataURL = c.toDataURL();
	return dataURL;
	}

	function setImage(imageb64) {
	var imageObj = new Image();
	imageObj.onload = function() {
	var c = document.getElementById("offscreen");
	var ctx = c.getContext("2d");
	ctx.drawImage(imageObj, 0, 0);
	};
	imageObj.src = 'data:image/jpg;base64,' + imageb64;
	}

	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(.25, HEIGHT, WIDTH);

	WS.cvInit(function () {
	WS.displayWarpView([3.0439236881258753, -0.09811170052611454, -1351.6367347302782, 0.03321587552236447, 3.053154626691264, -40.341560801335376, -0.00010172584427831437, -5.8759263127489935e-05, 1.0]);
	WS.log('inited');
	WS.picarusARTagFactory(function (model) {
	WS.say('Loaded');
	model.processWarpTargets(function (tags) {
	WS.log('Got tags: ' + JSON.stringify(tags));
	WS.log(JSON.stringify(tags));
	var out = 'Tag';
	for (var i = 0; i < tags.length; i++)
	out += ' ' + tags[i].id;
	if (tags.length)
	WS.say(out);
	var numTags = tags.length;
	printClear();
	//if (tags.length) {
	//return;
	//WS.say(tags[0].length + " tags. Range, " + Math.round(rangeToTag(tags[0])*10)/10. + " meters.");
	for(var cnt=0; cnt < numTags; cnt++) {
	var x = 0;
	var y = 0;
	for (var i = 0; i < 4; i++) {
	x += tags[cnt].xy[i][0];
	y += tags[cnt].xy[i][1];
	}
	printTagName(x / 4, y / 4, tags[cnt].id);
	}
	WSRAW.warpSetOverlay(getData().split(',')[1]);
	});
	});
	});

	/*WS.subscribe('warptags:sample', function (channel, tags) {

	})*/

	function sample() {
	WS.warpPreviewSampleGlass(function (data) {
	WS.log('got data');
	setImage(data);
	});
	}
	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('{{WSUrl}}', 'server');
	}
	window.onload = main;
	</script>
	</body>
	</html>