Working with Accelerometer in PhoneGap

Introduction

In this article we are going to understand the working of the accelerometer with Phone Gap. An accelerometer is a device that measures proper acceleration, also called the four-acceleration. You need to have Phone Gap with your Visual Studio 2010. If you are very new to Phone Gap then you need to follow the previous article

Step 1 : Open Visual Studio 2010

Step 2 : Open File menu -select new - Choose Project then.

Step 3 : Select the new phone application and rename it according to your requirement. We're going to see here how to get the values sent back by the accelerometer (of the emulator or the real device) in a very simple way.

Step 4 : We're going to see here how to get the values sent back by the accelerometer (of the emulator or the real device) in a very simple way. Open the index.html page and add 3 div tags for x-coordinate, y-coordinate and z-coordinates respectively.

Scripting for Accelerometer

Replace the HTML in your index.html with this code.

<!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>PhoneGap WP7</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="phonegap-1.3.0.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
// variable to output the current x, y & z values of the accelerometer
var valueX;
var valueY;
var valueZ;
// when PhoneGap tells us everything is ready, start watching the accelerometer
function onDeviceReady() {
valueX = document.getElementById("valueX");
valueY = document.getElementById("valueY");
valueZ = document.getElementById("valueZ");
startWatch();
}
// start monitoring the state of the accelerometer
function startWatch() {
var options = { frequency: 500 };
navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
}
// if the z-axis has moved outside of our sensitivity threshold, move the aardvark's head in the appropriate direction
function onSuccess(acceleration) {
valueX.innerHTML = "X Cordinate: " + acceleration.x;
valueY.innerHTML = "Y Cordinate: " + acceleration.y;
valueZ.innerHTML = "Z Cordinate: " + acceleration.z;
}

function onError() {
alert('onError!');
}
</script>
</head>
<body>
<h1>Accelerometer with Phone Gap</h1>
<div id="valueX"></div>
<div id="valueY"></div>
<div id="valueZ"></div>
</body>
</html>

Step 5 : Code for the Master.css file:

body
{
background:#000 none repeat scroll 0 0;
color:#ccc;
font-family:Helvetica, Verdana, Geneva, sans-serif;
margin:0;
border-top:1px solid #393939;
}
h1
{
text-align:center;
font-size:18px;
color:#FFC312; /* Mango me! */
}

Step 6 : You need the change in WMAppManifest.xml because you need to specify in the project's properties that you want to request access to the device's sensor. The capabilities needed for the proper execution of our application is listed inside the WMAppManifest.xml file available in the Properties directory.

Double-click on the WMAappManifest.xml and replace the code.