Migrating from the Cordova Device Motion Plugin

Vishal Mishra
PhoneGap
Published in
2 min readAug 10, 2017

The Cordova Device Motion Plugin will see its sunset soon. This plugin provides access to the device’s accelerometer which detects the change (delta) in movement relative to the current device orientation, in three dimensions along the x, y, and z axes. The W3C Device Motion and Orientation API now defines a way to access the accelerometer of the device and is supported across iOS, Android and Windows devices.

Migrating from the plugin to the W3C Device Motion API

The access to the device accelerometer in the Cordova plugin is obtained by a global navigator.accelerometer object which provides a method navigator.accelerometer.watchAcceleration that allows the users to gather the acceleration of the device along the x, y and z axes. An example to obtain these values is shown below:

function onSuccess(acceleration) {
alert('Acceleration X: ' + acceleration.x + '\n' +
'Acceleration Y: ' + acceleration.y + '\n' +
'Acceleration Z: ' + acceleration.z + '\n' +
'Timestamp: ' + acceleration.timestamp + '\n');
}
function onError() {
alert('onError!');
}
var options = { frequency: 3000 }; // Update every 3 secondsvar watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);

However, in the W3C Device Motion and Orientation API, before we gather values from the device’s accelerometer and compass, we need to calibrate the compass of the device by instructing the user to calibrate the compass:

window.addEventListener("compassneedscalibration",function(event) {
// ask user to wave device in a figure-eight motion .
event.preventDefault();
}, true);

Once the compass has been calibrated, the devicemotion listener can be obtained by:

function processEvent(event) {
// process the event object
}
window.addEventListener("devicemotion",processEvent, true);

When the devicemotion event has been registered, the following properties can be obtained:

  • acceleration along the x, y and z axes: These are the values which we used to obtain from the watchAcceleration method of the Cordova Device Motion plugin. Sample code to obtain these values using the W3C API is provided below:
console.log(Math.round(event.acceleration.x));
console.log(Math.round(event.acceleration.y));
console.log(Math.round(event.acceleration.z));
  • accelerationIncludingGravity along the x, y and z axes: The W3C Device Motion API also provides information about the accelerationIncludingGravity property of the device which was not available in the Cordova Device Motion plugin.Sample code to obtain this property is provided below:
console.log(Math.round(event.accelerationIncludingGravity.x));
console.log(Math.round(event.accelerationIncludingGravity.y));
console.log(Math.round(event.accelerationIncludingGravity.z));
console.log(Math.round(event.rotationRate.alpha));
console.log(Math.round(event.rotationRate.beta));
console.log(Math.round(event.rotationRate.gamma));

In the Cordova Device Motion Plugin, the listener for the watchAcceleration property was removed by using the clearWatch method as shown below:

// watchID created while adding the watchAcceleration listener
navigator.accelerometer.clearWatch(watchID);

However, according to the W3C Device Motion and Orientation API , the devicemotion listener can be removed by:

window.removeEventListener("devicemotion",processEvent);

Your feedback is graciously accepted and appreciated!

--

--