Merge pull request #1018 from fdm-monster/feat/printer-control-dialog

Feat/printer control dialog

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,

src/backend/printers.service.ts

@@ -70,6 +70,21 @@ 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, axes: string[]) {
+    const path = ServerApi.printerHomeCommandRoute(printerId);
+
+    return await this.postApi(path, axes);
+  }
+
   static async createPrinter(printer: CreatePrinter) {
     const path = ServerApi.printerRoute;
 

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`;
 

src/components/Generic/Dialogs/PrinterControlDialog.vue

@@ -0,0 +1,133 @@
+<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(['x', 'y'])">
+                <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="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>
+            </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>
+        <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, ref } 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 multiplier = ref<number>(10);
+
+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: x * multiplier.value,
+    y: y * multiplier.value,
+    z: z * multiplier.value,
+  });
+};
+
+const homeAxes = async (axes: string[]) => {
+  await PrintersService.sendPrinterHomeCommand(printerId.value, axes);
+};
+
+const closeDialog = () => {
+  dialog.closeDialog();
+};
+</script>

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",
 }