Skip to content

Instantly share code, notes, and snippets.

@amiller

amiller/glass.html

Created February 15, 2014 19:53
Show Gist options
  • Save amiller/9024419 to your computer and use it in GitHub Desktop.
Save amiller/9024419 to your computer and use it in GitHub Desktop.
Download ZIP
[wearscript] Tap to calibrate
Raw
glass.html
<html style="width:100%; height:100%; overflow:hidden">
<head>
<!--<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">
<canvas id="canvas" width="640" height="360" style="display:block"></canvas>
<script>
function cb(data) {
// Changes canvas color with head rotation
if (data['type'] == WS.sensor('orientation')) {
ctx.fillStyle = 'hsl(' + data['values'][0] + ', 90%, 50%)'
ctx.fillRect(0, 0, 640, 360);
}
}
function onGesture(name) {
if (name == 'TAP') {
points.push([point_x, point_y]);
draw();
}
}
var points = []
function draw() {
// Draw one point on the screen
ctx.fillStyle = 'black'
ctx.fillRect(0, 0, 640, 360);
var cols = 4;
var rows = 3;
var margin = 5;
var n = points.length % (cols*rows);
var col = n % cols;
var row = Math.floor(n / cols);
point_x = (col+0) * ((640-20)/(cols-1)) + 10;
point_y = (row+0) * ((360-20)/(rows-1)) + 10;
ctx.beginPath();
ctx.arc(point_x,point_y,5,0,2*Math.PI);
ctx.closePath();
ctx.fillStyle = 'red'
ctx.fill();
WS.say('ABC'[row] + '. ' + col)
}
function server() {
WS.log('Time to Calibrate');
WS.cameraOn(2);
WS.gestureCallback('onGesture', onGesture);
WS.sound('SUCCESS')
draw();
}
function main() {
if (WS.scriptVersion(1)) return;
ctx = document.getElementById('canvas').getContext("2d");
WS.serverConnect('{{WSUrl}}', 'server');
}
window.onload = main;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment