From 36277a7e5debc0dc24e49950e044a663bb2483f8 Mon Sep 17 00:00:00 2001 From: Sietse Jonker Date: Wed, 6 Mar 2024 20:56:19 +0100 Subject: [PATCH 01/14] 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/14] 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/14] 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/14] 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/14] 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/14] 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/14] 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/14] 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 878fb9f49174b29810561c56af6ad59414b9e9ee Mon Sep 17 00:00:00 2001 From: Dano van den Bosch Date: Thu, 7 Mar 2024 13:11:01 +0100 Subject: [PATCH 09/14] Refactor JSON parsing and data handling functions --- docs/brainstorm/SoftwareDocumentatie/Dev_page.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/docs/brainstorm/SoftwareDocumentatie/Dev_page.md b/docs/brainstorm/SoftwareDocumentatie/Dev_page.md index 138990e..6d75aca 100644 --- a/docs/brainstorm/SoftwareDocumentatie/Dev_page.md +++ b/docs/brainstorm/SoftwareDocumentatie/Dev_page.md @@ -2,15 +2,17 @@ ### parsing JSON +The data that is send by the nodes is send in json data. We chose this becouse we can easily use the data within javascript, this is called parsing. We use the parced data and send that in to the next function to make the data more acceseble to use in further instences. + ```js const jsonData = JSON.parse(event.data); // Use the parsed JSON data as needed handleIncomingData(jsonData); ``` -### Pro - +Here is the function that receves the parced JSON data and set it into variables. +```js function handleIncomingData(data) { nodeNumber = data.node; temperature = data.Temp; @@ -20,7 +22,7 @@ function handleIncomingData(data) { 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]) { From 598dd545217e967aabee310f2828b4769354f318 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Thu, 7 Mar 2024 13:18:12 +0100 Subject: [PATCH 10/14] 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 c7ee23afd7ec034ea7ed69a7ae8cc63e54cc0528 Mon Sep 17 00:00:00 2001 From: Bram Barbieri Date: Thu, 7 Mar 2024 13:59:01 +0100 Subject: [PATCH 11/14] Bram docs, daily standups --- .../Sprint1/FirstDocumentation.md | 5 ----- teamdocumentatie/dailyStandupNotes.md | 15 +++++++++++++++ 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/docs/LearningProcessBram/Sprint1/FirstDocumentation.md b/docs/LearningProcessBram/Sprint1/FirstDocumentation.md index aea3318..579cdd6 100644 --- a/docs/LearningProcessBram/Sprint1/FirstDocumentation.md +++ b/docs/LearningProcessBram/Sprint1/FirstDocumentation.md @@ -80,7 +80,6 @@ I did this by using one of the main sensors and tried programing it in myself. I used this website for the information and for the right library:(https://randomnerdtutorials.com/esp32-dht11-dht22-temperature-humidity-sensor-arduino-ide/). Aside from the website i used my teammates for help where it was needed. I wanted to make my own spin on the original design by including a button to activate the sensor and an LED to show if its on. -At first I tried to use my own DHT11, but apparently it didn't work. So i used one from my Teammates. The rest of the tutorial was clear and worked like a charm. the code used looks like this: ``` @@ -92,7 +91,6 @@ the code used looks like this: DHT dht(DHTPIN, DHTTYPE); void setup() { - // put your setup code here, to run once: Serial.begin(9600); Serial.println(F("DHTxx test!")); dht.begin(); @@ -101,7 +99,6 @@ dht.begin(); void loop() { delay(2000); float h = dht.readHumidity(); -// Read temperature as Celsius (the default) float t = dht.readTemperature(); float f = dht.readTemperature(true); @@ -110,9 +107,7 @@ float f = dht.readTemperature(true); return; } -// Compute heat index in Fahrenheit (the default) float hif = dht.computeHeatIndex(f, h); -// Compute heat index in Celsius (isFahreheit = false) float hic = dht.computeHeatIndex(t, h, false); Serial.print(F("Humidity: ")); diff --git a/teamdocumentatie/dailyStandupNotes.md b/teamdocumentatie/dailyStandupNotes.md index aed4f6a..6e431f9 100644 --- a/teamdocumentatie/dailyStandupNotes.md +++ b/teamdocumentatie/dailyStandupNotes.md @@ -13,4 +13,19 @@ 1 - 3 - 2024: { From yesterday's standup, Sietse made a digital PCD schematic, Dano and Bram made great progress with connecting the PI to the html website and are trying to finish it today. Sam has made progress with documentation and was helping Sietse. Today we are going to continue our tasks and try to finish these, so we can continue with our project. +} + +5 - 3 - 2024: { + At the standup we discussed our goals for today, Sam is going to get the screen going, Sietse is gonna help Sam, Dano is working on kthe website, and Bram is going to send live info to the database in linux. +} + +6 - 3 - 2024 { + Sietse is going to make a class wich contains all the graphs, Dano is making documentation and OOP, Sam is also making OOP, +and im going to continue with working on the connection between the websocket and the database. } + +7 - 3 - 2024 { + Sietse is going to make more progress on updating the graph on the website. + Sam is going to finish the code for the big questionaire screen. + Dano is going to be writing some documentation and will be working with classes in arduino. + Bram will do research on python to finish the connection to the database and the websocket. } \ No newline at end of file From 185a972f1ba68ce4a510b03374bda7958e1133b7 Mon Sep 17 00:00:00 2001 From: Dano van den Bosch Date: Thu, 7 Mar 2024 14:01:20 +0100 Subject: [PATCH 12/14] dev page documentation --- .../SoftwareDocumentatie/Dev_page.md | 111 +++--------------- 1 file changed, 17 insertions(+), 94 deletions(-) diff --git a/docs/brainstorm/SoftwareDocumentatie/Dev_page.md b/docs/brainstorm/SoftwareDocumentatie/Dev_page.md index 6d75aca..d88ec4f 100644 --- a/docs/brainstorm/SoftwareDocumentatie/Dev_page.md +++ b/docs/brainstorm/SoftwareDocumentatie/Dev_page.md @@ -10,7 +10,7 @@ The data that is send by the nodes is send in json data. We chose this becouse w handleIncomingData(jsonData); ``` -Here is the function that receves the parced JSON data and set it into variables. +Here is the function that receves the parced JSON data and set it into variables. So that it can be more easlily used in the next function with is the processNodeData, witch is setting the data in to the right array. ```js function handleIncomingData(data) { @@ -23,12 +23,19 @@ function handleIncomingData(data) { processNodeData(nodeNumber, temperature, humidity, CO2, TVOC); } ``` -function processNodeData(nodeNumber, temperature, humidity, CO2, TVOC) { + +In the function processNodeData we first check if there is a array for the node that is sending the data, this is done becouse if we want to seperate the data in to show witch node is sending what data. So if the nodeNumber plus sensorData (the name of the array) not already there the array is made. + +```js // Initialize the array for this node if it doesn't exist yet if (!sensorData[nodeNumber]) { sensorData[nodeNumber] = []; } +``` +For the actual data put in to array function is there a simple array.push for the data that is send allong from when the function is called. + +```js // Push the new data onto the array for this node sensorData[nodeNumber].push({ 'node': nodeNumber, @@ -37,106 +44,22 @@ function processNodeData(nodeNumber, temperature, humidity, CO2, TVOC) { '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]); +We want only use the last 10 readings from the nodes so there is a check for if the array is longer than 10 the first (or the oldest reading), if that is so there is a .shift executed. This is done to be later used in the graph function. Than there is a call for the next function, that is the updateNodeData and that will acctually find the right html id coresponding with the right reading to update that. +```js // 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"; + updateNodeData(nodeNumber, temperature, humidity, CO2, TVOC); +``` - // 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."); - } -} +In the last function there are 2 updates the first is to actually update the text to the right value that we are getting from the node, and the connection checker. +```js function updateNodeData(node, temperature, humidity, eCO2, TVOC) { // Update the temperature, humidity and light intensity values document.getElementById("temperature" + node).textContent = temperature; @@ -150,4 +73,4 @@ function updateNodeData(node, temperature, humidity, eCO2, TVOC) { document.getElementById("CO2Status").textContent = "Connected"; document.getElementById("TVOCStatus").textContent = "Connected"; } - +``` \ No newline at end of file From 866af9253ee0de162ac691a655d402d8d5adaafd Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Thu, 7 Mar 2024 14:20:21 +0100 Subject: [PATCH 13/14] 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 + + From 54f52bce48698cf9afceee6ebe459ebd6378b745 Mon Sep 17 00:00:00 2001 From: Dano van den Bosch Date: Thu, 7 Mar 2024 14:22:30 +0100 Subject: [PATCH 14/14] path updated for page --- docs/.pages | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/.pages b/docs/.pages index 3ae2722..a58ded2 100644 --- a/docs/.pages +++ b/docs/.pages @@ -24,5 +24,5 @@ nav: - Taskflow: brainstorm/Taskflow - Design: Sp1SchetsProject/FirstDesign - 🖨️ Software: - - Dev page: brainstrom/SotwareDocumentatie/Dev_page + - Dev page: brainstorm/SotwareDocumentatie/Dev_page \ No newline at end of file