@hughsk/fulltilt
Version:
Standalone device orientation + device motion normalization and conversion library
384 lines (301 loc) • 8.79 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>FULLTILT vs Raw DeviceOrientation Event Data Display</title>
<!-- DEVICEORIENTATION EMULATOR DETECTION + BOOTSTRAP -->
<script src="https://richtr.github.io/doe/doe.js"></script>
<script src="../dist/fulltilt.min.js" type="text/javascript"></script>
<style>
* {
font-family: Arial, Helvetica, sans-serif;
}
.dataGroup {
border: 1px dashed #000;
padding: 10px;
margin: 20px;
}
table {
margin-bottom: 20px;
}
tr {
padding: 5px;
}
th, td {
text-align: left;
padding: 8px;
}
table tbody th {
width: 300px;
background-color: #EEE;
}
table tbody td {
width: 100px;
background-color: lightyellow;
}
</style>
</head>
<body>
<h1>FULLTILT vs Raw DeviceOrientation Event Data Display</h1>
<script>
function printDataValue(input) {
if( input === undefined )
return "undefined";
if( input === null )
return "null";
if( input === true )
return "true";
if( input === false )
return "false";
if( Object.prototype.toString.call(input) === "[object Number]" )
return Math.round((input + 0.00001) * 100) / 100; // return to 2 decimal places
return (input + ""); // force stringify
}
function init() {
var alpha = document.getElementById("alpha");
var beta = document.getElementById("beta");
var gamma = document.getElementById("gamma");
var screenAlpha = document.getElementById("screenAlpha");
var screenBeta = document.getElementById("screenBeta");
var screenGamma = document.getElementById("screenGamma");
var absolute = document.getElementById("absolute");
var webkitCompassHeading = document.getElementById("webkitCompassHeading");
var webkitCompassAccuracy = document.getElementById("webkitCompassAccuracy");
// Start FULLTILT DeviceOrientation listeners and register our callback
var deviceOrientation = FULLTILT.getDeviceOrientation({'type': 'world'});
deviceOrientation.then(function(orientationData) {
orientationData.listen(function() {
// Display calculated screen-adjusted deviceorientation
var screenAdjustedEvent = orientationData.getFixedFrameEuler();
screenAlpha.textContent = printDataValue(screenAdjustedEvent.alpha);
screenBeta.textContent = printDataValue(screenAdjustedEvent.beta);
screenGamma.textContent = printDataValue(screenAdjustedEvent.gamma);
// Display raw deviceorientation data
var rawEvent = orientationData.getLastRawEventData();
alpha.textContent = printDataValue(rawEvent.alpha);
beta.textContent = printDataValue(rawEvent.beta);
gamma.textContent = printDataValue(rawEvent.gamma);
absolute.textContent = printDataValue(rawEvent.absolute);
webkitCompassHeading.textContent = printDataValue(rawEvent.webkitCompassHeading);
webkitCompassAccuracy.textContent = printDataValue(rawEvent.webkitCompassAccuracy);
});
});
var accX = document.getElementById("accX");
var accY = document.getElementById("accY");
var accZ = document.getElementById("accZ");
var screenAccX = document.getElementById("screenAccX");
var screenAccY = document.getElementById("screenAccY");
var screenAccZ = document.getElementById("screenAccZ");
var accGX = document.getElementById("accGX");
var accGY = document.getElementById("accGY");
var accGZ = document.getElementById("accGZ");
var screenAccGX = document.getElementById("screenAccGX");
var screenAccGY = document.getElementById("screenAccGY");
var screenAccGZ = document.getElementById("screenAccGZ");
var rotRateAlpha = document.getElementById("rotRateAlpha");
var rotRateBeta = document.getElementById("rotRateBeta");
var rotRateGamma = document.getElementById("rotRateGamma");
var screenRotRateAlpha = document.getElementById("screenRotRateAlpha");
var screenRotRateBeta = document.getElementById("screenRotRateBeta");
var screenRotRateGamma = document.getElementById("screenRotRateGamma");
var absolute = document.getElementById("absolute");
// Start FULLTILT DeviceMotion listeners and register our callback
var deviceMotion = FULLTILT.getDeviceMotion();
deviceMotion.then(function(motionData) {
motionData.listen(function() {
// Display calculated screen-adjusted devicemotion
var screenAcc = motionData.getScreenAdjustedAcceleration() || {};
var screenAccG = motionData.getScreenAdjustedAccelerationIncludingGravity() || {};
var screenRotRate = motionData.getScreenAdjustedRotationRate() || {};
screenAccX.textContent = printDataValue(screenAcc.x);
screenAccY.textContent = printDataValue(screenAcc.y);
screenAccZ.textContent = printDataValue(screenAcc.z);
screenAccGX.textContent = printDataValue(screenAccG.x);
screenAccGY.textContent = printDataValue(screenAccG.y);
screenAccGZ.textContent = printDataValue(screenAccG.z);
screenRotRateAlpha.textContent = printDataValue(screenRotRate.alpha);
screenRotRateBeta.textContent = printDataValue(screenRotRate.beta);
screenRotRateGamma.textContent = printDataValue(screenRotRate.gamma);
// Display raw devicemotion data
var rawEvent = motionData.getLastRawEventData();
var acc = rawEvent.acceleration || {};
var accG = rawEvent.accelerationIncludingGravity || {};
var rotRate = rawEvent.rotationRate || {};
accX.textContent = printDataValue(acc.x);
accY.textContent = printDataValue(acc.y);
accZ.textContent = printDataValue(acc.z);
accGX.textContent = printDataValue(accG.x);
accGY.textContent = printDataValue(accG.y);
accGZ.textContent = printDataValue(accG.z);
rotRateAlpha.textContent = printDataValue(rotRate.alpha);
rotRateBeta.textContent = printDataValue(rotRate.beta);
rotRateGamma.textContent = printDataValue(rotRate.gamma);
});
});
}
window.onload = init;
</script>
<h3>Screen-Adjusted DeviceOrientation</h3>
<div class="dataGroup">
<table>
<thead>
<tr>
<th>.alpha</th>
<th>.beta</th>
<th>.gamma</th>
</tr>
</thead>
<tbody>
<tr>
<td id="screenAlpha">-</td>
<td id="screenBeta">-</td>
<td id="screenGamma">-</td>
</tr>
</tbody>
</table>
</div>
<h3>Raw DeviceOrientation</h3>
<p>
<a href="http://w3c.github.io/deviceorientation/spec-source-orientation.html#deviceorientation">Spec Interface Reference</a>
</p>
<div class="dataGroup">
<table>
<thead>
<tr>
<th>.alpha</th>
<th>.beta</th>
<th>.gamma</th>
</tr>
</thead>
<tbody>
<tr>
<td id="alpha">-</td>
<td id="beta">-</td>
<td id="gamma">-</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>.absolute</th>
</tr>
</thead>
<tbody>
<tr>
<td id="absolute">-</td>
</tr>
</tbody>
</table>
<h4>Non-standard properties</h4>
<table>
<thead>
<tr>
<th>.webkitCompassHeading</th>
<th>.webkitCompassAccuracy</th>
</tr>
</thead>
<tbody>
<tr>
<td id="webkitCompassHeading">-</td>
<td id="webkitCompassAccuracy">-</td>
</tr>
</tbody>
</table>
</div>
<h3>Screen-Adjusted DeviceMotion</h3>
<div class="dataGroup">
<table>
<thead>
<tr>
<th></th>
<th>.x</th>
<th>.y</th>
<th>.z</th>
</tr>
</thead>
<tbody>
<tr>
<th>acceleration</th>
<td id="screenAccX">-</td>
<td id="screenAccY">-</td>
<td id="screenAccZ">-</td>
</tr>
<tr>
<th>accelerationIncludingGravity</th>
<td id="screenAccGX">-</td>
<td id="screenAccGY">-</td>
<td id="screenAccGZ">-</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th></th>
<th>.alpha</th>
<th>.beta</th>
<th>.gamma</th>
</tr>
</thead>
<tbody>
<tr>
<th>rotationRate</th>
<td id="screenRotRateAlpha">-</td>
<td id="screenRotRateBeta">-</td>
<td id="screenRotRateGamma">-</td>
</tr>
</tbody>
</table>
</div>
<h3>Raw DeviceMotion</h3>
<p>
<a href="http://w3c.github.io/deviceorientation/spec-source-orientation.html#devicemotion">Spec Interface Reference</a>
</p>
<div class="dataGroup">
<table>
<thead>
<tr>
<th></th>
<th>.x</th>
<th>.y</th>
<th>.z</th>
</tr>
</thead>
<tbody>
<tr>
<th>acceleration</th>
<td id="accX">-</td>
<td id="accY">-</td>
<td id="accZ">-</td>
</tr>
<tr>
<th>accelerationIncludingGravity</th>
<td id="accGX">-</td>
<td id="accGY">-</td>
<td id="accGZ">-</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th></th>
<th>.alpha</th>
<th>.beta</th>
<th>.gamma</th>
</tr>
</thead>
<tbody>
<tr>
<th>rotationRate</th>
<td id="rotRateAlpha">-</td>
<td id="rotRateBeta">-</td>
<td id="rotRateGamma">-</td>
</tr>
</tbody>
</table>
</div>
<p><em>Data values, where provided, are rounded to two decimal places for readability.</em></p>
</body>
</html>