Rebuilt the "Set Position" and "Manually Home" dialogs in Svelte

src/js/control-view.js

@@ -20,22 +20,6 @@ module.exports = {
       history: [],
       speed_override: 1,
       feed_override: 1,
-      manual_home: {
-        x: false,
-        y: false,
-        z: false,
-        a: false,
-        b: false,
-        c: false
-      },
-      position_msg: {
-        x: false,
-        y: false,
-        z: false,
-        a: false,
-        b: false,
-        c: false
-      },
       jog_incr_amounts: {
         "METRIC": {
           fine: 0.1,
@@ -50,7 +34,6 @@ module.exports = {
           large: 5,
         }
       },
-      axis_position: 0,
       jog_incr: localStorage.getItem("jog_incr") || 'small',
       jog_step: cookie.get_bool('jog-step'),
       jog_adjust: parseInt(cookie.get('jog-adjust', 2)),
@@ -261,7 +244,11 @@ module.exports = {
     SvelteComponents.registerControllerMethods({
       stop: (...args) => this.stop(...args),
       send: (...args) => this.send(...args),
-      goto_zero: (...args) => this.goto_zero(...args)
+      goto_zero: (...args) => this.goto_zero(...args),
+      isAxisHomed: (axis) => this[axis].homed,
+      unhome: (...args) => this.unhome(...args),
+      set_position: (...args) => this.set_position(...args),
+      set_home: (...args) => this.set_home(...args)
     });
   },
 
@@ -433,23 +420,20 @@ module.exports = {
       } else if (this[axis].homingMode != 'manual') {
         api.put('home/' + axis);
       } else {
-        this.manual_home[axis] = true;
+        SvelteComponents.showDialog("ManualHomeAxis", { axis });
       }
     },
 
     set_home: function (axis, position) {
-      this.manual_home[axis] = false;
       api.put('home/' + axis + '/set', { position: parseFloat(position) });
     },
 
     unhome: function (axis) {
-      this.position_msg[axis] = false;
       api.put('home/' + axis + '/clear');
     },
 
     show_set_position: function (axis) {
-      this.axis_position = 0;
+      SvelteComponents.showDialog("SetAxisPosition", { axis });
-      this.position_msg[axis] = true;
     },
 
     show_toolpath_msg: function (axis) {
@@ -457,7 +441,6 @@ module.exports = {
     },
 
     set_position: function (axis, position) {
-      this.position_msg[axis] = false;
       api.put('position/' + axis, { 'position': parseFloat(position) });
     },
 

src/pug/templates/control-view.pug

@@ -150,60 +150,18 @@ script#control-view-template(type="text/x-template")
                 th.actions
                   button.pure-button(:disabled="!can_set_axis",
                     title=`Set {{'${axis}' | upper}} axis position.`,
-                    @click=`show_set_position('${axis}')`,style="height:60px;width:60px")
+                    @click=`show_set_position('${axis}')`, style="height:60px;width:60px")
                     .fa.fa-cog
 
                   button.pure-button(:disabled="!can_set_axis",
                     title=`Zero {{'${axis}' | upper}} axis offset.`,
-                   @click=`zero('${axis}')`,style="height:60px;width:60px")
+                   @click=`zero('${axis}')`, style="height:60px;width:60px")
                     .fa.fa-map-marker
 
                   button.pure-button(:disabled="!is_idle", @click=`home('${axis}')`,
-                    title=`Home {{'${axis}' | upper}} axis.`,style="height:60px;width:60px")
+                    title=`Home {{'${axis}' | upper}} axis.`, style="height:60px;width:60px")
                     .fa.fa-home
 
-                  message(:show.sync=`position_msg['${axis}']`)
-                    h3(slot="header") Set {{'#{axis}' | upper}} axis position
-
-                    div(slot="body")
-                      .pure-form
-                        .pure-control-group
-                          label Position
-                          input(v-model="axis_position",
-                            @keyup.enter=`set_position('${axis}', axis_position)`)
-                      p
-
-                    div(slot="footer")
-                      button.pure-button(@click=`position_msg['${axis}'] = false`)
-                        | Cancel
-
-                      button.pure-button(v-if=`${axis}.homed`,
-                        @click=`unhome('${axis}')`) Unhome
-
-                      button.pure-button.button-success(
-                        @click=`set_position('${axis}', axis_position)`) Set
-
-                  message(:show.sync=`manual_home['${axis}']`)
-                    h3(slot="header") Manually home {{'#{axis}' | upper}} axis
-
-                    div(slot="body")
-                      p Set axis absolute position.
-
-                      .pure-form
-                        .pure-control-group
-                          label Absolute
-                          input(v-model="axis_position",
-                            @keyup.enter=`set_home('${axis}', axis_position)`)
-
-                      p
-
-                    div(slot="footer")
-                      button.pure-button(@click=`manual_home['${axis}'] = false`)
-                        | Cancel
-
-                      button.pure-button.button-success(
-                        title=`Home {{'${axis}' | upper}} axis.`,
-                        @click=`set_home('${axis}', axis_position)`) Set
       
       tr(style="vertical-align: top;")
         td

src/svelte-components/src/dialogs/DialogHost.svelte

@@ -5,6 +5,8 @@
   import ScreenRotationDialog from "$dialogs/ScreenRotationDialog.svelte";
   import UploadDialog from "$dialogs/UploadDialog.svelte";
   import SetTimeDialog from "./SetTimeDialog.svelte";
+  import ManualHomeAxisDialog from "./ManualHomeAxisDialog.svelte";
+  import SetAxisPositionDialog from "./SetAxisPositionDialog.svelte";
 
   const HomeMachineDialogProps = writable<HomeMachineDialogPropsType>();
   type HomeMachineDialogPropsType = {
@@ -35,6 +37,18 @@
     open: boolean;
   };
 
+  const ManualHomeAxisDialogProps = writable<ManualHomeAxisDialogPropsType>();
+  type ManualHomeAxisDialogPropsType = {
+    open: boolean;
+    axis: string;
+  };
+
+  const SetAxisPositionDialogProps = writable<SetAxisPositionDialogPropsType>();
+  type SetAxisPositionDialogPropsType = {
+    open: boolean;
+    axis: string;
+  };
+
   export function showDialog(
     dialog: "HomeMachine",
     props: Omit<HomeMachineDialogPropsType, "open">
@@ -60,6 +74,16 @@
     props: Omit<SetTimeDialogPropsType, "open">
   );
 
+  export function showDialog(
+    dialog: "ManualHomeAxis",
+    props: Omit<ManualHomeAxisDialogPropsType, "open">
+  );
+
+  export function showDialog(
+    dialog: "SetAxisPosition",
+    props: Omit<SetAxisPositionDialogPropsType, "open">
+  );
+
   export function showDialog(dialog: string, props: any) {
     switch (dialog) {
       case "HomeMachine":
@@ -82,6 +106,14 @@
         SetTimeDialogProps.set({ ...props, open: true });
         break;
 
+      case "ManualHomeAxis":
+        ManualHomeAxisDialogProps.set({ ...props, open: true });
+        break;
+
+      case "SetAxisPosition":
+        SetAxisPositionDialogProps.set({ ...props, open: true });
+        break;
+
       default:
         throw new Error(`Unknown dialog '${dialog}`);
     }
@@ -93,3 +125,5 @@
 <ScreenRotationDialog {...$ScreenRotationDialogProps} />
 <UploadDialog {...$UploadDialogProps} />
 <SetTimeDialog {...$SetTimeDialogProps} />
+<ManualHomeAxisDialog {...$ManualHomeAxisDialogProps} />
+<SetAxisPositionDialog {...$SetAxisPositionDialogProps} />

src/svelte-components/src/dialogs/HomeMachineDialog.svelte

@@ -8,6 +8,7 @@
 
 <Dialog
   bind:open
+  scrimClickAction=""
   aria-labelledby="home-machine-dialog-title"
   aria-describedby="home-machine-dialog-content"
 >

src/svelte-components/src/dialogs/ManualHomeAxisDialog.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import Dialog, { Title, Content, Actions } from "@smui/dialog";
+  import TextField from "@smui/textfield";
+  import Button, { Label } from "@smui/button";
+  import { ControllerMethods } from "$lib/RegisterControllerMethods";
+
+  export let open: boolean;
+  export let axis = "";
+
+  let value = 0;
+
+  function onConfirm() {
+    ControllerMethods.set_home(axis, value);
+  }
+</script>
+
+<Dialog
+  bind:open
+  scrimClickAction=""
+  aria-labelledby="manual-home-axis-dialog-title"
+  aria-describedby="manual-home-axis-dialog-content"
+>
+  <Title id="manual-home-axis-dialog-title"
+    >Manually Home {axis.toUpperCase()} Axis</Title
+  >
+  <Content id="manual-home-axis-dialog-content">
+    <p>Set axis absolute position</p>
+
+    <TextField
+      label="Absolute"
+      type="number"
+      bind:value
+      variant="filled"
+      style="width: 100%;"
+    />
+  </Content>
+
+  <Actions>
+    <Button>
+      <Label>Cancel</Label>
+    </Button>
+    <Button defaultAction on:click={onConfirm}>
+      <Label>Set</Label>
+    </Button>
+  </Actions>
+</Dialog>

src/svelte-components/src/dialogs/SetAxisPositionDialog.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import Dialog, { Title, Content, Actions } from "@smui/dialog";
+  import TextField from "@smui/textfield";
+  import Button, { Label } from "@smui/button";
+  import { ControllerMethods } from "$lib/RegisterControllerMethods";
+
+  export let open: boolean;
+  export let axis = "";
+
+  let value = 0;
+  let homed = false;
+  let wasOpen = false;
+
+  $: if (open != wasOpen) {
+    if (open) {
+      homed = ControllerMethods.isAxisHomed(axis);
+    }
+
+    wasOpen = open;
+  }
+
+  function onUnhome() {
+    ControllerMethods.unhome(axis);
+  }
+
+  function onConfirm() {
+    ControllerMethods.set_position(axis, value);
+  }
+</script>
+
+<Dialog
+  bind:open
+  scrimClickAction=""
+  aria-labelledby="set-axis-position-dialog-title"
+  aria-describedby="set-axis-position-dialog-content"
+>
+  <Title id="set-axis-position-dialog-title"
+    >Set {axis.toUpperCase()} Axis Position</Title
+  >
+  <Content id="set-axis-position-dialog-content">
+    <TextField
+      label="Position"
+      type="number"
+      bind:value
+      spellcheck="false"
+      variant="filled"
+      style="width: 100%;"
+    />
+  </Content>
+
+  <Actions>
+    <Button>
+      <Label>Cancel</Label>
+    </Button>
+    {#if homed}
+      <Button on:click={onUnhome}>
+        <Label>Unhome</Label>
+      </Button>
+    {/if}
+    <Button defaultAction on:click={onConfirm}>
+      <Label>Set</Label>
+    </Button>
+  </Actions>
+</Dialog>

src/svelte-components/src/lib/RegisterControllerMethods.ts

@@ -3,6 +3,10 @@ type ControllerMethods = {
     send: (gcode: string) => void;
     goto_zero: (x: number, y: number, z: number, a: number) => void;
     dispatch: (event: string, ...args: any[]) => void;
+    isAxisHomed: (axis: string) => boolean;
+    unhome: (axis: string) => void;
+    set_position: (axis: string, value: number) => void;
+    set_home: (axis: string, value: number) => void;
 }
 
 export let ControllerMethods: ControllerMethods;