110 lines
2.6 KiB
JavaScript
110 lines
2.6 KiB
JavaScript
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
|
|
window.addEventListener("load", onload);
|
|
|
|
function onload(event) {
|
|
initWebSocket();
|
|
}
|
|
|
|
function getReadings() {
|
|
websocket.send("getReadings");
|
|
}
|
|
|
|
function initWebSocket() {
|
|
console.log("Trying to open a WebSocket connection...");
|
|
websocket = new WebSocket(gateway);
|
|
websocket.onopen = onOpen;
|
|
websocket.onclose = onClose;
|
|
websocket.onmessage = onMessage;
|
|
}
|
|
|
|
// When websocket is established, call the getReadings() function
|
|
function onOpen(event) {
|
|
console.log("Connection opened");
|
|
getReadings();
|
|
}
|
|
|
|
function onClose(event) {
|
|
console.log("Connection closed");
|
|
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 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 = data[key];
|
|
}
|
|
var today = new Date();
|
|
var date =
|
|
today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate();
|
|
var time =
|
|
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"]);
|
|
}
|