feat: add optional background color for big gcode thumbnails

Signed-off-by: Stefan Dej <meteyou@gmail.com>

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)
     }

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()

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 = ''

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

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>

src/locales/en.json

@@ -1055,6 +1055,7 @@
         "UiSettingsTab": {
             "BedScrewsDialog": "Bed Screws Dialog",
             "BedScrewsDialogDescription": "Display helper dialog for BED_SCREWS_ADJUST.",
+            "BigThumbnailBackground": "Large thumbnail background",
             "BoolBigThumbnail": "Large thumbnail",
             "BoolBigThumbnailDescription": "Display a large thumbnail in the status panel during a print.",
             "BoolHideUploadAndPrintButton": "Hide Upload and Print Button",

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',

src/store/gui/types.ts

@@ -105,6 +105,7 @@ export interface GuiState {
         confirmOnEmergencyStop: boolean
         confirmOnPowerDeviceChange: boolean
         boolBigThumbnail: boolean
+        bigThumbnailBackground: string
         boolWideNavDrawer: boolean
         boolHideUploadAndPrintButton: boolean
         navigationStyle: 'iconsAndText' | 'iconsOnly'

src/store/variables.ts

@@ -1,5 +1,6 @@
 export const defaultLogoColor = '#D41216'
 export const defaultPrimaryColor = '#2196f3'
+export const defaultBigThumbnailBackground = '#1e1e1e'
 
 export const minKlipperVersion = 'v0.11.0-97'
 export const minMoonrakerVersion = 'v0.8.0-38'