huskee/therminator
huskee/therminator
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Add graphing capabilities

Browse source
This commit is contained in:
huskee 2023-12-14 20:27:07 +02:00
parent 6e1b1db76e
commit 6f21e47efa
3 changed files with 81 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
data/index.html
View file

@ -4,9 +4,17 @@
<title>therminator</title> <title>therminator</title>
</head> </head>
<body> <body>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<p class="reading">A: <span id="tempA"></span></p> <p class="reading">A: <span id="tempA"></span></p>
<p class="reading">B: <span id="tempB"></span></p> <p class="reading">B: <span id="tempB"></span></p>
<p>time: <span id="time"></span></p> <p>time: <span id="time"></span></p>
<div
class="chart-container"
style="position: relative; height: 40vh; width: 80vw"
>
<canvas id="chartA"></canvas>
<canvas id="chartB"></canvas>
</div>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>
</html> </html>

65
data/script.js
View file

@ -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 gateway = `ws://${window.location.hostname}/ws`;
var websocket; var websocket;
// Init web socket when the page loads // Init web socket when the page loads
@ -30,15 +67,29 @@ function onClose(event) {
setTimeout(initWebSocket, 2000); 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 that receives the message from the ESP32 with the readings
function onMessage(event) { function onMessage(event) {
console.log(event.data); console.log(event.data);
var myObj = JSON.parse(event.data); var data = JSON.parse(event.data);
var keys = Object.keys(myObj); var keys = Object.keys(data);
for (var i = 0; i < keys.length - 1; i++) { for (var i = 0; i < keys.length - 1; i++) {
var key = keys[i]; var key = keys[i];
document.getElementById(key).innerHTML = myObj[key]; document.getElementById(key).innerHTML = data[key];
} }
var today = new Date(); var today = new Date();
var date = var date =
@ -47,4 +98,12 @@ function onMessage(event) {
today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds(); today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var dateTime = date + " " + time; var dateTime = date + " " + time;
document.getElementById("time").innerHTML = dateTime; 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"]);
} }

2
src/main.cpp
View file

@ -32,7 +32,7 @@ String checkSensor(Adafruit_MAX31855 &sensor) {
return "FAULT: thermocouple short to VCC"; return "FAULT: thermocouple short to VCC";
} }
} }
return String(sensor.readCelsius()) + "°C"; return String(sensor.readCelsius());
} }
String getSensorReadings() { String getSensorReadings() {
readings["tempA"] = checkSensor(thermocoupleA); readings["tempA"] = checkSensor(thermocoupleA);