fluidglassml/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,tag) {
    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();
    }
     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 = 640;
    var height = 360;
    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 = 640;
    var height = 360;
    var c = document.getElementById("offscreen");
    var ctx = c.getContext("2d");
    ctx.fillStyle = 'blue'
    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(1, 360, 640);
    WS.displayWarpView();
    var arModel = 'kYKia3eApG5hbWW4cGljYXJ1cy5BUk1hcmtlckRldGVjdG9y';

    WS.cvInit(function () {
        WS.log('inited');
        var model = new WS.PicarusModel(arModel, function () {
            WS.say('Loaded');
            model.processWarpTargets(function (tags) {
                tags = msgpack.unpack(tags)[0];
                WS.log('Got tags: ' + JSON.stringify(tags));
                var numTags = tags.length / 9;
                WS.say('Got ' + numTags + ' tags')
                //printClear();
                //if (tags.length) {
                //WS.say(tags[0].length + " tags. Range, " + Math.round(rangeToTag(tags[0])*10)/10. + " meters.");
                for(var cnt=0; cnt < numTags; cnt++) {
                    var t = tags.slice(cnt * 9, (cnt + 1) * 9)
                    var x = (t[1] + t[3] + t[5] + t[7]) / 4;
                    var y = (t[2] + t[4] + t[6] + t[8]) / 4;
                    printTagName(x, y,t[0]);
                }
                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":"Costello Myo"}
	<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,tag) {
	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();
	}
	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 = 640;
	var height = 360;
	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 = 640;
	var height = 360;
	var c = document.getElementById("offscreen");
	var ctx = c.getContext("2d");
	ctx.fillStyle = 'blue'
	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(1, 360, 640);
	WS.displayWarpView();
	var arModel = 'kYKia3eApG5hbWW4cGljYXJ1cy5BUk1hcmtlckRldGVjdG9y';

	WS.cvInit(function () {
	WS.log('inited');
	var model = new WS.PicarusModel(arModel, function () {
	WS.say('Loaded');
	model.processWarpTargets(function (tags) {
	tags = msgpack.unpack(tags)[0];
	WS.log('Got tags: ' + JSON.stringify(tags));
	var numTags = tags.length / 9;
	WS.say('Got ' + numTags + ' tags')
	//printClear();
	//if (tags.length) {
	//WS.say(tags[0].length + " tags. Range, " + Math.round(rangeToTag(tags[0])*10)/10. + " meters.");
	for(var cnt=0; cnt < numTags; cnt++) {
	var t = tags.slice(cnt * 9, (cnt + 1) * 9)
	var x = (t[1] + t[3] + t[5] + t[7]) / 4;
	var y = (t[2] + t[4] + t[6] + t[8]) / 4;
	printTagName(x, y,t[0]);
	}
	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>