bugfix: count missing update ticks of temp sensor to compensate temp chart

public/config.json

@@ -1,6 +1,6 @@
 {
   "socket": {
-    "hostname": "voron250.local",
+    "hostname": "kossel.local",
     "port": 80
   }
 }

src/components/panels/TempchartPanel.vue

@@ -1,72 +0,0 @@
-<style>
-    #line-chart {
-        height: 250px;
-    }
-</style>
-
-<template>
-    <v-card>
-        <v-list-item>
-            <v-list-item-avatar color="grey"><v-icon dark>mdi-thermometer</v-icon></v-list-item-avatar>
-            <v-list-item-content>
-                <v-list-item-title class="headline">Temperature Chart</v-list-item-title>
-                <v-list-item-subtitle>
-                    <span>{{ heatersCount }} heaters</span>
-                    <span v-if="temperature_fans.length === 1">, {{ temperature_fans.length }} fan</span>
-                    <span v-if="temperature_fans.length > 1">, {{ temperature_fans.length }} fans</span>
-                </v-list-item-subtitle>
-            </v-list-item-content>
-        </v-list-item>
-        <v-divider class="my-2"></v-divider>
-        <v-card-text class="pt-0 pb-2 content">
-            <line-chart :chart-data="chartdata" v-if="loaded"></line-chart>
-        </v-card-text>
-    </v-card>
-</template>
-
-<script>
-    import LineChart from '../../charts/LineChart.js'
-    import { mapGetters, mapState } from 'vuex'
-
-    export default {
-        components: {
-            LineChart
-        },
-        data () {
-            return {
-                loaded: false,
-                chartdata: {
-                    labels: [],
-                    datasets: []
-                }
-            }
-        },
-        computed: {
-            ...mapState({
-                labels: state => state.temperaturChart.labels,
-                datasets: state => state.temperaturChart.datasets,
-            }),
-            ...mapGetters([
-                'heatersCount',
-                'temperature_fans'
-            ])
-        },
-        methods: {
-            fillData () {
-                this.loaded = true;
-                this.chartdata = {
-                    labels: this.labels,
-                    datasets: this.datasets
-                }
-            }
-        },
-        mounted () {
-            this.fillData();
-        },
-        watch: {
-            labels() {
-                this.fillData();
-            }
-        }
-    }
-</script>

src/components/panels/ToolsPanel.vue

@@ -2,6 +2,10 @@
     .heater-row .vertical_align_center {
         margin: auto 0;
     }
+
+    #line-chart {
+        height: 250px;
+    }
 </style>
 
 <template>

src/components/panels/index.js

@@ -3,7 +3,6 @@ import Vue from 'vue'
 import StatusPanel from './StatusPanel.vue'
 import KlippyStatePanel from './KlippyStatePanel.vue'
 import ToolsPanel from './ToolsPanel.vue'
-import TempchartPanel from './TempchartPanel.vue'
 import ControlPanel from "./ControlPanel";
 import ExtruderPanel from "./ExtruderPanel";
 import ZOffsetPanel from "./ZOffsetPanel";
@@ -15,7 +14,6 @@ import Settings from "./Settings/";
 Vue.component('status-panel', StatusPanel);
 Vue.component('klippy-state-panel', KlippyStatePanel);
 Vue.component('tools-panel', ToolsPanel);
-Vue.component('tempchart-panel', TempchartPanel);
 Vue.component('control-panel', ControlPanel);
 Vue.component('extruder-panel', ExtruderPanel);
 Vue.component('zoffset-panel', ZOffsetPanel);

src/store/actions.js

@@ -119,7 +119,7 @@ export default {
             if (
                 nameSplit[0] === "temperature_fan" ||
                 nameSplit[0] === "temperature_probe" ||
-                nameSplit[0] === "temperature_sensors" ||
+                nameSplit[0] === "temperature_sensor" ||
                 nameSplit[0] === "filament_switch_sensor" ||
                 nameSplit[0] === "bed_mesh"
             )  subscripts = {...subscripts, [key]: []}

src/store/index.js

@@ -117,6 +117,7 @@ export default new Vuex.Store({
         temperaturChart: {
             labels: [],
             datasets: [],
+            updateTicks: []
         },
         helplist: [],
         filetree: [

src/store/mutations.js

@@ -40,6 +40,7 @@ export default {
     setPrinterData(state, data) {
         if (data.requestParams) delete data.requestParams;
         let now = Date.now();
+        let updateTicks = false;
 
         Object.entries(data).forEach(([key, value]) => {
             Vue.set(state.printer, key, value);
@@ -47,9 +48,28 @@ export default {
             if (Array.isArray(state.object.heaters.available_heaters) && state.object.heaters.available_heaters.length) {
                 let keySplit = key.split(" ");
 
-                if (state.object.heaters.available_heaters.includes(key) || keySplit[0] === "temperature_fan" || keySplit[0] === "temperature_probe") {
+                if (
+                    state.object.heaters.available_heaters.includes(key) ||
+                    keySplit[0] === "temperature_fan" ||
+                    keySplit[0] === "temperature_sensor" ||
+                    keySplit[0] === "temperature_probe") {
                     if (keySplit[0] === "temperature_fan") key = keySplit[1];
-                    if (keySplit[0] === "temperature_probe") key = "probe";
+                    else if (keySplit[0] === "temperature_sensor") key = keySplit[1];
+                    else if (keySplit[0] === "temperature_probe") key = "probe";
+
+                    // increment update ticks array only 1 time per setPrinterData with heaters/sensors
+                    if (!updateTicks) {
+                        for (let index in state.temperaturChart.updateTicks) {
+                            state.temperaturChart.updateTicks[index] += 1;
+                        }
+
+                        updateTicks = true;
+                    }
+
+                    // add object to update ticks array if it doesn't exists
+                    if (state.temperaturChart.updateTicks[key] === undefined) {
+                        state.temperaturChart.updateTicks[key] = 1;
+                    }
 
                     this.commit('addTemperatureChartValue', { name: key, value: value, time: now });
                 }
@@ -105,8 +125,23 @@ export default {
         }
         let index_target =  state.temperaturChart.datasets.findIndex(element => element.label === payload.name+'_target');
 
-        if (index >= 0) state.temperaturChart.datasets[index].data.push(payload.value.temperature.toFixed(1));
-        if (index_target >= 0) state.temperaturChart.datasets[index_target].data.push(payload.value.target.toFixed(1));
+        let ticks = 1;
+
+        // find missing ticks in update ticks array and reset it
+        if (state.temperaturChart.updateTicks[payload.name] !== undefined) {
+            ticks = state.temperaturChart.updateTicks[payload.name];
+            state.temperaturChart.updateTicks[payload.name] = 0;
+        }
+
+        // update current temp in temperature chart
+        if (index >= 0) {
+            for (let i = 0; i < ticks; i++) state.temperaturChart.datasets[index].data.push(payload.value.temperature.toFixed(1));
+        }
+
+        // update target temp in temperature chart
+        if (index_target >= 0) {
+            for (let i = 0; i < ticks; i++) state.temperaturChart.datasets[index_target].data.push(payload.value.target.toFixed(1));
+        }
 
         if (index >= 0 && state.temperaturChart.datasets[index].data.length > temperaturChartSampleLength) {
             state.temperaturChart.datasets[index].data = state.temperaturChart.datasets[index].data.splice(state.temperaturChart.datasets[index].data.length - temperaturChartSampleLength)