148 lines
3.5 KiB
JavaScript
148 lines
3.5 KiB
JavaScript
const canvasA = document.getElementById("chartA");
|
|
const canvasB = document.getElementById("chartB");
|
|
const maxValsSelect = document.getElementById("maxVals");
|
|
let maxVals = maxValsSelect.options[maxValsSelect.selectedIndex].text;
|
|
const options = {
|
|
plugins: {
|
|
legend: {
|
|
labels: {
|
|
color: "rgba(250, 250, 250, 1)",
|
|
},
|
|
},
|
|
},
|
|
scales: {
|
|
y: {
|
|
grid: {
|
|
color: "rgba(250, 250, 250, 0.5)",
|
|
},
|
|
ticks: {
|
|
color: "rgba(250, 250, 250, 0.5)",
|
|
},
|
|
},
|
|
x: {
|
|
grid: {
|
|
color: "rgba(250, 250, 250, 0.5)",
|
|
},
|
|
ticks: {
|
|
color: "rgba(250, 250, 250, 0.5)",
|
|
},
|
|
},
|
|
},
|
|
};
|
|
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 changeUpdateInterval() {
|
|
const updateSelect = document.getElementById("updateInterval");
|
|
let updateInt = updateSelect.options[updateSelect.selectedIndex].text;
|
|
websocket.send("u" + updateInt);
|
|
location.reload();
|
|
}
|
|
|
|
// 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 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);
|
|
}
|
|
if (isNaN(data["tempA"])) {
|
|
document.getElementById("error-tempA").innerHTML =
|
|
"<h3>" + data["tempA"] + "</h3>";
|
|
} else {
|
|
document.getElementById("error-tempA").innerText = "";
|
|
}
|
|
if (isNaN(data["tempB"])) {
|
|
document.getElementById("error-tempB").innerHTML =
|
|
"<h3>" + data["tempB"] + "</h3>";
|
|
} else {
|
|
document.getElementById("error-tempB").innerText = "";
|
|
}
|
|
addData(chartA, data["time"] / 1000, data["tempA"]);
|
|
addData(chartB, data["time"] / 1000, data["tempB"]);
|
|
}
|