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

var cimg="geolocation_ipad_wifialways.jpg";

function deviceOrientationHandler(tiltLeftToRight, tiltFrontToBack, brg) {
document.getElementById("doTiltLeftToRight").innerHTML = Math.round(tiltLeftToRight);
document.getElementById("doTiltFrontToBack").innerHTML = Math.round(tiltFrontToBack);
document.getElementById("doBearing").innerHTML = Math.round(brg);

// Apply the transform to the image
var logo = document.getElementById("imageId");
logo.style.webkitTransform =
"rotate("+ tiltLeftToRight +"deg) rotate3d(1,0,0, "+ (tiltFrontToBack*-1)+"deg)";
logo.style.MozTransform = "rotate("+ tiltLeftToRight +"deg)";
logo.style.transform =
"rotate("+ tiltLeftToRight +"deg) rotate3d(1,0,0, "+ (tiltFrontToBack*-1)+"deg)";
}

function onl() {
var oldcimg=cimg;
//alert(0);
cimg=location.search.split('image=')[1] ? decodeURIComponent(location.search.split('image=')[1].split('&')[0]) : cimg;
//alert(cimg);
if (cimg != document.getElementById("imageId").src && cimg != "") {
document.getElementById("imageId").src=cimg;
document.getElementById("image").value=cimg;
}
if (window.DeviceOrientationEvent) {
document.getElementById("doEvent").innerHTML = "DeviceOrientation";
// Listen for the deviceorientation event and handle the raw data
window.addEventListener('deviceorientation', function(eventData) {
// gamma is the left-to-right tilt in degrees, where right is positive
var tiltLeftToRight = eventData.gamma;

// beta is the front-to-back tilt in degrees, where front is positive
var tiltFrontToBack = eventData.beta;

// alpha is the compass direction the device is facing in degrees
var brg = eventData.alpha

try { document.getElementById('compass_needle').style.webkitTransform = ("rotate(" + Math.round(brg) + "deg)"); } catch(e10) { }
try { document.getElementById('compass_needle').style.MozTransform = ("rotate(" + Math.round(brg) + "deg)"); } catch(e1000) { }
try { document.getElementById('compass_needle').style.msTransform = ("rotate(" + Math.round(brg) + "deg)"); } catch(e100) { }
try { document.getElementById('compass_needle').style.OTransform = ("rotate(" + Math.round(brg) + "deg)"); } catch(e10000) { }
try { document.getElementById('compass_needle').style.transform = ("rotate(" + Math.round(brg) + "deg)"); } catch(e1) { }

// call our orientation event handler
deviceOrientationHandler(tiltLeftToRight, tiltFrontToBack, brg);
}, false);
} else {
document.getElementById("doEvent").innerHTML = "Not supported."
}
}

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

<div class="main">
<table>
<tr>
<td rowspan=5><img id='compass_needle' height="150px;" src="http://marylandlearninglinks.org/wp-content/themes/learning-links/img/compass-needle.png" title="Thanks to http://marylandlearninglinks.org/wp-content/themes/learning-links/img/compass-needle.png"></img></td>
<td><h2>Device Orientation</h2></td>
<td><form method='GET' action='./yaw_etc.html'><input type='text' value='geolocation_ipad_wifialways.jpg' id='image' name='image' style='width:180px;'></input><br><input type='submit' value='Use this Image URL' style='background-color:yellow;'></input><input style='width:1px;margin-left:-9000px;' type='text' id='junk' type='text' value=''></input></form></td>
</tr>
<tr>
<td>Event Supported</td>
<td id="doEvent"></td>
</tr>
<tr>
<td>Tilt Left/Right [gamma or roll]</td>
<td id="doTiltLeftToRight"></td>
</tr>
<tr>
<td>Tilt Front/Back [beta or pitch]</td>
<td id="doTiltFrontToBack"></td>
</tr>
<tr>
<td>Bearing [alpha or yaw]</td>
<td id="doBearing"></td>
</tr>
</table>
</div>

<div class="container" style="perspective: 300;">
<img src="geolocation_ipad_wifialways.jpg" id="imageId" width="50%" onerror=" this.src='geolocation_ipad_wifialways.jpg'; document.getElementById('image').value='geolocation_ipad_wifialways.jpg'; ">
</div>

</body>
</html>