---
title: "Cordova - Using Accelerometer"  
description: "The accelerometer is a built-in structure that manages tilt and motion of a device. It is also capable of detecting rotation and motion gestures such"  
author: "Anonymous User"  
published: 2017-04-22  
updated: 2018-03-19  
canonical: https://www.mindstick.com/blog/11361/cordova-using-accelerometer  
category: "apache cordova"  
tags: ["mobile development", "apache", "apache cordova"]  
reading_time: 3 minutes  

---

# Cordova - Using Accelerometer

The accelerometer is a built-in structure that manages tilt and motion of a device. It is also capable of detecting rotation and motion gestures such as swinging or shaking.

The most common feature of it is to activate auto [screen rotation](https://answers.mindstick.com/qa/109586/how-to-restoration-android-phone-screen-rotation-troubles) on [mobile devices](https://yourviews.mindstick.com/view/85524/influence-of-mobile-devices-on-travel-and-tourism-experiences) when the user changes their orientation from landscape to portrait or vice-versa.

Another new application for the accelerometer is to control the [mobile device](https://www.mindstick.com/articles/12967/portable-reporting-systems-and-mobile-device-management)’s music player with gestures such as Sony Ericsson Shake control and Samsung Motion play [technologies](https://www.mindstick.com/blog/11429/tools-and-technologies-to-learn-in-2017)).

They are also used for enhancing the gaming controls moving [right and left](https://www.mindstick.com/forum/33603/how-to-set-text-in-table-cell-to-right-and-left-in-ios) by tilting the device instead of tapping keys.

The plugin is also called **device-motion.** It is used to track device motion in three dimensions.

**For using the accelerometer in the app, you need to follow the following steps:**

**Step 1 - Installing Accelerometer Plugin**

Open the **[command prompt](https://answers.mindstick.com/qa/51716/how-to-make-bootable-pendrive-using-cmd-windows-command-prompt)**window and type the following code to install this plugin by using cordova-CLI.

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

**Step 2 - Adding Buttons**

Now, you need to [add two](https://www.mindstick.com/forum/156862/write-a-c-sharp-program-to-add-two-numbers-without-using-operator) buttons in **index.html** file. One will be used for getting current acceleration and the other will watch the changes for acceleration.

```
<button id = "currentAcceleration">GET ACCELERATION</button>
<button id = "changeAcceleration">WATCH ACCELERATION</button>
```

**Step 3 - Adding [Event Listeners](https://www.mindstick.com/forum/159117/how-do-you-handle-events-using-jquery-and-attach-event-listeners-to-elements)**

Let's [add event](https://answers.mindstick.com/qa/93763/how-to-add-event-handlers-on-html-elements-by-javascript) listeners for our buttons to **onDeviceReady** function inside index.js.

```
document.getElementById("currentAcceleration").addEventListener("click", currentAcceleration);
document.getElementById("changeAcceleration").addEventListener("click", changeAcceleration);
```

## Step 4 – Create Functions

Now, you have to create two functions. First will be used to get the value of present acceleration and the second one will watch acceleration and update in every three seconds. You also have to add **clearWatch** wrapped by setTimeout function to stop watching acceleration after a specific time period. The frequency parameter is used to trigger the [callback function](https://www.mindstick.com/forum/157808/what-is-a-callback-function-and-how-is-it-used-in-javascript) every three seconds.

```
function currentAcceleration(){
   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 changeAcceleration(){
   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 you press **GET ACCELERATION** button, you will get the current value of acceleration. If you press **WATCH ACCELERATION** the alert will be fired every three seconds. After next alert is shown the clearWatch function will be called and no more alerts will be shown as the timeout is set to 10000 milliseconds.

---

Original Source: https://www.mindstick.com/blog/11361/cordova-using-accelerometer

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.