Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

Cordova accelerometer


May 21, 2021 Cordova


Table of contents


The plug-in is also known as Device Motion. /b10> It is used to track device motion in 3D.

Step 1 - Install the accelerometer plug-in

We will install this plug-in using cordova-CLI. /b10> Type the following code into the command prompt window.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-device-motion

Step 2 - Add a button

The next thing we need to do is .html buttons to the index file. /b10> One is used to get the current acceleration, and the other monitors acceleration changes.

<button id = "getAcceleration">GET ACCELERATION</button>
<button id = "watchAcceleration">WATCH ACCELERATION</button>

Step 3 - Add an event listener

Let's add the button's event listener .js onDeviceReady function in index.

document.getElementById("getAcceleration").addEventListener("click", getAcceleration);
document.getElementById("watchAcceleration").addEventListener("click", watchAcceleration);

Step 4 - Create a function

We'll create two functions. /b10> The first will be used to get the current acceleration, the second will observe the acceleration, and will be notified every three seconds. /b11> We've also added clearWatch wrapped by the setTimeout function to stop watching acceleration after a specified time range. /b12> The frequency parameter is used to trigger a callback function every three seconds.

function getAcceleration(){
   navigator.accelerometer.getCurrentAcceleration(accelerometerSuccess, accelerometerError);

   function accelerometerSuccess(acceleration) {
      alert('Acceleration X: ' + acceleration.x + '\n' +
         'Acceleration Y: ' + acceleration.y + '\n' +
         'Acceleration Z: ' + acceleration.z + '\n' +
         'Timestamp: '      + acceleration.timestamp + '\n');
   };

   function accelerometerError() {
      alert('onError!');
   };
	
}

function watchAcceleration(){
    
   var accelerometerOptions = {
      frequency: 3000
   }

   var watchID = navigator.accelerometer.watchAcceleration(accelerometerSuccess, accelerometerError, accelerometerOptions);

   function accelerometerSuccess(acceleration) {
      alert('Acceleration X: ' + acceleration.x + '\n' +
         'Acceleration Y: ' + acceleration.y + '\n' +
         'Acceleration Z: ' + acceleration.z + '\n' +
         'Timestamp: '      + acceleration.timestamp + '\n');

      setTimeout(function() {
         navigator.accelerometer.clearWatch(watchID);
      }, 10000);

   };

   function accelerometerError() {
      alert('onError!');
   };
	
}

Now, if we press the GET ACCELERATION button, we will get the current acceleration value. /b10> If we press WATCH ATS, the alarm will be triggered every three seconds. /b20> After the third warning is displayed, the clearWatch function is called and we don't receive any more alerts because we set the timeout to 10000 milliseconds.

Cordova accelerometer