feat: Alias name some printer objects / macro

src/components/TheSettingsMenu.vue

@@ -81,6 +81,7 @@ import SettingsGCodeViewerTab from '@/components/settings/SettingsGCodeViewerTab
 import SettingsEditorTab from '@/components/settings/SettingsEditorTab.vue'
 import SettingsTimelapseTab from '@/components/settings/SettingsTimelapseTab.vue'
 import SettingsNavigationTab from '@/components/settings/SettingsNavigationTab.vue'
+import SettingsAliasTab from '@/components/settings/SettingsAliasTab.vue'
 
 import Panel from '@/components/ui/Panel.vue'
 import {
@@ -101,6 +102,7 @@ import {
     mdiDipSwitch,
     mdiMenu,
     mdiGrid,
+    mdiRenameOutline,
 } from '@mdi/js'
 import SettingsMiscellaneousTab from '@/components/settings/SettingsMiscellaneousTab.vue'
 import SettingsHeightmapTab from '@/components/settings/SettingsHeightmapTab.vue'
@@ -123,6 +125,7 @@ import SettingsHeightmapTab from '@/components/settings/SettingsHeightmapTab.vue
         SettingsMiscellaneousTab,
         SettingsNavigationTab,
         SettingsHeightmapTab,
+        SettingsAliasTab,
     },
 })
 export default class TheSettingsMenu extends Mixins(BaseMixin) {
@@ -211,6 +214,11 @@ export default class TheSettingsMenu extends Mixins(BaseMixin) {
                 name: 'heightmap',
                 title: this.$t('Settings.HeightmapTab.Heightmap'),
             },
+            {
+                icon: mdiRenameOutline,
+                name: 'alias',
+                title: this.$t('Settings.AliasTab.AliasName'),
+            },
         ]
 
         if (this.moonrakerComponents.includes('timelapse')) {

src/components/charts/TempChart.vue

@@ -302,7 +302,7 @@ export default class TempChart extends Mixins(BaseMixin, ThemeMixin) {
 
         mainDatasets.forEach((dataset: any) => {
             const baseSeriesName = dataset.seriesName.substring(0, dataset.seriesName.lastIndexOf('-'))
-            let displayName = baseSeriesName
+            let displayName = this.aliasName(baseSeriesName)
             if (displayName.indexOf(' ') !== -1) {
                 displayName = displayName.substring(displayName.indexOf(' ') + 1)
             }

src/components/inputs/FilamentSensor.vue

@@ -4,7 +4,7 @@
             <v-col class="pb-3">
                 <v-subheader class="_filamentRunout-subheader">
                     <v-icon small class="mr-2">{{ mdiPrinter3dNozzleAlert }}</v-icon>
-                    <span>{{ convertName(name) }}</span>
+                    <span>{{ aliasName(name) }}</span>
                     <v-spacer />
                     <small :class="'mr-3 ' + statusColor + '--text'">{{ statusText }}</small>
                     <v-icon @click="changeSensor">

src/components/inputs/MiscellaneousLight.vue

@@ -175,7 +175,7 @@ export default class MiscellaneousLight extends Mixins(BaseMixin) {
     get name() {
         if (this.group) return convertName(this.group.name)
 
-        return convertName(this.object.name)
+        return this.aliasName(this.object.name)
     }
 
     get colorPickerOptions() {

src/components/inputs/MiscellaneousSlider.vue

@@ -15,7 +15,7 @@
                         {{ mdiLightbulbOutline }}
                     </v-icon>
                     <v-icon v-else-if="type.includes('fan')" small :class="fanClasses">{{ mdiFan }}</v-icon>
-                    <span>{{ convertName(name) }}</span>
+                    <span>{{ aliasName(name) }}</span>
                     <v-spacer />
                     <small v-if="rpm !== null" :class="rpmClasses">{{ Math.round(rpm ?? 0) }} RPM</small>
                     <span v-if="!controllable" class="font-weight-bold">

src/components/mixins/base.ts

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Component from 'vue-class-component'
 import { DateTimeFormatOptions } from 'vue-i18n'
 import { ServerPowerStateDevice } from '@/store/server/power/types'
+import { convertName } from '@/plugins/helpers'
 
 @Component
 export default class BaseMixin extends Vue {
@@ -224,4 +225,10 @@ export default class BaseMixin extends Vue {
 
         return `${date} ${time}`
     }
+
+    aliasName(name: string): string {
+        const aliasNames = this.$store.state.gui.aliasNames
+        if (aliasNames[name] !== undefined) return aliasNames[name]
+        return convertName(name)
+    }
 }

src/components/panels/MacrogroupPanel.vue

@@ -14,6 +14,7 @@
                         v-for="(macro, index) in macros"
                         :key="'macroparam_' + index"
                         :macro="macro"
+                        :alias="macroAliasNames[macro.name]"
                         :color="getColor(macro)"
                         class="mx-1 my-1" />
                 </v-col>
@@ -38,6 +39,10 @@ export default class MacrogroupPanel extends Mixins(BaseMixin) {
 
     @Prop({ required: true }) declare panelId: string
 
+    get macroAliasNames() {
+        return this.$store.state.gui.macroAliasNames
+    }
+
     get macrogroup() {
         return this.$store.getters['gui/macros/getMacrogroup'](this.panelId)
     }

src/components/panels/Temperature/TemperaturePanelListItem.vue

@@ -64,7 +64,7 @@
 import Component from 'vue-class-component'
 import { Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { convertName } from '@/plugins/helpers'
 import {
     mdiFan,
     mdiFire,
@@ -107,7 +107,7 @@
     }
 
     get formatName() {
-        return convertName(this.name)
+        return this.aliasName(this.objectName)
     }
 
     get icon() {

src/components/settings/SettingsAliasTab.vue

@@ -0,0 +1,140 @@
+<template>
+    <div>
+        <v-card flat>
+            <v-card-text>
+                <h3 class="text-h5 mb-3">{{ $t('Settings.AliasTab.AliasName') }}</h3>
+                <div v-for="objectName in heaterObjects" :key="objectName">
+                    <settings-row :title="convertName(objectName)">
+                        <v-text-field v-model="aliasNames[objectName]" hide-details outlined dense></v-text-field>
+                    </settings-row>
+                    <v-divider class="my-2" />
+                </div>
+                <div v-for="objectName in temperature_sensors" :key="objectName">
+                    <settings-row :title="convertName(objectName)">
+                        <v-text-field v-model="aliasNames[objectName]" hide-details outlined dense></v-text-field>
+                    </settings-row>
+                    <v-divider class="my-2" />
+                </div>
+                <div v-for="object in miscellaneous" :key="object.name">
+                    <settings-row :title="convertName(object.name)">
+                        <v-text-field v-model="aliasNames[object.name]" hide-details outlined dense></v-text-field>
+                    </settings-row>
+                    <v-divider class="my-2" />
+                </div>
+                <div v-for="object in lights" :key="object.name">
+                    <settings-row :title="convertName(object.name)">
+                        <v-text-field v-model="aliasNames[object.name]" hide-details outlined dense></v-text-field>
+                    </settings-row>
+                    <v-divider class="my-2" />
+                </div>
+                <div v-for="object in filamentSensors" :key="object.name">
+                    <settings-row :title="convertName(object.name)">
+                        <v-text-field v-model="aliasNames[object.name]" hide-details outlined dense></v-text-field>
+                    </settings-row>
+                    <v-divider class="my-2" />
+                </div>
+            </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 { convertName } from '@/plugins/helpers'
+import _ from 'lodash'
+
+@Component({
+    methods: { convertName },
+    components: {},
+})
+export default class SettingsAliasTab extends Mixins(BaseMixin) {
+    private aliasNames = {}
+
+    @Watch('aliasNames', { deep: true })
+    onAliasNames(val: any) {
+        val = _.omitBy(val, (value) => value == null || false || _.isEmpty(value))
+        this.$store.dispatch('gui/saveSetting', { name: 'aliasNames', value: val })
+    }
+
+    mounted() {
+        this.aliasNames = this.$store.state.gui.aliasNames
+    }
+
+    get available_heaters() {
+        return this.$store.state.printer?.heaters?.available_heaters ?? []
+    }
+
+    get filteredHeaters() {
+        return this.available_heaters
+            .filter((fullName: string) => {
+                const splits = fullName.split(' ')
+                let name = splits[0]
+                if (splits.length > 1) name = splits[1]
+
+                return !name.startsWith('_')
+            })
+            .sort(this.sortObjectName)
+    }
+
+    get available_sensors() {
+        return this.$store.state.printer?.heaters?.available_sensors ?? []
+    }
+
+    get temperature_fans() {
+        return this.available_sensors
+            .filter((name: string) => name.startsWith('temperature_fan') && !name.startsWith('temperature_fan _'))
+            .sort(this.sortObjectName)
+    }
+
+    get temperature_sensors() {
+        return this.available_sensors
+            .filter((fullName: string) => {
+                if (this.available_heaters.includes(fullName)) return false
+                if (this.temperature_fans.includes(fullName)) return false
+                return !this.formatName(fullName).startsWith('_')
+            })
+            .sort(this.sortObjectName)
+    }
+
+    get heaterObjects() {
+        return [...this.filteredHeaters, ...this.temperature_fans]
+    }
+
+    sortObjectName(a: string, b: string) {
+        const splitsA = a.split(' ')
+        let nameA = splitsA[0]
+        if (splitsA.length > 1) nameA = splitsA[1]
+        nameA = nameA.toUpperCase()
+
+        const splitsB = b.split(' ')
+        let nameB = splitsB[0]
+        if (splitsB.length > 1) nameB = splitsB[1]
+        nameB = nameB.toUpperCase()
+
+        if (nameA < nameB) return -1
+        if (nameA > nameB) return 1
+
+        return 0
+    }
+
+    formatName(name: string) {
+        const splits = name.split(' ')
+        if (splits.length > 1) return splits[1]
+        return name
+    }
+
+    get filamentSensors() {
+        return this.$store.getters['printer/getFilamentSensors'] ?? []
+    }
+
+    get miscellaneous() {
+        return this.$store.getters['printer/getMiscellaneous'] ?? []
+    }
+
+    get lights() {
+        return this.$store.getters['printer/getLights'] ?? []
+    }
+}
+</script>

src/components/settings/SettingsMacrosTabExpert.vue

@@ -152,7 +152,7 @@
                             <v-col class="py-2">
                                 <settings-row
                                     :key="'groupMacro_macro_' + index"
-                                    :title="macro.name"
+                                    :title="getMacroName(macro.name)"
                                     :sub-title="getMacroDescription(macro.name)"
                                     :dynamic-slot-width="true">
                                     <template v-if="existsMacro(macro.name)">
@@ -172,6 +172,20 @@
                                             </template>
                                             <span>{{ $t('Settings.MacrosTab.ChangeMacroColor') }}</span>
                                         </v-tooltip>
+                                        <v-tooltip top>
+                                            <template #activator="{ on, attrs }">
+                                                <v-btn
+                                                    small
+                                                    outlined
+                                                    v-bind="attrs"
+                                                    class="ml-3 minwidth-0 px-2"
+                                                    v-on="on"
+                                                    @click="editMacroAliasName(macro)">
+                                                    <v-icon small>{{ mdiRename }}</v-icon>
+                                                </v-btn>
+                                            </template>
+                                            <span>{{ $t('Settings.MacrosTab.MacroAliasName') }}</span>
+                                        </v-tooltip>
                                         <v-tooltip top>
                                             <template #activator="{ on, attrs }">
                                                 <v-btn
@@ -286,6 +300,22 @@
             <v-card-actions class="d-flex justify-end">
                 <v-btn text @click="cancelEditMacrogroup">{{ $t('Settings.Close') }}</v-btn>
             </v-card-actions>
+            <v-dialog v-model="macroAliasNameDialog" max-width="600px">
+                <v-card>
+                    <v-card-title>
+                        {{ $t('Settings.MacrosTab.MacroAliasName') }}
+                    </v-card-title>
+                    <v-card-text>
+                        <settings-row :title="editMacro?.name">
+                            <v-text-field
+                                v-model="macroAliasNames[editMacro?.name]"
+                                hide-details
+                                outlined
+                                dense></v-text-field>
+                        </settings-row>
+                    </v-card-text>
+                </v-card>
+            </v-dialog>
         </template>
     </div>
 </template>
@@ -299,6 +329,7 @@ import SettingsRow from '@/components/settings/SettingsRow.vue'
 import { Debounce } from 'vue-debounce-decorator'
 import { PrinterStateMacro } from '@/store/printer/types'
 import { GuiMacrosStateMacrogroup, GuiMacrosStateMacrogroupMacro } from '@/store/gui/macros/types'
+import _ from 'lodash'
 import {
     mdiDelete,
     mdiSleep,
@@ -308,12 +339,15 @@ import {
     mdiDragVertical,
     mdiPalette,
     mdiPencil,
+    mdiRename,
 } from '@mdi/js'
 
 @Component({
     components: { SettingsRow, draggable },
 })
 export default class SettingsMacrosTabExpert extends Mixins(BaseMixin, ThemeMixin) {
+    private macroAliasNames = {}
+
     /**
      * Icons
      */
@@ -325,6 +359,7 @@ export default class SettingsMacrosTabExpert extends Mixins(BaseMixin, ThemeMixi
     mdiPlus = mdiPlus
     mdiDragVertical = mdiDragVertical
     mdiPalette = mdiPalette
+    mdiRename = mdiRename
 
     private rules = {
         required: (value: string) => value !== '' || 'required',
@@ -333,6 +368,18 @@ export default class SettingsMacrosTabExpert extends Mixins(BaseMixin, ThemeMixi
 
     private boolFormEdit = false
     private editGroupId: string | null = ''
+    private macroAliasNameDialog = false
+    private editMacro: GuiMacrosStateMacrogroupMacro | null = null
+
+    @Watch('macroAliasNames', { deep: true })
+    onMacroAliasNames(val: any) {
+        val = _.omitBy(val, (value) => value == null || false || _.isEmpty(value))
+        this.$store.dispatch('gui/saveSetting', { name: 'macroAliasNames', value: val })
+    }
+
+    mounted(): void {
+        this.macroAliasNames = this.$store.state.gui.macroAliasNames
+    }
 
     get groupColors() {
         return [
@@ -495,6 +542,12 @@ export default class SettingsMacrosTabExpert extends Mixins(BaseMixin, ThemeMixi
         )
     }
 
+    getMacroName(macroname: string) {
+        const aliasMacroName = this.macroAliasNames[macroname]
+        if (aliasMacroName) return aliasMacroName + ' (' + macroname + ')'
+        return macroname
+    }
+
     getMacroDescription(macroname: string) {
         const macro = this.allMacros.find((m: PrinterStateMacro) => m.name.toLowerCase() === macroname.toLowerCase())
         if (!macro) return this.$t('Settings.MacrosTab.DeletedMacro')
@@ -547,5 +600,10 @@ export default class SettingsMacrosTabExpert extends Mixins(BaseMixin, ThemeMixi
         this.boolFormEdit = false
         this.$emit('scrollToTop')
     }
+
+    editMacroAliasName(macro: GuiMacrosStateMacrogroupMacro) {
+        this.editMacro = macro
+        this.macroAliasNameDialog = true
+    }
 }
 </script>