color coding rows for accept/reject lines

* textarea didn't offer control over it, so changed to div area
* took out now unused .statusmain and .statuslogin css classes
* added error sound (for 'rule execution errors')
* parse/matching of message displayed in window had to be
  done. Each element in the window (ui_main_status area) needs
  to be decorated with it's own css class to display properly

busunit/DIUv2/html/css/diustyles.css

@@ -46,6 +46,56 @@ p:focus {
   border:0;
 }
 
+.textwindow {
+  float: left;
+  color: #444444;
+  font-size: 5vh;
+  letter-spacing: 0.125vh;
+  font-weight:bold;
+  font-family: monospace;
+  outline: thin solid #999999;
+  background: #f7f7f7;
+  width:80vw;
+  height:60vh;
+  overflow:hidden;
+}
+
+.textwindowmain {
+  float: left;
+  color: #444444;
+  font-size: 5vh;
+  letter-spacing: 0.125vh;
+  font-weight:bold;
+  font-family: monospace;
+  outline: thin solid #999999;
+  background: #f7f7f7;
+  width:65vw;
+  height:51vh;
+  overflow:hidden;
+}
+
+.textrow {
+  padding-left: 0.5vw;
+  float:left;
+  width: 100%;
+  text-align:left;
+}
+
+.textrow.accept {
+  background: #44cc44;
+  color: #444444;
+}
+
+.textrow.reject {
+  background: #cc4444;
+  color: #333333;
+}
+
+.textrow.error {
+  background: #ff7f33;
+  color: #444444;
+}
+
 /***********/
 
 /* 
@@ -79,36 +129,6 @@ p:focus {
 }
 */
 
-.statuslogin {
-  resize:none;
-  background: #f7f7f7;
-  overflow:hidden;
-  overflow-x:hidden;
-  overflow-y:hidden;
-  word-wrap:off;
-  -webkit-user-select: none;
-  -webkit-touch-callout: none;
-  -khtml-user-select: none;
-  -ms-user-select: none;
-  -o-user-select: none;
-  user-select: none;
-  -moz-user-select: none;
-}
-
-.statusmain {
-  resize:none;
-  background: #f7f7f7;
-  word-wrap:off;
-  -webkit-user-select: none;
-  -webkit-touch-callout: none;
-  -khtml-user-select: none;
-  -ms-user-select: none;
-  -o-user-select: none;
-  user-select: none;
-  cursor:default;
-  -moz-user-select: none;
-}
-
 .bkeyFull {
   width: 96vw;
   height:96vh;
@@ -121,9 +141,6 @@ p:focus {
     letter-spacing: 0.125em;
   }
 
-  .statuslogin { font-size:20px; }
-  .statusmain { font-size:20px; }
-
   .row { height: 80px; }
   .col { width: 80px; }
 
@@ -203,9 +220,6 @@ p:focus {
     letter-spacing: 0.25em;
   }
 
-  .statuslogin { font-size:5vh; font-weight: bold; }
-  .statusmain { font-size:5vh; font-weight: bold}
-
   .row { height: 160px; }
   .col { width: 160px; }
 

busunit/DIUv2/html/index-ORG.html

@@ -50,22 +50,18 @@
 
       </div>
 
-      <br>
-      <br>
-      <br>
-
       <div class='pure-g'>
 
         <button class='invisiblock' id='ui_login_blockwindow'> </button>
 
-<textarea class='statuslogin' type='textarea' id='ui_login_status' rows='10' cols='80' disabled readonly>
-Tunnel: . GPRS: . Eq# . #Msg: .
-Last Token Read (.): ""
-GPS: .
-
-Package    Version        Installed
+        <div id='ui_login_status' class='textwindow'>
+          <div class='textrow'>Tunnel: . GPRS: . Eq# . #Msg: .</div><br>
+          <div class='textrow'>Last Token Read (.): ""</div><br>
+          <div class='textrow'>GPS: .</div><br>
+          <br>
+          <div class='textrow'>Package    Version        Installed</div>
 
-</textarea>
+        </div>
 
       </div>
 
@@ -327,7 +323,7 @@ Diagnostic window...
       <div style='width:100%; height:100%;'>
 
         <div class='pure-g row' style='width:100%; height:100%;' >
-          <div class='pure-u-1-6 col' style=' position:absolute; top:10vh; margin-left:10vw; '>
+          <div class='pure-u-1-6 col' style=' position:absolute; top:20%; margin-left:25%; '>
             <button onmousedown='_beep();' class='bdropinp bkeyHuge' id='ui_paddleunknown_btn'>Unknown Paddle </button>
           </div>
         </div>
@@ -375,19 +371,11 @@ Diagnostic window...
 
         <div class='pure-u-1-2 col'>
           <button class='invisiblock' id='ui_main_blockwindow'> </button>
-          <textarea
-            wrap=""
-            class='statusmain'
-            type='textarea'
-            id='ui_main_status'
-            rows='8'
-            cols='40'
-            onselect='return false;'
-            unselectable='on'
-            disabled readonly>
-          ...
-          </textarea>
-        </div>
+
+          <div id='ui_main_status' class='textwindowmain'>
+          </div>
+
+       </div>
 
       </div>
 

busunit/DIUv2/html/js/diu_ui-ORG.js

@@ -73,8 +73,10 @@ var g_ctx = {
   "bulkfare_count" : "",
 
   "status_text": "",
-  "status_text_w": 0,
-  "status_text_h": 0,
+  "status_text_w": 40,
+  "status_text_h": 9,
+
+  "status_html_text":"",
 
   "diu_status" : {},
 
@@ -566,8 +568,6 @@ function _cb_status(inp) {
     var kv = fields[ii].split("=");
     if (kv.length!=2) { continue; }
     g_ctx.diu_status[kv[0].trim()] = kv[1].trim();
-
-
   }
 
   var m = g_ctx.diu_status;
@@ -583,20 +583,30 @@ function _cb_status(inp) {
     var gps_str = ( ((lat.length>0) && (lon.length>0)) ?  (" (" + lat + "/" + lon + ")") : "" );
 
     var ele = document.getElementById("ui_login_status");
-    var str = "";
-    str += "Tunnel: " + has_tunn + "  GPRS: " + has_gprs + "  Eq#: " + m["equipno"] + "  #Msg: " + m["nmsg"] + "\n";
-    str += "Last Token Read (" + m["last_token"] + ")\n";
-    str += "GPS: " + has_gps + gps_str + "\n";
-    str += "\n";
-    //      012345678012345678901234567890
-    str += "Package   Version   Installed\n";
-    //str += "-----------------------------\n";
-    str += _sp("ui") + _sp(DIU_UI_VERSION) + _sp(DIU_UI_VERSION_DATE) + "\n";
-    str += "\n";
-
-    if ("IMEI" in m) { str += "IMEI = " + m["IMEI"] + "\n"; }
-    if ("IMSI" in m) { str += "IMSI = " + m["IMSI"] + "\n"; }
-    if ("ETH0" in m) { str += "ETH0 = " + m["ETH0"] + "\n"; }
+
+    var html_a = [];
+    html_a.push("Tunnel: " + has_tunn + "  GPRS: " + has_gprs + "  Eq#: " + m["equipno"] + "  #Msg: " + m["nmsg"]);
+    html_a.push("Last Token Read (" + m["last_token"] + ")");
+    html_a.push("GPS: " + has_gps + gps_str + "");
+    html_a.push(" ");
+    html_a.push("Package   Version   Installed");
+    html_a.push(_sp("ui") + _sp(DIU_UI_VERSION) + _sp(DIU_UI_VERSION_DATE) + "");
+    html_a.push(" ");
+
+    if ("IMEI" in m) { html_a.push("IMEI = " + m["IMEI"] + ""); }
+    if ("IMSI" in m) { html_a.push("IMSI = " + m["IMSI"] + ""); }
+    if ("ETH0" in m) { html_a.push("ETH0 = " + m["ETH0"] + ""); }
+    html_a.push(" ");
+
+    for (var ii=0; ii<html_a.length; ii++) {
+      html_a[ii] = html_a[ii].replace(/ /g, '&nbsp;');
+    }
+
+    //span_str = "<div style='float:left; width: 100%; margin: 0 auto; display:block; text-align:left;  background: #770000; color:#008800;'>";
+    //span_str = "<div style='float:left; width: 100%; text-align:left;  background: #770000; color:#008800;'>";
+    //var div_hdr = "<div style='float:left; width: 100%; text-align:left; '>";
+    var div_hdr = "<div class='textrow'>";
+    var str = div_hdr + html_a.join("</div><br>" + div_hdr ) + "</div>";
 
     ele.innerHTML = str;
   }
@@ -629,10 +639,8 @@ function _main_message_clear() {
 
 function _main_message_replace(msg, bg_color, text_color) {
   var ele = document.getElementById("ui_main_status");
-  g_ctx.status_text_w = ele.cols;
-  g_ctx.status_text_h = ele.rows;
 
-  bg_color = ((typeof bg_color === "undeinfed") ? BG_COLOR : bg_color);
+  bg_color = ((typeof bg_color === "undefined") ? BG_COLOR : bg_color);
   text_color = ((typeof text_color === "undefined") ? TEXT_COLOR : text_color);
 
   var lines = g_ctx.status_text.split("\n");
@@ -649,12 +657,39 @@ function _main_message_replace(msg, bg_color, text_color) {
 
   lines[idx] = msg;
 
+  var html_lines = [];
+  for (var i=0; i<lines.length; i++) {
+    html_lines.push(lines[i].slice(0,g_ctx.status_text_w));
+
+    if (html_lines[i].match(/ACCEPT/)) {
+      html_lines[i] = "<div class='textrow accept'>" + html_lines[i] + "</div>";
+    }
+    else if (html_lines[i].match(/REJECT/)) {
+      html_lines[i] = "<div class='textrow reject'>" + html_lines[i] + "</div>";
+    }
+    else if (html_lines[i].match(/[Uu]nknown/)) {
+      html_lines[i] = "<div class='textrow reject'>" + html_lines[i] + "</div>";
+    }
+    else if (html_lines[i].match(/[Pp]assback/)) {
+      html_lines[i] = "<div class='textrow reject'>" + html_lines[i] + "</div>";
+    }
+    else if (html_lines[i].match(/Rule execution error/)) {
+      html_lines[i] = "<div class='textrow error'>" + html_lines[i] + "</div>";
+    }
+    else {
+      html_lines[i] = "<div class='textrow'>" + html_lines[i] + "</div>";
+    }
+
+  }
+
   g_ctx.status_text = lines.join("\n");
-  ele.innerHTML = g_ctx.status_text;
+
+  g_ctx.status_text = lines.join("\n");
+  g_ctx.status_html_text = html_lines.join("<br>");
+  ele.innerHTML = g_ctx.status_html_text;
 
   // sounds
   //
-
   if (msg.match(/ACCEPT/)) {
     _beep_accept();
   }
@@ -675,29 +710,49 @@ function _main_message_replace(msg, bg_color, text_color) {
 
 function _main_message_add(msg, bg_color, text_color) {
   var ele = document.getElementById("ui_main_status");
-  g_ctx.status_text_w = ele.cols;
-  g_ctx.status_text_h = ele.rows;
 
   bg_color = ((typeof bg_color === "undeinfed") ? BG_COLOR : bg_color);
   text_color = ((typeof text_color === "undefined") ? TEXT_COLOR : text_color);
 
   var txt = g_ctx.status_text + "\n" + msg;
 
+  var html_lines = [];
+
   var lines = txt.split("\n");
   if (lines.length > g_ctx.status_text_h) {
     var n = lines.length;
     lines = lines.slice(n - g_ctx.status_text_h);
   }
   for (var i=0; i<lines.length; i++) {
-    lines[i] = lines[i].slice(0,g_ctx.status_text_w);
+    html_lines.push(lines[i].slice(0,g_ctx.status_text_w));
+
+    if (html_lines[i].match(/ACCEPT/)) {
+      html_lines[i] = "<div class='textrow accept'>" + html_lines[i] + "</div>";
+    }
+    else if (html_lines[i].match(/REJECT/)) {
+      html_lines[i] = "<div class='textrow reject'>" + html_lines[i] + "</div>";
+    }
+    else if (html_lines[i].match(/[Uu]nknown/)) {
+      html_lines[i] = "<div class='textrow reject'>" + html_lines[i] + "</div>";
+    }
+    else if (html_lines[i].match(/[Pp]assback/)) {
+      html_lines[i] = "<div class='textrow reject'>" + html_lines[i] + "</div>";
+    }
+    else if (html_lines[i].match(/Rule execution error/)) {
+      html_lines[i] = "<div class='textrow error'>" + html_lines[i] + "</div>";
+    }
+    else {
+      html_lines[i] = "<div class='textrow'>" + html_lines[i] + "</div>";
+    }
+
   }
 
   g_ctx.status_text = lines.join("\n");
-  ele.innerHTML = g_ctx.status_text;
+  g_ctx.status_html_text = html_lines.join("<br>");
+  ele.innerHTML = g_ctx.status_html_text;
 
   // sounds
   //
-
   if (msg.match(/ACCEPT/)) {
     _beep_accept();
   }