This repository has been archived by the owner on Dec 11, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
59 lines (48 loc) · 2.28 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!doctype html>
<html>
<head>
<title>oneRock - Compass</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width height=device-height initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" media="screen" href="css/compass.css">
</head>
<body>
<h1>A little framework-less webOS compass example</h1>
<label for="trueHeading">TrueHeading</label>
<div id="trueHeading"></div>
<label for="magHeading">MagHeading</label>
<div id="magHeading"></div>
<div id="heading" class="heading"></div>
<img id="compass" alt="compass" height="400px" width="400px" src="img/compass_400x400.png" />
<script type="text/javascript">
if (window.PalmSystem) {
// We're ready
PalmSystem.stageReady();
// To suppress a error message
var Mojo;
// The compass needs a fixed orientation
PalmSystem.setWindowOrientation("up");
// Set to full screen - Because we can!
PalmSystem.enableFullScreenMode(true);
// Set the "compass" listener
document.addEventListener("compass", function (value) {
// Write the trueheading output in div id="trueHeading"
document.getElementById("trueHeading").innerHTML = value.trueHeading;
// Write the magheading output in div id="magHeading"
document.getElementById("magHeading").innerHTML = value.magHeading;
// Write the magheading output with ° in our compass, div id="heading"
// parseInt = https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/parseInt
document.getElementById("heading").innerHTML = parseInt(value.magHeading) + "°";
// Change the css3 div style and rotate the image.
// parseFloat = https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/parsefloat
// rotate3d = http://www.html5rocks.com/en/tutorials/3d/css/
document.getElementById("compass").style['-webkit-transform'] = "rotate3d(0,0,1,-" + parseFloat(value.magHeading) + "deg)";
});
} else {
document.getElementById("compass").style.display = "none";
document.getElementById("heading").innerHTML = "There's no PalmSystem ... ";
}
</script>
</body>
</html>