Merge branch '44-als-gebruiker-wil-ik-dat-de-website-automatisch-het-aantal-nodes-dat-ik-heb-aangesloten-op-de' of gitlab.fdmci.hva.nl:propedeuse-hbo-ict/onderwijs/2023-2024/out-a-se-ti/blok-3/qaajeeqiinii59 into 44-als-gebruiker-wil-ik-dat-de-website-automatisch-het-aantal-nodes-dat-ik-heb-aangesloten-op-de
This commit is contained in:
@@ -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
|
# Graphs
|
||||||
|
|
||||||
## Introduction
|
## Introduction
|
||||||
@@ -14,12 +66,21 @@ The graphs are used to display the data from the sensors. The data is collected
|
|||||||
|
|
||||||
## Class diagrams
|
## Class diagrams
|
||||||
|
|
||||||
|
### Graphs
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
classDiagram
|
||||||
|
class graph {
|
||||||
|
+nodeId
|
||||||
|
makeGraph()
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
### Live graphs
|
### Live graphs
|
||||||
|
|
||||||
```mermaid
|
```mermaid
|
||||||
classDiagram
|
classDiagram
|
||||||
class liveGraph {
|
class liveGraph extends graph {
|
||||||
+nodeId
|
|
||||||
+cnt
|
+cnt
|
||||||
+timeArray
|
+timeArray
|
||||||
+tempArray
|
+tempArray
|
||||||
|
@@ -1,7 +1,47 @@
|
|||||||
class liveGraph {
|
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() {
|
||||||
|
if (connectedNodes[this.nodeId]) {
|
||||||
|
this.connected = true;
|
||||||
|
} else {
|
||||||
|
this.connected = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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 to initialize the graph
|
||||||
constructor(id) {
|
constructor(id) {
|
||||||
this.timeArray = [];
|
super(id);
|
||||||
this.tempArray = [];
|
this.tempArray = [];
|
||||||
this.humiArray = [];
|
this.humiArray = [];
|
||||||
this.eco2Array = [];
|
this.eco2Array = [];
|
||||||
@@ -60,7 +100,12 @@ class liveGraph {
|
|||||||
|
|
||||||
let update = {
|
let update = {
|
||||||
x: [[this.timeArray]],
|
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 olderTime = time.setMinutes(time.getMinutes() - 1);
|
||||||
@@ -82,4 +127,46 @@ class liveGraph {
|
|||||||
this.eco2Array.push(eCO2 / 10);
|
this.eco2Array.push(eCO2 / 10);
|
||||||
this.tvocArray.push(TVOC / 10);
|
this.tvocArray.push(TVOC / 10);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
class graph {
|
||||||
|
// Constructor to initialize the graph
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Function to update the graph with new values got from updateData function
|
||||||
|
updateGraph(array1, array2, array3, array4) {
|
||||||
|
let time = new Date();
|
||||||
|
this.timeArray.push(new Date());
|
||||||
|
|
||||||
|
let update = {
|
||||||
|
x: [[this.timeArray]],
|
||||||
|
y: [array1, array2, array3, array4],
|
||||||
|
};
|
||||||
|
|
||||||
|
let olderTime = time.setMinutes(time.getMinutes() - 1);
|
||||||
|
let futureTime = time.setMinutes(time.getMinutes() + 1);
|
||||||
|
let minuteView = {
|
||||||
|
xaxis: {
|
||||||
|
type: "date",
|
||||||
|
range: [olderTime, futureTime],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Reference in New Issue
Block a user