Compass
Obtains the direction that the device is pointing.
Methods
Arguments
compass.getCurrentHeading
Get the current compass heading.
navigator.compass.getCurrentHeading(compassSuccess, compassError, compassOptions);
Description
The compass is a sensor that detects the direction or heading that the device is pointed. It measures the heading in degrees from 0 to 359.99.
The compass heading is returned using the compassSuccess
callback function.
Supported Platforms
- Android
- iPhone
Quick Example
function onSuccess(heading) {
alert('Heading: ' + heading);
};
function onError() {
alert('onError!');
};
navigator.compass.getCurrentHeading(onSuccess, onError);
Full Example
<!DOCTYPE html>
<html>
<head>
<title>Compass Example</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
//
function onDeviceReady() {
navigator.compass.getCurrentHeading(onSuccess, onError);
}
// onSuccess: Get the current heading
//
function onSuccess(heading) {
alert('Heading: ' + heading);
}
// onError: Failed to get the heading
//
function onError() {
alert('onError!');
}
</script>
</head>
<body>
<h1>Example</h1>
<p>getCurrentHeading</p>
</body>
</html>
compass.watchHeading
At a regular interval, get the compass heading in degrees.
var watchID = navigator.compass.watchHeading(compassSuccess, compassError, [compassOptions]);
Description
The compass is a sensor that detects the direction or heading that the device is pointed. It measures the heading in degrees from 0 to 359.99.
The compass.watchHeading
gets the device's current heading at a regular interval. Each time the heading is retrieved, the headingSuccess
callback function is executed. Specify the interval in milliseconds via the frequency
parameter in the compassOptions
object.
The returned watch ID references references the compass watch interval. The watch ID can be used with compass.clearWatch
to stop watching the compass.
Supported Platforms
- Android
- iPhone
Quick Example
function onSuccess(heading) {
var element = document.getElementById('heading');
element.innerHTML = 'Heading: ' + heading;
};
function onError() {
alert('onError!');
};
var options = { frequency: 3000 }; // Update every 3 seconds
var watchID = navigator.compass.watchHeading(onSuccess, onError, options);
Full Example
<!DOCTYPE html>
<html>
<head>
<title>Compass Example</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
// The watch id references the current `watchHeading`
var watchID = null;
// Wait for PhoneGap to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
//
function onDeviceReady() {
startWatch();
}
// Start watching the compass
//
function startWatch() {
// Update compass every 3 seconds
var options = { frequency: 3000 };
watchID = navigator.compass.watchHeading(onSuccess, onError, options);
}
// Stop watching the compass
//
function stopWatch() {
if (watchID) {
navigator.compass.clearWatch(watchID);
watchID = null;
}
}
// onSuccess: Get the current heading
//
function onSuccess(heading) {
var element = document.getElementById('heading');
element.innerHTML = 'Heading: ' + heading;
}
// onError: Failed to get the heading
//
function onError() {
alert('onError!');
}
</script>
</head>
<body>
<div id="heading">Waiting for heading...</div>
<button onclick="startWatch();">Start Watching</button>
<button onclick="stopWatch();">Stop Watching</button>
</body>
</html>
compass.clearWatch
Stop watching the compass referenced by the watch ID parameter.
navigator.compass.clearWatch(watchID);
-
watchID: The ID returned by
compass.watchHeading
.
Supported Platforms
- Android
- iPhone
Quick Example
var watchID = navigator.compass.watchHeading(onSuccess, onError, options);
// ... later on ...
navigator.compass.clearWatch(watchID);
Full Example
<!DOCTYPE html>
<html>
<head>
<title>Compass Example</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
// The watch id references the current `watchHeading`
var watchID = null;
// Wait for PhoneGap to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
//
function onDeviceReady() {
startWatch();
}
// Start watching the compass
//
function startWatch() {
// Update compass every 3 seconds
var options = { frequency: 3000 };
watchID = navigator.compass.watchHeading(onSuccess, onError, options);
}
// Stop watching the compass
//
function stopWatch() {
if (watchID) {
navigator.compass.clearWatch(watchID);
watchID = null;
}
}
// onSuccess: Get the current heading
//
function onSuccess(heading) {
var element = document.getElementById('heading');
element.innerHTML = 'Heading: ' + heading;
}
// onError: Failed to get the heading
//
function onError() {
alert('onError!');
}
</script>
</head>
<body>
<div id="heading">Waiting for heading...</div>
<button onclick="startWatch();">Start Watching</button>
<button onclick="stopWatch();">Stop Watching</button>
</body>
</html>
compassSuccess
onSuccess callback function that provides the compass heading information.
function(heading) {
// Do something
}
Parameters
- heading: The heading in degrees from 0 - 359.99 at a single moment in time. (Number)
Example
function onSuccess(heading) {
alert('Heading: ' + heading);
};
compassError
onError callback function for compass functions.
function() {
// Handle the error
}
compassOptions
An optional parameter to customize the retrieval of the compass.
Options
- frequency: How often to retrieve the compass heading in milliseconds. (Number) (Default: 100)