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
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.