feat: add option to hide parts of the ToolheadPanel (#1621)

src/components/panels/ToolheadControlPanel.vue

@@ -6,8 +6,8 @@
         :collapsible="true"
         card-class="toolhead-control-panel">
         <!-- PANEL-HEADER 3-DOT-MENU -->
-        <template v-if="showButtons" #buttons>
-            <v-menu left offset-y :close-on-content-click="false" class="pa-0">
+        <template #buttons>
+            <v-menu v-if="showButtons" left offset-y :close-on-content-click="false" class="pa-0">
                 <template #activator="{ on, attrs }">
                     <v-btn icon tile v-bind="attrs" :disabled="['printing'].includes(printer_state)" v-on="on">
                         <v-icon>{{ mdiDotsVertical }}</v-icon>
@@ -82,21 +82,22 @@
                     </v-list-item>
                 </v-list>
             </v-menu>
+            <toolhead-panel-settings />
         </template>
         <!-- MOVE TO CONTROL -->
-        <move-to-control class="py-0 pt-3" />
+        <move-to-control />
         <!-- AXIS CONTROL -->
         <v-container v-if="axisControlVisible">
             <component :is="`${controlStyle}-control`" />
         </v-container>
         <!-- Z-OFFSET CONTROL -->
-        <v-divider :class="{ 'mt-3': !axisControlVisible }" />
-        <v-container>
+        <v-divider v-if="showZOffset" />
+        <v-container v-if="showZOffset">
             <zoffset-control />
         </v-container>
         <!-- SPEED FACTOR -->
-        <v-divider />
-        <v-container>
+        <v-divider v-if="showSpeedFactor" />
+        <v-container v-if="showSpeedFactor">
             <tool-slider
                 :label="$t('Panels.ToolheadControlPanel.SpeedFactor')"
                 :icon="mdiSpeedometer"
@@ -162,6 +163,8 @@ export default class ToolheadControlPanel extends Mixins(BaseMixin, ControlMixin
     }
 
     get axisControlVisible() {
+        if (!this.showControl) return false
+
         return !(this.isPrinting && (this.$store.state.gui.control.hideDuringPrint ?? false))
     }
 
@@ -170,5 +173,17 @@ export default class ToolheadControlPanel extends Mixins(BaseMixin, ControlMixin
 
         return this.existsBedScrews || this.existsBedTilt || this.existsDeltaCalibrate || this.existsScrewsTilt
     }
+
+    get showControl(): boolean {
+        return this.$store.state.gui.view.toolhead.showControl ?? true
+    }
+
+    get showZOffset(): boolean {
+        return this.$store.state.gui.view.toolhead.showZOffset ?? true
+    }
+
+    get showSpeedFactor(): boolean {
+        return this.$store.state.gui.view.toolhead.showSpeedFactor ?? true
+    }
 }
 </script>

src/components/panels/ToolheadControls/MoveToControl.vue

@@ -1,14 +1,14 @@
 <template>
-    <responsive
-        :breakpoints="{
-            xsmall: (el) => el.width <= 320,
-            small: (el) => el.width > 320 && el.width <= 460,
-            medium: (el) => el.width > 460 && el.width <= 560,
-            large: (el) => el.width > 560,
-        }">
-        <template #default="{ el }">
-            <v-container class="py-0">
-                <v-row class="flex-nowrap pb-1">
+    <v-container v-if="showCoordinates || showPosition" :class="containerClass">
+        <responsive
+            :breakpoints="{
+                xsmall: (el) => el.width <= 320,
+                small: (el) => el.width > 320 && el.width <= 460,
+                medium: (el) => el.width > 460 && el.width <= 560,
+                large: (el) => el.width > 560,
+            }">
+            <template #default="{ el }">
+                <v-row v-if="showPosition" class="flex-nowrap pb-1">
                     <v-col
                         :class="{
                             'col-5': el.is.small,
@@ -35,7 +35,7 @@
                         </span>
                     </v-col>
                 </v-row>
-                <v-row dense>
+                <v-row v-if="showCoordinates" dense>
                     <v-col :class="el.is.xsmall ? 'col-12' : 'col-4'">
                         <move-to-input
                             v-model="input.x.pos"
@@ -70,9 +70,9 @@
                             @submit="sendCmd"></move-to-input>
                     </v-col>
                 </v-row>
-            </v-container>
-        </template>
-    </responsive>
+            </template>
+        </responsive>
+    </v-container>
 </template>
 
 <script lang="ts">
@@ -153,6 +153,22 @@ export default class MoveToControl extends Mixins(BaseMixin, ControlMixin) {
         return this.bed_mesh?.profile_name ?? ''
     }
 
+    get showPosition() {
+        return this.$store.state.gui.view.toolhead.showPosition ?? true
+    }
+
+    get showCoordinates() {
+        return this.$store.state.gui.view.toolhead.showCoordinates ?? true
+    }
+
+    get showControl() {
+        return this.$store.state.gui.view.toolhead.showControl ?? true
+    }
+
+    get containerClass() {
+        return this.showControl ? 'pb-0' : ''
+    }
+
     sendCmd(): void {
         const xPos = this.input.x.pos !== this.gcodePositions.x ? ` X${this.input.x.pos}` : ''
         const yPos = this.input.y.pos !== this.gcodePositions.y ? ` Y${this.input.y.pos}` : ''

src/components/panels/ToolheadControls/ToolheadPanelSettings.vue

@@ -0,0 +1,98 @@
+<template>
+    <v-menu :offset-y="true" :left="true" :close-on-content-click="false">
+        <template #activator="{ on, attrs }">
+            <v-btn icon tile v-bind="attrs" v-on="on">
+                <v-icon small>{{ mdiCog }}</v-icon>
+            </v-btn>
+        </template>
+        <v-list>
+            <v-list-item class="minHeight36">
+                <v-checkbox
+                    v-model="showPosition"
+                    class="mt-0"
+                    hide-details
+                    :label="$t('Panels.ToolheadControlPanel.PositionOutput')" />
+            </v-list-item>
+            <v-list-item class="minHeight36">
+                <v-checkbox
+                    v-model="showCoordinates"
+                    class="mt-0"
+                    hide-details
+                    :label="$t('Panels.ToolheadControlPanel.CoordinateFields')" />
+            </v-list-item>
+            <v-list-item class="minHeight36">
+                <v-checkbox
+                    v-model="showControl"
+                    class="mt-0"
+                    hide-details
+                    :label="$t('Panels.ToolheadControlPanel.ControlButtons')" />
+            </v-list-item>
+            <v-list-item class="minHeight36">
+                <v-checkbox
+                    v-model="showZOffset"
+                    class="mt-0"
+                    hide-details
+                    :label="$t('Panels.ToolheadControlPanel.ZOffset')" />
+            </v-list-item>
+            <v-list-item class="minHeight36">
+                <v-checkbox
+                    v-model="showSpeedFactor"
+                    class="mt-0"
+                    hide-details
+                    :label="$t('Panels.ToolheadControlPanel.SpeedFactor')" />
+            </v-list-item>
+        </v-list>
+    </v-menu>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { mdiCog } from '@mdi/js'
+
+@Component
+export default class ToolheadPanelSettings extends Mixins(BaseMixin) {
+    mdiCog = mdiCog
+
+    get showPosition(): boolean {
+        return this.$store.state.gui.view.toolhead.showPosition ?? true
+    }
+
+    set showPosition(newVal: boolean) {
+        this.$store.dispatch('gui/saveSetting', { name: 'view.toolhead.showPosition', value: newVal })
+    }
+
+    get showCoordinates(): boolean {
+        return this.$store.state.gui.view.toolhead.showCoordinates ?? true
+    }
+
+    set showCoordinates(newVal: boolean) {
+        this.$store.dispatch('gui/saveSetting', { name: 'view.toolhead.showCoordinates', value: newVal })
+    }
+
+    get showControl(): boolean {
+        return this.$store.state.gui.view.toolhead.showControl ?? true
+    }
+
+    set showControl(newVal: boolean) {
+        this.$store.dispatch('gui/saveSetting', { name: 'view.toolhead.showControl', value: newVal })
+    }
+
+    get showZOffset(): boolean {
+        return this.$store.state.gui.view.toolhead.showZOffset ?? true
+    }
+
+    set showZOffset(newVal: boolean) {
+        this.$store.dispatch('gui/saveSetting', { name: 'view.toolhead.showZOffset', value: newVal })
+    }
+
+    get showSpeedFactor(): boolean {
+        return this.$store.state.gui.view.toolhead.showSpeedFactor ?? true
+    }
+
+    set showSpeedFactor(newVal: boolean) {
+        this.$store.dispatch('gui/saveSetting', { name: 'view.toolhead.showSpeedFactor', value: newVal })
+    }
+}
+</script>

src/locales/en.json

@@ -730,13 +730,17 @@
         "ToolheadControlPanel": {
             "Absolute": "absolute",
             "ALL": "ALL",
+            "ControlButtons": "Control buttons",
+            "CoordinateFields": "Coordinate fields",
             "Headline": "Toolhead",
             "PleaseConfigureSteps": "Please configure steps",
             "Position": "Position",
+            "PositionOutput": "Position output",
             "QGL": "QGL",
             "Relative": "relative",
             "SettingsInterfaceControl": "Settings > Interface > Control",
             "SpeedFactor": "Speed factor",
+            "ZOffset": "Z-Offset",
             "ZTilt": "Z-Tilt"
         },
         "WebcamPanel": {

src/store/gui/index.ts

@@ -254,6 +254,13 @@ export const getDefaultState = (): GuiState => {
                 currentPath: 'timelapse',
                 selectedFiles: [],
             },
+            toolhead: {
+                showPosition: true,
+                showCoordinates: true,
+                showControl: true,
+                showZOffset: true,
+                showSpeedFactor: true,
+            },
             webcam: {
                 currentCam: {
                     dashboard: 'all',

src/store/gui/types.ts

@@ -179,6 +179,13 @@ export interface GuiState {
             currentPath: string
             selectedFiles: FileStateFile[]
         }
+        toolhead: {
+            showPosition: boolean
+            showCoordinates: boolean
+            showControl: boolean
+            showZOffset: boolean
+            showSpeedFactor: boolean
+        }
         webcam: {
             currentCam: {
                 dashboard: string