DeviceOrientation Event Specification: Detecting Device Motion
This tutorial demonstrates how you can detect device motions in Tizen.
Warm-up
Become familiar with the DeviceOrientation Event Specification API basics by learning about:
-
Detecting Device Rotation
Use the device orientation event to detect when the user rotates the device.
-
Detecting Device Acceleration
Use the device motion event to detect when the user accelerates the device.
Task in Mobile Applications
In the Compass task, we will walk through using the magnetic sensor data to orient a compass needle.
Detecting Device Rotation
Learning how to detect device rotation is a basic device motion handling skill:
- Display the device rotation details on the screen:
<h1>Device orientation tutorial</h1> <div> <p id="alpha"></p> <p id="beta"></p> <p id="gamma"></p> </div> <script>
var alphaElem = document.getElementById("alpha"); var betaElem =document.getElementById("beta"); var gammaElem = document.getElementById("gamma");
- To track changes in the device rotation, subscribe to the deviceorientation event:
window.addEventListener("deviceorientation", function(e) { alphaElem.innerHTML ='alpha value ' + Math.round(e.alpha); betaElem.innerHTML = 'beta value ' + Math.round(e.beta); gammaElem.innerHTML = 'gamma value ' + Math.round(e.gamma); }, true);
</script>
Source Code
For the complete source code related to this use case, see the following file:
Detecting Device Acceleration
Learning how to detect device acceleration is a basic device motion handling skill:
- Display the device acceleration details on the screen:
<h1>device orientation tutorial</h1> <div> <p id="firElem"></p> <p id="secElem"></p> <p id="thirElem"></p> </div> <script>
var firElem = document.getElementById("firElem"); var secElem =document.getElementById("secElem"); var thirElem = document.getElementById("thirElem");
- To track changes in the device acceleration, subscribe to the devicemotion event:
window.addEventListener("devicemotion", function(e) { /* Data for acceleration */ firElem.innerHTML = 'acceleration value<br><br> ' + '[ x value: '+ Math.round(e.acceleration.x) + " ]<br>" + '[ y value: '+ Math.round(e.acceleration.y) + " ]<br>" + '[ z value: '+ Math.round(e.acceleration.z) + ']'; /* Data for acceleration, including gravity */ secElem.innerHTML = 'accelerationIncludingGravity value<br><br> ' + '[ x value: ' + Math.round(e.accelerationIncludingGravity.x) + " ]<br>" + '[ y value: ' + Math.round(e.accelerationIncludingGravity.y) + " ]<br>" + '[ z value: ' + Math.round(e.accelerationIncludingGravity.z) + ']'; /* Data for rotation rate */ thirElem.innerHTML = 'rotationRate value<br><br> ' + '[ alpha value: ' + Math.round(e.rotationRate.alpha) + " degree ]<br>" + '[ beta value: ' + Math.round(e.rotationRate.beta) + " degree ]<br>" + '[ gamma value: ' + Math.round(e.rotationRate.gamma) + ' degree ]'; }, true);
</script>
Source Code
For the complete source code related to this use case, see the following file: