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" ) { Scrap.print("permission granted") } }) .catch( e => { Scrap.print("permission denied") } )
window.addEventListener("deviceorientation", handleOrientation, true);
surface = new Oak.Rendering.Surface(); = "100%"; Scrap.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);

Explore OakFrame

    Basic Programing with Javascript

    Welcome to the OakFrame Interactive Basic Programming with Javascript course. This course is provided through an...


    Play games in your browser for free, handcrafted by us here at OakFrame!

    Oak Studio Documentation

    Simple to Embed and Integrate We designed OakFrame to be easy to extend in order to provide further integration...

    Design Systems

    A complete, reliable, flexible, and cost-effective infrastructure is a fundamental requirement in modern companies....

    About OakFrame

    OakFrame is a design, development, and research firm located in Dallas, Texas, developing experiences for audiences...