From 1982db8c50f7f4c195cc9980947bb6194b86a661 Mon Sep 17 00:00:00 2001 From: Sietse Jonker Date: Fri, 22 Mar 2024 11:30:04 +0100 Subject: [PATCH 1/5] Add node class and update liveGraph class --- web/classes.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/web/classes.js b/web/classes.js index 2067bfc..49fae13 100644 --- a/web/classes.js +++ b/web/classes.js @@ -1,3 +1,26 @@ +class node { + // Constructor to initialize the node + constructor(nodeId) { + this.nodeId = nodeId; + this.temperature = 0; + this.humidity = 0; + this.eCO2 = 0; + this.TVOC = 0; + this.connected = false; + } + // Function to update the data + updateData(temperature, humidity, eCO2, TVOC) { + this.temperature = temperature; + this.humidity = humidity; + this.eCO2 = eCO2; + this.TVOC = TVOC; + } + // Function to update the connection status + updateConnection(status) { + this.connected = status; + } +} + class liveGraph { // Constructor to initialize the graph constructor(id) { From 07cc13d573c35096359abae7220ecbab02c2812a Mon Sep 17 00:00:00 2001 From: Sietse Jonker Date: Fri, 22 Mar 2024 12:31:53 +0100 Subject: [PATCH 2/5] Refactor classes.js to update connection status and add feedbackNode and graph classes --- web/classes.js | 72 +++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 69 insertions(+), 3 deletions(-) diff --git a/web/classes.js b/web/classes.js index 49fae13..1837cef 100644 --- a/web/classes.js +++ b/web/classes.js @@ -16,12 +16,30 @@ class node { this.TVOC = TVOC; } // Function to update the connection status - updateConnection(status) { - this.connected = status; + updateConnection() { + if (connectedNodes[this.nodeId]) { + this.connected = true; + } + else { + this.connected = false; + } } } -class liveGraph { +class feedbackNode extends node { + // Constructor to initialize the feedback node + constructor(nodeId) { + super(nodeId); + this.feedback = {}; + this.answers = 0; + } + // Function to update the feedback + updateFeedback(feedback) { + this.feedback = feedback; + } +} + +class liveGraph extends node{ // Constructor to initialize the graph constructor(id) { this.timeArray = []; @@ -105,4 +123,52 @@ class liveGraph { this.eco2Array.push(eCO2 / 10); this.tvocArray.push(TVOC / 10); } +} + +class graph { + // Constructor to initialize the graph + constructor(id) { + this.timeArray = []; + this.tempArray = []; + this.humiArray = []; + this.eco2Array = []; + this.tvocArray = []; + this.nodeId = "graph" + id; + } + // Function to create a graph + makeGraph(amountOfGraphs) { + for (let i = 0; i < amountOfGraphs; i++) { + + // Create a new line for temperature + Plotly.plot(this.nodeId, [ + { + x: this.timeArray, // Use timeArray as x values + y: this.array[i], + mode: "lines", + line: { color: "#FF0000" }, + name: "Temperature", + }, + ]); + } + } + // Function to update the graph with new values got from updateData function + updateGraph() { + let time = new Date(); + this.timeArray.push(new Date()); + + let update = { + x: [[this.timeArray]], + 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 = { + xaxis: { + type: "date", + range: + }, + }; + +} } \ No newline at end of file From ca5d92bd86637a362c26fe19bb0ef4d11297cd2c Mon Sep 17 00:00:00 2001 From: Sietse Jonker Date: Fri, 22 Mar 2024 12:38:39 +0100 Subject: [PATCH 3/5] Refactor graph class constructor and methods --- web/classes.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/web/classes.js b/web/classes.js index 1837cef..0c9f96a 100644 --- a/web/classes.js +++ b/web/classes.js @@ -42,13 +42,13 @@ class feedbackNode extends node { class liveGraph extends node{ // Constructor to initialize the graph constructor(id) { + super(id, live); this.timeArray = []; this.tempArray = []; this.humiArray = []; this.eco2Array = []; this.tvocArray = []; this.cnt = 0; - this.nodeId = "liveGraph" + id; } // Fuction to create a graph makeGraph() { @@ -127,23 +127,23 @@ class liveGraph extends node{ class graph { // Constructor to initialize the graph - constructor(id) { - this.timeArray = []; - this.tempArray = []; - this.humiArray = []; - this.eco2Array = []; - this.tvocArray = []; + constructor(id, graph) { + if (graph === "live") { + this.nodeId = "liveGraph" + id; + } + else { this.nodeId = "graph" + id; + } } // Function to create a graph - makeGraph(amountOfGraphs) { + makeGraph(amountOfGraphs, array1, array2, array3, array4) { for (let i = 0; i < amountOfGraphs; i++) { // Create a new line for temperature Plotly.plot(this.nodeId, [ { x: this.timeArray, // Use timeArray as x values - y: this.array[i], + y: array + i, mode: "lines", line: { color: "#FF0000" }, name: "Temperature", @@ -152,13 +152,13 @@ class graph { } } // Function to update the graph with new values got from updateData function - updateGraph() { + updateGraph(array1, array2, array3, array4) { let time = new Date(); this.timeArray.push(new Date()); let update = { x: [[this.timeArray]], - y: [[this.tempArray], [this.humiArray], [this.eco2Array], [this.tvocArray]] + y: [array1, array2, array3, array4] }; let olderTime = time.setMinutes(time.getMinutes() - 1); From e5511d192527239aba71b04ada33c1c80f4e20fd Mon Sep 17 00:00:00 2001 From: Sietse Jonker Date: Fri, 22 Mar 2024 12:45:31 +0100 Subject: [PATCH 4/5] Add node and graph classes for data visualization --- .../SoftwareDocumentatie/graph_classes.md | 65 ++++++++++++++++++- 1 file changed, 63 insertions(+), 2 deletions(-) diff --git a/docs/brainstorm/SoftwareDocumentatie/graph_classes.md b/docs/brainstorm/SoftwareDocumentatie/graph_classes.md index 5df185e..0acf0e1 100644 --- a/docs/brainstorm/SoftwareDocumentatie/graph_classes.md +++ b/docs/brainstorm/SoftwareDocumentatie/graph_classes.md @@ -1,3 +1,55 @@ +# Nodes + +## Introduction + +The nodes are the devices that are placed in the rooms. The nodes are used to collect the data from the sensors. Every node is connected to the websocket, and sends their data with their mac address in json format. The websocket broadcasts the node data back to all clients, and since our website functions as a client it also receives the data. Every node will, depending on what node, be made into a class. + +## Requirements + +### Sensornode + +- Every node has to have a unique nodeID +- Every node has to have their corresponding sensorsvalues in form of arrays + +### Feedbacknodes + +- Every node has to have a unique nodeID +- Every node has to have their corresponding feedback in form of a 2D array + +## Class diagrams + +### Node + +```mermaid +classDiagram + class Node { + +nodeID + +processNodeData() + +updateNodeData() + } +``` + +#### Sensornode + +```mermaid +classDiagram + class SensorNode extends Node { + +tempArray + +humiArray + +eco2Array + +tvocArray + } +``` + +#### Feedbacknode + +```mermaid +classDiagram + class FeedbackNode extends Node { + +feedbackArray + } +``` + # Graphs ## Introduction @@ -14,12 +66,21 @@ The graphs are used to display the data from the sensors. The data is collected ## Class diagrams +### Graphs + +```mermaid +classDiagram + class graph { + +nodeId + makeGraph() + } +``` + ### Live graphs ```mermaid classDiagram - class liveGraph { - +nodeId + class liveGraph extends graph { +cnt +timeArray +tempArray From 2221be88bfd81301793f1d949cbe70b81bdb2ea3 Mon Sep 17 00:00:00 2001 From: Sietse Jonker Date: Fri, 22 Mar 2024 14:44:25 +0100 Subject: [PATCH 5/5] Refactor class constructors and update graph creation --- web/classes.js | 56 ++++++++++++++++++++++++-------------------------- 1 file changed, 27 insertions(+), 29 deletions(-) diff --git a/web/classes.js b/web/classes.js index 0c9f96a..50e0e26 100644 --- a/web/classes.js +++ b/web/classes.js @@ -19,8 +19,7 @@ class node { updateConnection() { if (connectedNodes[this.nodeId]) { this.connected = true; - } - else { + } else { this.connected = false; } } @@ -31,7 +30,7 @@ class feedbackNode extends node { constructor(nodeId) { super(nodeId); this.feedback = {}; - this.answers = 0; + this.answers = 0; } // Function to update the feedback updateFeedback(feedback) { @@ -39,16 +38,16 @@ class feedbackNode extends node { } } -class liveGraph extends node{ +class liveGraph extends node { // Constructor to initialize the graph constructor(id) { - super(id, live); - this.timeArray = []; + super(id); this.tempArray = []; this.humiArray = []; this.eco2Array = []; this.tvocArray = []; this.cnt = 0; + this.nodeId = "liveGraph" + id; } // Fuction to create a graph makeGraph() { @@ -101,7 +100,12 @@ class liveGraph extends node{ 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); @@ -127,28 +131,23 @@ class liveGraph extends node{ class graph { // Constructor to initialize the graph - constructor(id, graph) { - if (graph === "live") { - this.nodeId = "liveGraph" + id; - } - else { - this.nodeId = "graph" + id; - } + constructor(id) { + this.nodeId = "graph" + id; + this.timeArray = []; } // Function to create a graph makeGraph(amountOfGraphs, array1, array2, array3, array4) { for (let i = 0; i < amountOfGraphs; i++) { - - // Create a new line for temperature - Plotly.plot(this.nodeId, [ - { - x: this.timeArray, // Use timeArray as x values - y: array + i, - mode: "lines", - line: { color: "#FF0000" }, - name: "Temperature", - }, - ]); + // Create a new line for temperature + Plotly.plot(this.nodeId, [ + { + x: this.timeArray, // Use timeArray as x values + y: array + i, + mode: "lines", + line: { color: "#FF0000" }, + name: "Temperature", + }, + ]); } } // Function to update the graph with new values got from updateData function @@ -158,7 +157,7 @@ class graph { let update = { x: [[this.timeArray]], - y: [array1, array2, array3, array4] + y: [array1, array2, array3, array4], }; let olderTime = time.setMinutes(time.getMinutes() - 1); @@ -166,9 +165,8 @@ class graph { let minuteView = { xaxis: { type: "date", - range: + range: [olderTime, futureTime], }, }; - + } } -} \ No newline at end of file