let data; let measurements; let date; let value; let newArrayTemp = []; let newArrayHumid = []; let newArrayLight = []; let timeArray = []; // Array to store time values` let valueArray = [1, 2, 3, 4, 5]; let newValueArray = [4, 5, 6]; let myValue = 1; let intervalDelay = 50; const sendorDataNode1 = []; const sendorDataNode2 = []; // const socket = new WebSocket("ws://127.0.0.1:8001"); // Create WebSocket connection. const socket = new WebSocket("ws://145.92.8.114/ws"); /* function openConnection() { // Connection opened socket.addEventListener("open", (event) => { console.log("Connected to the WebSocket server"); socket.send("Hello Server!"); });} // Error handling socket.addEventListener('error', (event) => { console.error('WebSocket error:', event); }); // Message handling socket.addEventListener("message", (event) => { console.log('Message from server:', event.data); }); openConnection(); *////////////////////// function openConnection() { // Open connection socket.addEventListener("open", (event) => { console.log("Connected to the WebSocket server"); socket.send("Hello Server!"); }); // Error handling socket.addEventListener('error', (event) => { console.error('WebSocket error:', event); // Attempt to reconnect setTimeout(openConnection, 1000); // Retry after 1 second }); // Message handling socket.addEventListener("message", (event) => { try { const jsonData = JSON.parse(event.data); // Use the parsed JSON data as needed handleIncomingData(jsonData); } catch (error) { console.error("Error parsing JSON:", error); } }); // Close handling socket.addEventListener('close', (event) => { console.log('Connection closed'); // Attempt to reconnect setTimeout(openConnection, 1000); // Retry after 1 second }); console.log("Connected to the WebSocket server!!!!!!!!"); } // Open the connection openConnection(); function handleIncomingData(data) { nodeNumber = data.node; temperature = data.Temp; humidity = data.Humi; CO2 = data.eCO2; TVOC = data.TVOC; // console.log("Temperature: ", temperature); // console.log("Humidity: ", humidity); // console.log("CO2: ", CO2); // console.log("TVOC: ", TVOC); if (nodeNumber == 1) { sendorDataNode1.push({ 'node': nodeNumber, 'temp': temperature, 'humi': humidity, 'CO2': CO2, 'TVOC': TVOC, }); } else if (nodeNumber == 2) { sendorDataNode2.push({ 'node': nodeNumber, 'temp': temperature, 'humi': humidity, 'CO2': CO2, 'TVOC': TVOC, }); } // sendorData.push({ // 'node': nodeNumber, // 'temp': temperature, // 'humi': humidity, // 'CO2': CO2, // 'TVOC': TVOC, // }); if (nodeNumber == 1) { console.log(sendorDataNode1); } else if (nodeNumber == 2) { console.log(sendorDataNode2); } if (sendorDataNode1.length >= 10) { sendorDataNode1.shift(); } if (sendorDataNode2.length >= 10) { sendorDataNode2.shift(); } } function pushArray(array) { for (let i = 0; i < 10; i++) { array.push(Math.random() * 10); } } // Make lines in the graph of the live data /*Plotly.plot("liveGraph", [ { x: timeArray, // Use timeArray as x values y: valueArray, mode: "lines", line: { color: "#80CAF6" }, name: "Temperature", }, ]); let cnt = 0; // Update the graph every 1 ms let interval = setInterval(function () { var time = new Date(); timeArray.push(new Date()); pushArray(valueArray); var update = { x: [[timeArray]], y: [[newValueArray]], }; var olderTime = time.setMinutes(time.getMinutes() - 1); var futureTime = time.setMinutes(time.getMinutes() + 1); var minuteView = { xaxis: { type: "date", range: [olderTime, futureTime], }, }; Plotly.relayout("liveGraph", minuteView); if (cnt === 10) clearInterval(interval); }, intervalDelay); */ //function for making the html elements for the following html code function nodeData(data, node) { let nodeData = document.createElement("div"); nodeData.innerHTML = data; // nodeData.setAttribute("id", "node" + node); document.body.appendChild(nodeData); // console.log("Hello World"); } // nodeData("Temperature: ", 1); // nodeData("Humidity: ", 2); function createNodeData(node) { // Create main div var nodeData = document.createElement("div"); nodeData.className = "nodeData"; // Create flex-NodeData div var flexNodeData = document.createElement("div"); flexNodeData.className = "flex-NodeData"; // Create p element var pNode = document.createElement("p"); pNode.textContent = "Node " + node; // Append p to flex-NodeData flexNodeData.appendChild(pNode); // Create flex-LiveData div var flexLiveData = document.createElement("div"); flexLiveData.className = "flex-LiveData"; // Create data divs (Temperature, Humidity, Light Intensity) var dataTypes = ["Temperatuur", "Luchtvochtigheid", "Lichtintensiteit"]; var ids = ["temperature", "humidity", "lightIntensity"]; var statusIds = ["tempStatus", "humidStatus", "lightIntensityStatus"]; for (var i = 0; i < dataTypes.length; i++) { var dataDiv = document.createElement("div"); var dataTypeDiv = document.createElement("div"); dataTypeDiv.textContent = dataTypes[i] + ": "; var pElement = document.createElement("p"); pElement.id = ids[i]; pElement.textContent = "Not connected"; dataTypeDiv.appendChild(pElement); dataDiv.appendChild(dataTypeDiv); var statusElement = document.createElement("div"); statusElement.className = "statusElement"; var statusText = document.createElement("p"); statusText.className = "statusText"; statusText.id = statusIds[i]; statusText.textContent = "Not connected"; statusElement.appendChild(statusText); dataDiv.appendChild(statusElement); flexLiveData.appendChild(dataDiv); } // Append flex-LiveData to flex-NodeData flexNodeData.appendChild(flexLiveData); // Create flex-graph div var flexGraph = document.createElement("div"); flexGraph.className = "flex-graph"; var graphDiv = document.createElement("div"); var graphP = document.createElement("p"); graphP.textContent = "Live graph:"; var liveGraph = document.createElement("div"); liveGraph.id = "liveGraph"; graphDiv.appendChild(graphP); graphDiv.appendChild(liveGraph); flexGraph.appendChild(graphDiv); // Append flex-graph to flex-NodeData flexNodeData.appendChild(flexGraph); // Append flex-NodeData to main div nodeData.appendChild(flexNodeData); // Check if nodeDataLocation element exists var nodeDataLocation = document.getElementById("nodeDataLocation"); if (nodeDataLocation) { // Append main div to nodeDataLocation nodeDataLocation.appendChild(nodeData); } else { console.error("Element with ID 'nodeDataLocation' does not exist."); } } // Call the function to create the HTML structure createNodeData(1); createNodeData(2); createNodeData(3); createNodeData(4); // openConnection();