add a line for total acceleration, make geo display have units

diff --git a/index.html b/index.html
index fe7b499d54441c260a6069bb8d960ee985a551ad..ba3b8214f7eb529d560ea8b0d6ebfca1de83b7c0 100644 (file)
--- 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 707910a9ba0d9f7e6fd8633bfbccfea70709e83f..2debeec9964f1d1d2c0acd9cab1a0f9895f8b33b 100644 (file)
--- 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 7f37659a1fea9b6f0f6cb0372e70b85a8d8b2950..843d225b3cd2a90ca86806d690504c49d782e391 100644 (file)
--- 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;