diff --git a/src/components/charts/TempChart.vue b/src/components/charts/TempChart.vue
index bb4c994a5..ea69062c9 100644
--- a/src/components/charts/TempChart.vue
+++ b/src/components/charts/TempChart.vue
@@ -14,11 +14,12 @@ import { convertName } from '@/plugins/helpers'
import Component from 'vue-class-component'
import { Mixins, Watch } from 'vue-property-decorator'
import BaseMixin from '../mixins/base'
-import { PrinterTempHistoryStateSerie, PrinterTempHistoryStateSourceEntry } from '@/store/printer/tempHistory/types'
+import { PrinterTempHistoryStateSourceEntry } from '@/store/printer/tempHistory/types'
import type { ECharts } from 'echarts/core'
import type { ECBasicOption } from 'echarts/types/dist/shared.d'
import { mdiClock } from '@mdi/js'
+import { datasetTypesInPercents } from '@/store/variables'
interface echartsTooltipObj {
[key: string]: any
@@ -33,11 +34,51 @@ export default class TempChart extends Mixins(BaseMixin) {
}
private isVisible = true
- public chartOptions: ECBasicOption = {
- darkMode: true,
- renderer: 'svg',
- animation: false,
- tooltip: {
+ get chartOptions(): ECBasicOption {
+ return {
+ darkMode: true,
+ renderer: 'svg',
+ animation: false,
+ tooltip: this.tooltip,
+ grid: {
+ top: 35,
+ right: this.gridRight,
+ bottom: 30,
+ left: 25,
+ },
+ legend: {
+ animation: false,
+ show: false,
+ selected: this.selectedLegends,
+ },
+ /*dataZoom: [{
+ type: 'inside',
+ }],*/
+ xAxis: {
+ type: 'time',
+ splitNumber: 5,
+ minInterval: 60 * 1000,
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: 'rgba(255, 255, 255, 0.06)',
+ },
+ },
+ axisLabel: {
+ color: 'rgba(255, 255, 255, 0.24)',
+ margin: 10,
+ formatter: this.timeFormat,
+ },
+ },
+ yAxis: this.yAxis,
+ media: this.media,
+ dataset: { source: this.source },
+ series: this.series,
+ }
+ }
+
+ get tooltip() {
+ return {
animation: false,
trigger: 'axis',
backgroundColor: 'rgba(0,0,0,0.9)',
@@ -57,38 +98,11 @@ export default class TempChart extends Mixins(BaseMixin) {
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5
return obj
},
- },
- grid: {
- top: 35,
- right: 15,
- bottom: 30,
- left: 25,
- },
- legend: {
- animation: false,
- show: false,
- selected: {},
- },
- /*dataZoom: [{
- type: 'inside',
- }],*/
- xAxis: {
- type: 'time',
- splitNumber: 5,
- minInterval: 60 * 1000,
- splitLine: {
- show: true,
- lineStyle: {
- color: 'rgba(255, 255, 255, 0.06)',
- },
- },
- axisLabel: {
- color: 'rgba(255, 255, 255, 0.24)',
- margin: 10,
- formatter: this.timeFormat,
- },
- },
- yAxis: [
+ }
+ }
+
+ get yAxis() {
+ return [
{
name: this.$t('Panels.TemperaturePanel.TemperaturesInChart'),
type: 'value',
@@ -158,15 +172,18 @@ export default class TempChart extends Mixins(BaseMixin) {
},
},
},
- ],
- media: [
+ ]
+ }
+
+ get media() {
+ return [
{
query: {
minWidth: 500,
},
option: {
grid: {
- right: 15,
+ right: this.optionGridRight,
left: 40,
},
yAxis: [
@@ -188,11 +205,7 @@ export default class TempChart extends Mixins(BaseMixin) {
],
},
},
- ],
- dataset: {
- source: [],
- },
- series: [],
+ ]
}
get chart(): ECharts | null {
@@ -241,85 +254,34 @@ export default class TempChart extends Mixins(BaseMixin) {
}
}
- mounted() {
- this.initChart()
- this.chartOptions.xAxis.axisLabel.formatter = this.timeFormat
- }
-
- beforeDestroy() {
- if (typeof window === 'undefined') return
- if (this.chart) this.chart.dispose()
- }
+ get gridRight() {
+ if (this.boolDisplayPwmAxis) return 25
- initChart() {
- this.chartOptions.series = this.series
- this.chartOptions.legend.selected = this.selectedLegends
- this.updateChartPwmAxis()
+ return 15
}
- updateChart() {
- if (this.chart && this.isVisible) {
- //const t0 = performance.now()
- const limitDate = new Date(Date.now() - this.maxHistory * 1000)
- let newSource = [...this.source].filter((entry: PrinterTempHistoryStateSourceEntry) => {
- return entry.date >= limitDate
- })
+ get optionGridRight() {
+ if (this.boolDisplayPwmAxis) return 35
- this.chart?.setOption(
- {
- dataset: {
- source: newSource,
- },
- },
- false,
- true
- )
-
- //const t1 = performance.now()
- //window.console.debug('calc chart', (t1-t0).toFixed(), newSource.length, this.source.length)
-
- // reset tempHistory if working sources are smaller than 80%
- if (this.source.length > 0 && newSource.length < this.maxHistory * 0.8) {
- this.$socket.emit('server.temperature_store', {}, { action: 'printer/tempHistory/init' })
- }
- }
+ return 15
}
- updateChartPwmAxis() {
- if (this.boolDisplayPwmAxis) {
- this.chartOptions.yAxis[1].show = true
- this.chartOptions.grid.right = 25
- this.chartOptions.media[0].option.grid.right = 35
- } else {
- this.chartOptions.yAxis[1].show = false
- this.chartOptions.grid.right = 15
- this.chartOptions.media[0].option.grid.right = 15
- }
+ beforeDestroy() {
+ if (typeof window === 'undefined') return
+ if (this.chart) this.chart.dispose()
}
visibilityChanged(isVisible: boolean) {
this.isVisible = isVisible
-
- if (isVisible) {
- this.initChart()
- }
}
tooltipFormatter(datasets: any) {
let output = ''
- const mainDatasets = datasets.filter((dataset: any) => {
- if (dataset.seriesName === 'date') return false
-
- const lastIndex = dataset.seriesName.lastIndexOf('-')
- if (lastIndex === -1) return true
-
- const suffix = dataset.seriesName.slice(lastIndex + 1)
- return !['target', 'power', 'speed'].includes(suffix)
- })
+ const mainDatasets = datasets.filter((dataset: any) => dataset.seriesName.endsWith('-temperature'))
if (datasets.length) {
let outputTime = datasets[0]['axisValueLabel']
- outputTime = outputTime.substr(outputTime.indexOf(' '))
+ outputTime = outputTime.substring(outputTime.indexOf(' '))
output +=
'
' +
@@ -338,24 +300,35 @@ export default class TempChart extends Mixins(BaseMixin) {
}
mainDatasets.forEach((dataset: any) => {
+ const baseSeriesName = dataset.seriesName.substring(0, dataset.seriesName.lastIndexOf('-'))
+ let displayName = baseSeriesName
+ if (displayName.indexOf(' ') !== -1) {
+ displayName = displayName.substring(displayName.indexOf(' ') + 1)
+ }
+
output += '
'
output += '
'
output += dataset.marker
- output += "" + convertName(dataset.seriesName) + ':'
+ output += "" + convertName(displayName) + ':'
output += '
'
output += '
'
- if (dataset.seriesName in dataset.value) output += dataset.value[dataset.seriesName].toFixed(1)
- if (dataset.seriesName + '-target' in dataset.value)
- output += ' / ' + dataset.value[dataset.seriesName + '-target'].toFixed(1)
+ 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)
output += '°C'
- if (dataset.seriesName + '-power' in dataset.value)
- output += ' [ ' + (dataset.value[dataset.seriesName + '-power'] * 100).toFixed(0) + '% ]'
- if (dataset.seriesName + '-speed' in dataset.value)
- output += ' [ ' + (dataset.value[dataset.seriesName + '-speed'] * 100).toFixed(0) + '% ]'
+ datasetTypesInPercents.forEach((attrKey) => {
+ const seriesName = `${baseSeriesName}-${attrKey}`
+ if (!(seriesName in dataset.value)) return
+
+ const value = (dataset.value[seriesName] * 100).toFixed(0)
+ output += ` [ ${value}% ]`
+ })
output += '
'
output += '
'
@@ -364,26 +337,6 @@ export default class TempChart extends Mixins(BaseMixin) {
return output
}
- @Watch('series', { deep: true })
- seriesChanged(newVal: PrinterTempHistoryStateSerie[]) {
- if (this.chart && this.chart?.isDisposed() !== true) {
- this.chart.setOption(
- {
- series: newVal,
- },
- false,
- true
- )
- }
- }
-
- @Watch('source')
- sourceChanged() {
- if (this.chart?.isDisposed() !== true) {
- this.updateChart()
- }
- }
-
@Watch('selectedLegends')
selectedLegendsChanged(newVal: any, oldVal: any) {
if (this.chart?.isDisposed() !== true) {
@@ -396,14 +349,20 @@ export default class TempChart extends Mixins(BaseMixin) {
}
}
- @Watch('boolDisplayPwmAxis')
- boolDisplayPwmAxisChanged() {
- this.updateChartPwmAxis()
- }
+ @Watch('source')
+ sourceChanged(newVal: PrinterTempHistoryStateSourceEntry[]) {
+ // break if chart isn't initialized or not visible
+ if (!this.chart || !this.isVisible) return
+
+ const limitDate = new Date(Date.now() - this.maxHistory * 1000)
+ let newSource = newVal.filter((entry: PrinterTempHistoryStateSourceEntry) => {
+ return entry.date >= limitDate
+ })
- @Watch('hours12Format')
- hours12FormatChanged() {
- this.chartOptions.xAxis.axisLabel.formatter = this.timeFormat
+ // 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' })
+ }
}
}
diff --git a/src/components/panels/Temperature/TemperaturePanelListItem.vue b/src/components/panels/Temperature/TemperaturePanelListItem.vue
index 70d756bd2..ca7c16542 100644
--- a/src/components/panels/Temperature/TemperaturePanelListItem.vue
+++ b/src/components/panels/Temperature/TemperaturePanelListItem.vue
@@ -1,15 +1,17 @@
-
+
{{ icon }}
|
- {{ formatName }} |
+
+ {{ formatName }}
+ |
- {{ state }}
+ {{ formatState }}
{{ $t('Panels.TemperaturePanel.Avg') }}: {{ avgState }} %
@@ -27,79 +29,35 @@
{{ $t('Panels.TemperaturePanel.Min') }}: {{ measured_min_temp }}°C
-
-
+
+ {{ rpm }} RPM
+
+
+ |
+
+
|
+
-
-
diff --git a/src/components/panels/Temperature/TemperaturePanelListItemAdditionalSensor.vue b/src/components/panels/Temperature/TemperaturePanelListItemAdditionalSensor.vue
new file mode 100644
index 000000000..40f1afd7e
--- /dev/null
+++ b/src/components/panels/Temperature/TemperaturePanelListItemAdditionalSensor.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
diff --git a/src/components/panels/Temperature/TemperaturePanelListItemAdditionalSensorValue.vue b/src/components/panels/Temperature/TemperaturePanelListItemAdditionalSensorValue.vue
new file mode 100644
index 000000000..aadc033b1
--- /dev/null
+++ b/src/components/panels/Temperature/TemperaturePanelListItemAdditionalSensorValue.vue
@@ -0,0 +1,70 @@
+
+
+ {{ formatValue }}
+
+
+
+
diff --git a/src/components/panels/Temperature/TemperaturePanelListItemEdit.vue b/src/components/panels/Temperature/TemperaturePanelListItemEdit.vue
new file mode 100644
index 000000000..ed96dfe05
--- /dev/null
+++ b/src/components/panels/Temperature/TemperaturePanelListItemEdit.vue
@@ -0,0 +1,93 @@
+
+
+
+
+
+ {{ mdiCloseThick }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/panels/Temperature/TemperaturePanelListItemEditAdditionalSensor.vue b/src/components/panels/Temperature/TemperaturePanelListItemEditAdditionalSensor.vue
new file mode 100644
index 000000000..1c9d110bd
--- /dev/null
+++ b/src/components/panels/Temperature/TemperaturePanelListItemEditAdditionalSensor.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/components/panels/Temperature/TemperaturePanelListItemEditChartSerie.vue b/src/components/panels/Temperature/TemperaturePanelListItemEditChartSerie.vue
new file mode 100644
index 000000000..ddfbea12f
--- /dev/null
+++ b/src/components/panels/Temperature/TemperaturePanelListItemEditChartSerie.vue
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/components/panels/Temperature/TemperaturePanelSettings.vue b/src/components/panels/Temperature/TemperaturePanelSettings.vue
index df1a73be7..ad9cfc8a8 100644
--- a/src/components/panels/Temperature/TemperaturePanelSettings.vue
+++ b/src/components/panels/Temperature/TemperaturePanelSettings.vue
@@ -51,5 +51,3 @@ export default class TemperaturePanelSettings extends Mixins(BaseMixin) {
}
}
-
-
diff --git a/src/components/panels/TemperaturePanel.vue b/src/components/panels/TemperaturePanel.vue
index ae6b247b5..4acf4e9e8 100644
--- a/src/components/panels/TemperaturePanel.vue
+++ b/src/components/panels/TemperaturePanel.vue
@@ -1,87 +1,28 @@
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ mdiCloseThick }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
-
-
diff --git a/src/store/gui/actions.ts b/src/store/gui/actions.ts
index b5ed974c3..e8070a9c0 100644
--- a/src/store/gui/actions.ts
+++ b/src/store/gui/actions.ts
@@ -468,4 +468,41 @@ export const actions: ActionTree
= {
announcementDismissFlag(_, payload) {
window.console.log(payload)
},
+
+ setChartDatasetStatus(
+ { commit, dispatch, state },
+ payload: { objectName: string; dataset: string; value: boolean }
+ ) {
+ commit('setChartDatasetStatus', payload)
+
+ dispatch('updateSettings', {
+ keyName: 'view.tempchart.datasetSettings',
+ newVal: state.view.tempchart.datasetSettings,
+ })
+ },
+
+ setDatasetAdditionalSensorStatus(
+ { commit, dispatch, state },
+ payload: { objectName: string; dataset: string; value: boolean }
+ ) {
+ commit('setDatasetAdditionalSensorStatus', payload)
+
+ dispatch('updateSettings', {
+ keyName: 'view.tempchart.datasetSettings',
+ newVal: state.view.tempchart.datasetSettings,
+ })
+ },
+
+ setChartColor({ commit, dispatch, state }, payload: { objectName: string; value: boolean }) {
+ commit('setChartDatasetStatus', {
+ objectName: payload.objectName,
+ dataset: 'color',
+ value: payload.value,
+ })
+
+ dispatch('updateSettings', {
+ keyName: 'view.tempchart.datasetSettings',
+ newVal: state.view.tempchart.datasetSettings,
+ })
+ },
}
diff --git a/src/store/gui/getters.ts b/src/store/gui/getters.ts
index 9795085d8..f114cb3af 100644
--- a/src/store/gui/getters.ts
+++ b/src/store/gui/getters.ts
@@ -60,10 +60,9 @@ export const getters: GetterTree = {
allPanels = allPanels.filter((name) => name !== 'extruder-control')
}
- // remove temperature panel, if heaters & sensors < 1
- const printerAvailableHeaters = rootGetters['printer/getAvailableHeaters']
- const printerTemperatureSensorKeys = rootGetters['printer/getTemperatureSensorKeys']
- if (printerAvailableHeaters.length + printerTemperatureSensorKeys.length < 1) {
+ // remove temperature panel, if sensors < 1
+ const printerTemperatureSensors = rootState.printer?.heaters?.available_sensors ?? []
+ if (printerTemperatureSensors.length < 1) {
allPanels = allPanels.filter((name) => name !== 'temperature')
}
diff --git a/src/store/gui/mutations.ts b/src/store/gui/mutations.ts
index bbbce54f9..2fcc87e50 100644
--- a/src/store/gui/mutations.ts
+++ b/src/store/gui/mutations.ts
@@ -89,4 +89,43 @@ export const mutations: MutationTree = {
layoutArray.splice(payload.index, 1)
Vue.set(state.dashboard, payload.layoutname, layoutArray)
},
+
+ setChartDatasetStatus(state, payload: { objectName: string; dataset: string; value: boolean }) {
+ // set new value if object doesn't exist in view.tempchart.datasetSettings
+ if (!(payload.objectName in state.view.tempchart.datasetSettings)) {
+ const newVal: { [key: string]: any } = {}
+ newVal[payload.dataset] = payload.value
+
+ Vue.set(state.view.tempchart.datasetSettings, payload.objectName, newVal)
+ return
+ }
+
+ Vue.set(state.view.tempchart.datasetSettings[payload.objectName], payload.dataset, payload.value)
+ },
+
+ setDatasetAdditionalSensorStatus(state, payload: { objectName: string; dataset: string; value: boolean }) {
+ // set new value if object doesn't exist in view.tempchart.datasetSettings
+ if (!(payload.objectName in state.view.tempchart.datasetSettings)) {
+ const newVal: { additionalSensors: { [key: string]: any } } = { additionalSensors: {} }
+ newVal.additionalSensors[payload.dataset] = payload.value
+
+ Vue.set(state.view.tempchart.datasetSettings, payload.objectName, newVal)
+ return
+ }
+
+ // set new value if additionalSensor object doesn't exist in view.tempchart.datasetSettings
+ if (!('additionalSensors' in state.view.tempchart.datasetSettings[payload.objectName])) {
+ const newVal: { [key: string]: any } = {}
+ newVal[payload.dataset] = payload.value
+
+ Vue.set(state.view.tempchart.datasetSettings[payload.objectName], 'additionalSensors', newVal)
+ return
+ }
+
+ Vue.set(
+ state.view.tempchart.datasetSettings[payload.objectName].additionalSensors,
+ payload.dataset,
+ payload.value
+ )
+ },
}
diff --git a/src/store/printer/getters.ts b/src/store/printer/getters.ts
index c7ffcc3eb..0b8d1cca6 100644
--- a/src/store/printer/getters.ts
+++ b/src/store/printer/getters.ts
@@ -1,9 +1,4 @@
-import {
- additionalSensors,
- checkKlipperConfigModules,
- opacityHeaterActive,
- opacityHeaterInactive,
-} from '@/store/variables'
+import { checkKlipperConfigModules } from '@/store/variables'
import { GetterTree } from 'vuex'
import {
PrinterState,
@@ -12,31 +7,15 @@ import {
PrinterStateExtruderStepper,
PrinterStateFan,
PrinterStateFilamentSensors,
- PrinterStateHeater,
- PrinterStateTemperatureFan,
PrinterStateMiscellaneous,
PrinterStateMcu,
PrinterStateMacro,
- PrinterStateTemperatureObject,
- PrinterStateTemperatureSensor,
PrinterStateToolchangeMacro,
- PrinterStateAdditionalSensor,
PrinterGetterObject,
PrinterStateLight,
} from '@/store/printer/types'
import { caseInsensitiveSort, formatFrequency, getMacroParams } from '@/plugins/helpers'
import { RootState } from '@/store/types'
-import {
- mdiFan,
- mdiFire,
- mdiPrinter3dNozzle,
- mdiPrinter3dNozzleAlert,
- mdiRadiator,
- mdiRadiatorDisabled,
- mdiThermometer,
- mdiThermometerHigh,
- mdiThermometerLow,
-} from '@mdi/js'
export const getters: GetterTree = {
getPrintPercent: (state, getters, rootState) => {
@@ -196,266 +175,6 @@ export const getters: GetterTree = {
return getters['getMacros'].find((macro: PrinterStateMacro) => macro.name.toLowerCase() === nameLower)
},
- getHeaters: (state, getters, rootState, rootGetters) => {
- const heaters: PrinterStateHeater[] = []
- const colorOff = 'grey darken-2'
- const colorHot = 'grey lighten-5'
-
- if (state.heaters?.available_heaters) {
- for (const [key, value] of Object.entries(state)) {
- if (state.heaters.available_heaters.includes(key)) {
- let name = key
- const nameSplit = key.split(' ')
-
- if (nameSplit.length > 1 && nameSplit[0] === 'heater_generic') name = nameSplit[1]
-
- let icon = mdiPrinter3dNozzleAlert
- let color = colorOff
- if (value.target) color = colorHot
-
- if (nameSplit[0].startsWith('extruder')) {
- const min_extrude_temp =
- key in state.configfile.config && 'min_extrude_temp' in state.configfile.config[key]
- ? parseFloat(state.configfile.config[key].min_extrude_temp)
- : 170
- if (value.temperature >= min_extrude_temp) icon = mdiPrinter3dNozzle
- } else if (nameSplit[0] === 'heater_bed') {
- icon = mdiRadiatorDisabled
- if (value.temperature > 50 || (value.target && value.temperature > value.target - 5))
- icon = mdiRadiator
- } else if (nameSplit[0].startsWith('heater_generic')) icon = mdiFire
-
- if (!name.startsWith('_')) {
- heaters.push({
- name: name,
- type: nameSplit[0] as PrinterStateHeater['type'],
- icon: icon,
- iconColor: color,
- target: Math.round(value.target * 10) / 10,
- temperature: Math.round(value.temperature * 10) / 10,
- additionalSensors: getters.getAdditionalSensors(nameSplit[1]),
- power: Math.round((value.power ?? 0) * 100),
- avgPower: Math.round(getters['tempHistory/getAvgPower'](name) ?? 0),
- presets: rootGetters['gui/presets/getPresetsFromHeater']({ name: key }),
- chartColor: getters['tempHistory/getDatasetColor'](name),
- chartSeries: getters['tempHistory/getSerieNames'](name),
- min_temp: parseInt(state.configfile?.config[key]?.min_temp ?? 0),
- max_temp: parseInt(state.configfile?.config[key]?.max_temp ?? 0),
- })
- }
- }
- }
- }
-
- return caseInsensitiveSort(heaters, 'name')
- },
-
- getTemperatureFans: (state, getters, rootState, rootGetters) => {
- const fans: PrinterStateTemperatureFan[] = []
-
- for (const [key, value] of Object.entries(state)) {
- const nameSplit = key.split(' ')
-
- if (nameSplit[0] === 'temperature_fan' && !nameSplit[1].startsWith('_')) {
- fans.push({
- name: nameSplit[1],
- icon: mdiFan,
- target: Math.round(value.target * 10) / 10,
- temperature: Math.round(value.temperature * 10) / 10,
- additionalSensors: getters.getAdditionalSensors(nameSplit[1]),
- speed: Math.round((value.speed ?? 0) * 100),
- avgSpeed: Math.round(getters['tempHistory/getAvgSpeed'](nameSplit[1]) ?? 0),
- rpm: value.rpm !== null ? Math.round(value.rpm) : null,
- presets: rootGetters['gui/presets/getPresetsFromHeater']({ name: key }),
- chartColor: getters['tempHistory/getDatasetColor'](nameSplit[1]),
- chartSeries: getters['tempHistory/getSerieNames'](nameSplit[1]),
- min_temp: parseInt(state.configfile?.config[key]?.min_temp ?? 0),
- max_temp: parseInt(state.configfile?.config[key]?.max_temp ?? 0),
- })
- }
- }
-
- return caseInsensitiveSort(fans, 'name')
- },
-
- getTemperatureSensorKeys: (state) => {
- return Object.keys(state).filter((name) => name.startsWith('temperature_sensor ') && !name.startsWith('_'))
- },
-
- getTemperatureSensors: (state, getters, rootState, rootGetters) => {
- const sensors: PrinterStateTemperatureSensor[] = []
-
- const tempSensors = getters['getTemperatureSensorKeys']
- tempSensors.forEach((key: string) => {
- const nameSplit = key.split(' ')
- const values = { ...state[key] }
- let icon = mdiThermometer
- const min_temp = state.configfile?.settings[key]?.min_temp ?? 0
- const max_temp = state.configfile?.settings[key]?.max_temp ?? 210
- const split = (max_temp - min_temp) / 3
-
- if (values.temperature <= min_temp + split) icon = mdiThermometerLow
- if (values.temperature >= max_temp - split) icon = mdiThermometerHigh
-
- sensors.push({
- name: nameSplit[1],
- temperature: Math.round(values.temperature * 10) / 10,
- additionalSensors: getters.getAdditionalSensors(nameSplit[1]),
- icon: icon,
- min_temp: min_temp,
- max_temp: max_temp,
- measured_min_temp: Math.round(values.measured_min_temp * 10) / 10,
- measured_max_temp: Math.round(values.measured_max_temp * 10) / 10,
- chartColor: getters['tempHistory/getDatasetColor'](nameSplit[1]),
- chartSeries: getters['tempHistory/getSerieNames'](nameSplit[1]),
- })
- })
-
- if ('z_thermal_adjust' in state) {
- const key = 'z_thermal_adjust'
- const values = state[key]
- let icon = mdiThermometer
- const min_temp = state.configfile?.settings[key]?.min_temp ?? 0
- const max_temp = state.configfile?.settings[key]?.max_temp ?? 210
- const split = (max_temp - min_temp) / 3
-
- if (values.temperature <= min_temp + split) icon = mdiThermometerLow
- if (values.temperature >= max_temp - split) icon = mdiThermometerHigh
-
- const additionalSensorBool = rootGetters['gui/getDatasetAdditionalSensorValue']({
- name: key,
- sensor: 'z_adjust',
- })
-
- const additionalSensor: PrinterStateAdditionalSensor = {
- bool: additionalSensorBool,
- name: 'z_adjust',
- unit: 'μm',
- value: Math.round(values.current_z_adjust * 1000),
- }
-
- if (Math.abs(values.current_z_adjust) >= 0.1) {
- additionalSensor.value = Math.round(values.current_z_adjust * 1000) / 1000
- additionalSensor.unit = 'mm'
- }
-
- sensors.push({
- name: key,
- temperature: Math.round(values.temperature * 10) / 10,
- additionalSensors: [additionalSensor],
- icon,
- min_temp: min_temp,
- max_temp: max_temp,
- measured_min_temp: Math.round(values.measured_min_temp * 10) / 10,
- measured_max_temp: Math.round(values.measured_max_temp * 10) / 10,
- chartColor: getters['tempHistory/getDatasetColor'](key),
- chartSeries: getters['tempHistory/getSerieNames'](key),
- })
- }
-
- return caseInsensitiveSort(sensors, 'name')
- },
-
- getTemperatureObjects: (state, getters, rootState) => {
- const objects: PrinterStateTemperatureObject[] = []
- const disableFanAnimation = rootState.gui?.uiSettings.disableFanAnimation ?? false
-
- const heaters = getters['getHeaters']
- if (heaters.length) {
- heaters.forEach((heater: PrinterStateHeater) => {
- objects.push({
- name: heater.name,
- type: heater.type,
- icon: heater.icon,
- iconColor:
- heater.target > 0
- ? `${heater.chartColor}${opacityHeaterActive}`
- : `${heater.chartColor}${opacityHeaterInactive}`,
- iconClass: '',
- state: heater.target > 0 ? heater.power + '%' : 'off',
- avgState: heater.avgPower + '%',
- temperature: heater.temperature,
- additionalSensors: heater.additionalSensors,
- target: heater.target,
- presets: heater.presets,
- min_temp: heater.min_temp,
- max_temp: heater.max_temp,
- measured_min_temp: null,
- measured_max_temp: null,
- rpm: null,
- rpmClass: '',
- command: 'SET_HEATER_TEMPERATURE',
- commandAttributeName: 'HEATER',
- chartColor: heater.chartColor,
- chartSeries: heater.chartSeries,
- })
- })
- }
-
- const temperature_fans = getters['getTemperatureFans']
- if (temperature_fans.length) {
- temperature_fans.forEach((fan: PrinterStateTemperatureFan) => {
- objects.push({
- name: fan.name,
- type: 'temperature_fan',
- icon: fan.icon,
- iconColor:
- fan.target > 0
- ? `${fan.chartColor}${opacityHeaterActive}`
- : `${fan.chartColor}${opacityHeaterInactive}`,
- iconClass: !disableFanAnimation && fan.speed ? ' icon-rotate' : '',
- state: fan.target > 0 && fan.speed > 0 ? fan.speed + '%' : fan.target > 0 ? 'standby' : 'off',
- avgState: fan.avgSpeed + '%',
- temperature: fan.temperature,
- additionalSensors: fan.additionalSensors,
- target: fan.target,
- presets: fan.presets,
- min_temp: fan.min_temp,
- max_temp: fan.max_temp,
- measured_min_temp: null,
- measured_max_temp: null,
- rpm: fan.rpm,
- rpmClass: fan.rpm === 0 && fan.speed > 0 ? 'red--text' : '',
- command: 'SET_TEMPERATURE_FAN_TARGET',
- commandAttributeName: 'TEMPERATURE_FAN',
- chartColor: fan.chartColor,
- chartSeries: fan.chartSeries,
- })
- })
- }
-
- const temperature_sensors = getters['getTemperatureSensors']
- if (temperature_sensors.length) {
- temperature_sensors.forEach((sensor: PrinterStateTemperatureSensor) => {
- objects.push({
- name: sensor.name,
- type: 'temperature_sensor',
- icon: sensor.icon,
- iconColor: `${sensor.chartColor}${opacityHeaterActive}`,
- iconClass: '',
- state: null,
- avgState: '',
- temperature: sensor.temperature,
- additionalSensors: sensor.additionalSensors,
- target: null,
- presets: [],
- min_temp: sensor.min_temp,
- max_temp: sensor.max_temp,
- measured_min_temp: sensor.measured_min_temp,
- measured_max_temp: sensor.measured_max_temp,
- rpm: null,
- rpmClass: '',
- command: null,
- commandAttributeName: null,
- chartColor: sensor.chartColor,
- chartSeries: sensor.chartSeries,
- })
- })
- }
-
- return objects
- },
-
getPartFanSpeed: (state) => {
return 'fan' in state ? state.fan.speed : 0
},
@@ -646,39 +365,6 @@ export const getters: GetterTree = {
})
},
- getAdditionalSensors: (state, getters, rootState, rootGetters) => (name: string) => {
- const additionValues: PrinterStateAdditionalSensor[] = []
-
- additionalSensors.forEach((sensorName) => {
- if (sensorName + ' ' + name in state) {
- Object.keys(state[sensorName + ' ' + name]).forEach((key) => {
- if (key !== 'temperature') {
- const bool = rootGetters['gui/getDatasetAdditionalSensorValue']({
- name: name,
- sensor: key,
- })
-
- let unit = ''
- if (key === 'pressure') unit = 'hPa'
- if (key === 'humidity') unit = '%'
-
- // eslint-disable-next-line
- const tmp: PrinterStateAdditionalSensor = {
- name: key,
- value: state[sensorName + ' ' + name][key].toFixed(1),
- bool,
- unit,
- }
-
- additionValues.push(tmp)
- }
- })
- }
- })
-
- return additionValues
- },
-
getAvailableHeaters: (state) => {
return state.heaters?.available_heaters ?? []
},
diff --git a/src/store/printer/tempHistory/actions.ts b/src/store/printer/tempHistory/actions.ts
index 2751ae6e8..6b09d0d1c 100644
--- a/src/store/printer/tempHistory/actions.ts
+++ b/src/store/printer/tempHistory/actions.ts
@@ -38,47 +38,65 @@ export const actions: ActionTree = {
const importData: any = {}
objectKeys.forEach((key: string) => {
- if (allSensors.includes(key)) {
- const datasetValues = payload[key]
- datasetTypes.forEach((datasetKey) => {
- if (datasetKey + 's' in datasetValues) {
- const length = maxHistory - datasetValues[datasetKey + 's'].length
- datasetValues[datasetKey + 's'] = [
- ...Array.from({ length }, () => 0),
- ...datasetValues[datasetKey + 's'],
- ]
- }
- })
+ let nameOnly = key
+ if (nameOnly.indexOf(' ') !== -1) {
+ nameOnly = nameOnly.substring(nameOnly.indexOf(' ') + 1)
+ }
+
+ // break if sensor doesn't exist anymore or start with a _
+ if (!allSensors.includes(key) || nameOnly.startsWith('_')) {
+ delete payload[key]
+ return
+ }
- importData[key] = { ...datasetValues }
- } else delete payload[key]
+ const datasetValues = payload[key]
+ datasetTypes.forEach((datasetKey) => {
+ if (datasetKey + 's' in datasetValues) {
+ const length = maxHistory - datasetValues[datasetKey + 's'].length
+ datasetValues[datasetKey + 's'] = [
+ ...Array.from({ length }, () => 0),
+ ...datasetValues[datasetKey + 's'],
+ ]
+ }
+ })
+
+ importData[key] = { ...datasetValues }
})
- //add missing heaters/sensors
+ // add missing heaters/sensors
allSensors.forEach((key: string) => {
- if (!(key in payload)) {
- const keySplits = key.split(' ')
- const sensorType = keySplits[0]
-
- const addValues: {
- temperatures: number[]
- targets?: number[]
- powers?: number[]
- speeds?: number[]
- } = {
- temperatures: Array(maxHistory).fill(0),
- }
+ // break if sensor is already in the cache
+ if (key in payload) return
+
+ let nameOnly = key
+ let sensorType = key
+ const indexOfFirstSpace = key.indexOf(' ')
+ if (indexOfFirstSpace !== -1) {
+ nameOnly = key.substring(indexOfFirstSpace + 1)
+ sensorType = key.substring(0, indexOfFirstSpace)
+ }
- if (allHeaters.includes(key)) {
- addValues.targets = Array(maxHistory).fill(0)
- addValues.powers = Array(maxHistory).fill(0)
- } else if (['temperature_fan'].includes(sensorType)) {
- addValues.targets = Array(maxHistory).fill(0)
- addValues.speeds = Array(maxHistory).fill(0)
- }
+ // break if sensorName starts with a _
+ if (nameOnly.startsWith('_')) return
+
+ const addValues: {
+ temperatures: number[]
+ targets?: number[]
+ powers?: number[]
+ speeds?: number[]
+ } = {
+ temperatures: Array(maxHistory).fill(0),
+ }
- importData[key] = { ...addValues }
+ if (allHeaters.includes(key)) {
+ addValues.targets = Array(maxHistory).fill(0)
+ addValues.powers = Array(maxHistory).fill(0)
+ } else if (['temperature_fan'].includes(sensorType)) {
+ addValues.targets = Array(maxHistory).fill(0)
+ addValues.speeds = Array(maxHistory).fill(0)
}
+
+ importData[key] = { ...addValues }
})
const tempDataset = []
@@ -87,14 +105,12 @@ export const actions: ActionTree = {
date: new Date(now.getTime() - 1000 * (maxHistory - i)),
}
- Object.keys(importData).forEach((key) => {
- let name = key
- if (key.includes(' ')) name = key.split(' ')[1]
-
+ Object.keys(importData).forEach((objectName) => {
datasetTypes.forEach((attrKey) => {
- if (attrKey === 'temperature') tmpDataset[name] = importData[key]['temperatures'][i]
- else if (attrKey + 's' in importData[key])
- tmpDataset[name + '-' + attrKey] = importData[key][attrKey + 's'][i]
+ const importDatasetName = `${attrKey}s`
+
+ if (importDatasetName in importData[objectName])
+ tmpDataset[`${objectName}-${attrKey}`] = importData[objectName][importDatasetName][i]
})
})
@@ -105,36 +121,28 @@ export const actions: ActionTree = {
const tempDatasetKeys = Object.keys(tempDataset[0]).filter((tmp) => tmp !== 'date')
const masterDatasetKeys = tempDatasetKeys
- .filter((tmp) => {
- if (tmp.startsWith('_')) return false
-
- const lastIndex = tmp.lastIndexOf('-')
- if (lastIndex === -1) return true
-
- const suffix = tmp.slice(lastIndex + 1)
- return !['target', 'power', 'speed'].includes(suffix)
- })
+ .filter((name) => name.endsWith('-temperature'))
+ .map((name) => name.slice(0, name.length - 12))
.sort()
const series: PrinterTempHistoryStateSerie[] = []
let colorNumber = 0
masterDatasetKeys.forEach((name: string) => {
+ // get color from store (if exists)
let color = rootGetters['gui/getDatasetValue']({ name: name, type: 'color' })
+ // set color if there is no entry in the store
if (!color) {
- switch (name) {
- case 'heater_bed':
- color = colorHeaterBed
- break
-
- case 'chamber':
- color = colorChamber
- break
-
- default:
- color = colorArray[colorNumber]
- colorNumber++
- break
+ // set heater_bed color
+ if (name === 'heater_bed') color = colorHeaterBed
+
+ // set color for chamber elements
+ if (name.endsWith(' chamber')) color = colorChamber
+
+ // fallback -> get random color from colorArray
+ if (!color) {
+ color = colorArray[colorNumber]
+ colorNumber++
}
}
@@ -142,8 +150,8 @@ export const actions: ActionTree = {
id: series.length + 1,
color: color,
type: 'line',
- name: name,
- encode: { x: 'date', y: name },
+ name: `${name}-temperature`,
+ encode: { x: 'date', y: `${name}-temperature` },
animation: false,
yAxisIndex: 0,
lineStyle: {
@@ -161,61 +169,55 @@ export const actions: ActionTree = {
},
}
+ // add main serie to series
series.push(serie)
datasetTypes.forEach((attrKey) => {
+ // break if datasetTypes is temperature, because its already in the array
+ if (attrKey === 'temperature') return
+
const subName = name + '-' + attrKey
- if (tempDatasetKeys.includes(subName)) {
- const subSerie: PrinterTempHistoryStateSerie = {
- id: series.length + 1,
+ // break if datasetType (target, speed, power) doesn't exist
+ if (!tempDatasetKeys.includes(subName)) return
+
+ // copy serie from temperature and change name
+ // I have to use the JSON copy method, to have no issues with deep attributes
+ const subSerie: PrinterTempHistoryStateSerie = JSON.parse(JSON.stringify(serie))
+ subSerie.id = series.length + 1
+ subSerie.name = subName
+ subSerie.encode.y = subName
+
+ // change settings for target datasets
+ if (attrKey === 'target') {
+ subSerie.lineStyle.width = 0
+ subSerie.emphasis.lineStyle.width = 0
+
+ subSerie.areaStyle = {
color: color,
- type: 'line',
- name: subName,
- encode: { x: 'date', y: subName },
- animation: false,
- yAxisIndex: 0,
- lineStyle: {
- color: color,
- width: 2,
- opacity: 0.1,
- },
- showSymbol: false,
- emphasis: {
- lineStyle: {
- color: color,
- width: 2,
- opacity: 0.1,
- },
- },
+ opacity: 0.1,
}
- if (attrKey === 'target') {
- subSerie.lineStyle.width = 0
- subSerie.emphasis.lineStyle.width = 0
-
- subSerie.areaStyle = {
- color: color,
- opacity: 0.1,
- }
-
- subSerie.emphasis.areaStyle = {
- color: color,
- opacity: 0.1,
- }
- } else if (datasetTypesInPercents.includes(attrKey)) {
- subSerie.yAxisIndex = 1
-
- subSerie.lineStyle.width = 1.5
- subSerie.lineStyle.opacity = 0.75
- subSerie.lineStyle.type = 'dotted'
- subSerie.emphasis.lineStyle.width = 1.5
- subSerie.emphasis.lineStyle.opacity = 0.75
- subSerie.emphasis.lineStyle.type = 'dotted'
+ subSerie.emphasis.areaStyle = {
+ color: color,
+ opacity: 0.1,
}
+ }
+
+ // change axis & line settings for percent datasets
+ if (datasetTypesInPercents.includes(attrKey)) {
+ subSerie.yAxisIndex = 1
- series.push(subSerie)
+ subSerie.lineStyle.width = 1.5
+ subSerie.lineStyle.opacity = 0.75
+ subSerie.lineStyle.type = 'dotted'
+ subSerie.emphasis.lineStyle.width = 1.5
+ subSerie.emphasis.lineStyle.opacity = 0.75
+ subSerie.emphasis.lineStyle.type = 'dotted'
}
+
+ // add sub serie to series
+ series.push(subSerie)
})
})
@@ -253,22 +255,22 @@ export const actions: ActionTree = {
date: now,
}
- rootState.printer.heaters.available_sensors.forEach((key: string) => {
- let name = key
- if (key.includes(' ')) name = key.split(' ')[1]
-
- if (rootState.printer && rootState.printer[key]) {
- if ('temperature' in rootState.printer[key]) data[name] = rootState.printer[key].temperature
- if ('target' in rootState.printer[key])
- data[name + '-target'] = Math.round(rootState.printer[key].target * 10) / 10
- if ('power' in rootState.printer[key])
- data[name + '-power'] = Math.round(rootState.printer[key].power * 1000) / 1000
- if ('speed' in rootState.printer[key])
- data[name + '-speed'] = Math.round(rootState.printer[key].speed * 1000) / 1000
- }
+ rootState.printer.heaters.available_sensors.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
+ if (datasetTypesInPercents.includes(attrKey))
+ value = Math.round(printerObject[attrKey] * 1000) / 1000
+
+ data[`${name}-${attrKey}`] = value
+ })
})
- await commit('addToSource', {
+ commit('addToSource', {
data: data,
maxHistory: rootGetters['printer/tempHistory/getTemperatureStoreSize'],
})
@@ -276,4 +278,8 @@ export const actions: ActionTree = {
//commit('saveLastDate', performance.now())
},
+
+ setColor({ commit }, payload) {
+ commit('setColor', payload)
+ },
}
diff --git a/src/store/printer/tempHistory/getters.ts b/src/store/printer/tempHistory/getters.ts
index 208fc680b..67e150854 100644
--- a/src/store/printer/tempHistory/getters.ts
+++ b/src/store/printer/tempHistory/getters.ts
@@ -8,10 +8,10 @@ import {
import { RootState } from '@/store/types'
export const getters: GetterTree = {
- getDatasetColor: (state) => (name: string) => {
- const dataset = state.series.find((element) => element.name === name)
+ getDatasetColor: (_, getters) => (name: string) => {
+ const dataset = getters.getSeries(`${name}-temperature`)
- return dataset && 'lineStyle' in dataset ? dataset.lineStyle.color : null
+ return dataset?.lineStyle?.color ?? null
},
getSeries: (state) => (name: string) => {
@@ -22,17 +22,10 @@ export const getters: GetterTree = {
const output: string[] = []
const seriesKeys = state.series
.map((serie: PrinterTempHistoryStateSerie) => serie.name)
- .filter((serieName) => serieName.startsWith(name))
+ .filter((serieName) => serieName.startsWith(`${name}-`))
seriesKeys.forEach((seriesKey) => {
- if (seriesKey === name) {
- output.push('temperature')
- return
- }
-
- if (seriesKey.startsWith(name + '-')) {
- output.push(seriesKey.slice(name.length + 1))
- }
+ output.push(seriesKey.slice(name.length + 1))
})
return output
@@ -69,36 +62,51 @@ export const getters: GetterTree = {
return 0
},
- getAvgPower: (state, getters) => (name: string) => {
+ getAvgPower: (_, getters) => (name: string) => {
return getters['getAvg'](name, 'power')
},
- getAvgSpeed: (state, getters) => (name: string) => {
+ getAvgSpeed: (_, getters) => (name: string) => {
return getters['getAvg'](name, 'speed')
},
- getSelectedLegends: (state, getters, rootState, rootGetters) => {
+ getSelectedLegends: (state, _, rootState) => {
interface legends {
[key: string]: boolean
}
const selected: legends = {}
+ const available_sensors = rootState.printer?.heaters?.available_sensors ?? []
+ const viewSettings = rootState.gui?.view?.tempchart?.datasetSettings ?? {}
- if (rootState.printer?.heaters?.available_sensors?.length) {
- rootState.printer?.heaters?.available_sensors.forEach((key: string) => {
- if (rootState.printer && key in rootState.printer) {
- let name = key
- if (key.includes(' ')) name = key.split(' ')[1]
-
- datasetTypes.forEach((datasetType: string) => {
- if (rootState?.printer && rootState?.printer[key] && datasetType in rootState.printer[key]) {
- const tmpName = datasetType === 'temperature' ? name : name + '-' + datasetType
- selected[tmpName] = rootGetters['gui/getDatasetValue']({ name: name, type: datasetType })
- }
- })
- }
+ Object.keys(viewSettings).forEach((key) => {
+ // break if this element doesn't exist in available_sensors
+ if (!available_sensors.includes(key)) return
+
+ Object.keys(viewSettings[key]).forEach((attrKey) => {
+ // break if this element isn't a valid datasetType
+ if (!datasetTypes.includes(attrKey)) return
+
+ const serieName = `${key}-${attrKey}`
+
+ // break if serie in tempchart doesn't exist
+ if (state.series.findIndex((serie) => serie.name === serieName) === -1) return
+
+ // add to selected
+ selected[serieName] = viewSettings[key][attrKey]
})
- }
+ })
+
+ state.series.forEach((serie) => {
+ // break if object is already in the selected list
+ if (Object.keys(selected).includes(serie.name)) return
+
+ // get datasetType from the serie name
+ const datasetType = serie.name.slice(serie.name.lastIndexOf('-') + 1)
+
+ // add default value for this datasetType; all percent series are hidden per default
+ selected[serie.name] = !datasetTypesInPercents.includes(datasetType)
+ })
return selected
},