Reader Level:
ARTICLE

Accelerometer in PhoneGap

Posted by Richa Garg Articles | Windows Phone July 31, 2012
In this article I will explain how to use the accelerometer in Apache Cordova/PhoneGap and the various methods and parameters of it.
  • 0
  • 0
  • 3640

Introduction

An Accelerometer can be used to capture the device motion in the x, y and z direction. Their are various methods of an accelerometer; some of them are described in this article.

1) accelerometer.getCurrentAcceleration

This method can be used to get the current acceleration along the x, y and z axis. The accelerometer is a motion sensor that detects the changes in the movement to the current device orientation. This can detect the 3D movement along with the x, y and z axis. The accelerometer is returned using the accelerometerSuccess callback function. The supported platforms are Android, BlackBerry WebWorks (OS 5.0 and higher), iPhone, Windows Phone 7 (Mango) and Bada 1.2 & 2.x. The syntax is:

navigator.accelerometer.getCurrentAcceleration(accelerometerSuccess, accelerometerError);

This method takes two parameters; they are:

accelerometerSuccess :  This parameter can provide the onSuccess callback function that provides the acceleration information.

accelerometerError : This parameter can provide the onError callback function for accleration functions.

Example

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title>Accelerometer in Cordova</title>

    <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title"

        charset="utf-8" />

    <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>

    <script type="text/javascript">

        // Wait for Cordova to load

        document.addEventListener("deviceready", onDeviceReady, false);

        // Cordova is ready

        function onDeviceReady() {

            navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);

        }

        // onSuccess: Get a snapshot of the current acceleration       

        function onSuccess(acceleration) {

            alert('Acceleration X: ' + acceleration.x + '\n' +

              'Acceleration Y: ' + acceleration.y + '\n' +

              'Acceleration Z: ' + acceleration.z + '\n' +

              'Timestamp: ' + acceleration.timestamp + '\n');

        }

        // onError: Failed to get the acceleration      

        function onError() {

            alert('onError!');

        }

    </script>

</head>

<body>

    <h1>

        Example</h1>

    <p>

        getCurrentAcceleration</p>

</body>

</html>

Output

acceration1.gif

2) accelerometer.watchAcceleration

This method is used to get the acceleration along the x, y and z axis at a regular interval. This method gets the device's current acceleration at the regular interval. Each time the acceleration is retrieved the accelerometerSuccess callback function is executed. This interval is specified in miliseconds via the frequency parameter in the acceleratorOptions object. It returns the watchId that is used with the accelerometer.clearWatch method to stop watching the accelerometer. The supported platforms are
Android, BlackBerry WebWorks (OS 5.0 and higher), iPhone, Windows Phone 7 (Mango) and Bada 1.2 & 2.x. The syntax is:

var watchId=navigator.accelerometer.watchAcceleration(accelerometerSuccess, accelerometerError,[accelerometerOptions]);

Here the parameter accelerometerOptions is an optinal parameter to customize the retrieval of the accelerometer. It takes the frequency option that return in miliseconds.

Example
 

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title>Accelerometer in Cordova</title>

    <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title"

        charset="utf-8" />

    <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>

    <script type="text/javascript">

        // The watch id references the current `watchAcceleration`

        var watchID = null;

        // Wait for Cordova to load

        document.addEventListener("deviceready", onDeviceReady, false);

        // Cordova is ready

        function onDeviceReady() {

            startWatch();

        }

        // Start watching the acceleration     

        function startWatch() {

 

            // Update acceleration every 3 seconds

            var options = { frequency: 3000 };

            watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);

        }

        // Stop watching the acceleration       

        function stopWatch() {

            if (watchID) {

                navigator.accelerometer.clearWatch(watchID);

                watchID = null;

            }

        }

        // onSuccess: Get a snapshot of the current acceleration 

        function onSuccess(acceleration) {

            var element = document.getElementById('accelerometer');

            element.innerHTML = 'Acceleration X: ' + acceleration.x + '<br />' +

                            'Acceleration Y: ' + acceleration.y + '<br />' +

                            'Acceleration Z: ' + acceleration.z + '<br />' +

                            'Timestamp: ' + acceleration.timestamp + '<br />';

        }

        // onError: Failed to get the acceleration  

        function onError() {

            alert('onError!');

        }

    </script>

  </head>

  <body>

    <div id="accelerometer">Waiting for accelerometer...</div>

  </body>

</html>

 

Both examples that I showed use the acceleration property; these are:

x : It shows the amount of acceleration on the x-axis in miliseconds.
y : It shows the amount of acceleration on the y-axis in miliseconds.
z : It shows the amount of acceleration on the z-axis in miliseconds.
timestamp : It is used to create the timestamp in miliseconds.

3) accelerometer.clearWatch

 

This method can be used to clear the acceleration or stop the acceleration referenced by the watch id. This watchId is returned by the acclerometer.watchAcceleration method. The supported platforms are Android, BlackBerry WebWorks (OS 5.0 and higher), iPhone, Windows Phone 7 (Mango) and Bada 1.2 & 2.x. The syntax is:

navigator.accelerometer.clearWatch(watchID);

Summary :  In this article I explained the acceleration in Apache Cordova/PhoneGap.
 

COMMENT USING

Trending up