From 9238d9841e111b065a05a906a86227837ccfb414 Mon Sep 17 00:00:00 2001 From: Sietse Jonker Date: Wed, 28 Feb 2024 12:09:34 +0100 Subject: [PATCH 01/13] test commit --- arduino/node-code/node-code-final.ino | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/arduino/node-code/node-code-final.ino b/arduino/node-code/node-code-final.ino index f20a4a0..18d2005 100644 --- a/arduino/node-code/node-code-final.ino +++ b/arduino/node-code/node-code-final.ino @@ -189,7 +189,8 @@ void setup() { // tell sensors to start reading dht.begin(); - sgp.begin(); + sgp.begin(); + pinMode(MICPIN, INPUT); pinMode(DHTPIN, INPUT); From d1714fabec4deefa1eaadbc01e138852c8780103 Mon Sep 17 00:00:00 2001 From: Dano van den Bosch Date: Thu, 29 Feb 2024 16:59:04 +0100 Subject: [PATCH 02/13] Added code for handeling websocket data, And made the html code fariable in a js function --- web/index.html | 119 ++------------------- web/main.js | 282 +++++++++++++++++++++++++++++++------------------ web/styles.css | 45 +++++++- 3 files changed, 229 insertions(+), 217 deletions(-) diff --git a/web/index.html b/web/index.html index 22f8295..99ac84f 100644 --- a/web/index.html +++ b/web/index.html @@ -1,5 +1,6 @@ + @@ -16,15 +17,18 @@ +
+
+ -
+

Live graph:

-
- -
-

Node 2

-
-
-
Temperatuur:

Not connected

-
-
-

Not connected

-
-
-
-
Luchtvochtigheid:

Not connected

-
-
-

Not connected

-
-
-
-
Lichtintensiteit:

Not connected

-
-
-

Not connected

-
-
-
- - -
-
-

Live graph:

-
-
-
-
- -
-
-

Node 3

-
-
-
Temperatuur:

Not connected

-
-
-

Not connected

-
-
-
-
Luchtvochtigheid:

Not connected

-
-
-

Not connected

-
-
-
-
Lichtintensiteit:

Not connected

-
-
-

Not connected

-
-
-
- - -
-
-

Live graph:

-
-
-
-
-

Node 4

-
-
-
Temperatuur:

Not connected

-
-
-

Not connected

-
-
-
-
Luchtvochtigheid:

Not connected

-
-
-

Not connected

-
-
-
-
Lichtintensiteit:

Not connected

-
-
-

Not connected

-
-
-
- - -
-
-

Live graph:

-
-
-
-
-
+ --> - + \ No newline at end of file diff --git a/web/main.js b/web/main.js index 3d37b18..f40b277 100644 --- a/web/main.js +++ b/web/main.js @@ -6,25 +6,105 @@ let newArrayTemp = []; let newArrayHumid = []; let newArrayLight = []; let timeArray = []; // Array to store time values` -let dateArray = [1, 2, 3]; let valueArray = [1, 2, 3, 4, 5]; -let valueArray2 = [1, 2, 3, 4, 5]; -let valueArray3 = [1, 2, 3, 4, 5]; -let valueArray4 = [1, 2, 3, 4, 5]; let newValueArray = [4, 5, 6]; let myValue = 1; let intervalDelay = 50; -//const timeArray = [1,2,3,4]; -//const dateArray = [5,6,7,8]; -//const valueArray = [1,1,1,3]; +// 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) => { + console.log('Message from server:', event.data); + }); + + // Close handling + socket.addEventListener('close', (event) => { + console.log('Connection closed'); + // Attempt to reconnect + setTimeout(openConnection, 1000); // Retry after 1 second + }); +} + +// Open the connection +openConnection(); + + + + +// socket.onopen = function(e) { +// alert("[open] Connection established"); +// alert("Sending to server"); +// socket.send("My name is John"); +// }; + +// socket.onmessage = function(event) { +// // alert(`[message] Data received from server: ${event.data}`); +// console.log("Data received from server: ", event.data); +// }; + +// socket.addEventListener("message", (event) => { +// console.log(event.data); +// }); + +// function openPort() { +// socket.addEventListener('open', function (event) { +// console.log('Connected to the WebSocket server'); +// }); +// console.log("Connected to the WebSocket server"); +// } + +// socket.addEventListener('message', function (event) { +// console.log('Message from server:', event.data); +// // Here you can handle the received message and update your UI accordingly +// }); + + 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", [ +/*Plotly.plot("liveGraph", [ { x: timeArray, // Use timeArray as x values y: valueArray, @@ -34,41 +114,6 @@ Plotly.plot("liveGraph", [ }, ]); -// Make lines in the graph of the live data -Plotly.plot("liveGraph2", [ - { - x: timeArray, // Use timeArray as x values - y: valueArray2, - mode: "lines", - line: { color: "#80CAF6" }, - name: "Temperature", - }, -]); - -// Make lines in the graph of the live data -Plotly.plot("liveGraph3", [ - { - x: timeArray, // Use timeArray as x values - y: valueArray3, - mode: "lines", - line: { color: "#80CAF6" }, - name: "Temperature", - }, -]);// Make lines in the graph of the live data -Plotly.plot("liveGraph4", [ - { - x: timeArray, // Use timeArray as x values - y: valueArray4, - mode: "lines", - line: { color: "#80CAF6" }, - name: "Temperature", - }, -]); - -// Make lines in the graph of the live data - - - let cnt = 0; // Update the graph every 1 ms @@ -97,80 +142,111 @@ let interval = setInterval(function () { if (cnt === 10) clearInterval(interval); }, intervalDelay); -// Update the graph every 1 ms -let interval2 = setInterval(function () { - var time = new Date(); - timeArray.push(new Date()); +*/ - pushArray(valueArray2); +//function for making the html elements for the following html code - var update = { - x: [[time]], - y: [[newValueArray]], - }; +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"); +} - var olderTime = time.setMinutes(time.getMinutes() - 1); - var futureTime = time.setMinutes(time.getMinutes() + 1); +// nodeData("Temperature: ", 1); +// nodeData("Humidity: ", 2); - var minuteView = { - xaxis: { - type: "date", - range: [olderTime, futureTime], - }, - }; - Plotly.relayout("liveGraph2", minuteView); - if (cnt === 1000) clearInterval(interval2); -}, intervalDelay); +function createNodeData(node) { + // Create main div + var nodeData = document.createElement("div"); + nodeData.className = "nodeData"; -// Update the graph every 1 ms -let interval3 = setInterval(function () { - var time = new Date(); - timeArray.push(new Date()); + // Create flex-NodeData div + var flexNodeData = document.createElement("div"); + flexNodeData.className = "flex-NodeData"; - pushArray(valueArray3); + // Create p element + var pNode = document.createElement("p"); + pNode.textContent = "Node " + node; - var update = { - x: [[time]], - y: [[newValueArray]], - }; + // Append p to flex-NodeData + flexNodeData.appendChild(pNode); - var olderTime = time.setMinutes(time.getMinutes() - 1); - var futureTime = time.setMinutes(time.getMinutes() + 1); + // Create flex-LiveData div + var flexLiveData = document.createElement("div"); + flexLiveData.className = "flex-LiveData"; - var minuteView = { - xaxis: { - type: "date", - range: [olderTime, futureTime], - }, - }; - Plotly.relayout("liveGraph3", minuteView); + // Create data divs (Temperature, Humidity, Light Intensity) + var dataTypes = ["Temperatuur", "Luchtvochtigheid", "Lichtintensiteit"]; + var ids = ["temperature", "humidity", "lightIntensity"]; + var statusIds = ["tempStatus", "humidStatus", "lightIntensityStatus"]; - if (cnt === 1000) clearInterval(interval3); -}, intervalDelay); + for (var i = 0; i < dataTypes.length; i++) { + var dataDiv = document.createElement("div"); -// Update the graph every 1 ms -let interval4 = setInterval(function () { - var time = new Date(); - timeArray.push(new Date()); + var dataTypeDiv = document.createElement("div"); + dataTypeDiv.textContent = dataTypes[i] + ": "; - pushArray(valueArray4); + var pElement = document.createElement("p"); + pElement.id = ids[i]; + pElement.textContent = "Not connected"; - var update = { - x: [[time]], - y: [[newValueArray]], - }; + dataTypeDiv.appendChild(pElement); + dataDiv.appendChild(dataTypeDiv); - var olderTime = time.setMinutes(time.getMinutes() - 1); - var futureTime = time.setMinutes(time.getMinutes() + 1); + var statusElement = document.createElement("div"); + statusElement.className = "statusElement"; - var minuteView = { - xaxis: { - type: "date", - range: [olderTime, futureTime], - }, - }; - Plotly.relayout("liveGraph4", minuteView); + var statusText = document.createElement("p"); + statusText.className = "statusText"; + statusText.id = statusIds[i]; + statusText.textContent = "Not connected"; - if (cnt === 1000) clearInterval(interval4); -}, intervalDelay); \ No newline at end of file + 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); \ No newline at end of file diff --git a/web/styles.css b/web/styles.css index 519068f..42e9256 100644 --- a/web/styles.css +++ b/web/styles.css @@ -43,21 +43,56 @@ p1 { border: solid #1f82d3 2px; border-radius: 10px; width: 90%; + } .statusText{ font-size: 20px; } + +/* body{ + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-content: center; +} */ + +#randomShit{ + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-content: center; + border: 2px solid purple; +} + +#nodeDataLocation{ + display: flex; + flex-direction: column; + align-items: center; + /* justify-content: center; */ + /* align-content: center; */ + border: 4px solid blue; + /* padding-bottom: 50%; */ + +} + + + .flex-NodeData { display: flex; margin-left: 1%; margin-right: 1%; - width: 50%; - height: 40%; + justify-content: space-evenly; + /* height: 40%; */ flex-direction: column; border: 3px solid #1f82d3; - border-radius: 20px; + /* border-radius: 20px; */ + /* border: 2px solid red; */ + /* margin-right: 90%; */ + /* width: 150vh; */ + /* padding-right: 40%; */ + /* padding-left: 40%; */ } .nodeData { @@ -78,6 +113,8 @@ justify-content: left; justify-content: space-evenly; gap: 5px; padding: 10px; + + } @@ -89,6 +126,8 @@ justify-content: left; border-radius: 10px; height: fit-content; width: 30%; + + } .flex-graph { From d24744823bd85c3f59a2b1e686a293e447707910 Mon Sep 17 00:00:00 2001 From: Dano van den Bosch Date: Tue, 5 Mar 2024 10:48:15 +0100 Subject: [PATCH 03/13] Set the websocket data to JSON format --- arduino/node-code/node-code-final.ino | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/arduino/node-code/node-code-final.ino b/arduino/node-code/node-code-final.ino index 18d2005..17c17bf 100644 --- a/arduino/node-code/node-code-final.ino +++ b/arduino/node-code/node-code-final.ino @@ -148,10 +148,12 @@ bool checkForError(){ // function to update when interval is met (see intervalCounter variable) void update(){ - webSocket.sendTXT("Temp: " + String(temperature)); - webSocket.sendTXT("Humi: " + String(humidity)); - webSocket.sendTXT("eCO2: " + String(sgp.eCO2)); - webSocket.sendTXT("TVOC: " + String(sgp.TVOC)); + // webSocket.sendTXT("{\"Temp\":\"" + String(temperature) + \",\"Humi\":\" " + String(humidity) + "\",\"eCO2\":\"" + String(sgp.eCO2) + "\",\"TVOC\":\"" + String(sgp.TVOC) + "\"}"); + webSocket.sendTXT("{\"Temp\":\"" + String(temperature) + "\",\"Humi\":\"" + String(humidity) + "\",\"eCO2\":\"" + String(sgp.eCO2) + "\",\"TVOC\":\"" + String(sgp.TVOC) + "\"}"); + // webSocket.sendTXT("Temp: " + String(temperature)); + // webSocket.sendTXT("Humi: " + String(humidity)); + // webSocket.sendTXT("eCO2: " + String(sgp.eCO2)); + // webSocket.sendTXT("TVOC: " + String(sgp.TVOC)); sgp.getIAQBaseline(&eCO2_base, &TVOC_base); From 902031cfd511c991ade604e449153692520c6c22 Mon Sep 17 00:00:00 2001 From: Dano van den Bosch Date: Tue, 5 Mar 2024 10:55:58 +0100 Subject: [PATCH 04/13] Fixt arduino file location --- arduino/node-code/{ => node-code-final}/node-code-final.ino | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename arduino/node-code/{ => node-code-final}/node-code-final.ino (99%) diff --git a/arduino/node-code/node-code-final.ino b/arduino/node-code/node-code-final/node-code-final.ino similarity index 99% rename from arduino/node-code/node-code-final.ino rename to arduino/node-code/node-code-final/node-code-final.ino index 17c17bf..b92d8b4 100644 --- a/arduino/node-code/node-code-final.ino +++ b/arduino/node-code/node-code-final/node-code-final.ino @@ -1,4 +1,4 @@ -// Sietse Jonker & Dano Bosch +// Sietse Jonker & Dano van den Bosch // 27/02/2024 // include these libraries From d127a6001dfc1fc4cca187338d1753550a8861f3 Mon Sep 17 00:00:00 2001 From: Dano van den Bosch Date: Tue, 5 Mar 2024 13:38:09 +0100 Subject: [PATCH 05/13] Add WebSocket connection error handling and JSON in to array --- web/index.html | 2 +- web/main.js | 63 ++++++++++++++++++++++++++++---------------------- 2 files changed, 36 insertions(+), 29 deletions(-) diff --git a/web/index.html b/web/index.html index 99ac84f..7398036 100644 --- a/web/index.html +++ b/web/index.html @@ -7,7 +7,7 @@ Node dev page - + diff --git a/web/main.js b/web/main.js index f40b277..96ae13d 100644 --- a/web/main.js +++ b/web/main.js @@ -10,6 +10,7 @@ let valueArray = [1, 2, 3, 4, 5]; let newValueArray = [4, 5, 6]; let myValue = 1; let intervalDelay = 50; +const sendorData = []; // const socket = new WebSocket("ws://127.0.0.1:8001"); @@ -53,7 +54,14 @@ function openConnection() { // Message handling socket.addEventListener("message", (event) => { - console.log('Message from server:', event.data); + 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 @@ -62,6 +70,7 @@ function openConnection() { // Attempt to reconnect setTimeout(openConnection, 1000); // Retry after 1 second }); + console.log("Connected to the WebSocket server!!!!!!!!"); } // Open the connection @@ -69,34 +78,29 @@ openConnection(); +function handleIncomingData(data) { + 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); -// socket.onopen = function(e) { -// alert("[open] Connection established"); -// alert("Sending to server"); -// socket.send("My name is John"); -// }; - -// socket.onmessage = function(event) { -// // alert(`[message] Data received from server: ${event.data}`); -// console.log("Data received from server: ", event.data); -// }; - -// socket.addEventListener("message", (event) => { -// console.log(event.data); -// }); - -// function openPort() { -// socket.addEventListener('open', function (event) { -// console.log('Connected to the WebSocket server'); -// }); -// console.log("Connected to the WebSocket server"); -// } - -// socket.addEventListener('message', function (event) { -// console.log('Message from server:', event.data); -// // Here you can handle the received message and update your UI accordingly -// }); + sendorData.push({ + 'temp': temperature, + 'humi': humidity, + 'CO2': CO2, + 'TVOC': TVOC, + }); + console.log(sendorData); + if (sendorData.length >= 10) { + sendorData.shift(); + } +} function pushArray(array) { for (let i = 0; i < 10; i++) { @@ -249,4 +253,7 @@ function createNodeData(node) { createNodeData(1); createNodeData(2); createNodeData(3); -createNodeData(4); \ No newline at end of file +createNodeData(4); + + +// openConnection(); From de1ae975a4ccafc9a1b495335dbce1f87bd393dc Mon Sep 17 00:00:00 2001 From: Dano van den Bosch Date: Tue, 5 Mar 2024 14:46:43 +0100 Subject: [PATCH 06/13] added code for muliple nodes --- web/main.js | 49 +++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 39 insertions(+), 10 deletions(-) diff --git a/web/main.js b/web/main.js index 96ae13d..2c9f35f 100644 --- a/web/main.js +++ b/web/main.js @@ -10,7 +10,8 @@ let valueArray = [1, 2, 3, 4, 5]; let newValueArray = [4, 5, 6]; let myValue = 1; let intervalDelay = 50; -const sendorData = []; +const sendorDataNode1 = []; +const sendorDataNode2 = []; // const socket = new WebSocket("ws://127.0.0.1:8001"); @@ -79,6 +80,7 @@ openConnection(); function handleIncomingData(data) { + nodeNumber = data.node; temperature = data.Temp; humidity = data.Humi; CO2 = data.eCO2; @@ -89,16 +91,43 @@ function handleIncomingData(data) { // console.log("CO2: ", CO2); // console.log("TVOC: ", TVOC); - sendorData.push({ - 'temp': temperature, - 'humi': humidity, - 'CO2': CO2, - 'TVOC': TVOC, - }); - console.log(sendorData); + 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, + }); + } - if (sendorData.length >= 10) { - sendorData.shift(); + // 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(); } } From 026bd92d651c666a36a068b0658d81c107b61aba Mon Sep 17 00:00:00 2001 From: Dano van den Bosch Date: Tue, 5 Mar 2024 16:03:15 +0100 Subject: [PATCH 07/13] =?UTF-8?q?I=20did=20it=20=F0=9F=98=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/main.js | 115 ++++++++++++++++++++-------------------------------- 1 file changed, 44 insertions(+), 71 deletions(-) diff --git a/web/main.js b/web/main.js index 2c9f35f..090c1b3 100644 --- a/web/main.js +++ b/web/main.js @@ -10,35 +10,11 @@ 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"); +const sensorData = {}; // 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) => { @@ -85,52 +61,39 @@ function handleIncomingData(data) { 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, - }); + processNodeData(nodeNumber, temperature, humidity, CO2, TVOC); +} + +function processNodeData(nodeNumber, temperature, humidity, CO2, TVOC) { + // Initialize the array for this node if it doesn't exist yet + if (!sensorData[nodeNumber]) { + sensorData[nodeNumber] = []; } - // sendorData.push({ - // 'node': nodeNumber, - // 'temp': temperature, - // 'humi': humidity, - // 'CO2': CO2, - // 'TVOC': TVOC, - // }); + // Push the new data onto the array for this node + sensorData[nodeNumber].push({ + 'node': nodeNumber, + 'temp': temperature, + 'humi': humidity, + 'CO2': CO2, + 'TVOC': TVOC, + }); - if (nodeNumber == 1) { - console.log(sendorDataNode1); - } else if (nodeNumber == 2) { - console.log(sendorDataNode2); - } + // updateNodeData(node, temperature, humidity, lightIntensity) + updateNodeData(nodeNumber, temperature, humidity, CO2, TVOC); - if (sendorDataNode1.length >= 10) { - sendorDataNode1.shift(); - } - if (sendorDataNode2.length >= 10) { - sendorDataNode2.shift(); + // Log the array for this node + console.log(sensorData[nodeNumber]); + + // If the array for this node has more than 10 elements, remove the oldest one + if (sensorData[nodeNumber].length >= 10) { + sensorData[nodeNumber].shift(); } } + + function pushArray(array) { for (let i = 0; i < 10; i++) { array.push(Math.random() * 10); @@ -187,10 +150,6 @@ function nodeData(data, node) { // console.log("Hello World"); } -// nodeData("Temperature: ", 1); -// nodeData("Humidity: ", 2); - - function createNodeData(node) { // Create main div var nodeData = document.createElement("div"); @@ -212,9 +171,9 @@ function createNodeData(node) { 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"]; + var dataTypes = ["Temperatuur", "Luchtvochtigheid", "CO2", "TVOC"]; + var ids = ["temperature", "humidity", "CO2", "TVOC"]; + var statusIds = ["tempStatus", "humidStatus", "CO2Status", "TVOCStatus"]; for (var i = 0; i < dataTypes.length; i++) { var dataDiv = document.createElement("div"); @@ -223,7 +182,7 @@ function createNodeData(node) { dataTypeDiv.textContent = dataTypes[i] + ": "; var pElement = document.createElement("p"); - pElement.id = ids[i]; + pElement.id = ids[i] + node; pElement.textContent = "Not connected"; dataTypeDiv.appendChild(pElement); @@ -278,6 +237,20 @@ function createNodeData(node) { } } +function updateNodeData(node, temperature, humidity, eCO2, TVOC) { + // Update the temperature, humidity and light intensity values + document.getElementById("temperature" + node).textContent = temperature; + document.getElementById("humidity" + node).textContent = humidity; + document.getElementById("CO2" + node).textContent = eCO2; + document.getElementById("TVOC" + node).textContent = TVOC; + + // Update the status text + document.getElementById("tempStatus").textContent = "Connected"; + document.getElementById("humidStatus").textContent = "Connected"; + document.getElementById("CO2Status").textContent = "Connected"; + document.getElementById("TVOCStatus").textContent = "Connected"; +} + // Call the function to create the HTML structure createNodeData(1); createNodeData(2); From b971fe0b5492c6a5d896a0837453fe7e1a67044d Mon Sep 17 00:00:00 2001 From: Dano van den Bosch Date: Wed, 6 Mar 2024 11:25:58 +0100 Subject: [PATCH 08/13] dev page documentation added to pages --- docs/.pages | 2 + .../SoftwareDocumentatie/Dev_page.md | 151 ++++++++++++++++++ 2 files changed, 153 insertions(+) create mode 100644 docs/brainstorm/SoftwareDocumentatie/Dev_page.md diff --git a/docs/.pages b/docs/.pages index 2887b9f..5c63f2f 100644 --- a/docs/.pages +++ b/docs/.pages @@ -22,4 +22,6 @@ nav: - Infrastructure: brainstorm/UML-infrastructure - Taskflow: brainstorm/Taskflow - Design: Sp1SchetsProject/FirstDesign + - 🖨️ Software: + - Dev page: brainstrom/SotwareDocumentatie/Dev_page \ No newline at end of file diff --git a/docs/brainstorm/SoftwareDocumentatie/Dev_page.md b/docs/brainstorm/SoftwareDocumentatie/Dev_page.md new file mode 100644 index 0000000..138990e --- /dev/null +++ b/docs/brainstorm/SoftwareDocumentatie/Dev_page.md @@ -0,0 +1,151 @@ + + +### parsing JSON + +```js + const jsonData = JSON.parse(event.data); + // Use the parsed JSON data as needed + handleIncomingData(jsonData); +``` + +### Pro + + +function handleIncomingData(data) { + nodeNumber = data.node; + temperature = data.Temp; + humidity = data.Humi; + CO2 = data.eCO2; + TVOC = data.TVOC; + + processNodeData(nodeNumber, temperature, humidity, CO2, TVOC); +} + +function processNodeData(nodeNumber, temperature, humidity, CO2, TVOC) { + // Initialize the array for this node if it doesn't exist yet + if (!sensorData[nodeNumber]) { + sensorData[nodeNumber] = []; + } + + // Push the new data onto the array for this node + sensorData[nodeNumber].push({ + 'node': nodeNumber, + 'temp': temperature, + 'humi': humidity, + 'CO2': CO2, + 'TVOC': TVOC, + }); + + // updateNodeData(node, temperature, humidity, lightIntensity) + updateNodeData(nodeNumber, temperature, humidity, CO2, TVOC); + + // Log the array for this node + console.log(sensorData[nodeNumber]); + + // If the array for this node has more than 10 elements, remove the oldest one + if (sensorData[nodeNumber].length >= 10) { + sensorData[nodeNumber].shift(); + } +} + +function createNodeData(node) { + // Create main div + var nodeData = document.createElement("div"); + nodeData.className = "nodeData"; + + // Create flex-NodeData div + var flexNodeData = document.createElement("div"); + flexNodeData.clsName = "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", "CO2", "TVOC"]; + var ids = ["temperature", "humidity", "CO2", "TVOC"]; + var statusIds = ["tempStatus", "humidStatus", "CO2Status", "TVOCStatus"]; + + 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] + node; + 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."); + } +} + +function updateNodeData(node, temperature, humidity, eCO2, TVOC) { + // Update the temperature, humidity and light intensity values + document.getElementById("temperature" + node).textContent = temperature; + document.getElementById("humidity" + node).textContent = humidity; + document.getElementById("CO2" + node).textContent = eCO2; + document.getElementById("TVOC" + node).textContent = TVOC; + + // Update the status text + document.getElementById("tempStatus").textContent = "Connected"; + document.getElementById("humidStatus").textContent = "Connected"; + document.getElementById("CO2Status").textContent = "Connected"; + document.getElementById("TVOCStatus").textContent = "Connected"; +} + From 951fc64e6d188f68878c1cf2ac1f6d4263ff70d8 Mon Sep 17 00:00:00 2001 From: Sietse Jonker Date: Wed, 6 Mar 2024 15:03:47 +0100 Subject: [PATCH 09/13] adds graph class --- web/classes.js | 45 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 web/classes.js diff --git a/web/classes.js b/web/classes.js new file mode 100644 index 0000000..03160e5 --- /dev/null +++ b/web/classes.js @@ -0,0 +1,45 @@ +let intervalDelay = 5000; + +class liveGraph { + // Constructor to initialize the graph + constructor(id) { + this.timeArray = [4, 5, 6, 7, 9]; + this.valueArray = [1, 3, 4, 8, 10]; + this.cnt = 0; + this.nodeId = id; + } + + // Fuction to create a graph + makeGraph() { + Plotly.plot("liveGraph", [ + { + x: this.timeArray, // Use timeArray as x values + y: this.valueArray, + mode: "lines", + line: { color: "#80CAF6" }, + name: "Temperature", + }, + ]); + } + + // Function to update the graph with new values + updateGraph() { + let time = new Date(); + this.timeArray.push(new Date()); + this.valueArray.push(Math.random()); + let update = { + x: [[this.timeArray]], + y: [[this.valueArray]], + }; + let olderTime = time.setMinutes(time.getMinutes() - 1); + let futureTime = time.setMinutes(time.getMinutes() + 1); + let minuteView = { + xaxis: { + type: "date", + range: [olderTime, futureTime], + }, + }; + Plotly.relayout("liveGraph", minuteView); + if (this.cnt === 10) clearInterval(interval); + } +} \ No newline at end of file From 8ed556d8569a57692b19126ebc1325556639f493 Mon Sep 17 00:00:00 2001 From: Sietse Jonker Date: Wed, 6 Mar 2024 15:38:46 +0100 Subject: [PATCH 10/13] Refactor liveGraph class and updateNodeData function --- web/classes.js | 31 ++++++++++++++-------- web/index.html | 14 +++------- web/main.js | 70 ++++++++++++-------------------------------------- 3 files changed, 40 insertions(+), 75 deletions(-) diff --git a/web/classes.js b/web/classes.js index 03160e5..3f67eb3 100644 --- a/web/classes.js +++ b/web/classes.js @@ -1,20 +1,21 @@ -let intervalDelay = 5000; - class liveGraph { // Constructor to initialize the graph constructor(id) { - this.timeArray = [4, 5, 6, 7, 9]; - this.valueArray = [1, 3, 4, 8, 10]; - this.cnt = 0; - this.nodeId = id; + this.timeArray = []; + this.tempArray = []; + this.humiArray = []; + this.eco2Array = []; + this.tvocArray = []; + this.cnt = 0; + this.nodeId = "liveGraph" + id; } // Fuction to create a graph makeGraph() { - Plotly.plot("liveGraph", [ + Plotly.plot(this.nodeId, [ { x: this.timeArray, // Use timeArray as x values - y: this.valueArray, + y: this.tempArray, mode: "lines", line: { color: "#80CAF6" }, name: "Temperature", @@ -26,10 +27,10 @@ class liveGraph { updateGraph() { let time = new Date(); this.timeArray.push(new Date()); - this.valueArray.push(Math.random()); + let update = { x: [[this.timeArray]], - y: [[this.valueArray]], + y: [[this.tempArray, this.humiArray, this.eco2Array, this.tvocArray]], }; let olderTime = time.setMinutes(time.getMinutes() - 1); let futureTime = time.setMinutes(time.getMinutes() + 1); @@ -39,7 +40,15 @@ class liveGraph { range: [olderTime, futureTime], }, }; - Plotly.relayout("liveGraph", minuteView); + Plotly.relayout(this.nodeId, minuteView); if (this.cnt === 10) clearInterval(interval); } + + updateData(temperature, humidity, eCO2, TVOC) { + // Update the graph + this.tempArray.push(temperature); + this.humiArray.push(humidity); + this.eco2Array.push(eCO2); + this.tvocArray.push(TVOC); + } } \ No newline at end of file diff --git a/web/index.html b/web/index.html index 7398036..767972c 100644 --- a/web/index.html +++ b/web/index.html @@ -28,7 +28,7 @@ - - + + + \ No newline at end of file diff --git a/web/main.js b/web/main.js index 090c1b3..c3425b9 100644 --- a/web/main.js +++ b/web/main.js @@ -1,17 +1,5 @@ -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 sensorData = {}; - +let intervalDelay = 1000; // Create WebSocket connection. const socket = new WebSocket("ws://145.92.8.114/ws"); @@ -99,46 +87,6 @@ function pushArray(array) { 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 @@ -215,7 +163,7 @@ function createNodeData(node) { graphP.textContent = "Live graph:"; var liveGraph = document.createElement("div"); - liveGraph.id = "liveGraph"; + liveGraph.id = "liveGraph" + node; graphDiv.appendChild(graphP); graphDiv.appendChild(liveGraph); @@ -249,6 +197,13 @@ function updateNodeData(node, temperature, humidity, eCO2, TVOC) { document.getElementById("humidStatus").textContent = "Connected"; document.getElementById("CO2Status").textContent = "Connected"; document.getElementById("TVOCStatus").textContent = "Connected"; + + // Update the graph + graphNode1.updateData(temperature, humidity, eCO2, TVOC); + graphNode1.updateGraph(); + + graphNode2.updateData(temperature, humidity, eCO2, TVOC); + graphNode2.updateGraph(); } // Call the function to create the HTML structure @@ -257,5 +212,12 @@ createNodeData(2); createNodeData(3); createNodeData(4); +// Create a new liveGraph object +let graphNode1 = new liveGraph(1); +graphNode1.makeGraph(); + +let graphNode2 = new liveGraph(2); + +graphNode2.makeGraph(); // openConnection(); From 199283d3e00db24a2a33131382cca55852a75436 Mon Sep 17 00:00:00 2001 From: Sietse Jonker Date: Wed, 6 Mar 2024 15:51:01 +0100 Subject: [PATCH 11/13] Add live graph plots for humidity, eCO2, and TVOC --- web/classes.js | 30 +++++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/web/classes.js b/web/classes.js index 3f67eb3..083f646 100644 --- a/web/classes.js +++ b/web/classes.js @@ -21,6 +21,33 @@ class liveGraph { name: "Temperature", }, ]); + Plotly.plot(this.nodeId, [ + { + x: this.timeArray, // Use timeArray as x values + y: this.humiArray, + mode: "lines", + line: { color: "#80CAF6" }, + name: "Humidity", + }, + ]); + Plotly.plot(this.nodeId, [ + { + x: this.timeArray, // Use timeArray as x values + y: this.eco2Array, + mode: "lines", + line: { color: "#80CAF6" }, + name: "eCO2", + }, + ]); + Plotly.plot(this.nodeId, [ + { + x: this.timeArray, // Use timeArray as x values + y: this.tvocArray, + mode: "lines", + line: { color: "#80CAF6" }, + name: "TVOC", + }, + ]); } // Function to update the graph with new values @@ -30,8 +57,9 @@ class liveGraph { let update = { x: [[this.timeArray]], - y: [[this.tempArray, this.humiArray, this.eco2Array, this.tvocArray]], + y: [[this.tempArray], [this.humiArray], [this.eco2Array], [this.tvocArray]] }; + let olderTime = time.setMinutes(time.getMinutes() - 1); let futureTime = time.setMinutes(time.getMinutes() + 1); let minuteView = { From 63be84e287c8ea2bfddafb67cab3861cffd1e17f Mon Sep 17 00:00:00 2001 From: Sietse Jonker Date: Wed, 6 Mar 2024 15:59:54 +0100 Subject: [PATCH 12/13] Update graph colors and scale for temperature, eCO2, and TVOC --- web/classes.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/web/classes.js b/web/classes.js index 083f646..bea7d93 100644 --- a/web/classes.js +++ b/web/classes.js @@ -17,7 +17,7 @@ class liveGraph { x: this.timeArray, // Use timeArray as x values y: this.tempArray, mode: "lines", - line: { color: "#80CAF6" }, + line: { color: "#FF0000" }, name: "Temperature", }, ]); @@ -35,8 +35,8 @@ class liveGraph { x: this.timeArray, // Use timeArray as x values y: this.eco2Array, mode: "lines", - line: { color: "#80CAF6" }, - name: "eCO2", + line: { color: "#FFA500" }, + name: "eCO2 / 10", }, ]); Plotly.plot(this.nodeId, [ @@ -44,8 +44,8 @@ class liveGraph { x: this.timeArray, // Use timeArray as x values y: this.tvocArray, mode: "lines", - line: { color: "#80CAF6" }, - name: "TVOC", + line: { color: "#000000" }, + name: "TVOC / 10", }, ]); } @@ -76,7 +76,7 @@ class liveGraph { // Update the graph this.tempArray.push(temperature); this.humiArray.push(humidity); - this.eco2Array.push(eCO2); - this.tvocArray.push(TVOC); + this.eco2Array.push(eCO2 / 10); + this.tvocArray.push(TVOC / 10); } } \ No newline at end of file From c14c18deb0b7ede366b5813546cf06ba5b346fb1 Mon Sep 17 00:00:00 2001 From: Sietse Jonker Date: Wed, 6 Mar 2024 17:38:09 +0100 Subject: [PATCH 13/13] Remove commented out code and update graph in main.js --- web/index.html | 29 ----------------------------- web/main.js | 5 +---- 2 files changed, 1 insertion(+), 33 deletions(-) diff --git a/web/index.html b/web/index.html index 767972c..36d76b3 100644 --- a/web/index.html +++ b/web/index.html @@ -26,35 +26,6 @@
- - - - diff --git a/web/main.js b/web/main.js index c3425b9..db1c2e3 100644 --- a/web/main.js +++ b/web/main.js @@ -198,12 +198,9 @@ function updateNodeData(node, temperature, humidity, eCO2, TVOC) { document.getElementById("CO2Status").textContent = "Connected"; document.getElementById("TVOCStatus").textContent = "Connected"; - // Update the graph + // Update the graph` graphNode1.updateData(temperature, humidity, eCO2, TVOC); graphNode1.updateGraph(); - - graphNode2.updateData(temperature, humidity, eCO2, TVOC); - graphNode2.updateGraph(); } // Call the function to create the HTML structure