feat: hide axis controls during print (#1452)

Co-authored-by: Sebastian Duerholt <s.duerholt@gmail.com>

src/components/panels/ToolheadControlPanel.vue

@@ -94,11 +94,11 @@
         <!-- MOVE TO CONTROL -->
         <move-to-control class="py-0 pt-3"></move-to-control>
         <!-- AXIS CONTROL -->
-        <v-container>
+        <v-container v-if="axisControlVisible">
             <component :is="`${controlStyle}-control`"></component>
         </v-container>
         <!-- Z-OFFSET CONTROL -->
-        <v-divider></v-divider>
+        <v-divider :class="{ 'mt-3': !axisControlVisible }"></v-divider>
         <v-container>
             <zoffset-control></zoffset-control>
         </v-container>
@@ -164,5 +164,13 @@ export default class ToolheadControlPanel extends Mixins(BaseMixin, ControlMixin
     get speedFactor(): number {
         return this.$store.state.printer?.gcode_move?.speed_factor ?? 1
     }
+
+    get isPrinting() {
+        return ['printing'].includes(this.printer_state)
+    }
+
+    get axisControlVisible() {
+        return !(this.isPrinting && (this.$store.state.gui.control.hideDuringPrint ?? false))
+    }
 }
 </script>

src/components/settings/SettingsControlTab.vue

@@ -35,6 +35,12 @@
                         </settings-row>
                         <v-divider class="my-2"></v-divider>
                     </template>
+                    <settings-row
+                        :title="$t('Settings.ControlTab.HideDuringPrint').toString()"
+                        :dynamic-slot-width="true">
+                        <v-switch v-model="hideDuringPrint" hide-details class="mt-0"></v-switch>
+                    </settings-row>
+                    <v-divider class="my-2"></v-divider>
                     <settings-row
                         :title="$t('Settings.ControlTab.EnableXYHoming').toString()"
                         :dynamic-slot-width="true">
@@ -336,6 +342,14 @@ export default class SettingsControlTab extends Mixins(BaseMixin, ControlMixin)
         this.$store.dispatch('gui/saveSetting', { name: 'control.style', value: newVal })
     }
 
+    get hideDuringPrint(): Boolean {
+        return this.$store.state.gui.control.hideDuringPrint ?? false
+    }
+
+    set hideDuringPrint(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'control.hideDuringPrint', value: newVal })
+    }
+
     get actionOptions() {
         let actions = [
             {

src/locales/de.json

@@ -795,6 +795,7 @@
             "Circle": "Kreis",
             "Control": "Steuerung",
             "Cross": "Kreuz",
+            "HideDuringPrint": "Achsensteuerung während des Drucks ausblenden",
             "EnableXYHoming": "Aktiviere kombiniertes X & Y homing",
             "EstimatedExtrusionInfo": "Zeige Info zur geschätzten Extrusion",
             "EstimatedExtrusionInfoDescription": "Anzeigen/ausblenden der Info zur geschätzten Extrusion, basierend auf Extrusionmenge und Extrusionsgeschwindigkeit",

src/locales/en.json

@@ -796,6 +796,7 @@
             "Circle": "Circle",
             "Control": "Control",
             "Cross": "Cross",
+            "HideDuringPrint": "Hide axis controls during print",
             "EnableXYHoming": "Enable combined X & Y axes homing",
             "EstimatedExtrusionInfo": "Show estimated extrusion info",
             "EstimatedExtrusionInfoDescription": "Show / Hide info for estimated extrusions based on extrusion amount and feedrate",

src/store/gui/index.ts

@@ -30,6 +30,7 @@ export const getDefaultState = (): GuiState => {
         control: {
             style: 'bars',
             actionButton: null,
+            hideDuringPrint: false,
             enableXYHoming: false,
             feedrateXY: 100,
             stepsXY: [100, 10, 1],

src/store/gui/types.ts

@@ -20,6 +20,7 @@ export interface GuiState {
     console?: GuiConsoleState
     control: {
         style: 'bars' | 'circle' | 'cross'
+        hideDuringPrint: boolean
         actionButton: null | 'm84' | 'qgl' | 'ztilt'
         enableXYHoming: boolean
         feedrateXY: number