|
<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('magneticField')) { |
|
context.fillStyle = 'hsl(' + data['values'][0] + ', 90%, 50%)'; |
|
context.fillRect(0, 0, 640, 120); |
|
context.fillStyle = 'hsl(' + data['values'][1] + ', 90%, 50%)'; |
|
context.fillRect(0, 120, 640, 120); |
|
context.fillStyle = 'hsl(' + data['values'][2] + ', 90%, 50%)'; |
|
context.fillRect(0, 240, 640, 120); |
|
} |
|
} |
|
|
|
function server() { |
|
WS.log('Gather magnetic field data'); |
|
WS.say('Gather magnetic field data'); |
|
var sensors = ['magneticField']; |
|
for (var i = 0; i < sensors.length; i++) |
|
WS.sensorOn(WS.sensor(sensors[i]), .15, 'cb'); |
|
WS.dataLog(true, false, 1); |
|
} |
|
function main() { |
|
if (WS.scriptVersion(1)) return; |
|
context = document.getElementById('canvas').getContext("2d"); |
|
WS.serverConnect('{{WSUrl}}', 'server'); |
|
} |
|
window.onload = main; |
|
</script> |
|
</body> |
|
</html> |