68 lines
2.1 KiB
HTML
Executable file
68 lines
2.1 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
|
|
<meta charset="utf-8">
|
|
<!-- <script src="/js/p5.min.js"></script> -->
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<h1 id="lat">lat: </h1>
|
|
<h1 id="long">long: </h1>
|
|
<h1 id="heading">heading: </h1>
|
|
<button onclick='requestOrientationPermission();'>Request orientation permission</button>
|
|
|
|
<script>
|
|
|
|
const options = {
|
|
enableHighAccuracy: true,
|
|
maximumAge: 30000,
|
|
timeout: 27000,
|
|
};
|
|
|
|
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/) || navigator.userAgent.match(/AppleWebKit/)) {
|
|
function requestOrientationPermission(){
|
|
DeviceOrientationEvent.requestPermission()
|
|
.then(response => {
|
|
if (response == 'granted') {
|
|
// window.addEventListener('deviceorientation', function(eventData) {
|
|
window.addEventListener("deviceorientation", (event) => {
|
|
|
|
var compassdir;
|
|
if(event.webkitCompassHeading) {
|
|
// Apple works only with this, alpha doesn't work
|
|
compassdir = event.webkitCompassHeading;
|
|
}
|
|
else compassdir = event.alpha;
|
|
|
|
let heading = document.getElementById('heading');
|
|
heading.innerText = 'heading: ' + compassdir;
|
|
}, true);
|
|
}
|
|
})
|
|
.catch(console.error)
|
|
}
|
|
} else {
|
|
window.addEventListener("deviceorientationabsolute", (event) => {
|
|
let heading = document.getElementById('heading');
|
|
heading.innerText = 'heading: ' + event.alpha;
|
|
}, true);
|
|
}
|
|
|
|
const watchID = navigator.geolocation.watchPosition((position) => {
|
|
let lat = document.getElementById('lat');
|
|
lat.innerText = 'lat: ' + position.coords.latitude;
|
|
let long = document.getElementById('long');
|
|
long.innerText = 'long: ' + position.coords.longitude;
|
|
},
|
|
(error) => {},
|
|
options);
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|