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
![pg 2.jpg]()
Step 2 : Open File menu -select new -
Choose Project then.
![vs new.jpg]()
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.
![pg 4.jpg]()
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.
![wmaxml.jpg]()
<?xml
version="1.0"
encoding="utf-8"?>
<Deployment
xmlns="http://schemas.microsoft.com/windowsphone/2009/deployment"
AppPlatformVersion="7.1">
<App
xmlns=""
ProductID="{295d4cb6-76ba-4fed-baa4-2d5f4208d4c4}"
Title="PhoneGapStarter1"
RuntimeType="Silverlight"
Version="1.0.0.0"
Genre="apps.normal"
Author="PhoneGapStarter1
author"
Description="PhoneGap
for Windows Phone 7"
Publisher="PhoneGapStarter1">
<IconPath
IsRelative="true"
IsResource="false">ApplicationIcon.png</IconPath>
<Capabilities>
<Capability
Name="ID_CAP_IDENTITY_DEVICE"
/>
<Capability
Name="ID_CAP_IDENTITY_USER"
/>
<Capability
Name="ID_CAP_LOCATION"
/>
<Capability
Name="ID_CAP_NETWORKING"
/>
<Capability
Name="ID_CAP_WEBBROWSERCOMPONENT"
/>
<Capability
Name="ID_CAP_SENSORS"
/>
</Capabilities>
<Tasks>
<DefaultTask
Name="_default"
NavigationPage="MainPage.xaml"
/>
</Tasks>
<Tokens>
<PrimaryToken
TokenID="PhoneGapStarter1Token"
TaskName="_default">
<TemplateType5>
<BackgroundImageURI
IsRelative="true"
IsResource="false">Background.png</BackgroundImageURI>
<Count>0</Count>
<Title>PhoneGapStarter1</Title>
</TemplateType5>
</PrimaryToken>
</Tokens>
</App>
</Deployment>
Step 6 :
Output press F5
In this output when you
change the slider you change the position and value of the x, y & z coordinates.
![acc 1.jpg]()
![acce 3.jpg]()
![acc 4.jpg]()
Thanks !