scottgwald/glass.html

## glass.html
<html style="width:100%; height:100%; overflow:hidden">
<head><script src="https://api.picar.us/wearscriptdev/bower_components/msgpack-javascript/msgpack.js"></script></head>
<body style="width:100%; height:100%; overflow:hidden; margin:0">
<canvas id="canvas" width="640" height="360" style="display:block"></canvas>
<script>
function publish() {
    var data = msgpack.pack(Array.prototype.slice.call(arguments));
    WS.publish(arguments[0], btoa(data.map(function (x) {return String.fromCharCode(x)}).join('')));
}

var EYETRACKER_VALUE = [[301, 302]];
var imageWidth = 2528;
var imageHeight = 1856;
var screenWidth = 640, screenHeight = 360;

function cb(path) {
    WS.log(path);
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var imageObj = new Image();
    var k = 0;
    var xsteps = 4;
    var ysteps = 3;
    var xstep = (2528 - 640) / (xsteps - 1);
    var ystep = (1856 - 360) / (ysteps - 1);
    var interval;
    var startInterval = 3000;
    var repeatInterval = 3000;

    var points = [];
    imageObj.onload = function() {
        //2528 x 1856
        clearInterval(interval);
        context.drawImage(imageObj, 0, 0, 640, 360);
        window.setTimeout(function () {
            interval = window.setInterval(function () {
                if (k) {
                    points.push([x, y, EYETRACKER_VALUE[0][0], EYETRACKER_VALUE[0][1]]);
                }
                if (k >= xsteps * ysteps) {
                    clearInterval(interval);
                    WS.sound('SUCCESS')
                    WS.log(JSON.stringify(points));
                    return;
                }
                WS.sound('TAP')
                i = Math.floor(k / xsteps);
                j = k % xsteps;
                x = j * xstep + 320;
                y = i * ystep + 240;
                xScaled = x * screenWidth / imageWidth;
                yScaled = y * screenHeight / imageHeight;
                WS.log("x is: " + Math.floor(x) + ", and y is: " + Math.floor(y));
                WS.say("x is " + Math.floor(x));
                //context.drawImage(imageObj, -j * xstep, -i * ystep);
                context.drawImage(imageObj, 0, 0, 640, 360);
                context.beginPath();
                context.arc(xScaled, yScaled, 15, 0, 2 * Math.PI, false);
                //context.arc(320, 180, 30, 0, 2 * Math.PI, false);
                context.fillStyle = 'green';
                context.fill();
                context.lineWidth = 5;
                context.strokeStyle = '#003300';
                context.stroke();
                k += 1;
            }, repeatInterval);
        }, startInterval);
    };
    imageObj.src = 'file://' + path;
}
function eyetracker(data) {
    var sensor = msgpack.unpack(atob(data));
    EYETRACKER_VALUE = sensor[2]['Pupil Eyetracker'][0];
    WS.log(JSON.stringify(EYETRACKER_VALUE));
}

function server() {
    WS.log('Welcome to WearScript');
    WS.say('Welcome to WearScript');
    WS.subscribe('sensors:eyetracker', 'eyetracker');
    //WS.wake();
    //WS.activityCreate();
    WS.cameraPhotoPath('cb');
}
function main() {
    if (WS.scriptVersion(1)) return;
    ctx = document.getElementById('canvas').getContext("2d");
    WS.serverConnect('{{WSUrl}}', 'server');
}
window.onload = main;
</script>
</body>
</html>

## manifest.json
{
  "name": "EyeTrackerCal v0"
}
	<html style="width:100%; height:100%; overflow:hidden">
	<head><script src="https://api.picar.us/wearscriptdev/bower_components/msgpack-javascript/msgpack.js"></script></head>
	<body style="width:100%; height:100%; overflow:hidden; margin:0">
	<canvas id="canvas" width="640" height="360" style="display:block"></canvas>
	<script>
	function publish() {
	var data = msgpack.pack(Array.prototype.slice.call(arguments));
	WS.publish(arguments[0], btoa(data.map(function (x) {return String.fromCharCode(x)}).join('')));
	}

	var EYETRACKER_VALUE = [[301, 302]];
	var imageWidth = 2528;
	var imageHeight = 1856;
	var screenWidth = 640, screenHeight = 360;

	function cb(path) {
	WS.log(path);
	var canvas = document.getElementById('canvas');
	var context = canvas.getContext('2d');
	var imageObj = new Image();
	var k = 0;
	var xsteps = 4;
	var ysteps = 3;
	var xstep = (2528 - 640) / (xsteps - 1);
	var ystep = (1856 - 360) / (ysteps - 1);
	var interval;
	var startInterval = 3000;
	var repeatInterval = 3000;

	var points = [];
	imageObj.onload = function() {
	//2528 x 1856
	clearInterval(interval);
	context.drawImage(imageObj, 0, 0, 640, 360);
	window.setTimeout(function () {
	interval = window.setInterval(function () {
	if (k) {
	points.push([x, y, EYETRACKER_VALUE[0][0], EYETRACKER_VALUE[0][1]]);
	}
	if (k >= xsteps * ysteps) {
	clearInterval(interval);
	WS.sound('SUCCESS')
	WS.log(JSON.stringify(points));
	return;
	}
	WS.sound('TAP')
	i = Math.floor(k / xsteps);
	j = k % xsteps;
	x = j * xstep + 320;
	y = i * ystep + 240;
	xScaled = x * screenWidth / imageWidth;
	yScaled = y * screenHeight / imageHeight;
	WS.log("x is: " + Math.floor(x) + ", and y is: " + Math.floor(y));
	WS.say("x is " + Math.floor(x));
	//context.drawImage(imageObj, -j * xstep, -i * ystep);
	context.drawImage(imageObj, 0, 0, 640, 360);
	context.beginPath();
	context.arc(xScaled, yScaled, 15, 0, 2 * Math.PI, false);
	//context.arc(320, 180, 30, 0, 2 * Math.PI, false);
	context.fillStyle = 'green';
	context.fill();
	context.lineWidth = 5;
	context.strokeStyle = '#003300';
	context.stroke();
	k += 1;
	}, repeatInterval);
	}, startInterval);
	};
	imageObj.src = 'file://' + path;
	}
	function eyetracker(data) {
	var sensor = msgpack.unpack(atob(data));
	EYETRACKER_VALUE = sensor[2]['Pupil Eyetracker'][0];
	WS.log(JSON.stringify(EYETRACKER_VALUE));
	}

	function server() {
	WS.log('Welcome to WearScript');
	WS.say('Welcome to WearScript');
	WS.subscribe('sensors:eyetracker', 'eyetracker');
	//WS.wake();
	//WS.activityCreate();
	WS.cameraPhotoPath('cb');
	}
	function main() {
	if (WS.scriptVersion(1)) return;
	ctx = document.getElementById('canvas').getContext("2d");
	WS.serverConnect('{{WSUrl}}', 'server');
	}
	window.onload = main;
	</script>
	</body>
	</html>