feat: add different color maps for heightmap

src/components/TheSettingsMenu.vue

@@ -100,8 +100,11 @@ import {
     mdiWebcam,
     mdiDipSwitch,
     mdiMenu,
+    mdiGrid,
 } from '@mdi/js'
 import SettingsMiscellaneousTab from '@/components/settings/SettingsMiscellaneousTab.vue'
+import SettingsHeightmapTab from '@/components/settings/SettingsHeightmapTab.vue'
+
 @Component({
     components: {
         Panel,
@@ -119,6 +122,7 @@ import SettingsMiscellaneousTab from '@/components/settings/SettingsMiscellaneou
         SettingsTimelapseTab,
         SettingsMiscellaneousTab,
         SettingsNavigationTab,
+        SettingsHeightmapTab,
     },
 })
 export default class TheSettingsMenu extends Mixins(BaseMixin) {
@@ -202,6 +206,11 @@ export default class TheSettingsMenu extends Mixins(BaseMixin) {
                 name: 'navigation',
                 title: this.$t('Settings.NavigationTab.Navigation'),
             },
+            {
+                icon: mdiGrid,
+                name: 'heightmap',
+                title: this.$t('Settings.HeightmapTab.Heightmap'),
+            },
         ]
 
         if (this.moonrakerComponents.includes('timelapse')) {

src/components/settings/SettingsHeightmapTab.vue

@@ -0,0 +1,83 @@
+<template>
+    <div>
+        <v-card flat>
+            <v-card-text>
+                <div class="d-flex align-center">
+                    <v-icon style="opacity: 0.7">{{ mdiGrid }}</v-icon>
+                    <v-card-title class="mx-n2">
+                        {{ $t('Settings.HeightmapTab.Heightmap') }}
+                    </v-card-title>
+                    <v-divider class="ml-3"></v-divider>
+                </div>
+                <settings-row :title="$t('Settings.HeightmapTab.ColorSchemes')">
+                    <v-select
+                        v-model="colorScheme"
+                        :items="availableColorSchemes"
+                        hide-details
+                        outlined
+                        dense
+                        attach></v-select>
+                </settings-row>
+            </v-card-text>
+        </v-card>
+    </div>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Watch } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import SettingsRow from '@/components/settings/SettingsRow.vue'
+import Panel from '@/components/ui/Panel.vue'
+import { mdiGrid } from '@mdi/js'
+
+@Component({
+    components: {
+        Panel,
+        SettingsRow,
+    },
+})
+export default class SettingsHeightmapTab extends Mixins(BaseMixin) {
+    mdiGrid = mdiGrid
+    get availableColorSchemes() {
+        return [
+            {
+                text:
+                    this.$t('Settings.HeightmapTab.Schemes.Portland') +
+                    ' ' +
+                    this.$t('Settings.HeightmapTab.IsDefault'),
+                value: 'portland',
+            },
+            {
+                text: this.$t('Settings.HeightmapTab.Schemes.Spring'),
+                value: 'spring',
+            },
+            {
+                text: this.$t('Settings.HeightmapTab.Schemes.Hot'),
+                value: 'hot',
+            },
+            {
+                text: this.$t('Settings.HeightmapTab.Schemes.Hsv'),
+                value: 'hsv',
+            },
+            {
+                text: this.$t('Settings.HeightmapTab.Schemes.GrayScale'),
+                value: 'grayScale',
+            },
+        ]
+    }
+
+    get colorScheme() {
+        return this.$store.state.gui.heightmap.activecolorscheme
+    }
+
+    set colorScheme(newVal) {
+        this.$store.dispatch('gui/heightmap/saveSetting', { name: 'activecolorscheme', value: newVal })
+    }
+
+    @Watch('colorScheme')
+    colorSchemeChanged(newVal: number) {
+        this.colorScheme = newVal
+    }
+}
+</script>

src/locales/en.json

@@ -930,6 +930,18 @@
             "RestoreDialog": "Please select all the sections you want to restore:",
             "TimeFormat": "Time Format"
         },
+        "HeightmapTab": {
+            "ColorSchemes": "Color Schemes",
+            "Heightmap": "Heightmap",
+            "IsDefault": "(Default)",
+            "Schemes": {
+                "GrayScale": "Grayscale",
+                "Hot": "Hot",
+                "Hsv": "Hsv",
+                "Portland": "Portland",
+                "Spring": "Spring"
+            }
+        },
         "InterfaceSettings": "Interface Settings",
         "MacrosTab": {
             "Add": "add",

src/locales/nl.json

@@ -854,6 +854,18 @@
             "RestoreDialog": "Kies alle secties die je wil herstellen:",
             "TimeFormat": "Tijdformaat"
         },
+        "HeightmapTab": {
+            "ColorSchemes": "kleurenschema's",
+            "Heightmap": "Hoogtekaart",
+            "IsDefault": "(Standaard)",
+            "Schemes": {
+                "GrayScale": "Grijstinten",
+                "Hot": "Heet",
+                "Hsv": "Hsv",
+                "Portland": "Portland",
+                "Spring": "Lente"
+            }
+        },
         "InterfaceSettings": "Interface Instellingen",
         "MacrosTab": {
             "Add": "voeg toe",

src/pages/Heightmap.vue

@@ -539,19 +539,7 @@ export default class PageHeightmap extends Mixins(BaseMixin, ControlMixin) {
                 calculable: true,
                 dimension: 2,
                 inRange: {
-                    color: [
-                        '#313695',
-                        '#4575b4',
-                        '#74add1',
-                        '#abd9e9',
-                        '#e0f3f8',
-                        '#ffffbf',
-                        '#fee090',
-                        '#fdae61',
-                        '#f46d43',
-                        '#d73027',
-                        '#a50026',
-                    ],
+                    color: this.colorMap,
                 },
                 seriesIndex: this.visualMapSeriesIndex,
                 left: this.isMobile ? 10 : 30,
@@ -1069,6 +1057,10 @@ export default class PageHeightmap extends Mixins(BaseMixin, ControlMixin) {
         }
     }
 
+    get colorMap(): string[] {
+        return this.$store.getters['gui/heightmap/getActiveColorSchemeList']
+    }
+
     tooltipFormatter(data: any): string {
         const outputArray: string[] = []
         outputArray.push('<b>' + data.seriesName + '</b>')

src/store/gui/heightmap/actions.ts

@@ -0,0 +1,20 @@
+import { ActionTree } from 'vuex'
+import { RootState } from '../../types'
+import { HeightmapState } from './types'
+
+export const actions: ActionTree<HeightmapState, RootState> = {
+    saveActiveColorScheme({ commit }, payload: string) {
+        commit('saveActiveColorScheme', payload)
+    },
+
+    saveSetting({ dispatch }, payload) {
+        dispatch(
+            'gui/saveSetting',
+            {
+                name: 'heightmap.' + payload.name,
+                value: payload.value,
+            },
+            { root: true }
+        )
+    },
+}

src/store/gui/heightmap/getters.ts

@@ -0,0 +1,32 @@
+import { GetterTree } from 'vuex'
+import { HeightmapState } from './types'
+
+export const getters: GetterTree<HeightmapState, any> = {
+    getActiveColorSchemeList: (state): string[] => {
+        switch (state.activecolorscheme.toLowerCase()) {
+            case 'hsv':
+                return ['#0000ff', '#00ffff', '#00ff00', '#ffff00', '#ff0000']
+            case 'spring':
+                return ['#ff00ff', '#ffff00']
+            case 'hot':
+                return ['#000000', '#ff0000', '#ffff00', '#ffffff']
+            case 'grayscale':
+                return ['#ffffff', '#000000']
+            default:
+                // Portland colorscheme is being used as default.
+                return [
+                    '#313695',
+                    '#4575b4',
+                    '#74add1',
+                    '#abd9e9',
+                    '#e0f3f8',
+                    '#ffffbf',
+                    '#fee090',
+                    '#fdae61',
+                    '#f46d43',
+                    '#d73027',
+                    '#a50026',
+                ]
+        }
+    },
+}

src/store/gui/heightmap/index.ts

@@ -0,0 +1,19 @@
+import { Module } from 'vuex'
+import { HeightmapState } from './types'
+import { getters } from './getters'
+import { actions } from './actions'
+
+export const getDefaultState = (): HeightmapState => {
+    return {
+        activecolorscheme: 'portland',
+    }
+}
+
+const state = getDefaultState()
+
+export const heightmap: Module<HeightmapState, any> = {
+    namespaced: true,
+    state,
+    getters,
+    actions,
+}

src/store/gui/heightmap/types.ts

@@ -0,0 +1,3 @@
+export interface HeightmapState {
+    activecolorscheme: string
+}

src/store/gui/index.ts

@@ -15,6 +15,7 @@ import { notifications } from '@/store/gui/notifications'
 import { presets } from '@/store/gui/presets'
 import { remoteprinters } from '@/store/gui/remoteprinters'
 import { webcams } from '@/store/gui/webcams'
+import { heightmap } from '@/store/gui/heightmap'
 
 export const getDefaultState = (): GuiState => {
     return {
@@ -281,5 +282,6 @@ export const gui: Module<GuiState, any> = {
         presets,
         remoteprinters,
         webcams,
+        heightmap,
     },
 }