HTML5 JavaScript DeviceOrientation with Example
device = {
absolute:null,
alpha:null,
beta:null,
gamma:null
}
data=[];
function handleOrientation(event) {
device.absolute = event.absolute;
device.alpha = event.alpha-180;
device.beta = event.beta;
device.gamma = event.gamma;
}
DeviceOrientationEvent.requestPermission()
.then( response => {
// (optional) Do something after API prompt dismissed.
if ( response == "granted" ) {
print("permission granted")
}
})
.catch( e => {
print("permission denied")
} )
window.addEventListener("deviceorientation", handleOrientation, true);
surface = new Oak.Rendering.Surface();
surface.element.style.width = "100%";
print(surface.getElement());
window.setInterval(()=>{
data.push(Object.assign({},device)); // Creates a clone of the object literal
if (data.length > 300){
data.shift();
}
surface.fill("#eee");
h = surface.getHeight()/2;
len = surface.getWidth()/data.length;
for (i=0; i<data.length-1;i++){
o=data[i];
p=data[i+1];
surface.getContext().beginPath();
surface.getContext().strokeStyle="blue";
surface.getContext().moveTo(len*i, h+o.alpha);
surface.getContext().lineTo(len*(i+1), h+p.alpha);
surface.getContext().stroke();
surface.getContext().beginPath();
surface.getContext().strokeStyle="red";
surface.getContext().moveTo(len*i, h+o.beta);
surface.getContext().lineTo(len*(i+1), h+p.beta);
surface.getContext().stroke();
surface.getContext().beginPath();
surface.getContext().strokeStyle="green";
surface.getContext().moveTo(len*i, h+o.gamma);
surface.getContext().lineTo(len*(i+1), h+p.gamma);
surface.getContext().stroke();
}
},30);