rajeshbiib/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="1280" height="720" style="display:hidden"></canvas>
<script>

function drawCircle(x, y,tag) {
    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 < 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 printTagName(x,y,tag) {
    var width = 1280;
    var height = 720;
    WS.log("Tag" + tag);
    var c = document.getElementById("offscreen");
    var ctx = c.getContext("2d");
    ctx.font="20px Georgia";
    ctx.fillStyle="white";
    ctx.fillText(tag,x,y);
    ctx.strokeStyle = 'red';
    ctx.stroke();


}

function rangeFromTag(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/4; // Focal length, for 1240x720 view
    var distMeters = 0.287; // Diagonal size of AR tags printed out.
    var rangeMeters = distMeters * focalLengthPx / distPx;
    return rangeMeters;
}

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 = 1280;
    var height = 720;
    var c = document.getElementById("offscreen");
    var ctx = c.getContext("2d");
    ctx.fillStyle = 'black'
    //context.clearRect(0, 0, width, height);
    ctx.fillRect(0, 0, width, height);
    var dataURL = c.toDataURL();
    return dataURL;
}

function drawRectangle(coords) {
    var c = document.getElementById("offscreen");
    var ctx = c.getContext("2d");

    ctx.moveTo(coords[7], coords[8]);
    for (var i = 1; i < 8; i = i + 2) {
        ctx.lineTo(coords[i], coords[i+1]);
        ctx.strokeStyle = 'green';
        ctx.stroke();
    }
}

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, 720, 1280);
    WS.displayWarpView();
    WS.subscribe('warptags:sample', function (channel, tags) {
        printClear();
        if (tags.length) {

            for(var cnt=0;cnt<tags.length;cnt++) {
                if(tags[cnt][0] === 17) {
                    WS.say(" Watchout steps in range, " + Math.round(rangeFromTag(tags[0])*10)/10. + " meters.");
                    sample();
                    return;
                }
            }
            WS.say(tags.length + " tags. Range, " + Math.round(rangeFromTag(tags[0])*10)/10. + " meters.");
            for(var cnt=0;cnt<tags.length;cnt++) {
                WS.say(tags[cnt][0]);
                var t = tags[cnt];
                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,tags[cnt][0]);
                drawRectangle(tags[cnt]);
            }
            WSRAW.warpSetOverlay(getData().split(',')[1]);
        } else {
            WS.say("No Tags");
        }
        sample();
    })

    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))
                    */
            });
        }, 0)
        WS.warpPreviewSampleGlass('');
    }
    WS.dataLog(false, true, .15);
    WS.gestureCallback('onGesture', function (gesture) {
        if (gesture === 'TAP') {
            WS.sound('SUCCESS');
            sample();
        }
    });

    WS.gestureCallback('onEyeGesture', function (gesture) {
    if (gesture === 'DOUBLE_BLINK' || gesture === 'DOUBLE_WINK') {
         WS.sound('SUCCESS');
         sample();
        }
    });

    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="1280" height="720" style="display:hidden"></canvas>
	<script>

	function drawCircle(x, y,tag) {
	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 < 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 printTagName(x,y,tag) {
	var width = 1280;
	var height = 720;
	WS.log("Tag" + tag);
	var c = document.getElementById("offscreen");
	var ctx = c.getContext("2d");
	ctx.font="20px Georgia";
	ctx.fillStyle="white";
	ctx.fillText(tag,x,y);
	ctx.strokeStyle = 'red';
	ctx.stroke();


	}

	function rangeFromTag(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/4; // Focal length, for 1240x720 view
	var distMeters = 0.287; // Diagonal size of AR tags printed out.
	var rangeMeters = distMeters * focalLengthPx / distPx;
	return rangeMeters;
	}

	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 = 1280;
	var height = 720;
	var c = document.getElementById("offscreen");
	var ctx = c.getContext("2d");
	ctx.fillStyle = 'black'
	//context.clearRect(0, 0, width, height);
	ctx.fillRect(0, 0, width, height);
	var dataURL = c.toDataURL();
	return dataURL;
	}

	function drawRectangle(coords) {
	var c = document.getElementById("offscreen");
	var ctx = c.getContext("2d");

	ctx.moveTo(coords[7], coords[8]);
	for (var i = 1; i < 8; i = i + 2) {
	ctx.lineTo(coords[i], coords[i+1]);
	ctx.strokeStyle = 'green';
	ctx.stroke();
	}
	}

	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, 720, 1280);
	WS.displayWarpView();
	WS.subscribe('warptags:sample', function (channel, tags) {
	printClear();
	if (tags.length) {

	for(var cnt=0;cnt<tags.length;cnt++) {
	if(tags[cnt][0] === 17) {
	WS.say(" Watchout steps in range, " + Math.round(rangeFromTag(tags[0])*10)/10. + " meters.");
	sample();
	return;
	}
	}
	WS.say(tags.length + " tags. Range, " + Math.round(rangeFromTag(tags[0])*10)/10. + " meters.");
	for(var cnt=0;cnt<tags.length;cnt++) {
	WS.say(tags[cnt][0]);
	var t = tags[cnt];
	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,tags[cnt][0]);
	drawRectangle(tags[cnt]);
	}
	WSRAW.warpSetOverlay(getData().split(',')[1]);
	} else {
	WS.say("No Tags");
	}
	sample();
	})

	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))
	*/
	});
	}, 0)
	WS.warpPreviewSampleGlass('');
	}
	WS.dataLog(false, true, .15);
	WS.gestureCallback('onGesture', function (gesture) {
	if (gesture === 'TAP') {
	WS.sound('SUCCESS');
	sample();
	}
	});

	WS.gestureCallback('onEyeGesture', function (gesture) {
	if (gesture === 'DOUBLE_BLINK' \|\| gesture === 'DOUBLE_WINK') {
	WS.sound('SUCCESS');
	sample();
	}
	});

	sample();

	}
	function main() {
	if (WS.scriptVersion(1)) return;
	WS.serverConnect('ws://192.168.1.30:8080', 'server');
	}
	window.onload = main;
	</script>
	</body>
	</html>