* Rearranged code in dash.html and fixed some small issues.
authorUrban Wallasch <urban.wallasch@freenet.de>
Mon, 29 Jul 2019 07:39:09 +0000 (09:39 +0200)
committerUrban Wallasch <urban.wallasch@freenet.de>
Mon, 29 Jul 2019 07:39:09 +0000 (09:39 +0200)
dash.html

index 38cd799671d7a43a519d0c6b71b151c61e254aa2..fc79cbcbd0aca8ef74a1e992746a1e6c10b90d3f 100644 (file)
--- a/dash.html
+++ b/dash.html
@@ -91,11 +91,12 @@ x-bar {
     <tr>
       <td class="small"><svg width="50" height="50">
         <circle cx="25" cy="25" r="22" stroke="red" stroke-width="6" fill="white" id="nav_slimitsign"/>
-        <text fill="#000" font-size="24" font-family="sans-serif" font-weight="normal" x="10" y="34" id="nav_slimit">---</text>
+        <text fill="#000" font-size="24" font-family="sans-serif" font-weight="normal" x="10" y="34" id="nav_slimit">&nbsp;–</text>
       </svg>&nbsp;&nbsp;</td>
       <td class="aright"><span class="medium setval" id="cctrl">-</span></td><td><span class="tiny"> km/h</span></td>
     </tr>
-    <tr><td><span class="small setval" id="gear">x</span></td><td class="aright"><span class="small" id="rpm">0</span></td><td><span class="tiny"> rpm</span></td></tr>
+    <tr><td><span class="small setval" id="gear">-</span></td>
+        <td class="aright"><span class="small" id="rpm">-</span></td><td><span class="tiny"> rpm</span></td></tr>
   </table>
 </x-boxleft>
 
@@ -109,7 +110,7 @@ x-bar {
   </table>
 </x-boxleft>
 
-<x-boxleft id="odo" class="cont">
+<x-boxleft id="nav" class="cont">
   <table style="width:100%;">
     <tr><td class="tiny">Distance</td><td><span class="small" id="nav_dist">-</span><span class="tiny"> km</span></td></tr>
     <tr><td class="tiny">ETA</td><td><span class="small" id="nav_eta">-</span></td></tr>
@@ -127,15 +128,29 @@ x-bar {
 
 <script type="text/javascript">
 
-function dgear(x, f, m) {
-  // We try to deduce the correct forward gear number to display from
-  // the number of gears available. This likely just plain nonsense!
-  if ( x > 0 )
-    return ( m ? '' : 'A' ) + ( f==14 ? ( x<3 ? 'C'+x : x-2 ) : x );
-  if ( x < 0 )
-    return 'R' + -x;
-  return 'N';
-}
+// Element references:
+var speed = document.getElementById("speed");
+var nav_slimitsign = document.getElementById("nav_slimitsign");
+var cctrl = document.getElementById("cctrl");
+var gear = document.getElementById("gear");
+var rpm = document.getElementById("rpm");
+//
+var fuel = document.getElementById("fuel");
+var fuel_range = document.getElementById("fuel_range");
+var fuel_cons = document.getElementById("fuel_cons");
+var fuel_avg = document.getElementById("fuel_avg");
+var odometer = document.getElementById("odometer");
+//
+var nav_dist = document.getElementById("nav_dist");
+var nav_eta = document.getElementById("nav_eta");
+var nav_slimit = document.getElementById("nav_slimit");
+var next_rest = document.getElementById("next_rest");
+var job_ttd = document.getElementById("job_ttd");
+//
+var errbar = document.getElementById("errbar");
+var pausebar = document.getElementById("pausebar");
+
+// Helper functions:
 
 function pad2( x ) {
   return x > 9 ? x : '0' + x;
@@ -172,113 +187,124 @@ function warn(elem, lvl) {
   }
 }
 
-// Initialize element references:
-var speed = document.getElementById("speed");
-var ccgtrl = document.getElementById("cctrl");
-var gear = document.getElementById("gear");
-var rpm = document.getElementById("rpm");
-var odometer = document.getElementById("odometer");
-var fuel = document.getElementById("fuel");
-var fuel_range = document.getElementById("fuel_range");
-var fuel_avg = document.getElementById("fuel_avg");
-//
-var nav_dist = document.getElementById("nav_dist");
-var nav_eta = document.getElementById("nav_eta");
-var nav_slimit = document.getElementById("nav_slimit");
-var next_rest = document.getElementById("next_rest");
-var nav_slimitsign = document.getElementById("nav_slimitsign");
-//
-var job_ttd = document.getElementById("job_ttd");
-//
-var errbar = document.getElementById("errbar");
-var pausebar = document.getElementById("pausebar");
+// We try to deduce the correct forward gear number to display from
+// the number of gears available. This likely just plain nonsense!
+function dgear(x, f, m) {
+  if ( x > 0 )
+    return ( m ? '' : 'A' ) + ( f==14 ? ( x<3 ? 'C'+x : x-2 ) : x );
+  if ( x < 0 )
+    return 'R' + -x;
+  return 'N';
+}
 
 // Used to calculate current fuel consumption:
 var last_fuel = -1;
 var last_odometer = -1;
 
-// Update display, called periodically:
-function loadDoc() {
-  xhttp.onreadystatechange = function() {
-    if (this.readyState == 4 && this.status == 200) {
-      var tele = JSON.parse(this.responseText);
-
-      speed.innerHTML = Math.abs(tele.speed * 3.6).toFixed(0);
-      if ( tele.nav_slimit > 0 && tele.speed > tele.nav_slimit * 1.075 )
-        warn( speed, 2 );
-      else if ( tele.nav_slimit > 0 && tele.speed > tele.nav_slimit * 1.005 )
-        warn( speed, 1 );
-      else
-        warn( speed, 0 );
-
-      cctrl.innerHTML = Math.round(tele.cctrl * 3.6);
-
-      gear.innerHTML = dgear(tele.gear_disp, tele.gear_fwdcnt, tele.shifter);
-      if ( tele.clutch_eff > 0 )
-        gear.classList.add("hilite");
+// Display update callback:
+function update_cb() {
+  if (this.readyState == 4 && this.status == 200) {
+    var tele = JSON.parse(this.responseText);
+
+    //// "speedo" box
+
+    // speedometer:
+    speed.innerHTML = Math.abs(tele.speed * 3.6).toFixed(0);
+    if ( tele.nav_slimit > 0 && tele.speed > tele.nav_slimit * 1.075 )
+      warn( speed, 2 );
+    else if ( tele.nav_slimit > 0 && tele.speed > tele.nav_slimit * 1.005 )
+      warn( speed, 1 );
+    else
+      warn( speed, 0 );
+    // speed limit:
+    if ( tele.nav_slimit > 0 ) {
+      nav_slimit.innerHTML = (tele.nav_slimit * 3.6).toFixed(0);
+      nav_slimitsign.style.visibility = "visible";
+    }
+    else
+      nav_slimitsign.style.visibility = "hidden";
+    // cruise control:
+    cctrl.innerHTML = Math.round(tele.cctrl * 3.6);
+    // engine gear:
+    gear.innerHTML = dgear(tele.gear_disp, tele.gear_fwdcnt, tele.shifter);
+    if ( tele.clutch_eff > 0 )
+      gear.classList.add("hilite");
+    else
+      gear.classList.remove("hilite");
+    // engine rpm:
+    rpm.innerHTML = tele.rpm.toFixed(0);
+
+    //// "range" box
+
+    // fuel amount:
+    fuel.innerHTML = tele.fuel.toFixed(0);
+    warn( fuel, tele.fuel_warn ? 1 : 0 );
+
+    // estimated range remaining:
+    fuel_range.innerHTML = tele.fuel_range.toFixed(0);
+
+    // current fuel consumption:
+    if ( last_fuel != tele.fuel && last_odometer != tele.odometer ) {
+      var fcons;
+      if ( last_fuel > 0 && last_odometer > 0 )
+        fcons = (last_fuel - tele.fuel) * 100 / (tele.odometer - last_odometer);
       else
-        gear.classList.remove("hilite");
-
-      rpm.innerHTML = tele.rpm.toFixed(0);
-      odometer.innerHTML = tele.odometer.toFixed(0);
+        fcons = -1;
+      fuel_cons.innerHTML = fcons < 0 ? '-' : fcons.toFixed(1);
+      last_fuel = tele.fuel;
+      last_odometer = tele.odometer;
+    }
 
-      fuel.innerHTML = tele.fuel.toFixed(0);
-      warn( fuel, tele.fuel_warn ? 1 : 0 );
+    // average fuel consumption:
+    fuel_avg.innerHTML = (tele.fuel_avg * 100).toFixed(1);
 
-      fuel_range.innerHTML = tele.fuel_range.toFixed(0);
+    // odometer:
+    odometer.innerHTML = tele.odometer.toFixed(1);
 
-      if ( last_fuel != tele.fuel && last_odometer != tele.odometer ) {
-        var fcons;
-        if ( last_fuel > 0 && last_odometer > 0 )
-          fcons = (last_fuel - tele.fuel) * 100 / (tele.odometer - last_odometer);
-        else
-          fcons = -1;
-        fuel_cons.innerHTML = fcons < 0 ? '-' : fcons.toFixed(1);
-        last_fuel = tele.fuel;
-        last_odometer = tele.odometer;
-      }
+    //// "nav" box
 
-      fuel_avg.innerHTML = (tele.fuel_avg * 100).toFixed(1);
+    // remaining distance to destination:
+    nav_dist.innerHTML = (tele.nav_dist / 1000).toFixed(0);
 
-      nav_dist.innerHTML = (tele.nav_dist / 1000).toFixed(0);
+    // estimated time till arrival at destination:
+    nav_eta.innerHTML = s2hm(tele.nav_eta);
 
-      nav_eta.innerHTML = s2hm(tele.nav_eta);
+    // time until next rest stop:
+    next_rest.innerHTML = m2hm(tele.next_rest);
+    warn( next_rest, tele.next_rest < 60 ? 2 : tele.next_rest < 98 ? 1 : 0 );
 
-      next_rest.innerHTML = m2hm(tele.next_rest);
-      warn( next_rest, tele.next_rest < 1 ? 2 : tele.next_rest < 97 ? 1 : 0 );
+    // remaining time until job delivery date:
+    job_ttd.innerHTML =
+      tele.job_isvalid
+      ? tele.job_deltime != 4294967295
+        ? m2hm(tele.job_deltime - tele.game_time)
+        : '<span style="font-size:50%;color:#088">[external]</span>'
+      : '<span style="font-size:50%;color:#088">[none]</span>';
 
-      job_ttd.innerHTML =
-        tele.job_isvalid
-        ? tele.job_deltime != 4294967295
-          ? m2hm(tele.job_deltime - tele.game_time)
-          : '<span style="font-size:50%;color:#088">[external]</span>'
-        : '<span style="font-size:50%;color:#088">[none]</span>';
+    //// pause and error bar status:
 
-      if ( tele.nav_slimit > 0 ) {
-        nav_slimit.innerHTML = (tele.nav_slimit * 3.6).toFixed(0);
-        nav_slimitsign.style.visibility = "visible";
-      }
-      else
-        nav_slimitsign.style.visibility = "hidden";
+    pausebar.style.display = tele.paused ? "block" : "none";
+    errbar.style.display = "none";
+  }
+  else if (this.readyState == 4) {
+    // Show error status:
+    pausebar.style.display = "none";
+    errbar.style.display = "block";
+    if ( this.status )
+      errbar.innerHTML = "Status: " + this.status + "<br>" + this.responseText;
+    else
+      errbar.innerHTML = "Connection error";
+  }
+};
 
-      pausebar.style.display = tele.paused ? "block" : "none";
-      errbar.style.display = "none";
-    }
-    else if (this.readyState == 4) {
-      pausebar.style.display = "none";
-      errbar.style.display = "block";
-      if ( this.status )
-        errbar.innerHTML = "Status: " + this.status + "<br>" + this.responseText;
-      else
-        errbar.innerHTML = "Connection error";
-    }
-  };
+function loadDoc() {
   xhttp.open("GET", "/json", true);
   xhttp.send();
 }
 
+// XHRequest:
 var xhttp = new XMLHttpRequest();
-loadDoc();
+xhttp.onreadystatechange = update_cb;
 window.setInterval(loadDoc, 333);
 
 </script>