gcode parser thing

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>
+        );
+    }
+}