feat: display only existing/useable bed_mesh profiles (#660)

src/locales/en.json

@@ -247,7 +247,11 @@
         "DoYouReallyWantToCalibrate": "Do you really want to start the bed calibration?",
         "DeleteBedMeshProfile": "Delete Bed Mesh Profile",
         "DoYouReallyWantToDelete": "Do you really want to delete the profile \"{name}\"?",
+        "RemoveSaveDescription": "The bed_mesh profile has been registered as deleted. Click on SAVE_CONFIG to remove it from the printer.cfg and restart Klipper.",
         "Remove": "delete",
+        "Ok": "OK",
+        "SAVE_CONFIG": "SAVE_CONFIG",
+        "Later": "Later",
         "CurrentMesh": {
             "Headline": "Current Mesh",
             "Name": "Name",

src/pages/Heightmap.vue

@@ -274,7 +274,7 @@
                         </v-simple-table>
                     </v-card-text>
                     <v-card-text v-else>
-                        <p>{{ $t('Heightmap.NoProfile') }}</p>
+                        <p class="mb-0">{{ $t('Heightmap.NoProfile') }}</p>
                     </v-card-text>
                 </panel>
             </v-col>
@@ -297,6 +297,11 @@
                 icon="mdi-grid"
                 card-class="heightmap-rename-dialog"
                 :margin-bottom="false">
+                <template v-slot:buttons>
+                    <v-btn icon tile @click="renameDialog = false">
+                        <v-icon>mdi-close-thick</v-icon>
+                    </v-btn>
+                </template>
                 <v-card-text>
                     <v-text-field
                         :label="$t('Heightmap.Name')"
@@ -318,8 +323,13 @@
                 icon="mdi-grid"
                 card-class="heightmap-calibrate-dialog"
                 :margin-bottom="false">
+                <template v-slot:buttons>
+                    <v-btn icon tile @click="calibrateDialog = false">
+                        <v-icon>mdi-close-thick</v-icon>
+                    </v-btn>
+                </template>
                 <v-card-text>
-                    <p>{{ $t('Heightmap.DoYouReallyWantToCalibrate') }}</p>
+                    <p class="mb-0">{{ $t('Heightmap.DoYouReallyWantToCalibrate') }}</p>
                 </v-card-text>
                 <v-card-actions>
                     <v-spacer></v-spacer>
@@ -332,10 +342,15 @@
             <panel
                 :title="$t('Heightmap.BedMeshRemove')"
                 icon="mdi-grid"
-                card-class="heightmap-calibrate-dialog"
+                card-class="heightmap-remove-dialog"
                 :margin-bottom="false">
+                <template v-slot:buttons>
+                    <v-btn icon tile @click="removeDialog = false">
+                        <v-icon>mdi-close-thick</v-icon>
+                    </v-btn>
+                </template>
                 <v-card-text>
-                    <p>{{ $t('Heightmap.DoYouReallyWantToDelete', { name: removeDialogProfile }) }}</p>
+                    <p class="mb-0">{{ $t('Heightmap.DoYouReallyWantToDelete', { name: removeDialogProfile }) }}</p>
                 </v-card-text>
                 <v-card-actions>
                     <v-spacer></v-spacer>
@@ -344,6 +359,34 @@
                 </v-card-actions>
             </panel>
         </v-dialog>
+        <v-dialog v-model="saveConfigDialog" persistent :max-width="400" @keydown.esc="saveConfigDialog = false">
+            <panel
+                :title="$t('Heightmap.SAVE_CONFIG')"
+                icon="mdi-grid"
+                card-class="heightmap-remove-save-dialog"
+                :margin-bottom="false">
+                <template v-slot:buttons>
+                    <v-btn icon tile @click="saveConfigDialog = false">
+                        <v-icon>mdi-close-thick</v-icon>
+                    </v-btn>
+                </template>
+                <v-card-text>
+                    <p class="mb-0">{{ $t('Heightmap.RemoveSaveDescription') }}</p>
+                </v-card-text>
+                <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <template v-if="printerIsPrinting">
+                        <v-btn text @click="saveConfigDialog = false">{{ $t('Heightmap.Ok') }}</v-btn>
+                    </template>
+                    <template v-else>
+                        <v-btn color="primary" text @click="saveConfig">
+                            {{ $t('Heightmap.SAVE_CONFIG') }}
+                        </v-btn>
+                        <v-btn text @click="saveConfigDialog = false">{{ $t('Heightmap.Later') }}</v-btn>
+                    </template>
+                </v-card-actions>
+            </panel>
+        </v-dialog>
     </div>
 </template>
 <script lang="ts">
@@ -397,6 +440,7 @@ export default class PageHeightmap extends Mixins(BaseMixin, ControlMixin) {
     private renameDialog = false
     private removeDialogProfile = ''
     private removeDialog = false
+    private saveConfigDialog = false
     private calibrateDialog = false
     private newName = ''
     private oldName = ''
@@ -1006,6 +1050,8 @@ export default class PageHeightmap extends Mixins(BaseMixin, ControlMixin) {
             }
         )
         this.removeDialogProfile = ''
+
+        this.saveConfigDialog = true
     }
 
     homePrinter(): void {
@@ -1024,6 +1070,13 @@ export default class PageHeightmap extends Mixins(BaseMixin, ControlMixin) {
         this.$socket.emit('printer.gcode.script', { script: 'BED_MESH_CALIBRATE' }, { loading: 'bedMeshCalibrate' })
     }
 
+    saveConfig() {
+        const gcode = 'SAVE_CONFIG'
+        this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
+        this.$socket.emit('printer.gcode.script', { script: gcode }, { loading: 'topbarSaveConfig' })
+        this.saveConfigDialog = false
+    }
+
     beforeDestroy(): void {
         if (typeof window === 'undefined') return
         if (this.chart) this.chart.dispose()

src/store/printer/actions.ts

@@ -57,20 +57,25 @@ export const actions: ActionTree<PrinterState, RootState> = {
         Vue.$socket.emit('server.temperature_store', {}, { action: 'printer/tempHistory/init' })
     },
 
-    getData({ commit }, payload) {
+    getData({ commit, state }, payload) {
         if ('status' in payload) payload = payload.status
         if ('requestParams' in payload) delete payload.requestParams
 
-        const webhooks = Object.keys(payload).findIndex((element) => element === 'webhooks')
-        if (webhooks !== -1) {
+        if ('webhooks' in payload) {
             this.dispatch(
                 'server/getData',
-                { klippy_state: payload['webhooks'].state, klippy_message: payload['webhooks'].state_message },
+                { klippy_state: payload.webhooks.state, klippy_message: payload.webhooks.state_message },
                 { root: true }
             )
             delete payload.webhooks
         }
 
+        if ('bed_mesh' in state && 'bed_mesh' in payload && 'profiles' in payload.bed_mesh) {
+            commit('setBedMeshProfiles', payload.bed_mesh.profiles)
+
+            delete payload.bed_mesh.profiles
+        }
+
         commit('setData', payload)
     },
 

src/store/printer/getters.ts

@@ -555,42 +555,28 @@ export const getters: GetterTree<PrinterState, RootState> = {
         let currentProfile = ''
         if (state.bed_mesh) currentProfile = state.bed_mesh.profile_name
 
-        if (state.configfile?.config) {
-            Object.keys(state.configfile.config)
-                .filter((key) => key.startsWith('bed_mesh '))
-                .forEach((key: string) => {
-                    // eslint-disable-next-line
-                    const value: any = state.configfile.settings[key.toLowerCase()]
-                    const nameSplit = key.split(' ')
+        if (state.bed_mesh && 'profiles' in state.bed_mesh) {
+            Object.keys(state.bed_mesh?.profiles).forEach((key) => {
+                const value: any = state.bed_mesh.profiles[key]
 
-                    let points: number[] = []
-                    if (typeof value.points === 'string') {
-                        value.points.split('\n').forEach((row: string) => {
-                            if (row !== '') {
-                                row.split(', ').forEach((col: string) => {
-                                    points.push(parseFloat(col))
-                                })
-                            }
-                        })
-                    } else {
-                        value.points.forEach((row: number[]) => {
-                            points = points.concat(row)
-                        })
-                    }
+                let points: number[] = []
+                value.points.forEach((row: number[]) => {
+                    points = points.concat(row)
+                })
 
-                    const min = Math.min(...points)
-                    const max = Math.max(...points)
-
-                    profiles.push({
-                        name: nameSplit[1],
-                        data: value,
-                        points: points,
-                        min: min,
-                        max: max,
-                        variance: Math.abs(min - max),
-                        is_active: currentProfile === nameSplit[1],
-                    })
+                const min = Math.min(...points)
+                const max = Math.max(...points)
+
+                profiles.push({
+                    name: key,
+                    data: { ...value.mesh_params, points: value.points },
+                    points: points,
+                    min: min,
+                    max: max,
+                    variance: Math.abs(min - max),
+                    is_active: currentProfile === key,
                 })
+            })
         }
 
         return caseInsensitiveSort(profiles, 'name')

src/store/printer/mutations.ts

@@ -33,9 +33,6 @@ export const mutations: MutationTree<PrinterState> = {
                         currentState[key] !== null
                     ) {
                         setDataDeep(currentState[key], value)
-                    } else if (key === 'temperature') {
-                        const newValue = Math.round(value * 10) / 10
-                        if (currentState[key] !== newValue) Vue.set(currentState, key, newValue)
                     } else Vue.set(currentState, key, value)
                 })
             }
@@ -44,6 +41,12 @@ export const mutations: MutationTree<PrinterState> = {
         setDataDeep(state, payload)
     },
 
+    setBedMeshProfiles(state, payload) {
+        if ('bed_mesh' in state) {
+            Vue.set(state.bed_mesh, 'profiles', payload)
+        }
+    },
+
     setHelplist(state, payload) {
         const helplist = []
 

src/store/socket/actions.ts

@@ -42,7 +42,7 @@ export const actions: ActionTree<SocketState, RootState> = {
     onMessage({ commit, dispatch }, payload) {
         switch (payload.method) {
             case 'notify_status_update':
-                commit('printer/setData', payload.params[0], { root: true })
+                dispatch('printer/getData', payload.params[0], { root: true })
                 break
 
             case 'notify_gcode_response':

src/store/variables.ts

@@ -1,7 +1,7 @@
 export const defaultLogoColor = '#D41216'
 export const defaultPrimaryColor = '#2196f3'
 
-export const minKlipperVersion = 'v0.9.1-778'
+export const minKlipperVersion = 'v0.10.0-271'
 export const minMoonrakerVersion = 'v0.7.1-193'
 
 export const colorArray = ['#F44336', '#8e379d', '#03DAC5', '#3F51B5', '#ffde03', '#009688', '#E91E63']