feat(ui): Add FORCE_MOVE support to tool controls (#750)

Signed-off-by: Kerim Bilgic <[email protected]>
Co-authored-by: Pedro Lamas <[email protected]>

src/components/settings/ToolheadSettings.vue

@@ -164,6 +164,18 @@
 
       <v-divider />
 
+      <template v-if="printerSupportsForceMove">
+        <app-setting :title="$t('app.setting.label.force_move_toggle_warning')">
+          <v-switch
+            v-model="forceMoveToggleWarning"
+            hide-details
+            class="mt-0 mb-4"
+          />
+        </app-setting>
+
+        <v-divider />
+      </template>
+
       <app-setting :title="$t('app.setting.label.reset')">
         <app-btn
           outlined
@@ -341,6 +353,22 @@ export default class ToolHeadSettings extends Vue {
     })
   }
 
+  get printerSupportsForceMove () {
+    return this.$store.getters['printer/getPrinterSettings']('force_move.enable_force_move') ?? false
+  }
+
+  get forceMoveToggleWarning () {
+    return this.$store.state.config.uiSettings.general.forceMoveToggleWarning
+  }
+
+  set forceMoveToggleWarning (value: boolean) {
+    this.$store.dispatch('config/saveByPath', {
+      path: 'uiSettings.general.forceMoveToggleWarning',
+      value,
+      server: true
+    })
+  }
+
   handleReset () {
     let value = defaultState().uiSettings.general
     const current = this.$store.state.config.uiSettings.general

src/components/widgets/toolhead/Toolhead.vue

@@ -7,12 +7,15 @@
     >
       <v-col class="controls-wrapper">
         <extruder-selection v-if="multipleExtruders" />
-        <toolhead-moves v-if="!printerPrinting" />
+        <toolhead-moves
+          v-if="!printerPrinting"
+          :force-move="forceMove"
+        />
         <z-height-adjust v-if="printerPrinting" />
       </v-col>
 
       <v-col class="controls-wrapper">
-        <toolhead-position />
+        <toolhead-position :force-move="forceMove" />
         <extruder-moves v-if="!printerPrinting" />
         <z-height-adjust v-if="!printerPrinting" />
       </v-col>
@@ -25,7 +28,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins, Prop } from 'vue-property-decorator'
 import StateMixin from '@/mixins/state'
 import ToolheadMoves from '@/components/widgets/toolhead/ToolheadMoves.vue'
 import ExtruderMoves from '@/components/widgets/toolhead/ExtruderMoves.vue'
@@ -47,6 +50,9 @@ import PressureAdvanceAdjust from '@/components/widgets/toolhead/PressureAdvance
   }
 })
 export default class Toolhead extends Mixins(StateMixin) {
+  @Prop({ type: Boolean, default: false })
+  public forceMove!: boolean
+
   get multipleExtruders () {
     return this.$store.getters['printer/getExtruders'].length > 1
   }

src/components/widgets/toolhead/ToolheadCard.vue

@@ -30,6 +30,16 @@
 
     <template #menu>
       <app-btn-collapse-group :collapsed="menuCollapsed">
+        <app-btn
+          v-if="printerSupportsForceMove"
+          :elevation="2"
+          small
+          class="ml-1"
+          :color="forceMove ? 'error' : undefined"
+          @click="toggleForceMove"
+        >
+          {{ $t('app.tool.tooltip.force_move') }}
+        </app-btn>
         <app-btn
           :elevation="2"
           :disabled="!klippyReady || printerPrinting"
@@ -86,7 +96,7 @@
       </app-btn-collapse-group>
     </template>
 
-    <toolhead />
+    <toolhead :force-move="forceMove" />
   </collapsable-card>
 </template>
 
@@ -102,6 +112,8 @@ import Toolhead from '@/components/widgets/toolhead/Toolhead.vue'
   }
 })
 export default class ToolheadCard extends Mixins(StateMixin, ToolheadMixin) {
+  forceMove = false
+
   @Prop({ type: Boolean, default: false })
   public menuCollapsed!: boolean
 
@@ -124,5 +136,24 @@ export default class ToolheadCard extends Mixins(StateMixin, ToolheadMixin) {
   get printerSupportsBedScrewsCalculate (): boolean {
     return 'screws_tilt_adjust' in this.printerSettings
   }
+
+  get printerSupportsForceMove () {
+    return this.printerSettings.force_move?.enable_force_move ?? false
+  }
+
+  async toggleForceMove () {
+    if (!this.forceMove && this.$store.state.config.uiSettings.general.forceMoveToggleWarning) {
+      const result = await this.$confirm(
+        this.$tc('app.general.simple_form.msg.confirm_forcemove_toggle'),
+        { title: this.$tc('app.general.label.confirm'), color: 'card-heading', icon: '$warning' }
+      )
+
+      if (!result) {
+        return
+      }
+    }
+
+    this.forceMove = !this.forceMove
+  }
 }
 </script>

src/components/widgets/toolhead/ToolheadMoves.vue

@@ -10,8 +10,8 @@
         class="ml-12 mr-12"
       >
         <app-btn-toolhead-move
-          :color="(yHomed) ? 'primary' : undefined"
-          :disabled="!yHomed || !klippyReady"
+          :color="axisButtonColor(yHomed)"
+          :disabled="axisButtonDisabled(yHomed)"
           icon="$up"
           @click="sendMoveGcode('Y', toolheadMoveLength)"
         />
@@ -21,8 +21,8 @@
         class="ml-2"
       >
         <app-btn-toolhead-move
-          :color="(zHomed) ? 'primary' : undefined"
-          :disabled="!zHomed || !klippyReady"
+          :color="axisButtonColor(zHomed)"
+          :disabled="axisButtonDisabled(zHomed)"
           icon="$up"
           @click="sendMoveGcode('Z', toolheadMoveLength)"
         />
@@ -50,8 +50,8 @@
     >
       <v-col cols="auto">
         <app-btn-toolhead-move
-          :color="(xHomed) ? 'primary' : undefined"
-          :disabled="!xHomed || !klippyReady"
+          :color="axisButtonColor(xHomed)"
+          :disabled="axisButtonDisabled(xHomed)"
           icon="$left"
           @click="sendMoveGcode('X', toolheadMoveLength, true)"
         />
@@ -75,8 +75,8 @@
         justify="end"
       >
         <app-btn-toolhead-move
-          :color="(xHomed) ? 'primary' : undefined"
-          :disabled="!xHomed || !klippyReady"
+          :color="axisButtonColor(xHomed)"
+          :disabled="axisButtonDisabled(xHomed)"
           icon="$right"
           @click="sendMoveGcode('X', toolheadMoveLength)"
         />
@@ -121,8 +121,8 @@
         class="ml-12 mr-7"
       >
         <app-btn-toolhead-move
-          :color="(yHomed) ? 'primary' : undefined"
-          :disabled="!yHomed || !klippyReady"
+          :color="axisButtonColor(xHomed)"
+          :disabled="axisButtonDisabled(yHomed)"
           icon="$down"
           @click="sendMoveGcode('Y', toolheadMoveLength, true)"
         />
@@ -132,8 +132,8 @@
         class="ml-7"
       >
         <app-btn-toolhead-move
-          :color="(zHomed) ? 'primary' : undefined"
-          :disabled="!zHomed || !klippyReady"
+          :color="axisButtonColor(zHomed)"
+          :disabled="axisButtonDisabled(yHomed)"
           icon="$down"
           @click="sendMoveGcode('Z', toolheadMoveLength, true)"
         />
@@ -183,7 +183,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins, Prop } from 'vue-property-decorator'
 import StateMixin from '@/mixins/state'
 import ToolheadMixin from '@/mixins/toolhead'
 import { Waits } from '@/globals'
@@ -194,6 +194,9 @@ export default class ToolheadMoves extends Mixins(StateMixin, ToolheadMixin) {
   moveLength = ''
   fab = false
 
+  @Prop({ type: Boolean, default: false })
+  public forceMove!: boolean
+
   get kinematics () {
     return this.$store.getters['printer/getPrinterSettings']('printer.kinematics') || ''
   }
@@ -222,6 +225,16 @@ export default class ToolheadMoves extends Mixins(StateMixin, ToolheadMixin) {
     this.moveLength = val
   }
 
+  axisButtonColor (axisHomed: boolean) {
+    if (this.forceMove) return 'error'
+
+    return axisHomed ? 'primary' : undefined
+  }
+
+  axisButtonDisabled (axisHomed: boolean) {
+    return !this.klippyReady || (!axisHomed && !this.forceMove)
+  }
+
   /**
    * Send a move gcode script.
    */
@@ -235,9 +248,13 @@ export default class ToolheadMoves extends Mixins(StateMixin, ToolheadMixin) {
       ? '-' + distance
       : distance
 
-    this.sendGcode(`G91
+    if (this.forceMove) {
+      this.sendGcode(`FORCE_MOVE STEPPER=stepper_${axis} DISTANCE=${distance} VELOCITY=${rate}`)
+    } else {
+      this.sendGcode(`G91
       G1 ${axis}${distance} F${rate * 60}
       G90`)
+    }
   }
 }
 </script>

src/components/widgets/toolhead/ToolheadPosition.vue

@@ -10,13 +10,14 @@
         class="pr-1"
       >
         <v-text-field
+          :color="(forceMove) ? 'error' : 'primary'"
           :label="`X [ ${livePosition[0].toFixed(2)} ]`"
           outlined
           hide-details
           dense
           class="v-input--width-small"
           type="number"
-          :disabled="!xHomed"
+          :disabled="!xHomed && !forceMove"
           :readonly="printerBusy"
           :value="(useGcodeCoords) ? gcodePosition[0].toFixed(2) : toolheadPosition[0].toFixed(2)"
           @change="moveTo('X', $event)"
@@ -27,13 +28,14 @@
         class="pr-1 pl-1"
       >
         <v-text-field
+          :color="(forceMove) ? 'error' : 'primary'"
           :label="`Y [ ${livePosition[1].toFixed(2)} ]`"
           outlined
           hide-details
           dense
           class="v-input--width-small"
           type="number"
-          :disabled="!yHomed"
+          :disabled="!yHomed && !forceMove"
           :readonly="printerBusy"
           :value="(useGcodeCoords) ? gcodePosition[1].toFixed(2) : toolheadPosition[1].toFixed(2)"
           @change="moveTo('Y', $event)"
@@ -44,13 +46,14 @@
         class="pr-1 pl-1"
       >
         <v-text-field
+          :color="(forceMove) ? 'error' : 'primary'"
           :label="`Z [ ${livePosition[2].toFixed(2)} ]`"
           outlined
           hide-details
           dense
           class="v-input--width-small"
           type="number"
-          :disabled="!zHomed"
+          :disabled="!zHomed && !forceMove"
           :readonly="printerBusy"
           :value="(useGcodeCoords) ? gcodePosition[2].toFixed(2) : toolheadPosition[2].toFixed(2)"
           @change="moveTo('Z', $event)"
@@ -127,12 +130,15 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins, Prop } from 'vue-property-decorator'
 import StateMixin from '@/mixins/state'
 import ToolheadMixin from '@/mixins/toolhead'
 
 @Component({})
 export default class ToolheadPosition extends Mixins(StateMixin, ToolheadMixin) {
+  @Prop({ type: Boolean, default: false })
+  public forceMove!: boolean
+
   get gcodePosition () {
     return this.$store.state.printer.printer.gcode_move.gcode_position
   }
@@ -178,8 +184,12 @@ export default class ToolheadPosition extends Mixins(StateMixin, ToolheadMixin)
       const rate = (axis.toLowerCase() === 'z')
         ? this.$store.state.config.uiSettings.general.defaultToolheadZSpeed
         : this.$store.state.config.uiSettings.general.defaultToolheadXYSpeed
-      this.sendGcode(`G90
+      if (this.forceMove) {
+        this.sendGcode(`FORCE_MOVE STEPPER=stepper_${axis.toLowerCase()} DISTANCE=${pos} VELOCITY=${rate}`)
+      } else {
+        this.sendGcode(`G90
         G1 ${axis}${pos} F${rate * 60}`)
+      }
     }
   }
 }

src/locales/en.yaml

@@ -298,6 +298,7 @@ app:
       msg:
         confirm: Are you sure?
         confirm_exclude_object: Are you sure you want to exclude this object from printing?
+        confirm_forcemove_toggle: Are you sure? This can damage the printer.
         confirm_reboot_host: Are you sure? This will reboot your host system.
         confirm_shutdown_host: Are you sure? This will shutdown your host system.
         confirm_service_restart: Are you sure you want to restart the %{name} service?
@@ -464,6 +465,7 @@ app:
       type: Type
       z_adjust_values: Z Adjust values
       date_time_format: Date and Time format
+      force_move_toggle_warning: Require confirm when activating force_move
     timer_options:
       duration: Duration only
       filament: Filament Estimation
@@ -530,6 +532,7 @@ app:
       relative_positioning: Relative Positioning
       screws_tilt_calculate: Screws_Tilt_Calculate
       bed_screws_adjust: BED_SCREWS_ADJUST
+      force_move: FORCE_MOVE
   version:
     btn:
       check_for_updates: Check for updates

src/store/config/index.ts

@@ -66,7 +66,8 @@ export const defaultState = (): ConfigState => {
         showBarometricPressure: true,
         flipConsoleLayout: false,
         cameraFullscreenAction: 'embed',
-        topNavPowerToggle: null
+        topNavPowerToggle: null,
+        forceMoveToggleWarning: true
       },
       theme: {
         isDark: true,

src/store/config/types.ts

@@ -59,6 +59,7 @@ export interface GeneralConfig {
   flipConsoleLayout: boolean;
   cameraFullscreenAction: CameraFullscreenAction;
   topNavPowerToggle: null | string;
+  forceMoveToggleWarning: boolean;
 }
 
 export type CameraFullscreenAction = 'embed' | 'rawstream';