From 36277a7e5debc0dc24e49950e044a663bb2483f8 Mon Sep 17 00:00:00 2001 From: Sietse Jonker Date: Wed, 6 Mar 2024 20:56:19 +0100 Subject: [PATCH 01/10] Update file index.html --- web/index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/web/index.html b/web/index.html index 36d76b3..29a1abc 100644 --- a/web/index.html +++ b/web/index.html @@ -29,6 +29,5 @@ - \ No newline at end of file From bd66f210825fdeca3b59f99dc5ccff7bff260211 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Wed, 6 Mar 2024 21:16:30 +0100 Subject: [PATCH 02/10] Update interval delay and refactor liveGraph creation --- web/main.js | 36 ++++++++++++------------------------ 1 file changed, 12 insertions(+), 24 deletions(-) diff --git a/web/main.js b/web/main.js index db1c2e3..3aeb144 100644 --- a/web/main.js +++ b/web/main.js @@ -1,13 +1,13 @@ const sensorData = {}; -let intervalDelay = 1000; +let intervalDelay = 5000; // Create WebSocket connection. const socket = new WebSocket("ws://145.92.8.114/ws"); +let liveGraphs = []; function openConnection() { // Open connection socket.addEventListener("open", (event) => { console.log("Connected to the WebSocket server"); - socket.send("Hello Server!"); }); // Error handling @@ -35,14 +35,11 @@ function openConnection() { // Attempt to reconnect 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(); - - function handleIncomingData(data) { nodeNumber = data.node; 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 nodeData(data, node) { let nodeData = document.createElement("div"); nodeData.innerHTML = data; @@ -198,9 +186,9 @@ function updateNodeData(node, temperature, humidity, eCO2, TVOC) { document.getElementById("CO2Status").textContent = "Connected"; document.getElementById("TVOCStatus").textContent = "Connected"; - // Update the graph` - graphNode1.updateData(temperature, humidity, eCO2, TVOC); - graphNode1.updateGraph(); + // Update the graph + liveGraphs[node - 1].updateData(); + liveGraphs[node - 1].updateGraph(); } // Call the function to create the HTML structure @@ -210,11 +198,11 @@ createNodeData(3); createNodeData(4); // 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(); From 656cd83aeec1b18baa98584d668594454fe97290 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Wed, 6 Mar 2024 21:27:19 +0100 Subject: [PATCH 03/10] Refactor CSS styles and remove unnecessary code --- web/styles.css | 53 +++++++++++++------------------------------------- 1 file changed, 14 insertions(+), 39 deletions(-) diff --git a/web/styles.css b/web/styles.css index 42e9256..2f8370a 100644 --- a/web/styles.css +++ b/web/styles.css @@ -33,11 +33,6 @@ p1 { text-align: begin; } -.apiGraph{ - height: 100%; - width: 90%; -} - .statusElement{ display:inline-block; border: solid #1f82d3 2px; @@ -50,35 +45,6 @@ p1 { 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%; @@ -87,21 +53,32 @@ p1 { /* height: 40%; */ flex-direction: column; border: 3px solid #1f82d3; - /* border-radius: 20px; */ + border-radius: 20px; + /* width: 90%; */ /* border: 2px solid red; */ /* margin-right: 90%; */ - /* width: 150vh; */ /* padding-right: 40%; */ /* padding-left: 40%; */ } +#nodeDataLocation{ + display: flex; + flex-direction: column; + align-items: center; + align-content: center; + border: 4px solid rgb(0, 0, 255); + /* padding-bottom: 50%; */ + +} + + + .nodeData { display: flex; justify-content: left; flex-direction: row; margin-bottom: 2%; margin-top: 1%; - /* border: 2px solid red; */ } @@ -113,8 +90,6 @@ justify-content: left; justify-content: space-evenly; gap: 5px; padding: 10px; - - } From 6070ba7480f040a3527746f30c745315597df806 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Thu, 7 Mar 2024 11:22:25 +0100 Subject: [PATCH 04/10] edits css --- web/styles.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/web/styles.css b/web/styles.css index 2f8370a..06cb22f 100644 --- a/web/styles.css +++ b/web/styles.css @@ -63,7 +63,8 @@ p1 { #nodeDataLocation{ display: flex; - flex-direction: column; + flex-direction: row; + flex-wrap: wrap; align-items: center; align-content: center; border: 4px solid rgb(0, 0, 255); From 2e394f3d4510f691aa9c3efc92da2da5fd36ce20 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Thu, 7 Mar 2024 12:57:54 +0100 Subject: [PATCH 05/10] Update liveGraphs to include temperature, humidity, eCO2, and TVOC data --- web/main.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/web/main.js b/web/main.js index 3aeb144..7c39a74 100644 --- a/web/main.js +++ b/web/main.js @@ -187,7 +187,7 @@ function updateNodeData(node, temperature, humidity, eCO2, TVOC) { document.getElementById("TVOCStatus").textContent = "Connected"; // Update the graph - liveGraphs[node - 1].updateData(); + liveGraphs[node - 1].updateData(temperature, humidity, eCO2, TVOC); liveGraphs[node - 1].updateGraph(); } @@ -203,6 +203,5 @@ liveGraphs.push(new liveGraph(1)); // make the graphs liveGraphs.forEach((graph) => { graph.makeGraph(); -} -); +}); From bc8cc500cb5caa2dcf2e8720ccee3fd3b420402b Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Thu, 7 Mar 2024 13:00:22 +0100 Subject: [PATCH 06/10] Refactor code to dynamically create node data and live graphs --- web/main.js | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/web/main.js b/web/main.js index 7c39a74..dad1607 100644 --- a/web/main.js +++ b/web/main.js @@ -192,13 +192,10 @@ function updateNodeData(node, temperature, humidity, eCO2, TVOC) { } // Call the function to create the HTML structure -createNodeData(1); -createNodeData(2); -createNodeData(3); -createNodeData(4); - -// Create a new liveGraph object -liveGraphs.push(new liveGraph(1)); +for (let i = 1; i <= 4; i++) { + createNodeData(i); + liveGraphs.push(new liveGraph(i)); +} // make the graphs liveGraphs.forEach((graph) => { From 0b8ae0ef349c7e56e5fe50d397fbf938873e19a7 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Thu, 7 Mar 2024 13:03:28 +0100 Subject: [PATCH 07/10] Refactor main.js: Add descriptions, declare variables, and update loop condition --- web/main.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/web/main.js b/web/main.js index dad1607..ff372a0 100644 --- a/web/main.js +++ b/web/main.js @@ -1,9 +1,13 @@ +// Description: Main JavaScript file for the web application. +// arrays and stuff const sensorData = {}; -let intervalDelay = 5000; -// Create WebSocket connection. -const socket = new WebSocket("ws://145.92.8.114/ws"); let liveGraphs = []; +// variables +let intervalDelay = 5000; +let amountOfNodes = 4; + +const socket = new WebSocket("ws://145.92.8.114/ws"); function openConnection() { // Open connection socket.addEventListener("open", (event) => { @@ -192,7 +196,7 @@ function updateNodeData(node, temperature, humidity, eCO2, TVOC) { } // Call the function to create the HTML structure -for (let i = 1; i <= 4; i++) { +for (let i = 1; i <= amountOfNodes; i++) { createNodeData(i); liveGraphs.push(new liveGraph(i)); } From 1472c17125aa2210b0303f8a1efcf1ea94e7fc6a Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Thu, 7 Mar 2024 13:09:28 +0100 Subject: [PATCH 08/10] Fix variable name and update amount of nodes --- web/main.js | 43 +++++++++++++++++++++---------------------- 1 file changed, 21 insertions(+), 22 deletions(-) diff --git a/web/main.js b/web/main.js index ff372a0..0cd4aad 100644 --- a/web/main.js +++ b/web/main.js @@ -3,9 +3,9 @@ const sensorData = {}; let liveGraphs = []; -// variables +// letiables let intervalDelay = 5000; -let amountOfNodes = 4; +let amountOfNodes = 3; const socket = new WebSocket("ws://145.92.8.114/ws"); function openConnection() { @@ -92,46 +92,46 @@ function nodeData(data, node) { function createNodeData(node) { // Create main div - var nodeData = document.createElement("div"); + let nodeData = document.createElement("div"); nodeData.className = "nodeData"; // Create flex-NodeData div - var flexNodeData = document.createElement("div"); + let flexNodeData = document.createElement("div"); flexNodeData.className = "flex-NodeData"; // Create p element - var pNode = document.createElement("p"); + let 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"); + let 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"]; + let dataTypes = ["Temperatuur", "Luchtvochtigheid", "CO2", "TVOC"]; + let ids = ["temperature", "humidity", "CO2", "TVOC"]; + let statusIds = ["tempStatus", "humidStatus", "CO2Status", "TVOCStatus"]; - for (var i = 0; i < dataTypes.length; i++) { - var dataDiv = document.createElement("div"); + for (let i = 0; i < dataTypes.length; i++) { + let dataDiv = document.createElement("div"); - var dataTypeDiv = document.createElement("div"); + let dataTypeDiv = document.createElement("div"); dataTypeDiv.textContent = dataTypes[i] + ": "; - var pElement = document.createElement("p"); + let pElement = document.createElement("p"); pElement.id = ids[i] + node; pElement.textContent = "Not connected"; dataTypeDiv.appendChild(pElement); dataDiv.appendChild(dataTypeDiv); - var statusElement = document.createElement("div"); + let statusElement = document.createElement("div"); statusElement.className = "statusElement"; - var statusText = document.createElement("p"); + let statusText = document.createElement("p"); statusText.className = "statusText"; statusText.id = statusIds[i]; statusText.textContent = "Not connected"; @@ -146,15 +146,15 @@ function createNodeData(node) { flexNodeData.appendChild(flexLiveData); // Create flex-graph div - var flexGraph = document.createElement("div"); + let flexGraph = document.createElement("div"); flexGraph.className = "flex-graph"; - var graphDiv = document.createElement("div"); + let graphDiv = document.createElement("div"); - var graphP = document.createElement("p"); + let graphP = document.createElement("p"); graphP.textContent = "Live graph:"; - var liveGraph = document.createElement("div"); + let liveGraph = document.createElement("div"); liveGraph.id = "liveGraph" + node; graphDiv.appendChild(graphP); @@ -168,7 +168,7 @@ function createNodeData(node) { nodeData.appendChild(flexNodeData); // Check if nodeDataLocation element exists - var nodeDataLocation = document.getElementById("nodeDataLocation"); + let nodeDataLocation = document.getElementById("nodeDataLocation"); if (nodeDataLocation) { // Append main div to nodeDataLocation nodeDataLocation.appendChild(nodeData); @@ -204,5 +204,4 @@ for (let i = 1; i <= amountOfNodes; i++) { // make the graphs liveGraphs.forEach((graph) => { graph.makeGraph(); -}); - +}); \ No newline at end of file From 598dd545217e967aabee310f2828b4769354f318 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Thu, 7 Mar 2024 13:18:12 +0100 Subject: [PATCH 09/10] Add new lines for temperature, humidity, eCO2, and TVOC in liveGraph class --- web/classes.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/web/classes.js b/web/classes.js index bea7d93..2067bfc 100644 --- a/web/classes.js +++ b/web/classes.js @@ -9,9 +9,9 @@ class liveGraph { this.cnt = 0; this.nodeId = "liveGraph" + id; } - // Fuction to create a graph makeGraph() { + // Create a new line for temperature Plotly.plot(this.nodeId, [ { x: this.timeArray, // Use timeArray as x values @@ -21,6 +21,7 @@ class liveGraph { name: "Temperature", }, ]); + // Create a new line for humidity Plotly.plot(this.nodeId, [ { x: this.timeArray, // Use timeArray as x values @@ -30,6 +31,7 @@ class liveGraph { name: "Humidity", }, ]); + // Create a new line for eCO2 Plotly.plot(this.nodeId, [ { x: this.timeArray, // Use timeArray as x values @@ -39,6 +41,7 @@ class liveGraph { name: "eCO2 / 10", }, ]); + // Create a new line for TVOC Plotly.plot(this.nodeId, [ { x: this.timeArray, // Use timeArray as x values @@ -50,7 +53,7 @@ class liveGraph { ]); } - // Function to update the graph with new values + // Function to update the graph with new values got from updateData function updateGraph() { let time = new Date(); this.timeArray.push(new Date()); @@ -71,7 +74,7 @@ class liveGraph { Plotly.relayout(this.nodeId, minuteView); if (this.cnt === 10) clearInterval(interval); } - + // function to get the new data for graph updateData(temperature, humidity, eCO2, TVOC) { // Update the graph this.tempArray.push(temperature); From 866af9253ee0de162ac691a655d402d8d5adaafd Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Thu, 7 Mar 2024 14:20:21 +0100 Subject: [PATCH 10/10] Add graph documentation --- .../SoftwareDocumentatie/graph_classes.md | 56 +++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 docs/brainstorm/SoftwareDocumentatie/graph_classes.md diff --git a/docs/brainstorm/SoftwareDocumentatie/graph_classes.md b/docs/brainstorm/SoftwareDocumentatie/graph_classes.md new file mode 100644 index 0000000..5df185e --- /dev/null +++ b/docs/brainstorm/SoftwareDocumentatie/graph_classes.md @@ -0,0 +1,56 @@ +# Graphs + +## Introduction + +The graphs are used to display the data from the sensors. The data is collected by the raspberry pi and then displayed on the graphs. The graphs are made using the [plotly library](https://plotly.com/javascript/) . + +## Requirements + +### Live graphs +- Every node has to have a live graph +- The graphs has to be updated every 5 seconds +- All the data from one node has to fit in one graph + + +## Class diagrams + +### Live graphs + +```mermaid +classDiagram + class liveGraph { + +nodeId + +cnt + +timeArray + +tempArray + +humiArray + +eco2Array + +tvocArray + makeGraph() + updateGraph() + updateData() + } +``` + +## Order of operations + +### Live graphs + +```mermaid +sequenceDiagram + participant Node + participant Raspberry pi + participant Website + + Node->>Raspberry pi: sensordata via websocket every 5 seconds + Raspberry pi->>Website: Node data via websocket if new data is received from the node + Website->>Website: updateGraph() + Website->>Website: updateData() +``` + +1. Every node sends its data to the raspberry pi via websocket every 5 seconds +2. The raspberry pi sends the data to the website via websocket if new data is received from the node +3. The website updates the data coming from the raspberry pi on its own variables and arrays +4. The website updates the live graphs every time new data is received from the websocket + +