From 35e5fcf68bd22e405d658884d6f1ddc8a13a35a5 Mon Sep 17 00:00:00 2001
From: David Zwart <david@visionintellilgence.ai>
Date: Tue, 13 Feb 2024 21:55:41 +0100
Subject: [PATCH 1/5] feat: add printrer control dialog

---
 src/App.vue                                   |   4 +-
 src/backend/printers.service.ts               |  18 ++
 src/backend/server.api.ts                     |   2 +
 .../Generic/Dialogs/PrinterControlDialog.vue  | 117 +++++++++
 .../Generic/Dialogs/dialog.constants.ts       |   2 +
 .../PrinterGrid/PrinterGridTile.vue           | 222 +++++++++++-------
 6 files changed, 281 insertions(+), 84 deletions(-)
 create mode 100644 src/components/Generic/Dialogs/PrinterControlDialog.vue

diff --git a/src/App.vue b/src/App.vue
index b654de6b..a50222f2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -26,6 +26,7 @@
     <YamlImportExportDialog />
     <FileExplorerSideNav />
     <BatchReprintDialog />
+    <PrinterControlDialog />
   </v-app>
 </template>
 
@@ -54,11 +55,12 @@ import { uploadProgressTest } from "./utils/test.util";
 import { useAuthStore } from "./store/auth.store";
 import AppLoader from "./AppLoader.vue";
 import AddOrUpdateCameraStreamDialog from "@/components/Generic/Dialogs/AddOrUpdateCameraStreamDialog.vue";
-import { sleep } from "@/utils/time.utils";
+import PrinterControlDialog from "@/components/Generic/Dialogs/PrinterControlDialog.vue";
 
 export default defineComponent({
   name: "AppView",
   components: {
+    PrinterControlDialog,
     AddOrUpdateCameraStreamDialog,
     AppInfoSnackbar,
     AppErrorSnackbar,
diff --git a/src/backend/printers.service.ts b/src/backend/printers.service.ts
index bbc6de8f..e08a2a54 100644
--- a/src/backend/printers.service.ts
+++ b/src/backend/printers.service.ts
@@ -70,6 +70,24 @@ export class PrintersService extends BaseService {
     return await this.postApi(path);
   }
 
+  static async sendPrinterJogCommand(
+    printerId: IdType,
+    amounts: { x?: number; y?: number; z?: number }
+  ) {
+    const path = ServerApi.printerJogCommandRoute(printerId);
+
+    return await this.postApi(path, amounts);
+  }
+
+  static async sendPrinterHomeCommand(
+    printerId: IdType,
+    amounts: { x?: number; y?: number; z?: number }
+  ) {
+    const path = ServerApi.printerHomeCommandRoute(printerId);
+
+    return await this.postApi(path, amounts);
+  }
+
   static async createPrinter(printer: CreatePrinter) {
     const path = ServerApi.printerRoute;
 
diff --git a/src/backend/server.api.ts b/src/backend/server.api.ts
index 9851f769..76d6a69a 100644
--- a/src/backend/server.api.ts
+++ b/src/backend/server.api.ts
@@ -93,6 +93,8 @@ export class ServerApi {
   static printerEnabledRoute = (id: IdType) => `${ServerApi.getPrinterRoute(id)}/enabled`;
   static printerSerialConnectRoute = (id: IdType) =>
     `${ServerApi.getPrinterRoute(id)}/serial-connect`;
+  static printerJogCommandRoute = (id: IdType) => `${ServerApi.getPrinterRoute(id)}/jog`;
+  static printerHomeCommandRoute = (id: IdType) => `${ServerApi.getPrinterRoute(id)}/home`;
   static printerSerialDisconnectRoute = (id: IdType) =>
     `${ServerApi.getPrinterRoute(id)}/serial-disconnect`;
 
diff --git a/src/components/Generic/Dialogs/PrinterControlDialog.vue b/src/components/Generic/Dialogs/PrinterControlDialog.vue
new file mode 100644
index 00000000..52e3993c
--- /dev/null
+++ b/src/components/Generic/Dialogs/PrinterControlDialog.vue
@@ -0,0 +1,117 @@
+<template>
+  <BaseDialog :id="dialog.dialogId" :max-width="'700px'" @escape="closeDialog()">
+    <v-card>
+      <v-card-title> Printer Controls</v-card-title>
+      <v-card-text>
+        <v-container v-if="printer">
+          <v-row>
+            <v-col :cols="12">
+              Printer: {{ printer?.name }}
+              <br />
+              <v-chip color="primary">
+                {{ printerTemps?.actual }}C / {{ printerTemps?.target }}C
+              </v-chip>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col :cols="8">
+              X/Y
+              <br />
+              <v-btn class="primary" outlined x-large @click="jogPrinterHead(-1, 1, 0)">
+                <v-icon>north_west</v-icon>
+              </v-btn>
+              <v-btn class="primary" outlined x-large @click="jogPrinterHead(0, 1, 0)">
+                <v-icon>north</v-icon>
+              </v-btn>
+              <v-btn class="primary" outlined x-large @click="jogPrinterHead(1, 1, 0)">
+                <v-icon>north_east</v-icon>
+              </v-btn>
+              <br />
+              <v-btn class="primary" outlined x-large @click="jogPrinterHead(-1, 0, 0)">
+                <v-icon>west</v-icon>
+              </v-btn>
+              <v-btn class="primary" outlined x-large @click="homeAxes()">
+                <v-icon>home</v-icon>
+              </v-btn>
+              <v-btn class="primary" outlined x-large @click="jogPrinterHead(1, 0, 0)">
+                <v-icon>east</v-icon>
+              </v-btn>
+              <br />
+              <v-btn class="primary" outlined x-large @click="jogPrinterHead(-1, -1, 0)">
+                <v-icon>south_west</v-icon>
+              </v-btn>
+              <v-btn class="primary" outlined x-large @click="jogPrinterHead(0, -1, 0)">
+                <v-icon>south</v-icon>
+              </v-btn>
+              <v-btn class="primary" outlined x-large @click="jogPrinterHead(1, -1, 0)">
+                <v-icon>south_east</v-icon>
+              </v-btn>
+            </v-col>
+            <v-col cols="4">
+              Z
+              <br />
+              <v-btn class="primary" outlined x-large @click="jogPrinterHead(0, 0, 1)">
+                <v-icon>north</v-icon>
+              </v-btn>
+              <br />
+              <v-btn class="primary" outlined x-large @click="jogPrinterHead(1, 0, 1)">
+                <v-icon>south</v-icon>
+              </v-btn>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn text @click="closeDialog()">Close</v-btn>
+      </v-card-actions>
+    </v-card>
+  </BaseDialog>
+</template>
+
+<script lang="ts" setup>
+import { useDialog } from "@/shared/dialog.composable";
+import { DialogName } from "@/components/Generic/Dialogs/dialog.constants";
+import { computed } from "vue";
+import { usePrinterStore } from "@/store/printer.store";
+import { IdType } from "@/utils/id.type";
+import { usePrinterStateStore } from "@/store/printer-state.store";
+import { PrintersService } from "@/backend";
+
+const dialog = useDialog<{ printerId: IdType }>(DialogName.PrinterControlDialog);
+const printerStore = usePrinterStore();
+const printerStateStore = usePrinterStateStore();
+const printerId = computed(() => dialog.context()?.printerId);
+const printer = computed(() => {
+  if (!printerId.value) return;
+
+  return printerStore.printer(printerId.value);
+});
+
+const printerTemps = computed(() => {
+  const events = printerStateStore.printerEventsById[printerId.value];
+  if (
+    events?.current?.payload?.temps?.length &&
+    events?.current?.payload?.temps[0]?.tool0?.actual
+  ) {
+    return events?.current?.payload?.temps[0]?.tool0;
+  }
+  return null;
+});
+
+const jogPrinterHead = async (x: number, y: number, z: number) => {
+  await PrintersService.sendPrinterJogCommand(printerId.value, {
+    x,
+    y,
+    z,
+  });
+};
+
+const homeAxes = async () => {
+  await PrintersService.sendPrinterHomeCommand(printerId.value, {});
+};
+
+const closeDialog = () => {
+  dialog.closeDialog();
+};
+</script>
diff --git a/src/components/Generic/Dialogs/dialog.constants.ts b/src/components/Generic/Dialogs/dialog.constants.ts
index 978f58f4..72d5303a 100644
--- a/src/components/Generic/Dialogs/dialog.constants.ts
+++ b/src/components/Generic/Dialogs/dialog.constants.ts
@@ -14,4 +14,6 @@ export enum DialogName {
   PrinterMaintenanceDialog = "PrinterMaintenanceDialog",
   // The camera create dialog, which is used to create a new or update a camera.
   AddOrUpdateCameraDialog = "AddOrUpdateCameraDialog",
+  // Dialog for moving print head, homing, or retracting/extruding filament
+  PrinterControlDialog = "PrinterControlDialog",
 }
diff --git a/src/components/PrinterGrid/PrinterGridTile.vue b/src/components/PrinterGrid/PrinterGridTile.vue
index 8b2f6070..c848423d 100644
--- a/src/components/PrinterGrid/PrinterGridTile.vue
+++ b/src/components/PrinterGrid/PrinterGridTile.vue
@@ -76,6 +76,25 @@
             <v-icon>usb</v-icon>
           </v-btn>
 
+          <!-- Emergency stop button -->
+          <v-tooltip v-if="printerStateStore.isPrinterOperational(printer?.id)" bottom>
+            <template v-slot:activator="{ on, attrs }">
+              <v-btn
+                elevation="4"
+                icon
+                size="36"
+                v-bind="attrs"
+                v-on="on"
+                @click.prevent.stop="clickOpenPrinterControlDialog()"
+              >
+                <v-icon>open_with</v-icon>
+              </v-btn>
+            </template>
+            <template v-slot:default>
+              <span>Control your printer head or extruder.</span>
+            </template>
+          </v-tooltip>
+
           <!-- Emergency stop button -->
           <v-tooltip v-if="printerStateStore.isPrinterOperational(printer?.id)" bottom>
             <template v-slot:activator="{ on, attrs }">
@@ -182,11 +201,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { computed, defineComponent, PropType } from "vue";
 import { CustomGcodeService } from "@/backend/custom-gcode.service";
 import { PrintersService } from "@/backend";
 import { usePrinterStore } from "@/store/printer.store";
-import { useDialogsStore } from "@/store/dialog.store";
 import { DialogName } from "@/components/Generic/Dialogs/dialog.constants";
 import { useGridStore } from "@/store/grid.store";
 import { FloorService } from "@/backend/floor.service";
@@ -196,109 +214,147 @@ import { interpretStates } from "@/shared/printer-state.constants";
 import { usePrinterStateStore } from "@/store/printer-state.store";
 import { PrinterDto } from "@/models/printers/printer.model";
 import { useSnackbar } from "@/shared/snackbar.composable";
+import { useDialog } from "@/shared/dialog.composable";
 
 const defaultColor = "rgba(100,100,100,0.1)";
 
 export default defineComponent({
   name: "PrinterGridTile",
-  components: {},
   props: {
-    printer: Object as PropType<PrinterDto>,
-    x: Number,
-    y: Number,
-  },
-  setup() {
-    return {
-      printerStore: usePrinterStore(),
-      printerStateStore: usePrinterStateStore(),
-      floorStore: useFloorStore(),
-      settingsStore: useSettingsStore(),
-      gridStore: useGridStore(),
-      dialogsStore: useDialogsStore(),
-      snackbar: useSnackbar(),
-    };
+    printer: { type: Object as PropType<PrinterDto | undefined>, required: true },
+    x: { type: Number, required: true },
+    y: { type: Number, required: true },
   },
-  computed: {
-    printerId() {
-      return this.printer?.id;
-    },
-    selected() {
-      if (!this.printerId) return false;
-      return this.printerStore.isSelectedPrinter(this.printerId);
-    },
-    unselected() {
-      return this.printerStore.selectedPrinters?.length && !this.selected;
-    },
-    largeTilesEnabled() {
-      return this.settingsStore.largeTiles;
-    },
-    printerState() {
-      if (!this.printerId) return;
-      const printer = this.printerStore.printer(this.printerId);
+  setup(props) {
+    const printerStore = usePrinterStore();
+    const printerStateStore = usePrinterStateStore();
+    const floorStore = useFloorStore();
+    const settingsStore = useSettingsStore();
+    const gridStore = useGridStore();
+    const controlDialog = useDialog(DialogName.PrinterControlDialog);
+    const addOrUpdateDialog = useDialog(DialogName.AddOrUpdatePrinterDialog);
+    const snackbar = useSnackbar();
+
+    const printerId = computed(() => props.printer?.id);
+
+    const selected = computed(() => {
+      if (!printerId.value) return false;
+      return printerStore.isSelectedPrinter(printerId.value);
+    });
+
+    const unselected = computed(() => {
+      return printerStore.selectedPrinters?.length && !selected.value;
+    });
+
+    const largeTilesEnabled = computed(() => {
+      return settingsStore.largeTiles;
+    });
+
+    const printerState = computed(() => {
+      if (!printerId.value) return;
+      const printer = printerStore.printer(printerId.value);
       if (!printer) return;
 
-      const printerEvents = this.printerStateStore.printerEventsById[this.printerId];
-      const socketState = this.printerStateStore.socketStatesById[this.printerId];
+      const printerEvents = printerStateStore.printerEventsById[printerId.value];
+      const socketState = printerStateStore.socketStatesById[printerId.value];
       const states = interpretStates(printer, socketState, printerEvents);
+      console.log("states", states);
       return states;
-    },
-    printerStateColor() {
-      const states = this.printerState;
-      if (!states) return defaultColor;
+    });
+
+    const printerStateColor = computed(() => {
+      const states = printerState.value;
+      if (!states) {
+        return defaultColor;
+      }
+      console.log("Returning", states.rgb, defaultColor);
       return states.rgb || defaultColor;
-    },
-    currentJob() {
-      if (!this.printerId) return;
-      return this.printerStateStore.printerJobsById[this.printerId];
-    },
-    currentPrintingFilePath() {
-      if (!this.printerId) return;
-      return this.printerStateStore.printingFilePathsByPrinterId[this.printerId];
-    },
-  },
-  methods: {
-    clickInfo() {
-      this.printerStore.setSideNavPrinter(this.printer);
-    },
-    async clickRefreshSocket() {
-      if (!this.printerId) return;
-      await PrintersService.refreshSocket(this.printerId);
-      this.snackbar.openInfoMessage({
+    });
+
+    const currentJob = computed(() => {
+      if (!printerId.value) return;
+      return printerStateStore.printerJobsById[printerId.value];
+    });
+
+    const currentPrintingFilePath = computed(() => {
+      if (!printerId.value) return;
+      return printerStateStore.printingFilePathsByPrinterId[printerId.value];
+    });
+
+    const clickInfo = () => {
+      printerStore.setSideNavPrinter(props.printer);
+    };
+
+    const clickRefreshSocket = async () => {
+      if (!printerId.value) return;
+      await PrintersService.refreshSocket(printerId.value);
+      snackbar.openInfoMessage({
         title: "Refreshing OctoPrint connection state",
       });
-    },
-    clickOpenPrinterURL() {
-      if (!this.printer) return;
-      PrintersService.openPrinterURL(this.printer.printerURL);
-    },
-    clickOpenSettings() {
-      this.printerStore.setUpdateDialogPrinter(this.printer);
-      this.dialogsStore.openDialogWithContext(DialogName.AddOrUpdatePrinterDialog);
-    },
-    async clickEmergencyStop() {
-      if (!this.printerId) return;
+    };
+
+    const clickOpenPrinterURL = () => {
+      if (!props.printer) return;
+      PrintersService.openPrinterURL(props.printer.printerURL);
+    };
+
+    const clickOpenSettings = () => {
+      printerStore.setUpdateDialogPrinter(props.printer);
+      addOrUpdateDialog.openDialog();
+    };
+
+    const clickOpenPrinterControlDialog = async () => {
+      if (!printerId.value) {
+        throw new Error("PrinterId not set, cant open dialog");
+      }
+
+      await controlDialog.openDialog({ printerId });
+    };
+
+    const clickEmergencyStop = async () => {
+      if (!printerId.value) return;
       if (
         confirm("Are you sure to abort the print in Emergency Stop mode? Please reconnect after.")
       ) {
-        await CustomGcodeService.postEmergencyM112Command(this.printerId);
+        await CustomGcodeService.postEmergencyM112Command(printerId.value);
       }
-    },
-    async clickConnectUsb() {
-      if (!this.printerId) return;
-      await PrintersService.sendPrinterConnectCommand(this.printerId!);
-    },
-    async selectOrUnplacePrinter() {
-      if (!this.printer || !this.printerId) return;
-      if (this.gridStore.gridEditMode) {
-        const floorId = this.floorStore.selectedFloor?.id;
-        if (!floorId) throw new Error("Cant clear printer, floor not selected");
-        await FloorService.deletePrinterFromFloor(floorId, this.printerId);
+    };
 
+    const clickConnectUsb = async () => {
+      if (!printerId.value) return;
+      await PrintersService.sendPrinterConnectCommand(printerId.value);
+    };
+
+    const selectOrUnplacePrinter = async () => {
+      if (!props.printer || !printerId.value) return;
+      if (gridStore.gridEditMode) {
+        const floorId = floorStore.selectedFloor?.id;
+        if (!floorId) throw new Error("Cant clear printer, floor not selected");
+        await FloorService.deletePrinterFromFloor(floorId, printerId.value);
         return;
       }
+      printerStore.toggleSelectedPrinter(props.printer);
+    };
 
-      this.printerStore.toggleSelectedPrinter(this.printer);
-    },
+    return {
+      selected,
+      unselected,
+      largeTilesEnabled,
+      printerState,
+      printerStateColor,
+      currentJob,
+      currentPrintingFilePath,
+      gridStore,
+      printerStateStore,
+      clickInfo,
+      clickRefreshSocket,
+      clickOpenPrinterControlDialog,
+      clickOpenPrinterURL,
+      clickOpenSettings,
+      clickEmergencyStop,
+      clickConnectUsb,
+      selectOrUnplacePrinter,
+    };
   },
 });
 </script>

From b72da05526b2e9f1ad16bec837f637969085f878 Mon Sep 17 00:00:00 2001
From: David Zwart <david@visionintellilgence.ai>
Date: Wed, 14 Feb 2024 23:26:17 +0100
Subject: [PATCH 2/5] feat: printer control only for server with capability

---
 .../PrinterGrid/PrinterGridTile.vue           | 23 +++++++++++++++++--
 src/models/server/features.model.ts           |  2 ++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/PrinterGrid/PrinterGridTile.vue b/src/components/PrinterGrid/PrinterGridTile.vue
index c848423d..1f2f8cea 100644
--- a/src/components/PrinterGrid/PrinterGridTile.vue
+++ b/src/components/PrinterGrid/PrinterGridTile.vue
@@ -49,6 +49,14 @@
               <v-icon>info</v-icon>
               &nbsp;Details
             </v-list-item>
+            <v-list-item
+              v-if="hasPrinterControlFeature"
+              :close-on-click="true"
+              @click="clickOpenPrinterControlDialog()"
+            >
+              <v-icon>open_with</v-icon>
+              &nbsp;Control
+            </v-list-item>
             <v-list-item :close-on-click="true" @click="clickOpenPrinterURL()">
               <v-icon>directions</v-icon>
               &nbsp;Visit OctoPrint
@@ -68,7 +76,8 @@
           <v-btn
             v-if="
               !printerStateStore.isPrinterOperational(printer?.id) &&
-              printerStateStore.isApiResponding(printer?.id)
+              printerStateStore.isApiResponding(printer?.id) &&
+              feature
             "
             icon
             @click.prevent.stop="clickConnectUsb()"
@@ -77,7 +86,10 @@
           </v-btn>
 
           <!-- Emergency stop button -->
-          <v-tooltip v-if="printerStateStore.isPrinterOperational(printer?.id)" bottom>
+          <v-tooltip
+            v-if="hasPrinterControlFeature && printerStateStore.isPrinterOperational(printer?.id)"
+            bottom
+          >
             <template v-slot:activator="{ on, attrs }">
               <v-btn
                 elevation="4"
@@ -215,6 +227,7 @@ import { usePrinterStateStore } from "@/store/printer-state.store";
 import { PrinterDto } from "@/models/printers/printer.model";
 import { useSnackbar } from "@/shared/snackbar.composable";
 import { useDialog } from "@/shared/dialog.composable";
+import { useFeatureStore } from "@/store/features.store";
 
 const defaultColor = "rgba(100,100,100,0.1)";
 
@@ -229,6 +242,7 @@ export default defineComponent({
     const printerStore = usePrinterStore();
     const printerStateStore = usePrinterStateStore();
     const floorStore = useFloorStore();
+    const featureStore = useFeatureStore();
     const settingsStore = useSettingsStore();
     const gridStore = useGridStore();
     const controlDialog = useDialog(DialogName.PrinterControlDialog);
@@ -246,6 +260,10 @@ export default defineComponent({
       return printerStore.selectedPrinters?.length && !selected.value;
     });
 
+    const hasPrinterControlFeature = computed(() => {
+      return featureStore.hasFeature("printerControlApi");
+    });
+
     const largeTilesEnabled = computed(() => {
       return settingsStore.largeTiles;
     });
@@ -346,6 +364,7 @@ export default defineComponent({
       currentPrintingFilePath,
       gridStore,
       printerStateStore,
+      hasPrinterControlFeature,
       clickInfo,
       clickRefreshSocket,
       clickOpenPrinterControlDialog,
diff --git a/src/models/server/features.model.ts b/src/models/server/features.model.ts
index f70bd258..eee25dfb 100644
--- a/src/models/server/features.model.ts
+++ b/src/models/server/features.model.ts
@@ -15,6 +15,7 @@ export class FeaturesModel {
   batchTogglePrinterEnabled?: IFeatureFlag;
   cameraStream?: IFeatureFlag;
   printerGroupsApi?: IFeatureFlag;
+  printerControlApi?: IFeatureFlag;
 }
 
 export type TFeatureFlags = keyof FeaturesModel;
@@ -30,4 +31,5 @@ export const featureFlagsList: TFeatureFlags[] = [
   "batchTogglePrinterEnabled",
   "cameraStream",
   "printerGroupsApi",
+  "printerControlApi",
 ];

From 4820a24d87a28601a3f4ab9c3581eb156a6f26e0 Mon Sep 17 00:00:00 2001
From: David Zwart <david@visionintellilgence.ai>
Date: Wed, 14 Feb 2024 23:35:27 +0100
Subject: [PATCH 3/5] fix: remove old state logging, fix wrong logic

---
 src/components/PrinterGrid/PrinterGridTile.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/PrinterGrid/PrinterGridTile.vue b/src/components/PrinterGrid/PrinterGridTile.vue
index 1f2f8cea..3bc558e9 100644
--- a/src/components/PrinterGrid/PrinterGridTile.vue
+++ b/src/components/PrinterGrid/PrinterGridTile.vue
@@ -76,8 +76,7 @@
           <v-btn
             v-if="
               !printerStateStore.isPrinterOperational(printer?.id) &&
-              printerStateStore.isApiResponding(printer?.id) &&
-              feature
+              printerStateStore.isApiResponding(printer?.id)
             "
             icon
             @click.prevent.stop="clickConnectUsb()"
@@ -276,7 +275,6 @@ export default defineComponent({
       const printerEvents = printerStateStore.printerEventsById[printerId.value];
       const socketState = printerStateStore.socketStatesById[printerId.value];
       const states = interpretStates(printer, socketState, printerEvents);
-      console.log("states", states);
       return states;
     });
 
@@ -285,7 +283,6 @@ export default defineComponent({
       if (!states) {
         return defaultColor;
       }
-      console.log("Returning", states.rgb, defaultColor);
       return states.rgb || defaultColor;
     });
 

From c4e7b95ee6ceaeb52dc67f9e35f6245f5f1e0645 Mon Sep 17 00:00:00 2001
From: David Zwart <david@visionintellilgence.ai>
Date: Wed, 14 Feb 2024 23:39:18 +0100
Subject: [PATCH 4/5] feat: introduce multiplier

---
 .../Generic/Dialogs/PrinterControlDialog.vue  | 20 +++++++++++++++----
 .../PrinterGrid/PrinterGridTile.vue           |  3 +--
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/Generic/Dialogs/PrinterControlDialog.vue b/src/components/Generic/Dialogs/PrinterControlDialog.vue
index 52e3993c..c93f085d 100644
--- a/src/components/Generic/Dialogs/PrinterControlDialog.vue
+++ b/src/components/Generic/Dialogs/PrinterControlDialog.vue
@@ -59,6 +59,16 @@
               </v-btn>
             </v-col>
           </v-row>
+          <v-row>
+            <v-col cols="12">
+              <v-btn-toggle v-model="multiplier">
+                <v-btn :value="0.1">0.1</v-btn>
+                <v-btn :value="1">1</v-btn>
+                <v-btn :value="10">10</v-btn>
+                <v-btn :value="100">100</v-btn>
+              </v-btn-toggle>
+            </v-col>
+          </v-row>
         </v-container>
       </v-card-text>
       <v-card-actions>
@@ -72,7 +82,7 @@
 <script lang="ts" setup>
 import { useDialog } from "@/shared/dialog.composable";
 import { DialogName } from "@/components/Generic/Dialogs/dialog.constants";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { usePrinterStore } from "@/store/printer.store";
 import { IdType } from "@/utils/id.type";
 import { usePrinterStateStore } from "@/store/printer-state.store";
@@ -88,6 +98,8 @@ const printer = computed(() => {
   return printerStore.printer(printerId.value);
 });
 
+const multiplier = ref<number>(10);
+
 const printerTemps = computed(() => {
   const events = printerStateStore.printerEventsById[printerId.value];
   if (
@@ -101,9 +113,9 @@ const printerTemps = computed(() => {
 
 const jogPrinterHead = async (x: number, y: number, z: number) => {
   await PrintersService.sendPrinterJogCommand(printerId.value, {
-    x,
-    y,
-    z,
+    x: x * multiplier.value,
+    y: y * multiplier.value,
+    z: z * multiplier.value,
   });
 };
 
diff --git a/src/components/PrinterGrid/PrinterGridTile.vue b/src/components/PrinterGrid/PrinterGridTile.vue
index 3bc558e9..cf68efc0 100644
--- a/src/components/PrinterGrid/PrinterGridTile.vue
+++ b/src/components/PrinterGrid/PrinterGridTile.vue
@@ -274,8 +274,7 @@ export default defineComponent({
 
       const printerEvents = printerStateStore.printerEventsById[printerId.value];
       const socketState = printerStateStore.socketStatesById[printerId.value];
-      const states = interpretStates(printer, socketState, printerEvents);
-      return states;
+      return interpretStates(printer, socketState, printerEvents);
     });
 
     const printerStateColor = computed(() => {

From b97050706f7e4a4f14ad2bad4bd2ba95303e5e53 Mon Sep 17 00:00:00 2001
From: David Zwart <david@visionintellilgence.ai>
Date: Wed, 14 Feb 2024 23:50:51 +0100
Subject: [PATCH 5/5] fix: home separate axes xy or z

---
 src/backend/printers.service.ts                        |  7 ++-----
 .../Generic/Dialogs/PrinterControlDialog.vue           | 10 +++++++---
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/backend/printers.service.ts b/src/backend/printers.service.ts
index e08a2a54..59cd17d2 100644
--- a/src/backend/printers.service.ts
+++ b/src/backend/printers.service.ts
@@ -79,13 +79,10 @@ export class PrintersService extends BaseService {
     return await this.postApi(path, amounts);
   }
 
-  static async sendPrinterHomeCommand(
-    printerId: IdType,
-    amounts: { x?: number; y?: number; z?: number }
-  ) {
+  static async sendPrinterHomeCommand(printerId: IdType, axes: string[]) {
     const path = ServerApi.printerHomeCommandRoute(printerId);
 
-    return await this.postApi(path, amounts);
+    return await this.postApi(path, axes);
   }
 
   static async createPrinter(printer: CreatePrinter) {
diff --git a/src/components/Generic/Dialogs/PrinterControlDialog.vue b/src/components/Generic/Dialogs/PrinterControlDialog.vue
index c93f085d..011bd0ba 100644
--- a/src/components/Generic/Dialogs/PrinterControlDialog.vue
+++ b/src/components/Generic/Dialogs/PrinterControlDialog.vue
@@ -30,7 +30,7 @@
               <v-btn class="primary" outlined x-large @click="jogPrinterHead(-1, 0, 0)">
                 <v-icon>west</v-icon>
               </v-btn>
-              <v-btn class="primary" outlined x-large @click="homeAxes()">
+              <v-btn class="primary" outlined x-large @click="homeAxes(['x', 'y'])">
                 <v-icon>home</v-icon>
               </v-btn>
               <v-btn class="primary" outlined x-large @click="jogPrinterHead(1, 0, 0)">
@@ -54,6 +54,10 @@
                 <v-icon>north</v-icon>
               </v-btn>
               <br />
+              <v-btn class="primary" outlined x-large @click="homeAxes(['z'])">
+                <v-icon>home</v-icon>
+              </v-btn>
+              <br />
               <v-btn class="primary" outlined x-large @click="jogPrinterHead(1, 0, 1)">
                 <v-icon>south</v-icon>
               </v-btn>
@@ -119,8 +123,8 @@ const jogPrinterHead = async (x: number, y: number, z: number) => {
   });
 };
 
-const homeAxes = async () => {
-  await PrintersService.sendPrinterHomeCommand(printerId.value, {});
+const homeAxes = async (axes: string[]) => {
+  await PrintersService.sendPrinterHomeCommand(printerId.value, axes);
 };
 
 const closeDialog = () => {