PhoneGap Accelerometer Tutorial

On the accelerometer page, this is a div for displaying the result. Below the display area, there is a slider and 2 buttons. The slider is used to set the update time interval from 1 sec to 10 sec max. And the start and stop buttons trigger the update of the display.

A grid layout is used to display the result. ui-block-a is used to display the label whereas ui-block-b is used to display the value.

<div data-role="content">
  <div id="accelerometerProperties" class="mesgBox ui-grid-a">
  <div class='ui-block-a'>Acceleration X:</div><div class='ui-block-b' id="accX"></div>
  <div class='ui-block-a'>Acceleration Y:</div><div class='ui-block-b' id="accY"></div>
  <div class='ui-block-a'>Acceleration Z:</div><div class='ui-block-b' id="accZ"></div>
  <div class='ui-block-a'>Timestemp:</div><div class='ui-block-b' id="accTime"></div>
  </div>

In order to update the display, I used the javascript setInterval function to get the accelerometer info per the interval set by the user. The defauly is 1 sec.

	
<input type="range" name="acFreq" id="acFreq" value="1" min="0" max="10" step="1" data-highlight="true" />

The start button basically set the frequency parameter of navigator.acceleromenter.watchAcceleration funcation as follow:

accelerometerInt = navigator.accelerometer.watchAcceleration(getAccelonSuccess, getAccelonError, {frequency: uDefFreq * 1000});

where getAccelonSuccess and getAccelonError are callbacks and uDefFreq is the value input via the slider.
The reason when we need to multiply the value by 1000 is that the watchAcceleration function take millisecond for the frequency parameter.

The accelerometerInt is used to clear the counter when the user decided to stop the update.

  navigator.accelerometer.clearWatch(accelerometerInt);
  accelerometerInt = undefined;

Source Code:

Javascript

    //*********************************************************    
    // Accelerometer Info function
    //*********************************************************
    var accelerometerInt;

	function updateAccelerationStatus(status) {
		$("#acelerometerStatus").html(status);
		return false;
	}

	function getAccelonSuccess(acceleration) {
	    $("#accX").html(textFormat(acceleration.x));
		$("#accY").html(textFormat(acceleration.y));
		$("#accZ").html(textFormat(acceleration.z));
		$("#accTime").html(toDateStr(new Date(acceleration.timestamp)));

		return false;
	}

	function getAccelonError() {
		var contents  = addGridRow("a", boldLabel("ERROR:"));
			contents += addGridRow("b", "Cannot get accelerometer info");

		$("#accelerometerProperties").html(contents);
		updateAccelerationStatus("ERROR");
		return false;
	}

	function updateAccelerometer() {
		if ( accelerometerInt != undefined ) {
			navigator.accelerometer.clearWatch(accelerometerInt);
		}

		var uDefFreq = $("#acFreq").val();

		if ( uDefFreq > 0 && uDefFreq < 11 ) {
			accelerometerInt = navigator.accelerometer.watchAcceleration(getAccelonSuccess, getAccelonError, {frequency: uDefFreq * 1000});
			updateAccelerationStatus("Updating... Frequency: " + uDefFreq + " sec");
		} else {
				updateAccelerationStatus("ERROR: Freq must be between 1 and 10");
		}
		return false;
	}

	function stopUpdateAccelerometer() {
		navigator.accelerometer.clearWatch(accelerometerInt);
		accelerometerInt = undefined;
		updateAccelerationStatus("Stopped");
		return false;
	}

	function getAccelerometerReady() {		
		if ( accelerometerInt != undefined ) {
			navigator.accelerometer.clearWatch(accelerometerInt);
		}
		if ( $("#acFreq").val() != 1 ) {
			$("#acFreq").val(1).slider("refresh");  // reset slider to 1
		}

		navigator.accelerometer.getCurrentAcceleration(getAccelonSuccess, getAccelonError);
		updateAccelerationStatus("Initialized");

		$('#startUpdateButton').on('vclick', function(e) {
			e.preventDefault();
			updateAccelerometer();
			return false;
		});

		$('#stopUpdateButton').on('vclick', function(e){
			e.preventDefault();
			stopUpdateAccelerometer();
			return false;
		});	
	}

	//*********************************************************    
	// initialize the environment
	//*********************************************************	
	$("#accelerometerMainPage").bind("pagebeforeshow", function() { getAccelerometerReady(); } );

HTML 5/JQuery Mobile

<!DOCTYPE HTML>
<html><head><title>Accelerometer</title></head>
<body>
	<!---------------------------------- Accelerometer ------------------------------------>
	<div data-role="page" id="accelerometerMainPage" data-add-back-btn="true" back-btn-text="back">
		<div data-role="header">
		    <a href="" data-rel="back" data-role="button" data-icon="arrow-l" data-theme="a" class="ui-btn-left">back</a>
			<h1>Accelerometer</h1>
		</div>
		<div data-role="content">
			<div id="accelerometerProperties" class="mesgBox ui-grid-a">
			<div class='ui-block-a'>Acceleration X:</div><div class='ui-block-b' id="accX"></div>
			<div class='ui-block-a'>Acceleration Y:</div><div class='ui-block-b' id="accY"></div>
			<div class='ui-block-a'>Acceleration Z:</div><div class='ui-block-b' id="accZ"></div>
			<div class='ui-block-a'>Timestemp:</div><div class='ui-block-b' id="accTime"></div>
			</div>
			<div data-role="fieldcontain">
				<form>
					<label class="smFont" for="acFreq">Update frequency (in seconds)</label>
					<input type="range" name="acFreq" id="acFreq" value="1" min="0" max="10" step="1" data-highlight="true" />
				</form>
				<a href="#" id="startUpdateButton" data-role="button">Start update</a>
				<a href="#" id="stopUpdateButton"  data-role="button">Stop update</a>
			</div>
		</div>
		<div data-role="footer">
			<div id="acelerometerStatus"></div>
		</div>

		<script type="text/javascript" charset="utf-8" src="js/accelerometer-min.js"></script>
	</div>
</body>
</html>