<!doctype html>
<html>
<head>
<title>Device Motion - RJM Programming - August, 2016 - Thanks to http://www.html5rocks.com/en/tutorials/device/orientation/</title>
<script type='text/javascript'>

var cnt=0;
var cntpassive=0;
var cntactive=0;


function onl() {
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
document.getElementById("dmEvent").innerHTML = "Not supported."
}
}

function deviceMotionHandler(eventData) {
var info, xyz = "[X, Y, Z]";

cnt++;
var ndt = new Date();
var nutcDate = ndt.toUTCString();

// Grab the acceleration from the results
acceleration = eventData.accelerationIncludingGravity;
if (Math.pow((acceleration.x * acceleration.x + acceleration.y * acceleration.y + acceleration.z * acceleration.z), 0.5) >= 10) {
cntactive++;
document.getElementById('toopassive').innerHTML = '';
// Grab the acceleration including gravity from the results
info = xyz.replace("X", acceleration.x);
info = info.replace("Y", acceleration.y);
info = info.replace("Z", acceleration.z);
document.getElementById("moAccelGrav").innerHTML = info + " ... " + Math.pow((acceleration.x * acceleration.x + acceleration.y * acceleration.y + acceleration.z * acceleration.z), 0.5) + ' ... ' + nutcDate;

var acceleration = eventData.acceleration;
info = xyz.replace("X", acceleration.x);
info = info.replace("Y", acceleration.y);
info = info.replace("Z", acceleration.z);
document.getElementById("moAccel").innerHTML = info + " ... " + Math.pow((acceleration.x * acceleration.x + acceleration.y * acceleration.y + acceleration.z * acceleration.z), 0.5);

// Grab the rotation rate from the results
var rotation = eventData.rotationRate;
info = xyz.replace("X", rotation.alpha);
info = info.replace("Y", rotation.beta);
info = info.replace("Z", rotation.gamma);
document.getElementById("moRotation").innerHTML = info + " ... " + Math.pow((rotation.alpha * rotation.alpha + rotation.beta * rotation.beta + rotation.gamma * rotation.gamma), 0.5);

// // Grab the refresh interval from the results
info = eventData.interval;
document.getElementById("moInterval").innerHTML = info;
document.getElementById('toopassive').innerHTML = ' ' + eval((cntactive * 100.0 / cnt)) + '%';
} else {
cntpassive++;
document.getElementById('toopassive').innerHTML = ' ... ' + nutcDate + ' ... ' + eval((cntactive * 100.0 / cnt)) + '% ... sorry, your device is too still for scoring right now at this game';
}
document.getElementById('imeter').max=cnt;
document.getElementById('imeter').value=cntactive;
document.getElementById('imeter').innerHTML="" + cntactive + " out of " + cnt;
}

</script>
</head>
<body onload="onl();">


<div class="main">
<h2>Device Motion <div id='toopassive'></div></h2><br> Activity meter: <progress id='imeter' value=0 max=0>0 out of 0</progress>
<table>
<tr>
<td>Event Supported</td>
<td id="dmEvent"></td>
</tr>
<tr>
<td>acceleration</td>
<td id="moAccel"></td>
</tr>
<tr>
<td>accelerationIncludingGravity</td>
<td id="moAccelGrav"></td>
</tr>
<tr>
<td>rotationRate</td>
<td id="moRotation"></td>
</tr>
<tr>
<td>interval</td>
<td id="moInterval"></td>
</tr>
</table>
</div>


</body>
</html>