Know Thy Gyroscope and JS – Part I

Know Thy Gyroscope and JS – Part I

This is the first part of two-part-post. Here I will discuss how we can access the gyroscope and accelerometer data on mobile devices via JavaScript. In Part II I will focus on the differences between devices/browsers and how I deal with them. If you are already familiar with the basics feel free to jump to Part II

In the modern browsers on mobile devices and laptops you can access the gyroscope and accelerometer data using JavaScript. The W3C document explains the standard very well. http://www.w3.org/TR/orientation-event/ and all through this post I am following what is mentioned in this standard.

Before you go on reading it is important to understand what are the axises of the mobile device. Below is a nice image for that.

phoneaxises

The accelerometer and gyroscope sensors provide data about the rotation and movement of the device, on and around those axises. To access this sensor data via JavaScript we can use the events of the window object. The window object has two events for this: devicemotion and deviceorientation. You can add event listeners to the window object or use the two properties.

 

window.ondeviceorientation

window.addEventListener("deviceorientation", function(event) {
    // process event.alpha, event.beta and event.gamma
}, true);

window.ondeviceorientation = function(event) {
    // process event.alpha, event.beta and event.gamma
}

Alpha, beta and gamma are the Euler angles. The detailed maths behind it is rather hard to grasp and I do not suggest you go deeper unless you are really interested in the geometry. You can think of them as rotation of the device around its axis. Alpha around Z axis, beta around X axis and gamma around Y axis. 

 

window.ondevicemotion

window.addEventListener("devicemotion", function(event) {
    // Process
    // event.acceleration.x
    // event.acceleration.y
    // event.acceleration.z,
    // event.accelerationIncludingGravity.x,
    // event.accelerationIncludingGravity.y,
    // event.accelerationIncludingGravity.z,
    // event.rotationRate.alpha,
    // event.rotationRate.beta,
    // event.rotationRate.gamma,
    // event.interval
}, true);

window.ondevicemotion = function(event) {
    // Or you can process the same event values here
}

 event.acceleration is the acceleration of the device in different axises (x, y, z), and it changes only if the device is on move and accelerating.

event.accelerationIncludingGravity is the same thing but it also calculates the gravitational acceleration. Meaning that even if the device is stationary you will see the values are never “0” because there is always gravity.

When the device is moving acceleration gives you the rate of change in the axises. And just like that event.rotationRate gives you the change in rotation angels.

 

window.compassneedscalibration

Some times the compass of the device is not calibrated. In that case the angel values returned from deviceorientation event might be incorrect. If this happens a new event is triggered by the browser. To notice this problem you need to listen to compassneedscalibration event. 

window.addEventListener("compassneedscalibration", function(event) {
    // Here you can handle this
}, true);

 

Example

Here is a nice example for mapping the angels from deviceorientation event to CSS3 transforms https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Using_device_orientation_with_3D_transforms

 

Next Step

What I have mentioned above is completely following the standards. In other words what it should be. However I have seen some differences cross devices and browsers. I focus on these exceptions and the ways I addressed them are in the Part II of this post.