feat: add option to hide parts of the ExtruderPanel

src/components/mixins/control.ts

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import Component from 'vue-class-component'
+import { PrinterStateMacro, PrinterStateToolchangeMacro } from '@/store/printer/types'
 
 @Component
 export default class ControlMixin extends Vue {
@@ -83,6 +84,21 @@ export default class ControlMixin extends Vue {
         return this.homedAxes.includes('z')
     }
 
+    get macros() {
+        return this.$store.getters['printer/getMacros']
+    }
+
+    get toolchangeMacros(): PrinterStateToolchangeMacro[] {
+        return this.macros
+            .filter((macro: PrinterStateMacro) => macro.name.toUpperCase().match(/^T\d+/))
+            .sort((a: PrinterStateMacro, b: PrinterStateMacro) => {
+                const numberA = parseInt(a.name.slice(1))
+                const numberB = parseInt(b.name.slice(1))
+
+                return numberA - numberB
+            })
+    }
+
     doHome() {
         this.$store.dispatch('server/addEvent', { message: 'G28', type: 'command' })
         this.$socket.emit('printer.gcode.script', { script: 'G28' }, { loading: 'homeAll' })

src/components/panels/Extruder/EstimatedExtrusionOutput.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-container v-if="showEstimatedExtrusion" class="pa-0 ma-0 pb-1">
+    <v-container v-if="showEstimatedExtrusion" class="pa-0 ma-0 pb-2">
         <div style="font-size: 0.8em" class="text--disabled text-caption font-weight-light d-flex justify-center">
             <span>
                 {{ $t('Panels.ExtruderControlPanel.EstimatedExtrusion') }} ~ {{ extrudedLength }} mm @

src/components/panels/Extruder/ExtruderControlPanelControl.vue

@@ -187,6 +187,8 @@
                     </v-col>
                 </v-row>
             </v-container>
+            <!-- EXTRUSION ESTIMATION NOTE -->
+            <estimated-extrusion-output />
         </template>
     </responsive>
 </template>

src/components/panels/Extruder/ExtruderControlPanelTools.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-if="toolchangeMacros.length > 1">
+    <div class="mb-3">
         <v-row v-for="(row, index) in rows" :key="'row_' + index" class="mt-0">
             <v-col>
                 <v-item-group class="_btn-group py-0 px-3">
@@ -13,29 +13,13 @@
 <script lang="ts">
 import { mdiPrinter3dNozzle } from '@mdi/js'
 import { Component, Mixins } from 'vue-property-decorator'
-import { PrinterStateMacro, PrinterStateToolchangeMacro } from '@/store/printer/types'
 import BaseMixin from '@/components/mixins/base'
 import ControlMixin from '@/components/mixins/control'
 
 @Component({})
 export default class ExtruderControlPanel extends Mixins(BaseMixin, ControlMixin) {
     mdiPrinter3dNozzle = mdiPrinter3dNozzle
 
-    get macros() {
-        return this.$store.getters['printer/getMacros']
-    }
-
-    get toolchangeMacros(): PrinterStateToolchangeMacro[] {
-        return this.macros
-            .filter((macro: PrinterStateMacro) => macro.name.toUpperCase().match(/^T\d+/))
-            .sort((a: PrinterStateMacro, b: PrinterStateMacro) => {
-                const numberA = parseInt(a.name.slice(1))
-                const numberB = parseInt(b.name.slice(1))
-
-                return numberA - numberB
-            })
-    }
-
     get rows() {
         const cols = 6
         let rows = []

src/components/panels/Extruder/ExtruderPanelSettings.vue

@@ -0,0 +1,101 @@
+<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="showTools"
+                    class="mt-0"
+                    hide-details
+                    :label="$t('Panels.ExtruderControlPanel.Tools')" />
+            </v-list-item>
+            <v-list-item class="minHeight36">
+                <v-checkbox
+                    v-model="showExtrusionFactor"
+                    class="mt-0"
+                    hide-details
+                    :label="$t('Panels.ExtruderControlPanel.ExtrusionFactor')" />
+            </v-list-item>
+            <v-list-item v-if="existsPressureAdvance" class="minHeight36">
+                <v-checkbox
+                    v-model="showPressureAdvance"
+                    class="mt-0"
+                    hide-details
+                    :label="$t('Panels.ExtruderControlPanel.PressureAdvance')" />
+            </v-list-item>
+            <v-list-item class="minHeight36">
+                <v-checkbox
+                    v-model="showFirmwareRetraction"
+                    class="mt-0"
+                    hide-details
+                    :label="$t('Panels.ExtruderControlPanel.FirmwareRetraction')" />
+            </v-list-item>
+            <v-list-item class="minHeight36">
+                <v-checkbox
+                    v-model="showExtruderControl"
+                    class="mt-0"
+                    hide-details
+                    :label="$t('Panels.ExtruderControlPanel.ExtruderControl')" />
+            </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 ExtruderPanelSettings extends Mixins(BaseMixin) {
+    mdiCog = mdiCog
+
+    get showTools(): boolean {
+        return this.$store.state.gui.view.extruder.showTools ?? true
+    }
+
+    set showTools(newVal: boolean) {
+        this.$store.dispatch('gui/saveSetting', { name: 'view.extruder.showTools', value: newVal })
+    }
+
+    get showExtrusionFactor(): boolean {
+        return this.$store.state.gui.view.extruder.showExtrusionFactor ?? true
+    }
+
+    set showExtrusionFactor(newVal: boolean) {
+        this.$store.dispatch('gui/saveSetting', { name: 'view.extruder.showExtrusionFactor', value: newVal })
+    }
+
+    get existsPressureAdvance(): boolean {
+        return !(this.$store.getters['printer/getExtruderSteppers'].length > 0)
+    }
+
+    get showPressureAdvance(): boolean {
+        return this.$store.state.gui.view.extruder.showPressureAdvance ?? true
+    }
+
+    set showPressureAdvance(newVal: boolean) {
+        this.$store.dispatch('gui/saveSetting', { name: 'view.extruder.showPressureAdvance', value: newVal })
+    }
+
+    get showFirmwareRetraction(): boolean {
+        return this.$store.state.gui.view.extruder.showFirmwareRetraction ?? true
+    }
+
+    set showFirmwareRetraction(newVal: boolean) {
+        this.$store.dispatch('gui/saveSetting', { name: 'view.extruder.showFirmwareRetraction', value: newVal })
+    }
+
+    get showExtruderControl(): boolean {
+        return this.$store.state.gui.view.extruder.showExtruderControl ?? true
+    }
+
+    set showExtruderControl(newVal: boolean) {
+        this.$store.dispatch('gui/saveSetting', { name: 'view.extruder.showExtruderControl', value: newVal })
+    }
+}
+</script>

src/components/panels/Extruder/ExtrusionFactorSettings.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-container class="pb-1">
+    <v-container>
         <tool-slider
             :label="$t('Panels.ExtruderControlPanel.ExtrusionFactor')"
             :icon="mdiPrinter3dNozzleOutline"

src/components/panels/Extruder/FirmwareRetractionSettings.vue

@@ -1,6 +1,5 @@
 <template>
     <div v-if="existsFirmwareRetraction">
-        <v-divider />
         <v-container>
             <responsive
                 :breakpoints="{

src/components/panels/Extruder/PressureAdvanceSettings.vue

@@ -1,71 +1,64 @@
 <template>
-    <div v-if="show">
-        <v-divider />
-        <v-container>
-            <responsive
-                :breakpoints="{
-                    small: (el) => el.width <= 350,
-                    medium: (el) => el.width > 350 && el.width <= 500,
-                }">
-                <template #default="{ el }">
-                    <v-row>
-                        <v-col v-if="allExtruders.length > 1" :class="{ 'col-12': el.is.small || el.is.medium }">
-                            <div class="d-flex align-center">
-                                <v-btn
-                                    v-if="selectedExtruder !== activeExtruder"
-                                    icon
-                                    plain
-                                    @click="resetToActiveExtruder">
-                                    <v-icon>{{ mdiRestart }}</v-icon>
-                                </v-btn>
-                                <v-select
-                                    v-model="selectedExtruder"
-                                    :label="$t('Panels.ExtruderControlPanel.PressureAdvanceSettings.Extruder')"
-                                    :items="allExtruders"
-                                    :value="activeExtruder"
-                                    hide-details
-                                    outlined
-                                    dense />
-                            </div>
-                        </v-col>
-                        <v-col :class="{ 'col-12': el.is.small }">
-                            <number-input
-                                :label="$t('Panels.ExtruderControlPanel.PressureAdvanceSettings.Advance')"
-                                param="ADVANCE"
-                                :target="pressureAdvance"
-                                :default-value="defaultPressureAdvance"
-                                :extruder="selectedExtruder"
-                                :output-error-msg="true"
-                                :has-spinner="true"
-                                :min="0"
-                                :max="null"
-                                :step="0.001"
-                                :dec="3"
-                                unit="s"
-                                @submit="sendCmd" />
-                        </v-col>
-                        <v-col :class="{ 'col-12': el.is.small }">
-                            <number-input
-                                :label="$t('Panels.ExtruderControlPanel.PressureAdvanceSettings.SmoothTime')"
-                                param="SMOOTH_TIME"
-                                :target="smoothTime"
-                                :default-value="defaultSmoothTime"
-                                :extruder="selectedExtruder"
-                                :output-error-msg="true"
-                                :has-spinner="true"
-                                :spinner-factor="10"
-                                :min="0"
-                                :max="0.2"
-                                :step="0.001"
-                                :dec="3"
-                                unit="s"
-                                @submit="sendCmd" />
-                        </v-col>
-                    </v-row>
-                </template>
-            </responsive>
-        </v-container>
-    </div>
+    <responsive
+        :breakpoints="{
+            small: (el) => el.width <= 350,
+            medium: (el) => el.width > 350 && el.width <= 500,
+        }">
+        <template #default="{ el }">
+            <v-container>
+                <v-row>
+                    <v-col v-if="allExtruders.length > 1" :class="{ 'col-12': el.is.small || el.is.medium }">
+                        <div class="d-flex align-center">
+                            <v-btn v-if="selectedExtruder !== activeExtruder" icon plain @click="resetToActiveExtruder">
+                                <v-icon>{{ mdiRestart }}</v-icon>
+                            </v-btn>
+                            <v-select
+                                v-model="selectedExtruder"
+                                :label="$t('Panels.ExtruderControlPanel.PressureAdvanceSettings.Extruder')"
+                                :items="allExtruders"
+                                :value="activeExtruder"
+                                hide-details
+                                outlined
+                                dense />
+                        </div>
+                    </v-col>
+                    <v-col :class="{ 'col-12': el.is.small }">
+                        <number-input
+                            :label="$t('Panels.ExtruderControlPanel.PressureAdvanceSettings.Advance')"
+                            param="ADVANCE"
+                            :target="pressureAdvance"
+                            :default-value="defaultPressureAdvance"
+                            :extruder="selectedExtruder"
+                            :output-error-msg="true"
+                            :has-spinner="true"
+                            :min="0"
+                            :max="null"
+                            :step="0.001"
+                            :dec="3"
+                            unit="s"
+                            @submit="sendCmd" />
+                    </v-col>
+                    <v-col :class="{ 'col-12': el.is.small }">
+                        <number-input
+                            :label="$t('Panels.ExtruderControlPanel.PressureAdvanceSettings.SmoothTime')"
+                            param="SMOOTH_TIME"
+                            :target="smoothTime"
+                            :default-value="defaultSmoothTime"
+                            :extruder="selectedExtruder"
+                            :output-error-msg="true"
+                            :has-spinner="true"
+                            :spinner-factor="10"
+                            :min="0"
+                            :max="0.2"
+                            :step="0.001"
+                            :dec="3"
+                            unit="s"
+                            @submit="sendCmd" />
+                    </v-col>
+                </v-row>
+            </v-container>
+        </template>
+    </responsive>
 </template>
 
 <script lang="ts">
@@ -90,10 +83,6 @@ export default class PressureAdvanceSettings extends Mixins(BaseMixin) {
         this.selectedExtruder = this.$store.state.printer.toolhead?.extruder
     }
 
-    get show(): boolean {
-        return !(this.$store.getters['printer/getExtruderSteppers'].length > 0)
-    }
-
     get allExtruders(): string[] {
         Object.keys(this.$store.state.printer).forEach((e) => {
             if (e.startsWith('extruder') && !this.extruders.includes(e)) this.extruders.push(e)