Added JogPad

VolodymyrBaydalka · Feb 26, 2024 · eba2d82 · eba2d82
1 parent 0a1c705
commit eba2d82
Show file tree

Hide file tree

Showing 11 changed files with 107 additions and 24 deletions.
diff --git a/docs/index.293d97df.js b/docs/index.293d97df.js
diff --git a/docs/index.293d97df.js.map b/docs/index.293d97df.js.map
diff --git a/docs/index.93ca3071.css b/docs/index.93ca3071.css
diff --git a/docs/index.93ca3071.css.map b/docs/index.93ca3071.css.map
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Web GRBL</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin><link href="index.93ca3071.css" rel="stylesheet"></head><body> <div id="app"></div> <script type="module" src="index.293d97df.js"></script> </body></html>
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Web GRBL</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"><link href="index.93ca3071.css" rel="stylesheet"></head><body> <div id="app"></div> <script type="module" src="index.293d97df.js"></script> </body></html>
diff --git a/src/GCodeSender/GCodeSender.tsx b/src/GCodeSender/GCodeSender.tsx
@@ -1,23 +1,23 @@
 import React, { useEffect, useState } from "react";
-import { GrblClient } from "../core/grblClient";
+import { useGrblClient } from "../hooks/useGrblClient";
 import "./GCodeSender.scss";
+import { JogPad } from "./JogPad";
 
 export function GCodeSender({ gcode }) {
-	const [conn] = useState(() => new GrblClient())
+	const conn = useGrblClient();
 	const [connected, setConnected] = useState(false);
 	const [actualGCode, setActualGCode] = useState("");
 	const [status, setStatus] = useState("None");
 	const [logs, setLogs] = useState<any[]>([]);
 
 	useEffect(() => {
-		conn.onMessage = msg => {
-			if (msg.type == "status") {
-				setStatus(msg.text);
+		conn.onMessage = ev => {
+			if (ev.type == "status") {
+				setStatus(`${ev.status}, position=${ev.position?.join(", ")}`);
 			} else {
 				setLogs(prev => [...prev, { 
-					...msg, 
-					prefix: msg.type == "response" ? ">>" : "<<",
-					className: msg.text.startsWith("ok") ? "text-success" : (msg.text.startsWith("error:") ? "text-danger" : "")
+					text: `${ev.type == "request" ? "<<" : ">>"} ${ev.message}`,
+					className: ev.message.startsWith("ok") ? "text-success" : (ev.message.startsWith("error:") ? "text-danger" : "")
 				}]);
 			}
 		}
@@ -27,8 +27,6 @@ export function GCodeSender({ gcode }) {
 		setActualGCode(gcode);
 	}, [gcode]);
 
-
-
 	const handleConnectClick = async () => {
 		const res = await conn.connect();
 		setConnected(res);
@@ -72,9 +70,10 @@ export function GCodeSender({ gcode }) {
 				<button className="btn btn-danger" onClick={handleStopClick} disabled={!connected}>Stop</button>
 				<div>Queued: {conn.queueSize}</div>
 			</div>
+			<JogPad/>
 			<pre className="__logs">
 				<div className="__logs-content">
-					{logs.map((m, i) => (<div key={i} className={m.className}>{m.prefix} - {m.text}</div>))}
+					{logs.map((m, i) => (<div key={i} className={m.className}>{m.text}</div>))}
 				</div>
 			</pre>
 		</section>

diff --git a/src/GCodeSender/JogPad.scss b/src/GCodeSender/JogPad.scss
@@ -0,0 +1,10 @@
+.jog-pad {
+    display: grid;    
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.25rem;
+
+    &>button {
+        width: 3rem;
+        height: 3rem;
+    }
+}
diff --git a/src/GCodeSender/JogPad.tsx b/src/GCodeSender/JogPad.tsx
@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+import { useGrblClient } from "../hooks/useGrblClient";
+import "./JogPad.scss";
+
+export function JogPad() {
+    const [feed, setFeed] = useState(1800);
+    const [step, setStep] = useState(60);
+    const client = useGrblClient();
+
+    const jogClicked = async (axis, dir) => {
+        if (client.connected)
+            await client.jog(axis, dir * step, feed);
+    }
+
+    const homeClicked = async () => {
+        if (client.connected) 
+            await client.home();
+    }
+
+    return (
+        <div className="jog-pad">
+            <div></div>
+            <button type="button" className="btn btn-warning" onClick={ev => jogClicked("Y", 1)}>
+                <i className="bi bi-arrow-up"></i>
+            </button>
+            <div></div>
+
+            <button type="button" className="btn btn-warning" onClick={ev => jogClicked("X", -1)}>
+                <i className="bi bi-arrow-left"></i>
+            </button>
+            <button type="button" className="btn btn-warning" onClick={ev => homeClicked()}>
+                <i className="bi bi-record-circle"></i>
+            </button>
+            <button type="button" className="btn btn-warning" onClick={ev => jogClicked("X", 1)}>
+                <i className="bi bi-arrow-right"></i>
+            </button>
+
+            <div></div>
+            <button type="button" className="btn btn-warning" onClick={ev => jogClicked("Y", -1)}>
+                <i className="bi bi-arrow-down"></i>
+            </button>
+            <div></div>
+        </div>
+    )
+}
diff --git a/src/core/grblClient.ts b/src/core/grblClient.ts
@@ -5,7 +5,9 @@ const newLine = "\n";
 export type GrblEventType = "request" | "response" | "status";
 export type GrblEvent = {
     type: GrblEventType;
-    text: string;
+    message: string;
+    status?: string;
+    position?: [number, number, number];
 }
 
 export class GrblClient {
@@ -32,8 +34,6 @@ export class GrblClient {
     async connect() {
         this.#serial = await serial.requestPort({ filters: [] });
 
-        console.log(this.#serial);
-
         if (this.#serial) {
             await this.#serial.open({ baudRate: this.baudRate });
 
@@ -53,9 +53,22 @@ export class GrblClient {
         this.#queue = [];
     }
 
+    async reset() {
+        await this.#write("\x18");
+        this.stop();
+    }
+
     async sendLine(line: string) {
         this.#write(`${line} \r`);
-        this.onMessage?.({ type: "request", text: line });
+        this.onMessage?.({ type: "request", message: line });
+    }
+
+    async jog(dir: "X" | "Y", dist: number, feed: number) {
+        await this.sendGcode(`$J=G91 ${dir}${dist}F${feed}`);
+    }
+
+    async home() {
+        await this.sendGcode(`G0 X0Y0`);
     }
 
     async sendGcode(code: string) {
@@ -98,16 +111,23 @@ export class GrblClient {
     }
 
     async #processMessage(line: string) {
-        let type: GrblEventType = "response";
+        const event: GrblEvent = {
+            type: "response",
+            message: line
+        };
 
         if (line.startsWith("<")) {
-            type = "status";
-            line = line.substring(1, line.length - 2);
+            event.type = "status";
+            event.message = line.substring(1, line.length - 1);
+
+            const parts = event.message.split(/[,|:]/);
+            event.status = parts[0];
+            event.position = [parseFloat(parts[2]), parseFloat(parts[3]), parseFloat(parts[4])];
         } else {
             await this.sendNextLine();
         }
 
-        this.onMessage?.({ type, text: line });
+        this.onMessage?.(event);
     }
 
     async #write(line: string) {

diff --git a/src/hooks/useGrblClient.ts b/src/hooks/useGrblClient.ts
@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react"
+import { GrblClient } from "../core/grblClient"
+
+export const GrblClientContext = createContext<GrblClient>(new GrblClient());
+
+export function useGrblClient() {
+    return useContext(GrblClientContext);
+}
diff --git a/src/index.html b/src/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <title>Web GRBL</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
     <link href="./index.scss" rel="stylesheet" >
   </head>
   <body>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Web GRBL</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin><link href="index.93ca3071.css" rel="stylesheet"></head><body> <div id="app"></div> <script type="module" src="index.293d97df.js"></script> </body></html>
		<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Web GRBL</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"><link href="index.93ca3071.css" rel="stylesheet"></head><body> <div id="app"></div> <script type="module" src="index.293d97df.js"></script> </body></html>