gcode parser thing

App/package-lock.json

@@ -5819,6 +5819,11 @@
       "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
       "dev": true
     },
+    "konva": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/konva/-/konva-4.0.0.tgz",
+      "integrity": "sha512-TR1YUga/x8NShLS8vryzEXVDC8kQThOZRxX8x99/ABnfVRH4MN9LtBqn8YJxQWByMcwqjAzlNQWA3XuxCCVW0Q=="
+    },
     "lcid": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz",
@@ -8146,6 +8151,26 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
       "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA=="
     },
+    "react-konva": {
+      "version": "16.8.7-3",
+      "resolved": "https://registry.npmjs.org/react-konva/-/react-konva-16.8.7-3.tgz",
+      "integrity": "sha512-ybtT21EjinPFnN9/EqjWvbLNOd5uDwjkUWkITkP9OTaItZKfbCZw5aVpjpxTrRC69v4rzXXG+cdHAsbE6zt/6A==",
+      "requires": {
+        "react-reconciler": "^0.20.4",
+        "scheduler": "^0.13.6"
+      }
+    },
+    "react-reconciler": {
+      "version": "0.20.4",
+      "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.20.4.tgz",
+      "integrity": "sha512-kxERc4H32zV2lXMg/iMiwQHOtyqf15qojvkcZ5Ja2CPkjVohHw9k70pdDBwrnQhLVetUJBSYyqU3yqrlVTOajA==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "scheduler": "^0.13.6"
+      }
+    },
     "react-test-renderer": {
       "version": "16.8.6",
       "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.8.6.tgz",

App/package.json

@@ -34,9 +34,11 @@
     "typescript": "^3.5.3"
   },
   "dependencies": {
+    "konva": "^4.0.0",
     "normalize.css": "^8.0.1",
     "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "react-dom": "^16.8.6",
+    "react-konva": "^16.8.7-3"
   },
   "postcss": {
     "plugins": {

App/src/GcodeParser.tsx

@@ -0,0 +1,56 @@
+export enum CommandType {
+    unk = "unk",
+    G01 = "G01",
+    G00 = "G00",
+}
+
+export interface GenericCommand {
+    type: CommandType;
+}
+
+export interface G01Command extends GenericCommand {
+    type: CommandType.G01;
+    X?: number;
+    Y?: number;
+    Z?: number;
+    F?: number;
+}
+
+export interface G00Command extends GenericCommand {
+    type: CommandType.G00;
+    X?: number;
+    Y?: number;
+    Z?: number;
+    F?: number;
+}
+
+export interface UnkCommand extends GenericCommand {
+    type: CommandType.unk;
+}
+
+export type Command = G01Command | G00Command | UnkCommand;
+
+function getCommandType(type: string): CommandType {
+    if (type.toUpperCase() === "G01") {
+        return CommandType.G01;
+    }
+    if (type.toUpperCase() === "G00") {
+        return CommandType.G00;
+    }
+
+    return CommandType.unk;
+}
+
+export function parseCommand(cmd: string): Command {
+    const words = cmd.toUpperCase().split(" ");
+    let command: Command = { type: getCommandType(words.shift()) };
+
+    const args = words.map(word => {
+        const arg = word.slice(0, 1);
+        const val = word.slice(1);
+        (command as any)[arg] = parseFloat(val);
+    });
+
+    console.log(command);
+    return command;
+}

App/src/GcodeSender.tsx

@@ -1,5 +1,7 @@
 import * as React from "react";
 import { IEggbotStatus, getStatus, putCommand } from "~api/eggbot";
+import GcodeVisualiser from "~GcodeVisualiser";
+import { parseCommand } from "~GcodeParser";
 
 interface IGcodeSenderComponentState {
     eggbotStatus: IEggbotStatus | null;
@@ -25,8 +27,8 @@ export class GcodeSenderComponent extends React.PureComponent<
     {},
     IGcodeSenderComponentState
 > {
-    constructor() {
-        super(null);
+    constructor(props: {}) {
+        super(props);
         this.state = defaultState;
 
         this.handleInputChange = this.handleInputChange.bind(this);
@@ -57,13 +59,13 @@ export class GcodeSenderComponent extends React.PureComponent<
 
     public async update() {
         const status = await getStatus();
-        console.log(status);
         const gcodeLinesQueue = [...this.state.gcodeLinesQueue];
         const gcodeLinesSent = [...this.state.gcodeLinesSent];
         const { executing } = this.state;
         if (executing && status.commandQueue < 5) {
             if (gcodeLinesQueue && gcodeLinesQueue.length > 0) {
                 const command = gcodeLinesQueue.shift();
+                console.log(parseCommand(command));
                 putCommand(command.substr(0, 50));
                 gcodeLinesSent.push(command);
             }
@@ -73,32 +75,38 @@ export class GcodeSenderComponent extends React.PureComponent<
     }
 
     render() {
-        const queuedCommands = this.state.gcodeLinesQueue.map(el => (
-            <div>{el}</div>
-        ));
+        const { gcodeLinesQueue, gcodeLinesSent } = this.state;
 
-        const executedCommands = this.state.gcodeLinesSent.map(el => (
-            <div>{el}</div>
-        ));
+        const queuedCommandsList = gcodeLinesQueue.map(el => <div>{el}</div>);
+
+        const executedCommandsList = gcodeLinesSent.map(el => <div>{el}</div>);
 
         return (
-            <div>
-                {this.state.executing ? (
-                    <div>
-                        <div style={{ color: "green" }}>{executedCommands}</div>
-                        <div>{queuedCommands}</div>
-                    </div>
-                ) : (
-                    <div>
-                        <textarea
-                            name="gcodeInput"
-                            value={this.state.gcodeInput}
-                            onChange={this.handleInputChange}
-                        />
-                        <button onClick={this.handleSend}>send</button>
-                    </div>
-                )}
-            </div>
+            <>
+                <div>
+                    {this.state.executing ? (
+                        <div>
+                            <div style={{ color: "green" }}>
+                                {executedCommandsList}
+                            </div>
+                            <div>{queuedCommandsList}</div>
+                        </div>
+                    ) : (
+                        <div>
+                            <textarea
+                                name="gcodeInput"
+                                value={this.state.gcodeInput}
+                                onChange={this.handleInputChange}
+                            />
+                            <button onClick={this.handleSend}>send</button>
+                        </div>
+                    )}
+                </div>
+                <GcodeVisualiser
+                    gcodeLinesQueue={gcodeLinesQueue}
+                    gcodeLinesSent={gcodeLinesSent}
+                />
+            </>
         );
     }
 }

App/src/GcodeVisualiser.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { Layer, Rect, Stage, Group } from "react-konva";
+
+interface IGcodeVisualiserProps {
+    gcodeLinesSent: string[];
+    gcodeLinesQueue: string[];
+}
+
+export default class GcodeVisualiser extends React.PureComponent<
+    IGcodeVisualiserProps,
+    {}
+> {
+    constructor(props: IGcodeVisualiserProps) {
+        super(props);
+    }
+    render() {
+        return (
+            <Stage width={700} height={700}>
+                <Layer>
+                    <Rect
+                        x={10}
+                        y={10}
+                        width={50}
+                        height={50}
+                        fill={"black"}
+                        shadowBlur={10}
+                    />
+                </Layer>
+            </Stage>
+        );
+    }
+}