PhoneGap Compass Tutorial

Similar to accelerometer, the output is displayed using a grid format, namely ui-grid-a.
After the page is launched, the output area is filled with current data.

When the update button is pressed, the navigator.accelerometer.watchAcceleration function is called.
And the update frequency is set according to user input. Again, the frequency unit is in millisecond.

     compassInt = navigator.compass.watchHeading(compassOnSuccess, compassOnError, { frequency: uDefFreq * 1000 });

where uDefFreq is from the user input (slider) and compassInt is referenced when the user would like to stop the update.

Source Code:

Javascript

    //*********************************************************    
    // Compass Capabilities
    //*********************************************************   
    var compassInt;
    
    function updateCompassStatus(status) {
    	$("#compassStatus").html(status);
    }
    
    function compassOnSuccess(heading) {   
    	$("#magneticHeading").html(textFormat(heading.magneticHeading));
    	$("#trueHeading").html(textFormat(heading.trueHeading));
    	$("#accuracy").html(textFormat(heading.headingAccuracy));
    	$("#compTime").html(toDateStr(new Date(heading.timestamp)));
    }
    	
    function compassOnError(error) {
    	var contents  = addGridRow("a", boldLabel("ERROR:"));
    		contents += addGridRow("b", error.code);
    		
    	$("#compassProperties").html(contents);
    	updateCompassStatus("ERROR");
    }

	function updateCompass() {
		if ( compassInt != undefined ) {
			navigator.compass.clearWatch(compassInt);    		
		}
		
		var uDefFreq = $("#compFreq").val();
		
		if ( uDefFreq > 0 && uDefFreq < 11 ) {
			compassInt = navigator.compass.watchHeading(compassOnSuccess, compassOnError, { frequency: uDefFreq * 1000 });
			updateCompassStatus("Updating... Frequency: " + uDefFreq + " sec");
		} else {
			updateCompassStatus("ERROR: Freq must be between 1 and 10");
		}
	}
	
	function stopUpdateCompass() {
		navigator.compass.clearWatch(compassInt);
		compassInt = undefined;
		updateCompassStatus("Stopped");		
	}

    function getCompassReady() {
    	if ( compassInt != undefined ) {
			navigator.compass.clearWatch(compassInt);    		
		}
		
		if ( $("#compFreq").val() != 1 ) {
			$("#compFreq").val(1).slider("refresh"); // reset slider to 1
		}
		
		navigator.compass.getCurrentHeading(compassOnSuccess, compassOnError);
		updateCompassStatus("Initialized");

		$("#startUpdateButton").on('vclick', function(e){
			e.preventDefault();
			updateCompass();
			return false;
		});
		$("#stopUpdateButton").on('vclick', function(e){
			e.preventDefault();
			stopUpdateCompass();
			return false;
		});		
    }	

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

HTML 5/JQuery Mobile

<!DOCTYPE HTML>
<html><head><title>Compass</title></head>
<body>
	<!---------------------------------- Compass ------------------------------------------>
	<div data-role="page"  id="compassMainPage" data-add-back-btn="true" back-btn-text="back">
		<div data-role="header">
			<h1>Compass</h1>
		</div>
		<div data-role="content">
			<div id="compassProperties" class="mesgBox ui-grid-a">
				<div class='ui-block-a'>Magnetic Heading:</div><div class='ui-block-b' id="magneticHeading"></div>
				<div class='ui-block-a'>True Heading:</div><div class='ui-block-b' id="trueHeading"></div>
				<div class='ui-block-a'>Accuracy:</div><div class='ui-block-b' id="accuracy"></div>
				<div class='ui-block-a'>Timestamp:</div><div class='ui-block-b' id="compTime"></div>
			</div>
			<div data-role="fieldcontain">
				<form>
					<label class="smFont" for="compFreq">Update frequency (in seconds)</label>
					<input type="range" name="compFreq" id="compFreq" value="1" min="0" max="10" step="1" data-highlight="true" />
				</form>
				<a href="#" data-role="button" id="startUpdateButton">Start update</a>
				<a href="#" data-role="button" id="stopUpdateButton">Stop update</a>
			</div>
		</div>
		<div data-role="footer">
			<div id="compassStatus"></div>
		</div>
		
		<script type="text/javascript" charset="utf-8" src="js/compass-min.js"></script>
	</div>
</body>
</html>