a simple gcode visualiser

App/src/GcodeParser.tsx

@@ -51,6 +51,5 @@ export function parseCommand(cmd: string): Command {
         (command as any)[arg] = parseFloat(val);
     });
 
-    console.log(command);
     return command;
 }

App/src/GcodeVisualiser.tsx

@@ -1,11 +1,16 @@
 import * as React from "react";
-import { Layer, Rect, Stage, Group } from "react-konva";
+import { Layer, Rect, Stage, Group, Line } from "react-konva";
+import { parseCommand, CommandType } from "~GcodeParser";
 
 interface IGcodeVisualiserProps {
     gcodeLinesSent: string[];
     gcodeLinesQueue: string[];
 }
 
+const mult = 3;
+const width = 500;
+const height = 500;
+
 export default class GcodeVisualiser extends React.PureComponent<
     IGcodeVisualiserProps,
     {}
@@ -14,18 +19,103 @@ export default class GcodeVisualiser extends React.PureComponent<
         super(props);
     }
     render() {
-        return (
+        let lastPos: { x: number; y: number; eng: boolean } = {
-            <Stage width={700} height={700}>
+            x: 60,
-                <Layer>
+            y: 0,
-                    <Rect
+            eng: false,
-                        x={10}
+        };
-                        y={10}
+
-                        width={50}
+        const { gcodeLinesQueue, gcodeLinesSent } = this.props;
-                        height={50}
+
-                        fill={"black"}
+        const sentLines = gcodeLinesSent.map(sl => {
-                        shadowBlur={10}
+            const command = parseCommand(sl);
+            if (
+                command.type === CommandType.G00 ||
+                command.type === CommandType.G01
+            ) {
+                const line = (
+                    <Line
+                        points={[
+                            lastPos.x * mult,
+                            height - lastPos.y * mult,
+                            (command.X ? command.X : lastPos.x) * mult,
+                            height - (command.Y ? command.Y : lastPos.y) * mult,
+                        ]}
+                        stroke={
+                            (command.Z
+                              ? command.Z
+                              : lastPos.eng)
+                                ? "green"
+                                : "blue"
+                        }
+                        strokeWidth={
+                            (command.Z ? command.Z : lastPos.eng) ? 2 : 1
+                        }
                     />
-                </Layer>
+                );
+                if (command.X) {
+                    lastPos.x = command.X;
+                }
+                if (command.Y) {
+                    lastPos.y = command.Y;
+                }
+                if (command.Z) {
+                    if (command.Z >= 0) {
+                        lastPos.eng = false;
+                    } else {
+                        lastPos.eng = true;
+                    }
+                }
+                return line;
+            }
+        });
+
+        const pendLines = gcodeLinesQueue.map(sl => {
+            const command = parseCommand(sl);
+            if (
+                command.type === CommandType.G00 ||
+                command.type === CommandType.G01
+            ) {
+                const line = (
+                    <Line
+                        points={[
+                            lastPos.x * mult,
+                            height - lastPos.y * mult,
+                            (command.X ? command.X : lastPos.x) * mult,
+                            height - (command.Y ? command.Y : lastPos.y) * mult,
+                        ]}
+                        stroke={
+                            (command.Z
+                              ? command.Z
+                              : lastPos.eng)
+                                ? "black"
+                                : "blue"
+                        }
+                        strokeWidth={
+                            (command.Z ? command.Z : lastPos.eng) ? 2 : 1
+                        }
+                    />
+                );
+                if (command.X) {
+                    lastPos.x = command.X;
+                }
+                if (command.Y) {
+                    lastPos.y = command.Y;
+                }
+                if (command.Z) {
+                    if (command.Z >= 0) {
+                        lastPos.eng = false;
+                    } else {
+                        lastPos.eng = true;
+                    }
+                }
+                return line;
+            }
+        });
+
+        return (
+            <Stage width={width} height={height}>
+                <Layer>{[...sentLines, ...pendLines]}</Layer>
             </Stage>
         );
     }

Firmware/MotorControl/src/Globals.cpp

@@ -1,6 +1,6 @@
 #include "Globals.h"
 
-Stepper eggStepper(6, 5, STEPS_PER_REVOLUTION, 0, defYDegPerMM);
+Stepper eggStepper(6, 5, -STEPS_PER_REVOLUTION, 0, defYDegPerMM);
 Stepper servoStepper(4, 3, STEPS_PER_REVOLUTION, xLimit, defXDegPerMM);
 
 unsigned int eggStepperDelay;