Skip to content

Instantly share code, notes, and snippets.

@amiller

amiller/glass.html

Forked from amiller/glass.html
Last active August 29, 2015 14:00
Show Gist options
  • Save amiller/11352298 to your computer and use it in GitHub Desktop.
Save amiller/11352298 to your computer and use it in GitHub Desktop.
Download ZIP
[wearscript] Map Trace
Raw
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 scale = 50.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 server() {
WS.log('Welcome to Tango Mapping Demo');
WS.say('Welcome to Tango Mapping Demo');
WS.sound('SUCCESS');
WS.vinsInit(function () {
var first = null;
WS.sensorOn('vins', .05, function (x) {
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]) * 50;
var py = (x.values[5] - first[5]) * 50;
curpos[0] = px;
curpos[1] = py;
path.push(curpos.slice(0));
draw();
}
})
});
// Stream several sensors (can view in the Sensors tab)
var sensors = ['gps', 'accelerometer', 'magneticField', 'gyroscope',
'light', 'gravity', 'linearAcceleration', 'rotationVector'];
for (var i = 0; i < sensors.length; i++)
WS.sensorOn(sensors[i], .15);
}
function main() {
if (WS.scriptVersion(1)) return;
ctx = document.getElementById('canvas').getContext("2d");
WS.serverConnect('{{WSUrl}}', server);
}
window.onload = main;
</script>
</body>
</html>
Raw
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>
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment