kurtisnelson/glass.html

## 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">
<h2>
<span id="lat"></span>,
<span id="lng"></span>
</h2>
<canvas id="canvas" width="427" height="240" style="display:block">
</canvas>
<script>
function cb(data) {
    if(data['type'] == 3){
      degrees = data['values'][0];
      draw();
    }else if(data['type'] == -1){
      lat = data['values'][0];
      lng = data['values'][1];
      drawLocation();
    }
}

function server() {
    WS.sensorOn(3, .1, "cb");
    WS.sensorOn(-1, 10, "cb");
    init();
}

// Global variable
var img = null,
  needle = null,
  ctx = null,
  degrees = 0,
  lat = 0,
  lng = 0;


function clearCanvas() {
   // clear canvas
  ctx.clearRect(0, 0, 200, 200);
}

function drawLocation() {
  var lng_s = document.getElementById('lng');
  var lat_s = document.getElementById('lat');
  lng_s.innerHTML = lng;
  lat_s.innerHTML = lat;
}

function draw() {

  clearCanvas();

  // Draw the compass onto the canvas
  ctx.drawImage(img, 0, 0);

  // Save the current drawing state
  ctx.save();

  // Now move across and down half the
  ctx.translate(100, 100);

  // Rotate around this point
  ctx.rotate(degrees * (Math.PI / 180));

  // Draw the image back and up
  ctx.drawImage(needle, -100, -100);

  // Restore the previous drawing state
  ctx.restore();
}

function imgLoaded() {
  draw();
}

function init() {
  // Grab the compass element
  var canvas = document.getElementById('canvas');
  degrees = 0;
  // Canvas supported?
  if (canvas.getContext('2d')) {
    ctx = canvas.getContext('2d');

    // Load the needle image
    needle = new Image();
    needle.src = 'http://homepage.ntlworld.com/ray.hammond/compass/needle.png';

    // Load the compass image
    img = new Image();
    img.src = 'http://homepage.ntlworld.com/ray.hammond/compass/compass.png';
    img.onload = imgLoaded;
  } else {
    alert("Canvas not supported!");
  }
}


$(function () {
    WS.serverConnect('{{WSUrl}}', 'server');
   WS.displayWebView();
});
</script>
</body>
</html>

## manifest.json
{
  "name": "Compass"
}
	<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">
	<h2>
	<span id="lat"></span>,
	<span id="lng"></span>
	</h2>
	<canvas id="canvas" width="427" height="240" style="display:block">
	</canvas>
	<script>
	function cb(data) {
	if(data['type'] == 3){
	degrees = data['values'][0];
	draw();
	}else if(data['type'] == -1){
	lat = data['values'][0];
	lng = data['values'][1];
	drawLocation();
	}
	}

	function server() {
	WS.sensorOn(3, .1, "cb");
	WS.sensorOn(-1, 10, "cb");
	init();
	}

	// Global variable
	var img = null,
	needle = null,
	ctx = null,
	degrees = 0,
	lat = 0,
	lng = 0;


	function clearCanvas() {
	// clear canvas
	ctx.clearRect(0, 0, 200, 200);
	}

	function drawLocation() {
	var lng_s = document.getElementById('lng');
	var lat_s = document.getElementById('lat');
	lng_s.innerHTML = lng;
	lat_s.innerHTML = lat;
	}

	function draw() {

	clearCanvas();

	// Draw the compass onto the canvas
	ctx.drawImage(img, 0, 0);

	// Save the current drawing state
	ctx.save();

	// Now move across and down half the
	ctx.translate(100, 100);

	// Rotate around this point
	ctx.rotate(degrees * (Math.PI / 180));

	// Draw the image back and up
	ctx.drawImage(needle, -100, -100);

	// Restore the previous drawing state
	ctx.restore();
	}

	function imgLoaded() {
	draw();
	}

	function init() {
	// Grab the compass element
	var canvas = document.getElementById('canvas');
	degrees = 0;
	// Canvas supported?
	if (canvas.getContext('2d')) {
	ctx = canvas.getContext('2d');

	// Load the needle image
	needle = new Image();
	needle.src = 'http://homepage.ntlworld.com/ray.hammond/compass/needle.png';

	// Load the compass image
	img = new Image();
	img.src = 'http://homepage.ntlworld.com/ray.hammond/compass/compass.png';
	img.onload = imgLoaded;
	} else {
	alert("Canvas not supported!");
	}
	}


	$(function () {
	WS.serverConnect('{{WSUrl}}', 'server');
	WS.displayWebView();
	});
	</script>
	</body>
	</html>