<!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 and http://www.mobogenie.com/download-ship-parking-simulation-3d-489590.html</title>
<script type='text/javascript'>

var wasthisso='' + (screen.msOrientation || screen.mozOrientation || (screen.orientation || {}).type); //"portrait";
var wasangle=eval(180 - eval('' + window.orientation));

//var wasangle='' + (screen.msOrientation || screen.mozOrientation || (screen.orientation || {}).angle); //"portrait";
//alert('' + wasangle);
//if (screen.orientation.angle) {
// wasangle=eval('' + screen.orientation.angle);
//}

var dmore='none';
var dblock='BLOCK';
var zalpha=0, chalpha=null;
var spin=location.search.split('spin=')[1] ? "<input onclick='spingame();' name='spin' type='submit' value='Spin the Device' style='background-color:lightblue;'></input>" : "";

if ((navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) || document.URL.indexOf('alert=') != -1) && document.URL.toLowerCase().indexOf('https:') != 0) {
location.href=(document.URL.replace('http:','https:') + '&random=' + Math.floor(Math.random() * 174765654)).replace('.html&','.html?');
}
if ((navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) || document.URL.indexOf('update=') != -1) && document.URL.toLowerCase().indexOf('https:') != 0) {
location.href=(document.URL.replace('http:','https:') + '&random=' + Math.floor(Math.random() * 174765654)).replace('.html&','.html?');
}

// Thanks to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await and
// https://gist.github.com/Ajasra/ddd616505013a4309c0dda8a8ba626cb

async function myfunction() {
console.log('Inside of myfunction');
//alert(0);
if (window.DeviceOrientationEvent && typeof(DeviceOrientationEvent.requestPermission) === "function") {
//alert(4);
const permissionState = await DeviceOrientationEvent.requestPermission().then(response => {
if (response === 'granted') {
// document.getElementById("premain").innerHTML='prehere';
if (1 == 2) { alert('GrAnted'); }
console.log('okay');
//window.addEventListener('deviceorientation', OrientationHandler, true);
//setInterval(tenth,100);
//onlo(); //dorh();
dmore=dblock; //'BLOCK';
spin="<input onclick='spingame();' name='spin' type='submit' value='Spin the Device' style='background-color:lightblue;'></input>";
dblock='none';
setTimeout(fallow, 2000); //document.getElementById('ballow').style.display='block';
onl();
return true;
} else { spin=''; console.log('prompt'); return false; } //else if (result.state === 'prompt') {
// dmore='block';
// setTimeout(fallow, 2000); //document.getElementById('ballow').style.display='block';
// if (1 == 11) { alert("Need prompt!"); }
//} else {
//dmore='block';
//setTimeout(fallow, 2000); //document.getElementById('ballow').style.display='block';
//if (1 == 11) { alert("Not Supported!"); }
//}
}).catch(console.error);

//if (permissionState === "granted") {
// alert('granted');
//} else {
// alert('denied');
//}
} else if (window.DeviceOrientationEvent) {
console.log('Okay');
dmore='none';
spin='';
setTimeout(fallow, 2000); //document.getElementById('ballow').style.display='block';
//alert(44);
// document.getElementById("premain").innerHTML='posthere';
//setInterval(tenth,100);
//onlo(); //dorh();
onl();
} else {
spin='';
dmore='none';
setTimeout(fallow, 2000);
}

if (window.DeviceMotionEvent && typeof(DeviceMotionEvent.requestPermission) === "function") {
//alert(24);
const permissionStateM = await DeviceMotionEvent.requestPermission().then(response => {
if (response === 'granted') {
if (1 == 2) { alert('GranTed'); }
window.addEventListener('devicemotion', function(event) {
lalpha='' + event.rotationRate.alpha;
if (chalpha != null) {
zalpha='' + chalpha;
} else {
zalpha='' + event.accelerationIncludingGravity.z;
}
if (iz != '') {
if (iz.indexOf(' ' + zalpha + ' ') == -1) { iz+=zalpha + ' ' }
}
});
//window.addEventListener('deviceorientation', OrientationHandler, true);
} else { return false; } //else if (result.state === 'prompt') {
// if (1 == 2) { alert("NeeD prompt!"); }
//} else {
//if (1 == 2) { alert("NoT Supported!"); }
//}
}).catch(console.error);

//if (permissionStateM === "granted") {
// alert('Granted');
//} else {
// alert('Denied');
//}
} else if (window.DeviceMotionEvent) {
//alert(244);
window.addEventListener('devicemotion', function(event) {
lalpha='' + event.rotationRate.alpha;
if (chalpha != null) {
zalpha='' + chalpha;
} else {
zalpha='' + event.accelerationIncludingGravity.z;
}
if (iz != '') {
if (iz.indexOf(' ' + zalpha + ' ') == -1) { iz+=zalpha + ' ' }
}
});
}

}

// Here we wait for the myfunction to finish
// and then returns a promise that'll be waited for aswell
// It's useless to wait the myfunction to finish before to return
// we can simply returns a promise that will be resolved later

// Also point that we don't use async keyword on the function because
// we can simply returns the promise returned by myfunction
function start() {
return myfunction();
}

// Call start
(async() => {
console.log('before start');

await start();

console.log('after start');
})();

window.addEventListener("orientationchange", function() {
// Announce the new orientation number
//if (screen.orientation.angle) {
// wasangle=eval('' + screen.orientation.angle);
//}
//document.title='' + wasangle;
//alert('' + wasangle);
//alert(window.orientation);
wasangle=eval(180 - eval('' + window.orientation));
var thisso='' + screen.msOrientation || screen.mozOrientation || (screen.orientation || {}).type;
if (('' + thisso) == 'undefined') {
var mql=window.matchMedia("(orientation: portrait)");
// If there are matches, we're in portrait
if (mql.matches) {
thisso="Portrait"; // Portrait orientation
} else {
thisso="Landscape"; // Landscape orientation
}
}

if (thisso != wasthisso) {
wasthisso=thisso;
//alert('ori');
}
}, false);

var degtorad = Math.PI / 180; // Degree-to-Radian conversion ... thanks to https://www.w3.org/TR/orientation-event/#worked-example

var cimg="geolocation_ipad_wifialways.jpg";
var gamemaybe=document.URL.indexOf('game=');
var score=100000;
var goes=0;
var secselapsed=0;
var irange=0;

var origsel="<select id='ideas' onchange='gameon=false; selval=this.value; setTimeout(prestartsubgame,1200); '><option value=''>Please select instruction below ...</option></select>";

// gamma is the left-to-right tilt in degrees, where right is positive
var tiltLeftToRight=0; // = eventData.gamma;

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

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

var gameon=false;
var instrcnt='0,0,0';

var initial_z=0;
var iz='';

var initial_yaw=0;
var initial_pitch=0;
var initial_roll=0;

var next_yaw=0;
var next_pitch=0;
var next_roll=0;

var diff_yaw=0;
var diff_pitch=0;
var diff_roll=0;

var to_yaw=0;
var to_pitch=0;
var to_roll=0;

var selval='';
var nump=0;
var spinscores=[];
var spingoes=[];
var spinnext=0;
var degtospin=0;

function amready(whoin) {
var who=eval(eval(whoin) + 0);
//alert('Who=' + who);
if (document.getElementById('b' + who).innerHTML == 'Not Ready') {
document.getElementById('b' + who).style.backgroundColor='green';
document.getElementById('b' + who).innerHTML='Spin close to <font size=4 color=red>' + degtospin + '° clockwise ∱</font>, then tap me again';
initial_yaw=eval('0' + document.getElementById("doBearing").innerHTML);
if (chalpha != null) {
initial_z=eval('0' + chalpha);
chalpha=null;
} else {
initial_z=eval('0' + zalpha);
}
if (document.URL.indexOf('z=') != -1 || 56 == 56) { iz=' ' + initial_z + ' '; }
if (document.getElementById('th0').innerHTML.indexOf('tap your ') != -1) {
document.getElementById('th0').innerHTML=document.getElementById('th0').innerHTML.split('tap your ')[0] + 'spin now. Good luck!';
}
} else if (document.getElementById('b' + who).innerHTML != 'Ready') {
//alert('WHO=' + who);
spingoes[eval(-1 + eval(who))]++;
//alert('' + Math.abs(eval(degtospin - eval(eval(360 + eval('0' + document.getElementById('doBearing').innerHTML) - initial_yaw) % 360))) + ' via initial_yaw=' + initial_yaw + ' and curbrg=' + document.getElementById('doBearing').innerHTML);
spinscores[eval(-1 + eval(who))]-=Math.abs(eval(degtospin - eval(eval(360 + eval('0' + document.getElementById('doBearing').innerHTML) - initial_yaw) % 360)));
document.getElementById('goes' + who).innerHTML='' + spingoes[eval(-1 + eval(who))];
document.getElementById('score' + who).innerHTML='' + spinscores[eval(-1 + eval(who))];
document.getElementById('b' + who).style.backgroundColor='white';
document.getElementById('b' + who).innerHTML='Not Ready';
if (iz != '') {
//alert(iz);
iz='';
}
spinnext++;
if (spinnext == nump) { spinnext=0; }
gospin(spinnext);
}
}

function playspin(cnump) {
var mytih='<thead><tr></tr></thead><tfoot><tr></tr></tfoot>';
if (cnump.trim() != '') {
nump=eval(cnump);
mytih=mytih.replace('<thead>', '<thead><tr><th style="cursor:pointer;" onclick="alert(this.title);" title="Careful how you play so as not to drop your device nor have it hit something. On carpet with lots of room is ideal here." id=th0 colspan=' + nump + '>Welcome to the <font title="Careful how you play so as not to drop your device nor have it hit something. On carpet with lots of room is ideal here." color=purple size=5>Spin the Device</font> game for ' + nump + '<span id=s0></span></th></tr>');
for (var ii=1; ii<=nump; ii++) {
spinscores.push(36000);
spingoes.push(0);
mytih=mytih.replace('</tr></thead>', '<th id=th' + ii + '><div id=div' + ii + ' contenteditable=true>Player ' + ii + '</div></th></tr></thead>');
mytih=mytih.replace('</tr></tfoot>', '<td id=td' + ii + '><span id=score' + ii + '>' + spinscores[eval(-1 + ii)] + '</span><span> / </span><span id=goes' + ii + '>0</span><br><br><button title="Click when ready" id=b' + ii + ' onclick=amready(' + ii + ');>Not Ready</button></th></tr></tfoot>');
}
document.getElementById('mytable').innerHTML=mytih;
document.getElementById('mytable').border='20';
}
gospin(spinnext);
}

function gospin(whoin) {
var who=eval(eval(whoin) + 1);
//alert('who=' + who);
document.getElementById('b' + who).style.backgroundColor='yellow';
degtospin=eval(Math.floor(Math.random() * 358) + 1);
document.getElementById('s0').innerHTML=' ... <font color=blue size=4>' + document.getElementById('div' + who).innerHTML + '</font> ... try to spin close to <font color=red size=4>' + degtospin + '° clockwise ∱</font> & tap your yellow Not Ready button to start';
}

function spingame() {
document.getElementById('dspin').innerHTML="<select onchange='playspin(this.value);'><option value=''>Spin Game number of players below ...</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option></select>";
}

function fallow() {
document.getElementById('dspin').innerHTML=spin;
if (dmore == 'BLOCK') {
document.getElementById('ballow').style.backgroundColor='lightgreen';
document.getElementById('ballow').innerHTML='Start';
} else {
document.getElementById('ballow').style.display=dmore; //'none';
}
}

function newscore() {
var nscore=score;
try {
if (Math.round(brg) == to_yaw) {
nscore++;
} else if (Math.round(brg) >= initial_yaw && Math.round(brg) <= to_yaw) {
to_yaw=to_yaw;
} else if (Math.round(brg) <= initial_yaw && Math.round(brg) >= to_yaw) {
to_yaw=to_yaw;
} else if (Math.round(brg) > initial_yaw && Math.round(brg) > to_yaw && to_yaw > initial_yaw) {
nscore++;
to_yaw=to_yaw;
} else if (Math.round(brg) < initial_yaw && Math.round(brg) < to_yaw && to_yaw < initial_yaw) {
nscore++;
to_yaw=to_yaw;
} else {
nscore-=Math.abs(Math.round(brg) - initial_yaw);
}
} catch(ew) { }
try {
if (Math.round(tiltFrontToBack) == to_pitch) {
nscore++;
} else if (Math.round(tiltFrontToBack) >= initial_pitch && Math.round(tiltFrontToBack) <= to_pitch) {
to_pitch=to_pitch;
} else if (Math.round(tiltFrontToBack) <= initial_pitch && Math.round(tiltFrontToBack) >= to_pitch) {
to_pitch=to_pitch;
} else if (Math.round(tiltFrontToBack) > initial_pitch && Math.round(tiltFrontToBack) > to_pitch && to_pitch > initial_pitch) {
nscore++;
to_pitch=to_pitch;
} else if (Math.round(tiltFrontToBack) < initial_pitch && Math.round(tiltFrontToBack) < to_pitch && to_pitch < initial_pitch) {
nscore++;
to_pitch=to_pitch;
} else {
nscore-=Math.abs(Math.round(tiltFrontToBack) - initial_pitch);
}
} catch(ew0) { }
try {
if (Math.round(tiltLeftToRight) == to_roll) {
nscore++;
} else if (Math.round(tiltLeftToRight) >= initial_roll && Math.round(tiltLeftToRight) <= to_roll) {
to_roll=to_roll;
} else if (Math.round(tiltLeftToRight) <= initial_roll && Math.round(tiltLeftToRight) >= to_roll) {
to_roll=to_roll;
} else if (Math.round(tiltLeftToRight) > initial_roll && Math.round(tiltLeftToRight) > to_roll && to_roll > initial_roll) {
nscore++;
to_roll=to_roll;
} else if (Math.round(tiltLeftToRight) < initial_roll && Math.round(tiltLeftToRight) < to_roll && to_roll < initial_roll) {
nscore++;
to_roll=to_roll;
} else {
nscore-=Math.abs(Math.round(tiltLeftToRight) - initial_roll);
}
} catch(ew00) { }
if (nscore > score) setTimeout(spacechangeit, 700);
return nscore;
}

function spacechangeit() {
document.getElementById("ideas").value='';
gameon=false;
startsubgame('');
}

function changeit() {
document.getElementById("ideas").value=instrcnt;
gameon=false;
startsubgame(instrcnt);
}

function newinstruction() {
initial_yaw=Math.round(brg);
initial_pitch=Math.round(tiltFrontToBack);
initial_roll=Math.round(tiltLeftToRight);
next_yaw=initial_yaw;
next_pitch=initial_pitch;
next_roll=initial_roll;
diff_roll=eval(Math.floor(Math.random() * 160) - 80);
diff_pitch=eval(Math.floor(Math.random() * 160) - 80);
diff_yaw=eval(Math.floor(Math.random() * 160) - 80);
to_yaw=eval(initial_yaw + diff_yaw);
to_pitch=eval(initial_pitch + diff_pitch);
to_roll=eval(initial_roll + diff_roll);
instrcnt="" + diff_roll + "," + diff_pitch + "," + diff_yaw;
setTimeout(changeit, 500);
return "<option value='" + instrcnt + "'>Roll " + instrcnt.replace(",", " Pitch ").replace(",", " Yaw ") + "</option>" + "<option value='" + instrcnt.replace(/,/g,', ') + "'>Easier Roll " + instrcnt.replace(",", " Pitch ").replace(",", " Yaw ") + "</option><option value=' '>Give up ... next please</option>";
}

function seccounter() {
if (gameon && score > 0) {
if (next_yaw != Math.round(brg) || next_pitch != Math.round(tiltFrontToBack) || next_roll != Math.round(tiltLeftToRight)) {
next_yaw=Math.round(brg);
next_pitch=Math.round(tiltFrontToBack);
next_roll=Math.round(tiltLeftToRight);
secselapsed++;
}
document.getElementById("secs").innerHTML="" + secselapsed;
score=newscore();
document.getElementById("score").innerHTML="" + score;
setTimeout(seccounter, 1000);
} else {
gameon=false;
}
}

function prestartsubgame() {
var thisv=selval;
startsubgame(thisv);
}

function startsubgame(thisv) {
if (thisv.replace(' ','') == '') {
if (thisv != '') score-=20;
gameon=false;
if (origsel) {
document.getElementById("doEvent").innerHTML = origsel.replace("</select>", newinstruction() + "</select>");
}
} else {
goes++;
document.getElementById("secs").title="Goes:" + goes;
if (document.getElementById("ideas").value.indexOf(', ') != -1) {
document.getElementById("roll_h").innerHTML="Tilt Left/Right [gamma or roll=" + to_roll + "]";
document.getElementById("pitch_h").innerHTML="Tilt Front/Back [beta or pitch=" + to_pitch + "]";
document.getElementById("yaw_h").innerHTML="Bearing [alpha or yaw=" + to_yaw + "]";
} else {
document.getElementById("roll_h").innerHTML="Tilt Left/Right [gamma or roll]";
document.getElementById("pitch_h").innerHTML="Tilt Front/Back [beta or pitch]";
document.getElementById("yaw_h").innerHTML="Bearing [alpha or yaw]";
}
gameon=true;
setTimeout(seccounter, 1000);
}
}

function deviceOrientationHandler(xtiltLeftToRight, xtiltFrontToBack, xbrg, xabsolute, xcb, xcbacc) { //tiltLeftToRight, tiltFrontToBack, brg) {
//document.getElementById("premain").innerHTML='here';
document.getElementById("doTiltLeftToRight").innerHTML = Math.round(xtiltLeftToRight);
document.getElementById("doTiltFrontToBack").innerHTML = Math.round(xtiltFrontToBack);
if ((document.URL.indexOf('z=') != -1 || 56 == 56) && xabsolute !== true && +xcbacc > 0 && +xcbacc < 50) {
//document.getElementById("doBearing").innerHTML = Math.round(xbrg) + '.' + Math.round(xcb || 0);
//document.getElementById("doBearing").innerHTML = ('' + Math.round(xbrg) + '.' + Math.round(xcb || 0)).split('.')[1];
document.getElementById("doBearing").innerHTML = ('' + Math.round(xcb || 0) + '.' + Math.round(xbrg)).split('.')[0];
if (Math.round(xcb || 0) != Math.round(xbrg)) {
try { document.getElementById('compass_needle').style.webkitTransform = ("rotate(" + Math.round(xcb || 0) + "deg)"); } catch(e10) { }
try { document.getElementById('compass_needle').style.MozTransform = ("rotate(" + Math.round(xcb || 0) + "deg)"); } catch(e1000) { }
try { document.getElementById('compass_needle').style.msTransform = ("rotate(" + Math.round(xcb || 0) + "deg)"); } catch(e100) { }
try { document.getElementById('compass_needle').style.OTransform = ("rotate(" + Math.round(xcb || 0) + "deg)"); } catch(e10000) { }
try { document.getElementById('compass_needle').style.transform = ("rotate(" + Math.round(xcb || 0) + "deg)"); } catch(e1) { }
if (initial_yaw == Math.round(brg)) {
brg=xcb || 0;
} else {
brg=xcb || 0;
}
}
} else {
document.getElementById("doBearing").innerHTML = Math.round(xbrg);
}

// 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;
//document.getElementById("premain").innerHTML='prehere';
if (gamemaybe != -1) {
if (document.URL.indexOf('viamobogenie_game=') != -1) document.getElementById('imageId').title='Image courtesy of Mobogenie.com ... http://ndl.mgccw.com/mu3/game/000/946/622/sss/48fe14ac9ff54f17a802ce89f8272775_small.png';
//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("premain").innerHTML='posthere';
if (gamemaybe != -1) {
document.getElementById("event_supported").innerHTML = "<a href='" + document.URL + "' title='New Game'>Score</a>: <span id='score'>" + score + "</span> / Seconds Alive: <span id='secs'>" + secselapsed + "</span>";
if (origsel) {
document.getElementById("doEvent").innerHTML = origsel.replace("</select>", newinstruction() + "</select>");
}
} else if (gamemaybe != 0) {
document.getElementById("doEvent").innerHTML = "DeviceOrientation";
}
// Listen for the deviceorientation event and handle the raw data
window.addEventListener('deviceorientation', function(eventData) {
//if (eventData.webkitCompassHeading) {
// chalpha=eval('' + eventData.webkitCompassHeading);
//}
// if (chalpha === null && eventData.absolute !== true && +eventData.webkitCompassAccuracy > 0 && +eventData.webkitCompassAccuracy < 50) {
// chalpha = eventData.webkitCompassHeading || 0;
// }
// gamma is the left-to-right tilt in degrees, where right is positive
//document.getElementById("premain").innerHTML='morehere';
tiltLeftToRight = eventData.gamma;

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

// alpha is the compass direction the device is facing in degrees
if (eventData.absolute !== true && +eventData.webkitCompassAccuracy > 0 && +eventData.webkitCompassAccuracy < 50) {
brg = eval('' + eventData.webkitCompassHeading || 0);
if (document.getElementById('yaw_h').innerHTML.indexOf('<table') == -1) {
document.getElementById('yaw_h').innerHTML+=' <table border=1 id=ntable style="background-color:pink;display:inline-block;font-size:10px;"><tr><td>N</td></tr><tr><td>⬆</td></tr></table> ⬆';
}
} else {
brg = eval(360.0 - eval('' + eventData.alpha));
}

if (gamemaybe > 0) {
initial_yaw=Math.round(brg);
initial_pitch=Math.round(tiltFrontToBack);
initial_roll=Math.round(tiltLeftToRight);
//alert(initial_yaw + ',' + initial_pitch + ',' + initial_roll);
}

if (document.getElementById('ntable')) {
var ts=450;
if (wasangle != 0) {
ts+=wasangle;
}
try { document.getElementById('ntable').style.webkitTransform = ("rotate(" + eval(ts - Math.round(brg)) + "deg)"); } catch(e10) { }
try { document.getElementById('ntable').style.MozTransform = ("rotate(" + eval(ts - Math.round(brg)) + "deg)"); } catch(e1000) { }
try { document.getElementById('ntable').style.msTransform = ("rotate(" + eval(ts - Math.round(brg)) + "deg)"); } catch(e100) { }
try { document.getElementById('ntable').style.OTransform = ("rotate(" + eval(ts - Math.round(brg)) + "deg)"); } catch(e10000) { }
try { document.getElementById('ntable').style.transform = ("rotate(" + eval(ts - Math.round(brg)) + "deg)"); } catch(e1) { }
}

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) { }

if (gamemaybe != -1) gamemaybe=0;

// call our orientation event handler
deviceOrientationHandler(tiltLeftToRight, tiltFrontToBack, brg, eventData.absolute, eventData.webkitCompassHeading, eventData.webkitCompassAccuracy);
}, true); //false);
} else {
document.getElementById("doEvent").innerHTML = "Not supported."
// temp two below
//document.getElementById("event_supported").innerHTML = "<a href='" + document.URL + "' title='New Game'>Score</a>: <span id='score'>" + score + "</span> / Seconds Alive: <span title='Goes:0' id='secs'>" + secselapsed + "</span>";
//document.getElementById("doEvent").innerHTML = origsel.replace("</select>", newinstruction() + "</select>");
}
}

</script>
</head>
<body onload="if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { onl(); }">
<button id=ballow style='display:block;background-color:yellow;' onclick='start();'>Allow</button>
<div class="main">
<table id=mytablez>
</table>
<table id=mytable>
</table>
<table id=mytabletwo>
<tr>

<td rowspan=5><img id='compass_needle' height="150px;" src="./compass-needle.png" title="Thanks to http://marylandlearninglinks.org/wp-content/themes/learning-links/img/compass-needle.png"></img></td>
<td><h2 id=premain>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' style='background-color:yellow;'></input><input name='game' type='submit' value='Game' style='background-color:lightgreen;'></input><div id=dspin style='display:inline-block;'></div><br><input onclick=" if (1 == 2) { document.getElementById('image').value='//ndl.mgccw.com/mu3/game/000/946/622/sss/48fe14ac9ff54f17a802ce89f8272775_small.png'; } document.getElementById('image').value='./pngkey.com-cockpit-png-3024859.png'; " style="background-color:lightblue;" name='viamobogenie_game' type='submit' value='Game via Cockpit Image' title='Thanks to https://www.pngkey.com/download/u2w7i1u2e6i1a9u2_cockpit-cockpit-png/'></input><input style='width:1px;margin-left:-9000px;' type='text' id='junk' type='text' value=''></input></form></td>
</tr>
<tr>
<td id='event_supported'>Event Supported</td>
<td id="doEvent"></td>
</tr>
<tr>
<td id='roll_h'>Tilt Left/Right [gamma or roll]</td>
<td id="doTiltLeftToRight"></td>
</tr>
<tr>
<td id='pitch_h'>Tilt Front/Back [beta or pitch]</td>
<td id="doTiltFrontToBack"></td>
</tr>
<tr>
<td id='yaw_h'>Bearing [alpha or yaw]</td>
<td id="doBearing"></td>
</tr>
</table>
</div>

<br><br><br><br>
<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>