devicemotion test

by martinsoto

HTML

<div id="wrapper">
  <h1>devicemotion test</h1>

  <p><label for="aX">aX</label><span id="aX"></span></p>
  <p><label for="aY">aY</label><span id="aY"></span></p>
  <p><label for="aZ">aZ</label><span id="aZ"></span></p>

  <p><label for="sX">sX</label><span id="sX"></span></p>
  <p><label for="sY">sY</label><span id="sY"></span></p>
  <p><label for="sZ">sZ</label><span id="sZ"></span></p>

  <p><label for="yM">yM</label><span id="yM"></span></p>

  <p><label for="g">g</label><span id="g"></span></p>
  <p><label for="gMean">gMean</label><span id="gMean"></span></p>

  <p><label for="alpha">alpha</label><span id="alpha"></span></p>
  <p><label for="beta">beta</label><span id="beta"></span></p>
  <p><label for="gamma">gamma</label><span id="gamma"></span></p>
</div>

CSS

</style>

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="initial-scale=1, user-scalable=no">

<style type='text/css'>

body {font-family:Helvetica,FreeSans,Arial,sans; font-size:18px;}
h1 {margin:0; font-size:22px;}
label {font-weight:bold; display:inline-block; width:50%;}
#wrapper {width:100%; height:100%;}

JavaScript

var s$ = function(e) {return document.getElementById(e);};


if (window.DeviceMotionEvent) {
  var G = 9.80, gCount = 180;
  var gValues = Array(gCount), gValuesPos = 0;
  var gSum = G * gCount, gMean = G;

  for (var i = 0; i < gCount; i += 1) {
    gValues[i] = G;
  }

  var yX = 0, yY = 0, yZ = 0, yM;

  var g, acc, prevAcc, gAcc;
  
  var sX = 0, sY = 0, sZ = 0;
  
  window.addEventListener('devicemotion', function(ev) {
    acc = ev.accelerationIncludingGravity;

		g = Math.sqrt(acc.x*acc.x + acc.y * acc.y + acc.z * acc.z);

    if (prevAcc) {
      yX = (acc.x - prevAcc.x) / ev.interval;
      yY = (acc.y - prevAcc.y) / ev.interval;
      yZ = (acc.z - prevAcc.z) / ev.interval;
      yM = Math.sqrt(yX * yX + yY * yY + yZ * yZ);
      if (yM <= 0.01) {
        gSum = gSum - gValues[gValuesPos] + g;
        gValues[gValuesPos] = g;
        gValuesPos = (gValuesPos + 1) % gCount;
        gMean = gSum / gCount;
      }
    }
    prevAcc = acc;

		if (Math.abs(g - gMean) <= 0.01 || !gAcc) {
    	gAcc = acc;
    }
 
    var aX = acc.x - gAcc.x;
    var aY = acc.y - gAcc.y;
    var aZ = acc.z - gAcc.z;
    
    sX += aX * ev.interval / 1000;
 		sY += aY * ev.interval / 1000;
    sZ += aZ * ev.interval / 1000;

    s$('aX').innerHTML = aX ? aX.toFixed(3) : '0';
    s$('aY').innerHTML = aY ? aY.toFixed(3) : '0';
    s$('aZ').innerHTML = aZ ? aZ.toFixed(3) : '0';

    s$('sX').innerHTML = sX ? sX.toFixed(3) : '0';
    s$('sY').innerHTML = sY ? sY.toFixed(3) : '0';
    s$('sZ').innerHTML = sZ ? sZ.toFixed(3) : '0';

    s$('yM').innerHTML = yM ? yM.toFixed(3) : '0';

    s$('g').innerHTML = g ? g.toFixed(3) : '0';
    s$('gMean').innerHTML = g ? gMean.toFixed(3) : '0';
  }, false);

	window.addEventListener('deviceorientation', function(ev) {
    var alpha = ev.alpha, beta = ev.beta, gamma = ev.gamma;

    s$('alpha').innerHTML = alpha ? alpha.toFixed(3) : '0';
    s$('beta').innerHTML = beta ? beta.toFixed(3) : '0';
    s$('gamma').innerHTML = gamma ?...