TRACE zobrazeni funkcni

data/index.htm

@@ -59,6 +59,47 @@ span.y {
 span.b {
   color: black;
 }
+
+/* Trace elementy */
+table.trace {
+ font-family: Arial;
+ font-weight: bold;
+}
+
+.trace tr {
+  line-height: 16px;
+}
+
+td.tr_err {
+  border-left: 5px solid red;
+  padding-left: 5px;
+  background: #ffcccc;
+}
+
+td.tr_inf {
+  border-left: 5px solid green;
+  padding-left: 5px;
+  background: lightgreen;
+}
+
+td.tr_warn {
+  border-left: 5px solid yellow;
+  padding-left: 5px;
+  background: lightyellow;
+}
+
+td.tr_dbg {
+  border-left: 5px solid black;
+  padding-left: 5px;
+  background: lightgray;
+}
+
+td.tr_tm {
+
+  text-align: right;
+  width: 5%;
+}
+
 </style>
     <meta name='viewport' content='width=device-width, initial-scale=1'>
     </head>
@@ -69,15 +110,34 @@ span.b {
       function ping() {
         if (connected) {
           if (document.getElementById("live").checked)
-            connection.send('mem');
+            connection.send('status');
           else
             connection.send('ping');
           setTimeout(ping, 5000);
         }
       }
 
+      function getTraceTime(stamp) {
+        var hours = Math.trunc((stamp % 86400000) / 3600000); // 86400 equals secs per day
+        var minutes = Math.trunc((stamp % 3600000) / 60000); //  3600 equals secs per minute
+        var seconds = Math.trunc((stamp % 60000) / 1000);
+        var ms = stamp % 1000;
+        var t;
+
+        t = hours.toLocaleString(undefined, {
+          minimumIntegerDigits: 2
+        }) + ':' + minutes.toLocaleString(undefined, {
+          minimumIntegerDigits: 2
+        }) + ':' + seconds.toLocaleString(undefined, {
+          minimumIntegerDigits: 2
+        }) + '.' + ms.toLocaleString(undefined, {
+          minimumIntegerDigits: 3
+        });
+        return t;
+      }
+
       function connect() {
-        connection = new WebSocket('ws://' + window.location.hostname + ', ["arduino"]');
+        connection = new WebSocket('ws://' + window.location.hostname + '/wss', ['arduino']);
 
         connection.onopen = function() {
           console.log('WS Connected');
@@ -94,14 +154,42 @@ span.b {
         connection.onmessage = function(e) {
           var d = JSON.parse(e.data);
           if (d.type == 'trace') {
-            document.getElementById('trace').innerHTML = d.text;
+            var h = '<table class="trace" style="width:100%;">';
+            for (var i = 0; i < d.data.length; i++) {
+              h += '<tr><td class="tr_tm">';
+              h += getTraceTime(d.data[i].t);
+              h += '</td><td class="';
+              switch (d.data[i].s) {
+                case 0: // error
+                  h += 'tr_err';
+                  break;
+
+                case 1: // warning
+                  h += 'tr_warn';
+                  break;
+
+                case 2: // info
+                  h += 'tr_inf';
+                  break;
+
+                case 3: // debug
+                  h += 'tr_dbg';
+                  break;
+
+                case 4: // debug more
+                  h += 'tr_dbg';
+                  break;
+              }
+              h += '">' + d.data[i].d;
+              h += '</td></tr>'
+            }
+            h += '</table>';
+            document.getElementById('trace').innerHTML = h;
           }
-          if (d.type == 'info') {
-            document.getElementById('reset').innerHTML = d.reset;
-            document.getElementById('flash').innerHTML = d.flash;
-            document.getElementById('ram').innerHTML = d.ram;
-          }
-          if (d.type == 'mem') {
+
+          if (d.type == 'status') {
+            // document.getElementById('reset').innerHTML = d.reset;
+            // document.getElementById('flash').innerHTML = d.flash;
             document.getElementById('ram').innerHTML = d.ram;
           }
         }