feat: allow fan animations to be disabled to save browser perf. (#1232)

mainsail-crew · Mar 12, 2023 · 47feaef · 47feaef
1 parent 0e4d104
commit 47feaef
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 4 deletions.
diff --git a/src/components/inputs/MiscellaneousSlider.vue b/src/components/inputs/MiscellaneousSlider.vue
@@ -278,9 +278,13 @@ export default class MiscellaneousSlider extends Mixins(BaseMixin) {
         return errors
     }
 
+    get disableFanAnimation() {
+        return this.$store.state.gui.uiSettings.disableFanAnimation ?? false
+    }
+
     get fanClasses() {
         const output = ['mr-2']
-        if (this.value >= this.off_below && this.value > 0) output.push('icon-rotate')
+        if (!this.disableFanAnimation && this.value >= this.off_below && this.value > 0) output.push('icon-rotate')
 
         return output
     }

diff --git a/src/components/settings/SettingsUiSettingsTab.vue b/src/components/settings/SettingsUiSettingsTab.vue
@@ -159,6 +159,13 @@
                     :dynamic-slot-width="true">
                     <v-switch v-model="hideSaveConfigForBedMash" hide-details class="mt-0" />
                 </settings-row>
+                <v-divider class="my-2"></v-divider>
+                <settings-row
+                    :title="$t('Settings.UiSettingsTab.DisableFanAnimation').toString()"
+                    :sub-title="$t('Settings.UiSettingsTab.DisableFanAnimationDescription').toString()"
+                    :dynamic-slot-width="true">
+                    <v-switch v-model="disableFanAnimation" hide-details class="mt-0" />
+                </settings-row>
             </v-card-text>
         </v-card>
     </div>
@@ -333,6 +340,14 @@ export default class SettingsUiSettingsTab extends Mixins(BaseMixin) {
         this.$store.dispatch('gui/saveSetting', { name: 'uiSettings.hideSaveConfigForBedMash', value: newVal })
     }
 
+    get disableFanAnimation() {
+        return this.$store.state.gui.uiSettings.hideSaveConfigForBedMash ?? false
+    }
+
+    set disableFanAnimation(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'uiSettings.disableFanAnimation', value: newVal })
+    }
+
     clearColorObject(color: any): string {
         if (typeof color === 'object' && 'hex' in color) color = color.hex
         if (color.length > 7) color = color.substr(0, 7)

diff --git a/src/locales/de.json b/src/locales/de.json
@@ -1014,6 +1014,8 @@
             "ConfirmOnEmergencyStopDescription": "Zeige vor einem Notstop einen Bestätigungsdialog.",
             "ConfirmOnPowerDeviceChange": "Bestätigung für Änderung der Stromversorgung von Geräten",
             "ConfirmOnPowerDeviceChangeDescription": "Zeige vor Änderung der Stromversorgung von Geräten einen Bestätigungsdialog.",
+            "DisableFanAnimation": "Lüfteranimation deaktivieren",
+            "DisableFanAnimationDescription": "Dies kann die Last im Browser senken.",
             "DisplayCANCEL_PRINT": "Zeige CANCEL_PRINT an",
             "DisplayCANCEL_PRINTDescription": "Zeigt die CANCEL_PRINT Schaltfläche dauerhaft an - keine weitere Bestätigung erforderlich.",
             "GcodeThumbnails": "G-Code Vorschaubilder",

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -1014,6 +1014,8 @@
             "ConfirmOnEmergencyStopDescription": "Show a confirmation dialog on Emergency Stop",
             "ConfirmOnPowerDeviceChange": "Require confirm on Device Power changes",
             "ConfirmOnPowerDeviceChangeDescription": "Show a confirmation dialog on Device Power changes",
+            "DisableFanAnimation": "Disable fan animation",
+            "DisableFanAnimationDescription": "This can reduce some load in your Browser.",
             "DisplayCANCEL_PRINT": "Display CANCEL_PRINT",
             "DisplayCANCEL_PRINTDescription": "Shows the CANCEL_PRINT button permanently - no second layer confirmation needed.",
             "GcodeThumbnails": "G-Code thumbnails",

diff --git a/src/store/gui/index.ts b/src/store/gui/index.ts
@@ -156,6 +156,7 @@ export const getDefaultState = (): GuiState => {
             navigationStyle: 'iconsAndText',
             powerDeviceName: null,
             hideSaveConfigForBedMash: false,
+            disableFanAnimation: false,
         },
         view: {
             blockFileUpload: false,

diff --git a/src/store/gui/types.ts b/src/store/gui/types.ts
@@ -108,6 +108,7 @@ export interface GuiState {
         navigationStyle: 'iconsAndText' | 'iconsOnly'
         powerDeviceName: string | null
         hideSaveConfigForBedMash: boolean
+        disableFanAnimation: boolean
     }
     view: {
         blockFileUpload: boolean

diff --git a/src/store/printer/getters.ts b/src/store/printer/getters.ts
@@ -264,7 +264,7 @@ export const getters: GetterTree<PrinterState, RootState> = {
                     temperature: Math.round(value.temperature * 10) / 10,
                     additionalSensors: getters.getAdditionalSensors(nameSplit[1]),
                     speed: Math.round((value.speed ?? 0) * 100),
-                    avgSpeed: Math.round(getters['tempHistory/getAvgSpeed'](name) ?? 0),
+                    avgSpeed: Math.round(getters['tempHistory/getAvgSpeed'](nameSplit[1]) ?? 0),
                     rpm: value.rpm !== null ? Math.round(value.rpm) : null,
                     presets: rootGetters['gui/presets/getPresetsFromHeater']({ name: key }),
                     chartColor: getters['tempHistory/getDatasetColor'](nameSplit[1]),
@@ -356,8 +356,9 @@ export const getters: GetterTree<PrinterState, RootState> = {
         return caseInsensitiveSort(sensors, 'name')
     },
 
-    getTemperatureObjects: (state, getters) => {
+    getTemperatureObjects: (state, getters, rootState) => {
         const objects: PrinterStateTemperatureObject[] = []
+        const disableFanAnimation = rootState.gui?.uiSettings.disableFanAnimation ?? false
 
         const heaters = getters['getHeaters']
         if (heaters.length) {
@@ -402,7 +403,7 @@ export const getters: GetterTree<PrinterState, RootState> = {
                         fan.target > 0
                             ? `${fan.chartColor}${opacityHeaterActive}`
                             : `${fan.chartColor}${opacityHeaterInactive}`,
-                    iconClass: fan.speed ? ' icon-rotate' : '',
+                    iconClass: !disableFanAnimation && fan.speed ? ' icon-rotate' : '',
                     state: fan.target > 0 && fan.speed > 0 ? fan.speed + '%' : fan.target > 0 ? 'standby' : 'off',
                     avgState: fan.avgSpeed + '%',
                     temperature: fan.temperature,