bwhite/glass.html

## glass.html
<html style="width:100%; height:100%; overflow:hidden">
<head>
<script src="https://gist.githubusercontent.com/amiller/11100038/raw/pacman.js"></script>
<!-- You can include external scripts here like so... -->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>-->
</head>
<body style="width:100%; height:100%; overflow:hidden; margin:0">
<div id="pacman"></div>
<canvas id="canvas" width="640" height="360" style="display:block"></canvas>
<script>
    ;    // Store a list of points visited
var path = [[0,0,0]];
var curpos = [0,0,0]; // x, y, heading
var width = 640, height = 360;
var mscale = 300;
var scale = mscale / height; // height of the screen, in meters
function draw() {
    ctx.fillStyle = "black";
    ctx.fillRect(0,0,width,height);
    ctx.save();
    ctx.translate(width/2, height/2);
    //ctx.scale(scale/height, scale/height);
    ctx.scale(1./scale, 1./scale);

    // Draw Path
    ctx.translate(-curpos[0],-curpos[1]);
    ctx.lineWidth = 2.0 * scale;
    ctx.strokeStyle = "blue";
    ctx.beginPath();
    if (path.length) {
        ctx.moveTo(path[0][0], path[0][1]);
        for (var i = 0; i < path.length; i++) {
            ctx.lineTo(path[i][0], path[i][1])
        }
    }
    ctx.stroke();
    ctx.closePath();
    // Draw the current icon
    ctx.beginPath();
    ctx.arc(curpos[0],curpos[1],10.*scale,0,2*Math.PI);
    ctx.stroke();
    ctx.closePath();
    ctx.fillStyle = "red";
    ctx.beginPath();
    ctx.moveTo(curpos[0],curpos[1]);
    ctx.arc(curpos[0],curpos[1],12*scale,curpos[2]-0.35,curpos[2]+0.35);
    ctx.lineTo(curpos[0],curpos[1]);
    ctx.fill();
    ctx.closePath();
    ctx.restore();
}
function move(x,y) {
    curpos[0] += x;
    curpos[1] += y;
    path.push(curpos.slice(0));
    draw();
}

function server() {
    WS.log('Welcome to Tango Mapping Demo');
    WS.say('Welcome to Tango Mapping Demo');
    WS.sound('SUCCESS');

    WS.vinsInit(function () {
        var first = null;
        cnt = 0;
        WS.sensorOn('vins', .05, function (x) {
            cnt += 1;
            if (cnt % 20 == 0) {
                WS.say(Math.round(x.values[4]) + ' ' + Math.round(x.values[5]));
            }
            if (!first) {
                if (x && x.values && x.values[3])
                    first = x.values;
            } else {
                // Adjust these for gains, and for coordinates
                var px = -(x.values[4] - first[4]) * mscale;
                var py = (x.values[5] - first[5]) * mscale;
                curpos[0] = px;
                curpos[1] = py;
                path.push(curpos.slice(0));
                draw();
            }
        })
    });
    //WS.dataLog(false, true, .15);
}

function main() {
    if (WS.scriptVersion(1)) return;
    ctx = document.getElementById('canvas').getContext("2d");
    WS.serverConnect('{{WSUrl}}', server);
}
window.onload = main;
</script>
</body>
</html>

## glass2.html
<html style="width:100%; height:100%; overflow:hidden">
<head>
</head>
<body style="width:100%; height:100%; overflow:hidden; margin:0">
<canvas id="canvas" width="640" height="360" style="display:block"></canvas>
<script>
    ;    // Store a list of points visited
var path = [[0,0,0]];
var curpos = [0,0,0]; // x, y, heading
var width = 640, height = 360;
var scale = 10.0 / height; // height of the screen, in meters
function draw() {
    ctx.fillStyle = "black";
    ctx.fillRect(0,0,width,height);
    ctx.save();
    ctx.translate(width/2, height/2);
    //ctx.scale(scale/height, scale/height);
    ctx.scale(1./scale, 1./scale);

    // Draw Path
    ctx.translate(-curpos[0],-curpos[1]);
    ctx.lineWidth = 2.0 * scale;
    ctx.strokeStyle = "blue";
    ctx.beginPath();
    if (path.length) {
        ctx.moveTo(path[0][0], path[0][1]);
        for (var i = 0; i < path.length; i++) {
            ctx.lineTo(path[i][0], path[i][1])
        }
    }
    ctx.stroke();
    ctx.closePath();
    // Draw the current icon
    ctx.beginPath();
    ctx.arc(curpos[0],curpos[1],10.*scale,0,2*Math.PI);
    ctx.stroke();
    ctx.closePath();
    ctx.fillStyle = "red";
    ctx.beginPath();
    ctx.moveTo(curpos[0],curpos[1]);
    ctx.arc(curpos[0],curpos[1],12*scale,curpos[2]-0.35,curpos[2]+0.35);
    ctx.lineTo(curpos[0],curpos[1]);
    ctx.fill();
    ctx.closePath();
    ctx.restore();
}
function move(x,y) {
    curpos[0] += x;
    curpos[1] += y;
    path.push(curpos.slice(0));
    draw();
}
function main() {
    ctx = document.getElementById('canvas').getContext("2d");
    window.setInterval(draw, 100);
}
window.onload = main;
</script>
</body>
</html>


## glass2.html~
<html style="width:100%; height:100%; overflow:hidden">
<head>
</head>
<body style="width:100%; height:100%; overflow:hidden; margin:0">
<canvas id="canvas" width="640" height="360" style="display:block"></canvas>
<script>
    // Store a list of points visited
    var path = [];
function draw() {
    ctx
    if () {
    }
}
function main() {
    ctx = document.getElementById('canvas').getContext("2d");
}
window.onload = main;
</script>
</body>
</html>

## manifest.json
{"name":""}
	<html style="width:100%; height:100%; overflow:hidden">
	<head>
	<script src="https://gist.githubusercontent.com/amiller/11100038/raw/pacman.js"></script>
	<!-- You can include external scripts here like so... -->
	<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>-->
	</head>
	<body style="width:100%; height:100%; overflow:hidden; margin:0">
	<div id="pacman"></div>
	<canvas id="canvas" width="640" height="360" style="display:block"></canvas>
	<script>
	; // Store a list of points visited
	var path = [[0,0,0]];
	var curpos = [0,0,0]; // x, y, heading
	var width = 640, height = 360;
	var mscale = 300;
	var scale = mscale / height; // height of the screen, in meters
	function draw() {
	ctx.fillStyle = "black";
	ctx.fillRect(0,0,width,height);
	ctx.save();
	ctx.translate(width/2, height/2);
	//ctx.scale(scale/height, scale/height);
	ctx.scale(1./scale, 1./scale);

	// Draw Path
	ctx.translate(-curpos[0],-curpos[1]);
	ctx.lineWidth = 2.0 * scale;
	ctx.strokeStyle = "blue";
	ctx.beginPath();
	if (path.length) {
	ctx.moveTo(path[0][0], path[0][1]);
	for (var i = 0; i < path.length; i++) {
	ctx.lineTo(path[i][0], path[i][1])
	}
	}
	ctx.stroke();
	ctx.closePath();
	// Draw the current icon
	ctx.beginPath();
	ctx.arc(curpos[0],curpos[1],10.scale,0,2Math.PI);
	ctx.stroke();
	ctx.closePath();
	ctx.fillStyle = "red";
	ctx.beginPath();
	ctx.moveTo(curpos[0],curpos[1]);
	ctx.arc(curpos[0],curpos[1],12*scale,curpos[2]-0.35,curpos[2]+0.35);
	ctx.lineTo(curpos[0],curpos[1]);
	ctx.fill();
	ctx.closePath();
	ctx.restore();
	}
	function move(x,y) {
	curpos[0] += x;
	curpos[1] += y;
	path.push(curpos.slice(0));
	draw();
	}

	function server() {
	WS.log('Welcome to Tango Mapping Demo');
	WS.say('Welcome to Tango Mapping Demo');
	WS.sound('SUCCESS');

	WS.vinsInit(function () {
	var first = null;
	cnt = 0;
	WS.sensorOn('vins', .05, function (x) {
	cnt += 1;
	if (cnt % 20 == 0) {
	WS.say(Math.round(x.values[4]) + ' ' + Math.round(x.values[5]));
	}
	if (!first) {
	if (x && x.values && x.values[3])
	first = x.values;
	} else {
	// Adjust these for gains, and for coordinates
	var px = -(x.values[4] - first[4]) * mscale;
	var py = (x.values[5] - first[5]) * mscale;
	curpos[0] = px;
	curpos[1] = py;
	path.push(curpos.slice(0));
	draw();
	}
	})
	});
	//WS.dataLog(false, true, .15);
	}

	function main() {
	if (WS.scriptVersion(1)) return;
	ctx = document.getElementById('canvas').getContext("2d");
	WS.serverConnect('{{WSUrl}}', server);
	}
	window.onload = main;
	</script>
	</body>
	</html>