scottgwald/sensor_log.html

## sensor_log.html
<html style="width:100%; height:100%; overflow:hidden">
  <head>
  </head>
  <body style="width:100%; height:100%; overflow:hidden; margin:0">
    <h2>
      <span id="lat"></span>,
      <span id="lng"></span>,
      <span id="deg"></span>
    </h2>
    <h2>
      rotation Vector:&nbsp
      <span id="rot0"></span>,
      <span id="rot1"></span>,
      <span id="rot2"></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];
            rot0 = data['values'][0];
            draw();
          }else if(data['type'] == -1){
            lat = data['values'][0];
            lng = data['values'][1];
            drawLocation();
          } else if(data['type'] == 11) {
            rot0 = data['values'][0];
            rot1 = data['values'][1];
            rot2 = data['values'][2];
            draw();
          }
      }

      function server() {
          WS.sensorOn(3, interval);
          WS.sensorOn(11, interval);
          WS.sensorOn(-1, 10);
          WS.sensorCallback("cb");
          WS.dataLog(false, true, interval);
          init();
      }

      // Global variables
      var img = null,
          needle = null,
          ctx = null,
          degrees = 0,
          lat = 0,
          lng = 0,
          imgd = null,
          interval = 1,
          rot0 = 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();
        var deg_s = document.getElementById('deg');
        var rot0_s = document.getElementById('rot0');
        var rot1_s = document.getElementById('rot1');
        var rot2_s = document.getElementById('rot2');

        deg_s.innerHTML = degrees;
        rot0_s.innerHTML = rot0;
        rot1_s.innerHTML = rot1;
        rot2_s.innerHTML = rot2;
      }

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

        } else {
          alert("Canvas not supported!");
        }
      }


      $(function () {
          WS.serverConnect('{{WSUrl}}', 'server');
         WS.displayWebView();
      });
    </script>
  </body>
	<html style="width:100%; height:100%; overflow:hidden">
	<head>
	</head>
	<body style="width:100%; height:100%; overflow:hidden; margin:0">
	<h2>
	<span id="lat"></span>,
	<span id="lng"></span>,
	<span id="deg"></span>
	</h2>
	<h2>
	rotation Vector:&nbsp
	<span id="rot0"></span>,
	<span id="rot1"></span>,
	<span id="rot2"></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];
	rot0 = data['values'][0];
	draw();
	}else if(data['type'] == -1){
	lat = data['values'][0];
	lng = data['values'][1];
	drawLocation();
	} else if(data['type'] == 11) {
	rot0 = data['values'][0];
	rot1 = data['values'][1];
	rot2 = data['values'][2];
	draw();
	}
	}

	function server() {
	WS.sensorOn(3, interval);
	WS.sensorOn(11, interval);
	WS.sensorOn(-1, 10);
	WS.sensorCallback("cb");
	WS.dataLog(false, true, interval);
	init();
	}

	// Global variables
	var img = null,
	needle = null,
	ctx = null,
	degrees = 0,
	lat = 0,
	lng = 0,
	imgd = null,
	interval = 1,
	rot0 = 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();
	var deg_s = document.getElementById('deg');
	var rot0_s = document.getElementById('rot0');
	var rot1_s = document.getElementById('rot1');
	var rot2_s = document.getElementById('rot2');

	deg_s.innerHTML = degrees;
	rot0_s.innerHTML = rot0;
	rot1_s.innerHTML = rot1;
	rot2_s.innerHTML = rot2;
	}

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

	} else {
	alert("Canvas not supported!");
	}
	}


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