added machine control panel

astro/src/components/Toolbar.tsx

@@ -26,7 +26,7 @@ import { createMask } from "../lib/getBitmap.js";
 import { Turtle } from '../lib/drawingToolkit/index.js'
 
 export default function Toolbar() {
-  const { connected, needsSaving, view } = getStore()
+  const { connected, needsSaving, view, machineRunning } = getStore()
 
   const [hidden, setHidden] = useState(true)
 
@@ -130,15 +130,52 @@ export default function Toolbar() {
         </div>
       </div>
 
-      <div class="flex items-center">
-        <Button variant="ghost" class="connect-trigger">
-          {connected ? 'disconnect from' : 'connect to'} machine
-        </Button>
-        {connected && (
-          <Button variant="ghost" class="run-machine-trigger">
-            run machine
-          </Button>
-        )}
+      <div class="flex items-center h-full">
+        <div class="group flex items-center relative h-full cursor-pointer p-1">
+          machine control
+          <div class="hidden group-hover:flex flex-col absolute top-full right-0 bg-[var(--primary)] w-max z-[99999]">
+            <div class="p-2 hover:bg-white hover:bg-opacity-10" data-evt-connectTrigger>
+              {connected ? 'disconnect from' : 'connect to'} machine
+            </div>
+
+            <div class={`${connected ? "" : "hidden"} p-2 hover:bg-white hover:bg-opacity-10`} data-evt-machineTrigger>
+              {machineRunning ? 'stop' : 'run'} machine
+            </div>
+
+            <div class={`${connected ? "" : "hidden"} p-2 hover:bg-white hover:bg-opacity-10`} data-evt-penUp>
+              pen up
+            </div>
+
+            <div class={`${connected ? "" : "hidden"} p-2 hover:bg-white hover:bg-opacity-10`} data-evt-penDown>
+              pen down
+            </div>
+
+            <div class={`${connected ? "" : "hidden"} p-2 hover:bg-white hover:bg-opacity-10`} data-evt-motorsOn>
+              motors on
+            </div>
+
+            <div class={`${connected ? "" : "hidden"} p-2 hover:bg-white hover:bg-opacity-10`} data-evt-motorsOff>
+              motors off
+            </div>
+
+            <div class={`${connected ? "" : "hidden"} p-2 hover:bg-white hover:bg-opacity-10`} data-evt-moveTowardsOrigin>
+              move towards origin
+            </div>
+
+            <div class={`${connected ? "" : "hidden"} p-2 hover:bg-white hover:bg-opacity-10`} data-evt-setOrigin>
+              set origin
+            </div>
+
+           {/* <div class={`${connected ? "" : "hidden"} p-2 hover:bg-white hover:bg-opacity-10`} data-evt-goToOrigin>
+              go to origin
+            </div>*/}
+
+           {/* <div class={`${connected ? "" : "hidden"} p-2 hover:bg-white hover:bg-opacity-10`} data-evt-homeMachine>
+              home machine
+            </div>*/}
+
+          </div>
+        </div>
         {/*<MachineControls />*/}
         <GitHubLink />
         <SettingsButton />

astro/src/lib/events/addMachineControl.js

@@ -3,12 +3,14 @@ import { createListener } from '../createListener.js'
 import runCode from '../run.ts'
 import { getStore, patchStore } from '../state.ts'
 
+let cancelled = false;
+
 export function addMachineControl() {
   let haxidraw
 
   const listener = createListener(document.body)
 
-  listener('click', '.connect-trigger', async () => {
+  listener('click', '[data-evt-connectTrigger]', async () => {
     if (!navigator.serial) {
       alert(
         "Your browser doesn't seem to support the Web Serial API, which is required for the Haxidraw editor to connect to the machine. Chrome Version 89 or above is the recommended browser."
@@ -37,17 +39,83 @@ export function addMachineControl() {
     }
   })
 
-  listener('click', '.run-machine-trigger', () => {
+  listener('click', '[data-evt-machineTrigger]', (e) => {
     const { turtles } = getStore()
     const runMachine = () => runMachineHelper(haxidraw, turtles)
 
-    runCode().then(() => {
-      if (!haxidraw) {
-        console.log('not connected')
-        return
-      }
-      runMachine()
+    if (!haxidraw) {
+      console.log('not connected')
+      return
+    }
+
+    if (e.target.innerText.toLowerCase().includes("stop")) {
+      cancelled = true;
+      patchStore({ machineRunning: false });
+      console.log("cancelled");
+      return;
+    }
+
+    runMachine().then(() => {
+      patchStore({ machineRunning: false });
+      cancelled = false;
     })
+
+    patchStore({ machineRunning: true });
+
+  })
+
+  listener('click', '[data-evt-penUp]', () => {
+    if (!haxidraw) {
+      console.log('not connected')
+      return
+    }
+
+    haxidraw.servo(1000);
+  })
+
+  listener('click', '[data-evt-penDown]', () => {
+    if (!haxidraw) {
+      console.log('not connected')
+      return
+    }
+
+    haxidraw.servo(1700);
+  })
+
+  listener('click', '[data-evt-motorsOn]', () => {
+    if (!haxidraw) {
+      console.log('not connected')
+      return
+    }
+
+    haxidraw.port.send("motorsOn");
+  })
+
+  listener('click', '[data-evt-motorsOff]', () => {
+    if (!haxidraw) {
+      console.log('not connected')
+      return
+    }
+
+    haxidraw.port.send("motorsOff");
+  });
+
+  listener('click', '[data-evt-setOrigin]', () => {
+    if (!haxidraw) {
+      console.log('not connected')
+      return
+    }
+
+    haxidraw.port.send("setOrigin");
+  });
+
+  listener('click', '[data-evt-moveTowardsOrigin]', () => {
+    if (!haxidraw) {
+      console.log('not connected')
+      return
+    }
+
+    haxidraw.port.send("moveTowardsOrigin");
   })
 
   async function automaticallyConnect() {
@@ -70,11 +138,20 @@ export function addMachineControl() {
 const delay = ms => new Promise(resolve => setTimeout(resolve, ms))
 
 export async function runMachineHelper(haxidraw, turtles) {
+
   await haxidraw.servo(1000)
   await delay(200)
   const polylines = turtles.map(x => x.path).flat()
   for (const polyline of polylines) {
     for (let i = 0; i < polyline.length; i++) {
+
+      if (cancelled) {
+        await haxidraw.servo(1000)
+        await delay(200)
+        await haxidraw.goTo(0, 0)
+        return;
+      };
+
       const [x, y] = polyline[i]
       if (i === 0) {
         await haxidraw.servo(1000)

astro/src/lib/haxidraw/createWebSerialPort.js

@@ -52,7 +52,7 @@ export async function createWebSerialPort(rawPort) {
     msgHandlers[msg] = func
   }
 
-  function send(msg, payload) {
+  function send(msg, payload = []) {
     let packedMsg = pack(msg, payload, msgCount)
     packedMsg = cobs.encode(packedMsg)
 

astro/src/lib/state.ts

@@ -39,7 +39,8 @@ export type GlobalState = {
   theme: 'light' | 'dark'
   vimMode: boolean,
   fileHandle: any,
-  needsSaving: boolean
+  needsSaving: boolean,
+  machineRunning: boolean
 }
 
 // setting/initializing state
@@ -60,7 +61,8 @@ const newState: Omit<GlobalState, 'code'> = {
   theme: 'light',
   vimMode: false,
   fileHandle: null,
-  needsSaving: false
+  needsSaving: false,
+  machineRunning: false,
 }
 
 export const makeNewState = (): GlobalState => {

hardware/motor-control-board/firmware/firmware.ino

@@ -20,6 +20,8 @@ const int motor1DirPin = D9;
 const int motor2StepPin = D8;
 const int motor2DirPin = D7;
 
+const int enablePin = D1;
+
 void setup() {  
   servo.attach(PIN_SERVO);
 
@@ -28,12 +30,18 @@ void setup() {
   on("light", onLight);
   on("go", go);
   on("servo", moveServo);
+  on("motorsOn", motorsOn);
+  on("motorsOff", motorsOff);
+  on("moveTowardsOrigin", moveTowardsOrigin);
+  on("setOrigin", setOrigin);
 
   pinMode(motor1StepPin, OUTPUT);
   pinMode(motor1DirPin, OUTPUT);
   pinMode(motor2StepPin, OUTPUT);
   pinMode(motor2DirPin, OUTPUT);
 
+  pinMode(enablePin, OUTPUT); // enable pin
+
   pinMode(PIN_LED, OUTPUT);
 }
 
@@ -51,6 +59,36 @@ uint8_t onLight(uint8_t* payload, int length, uint8_t* reply) {
   return 0;
 }
 
+uint8_t motorsOn(uint8_t* payload, int length, uint8_t* reply) {
+  digitalWrite(enablePin, 0);
+  return 0;
+}
+
+uint8_t motorsOff(uint8_t* payload, int length, uint8_t* reply) {
+  digitalWrite(enablePin, 1);
+  return 0;
+}
+
+uint8_t moveTowardsOrigin(uint8_t* payload, int length, uint8_t* reply) {
+  float x = pos[0];
+  float y = pos[1];
+
+  // this ternary may not be neccesary
+  goTo(
+    x + ( x < 0 ? 10 : -10), 
+    y + ( y < 0 ? 10 : -10)
+  );
+
+  return 0;
+}
+
+uint8_t setOrigin(uint8_t* payload, int length, uint8_t* reply) {
+  pos[0] = 0;
+  pos[1] = 0;
+
+  return 0;
+}
+
 
 /* ------------------------------------------------------------ */