Update interval delay and refactor liveGraph creation
This commit is contained in:
36
web/main.js
36
web/main.js
@@ -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();
|
|
||||||
|
Reference in New Issue
Block a user