<!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 dmore='none';
var dblock='BLOCK';

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';
dblock='none';
setTimeout(fallow, 2000); //document.getElementById('ballow').style.display='block';
onl();
return true;
} else { 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';
setTimeout(fallow, 2000); //document.getElementById('ballow').style.display='block';
//alert(44);
// document.getElementById("premain").innerHTML='posthere';
//setInterval(tenth,100);
//onlo(); //dorh();
onl();
} else {
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;
});
//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;
});
}

}

// 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');
})();

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;

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

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='';

function fallow() {
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;
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) { //tiltLeftToRight, tiltFrontToBack, brg) {
//document.getElementById("premain").innerHTML='here';
document.getElementById("doTiltLeftToRight").innerHTML = Math.round(xtiltLeftToRight);
document.getElementById("doTiltFrontToBack").innerHTML = Math.round(xtiltFrontToBack);
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>";
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) {
// 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
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);
}

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);
}, 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>
<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><br><input onclick=" document.getElementById('image').value='//ndl.mgccw.com/mu3/game/000/946/622/sss/48fe14ac9ff54f17a802ce89f8272775_small.png'; " style="background-color:lightblue;" name='viamobogenie_game' type='submit' value='Game via Cockpit Image' title='Thanks to mobogenie.com at http://ndl.mgccw.com/mu3/game/000/946/622/sss/48fe14ac9ff54f17a802ce89f8272775_small.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>