From 33a80b5e4b34ab6ab27677a1841014321dd076da Mon Sep 17 00:00:00 2001
From: Robert Kaiser <robert@widebook.box.kairo.at>
Date: Sat, 8 Dec 2012 15:01:01 +0100
Subject: [PATCH] add a line for total acceleration, make geo display have
 units

---
 index.html          | 20 ++++++++++++--------
 js/tricorder.js     | 27 ++++++++++++++++++++-------
 style/tricorder.css | 14 +++++++++++++-
 3 files changed, 45 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index fe7b499..ba3b821 100644
--- a/index.html
+++ b/index.html
@@ -64,15 +64,18 @@ a better device.
 </p>
 <div id="posavail" style="display:none">
 <table>
-<tr><td>Latitude:</td><td id="posLat">...</td></tr>
-<tr><td>Longitude:</td><td id="posLong">...</td></tr>
-<tr><td>Accuracy:</td><td id="posAcc">...</td></tr>
-<tr><td>Altitude:</td><td id="posAlt">...</td></tr>
-<tr><td>Alt. Accuracy:</td><td id="posAltAcc">...</td></tr>
-<tr><td>Heading:</td><td id="posHead">...</td></tr>
-<tr><td>Speed:</td><td id="posSpd">...</td></tr>
-<tr><td>Timestamp:</td><td id="posTime">...</td></tr>
+<tr><td>Latitude:</td><td id="posLat" class="posVal">...</td></tr>
+<tr><td>Longitude:</td><td id="posLong" class="posVal">...</td></tr>
+<tr><td>Accuracy:</td><td id="posAcc" class="posVal">...</td></tr>
+<tr><td>Altitude:</td><td id="posAlt" class="posVal">...</td></tr>
+<tr><td>Alt. Accuracy:</td><td id="posAltAcc" class="posVal">...</td></tr>
+<tr><td>Heading:</td><td id="posHead" class="posVal">...</td></tr>
+<tr><td>Speed:</td><td id="posSpd" class="posVal">...</td></tr>
+<tr><td>Timestamp:</td><td id="posTime" class="posVal">...</td></tr>
 </table>
+<p class="note">
+All coordinates use the WGS84 coordinate system.
+</p>
 </div>
 </section>
 
@@ -84,6 +87,7 @@ a better device.
 </p>
 <div id="gravavail" style="display:none">
 <table>
+<tr><td>Total:</td><td id="gravTotal" class="gravVal">...</td></tr>
 <tr><td>X:</td><td id="gravX" class="gravVal">...</td></tr>
 <tr><td>Y:</td><td id="gravY" class="gravVal">...</td></tr>
 <tr><td>Z:</td><td id="gravZ" class="gravVal">...</td></tr>
diff --git a/js/tricorder.js b/js/tricorder.js
index 707910a..2debeec 100644
--- a/js/tricorder.js
+++ b/js/tricorder.js
@@ -88,13 +88,20 @@ var gModPos = {
       document.getElementById("posavail").style.display = "block";
       this.watchID = navigator.geolocation.watchPosition(
         function(position) {
-           document.getElementById("posLat").textContent = position.coords.latitude;
-           document.getElementById("posLong").textContent = position.coords.longitude;
-           document.getElementById("posAlt").textContent = position.coords.altitude;
-           document.getElementById("posAcc").textContent = position.coords.accuracy;
-           document.getElementById("posAltAcc").textContent = position.coords.altitudeAccuracy;
-           document.getElementById("posHead").textContent = position.coords.heading || "---";
-           document.getElementById("posSpd").textContent = position.coords.speed || "---";
+           document.getElementById("posLat").textContent =
+               position.coords.latitude + "°";
+           document.getElementById("posLong").textContent =
+               position.coords.longitude + "°";
+           document.getElementById("posAlt").textContent =
+               position.coords.altitude.toFixed(0) + " m";
+           document.getElementById("posAcc").textContent =
+               position.coords.accuracy.toFixed(0) + " m";
+           document.getElementById("posAltAcc").textContent =
+               position.coords.altitudeAccuracy.toFixed(0) + " m";
+           document.getElementById("posHead").textContent =
+               position.coords.heading ? position.coords.heading.toFixed(0) + "°" : "---";
+           document.getElementById("posSpd").textContent =
+               position.coords.speed ? position.coords.speed.toFixed(1) + " m/s" : "---";
            var locTime = new Date(position.timestamp);
            document.getElementById("posTime").textContent = locTime.toISOString();
         },
@@ -166,6 +173,7 @@ var gModGrav = {
     document.getElementById("gravAlpha").textContent = "...";
     document.getElementById("gravBeta").textContent = "...";
     document.getElementById("gravGamma").textContent = "...";
+    document.getElementById("gravTotal").textContent = "...";
     document.getElementById("gravX").textContent = "...";
     document.getElementById("gravY").textContent = "...";
     document.getElementById("gravZ").textContent = "...";
@@ -178,6 +186,11 @@ var gModGrav = {
     document.getElementById("gravGamma").textContent = orientData.gamma.toFixed(1) + "°";
   },
   motionEvent: function(event) {
+    var gravTotal = 
+        Math.sqrt(Math.pow(event.accelerationIncludingGravity.x, 2) +
+                  Math.pow(event.accelerationIncludingGravity.y, 2) +
+                  Math.pow(event.accelerationIncludingGravity.z, 2));
+    document.getElementById("gravTotal").textContent = gravTotal.toFixed(2) + " m/s²";
     document.getElementById("gravX").textContent = event.accelerationIncludingGravity.x.toFixed(2) + " m/s²";
     document.getElementById("gravY").textContent = event.accelerationIncludingGravity.y.toFixed(2) + " m/s²";
     document.getElementById("gravZ").textContent = event.accelerationIncludingGravity.z.toFixed(2) + " m/s²";
diff --git a/style/tricorder.css b/style/tricorder.css
index 7f37659..843d225 100644
--- a/style/tricorder.css
+++ b/style/tricorder.css
@@ -228,10 +228,22 @@ section.active {
   display: block;
 }
 
-.gravVal {
+.posVal, .gravVal {
   text-align: right;
 }
 
+.posVal {
+  width: 24ch;
+}
+
+.gravVal {
+  width: 10ch;
+}
+
+.note {
+  font-size: .667em;
+}
+
 @media screen and (min-width: 500px) {
   body {
     font-size: 24px;
-- 
2.35.3