16 - Phonegap Accelerometer

Introduction

You might have noticed that when you tilt your smart phone, the orientation of the device changes from portrait to landscape and vice versa. Is your mobile device that smart to identify tilts and motions? In fact, a built-in electronic component in your mobile device is detecting the moves, tilts and rotations of your device and that component is accelerometer. Most common use of accelerometer is in enhancing gaming controls. Have you played games that are controlled by device tilting instead of pressing keys? You might have also controlled the music player in your mobile device with gestures. All these are some of the popular applications of accelerometer.

Accelerometer identifies where the device is in space by specifying x, y and z values. PhoneGap's Accelerometer API helps you get the device position at a specific point of time using getCurrentAcceleration method and get the device position over a period of time using watchAcceleration method. If you are tracking the position over a period of time, then you should clear the watch using clearWatch method once you are done.

Create an App

Create an Android mobile app named AndroidGetPosition on the desktop. Once the project is created on the desktop, bring the project into the Android Development Environment (Eclipse). Open the index.html file in the assets/www folder using your text editor and clean it up. Change the title to “Get Position”.

We will get the position of the device on the click of a button. We will use three separate <div> elements to display the values of X, Y and Z.

Now add the following lines of code inside the <body> section.

function stopTracking()
            {
                navigator.geolocation.clearWatch(watchVariable);
            }
Now your <script> section will look like this:
<script>
var watchVariable;
<button id="getPosition">Get Position</button><br />
X: <div id="posX"></div><br/>
Y: <div id="posY"></div><br/>
Z: <div id="posZ"></div>

Add the following lines of code inside the <head> section to check whether the device is ready. Once the device is ready, we will add the event listener to the button for its click event.

<script>
     window.onload = function()
     {
         document.addEventListener("deviceready", init, false);
     }
     function init()
     {
          document.getElementById('getPosition').addEventListener('click', getPosition, false);  
     }
     function getPosition()
     {
     }
</script>

We next need to write the getPosition function where we will get the position. PhoneGap's accelerometer object has getCurrentAcceleration method that will get the position of the device at a specific point of time. The first parameter of this method is a call back function that is called when position is received successfully and second parameter is a call back function that is called in case of an error.

Add the following line of code inside the getPosition function.

navigator.accelerometer.getCurrentAcceleration(onSuccess, onFailure);

Next we need to write the onSuccess and onFailure call back functions. Add the following lines of code inside the <script> section.

     function onSuccess(accelerometer)
            {
                var accelX = accelerometer.x;
                var accelY = accelerometer.y;
                var accelZ = accelerometer.z;
                document.getElementById('posX').innerHTML = accelX;
                document.getElementById('posY').innerHTML = accelY;
                document.getElementById('posZ').innerHTML = accelZ;
            }
     function onFailure(error)
            {
                alert("Accelerometer Error: " + error.code);
            }

Save the index.html file. Now you can test this project. But unfortunately, we cannot test this on an emulator of course because we cannot tilt or move our emulator practically. You can connect to an Android device and test this project in real time.

Summary

In this tutorial, we have created an app that tracks the position of the mobile device, that is x, y and z coordinate values, using accelerometer API. You can develop really creative apps with the help of accelerometer. For example, you can create an app that calculates the steps that a person takes (of course with the mobile) and can decide whether he is walking, jogging or running. Only thing is that you need an actual Android device to test the accelerometer feature. You can even try installing simulators like sensor simulator to test this feature. But as we are programming using JavaScript, it might be a bit difficult to practically use such simulators.

Like us on Facebook

Wideskills