generator-steroids
Version:
A Yeoman generator for Steroids
69 lines (54 loc) • 2 kB
HTML
<html>
<head>
<meta charset="utf8">
<title>Cordova Compass Example</title>
<link rel="stylesheet" href="vendor/topcoat/css/topcoat-mobile-light.css" />
<link rel="stylesheet" href="stylesheets/application.css" />
<!-- cordova.js is served from localhost to ensure the correct version -->
<script src="http://localhost/cordova.js"></script>
<script src="/components/steroids-js/steroids.js"></script>
<script>
// ID of the active compass watcher
var watchID = null;
// Wait for Cordova to load, then start watching the compass
document.addEventListener("deviceready", startWatch, false);
function startWatch() {
// Query the compass for a new heading every 120 ms
var options = { frequency: 120 };
// Clear existing compass watcher before setting a new one
stopWatch();
watchID = navigator.compass.watchHeading(headingReceived, compassError, options);
}
function stopWatch() {
if (watchID) {
navigator.compass.clearWatch(watchID);
watchID = null;
}
}
// Display the current heading in the DOM
function headingReceived(heading) {
var element = document.querySelector('#heading');
element.textContent = 'Heading: ' + heading.magneticHeading;
}
// Failed to get the heading or access the compass
function compassError(compassError) {
if (compassError.code == CompassError.COMPASS_NOT_SUPPORTED) {
alert("Error:\nCompass not supported by the device!");
} else {
alert("Internal compass error! Could not get heading data.")
}
stopWatch();
}
</script>
</head>
<body>
<div class="content-padded">
<h1>Compass Example</h1>
<p><span id="heading">Waiting for compass...</span></p>
<div class="topcoat-button--cta center full" ontouchend="startWatch()">Start watching the compass</div>
<br><br>
<div class="topcoat-button center full" ontouchend="stopWatch()">Stop watching the compass</div>
</div>
</body>
</html>