feat: add monitors (like TMC2240) to Temperature Panel (#1532)

mainsail-crew · Oct 6, 2023 · 5734f1c · 5734f1c
1 parent 7d86df0
commit 5734f1c
Show file tree

Hide file tree

Showing 12 changed files with 104 additions and 20 deletions.
diff --git a/src/components/charts/TempChart.vue b/src/components/charts/TempChart.vue
@@ -313,15 +313,23 @@ export default class TempChart extends Mixins(BaseMixin) {
             const seriesNameTemperature = `${baseSeriesName}-temperature`
             const seriesNameTarget = `${baseSeriesName}-target`
 
-            if (seriesNameTemperature in dataset.value) output += dataset.value[seriesNameTemperature].toFixed(1)
-            if (seriesNameTarget in dataset.value) output += ' / ' + dataset.value[seriesNameTarget].toFixed(1)
+            if (seriesNameTemperature in dataset.value) {
+                const value = dataset.value[seriesNameTemperature]
+                output += value !== null ? value.toFixed(1) : '--'
+            }
+            if (seriesNameTarget in dataset.value) {
+                output += ' / '
+                const value = dataset.value[seriesNameTemperature]
+                output += value !== null ? value.toFixed(1) : '--'
+            }
             output += '°C'
 
             datasetTypesInPercents.forEach((attrKey) => {
                 const seriesName = `${baseSeriesName}-${attrKey}`
                 if (!(seriesName in dataset.value)) return
 
-                const value = (dataset.value[seriesName] * 100).toFixed(0)
+                let value = dataset.value[seriesName]
+                value = value !== null ? (dataset.value[seriesName] * 100).toFixed(0) : '--'
                 output += ` [ ${value}% ]`
             })
 
@@ -356,7 +364,11 @@ export default class TempChart extends Mixins(BaseMixin) {
 
         // reset tempHistory if working sources are smaller than 80%
         if (newVal.length > 0 && newSource.length < this.maxHistory * 0.8) {
-            this.$socket.emit('server.temperature_store', {}, { action: 'printer/tempHistory/init' })
+            this.$socket.emit(
+                'server.temperature_store',
+                { include_monitors: true },
+                { action: 'printer/tempHistory/init' }
+            )
         }
     }
 }

diff --git a/src/components/panels/Temperature/TemperaturePanelList.vue b/src/components/panels/Temperature/TemperaturePanelList.vue
@@ -34,6 +34,13 @@
                         :key="objectName"
                         :object-name="objectName"
                         :is-responsive-mobile="el.is.mobile ?? false" />
+                    <template v-if="!hideMonitors">
+                        <temperature-panel-list-item
+                            v-for="objectName in monitors"
+                            :key="objectName"
+                            :object-name="objectName"
+                            :is-responsive-mobile="el.is.mobile ?? false" />
+                    </template>
                 </tbody>
             </v-simple-table>
         </template>
@@ -70,6 +77,14 @@ export default class TemperaturePanelList extends Mixins(BaseMixin) {
         return this.$store.state.printer?.heaters?.available_sensors ?? []
     }
 
+    get available_monitors() {
+        return this.$store.state.printer?.heaters?.available_monitors ?? []
+    }
+
+    get monitors() {
+        return this.available_monitors.sort(this.sortObjectName)
+    }
+
     get temperature_fans() {
         return this.available_sensors
             .filter((name: string) => name.startsWith('temperature_fan') && !name.startsWith('temperature_fan _'))
@@ -84,6 +99,10 @@ export default class TemperaturePanelList extends Mixins(BaseMixin) {
         return this.$store.state.gui.view.tempchart.hideMcuHostSensors ?? false
     }
 
+    get hideMonitors(): boolean {
+        return this.$store.state.gui.view.tempchart.hideMonitors ?? false
+    }
+
     get temperature_sensors() {
         return this.available_sensors
             .filter((fullName: string) => {

diff --git a/src/components/panels/Temperature/TemperaturePanelListItem.vue b/src/components/panels/Temperature/TemperaturePanelListItem.vue
@@ -68,6 +68,7 @@ import { convertName } from '@/plugins/helpers'
 import {
     mdiFan,
     mdiFire,
+    mdiMemory,
     mdiPrinter3dNozzle,
     mdiPrinter3dNozzleAlert,
     mdiRadiator,
@@ -131,14 +132,17 @@ export default class TemperaturePanelListItem extends Mixins(BaseMixin) {
         // show heater_generic icon
         if (this.objectName.startsWith('heater_generic')) return mdiFire
 
+        // show heater_generic icon
+        if (this.objectName.startsWith('tmc')) return mdiMemory
+
         // show fan icon, if it is a fan
         if (this.isFan) return mdiFan
 
         return mdiThermometer
     }
 
     get color() {
-        return this.$store.getters['printer/tempHistory/getDatasetColor'](this.objectName) ?? ''
+        return this.$store.getters['printer/tempHistory/getDatasetColor'](this.objectName) ?? '#FFFFFF'
     }
 
     get iconColor() {

diff --git a/src/components/panels/Temperature/TemperaturePanelSettings.vue b/src/components/panels/Temperature/TemperaturePanelSettings.vue
@@ -20,6 +20,13 @@
                     hide-details
                     :label="$t('Panels.TemperaturePanel.HideMcuHostSensors')" />
             </v-list-item>
+            <v-list-item class="minHeight36">
+                <v-checkbox
+                    v-model="hideMonitors"
+                    class="mt-0"
+                    hide-details
+                    :label="$t('Panels.TemperaturePanel.HideMonitors')" />
+            </v-list-item>
             <v-list-item class="minHeight36">
                 <v-checkbox
                     v-model="autoscaleTempchart"
@@ -64,5 +71,13 @@ export default class TemperaturePanelSettings extends Mixins(BaseMixin) {
     set hideMcuHostSensors(newVal: boolean) {
         this.$store.dispatch('gui/saveSetting', { name: 'view.tempchart.hideMcuHostSensors', value: newVal })
     }
+
+    get hideMonitors(): boolean {
+        return this.$store.state.gui.view.tempchart.hideMonitors ?? false
+    }
+
+    set hideMonitors(newVal: boolean) {
+        this.$store.dispatch('gui/saveSetting', { name: 'view.tempchart.hideMonitors', value: newVal })
+    }
 }
 </script>
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -684,6 +684,7 @@
             },
             "Headline": "Temperatures",
             "HideMcuHostSensors": "Hide Host/MCU Sensors",
+            "HideMonitors": "Hide Monitors",
             "Max": "max",
             "Min": "min",
             "Name": "Name",

diff --git a/src/store/gui/index.ts b/src/store/gui/index.ts
@@ -239,6 +239,7 @@ export const getDefaultState = (): GuiState => {
                 boolTempchart: true,
                 hiddenDataset: [],
                 hideMcuHostSensors: false,
+                hideMonitors: false,
                 autoscale: false,
                 datasetSettings: {},
             },

diff --git a/src/store/gui/types.ts b/src/store/gui/types.ts
@@ -165,6 +165,7 @@ export interface GuiState {
             boolTempchart: boolean
             hiddenDataset: string[]
             hideMcuHostSensors: boolean
+            hideMonitors: boolean
             autoscale: boolean
             datasetSettings: any
         }

diff --git a/src/store/printer/actions.ts b/src/store/printer/actions.ts
@@ -57,7 +57,12 @@ export const actions: ActionTree<PrinterState, RootState> = {
 
         if (Object.keys(subscripts).length > 0)
             Vue.$socket.emit('printer.objects.subscribe', { objects: subscripts }, { action: 'printer/getInitData' })
-        else Vue.$socket.emit('server.temperature_store', {}, { action: 'printer/tempHistory/init' })
+        else
+            Vue.$socket.emit(
+                'server.temperature_store',
+                { include_monitors: true },
+                { action: 'printer/tempHistory/init' }
+            )
 
         dispatch('socket/removeInitModule', 'printer/initSubscripts', { root: true })
     },
@@ -70,7 +75,7 @@ export const actions: ActionTree<PrinterState, RootState> = {
 
         dispatch('getData', payload)
 
-        Vue.$socket.emit('server.temperature_store', {}, { action: 'printer/tempHistory/init' })
+        Vue.$socket.emit('server.temperature_store', { include_monitors: true }, { action: 'printer/tempHistory/init' })
 
         setTimeout(() => {
             dispatch('initExtruderCanExtrude')

diff --git a/src/store/printer/getters.ts b/src/store/printer/getters.ts
@@ -372,6 +372,10 @@ export const getters: GetterTree<PrinterState, RootState> = {
         return state.heaters?.available_sensors ?? []
     },
 
+    getAvailableMonitors: (state) => {
+        return state.heaters?.available_monitors ?? []
+    },
+
     getFilamentSensors: (state) => {
         const sensorObjectNames = ['filament_switch_sensor', 'filament_motion_sensor']
         const sensors: PrinterStateFilamentSensors[] = []

diff --git a/src/store/printer/tempHistory/actions.ts b/src/store/printer/tempHistory/actions.ts
@@ -28,6 +28,7 @@ export const actions: ActionTree<PrinterTempHistoryState, RootState> = {
         const now = new Date()
         const allHeaters = rootGetters['printer/getAvailableHeaters'] ?? []
         const allSensors = rootGetters['printer/getAvailableSensors'] ?? []
+        const allMonitors = rootGetters['printer/getAvailableMonitors'] ?? []
         const maxHistory = rootGetters['printer/tempHistory/getTemperatureStoreSize']
 
         if (payload !== undefined) {
@@ -44,7 +45,7 @@ export const actions: ActionTree<PrinterTempHistoryState, RootState> = {
                 }
 
                 // break if sensor doesn't exist anymore or start with a _
-                if (!allSensors.includes(key) || nameOnly.startsWith('_')) {
+                if (!(allSensors.includes(key) || allMonitors.includes(key)) || nameOnly.startsWith('_')) {
                     delete payload[key]
                     return
                 }
@@ -54,7 +55,7 @@ export const actions: ActionTree<PrinterTempHistoryState, RootState> = {
                     if (datasetKey + 's' in datasetValues) {
                         const length = maxHistory - datasetValues[datasetKey + 's'].length
                         datasetValues[datasetKey + 's'] = [
-                            ...Array.from({ length }, () => 0),
+                            ...Array.from({ length }, () => null),
                             ...datasetValues[datasetKey + 's'],
                         ]
                     }
@@ -64,7 +65,8 @@ export const actions: ActionTree<PrinterTempHistoryState, RootState> = {
             })
 
             // add missing heaters/sensors
-            allSensors.forEach((key: string) => {
+            const allEntries = allSensors.concat(allMonitors)
+            allEntries.forEach((key: string) => {
                 // break if sensor is already in the cache
                 if (key in payload) return
 
@@ -85,15 +87,15 @@ export const actions: ActionTree<PrinterTempHistoryState, RootState> = {
                     powers?: number[]
                     speeds?: number[]
                 } = {
-                    temperatures: Array(maxHistory).fill(0),
+                    temperatures: Array(maxHistory).fill(null),
                 }
 
                 if (allHeaters.includes(key)) {
-                    addValues.targets = Array(maxHistory).fill(0)
-                    addValues.powers = Array(maxHistory).fill(0)
+                    addValues.targets = Array(maxHistory).fill(null)
+                    addValues.powers = Array(maxHistory).fill(null)
                 } else if (['temperature_fan'].includes(sensorType)) {
-                    addValues.targets = Array(maxHistory).fill(0)
-                    addValues.speeds = Array(maxHistory).fill(0)
+                    addValues.targets = Array(maxHistory).fill(null)
+                    addValues.speeds = Array(maxHistory).fill(null)
                 }
 
                 importData[key] = { ...addValues }
@@ -239,7 +241,11 @@ export const actions: ActionTree<PrinterTempHistoryState, RootState> = {
             window.console.debug('update Source', t0-state.timeLastUpdate)
         }*/
 
-        if (rootState?.printer?.heaters?.available_sensors?.length) {
+        const allSensors = rootGetters['printer/getAvailableSensors'] ?? []
+        const allMonitors = rootGetters['printer/getAvailableMonitors'] ?? []
+        const items = allSensors.concat(allMonitors)
+
+        if (items.length) {
             const now = new Date()
 
             if (state.source.length) {
@@ -255,14 +261,15 @@ export const actions: ActionTree<PrinterTempHistoryState, RootState> = {
                 date: now,
             }
 
-            rootState.printer.heaters.available_sensors.forEach((name: string) => {
+            items.forEach((name: string) => {
                 if (!(rootState.printer && name in rootState.printer)) return
                 const printerObject = { ...rootState.printer[name] }
 
                 datasetTypes.forEach((attrKey) => {
                     if (!(attrKey in printerObject)) return
 
-                    let value = Math.round(printerObject[attrKey] * 10) / 10
+                    let value = printerObject[attrKey]
+                    if (value !== null) value = Math.round(printerObject[attrKey] * 10) / 10
                     if (datasetTypesInPercents.includes(attrKey))
                         value = Math.round(printerObject[attrKey] * 1000) / 1000
 

diff --git a/src/store/printer/tempHistory/getters.ts b/src/store/printer/tempHistory/getters.ts
@@ -145,6 +145,21 @@ export const getters: GetterTree<PrinterTempHistoryState, RootState> = {
                 })
         }
 
+        // hide Monitors, if the option is set to true
+        const hideMonitors = rootState.gui?.view?.tempchart?.hideMonitors ?? false
+        if (hideMonitors) {
+            const monitors = rootState.printer?.heaters?.available_monitors ?? []
+
+            Object.keys(selected)
+                .filter((seriesName) => {
+                    const datasetName = seriesName.slice(0, seriesName.lastIndexOf('-'))
+                    return monitors.includes(datasetName)
+                })
+                .forEach((seriesName) => {
+                    selected[seriesName] = false
+                })
+        }
+
         return selected
     },
 

diff --git a/src/store/variables.ts b/src/store/variables.ts
@@ -1,8 +1,8 @@
 export const defaultLogoColor = '#D41216'
 export const defaultPrimaryColor = '#2196f3'
 
-export const minKlipperVersion = 'v0.11.0-97'
-export const minMoonrakerVersion = 'v0.8.0-38'
+export const minKlipperVersion = 'v0.11.0-257'
+export const minMoonrakerVersion = 'v0.8.0-137'
 export const minBrowserVersions = [{ name: 'safari', version: '16.5.2' }]
 
 export const colorArray = ['#F44336', '#8e379d', '#03DAC5', '#3F51B5', '#ffde03', '#009688', '#E91E63']