Skip to content

Instantly share code, notes, and snippets.

@takidog

takidog/ios_motion_permission_request.html

Last active January 12, 2020 14:15
Show Gist options
  • Save takidog/633a4659b0ec25ba0a0def8642a41a44 to your computer and use it in GitHub Desktop.
Save takidog/633a4659b0ec25ba0a0def8642a41a44 to your computer and use it in GitHub Desktop.
Download ZIP
https only.
Raw
ios_motion_permission_request.html
<html>
<head>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
#request {
display: true;
position: fixed;
top: 0px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: rgba(0, 0, 0, 0.1);
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
padding: 10px;
border-radius: 3px;
}
</style>
<script>
function check() {
var match = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/),
version;
if (match !== undefined && match !== null) {
version = [
parseInt(match[1], 10),
parseInt(match[2], 10),
parseInt(match[3] || 0, 10)
];
ver = parseFloat(version.join('.'));
if (ver < 13) {
document.getElementById('request').style.visibility = 'hidden';
} else {
document.getElementById('request').style.visibility = 'visible';
}
}
else {
document.getElementById('request').style.visibility = 'hidden';
}
}
</script>
</head>
<body onclick="check()">
<button id="request" title="Tap Here">Tap Here to enable orientation tracking</button>
alpha:<span id="alpha"></span><br />
beta:<span id="beta"></span><br />
gamma:<span id="gamma"></span><br />
</body>
<script>
function requestT() {
if (typeof (DeviceMotionEvent) !== 'undefined' && typeof (DeviceMotionEvent.requestPermission) === 'function') {
DeviceMotionEvent.requestPermission()
.then(response => {
alert('Orientation tracking ' + response);
if (response == 'granted') {
window.addEventListener('devicemotion', (e) => {
document.getElementById('request').style.visibility = 'hidden';
})
}
})
.catch(console.error)
} else {
alert('DeviceMotionEvent is not defined');
}
}
document.getElementById('request').onclick = requestT;
</script>
<script>
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', function (event) {
var a = document.getElementById('alpha'),
b = document.getElementById('beta'),
g = document.getElementById('gamma'),
alpha = event.alpha;
beta = event.beta;
gamma = event.gamma;
a.innerHTML = Math.round(alpha);
b.innerHTML = Math.round(beta);
g.innerHTML = Math.round(gamma);
}, false);
} else {
document.querySelector('body').innerHTML = 'browser not supported.';
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment