Update interval delay and refactor liveGraph creation

This commit is contained in:
sietse jonker
2024-03-06 21:16:30 +01:00
parent 36277a7e5d
commit bd66f21082

View File

@@ -1,13 +1,13 @@
const sensorData = {}; const sensorData = {};
let intervalDelay = 1000; let intervalDelay = 5000;
// Create WebSocket connection. // Create WebSocket connection.
const socket = new WebSocket("ws://145.92.8.114/ws"); const socket = new WebSocket("ws://145.92.8.114/ws");
let liveGraphs = [];
function openConnection() { function openConnection() {
// Open connection // Open connection
socket.addEventListener("open", (event) => { socket.addEventListener("open", (event) => {
console.log("Connected to the WebSocket server"); console.log("Connected to the WebSocket server");
socket.send("Hello Server!");
}); });
// Error handling // Error handling
@@ -35,14 +35,11 @@ function openConnection() {
// Attempt to reconnect // Attempt to reconnect
setTimeout(openConnection, 1000); // Retry after 1 second setTimeout(openConnection, 1000); // Retry after 1 second
}); });
console.log("Connected to the WebSocket server!!!!!!!!"); console.log("Connected to the WebSocket server");
} }
// Open the connection
openConnection(); openConnection();
function handleIncomingData(data) { function handleIncomingData(data) {
nodeNumber = data.node; nodeNumber = data.node;
temperature = data.Temp; temperature = data.Temp;
@@ -80,16 +77,7 @@ function processNodeData(nodeNumber, temperature, humidity, CO2, TVOC) {
} }
} }
function pushArray(array) {
for (let i = 0; i < 10; i++) {
array.push(Math.random() * 10);
}
}
//function for making the html elements for the following html code //function for making the html elements for the following html code
function nodeData(data, node) { function nodeData(data, node) {
let nodeData = document.createElement("div"); let nodeData = document.createElement("div");
nodeData.innerHTML = data; nodeData.innerHTML = data;
@@ -198,9 +186,9 @@ function updateNodeData(node, temperature, humidity, eCO2, TVOC) {
document.getElementById("CO2Status").textContent = "Connected"; document.getElementById("CO2Status").textContent = "Connected";
document.getElementById("TVOCStatus").textContent = "Connected"; document.getElementById("TVOCStatus").textContent = "Connected";
// Update the graph` // Update the graph
graphNode1.updateData(temperature, humidity, eCO2, TVOC); liveGraphs[node - 1].updateData();
graphNode1.updateGraph(); liveGraphs[node - 1].updateGraph();
} }
// Call the function to create the HTML structure // Call the function to create the HTML structure
@@ -210,11 +198,11 @@ createNodeData(3);
createNodeData(4); createNodeData(4);
// Create a new liveGraph object // Create a new liveGraph object
let graphNode1 = new liveGraph(1); liveGraphs.push(new liveGraph(1));
graphNode1.makeGraph(); // make the graphs
liveGraphs.forEach((graph) => {
graph.makeGraph();
}
);
let graphNode2 = new liveGraph(2);
graphNode2.makeGraph();
// openConnection();