Add support for various Marlin message types

.gitignore

@@ -1,4 +1,4 @@
-
+/.idea
 node_modules
 .vscode
 build

src/components/Panels/Charts.js

@@ -35,7 +35,7 @@ import { Menu as PanelMenu } from "./"
 temperatures set
 {
     T: [{value:XXX, target:xxx},{value:XXX, target:xxx},...], //0->8 T0->T8 Extruders
-    R: [{value:XXX, target:xxx}], //0->1 R Redondant
+    R: [{value:XXX, target:xxx}], //0->1 R Redundant
     B: [{value:XXX, target:xxx}], //0->1 B Bed
     C: [{value:XXX, target:xxx}], //0->1  Chamber
     P: [{value:XXX, target:xxx}], //0->1 Probe
@@ -79,8 +79,6 @@ const charts = [
                 C: [],
                 //probe
                 P: [],
-                //chamber
-                C: [],
                 //motherboard
                 M: [],
             },

src/components/Panels/Terminal.js

@@ -283,8 +283,11 @@ const TerminalPanel = () => {
                             default:
                             //do nothing
                         }
-                        if (isVerbose || isVerbose == line.isverboseOnly)
+                        if (line.isAction) {
+                            return <pre class="action" title={line.actionType}>{line.content}</pre>
+                        } else if (isVerbose || isVerbose === line.isverboseOnly) {
                             return <pre class={className}>{line.content}</pre>
+                        }
                     })}
                 <div ref={messagesEndRef} />
             </div>

src/targets/Printer3D/Marlin/TargetContext.js

@@ -40,6 +40,8 @@ import {
     getStatus,
     isFlowRate,
     getFlowRate,
+    isFanSpeed,
+    getFanSpeed,
     isFeedRate,
     getFeedRate,
     isSensor,
@@ -211,6 +213,10 @@ const TargetContextProvider = ({ children }) => {
                 const p = getFlowRate(data)
                 flowsRate.current[p.index] = p.value
                 setFlowRate(flowsRate.current)
+            } else if (isFanSpeed(data)) {
+                const p = getFanSpeed(data)
+                fansSpeed.current[p.index] = p.value
+                setFanSpeed(fansSpeed.current)
             } else if (isFeedRate(data)) {
                 const p = getFeedRate(data)
                 feedsRate.current[p.index] = p.value
@@ -251,6 +257,8 @@ const TargetContextProvider = ({ children }) => {
                                 dataBuffer.current[type]
                             )
                             dispatchInternally(type, dataBuffer.current[type])
+                            const reg_search_action = /\/\/action:([a-z]*)\s(.*)/
+                            let result = null
                             //format the output if needed
                             if (dataBuffer.current[type].startsWith("{")) {
                                 const newbuffer = beautifyJSONString(
@@ -269,6 +277,14 @@ const TargetContextProvider = ({ children }) => {
                                         isverboseOnly,
                                     })
                                 }
+                            } else if ((result = reg_search_action.exec(dataBuffer.current[type])) !== null) {
+                                terminal.add({
+                                    type,
+                                    content: result[2],
+                                    isverboseOnly,
+                                    isAction: true,
+                                    actionType: result[1],
+                                })
                             } else {
                                 //if not json
                                 terminal.add({

src/targets/Printer3D/Marlin/filters.js

@@ -97,12 +97,16 @@ const isPrintStatus = (str) => {
     let result = null
     const reg_search1 = /(Not\sSD\sprinting|Done\sprinting\sfile)/
     const reg_search2 = /SD\sprinting\sbyte\s([0-9]*)\/([0-9]*)/
+    const reg_search3 =/echo:\sM73\sProgress:\s([0-9.]*)%;\sTime\sleft:\s([0-9]*)m;\sChange:\s([0-9]*)m;/
     if ((result = reg_search1.exec(str)) !== null) {
         return true
     }
     if ((result = reg_search2.exec(str)) !== null) {
         return true
     }
+    if ((result = reg_search3.exec(str)) !== null) {
+        return true
+    }
     if (str.startsWith("echo:Print time:")) {
         return true
     }
@@ -113,6 +117,7 @@ const getPrintStatus = (str) => {
     let result = null
     const reg_search1 = /(Not\sSD\sprinting|Done\sprinting\sfile)/
     const reg_search2 = /SD\sprinting\sbyte\s([0-9]*)\/([0-9]*)/
+    const reg_search3 =/echo:\sM73\sProgress:\s([0-9.]*)%;\sTime\sleft:\s([0-9]*)m;\sChange:\s([0-9]*)m;/
     if ((result = reg_search1.exec(str)) !== null) {
         return {
             status: result[1],
@@ -130,6 +135,14 @@ const getPrintStatus = (str) => {
             ).toFixed(2),
         }
     }
+    if ((result = reg_search3.exec(str)) !== null) {
+        let progress = parseFloat(result[1])
+        return {
+            status: (progress === 100 || progress === 0) ? "Not printing" : `Printing: ${result[2]}m remaining`,
+            printing: (!(progress === 100 || progress === 0)),
+            progress: progress.toFixed(2),
+        }
+    }
     if (str.startsWith("echo:Print time:")) {
         const regex_search =
             /echo:Print time:\s((?<year>[0-9]*)y\s)*((?<day>[0-9]*)d\s)*((?<hour>[0-9]*)h\s)*((?<min>[0-9]*)m\s)*((?<sec>[0-9]*)s)/
@@ -221,6 +234,27 @@ const getFlowRate = (str) => {
     return null
 }
 
+////////////////////////////////////////////////////////
+//
+//Fan speed
+const isFanSpeed = (str) => {
+    let result = null
+    //M106 P0 S255
+    const reg_search1 = /M106\sP([0-9]+)\sS([0-9]+)/
+    if ((result = reg_search1.exec(str)) !== null) {
+        return true
+    }
+    return false
+}
+
+const getFanSpeed = (str) => {
+    let result = null
+    const reg_search1 = /M106\sP([0-9]+)\sS([0-9]+)/
+    if ((result = reg_search1.exec(str)) !== null) {
+        return { index: parseInt(result[1]), value: (result[2]/255.0 * 100.0).toFixed(2) }
+    }
+    return null
+}
 ////////////////////////////////////////////////////////
 //
 //Feed rate
@@ -315,6 +349,8 @@ export {
     getStatus,
     isFlowRate,
     getFlowRate,
+    isFanSpeed,
+    getFanSpeed,
     isFeedRate,
     getFeedRate,
     isSensor,

src/targets/Printer3D/Marlin/stream.js

@@ -22,19 +22,16 @@ import { isTemperatures, isPositions } from "./filters"
 
 const isVerboseOnly = (type, data) => {
     const line = data.trim()
-    if (
-        isTemperatures(line) ||
+    return isTemperatures(line) ||
         isPositions(line) ||
-        line.trim().length == 0 ||
+        line.trim().length === 0 ||
         line.startsWith("echo:") ||
         line.startsWith("ok") ||
         line.startsWith("M105") ||
+        line.startsWith("M106") ||
         line.startsWith("M114") ||
         line.startsWith("FR:") ||
-        (line.startsWith("{") && line.endsWith("}"))
-    )
-        return true
-    else return false
+        (line.startsWith("{") && line.endsWith("}"));
 }
 
 export { isVerboseOnly }

themes_samples/theme-mnj

@@ -0,0 +1,171 @@
+span.form-input,
+button,
+.modal-container,
+body,
+.empty,
+html{
+background-color:#222;
+color:#d3e4ff!important;
+}
+
+a svg.esp3dlogo{
+color:#0077ff!important;
+}
+
+a.active svg,
+a.active label.hide-low{
+color:rgb(0, 85, 197)!important;
+}
+
+.menu-container .navbar{
+    background-color: #3b679360;
+    border-bottom:.5px solid #8888;
+}
+
+.panel .navbar {
+    background-color: #3b6793c2;
+    border-bottom:.5px solid #8888;
+}
+
+.panel .navbar-section {
+    background-color: #fff0;
+    border-bottom:.5px solid #8888;
+}
+
+span.navbar-section{
+    color:#f7f8f9!important;
+}
+
+.btn {
+    border: 0.05rem solid #fff8;
+    background: #8884;
+    color: #9aceff;
+}
+
+.btn.btn-link {
+    color: #368ad8;
+}
+
+.btn:focus, .btn:hover {
+    background: #f1f1fc;
+    border-color: #286baa;
+    text-decoration: none;
+}
+
+.form-checkbox input:checked+.form-icon, .form-radio input:checked+.form-icon, .form-switch input:checked+.form-icon {
+    background: #1c4870;
+    border-color: #1c4870;
+}
+
+.files-list-footer {
+    color: #c7d8f3;
+}
+
+.form-input, .form-select, input {
+    background: #4446;
+    color: #5b92e9;
+}
+
+.form-input[readonly] {
+    background-color: #5448;
+}
+
+.input-group .input-group-addon {
+    background: #4446;
+    border: 0.05rem solid #bcc3ce;
+    color: #fffA;
+}
+
+.text-primary {
+    color: #66a9e7!important;
+}
+
+.label.label-primary {
+    background: #0d4183;
+    color: #fff;
+    margin: 0.1rem;
+}
+
+.text-dark {
+    color: #ffffff!important;
+}
+
+.tab-item {
+    color: #c1c1c1!important;
+}
+
+.tab .tab-item a:focus, .tab .tab-item a:hover, .jog-position-header {
+    color: #0061a7;
+}
+
+a.active svg {
+    color: rgb(0 171 255)!important;
+}
+
+a.active label.hide-low {
+    color: rgb(218, 235, 255)!important;
+}
+
+a.active label.hide-low:hover, a.active label.hide-low:active {
+    color: rgb(26, 26, 26)!important;
+}
+
+a.active label.hide-low {
+    color: rgb(0 171 255)!important;
+}
+
+.tab .tab-item a.active, .tab .tab-item.active a {
+    border-bottom-color: #e7e7e7;
+}
+
+.form-select:not([multiple]):not([size]) {
+    background: #4446 url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%204%205%27%3E%3Cpath%20fill=%27%23667189%27%20d=%27M2%200L0%202h4zm0%205L0%203h4z%27/%3E%3C/svg%3E) no-repeat right 0.35rem center/0.4rem 0.5rem;
+    padding-right: 1.2rem;
+}
+
+.form-input:focus {
+    box-shadow: 0 0 0 0.1rem rgb(85 144 217 / 20%);
+    border-color: #5590d9;
+}
+
+.chart {
+    filter: invert(1);
+}
+
+.extruder-ctrl-name, .temperature-ctrl-name, .jog-position-value, .extra-control-value, .status-control-value, .temperatures-value {
+    color: #c9e1ff;
+}
+
+button svg {
+    stroke:rgb(134, 183, 255)
+}
+
+.terminal .echo {
+    color: #348dff;
+}
+
+.terminal .action {
+    color: #34ff8d;
+}
+
+.bar .bar-item {
+    background: #1ea1ff;
+}
+
+.menu-item {
+    color: #438fff;
+}
+
+.file-line:hover {
+    color: #0055d7;
+    background-color: #e8f0ff;
+}
+
+.menu .menu-item>.menu-entry:focus, .menu .menu-item>.menu-entry:hover {
+    color: #0055d7;
+    background: #e8f0ff;
+}
+
+.btn.btn-link.active, .btn.btn-link:active, .btn.btn-link:focus, .btn.btn-link:hover {
+    color: #012a4c;
+}