Merge remote-tracking branch 'origin/develop' into develop

package.json

@@ -94,7 +94,7 @@
         "start-server-and-test": "^2.0.0",
         "typescript": "^4.5.5",
         "unplugin-vue-components": "^0.22.12",
-        "vite": "^4.4.9",
+        "vite": "^4.4.12",
         "vite-plugin-checker": "^0.6.0",
         "vite-plugin-package-version": "^1.0.2",
         "vite-plugin-pwa": "^0.16.4",

src/components/dialogs/StartPrintDialog.vue

@@ -1,7 +1,13 @@
 <template>
-    <v-dialog v-model="bool" :max-width="dialogWidth" @click:outside="closeDialog" @keydown.esc="closeDialog">
+    <v-dialog v-model="bool" :max-width="400" @click:outside="closeDialog" @keydown.esc="closeDialog">
         <v-card>
-            <v-img v-if="file.big_thumbnail" contain :src="file.big_thumbnail" :style="bigThumbnailStyle" />
+            <div v-if="file.big_thumbnail" class="d-flex align-center justify-center" style="min-height: 200px">
+                <v-img
+                    :src="file.big_thumbnail"
+                    :max-width="maxThumbnailWidth"
+                    class="d-inline-block"
+                    :style="bigThumbnailStyle" />
+            </div>
             <v-card-title class="text-h5">{{ $t('Dialogs.StartPrint.Headline') }}</v-card-title>
             <v-card-text class="pb-0">
                 <p class="body-2">
@@ -71,10 +77,6 @@ export default class StartPrintDialog extends Mixins(BaseMixin) {
         )
     }
 
-    get dialogWidth() {
-        return this.file.big_thumbnail_width ?? 400
-    }
-
     get bigThumbnailBackground() {
         return this.$store.state.gui.uiSettings.bigThumbnailBackground ?? defaultBigThumbnailBackground
     }
@@ -112,6 +114,10 @@ export default class StartPrintDialog extends Mixins(BaseMixin) {
         return this.$t('Dialogs.StartPrint.DoYouWantToStartFilename', { filename: this.file?.filename ?? 'unknown' })
     }
 
+    get maxThumbnailWidth() {
+        return this.file?.big_thumbnail_width ?? 400
+    }
+
     startPrint(filename = '') {
         filename = (this.currentPath + '/' + filename).substring(1)
         this.closeDialog()

src/components/inputs/FilamentSensor.vue

@@ -1,17 +1,11 @@
-<style scoped>
-._filamentRunout-subheader {
-    height: auto;
-}
-</style>
-
 <template>
     <v-container class="px-0 py-2">
         <v-row>
             <v-col class="pb-3">
                 <v-subheader class="_filamentRunout-subheader">
                     <v-icon small class="mr-2">{{ mdiPrinter3dNozzleAlert }}</v-icon>
                     <span>{{ convertName(name) }}</span>
-                    <v-spacer></v-spacer>
+                    <v-spacer />
                     <small :class="'mr-3 ' + statusColor + '--text'">{{ statusText }}</small>
                     <v-icon @click="changeSensor">
                         {{ enabled ? mdiToggleSwitch : mdiToggleSwitchOffOutline }}
@@ -47,13 +41,14 @@ export default class FilamentSensor extends Mixins(BaseMixin) {
     get statusColor() {
         if (!this.enabled) return 'gray'
         else if (this.filament_detected) return 'success'
-        else return 'danger'
+
+        return 'warning'
     }
 
     get statusText() {
-        if (!this.enabled) return this.$t('Panels.MiscellaneousPanel.RunoutSensor.Disabled')
-        else if (this.filament_detected) return this.$t('Panels.MiscellaneousPanel.RunoutSensor.Detected')
-        else return this.$t('Panels.MiscellaneousPanel.RunoutSensor.Empty')
+        if (this.filament_detected) return this.$t('Panels.MiscellaneousPanel.RunoutSensor.Detected')
+
+        return this.$t('Panels.MiscellaneousPanel.RunoutSensor.Empty')
     }
 
     changeSensor() {
@@ -63,3 +58,9 @@ export default class FilamentSensor extends Mixins(BaseMixin) {
     }
 }
 </script>
+
+<style scoped>
+._filamentRunout-subheader {
+    height: auto;
+}
+</style>

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="{