feat: toolhead control panel

src/components/inputs/MoveToInput.vue

@@ -0,0 +1,103 @@
+<template>
+    <v-text-field
+        v-model="position"
+        :label="`[ ${label} ]`"
+        :suffix="suffix"
+        :disabled="disabled"
+        :readonly="readonly"
+        :error="!validate"
+        hide-details="auto"
+        type="number"
+        hide-spin-buttons
+        outlined
+        reverse
+        dense
+        @blur="onBlur"
+        @focus="!readonly ? $event.target.select() : {}">
+        <template v-if="errorMsg.length" #append>
+            <v-tooltip top>
+                <template #activator="{ on, attrs }">
+                    <v-icon color="error" v-bind="attrs" v-on="on">{{ mdiAlert }}</v-icon>
+                </template>
+                <span>{{ errorMsg.join(', ') }}</span>
+            </v-tooltip>
+        </template>
+    </v-text-field>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop, VModel } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { mdiAlert } from '@mdi/js'
+
+@Component({
+    components: {},
+})
+export default class MoveToInput extends Mixins(BaseMixin) {
+    mdiAlert = mdiAlert
+
+    @VModel({ type: String })
+    declare position: string
+
+    @Prop({ type: String, required: true })
+    declare readonly currentPos: string
+
+    @Prop({ type: String, required: false })
+    declare readonly label: string
+
+    @Prop({ type: String, required: false })
+    declare readonly suffix: string
+
+    @Prop({ type: Number, required: true })
+    declare readonly positionMax: number
+
+    @Prop({ type: Number, required: true })
+    declare readonly positionMin: number
+
+    @Prop({ type: Boolean, required: false })
+    declare readonly disabled: boolean
+
+    @Prop({ type: Boolean, required: false })
+    declare readonly readonly: boolean
+
+    onBlur() {
+        if (!this.validate && this.position !== this.currentPos) {
+            this.position = this.currentPos
+            this.$emit('validate', { axis: this.suffix.toLowerCase(), valid: true })
+        }
+    }
+
+    get validate(): boolean {
+        const isValid =
+            this.position !== '' &&
+            parseFloat(this.position) <= this.positionMax &&
+            parseFloat(this.position) >= this.positionMin
+        this.$emit('validate', { axis: this.suffix.toLowerCase(), valid: isValid })
+        return isValid
+    }
+
+    get errorMsg() {
+        const errors = []
+        if (this.position === '') errors.push(this.$t('Panels.ToolheadControlPanel.Invalid'))
+        if (parseFloat(this.position) > this.positionMax || parseFloat(this.position) < this.positionMin)
+            errors.push(this.$t('Panels.ToolheadControlPanel.OutOfRange'))
+
+        return errors
+    }
+}
+</script>
+
+<style>
+label {
+    font-size: 14px !important;
+    color: rgba(255, 255, 255, 0.5) !important;
+}
+
+.v-input.error--text .v-input__slot {
+    padding-left: 3px !important;
+}
+
+.v-input.error--text .v-input__append-inner {
+    margin-right: 5px !important;
+}
+</style>

src/components/inputs/NumberInput.vue

@@ -105,7 +105,7 @@ export default class NumberInput extends Mixins(BaseMixin) {
     @Prop({ type: Number, required: false, default: 1 })
     declare readonly step: number
 
-    @Prop({ type: String, required: true })
+    @Prop({ type: String, required: false })
     declare readonly unit: string
 
     // spinner related props

src/components/mixins/control.ts

@@ -11,6 +11,10 @@ export default class ControlMixin extends Vue {
         return this.$store.state.printer?.toolhead?.homed_axes ?? ''
     }
 
+    get enableXYHoming(): boolean {
+        return this.$store.state.gui.control.enableXYHoming
+    }
+
     get feedrateXY() {
         return this.$store.state.gui.control?.feedrateXY ?? 100
     }
@@ -20,19 +24,27 @@ export default class ControlMixin extends Vue {
     }
 
     get existsQGL() {
-        if (!this.$store.state.printer.configfile?.settings) {
-            return false
-        }
-
-        return 'quad_gantry_level' in this.$store.state.printer.configfile.settings ?? false
+        return this.$store.getters['printer/existsQGL']
     }
 
     get existsZtilt() {
-        if (!this.$store.state.printer.configfile?.settings) {
-            return false
-        }
+        return this.$store.getters['printer/existsZtilt']
+    }
+
+    get existsBedTilt() {
+        return this.$store.getters['printer/existsBedTilt']
+    }
+
+    get existsBedScrews() {
+        return this.$store.getters['printer/existsBedScrews']
+    }
+
+    get existsDeltaCalibrate() {
+        return this.$store.getters['printer/existsDeltaCalibrate']
+    }
 
-        return 'z_tilt' in this.$store.state.printer.configfile.settings ?? false
+    get existsScrewsTilt() {
+        return this.$store.getters['printer/existsScrewsTilt']
     }
 
     get colorQuadGantryLevel() {
@@ -47,6 +59,10 @@ export default class ControlMixin extends Vue {
         return status ? 'primary' : 'warning'
     }
 
+    get defaultActionButton() {
+        return this.$store.getters['gui/getDefaultControlActionButton']
+    }
+
     doHome() {
         this.$store.dispatch('server/addEvent', { message: 'G28', type: 'command' })
         this.$socket.emit('printer.gcode.script', { script: 'G28' }, { loading: 'homeAll' })
@@ -62,6 +78,11 @@ export default class ControlMixin extends Vue {
         this.$socket.emit('printer.gcode.script', { script: 'G28 Y' }, { loading: 'homeY' })
     }
 
+    doHomeXY() {
+        this.$store.dispatch('server/addEvent', { message: 'G28 X Y', type: 'command' })
+        this.$socket.emit('printer.gcode.script', { script: 'G28 X Y' }, { loading: 'homeXY' })
+    }
+
     doHomeZ() {
         this.$store.dispatch('server/addEvent', { message: 'G28 Z', type: 'command' })
         this.$socket.emit('printer.gcode.script', { script: 'G28 Z' }, { loading: 'homeZ' })

src/components/panels/ControlPanel.vue

@@ -1,39 +0,0 @@
-<template>
-    <panel
-        v-if="klipperReadyForGui && ['standby', 'paused', 'complete', 'cancelled', 'error'].includes(printer_state)"
-        :icon="mdiGamepad"
-        :title="$t('Panels.ControlPanel.Headline').toString()"
-        :collapsible="true"
-        card-class="control-panel">
-        <v-container>
-            <control-panel-cross-control v-if="controlStyle === 'cross'"></control-panel-cross-control>
-            <control-panel-circle-control v-else-if="controlStyle === 'circle'"></control-panel-circle-control>
-            <control-panel-bars-control v-else></control-panel-bars-control>
-        </v-container>
-    </panel>
-</template>
-
-<script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator'
-import BaseMixin from '../mixins/base'
-import ControlPanelCrossControl from '@/components/panels/ControlPanelCrossControl.vue'
-import ControlPanelBarsControl from '@/components/panels/ControlPanelBarsControl.vue'
-import ControlPanelCircleControl from '@/components/panels/ControlPanelCircleControl.vue'
-import Panel from '@/components/ui/Panel.vue'
-import { mdiGamepad } from '@mdi/js'
-@Component({
-    components: {
-        Panel,
-        ControlPanelCircleControl,
-        ControlPanelBarsControl,
-        ControlPanelCrossControl,
-    },
-})
-export default class ControlPanel extends Mixins(BaseMixin) {
-    mdiGamepad = mdiGamepad
-
-    get controlStyle() {
-        return this.$store.state.gui.control.style ?? 'bars'
-    }
-}
-</script>