139 lines
3 KiB
HTML
139 lines
3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta charset="utf-8">
|
|
<script src="js/p5.min.js"></script>
|
|
<style>
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
canvas {
|
|
display: block;
|
|
}
|
|
</style>
|
|
</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>
|
|
//
|
|
//gps, heading
|
|
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;
|
|
compass1.heading = -compassdir;
|
|
}, true);
|
|
}
|
|
})
|
|
.catch(console.error)
|
|
}
|
|
} else {
|
|
window.addEventListener("deviceorientationabsolute", (event) => {
|
|
let heading = document.getElementById('heading');
|
|
heading.innerText = 'heading: ' + event.alpha;
|
|
compass1.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);
|
|
|
|
//p5
|
|
class Compass {
|
|
constructor(cx, cy, size, colors) {
|
|
this.cx = cx;
|
|
this.cy = cy;
|
|
this.size = size;
|
|
this.colors = colors;
|
|
this.heading = 0;
|
|
}
|
|
|
|
draw() {
|
|
push();
|
|
//
|
|
translate(this.cx, this.cy);
|
|
scale(this.size);
|
|
//
|
|
translate(0.5, 0.5);
|
|
//
|
|
noStroke();
|
|
//
|
|
fill(this.colors[0]);
|
|
circle(0, 0, 1);
|
|
//
|
|
fill(this.colors[1]);
|
|
rotate(this.heading);
|
|
quad(0.1, 0.2, 0, -0.4, -0.1, 0.2, 0, 0.1);
|
|
//
|
|
fill(this.colors[2]);
|
|
circle(0, 0, 0.1);
|
|
//
|
|
pop();
|
|
}
|
|
}
|
|
|
|
let compass1;
|
|
let compass_reading = 0;
|
|
|
|
function setup() {
|
|
createCanvas(windowWidth, windowHeight);
|
|
compass1 = new Compass(100, 100, 200, ['red', 'limegreen', 'yellow']);
|
|
compass2 = new Compass(300, 300, 20, ['yellow', 'navy', 'white']);
|
|
angleMode(DEGREES);
|
|
}
|
|
|
|
function draw() {
|
|
//
|
|
background(100);
|
|
|
|
//compass
|
|
fill(200);
|
|
noStroke();
|
|
// compass1.heading = compass_reading;
|
|
// compass1.heading = 5;
|
|
compass1.draw();
|
|
// compass2.draw();
|
|
}
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|