* Added weekday and time of day display to dash.html.

* Improved speed limit sign in dash.html.

diff --git a/dash.html b/dash.html
index b1bfad6ef3e7ff8032342f5d6208788f5499a65a..80724dc52831be7723a6fb6f0f3c02f565900a22 100644 (file)
--- a/dash.html
+++ b/dash.html
@@ -53,6 +53,8 @@ table { width: 100%; }
 .aleft { text-align: left; }
 .acenter { text-align: center; }
 .ajust { text-align: justify; }
+.atop { vertical-align: top; }
+.amiddle { vertical-align: middle; }
 
 .big { font-size: 8em; }
 .medium { font-size: 4em; }
@@ -61,12 +63,32 @@ table { width: 100%; }
 .tiny { font-size: 1em; }
 .tinyb { font-size: 1em; font-weight: bold; }
 
+.dim { color:#888; }
 .warn1 { color:#fd0; }
 .warn2 { color:#f20; }
 .setval { color:#0af; }
 .hilite { background-color: #ff0; }
 .special { font-size:50%; color:#088; }
 
+#slimitoff {
+  margin-left: 2px;
+  width: 60px;
+  height: 60px;
+}
+#slimitsign {
+  width: 60px;
+  height: 60px;
+}
+#slimit {
+  display: table-cell;
+  width: 60px;
+  height: 60px;
+  vertical-align: middle;
+  text-align: center;
+  font-size: 32px;
+  color: #000;
+}
+
 x-barmask {
   display: block;
   margin-left:auto;
@@ -119,12 +141,8 @@ x-bar {
 <x-boxleft id="speedo" class="cont">
   <table>
     <tr><td colspan="2" class="aright"><span class="big" id="speed">--</span></td><td><span class="tinyb"> km/h</span></td></tr>
-    <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">&nbsp;–</text>
-      </svg>&nbsp;&nbsp;</td>
-      <td class="aright"><span class="medium setval" id="cctrl">-</span></td><td><span class="tinyb"> km/h</span></td>
+    <tr><td class="amiddle"><div id="slimitoff"><div id="slimitsign"><span id="slimit">--</span></div></div></td>
+        <td class="aright"><span class="medium setval" id="cctrl">-</span></td><td><span class="tinyb"> km/h</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="tinyb"> rpm</span></td></tr>
@@ -147,10 +165,11 @@ x-bar {
 
 <x-boxleft id="nav" class="cont">
   <table>
+    <tr><td colspan="2" class="acenter" ><span class="smaller dim" id="nav_date">-</span></td></tr>
     <tr><td class="tiny">Distance</td><td><span class="small" id="nav_dist">-</span><span class="tinyb"> km</span></td></tr>
     <tr><td class="tiny">ETA</td><td><span class="small" id="nav_eta">-</span></td></tr>
-    <tr><td class="tiny">Next rest</td><td><span class="small" id="next_rest">-</span></td></tr>
-    <tr><td class="tiny">Deadline</td><td><span class="small" id="job_ttd">-</span></td></tr>
+    <tr><td class="tiny">Next rest</td><td><span class="smaller" id="next_rest">-</span></td></tr>
+    <tr><td class="tiny">Deadline</td><td><span class="smaller" id="job_ttd">-</span></td></tr>
   </table>
 </x-boxleft>
 
@@ -178,12 +197,15 @@ x-bar {
 
 // Element references:
 var speed = document.getElementById("speed");
-var nav_slimitsign = document.getElementById("nav_slimitsign");
+var slimitoff = document.getElementById("slimitoff");
+var slimitsign = document.getElementById("slimitsign");
+var slimit = document.getElementById("slimit");
 var cctrl = document.getElementById("cctrl");
 var gear = document.getElementById("gear");
 var rpm = document.getElementById("rpm");
 var rpmbar = document.getElementById("rpmbar");
 var thrbar = document.getElementById("thrbar");
+
 //
 var fuel = document.getElementById("fuel");
 var fuel_range = document.getElementById("fuel_range");
@@ -191,6 +213,7 @@ var fuel_cons = document.getElementById("fuel_cons");
 var fuel_avg = document.getElementById("fuel_avg");
 var odometer = document.getElementById("odometer");
 //
+var nav_date = document.getElementById("nav_date");
 var nav_dist = document.getElementById("nav_dist");
 var nav_eta = document.getElementById("nav_eta");
 var nav_slimit = document.getElementById("nav_slimit");
@@ -209,6 +232,21 @@ var errbar = document.getElementById("errbar");
 var pausebar = document.getElementById("pausebar");
 var nsbar = document.getElementById("nsbar");
 
+// Set speed limit sign background:
+var sloffSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60">'
+           + '<circle cx="30" cy="30" r="26" stroke="white" stroke-width="8" fill="white"/>'
+           + '<circle cx="30" cy="30" r="27" stroke="black" stroke-width="2" fill="none"/>'
+           + '<line x1="7"  y1="45" x2="45" y2="7"  stroke="black" stroke-width="2"/>'
+           + '<line x1="9"  y1="47" x2="47" y2="9"  stroke="black" stroke-width="2"/>'
+           + '<line x1="11" y1="49" x2="49" y2="11" stroke="black" stroke-width="2"/>'
+           + '<line x1="13" y1="51" x2="51" y2="13" stroke="black" stroke-width="2"/>'
+           + '</svg>';
+var slSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60">'
+          + '<circle cx="30" cy="30" r="26" stroke="red" stroke-width="8" fill="white"/></svg>';
+slimitoff.style.backgroundImage = 'url("data:image/svg+xml;base64,' + window.btoa(sloffSVG) + '")';
+slimitsign.style.backgroundImage = 'url("data:image/svg+xml;base64,' + window.btoa(slSVG) + '")';
+
+
 // Helper functions:
 
 function pad2( x ) {
@@ -240,6 +278,11 @@ function m2hm(s) {
        + pad2( Math.floor(s % 60) );
 }
 
+function m2dhm(m) {
+  var d = [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ];
+  return d[ Math.floor(m / 1440 % 7) ] + ' ' + m2hm(m % 1440);
+}
+
 function warn(elem, lvl) {
   if ( lvl == 0 ) {
     elem.classList.remove("warn1");
@@ -322,11 +365,11 @@ function update_cb() {
       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";
+      slimit.innerHTML = (tele.nav_slimit * 3.6).toFixed(0);
+      slimitsign.style.visibility = "visible";
     }
     else
-      nav_slimitsign.style.visibility = "hidden";
+      slimitsign.style.visibility = "hidden";
     // cruise control:
     cctrl.innerHTML = Math.round(tele.cctrl * 3.6);
     // engine gear:
@@ -378,6 +421,9 @@ function update_cb() {
 
     //// "nav" box
 
+    // current day and time:
+    nav_date.innerHTML = m2dhm(tele.game_time);
+
     // remaining distance to destination:
     nav_dist.innerHTML = (tele.nav_dist / 1000).toFixed(0);