fix a CSS error and slightly improve geolocation
[tricorder.git] / js / tricorder.js
1 /* This Source Code Form is subject to the terms of the Mozilla Public
2  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
3  * You can obtain one at http://mozilla.org/MPL/2.0/. */
4
5 var gStardate, gSDBase;
6 var gSounds = {};
7
8 window.onload = function() {
9   setTimeout(updateStardate, 0);
10   gSounds.scan = new Audio("sound/scan.opus");
11   gSounds.scan.loop = true;
12   gSounds.launch = new Audio("sound/launch.opus");
13   gSounds.shutdown = new Audio("sound/shutdown.opus");
14   gSounds.keyaction = new Audio("sound/key-action.opus");
15   gSounds.keypress = new Audio("sound/key-press.opus");
16
17   gSounds.launch.play();
18   window.addEventListener("beforeunload", function( event ) {
19     gSounds.shutdown.play();
20   }, false);
21 }
22
23 function updateStardate() {
24   if (!gStardate)
25     gStardate = document.getElementById("stardate");
26
27   var curDate = new Date();
28
29   if (!gSDBase)
30     gSDBase = new Date("September 8, 1966 20:00:00 EST");
31
32   var sdateval = (curDate - gSDBase) / (86400 * 365.2425);
33   gStardate.textContent = sdateval.toFixed(1);
34
35   setTimeout(updateStardate, 5*60*1000);
36 }
37
38 function toggleFullscreen() {
39   gSounds.keyaction.play();
40   if ((document.fullScreenElement && document.fullScreenElement !== null) ||
41       (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
42       (document.webkitFullScreenElement && document.webkitFullScreenElement !== null)) {
43     if (document.cancelFullScreen) {
44       document.cancelFullScreen();
45     } else if (document.mozCancelFullScreen) {
46       document.mozCancelFullScreen();
47     } else if (document.webkitCancelFullScreen) {
48       document.webkitCancelFullScreen();
49     }
50   }
51   else {
52     var elem = document.getElementById("body");
53     if (elem.requestFullScreen) {
54       elem.requestFullScreen();
55     } else if (elem.mozRequestFullScreen) {
56       elem.mozRequestFullScreen();
57     } else if (elem.webkitRequestFullScreen) {
58       elem.webkitRequestFullScreen();
59     }
60   }
61 }
62
63 function switchModule(modname) {
64   gSounds.keyaction.play();
65   var sections = document.getElementsByTagName('section');
66   for (var i = 0; i <= sections.length - 1; i++) {
67     if (sections[i].classList.contains("active")) {
68       window["gMod" + sections[i].id.replace("sect", "")].deactivate();
69       sections[i].classList.remove("active");
70     }
71   }
72   var navs = document.getElementById('navlist').children;
73   for (var i = 0; i <= navs.length - 1; i++) {
74     navs[i].classList.remove("active");
75   }
76
77   var navItem = document.getElementById("nav" + modname);
78   navItem.classList.add("active");
79   document.getElementById("sect" + modname).classList.add("active");
80   document.getElementById("mainHeader").textContent =
81       (modname == "Other") ? "Web Tricorder" : navItem.textContent;
82
83   window["gMod" + modname].activate();
84 }
85
86 var gModPos = {
87   activate: function() {
88     if (navigator.geolocation) {
89       gSounds.scan.play();
90       document.getElementById("posunavail").style.display = "none";
91       document.getElementById("posavail").style.display = "block";
92       this.watchID = navigator.geolocation.watchPosition(
93         function(position) {
94            document.getElementById("posLat").textContent =
95                position.coords.latitude + "°";
96            document.getElementById("posLong").textContent =
97                position.coords.longitude + "°";
98            document.getElementById("posAlt").textContent =
99                position.coords.altitude.toFixed(0) + " m";
100            document.getElementById("posAcc").textContent =
101                position.coords.accuracy.toFixed(0) + " m";
102            document.getElementById("posAltAcc").textContent =
103                position.coords.altitudeAccuracy.toFixed(0) + " m";
104            document.getElementById("posHead").textContent =
105                position.coords.heading ? position.coords.heading.toFixed(0) + "°" : "---";
106            document.getElementById("posSpd").textContent =
107                position.coords.speed ? position.coords.speed.toFixed(1) + " m/s" : "---";
108            var locTime = new Date(position.timestamp);
109            document.getElementById("posTime").textContent = locTime.toISOString();
110         },
111         function(error) {
112           // See https://developer.mozilla.org/en/Using_geolocation#Handling_errors
113           if (error.message) {
114             document.getElementById("posLat").textContent = error.message;
115             document.getElementById("posLong").textContent = "...";
116             document.getElementById("posAlt").textContent = "...";
117             document.getElementById("posAcc").textContent = "...";
118             document.getElementById("posAltAcc").textContent = "...";
119             document.getElementById("posHead").textContent = "...";
120             document.getElementById("posSpd").textContent = "...";
121             document.getElementById("posTime").textContent = "...";
122             setTimeout(function() { gModPos.deactivate(); }, 5000);
123           }
124           else {
125             document.getElementById("posunavail").style.display = "block";
126             document.getElementById("posavail").style.display = "none";
127           }
128         },
129         {enableHighAccuracy: true, maximumAge: 10000, timeout: 60000}
130       );
131     }
132     else {
133       document.getElementById("posunavail").style.display = "block";
134       document.getElementById("posavail").style.display = "none";
135     }
136   },
137   deactivate: function() {
138     gSounds.scan.pause();
139     if (this.watchID) {
140       navigator.geolocation.clearWatch(this.watchID);
141     }
142     document.getElementById("posunavail").style.display = "block";
143     document.getElementById("posavail").style.display = "none";
144     document.getElementById("posLat").textContent = "...";
145     document.getElementById("posLong").textContent = "...";
146     document.getElementById("posAlt").textContent = "...";
147     document.getElementById("posAcc").textContent = "...";
148     document.getElementById("posAltAcc").textContent = "...";
149     document.getElementById("posHead").textContent = "...";
150     document.getElementById("posSpd").textContent = "...";
151     document.getElementById("posTime").textContent = "...";
152   },
153   watchID: null,
154 }
155
156 var gModGrav = {
157   activate: function() {
158     gSounds.scan.play();
159     document.getElementById("gravunavail").style.display = "none";
160     document.getElementById("gravavail").style.display = "block";
161     window.addEventListener("deviceorientation", this.orientEvent, true);
162     window.addEventListener("devicemotion", this.motionEvent, true);
163     setTimeout(function() {
164       if ((document.getElementById("gravAlpha").textContent == "...") &&
165           (document.getElementById("gravX").textContent == "...")) {
166         gModGrav.deactivate();
167       }
168     }, 3000);
169   },
170   deactivate: function() {
171     gSounds.scan.pause();
172     window.removeEventListener("deviceorientation", this.orientEvent, true);
173     window.removeEventListener("devicemotion", this.motionEvent, true);
174     document.getElementById("gravunavail").style.display = "block";
175     document.getElementById("gravavail").style.display = "none";
176     //document.getElementById("gravAbs").textContent = "...";
177     document.getElementById("gravAlpha").textContent = "...";
178     document.getElementById("gravBeta").textContent = "...";
179     document.getElementById("gravGamma").textContent = "...";
180     document.getElementById("gravTotal").textContent = "...";
181     document.getElementById("gravX").textContent = "...";
182     document.getElementById("gravY").textContent = "...";
183     document.getElementById("gravZ").textContent = "...";
184     //document.getElementById("gravRot").textContent = "...";
185   },
186   orientEvent: function(orientData) {
187     //document.getElementById("gravAbs").textContent = orientData.absolute;
188     document.getElementById("gravAlpha").textContent = orientData.alpha.toFixed(1) + "°";
189     document.getElementById("gravBeta").textContent = orientData.beta.toFixed(1) + "°";
190     document.getElementById("gravGamma").textContent = orientData.gamma.toFixed(1) + "°";
191   },
192   motionEvent: function(event) {
193     var gravTotal = 
194         Math.sqrt(Math.pow(event.accelerationIncludingGravity.x, 2) +
195                   Math.pow(event.accelerationIncludingGravity.y, 2) +
196                   Math.pow(event.accelerationIncludingGravity.z, 2));
197     document.getElementById("gravTotal").textContent = gravTotal.toFixed(2) + " m/s²";
198     document.getElementById("gravX").textContent = event.accelerationIncludingGravity.x.toFixed(2) + " m/s²";
199     document.getElementById("gravY").textContent = event.accelerationIncludingGravity.y.toFixed(2) + " m/s²";
200     document.getElementById("gravZ").textContent = event.accelerationIncludingGravity.z.toFixed(2) + " m/s²";
201     //document.getElementById("gravRot").textContent = event.rotationRate;
202   },
203 }
204
205 var gModOther = {
206   activate: function() {
207     //gSounds.scan.play();
208   },
209   deactivate: function() {
210     gSounds.scan.pause();
211   },
212 }
213
214 var gModNull = {
215   activate: function() {
216     //gSounds.scan.play();
217   },
218   deactivate: function() {
219     gSounds.scan.pause();
220   },
221 }