From 6f21e47efa3a3da656433bb0c6b50f6ad6f8ddd8 Mon Sep 17 00:00:00 2001 From: huskee Date: Thu, 14 Dec 2023 20:27:07 +0200 Subject: [PATCH] Add graphing capabilities --- data/index.html | 28 +++++++++++++-------- data/script.js | 65 ++++++++++++++++++++++++++++++++++++++++++++++--- src/main.cpp | 2 +- 3 files changed, 81 insertions(+), 14 deletions(-) diff --git a/data/index.html b/data/index.html index 924558e..a4199e3 100644 --- a/data/index.html +++ b/data/index.html @@ -1,12 +1,20 @@ - - therminator - - -

A:

-

B:

-

time:

- - - \ No newline at end of file + + therminator + + + +

A:

+

B:

+

time:

+
+ + +
+ + + diff --git a/data/script.js b/data/script.js index 487d5c5..5f02446 100644 --- a/data/script.js +++ b/data/script.js @@ -1,3 +1,40 @@ +const maxVals = 15; +const canvasA = document.getElementById("chartA"); +const canvasB = document.getElementById("chartB"); +const options = { + suggestedMin: 0, + suggestedMax: 50, +} +const chartA = new Chart(canvasA, { + type: "line", + data: { + labels: [], + datasets: [ + { + label: "Channel A temperature", + backgroundColor: "red", + borderColor: "red", + data: [], + }, + ], + }, + options: options, +}); +const chartB = new Chart(canvasB, { + type: "line", + data: { + labels: [], + datasets: [ + { + label: "Channel B temperature", + backgroundColor: "blue", + borderColor: "blue", + data: [], + }, + ], + }, + options: options, +}); var gateway = `ws://${window.location.hostname}/ws`; var websocket; // Init web socket when the page loads @@ -30,15 +67,29 @@ function onClose(event) { setTimeout(initWebSocket, 2000); } +function addData(chart, label, data) { + chart.data.labels.push(label); + chart.data.datasets.forEach((dataset) => { + dataset.data.push(data); + }); + chart.update(); +} + +function removeFirstData(chart) { + chart.data.labels.splice(0, 1); + chart.data.datasets.forEach((dataset) => { + dataset.data.shift(); + }); +} // Function that receives the message from the ESP32 with the readings function onMessage(event) { console.log(event.data); - var myObj = JSON.parse(event.data); - var keys = Object.keys(myObj); + var data = JSON.parse(event.data); + var keys = Object.keys(data); for (var i = 0; i < keys.length - 1; i++) { var key = keys[i]; - document.getElementById(key).innerHTML = myObj[key]; + document.getElementById(key).innerHTML = data[key]; } var today = new Date(); var date = @@ -47,4 +98,12 @@ function onMessage(event) { today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds(); var dateTime = date + " " + time; document.getElementById("time").innerHTML = dateTime; + if (chartA.data.labels.length > maxVals) { + removeFirstData(chartA); + } + if (chartB.data.labels.length > maxVals) { + removeFirstData(chartB); + } + addData(chartA, dateTime, data["tempA"]); + addData(chartB, dateTime, data["tempB"]); } diff --git a/src/main.cpp b/src/main.cpp index 0fc3473..a6ff8c9 100644 --- a/src/main.cpp +++ b/src/main.cpp @@ -32,7 +32,7 @@ String checkSensor(Adafruit_MAX31855 &sensor) { return "FAULT: thermocouple short to VCC"; } } - return String(sensor.readCelsius()) + "°C"; + return String(sensor.readCelsius()); } String getSensorReadings() { readings["tempA"] = checkSensor(thermocoupleA);