feat: add optional background color for big gcode thumbnails (#1535)

Co-authored-by: dw-0 <[email protected]>
mainsail-crew · Oct 7, 2023 · 82e3dd8 · 82e3dd8
1 parent 3994a8e
commit 82e3dd8
Show file tree

Hide file tree

Showing 10 changed files with 154 additions and 33 deletions.
diff --git a/src/components/dialogs/StartPrintDialog.vue b/src/components/dialogs/StartPrintDialog.vue
@@ -1,10 +1,8 @@
 <template>
     <v-dialog v-model="bool" :max-width="dialogWidth" @click:outside="closeDialog" @keydown.esc="closeDialog">
         <v-card>
-            <v-img v-if="file.big_thumbnail" contain :src="file.big_thumbnail" />
-            <v-card-title class="text-h5">
-                {{ $t('Dialogs.StartPrint.Headline') }}
-            </v-card-title>
+            <v-img v-if="file.big_thumbnail" contain :src="file.big_thumbnail" :style="bigThumbnailStyle" />
+            <v-card-title class="text-h5">{{ $t('Dialogs.StartPrint.Headline') }}</v-card-title>
             <v-card-text class="pb-0">
                 <p class="body-2">
                     {{ question }}
@@ -42,6 +40,7 @@ import { FileStateGcodefile } from '@/store/files/types'
 import SettingsRow from '@/components/settings/SettingsRow.vue'
 import { mdiPrinter3d } from '@mdi/js'
 import { ServerSpoolmanStateSpool } from '@/store/server/spoolman/types'
+import { defaultBigThumbnailBackground } from '@/store/variables'
 
 @Component({
     components: {
@@ -76,6 +75,18 @@ export default class StartPrintDialog extends Mixins(BaseMixin) {
         return this.file.big_thumbnail_width ?? 400
     }
 
+    get bigThumbnailBackground() {
+        return this.$store.state.gui.uiSettings.bigThumbnailBackground ?? defaultBigThumbnailBackground
+    }
+
+    get bigThumbnailStyle() {
+        if (defaultBigThumbnailBackground.toLowerCase() === this.bigThumbnailBackground.toLowerCase()) {
+            return {}
+        }
+
+        return { backgroundColor: this.bigThumbnailBackground }
+    }
+
     get active_spool(): ServerSpoolmanStateSpool | null {
         return this.$store.state.server.spoolman.active_spool ?? null
     }

diff --git a/src/components/panels/GcodefilesPanel.vue b/src/components/panels/GcodefilesPanel.vue
@@ -240,6 +240,7 @@
                                 <v-tooltip
                                     top
                                     content-class="tooltip__content-opacity1"
+                                    :color="bigThumbnailTooltipColor"
                                     :disabled="!item.big_thumbnail">
                                     <template #activator="{ on, attrs }">
                                         <vue-load-image>
@@ -252,16 +253,16 @@
                                                 v-bind="attrs"
                                                 v-on="on" />
                                             <div slot="preloader">
-                                                <v-progress-circular
-                                                    indeterminate
-                                                    color="primary"></v-progress-circular>
+                                                <v-progress-circular indeterminate color="primary" />
                                             </div>
                                             <div slot="error">
                                                 <v-icon>{{ mdiFile }}</v-icon>
                                             </div>
                                         </vue-load-image>
                                     </template>
-                                    <span><img :src="item.big_thumbnail" width="250" :alt="item.filename" /></span>
+                                    <span>
+                                        <img :src="item.big_thumbnail" width="250" :alt="item.filename" />
+                                    </span>
                                 </v-tooltip>
                             </template>
                             <template v-else>
@@ -304,7 +305,7 @@
             :bool="dialogPrintFile.show"
             :file="dialogPrintFile.item"
             :current-path="currentPath"
-            @closeDialog="closeStartPrint"></start-print-dialog>
+            @closeDialog="closeStartPrint" />
         <v-menu v-model="contextMenu.shown" :position-x="contextMenu.x" :position-y="contextMenu.y" absolute offset-y>
             <v-list>
                 <v-list-item
@@ -617,7 +618,7 @@
 <script lang="ts">
 import { Component, Mixins, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
-import { validGcodeExtensions } from '@/store/variables'
+import { defaultBigThumbnailBackground, validGcodeExtensions } from '@/store/variables'
 import { formatFilesize, formatPrintTime, sortFiles } from '@/plugins/helpers'
 import { FileStateFile, FileStateGcodefile } from '@/store/files/types'
 import Panel from '@/components/ui/Panel.vue'
@@ -1101,6 +1102,18 @@ export default class GcodefilesPanel extends Mixins(BaseMixin, ControlMixin) {
         this.$store.dispatch('gui/saveSetting', { name: 'view.gcodefiles.countPerPage', value: newVal })
     }
 
+    get bigThumbnailBackground() {
+        return this.$store.state.gui.uiSettings.bigThumbnailBackground ?? defaultBigThumbnailBackground
+    }
+
+    get bigThumbnailTooltipColor() {
+        if (defaultBigThumbnailBackground.toLowerCase() === this.bigThumbnailBackground.toLowerCase()) {
+            return undefined
+        }
+
+        return this.bigThumbnailBackground
+    }
+
     getStatusIcon(status: string | null) {
         return this.$store.getters['server/history/getPrintStatusIcon'](status)
     }

diff --git a/src/components/panels/Status/Gcodefiles.vue b/src/components/panels/Status/Gcodefiles.vue
@@ -20,7 +20,11 @@
                     @click="showDialog(item)">
                     <td class="pr-0 text-center" style="width: 32px">
                         <template v-if="item.small_thumbnail">
-                            <v-tooltip top content-class="tooltip__content-opacity1" :disabled="!item.big_thumbnail">
+                            <v-tooltip
+                                top
+                                content-class="tooltip__content-opacity1"
+                                :disabled="!item.big_thumbnail"
+                                :color="bigThumbnailTooltipColor">
                                 <template #activator="{ on, attrs }">
                                     <vue-load-image class="d-flex">
                                         <img
@@ -72,7 +76,7 @@
             :bool="showDialogBool"
             :file="dialogFile"
             :current-path="currentPath"
-            @closeDialog="closeDialog"></start-print-dialog>
+            @closeDialog="closeDialog" />
         <v-menu v-model="contextMenu.shown" :position-x="contextMenu.x" :position-y="contextMenu.y" absolute offset-y>
             <v-list>
                 <v-list-item :disabled="printerIsPrinting || !klipperReadyForGui" @click="showDialog(contextMenu.item)">
@@ -241,6 +245,7 @@ import {
     mdiCloseThick,
 } from '@mdi/js'
 import Panel from '@/components/ui/Panel.vue'
+import { defaultBigThumbnailBackground } from '@/store/variables'
 
 interface dialogRenameObject {
     show: boolean
@@ -356,6 +361,18 @@ export default class StatusPanelGcodefiles extends Mixins(BaseMixin, ControlMixi
         return `width: ${this.contentTdWidth}px;`
     }
 
+    get bigThumbnailBackground() {
+        return this.$store.state.gui.uiSettings.bigThumbnailBackground ?? defaultBigThumbnailBackground
+    }
+
+    get bigThumbnailTooltipColor() {
+        if (defaultBigThumbnailBackground.toLowerCase() === this.bigThumbnailBackground.toLowerCase()) {
+            return undefined
+        }
+
+        return this.bigThumbnailBackground
+    }
+
     showContextMenu(e: any, item: FileStateGcodefile) {
         if (!this.contextMenu.shown) {
             e?.preventDefault()

diff --git a/src/components/panels/Status/JobqueueEntry.vue b/src/components/panels/Status/JobqueueEntry.vue
@@ -5,7 +5,11 @@
         @contextmenu="showContextMenu($event, item)">
         <td class="pr-0 text-center" style="width: 32px">
             <template v-if="smallThumbnail && bigThumbnail">
-                <v-tooltip v-if="smallThumbnail && bigThumbnail" top content-class="tooltip__content-opacity1">
+                <v-tooltip
+                    v-if="smallThumbnail && bigThumbnail"
+                    top
+                    content-class="tooltip__content-opacity1"
+                    :color="bigThumbnailTooltipColor">
                     <template #activator="{ on, attrs }">
                         <vue-load-image>
                             <img slot="image" :src="smallThumbnail" width="32" height="32" v-bind="attrs" v-on="on" />
@@ -116,6 +120,7 @@ import BaseMixin from '@/components/mixins/base'
 import { ServerJobQueueStateJob } from '@/store/server/jobQueue/types'
 import { mdiChevronDown, mdiChevronUp, mdiCloseThick, mdiCounter, mdiFile, mdiPlay, mdiPlaylistRemove } from '@mdi/js'
 import NumberInput from '@/components/inputs/NumberInput.vue'
+import { defaultBigThumbnailBackground } from '@/store/variables'
 @Component({
     components: { NumberInput },
 })
@@ -192,6 +197,18 @@ export default class StatusPanelJobqueueEntry extends Mixins(BaseMixin) {
         return output
     }
 
+    get bigThumbnailBackground() {
+        return this.$store.state.gui.uiSettings.bigThumbnailBackground ?? defaultBigThumbnailBackground
+    }
+
+    get bigThumbnailTooltipColor() {
+        if (defaultBigThumbnailBackground.toLowerCase() === this.bigThumbnailBackground.toLowerCase()) {
+            return undefined
+        }
+
+        return this.bigThumbnailBackground
+    }
+
     formatPrintTime(totalSeconds: number) {
         if (totalSeconds) {
             let output = ''

diff --git a/src/components/panels/Status/PrintstatusThumbnail.vue b/src/components/panels/Status/PrintstatusThumbnail.vue
@@ -7,6 +7,7 @@
             tabindex="-1"
             class="d-flex align-end statusPanel-big-thumbnail"
             height="200"
+            :style="thumbnailStyle"
             @focus="focusBigThumbnail"
             @blur="blurBigThumbnail">
             <v-card-title
@@ -43,26 +44,34 @@
                                             :src="thumbnailSmall"
                                             width="32"
                                             height="32"
+                                            :alt="current_filename"
                                             v-bind="attrs"
                                             v-on="on" />
-                                        <v-progress-circular
-                                            slot="preloader"
-                                            indeterminate
-                                            color="primary"></v-progress-circular>
-                                        <v-icon slot="error">{{ mdiFile }}</v-icon>
+                                        <div slot="preloader">
+                                            <v-progress-circular indeterminate color="primary" />
+                                        </div>
+                                        <div slot="error">
+                                            <v-icon>{{ mdiFile }}</v-icon>
+                                        </div>
                                     </vue-load-image>
                                 </template>
-                                <span><img :src="thumbnailBig" width="250" /></span>
+                                <span><img :src="thumbnailBig" width="250" :alt="current_filename" /></span>
                             </v-tooltip>
                         </template>
                         <template v-else-if="thumbnailSmall">
                             <vue-load-image>
-                                <img slot="image" :src="thumbnailSmall" width="32" height="32" />
-                                <v-progress-circular
-                                    slot="preloader"
-                                    indeterminate
-                                    color="primary"></v-progress-circular>
-                                <v-icon slot="error">{{ mdiFile }}</v-icon>
+                                <img
+                                    slot="image"
+                                    :src="thumbnailSmall"
+                                    width="32"
+                                    height="32"
+                                    :alt="current_filename" />
+                                <div slot="preloader">
+                                    <v-progress-circular indeterminate color="primary" />
+                                </div>
+                                <div slot="error">
+                                    <v-icon>{{ mdiFile }}</v-icon>
+                                </div>
                             </vue-load-image>
                         </template>
                     </v-col>
@@ -77,13 +86,11 @@
 import Component from 'vue-class-component'
 import { Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
-import { thumbnailBigMin, thumbnailSmallMax, thumbnailSmallMin } from '@/store/variables'
+import { defaultBigThumbnailBackground, thumbnailBigMin, thumbnailSmallMax, thumbnailSmallMin } from '@/store/variables'
 import { mdiFileOutline, mdiFile } from '@mdi/js'
 import { Debounce } from 'vue-debounce-decorator'
 
-@Component({
-    components: {},
-})
+@Component({})
 export default class StatusPanelPrintstatusThumbnail extends Mixins(BaseMixin) {
     mdiFileOutline = mdiFileOutline
     mdiFile = mdiFile
@@ -178,6 +185,18 @@ export default class StatusPanelPrintstatusThumbnail extends Mixins(BaseMixin) {
         return this.current_filename && setting && this.thumbnailBig
     }
 
+    get bigThumbnailBackground() {
+        return this.$store.state.gui.uiSettings.bigThumbnailBackground ?? defaultBigThumbnailBackground
+    }
+
+    get thumbnailStyle() {
+        if (defaultBigThumbnailBackground.toLowerCase() !== this.bigThumbnailBackground.toLowerCase()) {
+            return { backgroundColor: this.bigThumbnailBackground }
+        }
+
+        return {}
+    }
+
     focusBigThumbnail() {
         if (this.$refs.bigThumbnail) {
             const clientWidth = this.$refs.bigThumbnail.$el.clientWidth

diff --git a/src/components/settings/SettingsUiSettingsTab.vue b/src/components/settings/SettingsUiSettingsTab.vue
@@ -65,6 +65,32 @@
                     <v-switch v-model="boolBigThumbnail" hide-details class="mt-0" />
                 </settings-row>
                 <v-divider class="my-2" />
+                <settings-row :title="$t('Settings.UiSettingsTab.BigThumbnailBackground')">
+                    <v-btn
+                        v-if="bigThumbnailBackground.toLowerCase() !== defaultBigThumbnailBackground.toLowerCase()"
+                        small
+                        text
+                        class="minwidth-0"
+                        @click="bigThumbnailBackground = defaultBigThumbnailBackground">
+                        <v-icon small>{{ mdiRestart }}</v-icon>
+                    </v-btn>
+                    <v-menu bottom left offset-y :close-on-content-click="false">
+                        <template #activator="{ on, attrs }">
+                            <v-btn
+                                v-bind="attrs"
+                                :color="bigThumbnailBackground"
+                                class="minwidth-0 px-5"
+                                small
+                                v-on="on" />
+                        </template>
+                        <v-color-picker
+                            :value="bigThumbnailBackground"
+                            hide-mode-switch
+                            mode="rgba"
+                            @update:color="updateBigThumbnailBackground" />
+                    </v-menu>
+                </settings-row>
+                <v-divider class="my-2" />
                 <settings-row
                     :title="$t('Settings.UiSettingsTab.DisplayCANCEL_PRINT')"
                     :sub-title="$t('Settings.UiSettingsTab.DisplayCANCEL_PRINTDescription')"
@@ -209,8 +235,8 @@
                 </settings-row>
                 <v-divider class="my-2" />
                 <settings-row
-                    :title="$t('Settings.UiSettingsTab.HideUpdateWarnings').toString()"
-                    :sub-title="$t('Settings.UiSettingsTab.HideUpdateWarningsDescription').toString()"
+                    :title="$t('Settings.UiSettingsTab.HideUpdateWarnings')"
+                    :sub-title="$t('Settings.UiSettingsTab.HideUpdateWarningsDescription')"
                     :dynamic-slot-width="true">
                     <v-switch v-model="hideUpdateWarnings" hide-details class="mt-0" />
                 </settings-row>
@@ -224,7 +250,7 @@ import Component from 'vue-class-component'
 import { Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import SettingsRow from '@/components/settings/SettingsRow.vue'
-import { defaultLogoColor, defaultPrimaryColor } from '@/store/variables'
+import { defaultLogoColor, defaultPrimaryColor, defaultBigThumbnailBackground } from '@/store/variables'
 import { Debounce } from 'vue-debounce-decorator'
 import { mdiRestart, mdiTimerOutline } from '@mdi/js'
 import { ServerPowerStateDevice } from '@/store/server/power/types'
@@ -238,6 +264,7 @@ export default class SettingsUiSettingsTab extends Mixins(BaseMixin) {
 
     defaultLogoColor = defaultLogoColor
     defaultPrimaryColor = defaultPrimaryColor
+    defaultBigThumbnailBackground = defaultBigThumbnailBackground
 
     get logoColor() {
         return this.$store.state.gui.uiSettings.logo
@@ -263,6 +290,14 @@ export default class SettingsUiSettingsTab extends Mixins(BaseMixin) {
         this.$store.dispatch('gui/saveSetting', { name: 'uiSettings.boolBigThumbnail', value: newVal })
     }
 
+    get bigThumbnailBackground() {
+        return this.$store.state.gui.uiSettings.bigThumbnailBackground
+    }
+
+    set bigThumbnailBackground(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'uiSettings.bigThumbnailBackground', value: newVal })
+    }
+
     get displayCancelPrint() {
         return this.$store.state.gui.uiSettings.displayCancelPrint
     }
@@ -468,5 +503,10 @@ export default class SettingsUiSettingsTab extends Mixins(BaseMixin) {
     updatePrimaryColor(newVal: any) {
         this.primaryColor = this.clearColorObject(newVal)
     }
+
+    @Debounce(500)
+    updateBigThumbnailBackground(newVal: any) {
+        this.bigThumbnailBackground = this.clearColorObject(newVal)
+    }
 }
 </script>
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -1093,6 +1093,7 @@
         "UiSettingsTab": {
             "BedScrewsDialog": "Bed Screws Dialog",
             "BedScrewsDialogDescription": "Display helper dialog for BED_SCREWS_ADJUST.",
+            "BigThumbnailBackground": "Large thumbnail background color",
             "BoolBigThumbnail": "Large thumbnail",
             "BoolBigThumbnailDescription": "Display a large thumbnail in the status panel during a print.",
             "BoolHideUploadAndPrintButton": "Hide Upload and Print Button",

diff --git a/src/store/gui/index.ts b/src/store/gui/index.ts
@@ -3,7 +3,7 @@ import { Module } from 'vuex'
 import { actions } from '@/store/gui/actions'
 import { mutations } from '@/store/gui/mutations'
 import { getters } from '@/store/gui/getters'
-import { defaultLogoColor, defaultPrimaryColor } from '@/store/variables'
+import { defaultLogoColor, defaultPrimaryColor, defaultBigThumbnailBackground } from '@/store/variables'
 
 // load modules
 import { console } from '@/store/gui/console'
@@ -155,6 +155,7 @@ export const getDefaultState = (): GuiState => {
             confirmOnEmergencyStop: false,
             confirmOnPowerDeviceChange: false,
             boolBigThumbnail: true,
+            bigThumbnailBackground: defaultBigThumbnailBackground,
             boolWideNavDrawer: false,
             boolHideUploadAndPrintButton: false,
             navigationStyle: 'iconsAndText',