feat: lockable sliders (#412)

* fix: replace tab characters by spaces

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* fix: replace tab characters by spaces

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* feature: add lockable sliders

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* feat: add lockable sliders

feat: add auto-lock sliders

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* locale: add EN locale for LockSlider and AutoLockSlider features.

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* chore: rename autoLockSliders to lockSliders

refactor: include startLockTimer method in sendCmd method

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* refactor: refactor startLockTimer method

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* refactor: lockSlidersChanged Watcher

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* refactor: remove helper, use new isTouchDevice BaseMixin method instead

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* feat: add lockable sliders to miscellaneous sliders

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* fix: every interaction with the slider resets timeout correctly

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* fix: fix typo

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* chore: remove unused import

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* chore: remove unused import

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* chore: replace tabs with spaces

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* chore: replace tabs with spaces / remove trailing newlines

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* refactor: rename name/value pairs to a more appropriate name

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* refactor(locale): update EN locale file

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* fix: get/set correct store name

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* refactor: use "Delay" instead of "Timeout"

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* refactor(locale): update EN locale file

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* refactor(locale): update DE locale file

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* refactor: rename menuStyle to navigationStyle

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

src/components/TheSidebar.vue

@@ -30,7 +30,7 @@
 </style>
 
 <template>
-    <v-navigation-drawer v-model="naviDrawer" :src="sidebarBackground" :mini-variant="(menuStyle === 'iconsOnly')" :key="menuStyle" width="220px" clipped app> 
+    <v-navigation-drawer v-model="naviDrawer" :src="sidebarBackground" :mini-variant="(navigationStyle === 'iconsOnly')" :key="navigationStyle" width="220px" clipped app> 
         <v-list class="pr-0 pt-0 ml-0">
             <v-list-item-group active-class="active-nav-item">
                 <template v-if="countPrinters">
@@ -99,8 +99,8 @@ export default class TheSidebarAlt extends Mixins(BaseMixin) {
         this.$store.dispatch('setNaviDrawer', newVal)
     }
 
-    get menuStyle() {
+    get navigationStyle() {
-        return this.$store.state.gui.dashboard.menuStyle
+        return this.$store.state.gui.dashboard.navigationStyle
     }
 
     get sidebarBackground(): string {

src/components/inputs/MiscellaneousSlider.vue

@@ -9,29 +9,54 @@
         <v-row>
             <v-col :class="pwm ? 'pb-1' : 'pb-3'">
                 <v-subheader class="_fan-slider-subheader">
-                    <v-icon small :class="'mr-2 '+(value >= off_below && value > 0 ? 'icon-rotate' : '')" v-if="type !== 'output_pin'">mdi-fan</v-icon>
+                    <v-btn
+                        v-if="canLock && lockSliders && this.isTouchDevice && controllable"
+                        @click="sliderIsLocked = !sliderIsLocked"
+                        plain
+                        small
+                        icon
+                    >
+                        <v-icon small :color="(sliderIsLocked ? 'red' : '')">
+                            {{ sliderIsLocked ? 'mdi-lock-outline' : 'mdi-lock-open-variant-outline' }}
+                        </v-icon>
+                    </v-btn>
+                    <v-icon
+                        small
+                        :class="'mr-2 '+(value >= off_below && value > 0 ? 'icon-rotate' : '')"
+                        v-if="type !== 'output_pin'"
+                    >
+                        mdi-fan
+                    </v-icon>
                     <span>{{ convertName(name) }}</span>
                     <v-spacer></v-spacer>
-                    <small v-if="rpm || rpm === 0" :class="'mr-3 ' + (rpm === 0 && value > 0 ? 'red--text' : '')">{{ Math.round(rpm) }} RPM</small>
+                    <small v-if="rpm || rpm === 0" :class="'mr-3 ' + (rpm === 0 && value > 0 ? 'red--text' : '')">
-                    <span class="font-weight-bold" v-if="!controllable || (controllable && pwm)">{{ Math.round(parseFloat(value)*100) }} %</span>
+                        {{ Math.round(rpm) }} RPM
-                    <v-icon v-if="controllable && !pwm" @click="switchOutputPin">{{ value ? "mdi-toggle-switch" : "mdi-toggle-switch-off-outline" }}</v-icon>
+                    </small>
+                    <span class="font-weight-bold" v-if="!controllable || (controllable && pwm)">
+                        {{ Math.round(parseFloat(value)*100) }} %
+                    </span>
+                    <v-icon v-if="controllable && !pwm" @click="switchOutputPin">
+                        {{ value ? "mdi-toggle-switch" : "mdi-toggle-switch-off-outline" }}
+                    </v-icon>
                 </v-subheader>
                 <v-card-text class="py-0" v-if="controllable && pwm">
                     <v-slider
                         v-model="value"
+                        v-touch="{start: resetLockTimer}"
+                        :disabled="canLock && sliderIsLocked"
                         :min="0.0"
                         :max="1.0"
                         :step="0.01"
                         :color="value < off_below && value > 0 ? 'red' : undefined"
-                        @change="changeSlicer()"
+                        @change="changeSlider"
                         hide-details
                     >
                         <template v-slot:prepend>
-                            <v-icon @click="decrement">mdi-minus</v-icon>
+                            <v-icon @click="decrement" :disabled="canLock && sliderIsLocked">mdi-minus</v-icon>
                         </template>
 
                         <template v-slot:append>
-                            <v-icon @click="increment">mdi-plus</v-icon>
+                            <v-icon @click="increment" :disabled="canLock && sliderIsLocked">mdi-plus</v-icon>
                         </template>
                     </v-slider>
                 </v-card-text>
@@ -50,9 +75,12 @@ import {Debounce} from 'vue-debounce-decorator'
 @Component
 export default class MiscellaneousSlider extends Mixins(BaseMixin) {
     convertName = convertName
+    private timeout: number | undefined
     private min = 0
     private value = 0
 
+    @Prop({ required: true }) readonly sliderName!: string
+    @Prop({ type: Boolean, default: true, required: true }) readonly canLock!: string
     @Prop({ type: Number, required: true }) target!: number
     @Prop({ type: Number, default: 1 }) max!: number
     @Prop({ type: String, default: '' }) name!: string
@@ -63,8 +91,44 @@ export default class MiscellaneousSlider extends Mixins(BaseMixin) {
     @Prop({ type: Number, default: 1 }) multi!: number
     @Prop({ type: Number, default: 0 }) off_below!: number
 
+    @Watch('lockSliders', {immediate: true})
+    lockSlidersChanged(){
+        if(this.lockSliders && this.isTouchDevice){
+            this.sliderIsLocked = true
+        } else {
+            this.sliderIsLocked = false
+        }
+    }
+
+    startLockTimer() {
+        let t = this.lockSlidersDelay
+        if (!this.isTouchDevice || !this.lockSliders || (t <= 0)) return
+        this.timeout = setTimeout(() => this.sliderIsLocked = true, t * 1000)
+    }
+
+    resetLockTimer() {
+        clearTimeout(this.timeout)
+    }
+
+    get lockSliders() {
+        return this.$store.state.gui.general.lockSlidersOnTouchDevices
+    }
+
+    get lockSlidersDelay() {
+        return this.$store.state.gui.general.lockSlidersDelay
+    }
+
+    get sliderIsLocked() {
+        return this.$store.getters['gui/getLockedSliders'](this.sliderName)
+    }
+
+    set sliderIsLocked(newVal) {
+        if (!this.controllable) return
+        this.$store.dispatch('gui/saveSliderLockState', { name: this.sliderName, value: newVal })
+    }
+
     @Debounce(500)
-    changeSlicer() {
+    changeSlider() {
         this.sendCmd()
     }
 
@@ -84,6 +148,8 @@ export default class MiscellaneousSlider extends Mixins(BaseMixin) {
             this.$store.dispatch('server/addEvent', {message: gcode, type: 'command'})
             this.$socket.emit('printer.gcode.script', {script: gcode})
         }
+
+        this.startLockTimer()
     }
 
     switchOutputPin() {

src/components/inputs/ToolSlider.vue

@@ -9,12 +9,24 @@
         <v-row>
             <v-col class="pb-1 pt-3">
                 <v-subheader class="_tool-slider-subheader">
+                    <v-btn
+                        v-if="canLock && lockSliders && isTouchDevice"
+                        @click="sliderIsLocked = !sliderIsLocked"
+                        plain
+                        small
+                        icon
+                    >
+                        <v-icon small :color="(sliderIsLocked ? 'red' : '')">
+                            {{ sliderIsLocked ? 'mdi-lock-outline' : 'mdi-lock-open-variant-outline' }}
+                        </v-icon>
+                    </v-btn>
                     <span>{{ label }}</span>
                     <v-btn
                         v-if="value !== defaultValue"
                         class="ml-2"
                         x-small
                         icon
+                        :disabled="canLock && sliderIsLocked"
                         @click="resetSlider"
                     >
                         <v-icon>mdi-restart</v-icon>
@@ -27,6 +39,8 @@
                 <v-card-text class="py-0">
                     <v-slider
                         v-model="value"
+                        v-touch="{start: resetLockTimer}"
+                        :disabled="canLock && sliderIsLocked"
                         :min="min"
                         :max="processedMax"
                         :color="colorBar"
@@ -34,11 +48,11 @@
                         hide-details>
 
                         <template v-slot:prepend>
-                            <v-icon @click="decrement">mdi-minus</v-icon>
+                            <v-icon @click="decrement" :disabled="canLock && sliderIsLocked">mdi-minus</v-icon>
                         </template>
 
                         <template v-slot:append>
-                            <v-icon @click="increment">mdi-plus</v-icon>
+                            <v-icon @click="increment" :disabled="canLock && sliderIsLocked">mdi-plus</v-icon>
                         </template>
                     </v-slider>
                 </v-card-text>
@@ -55,11 +69,14 @@ import {Debounce} from 'vue-debounce-decorator'
 
 @Component
 export default class ToolSlider extends Mixins(BaseMixin) {
+    private timeout: number | undefined
     value = 0
     startValue = 0
     processedMax = 100
     dynamicStep = 50
 
+    @Prop({ required: true }) readonly sliderName!: string
+    @Prop({ type: Boolean, default: true, required: true }) readonly canLock!: string
     @Prop({ type: Number, required: true }) readonly target!: number
     @Prop({ type: String, required: true }) readonly command!: string
     @Prop({ type: String, default: '' }) readonly attributeName!: string
@@ -83,6 +100,41 @@ export default class ToolSlider extends Mixins(BaseMixin) {
         }
     }
 
+    @Watch('lockSliders', {immediate: true})
+    lockSlidersChanged(){
+        if(this.lockSliders && this.isTouchDevice){
+            this.sliderIsLocked = true
+        } else {
+            this.sliderIsLocked = false
+        }
+    }
+
+    startLockTimer() {
+        let t = this.lockSlidersDelay
+        if (!this.isTouchDevice || !this.lockSliders || (t <= 0)) return
+        this.timeout = setTimeout(() => this.sliderIsLocked = true, t * 1000)
+    }
+
+    resetLockTimer() {
+        clearTimeout(this.timeout)
+    }
+
+    get lockSliders() {
+        return this.$store.state.gui.general.lockSlidersOnTouchDevices
+    }
+
+    get lockSlidersDelay() {
+        return this.$store.state.gui.general.lockSlidersDelay
+    }
+
+    get sliderIsLocked() {
+        return this.$store.getters['gui/getLockedSliders'](this.sliderName)
+    }
+
+    set sliderIsLocked(newVal) {
+        this.$store.dispatch('gui/saveSliderLockState', { name: this.sliderName, value: newVal })
+    }
+
     get colorBar() {
         return this.max < this.value ? 'warning' : 'primary'
     }
@@ -126,6 +178,8 @@ export default class ToolSlider extends Mixins(BaseMixin) {
         const gcode = this.command + ' ' + this.attributeName + (Math.max(1, this.value) * this.attributeScale).toFixed(0)
         this.$store.dispatch('server/addEvent', {message: gcode, type: 'command'})
         this.$socket.emit('printer.gcode.script', {script: gcode})
+
+        this.startLockTimer()
     }
 
     decrement() {

src/components/panels/MiscellaneousPanel.vue

@@ -13,6 +13,7 @@
         <div v-for="(object, index) of miscellaneous" v-bind:key="index">
             <v-divider v-if="index"></v-divider>
             <miscellaneous-slider
+                :slider-name="object.name"
                 :name="object.name"
                 :type="object.type"
                 :target="object.power"
@@ -22,6 +23,7 @@
                 :off_below="object.off_below"
                 :max="object.max_power"
                 :multi="parseInt(object.scale)"
+                :can-lock="true"
             ></miscellaneous-slider>
         </div>
         <div v-for="(sensor, index) of filamentSensors" v-bind:key="'sensor_'+index">

src/components/panels/PrintsettingsPanel.vue

@@ -10,10 +10,31 @@
         :collapsible="true"
         card-class="printsettings-panel"
     >
-        <tool-slider :label="$t('Panels.PrintsettingsPanel.SpeedFactor')" :target="speed_factor" :max="200" :multi="100" :step="5" :dynamic-range="true" command="M220" attribute-name="S" ></tool-slider>
+        <tool-slider
+            slider-name="speed-factor"
+            :label="$t('Panels.PrintsettingsPanel.SpeedFactor')"
+            :target="speed_factor"
+            :max="200"
+            :multi="100"
+            :step="5"
+            :dynamic-range="true"
+            :can-lock="true"
+            command="M220"
+            attribute-name="S">
+        </tool-slider>
         <template v-if="existsExtruder">
             <v-divider></v-divider>
-            <tool-slider :label="$t('Panels.PrintsettingsPanel.ExtrusionFactor')" :target="extrude_factor" :max="200" :multi="100" :step="1" command="M221" attribute-name="S" ></tool-slider>
+            <tool-slider
+                slider-name="extrusion-factor"
+                :label="$t('Panels.PrintsettingsPanel.ExtrusionFactor')"
+                :target="extrude_factor"
+                :max="200"
+                :multi="100"
+                :step="1"
+                :can-lock="true"
+                command="M221"
+                attribute-name="S">
+            </tool-slider>
         </template>
     </panel>
 </template>

src/components/settings/SettingsUiSettingsTab.vue

@@ -52,6 +52,30 @@
                     <v-switch v-model="displayZOffsetStandby" hide-details class="mt-0"></v-switch>
                 </settings-row>
                 <v-divider class="my-2"></v-divider>
+                <settings-row :title="$t('Settings.UiSettingsTab.LockSliders')" :sub-title="$t('Settings.UiSettingsTab.LockSlidersDescription')" :dynamicSlotWidth="true">
+                        <v-switch v-model="lockSliders" hide-details class="mt-0"></v-switch>
+                </settings-row>
+                <v-divider class="my-2"></v-divider>
+                <v-expand-transition>
+                    <settings-row v-show="lockSliders" :title="$t('Settings.UiSettingsTab.LockSlidersDelay')" :sub-title="$t('Settings.UiSettingsTab.LockSlidersDelayDescription')" :dynamicSlotWidth="true">
+                            <v-text-field
+                                class="mt-0"
+                                prepend-icon="mdi-timer-outline"
+                                :style="isMobile ? { 'max-width': '140px' } : {}"
+                                v-model="lockSlidersDelay"
+                                label="Timeout"
+                                type="number"
+                                :rules="[t => t >= 0]"
+                                min="0"
+                                step="0.5"
+                                suffix="s"
+                                hide-details
+                                outlined
+                                dense
+                            ></v-text-field>
+                    </settings-row>
+                </v-expand-transition>
+                <v-divider  v-show="lockSliders" class="my-2"></v-divider>
                 <settings-row :title="$t('Settings.UiSettingsTab.ConfirmOnEmergencyStop')" :sub-title="$t('Settings.UiSettingsTab.ConfirmOnEmergencyStopDescription')" :dynamicSlotWidth="true">
                     <v-switch v-model="confirmOnEmergencyStop" hide-details class="mt-0"></v-switch>
                 </settings-row>
@@ -60,8 +84,8 @@
                     <v-switch v-model="confirmOnPowerDeviceChange" hide-details class="mt-0"></v-switch>
                 </settings-row>
                 <v-divider class="my-2"></v-divider>
-                <settings-row :title="$t('Settings.UiSettingsTab.MenuStyle')" :sub-title="$t('Settings.UiSettingsTab.MenuStyleDescription')">
+                <settings-row :title="$t('Settings.UiSettingsTab.NavigationStyle')" :sub-title="$t('Settings.UiSettingsTab.NavigationStyleDescription')">
-                    <v-select v-model="menuStyleSetting" :items="menuStyles" outlined dense hide-details class="mt-0"></v-select>
+                    <v-select v-model="navigationStyleSetting" :items="navigationStyles" outlined dense hide-details class="mt-0"></v-select>
                 </settings-row>
                 <v-divider class="my-2"></v-divider>
                 <settings-row :title="$t('Settings.UiSettingsTab.BoolHideUploadAndPrintButton')" :sub-title="$t('Settings.UiSettingsTab.BoolHideUploadAndPrintButtonDescription')" :dynamicSlotWidth="true">
@@ -153,22 +177,42 @@ export default class SettingsUiSettingsTab extends Mixins(BaseMixin) {
         this.$store.dispatch('gui/saveSetting', {name: 'general.confirmOnPowerDeviceChange', value: newVal })
     }
 
-    get menuStyleSetting() {
+    get lockSliders() {
-        return this.$store.state.gui.dashboard.menuStyle
+        return this.$store.state.gui.general.lockSlidersOnTouchDevices
     }
 
-    set menuStyleSetting(newVal) {
+    set lockSliders(newVal) {
-        this.$store.dispatch('gui/saveSetting', {name: 'dashboard.menuStyle', value: newVal })
+        this.$store.dispatch('gui/saveSetting', {name: 'general.lockSlidersOnTouchDevices', value: newVal})
     }
 
-    get menuStyles() {
+    get lockSlidersDelay() {
+        return this.$store.state.gui.general.lockSlidersDelay
+    }
+
+    set lockSlidersDelay(newVal) {
+        (newVal >= 0) ? this.$store.dispatch('gui/saveSetting', {name: 'general.lockSlidersDelay', value: newVal}) : {}
+    }
+
+    get boolWideNavDrawer() {
+        return this.$store.state.gui.dashboard.boolWideNavDrawer ?? false
+    }
+
+    get navigationStyleSetting() {
+        return this.$store.state.gui.dashboard.navigationStyle
+    }
+
+    set navigationStyleSetting(newVal) {
+        this.$store.dispatch('gui/saveSetting', {name: 'dashboard.navigationStyle', value: newVal })
+    }
+
+    get navigationStyles() {
         return [
             {
-                text: this.$t('Settings.UiSettingsTab.MenuStyleIconsOnly'),
+                text: this.$t('Settings.UiSettingsTab.NavigationStyleIconsOnly'),
                 value: 'iconsOnly'
             },
             {
-                text: this.$t('Settings.UiSettingsTab.MenuStyleIconsAndText'),
+                text: this.$t('Settings.UiSettingsTab.NavigationStyleIconsAndText'),
                 value: 'iconsAndText'
             }
         ]

src/store/gui/actions.ts

@@ -3,7 +3,6 @@ import {ActionTree} from 'vuex'
 import {GuiState} from '@/store/gui/types'
 import {RootState} from '@/store/types'
 import { getDefaultState } from './index'
-import {v4 as uuid} from 'uuid'
 
 export const actions: ActionTree<GuiState, RootState> = {
     reset({ commit }) {
@@ -128,9 +127,9 @@ export const actions: ActionTree<GuiState, RootState> = {
         let newState = payload.newVal
         if (
             'value' in payload &&
-			keyName in payload.value &&
+            keyName in payload.value &&
-			typeof payload.value[keyName] !== 'string' &&
+            typeof payload.value[keyName] !== 'string' &&
-			!Array.isArray(payload.value[keyName])
+            !Array.isArray(payload.value[keyName])
         ) newState = Object.assign(payload.value[keyName], {...newState})
 
         Vue.$socket.emit('server.database.post_item', { namespace: 'mainsail', key: keyName, value: newState })
@@ -238,7 +237,7 @@ export const actions: ActionTree<GuiState, RootState> = {
     resetLayout({ dispatch }, name) {
         const defaultState = getDefaultState()
         // eslint-disable-next-line
-		const newVal: any = defaultState.dashboard[name] ?? []
+        const newVal: any = defaultState.dashboard[name] ?? []
 
         dispatch('saveSetting', {
             name: 'dashboard.'+name,
@@ -246,6 +245,16 @@ export const actions: ActionTree<GuiState, RootState> = {
         })
     },
 
+    saveSliderLockState({ commit, dispatch, state }, payload) {
+        if (!payload.value) commit('removeFromLockedSliders', {name: payload.name})
+        else commit('addToLockedSliders', { name: payload.name })
+
+        dispatch('updateSettings', {
+            keyName: 'dashboard.lockedSliders',
+            newVal: state.dashboard.lockedSliders
+        })
+    },
+
     toggleHideUploadAndPrintBtn({commit, dispatch, state}, payload) {
         commit('toggleHideUploadAndPrintBtn', payload)
         dispatch('updateSettings', {

src/store/gui/getters.ts

@@ -1,4 +1,3 @@
-import {caseInsensitiveSort} from '@/plugins/helpers'
 import {GetterTree} from 'vuex'
 import {GuiState} from '@/store/gui/types'
 import {GuiMacrogroupsStateMacrogroup} from '@/store/gui/macrogroups/types'
@@ -9,7 +8,7 @@ export const getters: GetterTree<GuiState, any> = {
     getDatasetValue: (state) => (payload: { name: string, type: string }) => {
         if (
             payload.name in state.tempchart.datasetSettings &&
-			payload.type in state.tempchart.datasetSettings[payload.name]
+            payload.type in state.tempchart.datasetSettings[payload.name]
         ) return state.tempchart.datasetSettings[payload.name][payload.type]
 
         return ['temperature', 'target'].includes(payload.type)
@@ -18,8 +17,8 @@ export const getters: GetterTree<GuiState, any> = {
     getDatasetAdditionalSensorValue: (state) => (payload: { name: string, sensor: string }) => {
         if (
             payload.name in state.tempchart.datasetSettings &&
-			'additionalSensors' in state.tempchart.datasetSettings[payload.name] &&
+            'additionalSensors' in state.tempchart.datasetSettings[payload.name] &&
-			payload.sensor in state.tempchart.datasetSettings[payload.name].additionalSensors
+            payload.sensor in state.tempchart.datasetSettings[payload.name].additionalSensors
         ) return state.tempchart.datasetSettings[payload.name].additionalSensors[payload.sensor]
 
         return true
@@ -51,5 +50,9 @@ export const getters: GetterTree<GuiState, any> = {
         }
 
         return panels
+    },
+
+    getLockedSliders: (state) => (name: string) => {
+        return state.dashboard.lockedSliders?.includes(name) ?? false
     }
 }

src/store/gui/index.ts

@@ -19,6 +19,8 @@ export const getDefaultState = (): GuiState => {
             language: 'en',
             displayCancelPrint: false,
             displayZOffsetStandby: false,
+            lockSlidersOnTouchDevices: true,
+            lockSlidersDelay: 1.5,
             confirmOnEmergencyStop: false,
             confirmOnPowerDeviceChange: false,
             calcEstimateTime: ['file', 'filament'],
@@ -32,10 +34,11 @@ export const getDefaultState = (): GuiState => {
             boolTempchart: true,
             boolBigThumbnail: true,
             boolWideNavDrawer: false,
-            menuStyle: 'iconsOnly',
+            navigationStyle: 'iconsOnly',
             macroManagement: 'simple',
             hiddenMacros: [],
             hiddenTempChart: [],
+            lockedSliders: [],
             control: {
                 style: 'bars',
                 feedrateXY: 100,

src/store/gui/mutations.ts

@@ -10,7 +10,7 @@ export const mutations: MutationTree<GuiState> = {
 
     setData(state, payload) {
         // eslint-disable-next-line
-		const setDataDeep = (currentState: any, payload: any) => {
+        const setDataDeep = (currentState: any, payload: any) => {
             if (typeof payload === 'object') {
                 Object.keys(payload).forEach((key: string) => {
                     const value = payload[key]
@@ -103,6 +103,25 @@ export const mutations: MutationTree<GuiState> = {
         Vue.set(state.dashboard, payload.layoutname, layoutArray)
     },
 
+    addToLockedSliders(state, payload){
+        const lockedSliders = [...state.dashboard.lockedSliders]
+        if (!lockedSliders.includes(payload.name)) {
+            lockedSliders.push(payload.name)
+
+            Vue.set(state.dashboard, 'lockedSliders', lockedSliders)
+        }
+    },
+
+    removeFromLockedSliders(state, payload){
+        const lockedSliders = [...state.dashboard.lockedSliders]
+        const index = lockedSliders.indexOf(payload.name)
+        if (index > -1) {
+            lockedSliders.splice(index, 1)
+
+            Vue.set(state.dashboard, 'lockedSliders', lockedSliders)
+        }
+    },
+
     toggleHideUploadAndPrintBtn(state, payload) {
         Vue.set(state.dashboard, 'boolHideUploadAndPrintButton', payload)
     }