Web G-code Sender Updates

serial/browser/README.md

@@ -49,6 +49,10 @@ The parity mode, either `'none'`, `'even'`, or `'odd'`. The default value is `'n
 
 In addition to the connection settings you can also customize your UI with the following style settings:
 
+#### Timestamps
+
+A simple checkbox to toggle on/off the use of timestamps in the logs.
+
 #### Colors
 
 A simple checkbox to toggle on/off the use of colors in the logs.

serial/browser/sender.css

@@ -86,7 +86,7 @@ div#settings {
     width: 100%;
     height: 50px;
 
-    padding: 10px;
+    padding: 5px;
 
     display: flex;
     align-items: center;
@@ -127,7 +127,7 @@ div#settings img#reset {
 
 button#connection {
 
-    margin: 10px;
+    margin: 5px;
     padding: 7px;
 
     outline: none;
@@ -155,7 +155,7 @@ select.control {
     width: 65px;
     height: 20px;
 
-    margin-right: 7px;
+    margin-right: 5px;
 
     outline: none;
     box-shadow: none;
@@ -168,10 +168,11 @@ select.control {
 
 }
 
+input#timestamps,
 input#colors,
 input#emojis {
 
-    margin-right: 7px;
+    margin-right: 5px;
 
     outline: none;
     box-shadow: none;

serial/browser/sender.html

@@ -73,6 +73,9 @@
 
                 </select>
 
+                <a href="https://github.com/jgphilpott/polyslice/blob/main/serial/browser/README.md#timestamps">Timestamps</a>
+                <input id="timestamps" name="Timestamps" type="checkbox">
+
                 <a href="https://github.com/jgphilpott/polyslice/blob/main/serial/browser/README.md#colors">Colors</a>
                 <input id="colors" name="Colors" type="checkbox">
 

serial/browser/sender.js

@@ -13,6 +13,7 @@ let stopBitsDefault = 1
 let flowControlDefault = "none"
 let parityDefault = "none"
 
+let timestampsDefault = true
 let colorsDefault = true
 let emojisDefault = true
 
@@ -239,6 +240,7 @@ async function reset() {
         $("input#stop-bits").val(stopBitsDefault)
         $("select#flow-control").val(flowControlDefault)
         $("select#parity").val(parityDefault)
+        $("input#timestamps").prop("checked", timestampsDefault)
         $("input#colors").prop("checked", colorsDefault)
         $("input#emojis").prop("checked", emojisDefault)
 
@@ -248,9 +250,11 @@ async function reset() {
         localWrite("stopBits", stopBitsDefault)
         localWrite("flowControl", flowControlDefault)
         localWrite("parity", parityDefault)
+        localWrite("timestamps", timestampsDefault)
         localWrite("colors", colorsDefault)
         localWrite("emojis", emojisDefault)
 
+        toggleStyle("timestamps", timestampsDefault)
         toggleStyle("colors", colorsDefault)
         toggleStyle("emojis", emojisDefault)
 
@@ -263,13 +267,24 @@ async function reset() {
 
 function toggleStyle(type, value) {
 
+    let noTimestamps =
+
+        `<style class='no-timestamps'>
+            span.time {
+                display: none;
+            }
+        </style>`
+
     let noColors =
 
         `<style class='no-colors'>
             b.x,
             b.y,
             b.z,
             b.e,
+            b.t,
+            b.b,
+            b.w,
             span.info,
             span.error,
             span.success {
@@ -287,11 +302,13 @@ function toggleStyle(type, value) {
 
     if (value) {
 
+        if (type == "timestamps") $("style.no-timestamps").remove()
         if (type == "colors") $("style.no-colors").remove()
         if (type == "emojis") $("style.no-emojis").remove()
 
     } else {
 
+        if (type == "timestamps") $(noTimestamps).appendTo("head")
         if (type == "colors") $(noColors).appendTo("head")
         if (type == "emojis") $(noEmojis).appendTo("head")
 
@@ -330,6 +347,7 @@ document.addEventListener("DOMContentLoaded", (event) => {
         let flowControl = localRead("flowControl")
         let parity = localRead("parity")
 
+        let timestamps = localRead("timestamps")
         let colors = localRead("colors")
         let emojis = localRead("emojis")
 
@@ -345,6 +363,7 @@ document.addEventListener("DOMContentLoaded", (event) => {
         flowControl = flowControl != null ? flowControl : flowControlDefault
         parity = parity != null ? parity : parityDefault
 
+        timestamps = timestamps != null ? timestamps : timestampsDefault
         colors = colors != null ? colors : colorsDefault
         emojis = emojis != null ? emojis : emojisDefault
 
@@ -401,6 +420,16 @@ document.addEventListener("DOMContentLoaded", (event) => {
             localWrite("parity", parityDefault)
         }
 
+        if (typeof timestamps == "boolean") {
+            $("input#timestamps").prop("checked", timestamps)
+            toggleStyle("timestamps", timestamps)
+            localWrite("timestamps", timestamps)
+        } else {
+            $("input#timestamps").prop("checked", timestampsDefault)
+            toggleStyle("timestamps", timestampsDefault)
+            localWrite("timestamps", timestampsDefault)
+        }
+
         if (typeof colors == "boolean") {
             $("input#colors").prop("checked", colors)
             toggleStyle("colors", colors)
@@ -479,7 +508,7 @@ document.addEventListener("DOMContentLoaded", (event) => {
 
         })
 
-        $("input#colors, input#emojis").on("change", (event) => {
+        $("input#timestamps, input#colors, input#emojis").on("change", (event) => {
 
             let value = $(event.target).prop("checked")
             let type = $(event.target).attr("id")
@@ -554,7 +583,8 @@ document.addEventListener("DOMContentLoaded", (event) => {
                             if (command.includes("M501 ")) command += "<span class='emoji'>📂</span>" // Load Settings.
                             if (command.includes("M502 ")) command += "<span class='emoji'>🔄</span>" // Reset Settings.
 
-                            // Shutdown
+                            // Interrupt/Shutdown
+                            if (command.includes("M108 ")) command += "<span class='emoji'>⛔</span>" // Interrupt command.
                             if (command.includes("M112 ")) command += "<span class='emoji'>🛑</span>" // Full Shutdown.
 
                             log("input", command)