Merge branch 'main' of https://gitlab.fdmci.hva.nl/propedeuse-hbo-ict/onderwijs/2023-2024/out-a-se-ti/blok-3/qaajeeqiinii59
This commit is contained in:
@@ -24,5 +24,5 @@ nav:
|
|||||||
- Taskflow: brainstorm/Taskflow
|
- Taskflow: brainstorm/Taskflow
|
||||||
- Design: Sp1SchetsProject/FirstDesign
|
- Design: Sp1SchetsProject/FirstDesign
|
||||||
- 🖨️ Software:
|
- 🖨️ Software:
|
||||||
- Dev page: brainstrom/SotwareDocumentatie/Dev_page
|
- Dev page: brainstorm/SotwareDocumentatie/Dev_page
|
||||||
|
|
@@ -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/).
|
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.
|
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.
|
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 rest of the tutorial was clear and worked like a charm.
|
||||||
the code used looks like this:
|
the code used looks like this:
|
||||||
```
|
```
|
||||||
@@ -92,7 +91,6 @@ the code used looks like this:
|
|||||||
DHT dht(DHTPIN, DHTTYPE);
|
DHT dht(DHTPIN, DHTTYPE);
|
||||||
|
|
||||||
void setup() {
|
void setup() {
|
||||||
// put your setup code here, to run once:
|
|
||||||
Serial.begin(9600);
|
Serial.begin(9600);
|
||||||
Serial.println(F("DHTxx test!"));
|
Serial.println(F("DHTxx test!"));
|
||||||
dht.begin();
|
dht.begin();
|
||||||
@@ -101,7 +99,6 @@ dht.begin();
|
|||||||
void loop() {
|
void loop() {
|
||||||
delay(2000);
|
delay(2000);
|
||||||
float h = dht.readHumidity();
|
float h = dht.readHumidity();
|
||||||
// Read temperature as Celsius (the default)
|
|
||||||
float t = dht.readTemperature();
|
float t = dht.readTemperature();
|
||||||
float f = dht.readTemperature(true);
|
float f = dht.readTemperature(true);
|
||||||
|
|
||||||
@@ -110,9 +107,7 @@ float f = dht.readTemperature(true);
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Compute heat index in Fahrenheit (the default)
|
|
||||||
float hif = dht.computeHeatIndex(f, h);
|
float hif = dht.computeHeatIndex(f, h);
|
||||||
// Compute heat index in Celsius (isFahreheit = false)
|
|
||||||
float hic = dht.computeHeatIndex(t, h, false);
|
float hic = dht.computeHeatIndex(t, h, false);
|
||||||
|
|
||||||
Serial.print(F("Humidity: "));
|
Serial.print(F("Humidity: "));
|
||||||
|
@@ -2,15 +2,17 @@
|
|||||||
|
|
||||||
### parsing JSON
|
### 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
|
```js
|
||||||
const jsonData = JSON.parse(event.data);
|
const jsonData = JSON.parse(event.data);
|
||||||
// Use the parsed JSON data as needed
|
// Use the parsed JSON data as needed
|
||||||
handleIncomingData(jsonData);
|
handleIncomingData(jsonData);
|
||||||
```
|
```
|
||||||
|
|
||||||
### Pro
|
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) {
|
function handleIncomingData(data) {
|
||||||
nodeNumber = data.node;
|
nodeNumber = data.node;
|
||||||
temperature = data.Temp;
|
temperature = data.Temp;
|
||||||
@@ -20,13 +22,20 @@ function handleIncomingData(data) {
|
|||||||
|
|
||||||
processNodeData(nodeNumber, temperature, humidity, CO2, TVOC);
|
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
|
// Initialize the array for this node if it doesn't exist yet
|
||||||
if (!sensorData[nodeNumber]) {
|
if (!sensorData[nodeNumber]) {
|
||||||
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
|
// Push the new data onto the array for this node
|
||||||
sensorData[nodeNumber].push({
|
sensorData[nodeNumber].push({
|
||||||
'node': nodeNumber,
|
'node': nodeNumber,
|
||||||
@@ -35,106 +44,22 @@ function processNodeData(nodeNumber, temperature, humidity, CO2, TVOC) {
|
|||||||
'CO2': CO2,
|
'CO2': CO2,
|
||||||
'TVOC': TVOC,
|
'TVOC': TVOC,
|
||||||
});
|
});
|
||||||
|
```
|
||||||
|
|
||||||
// updateNodeData(node, temperature, humidity, lightIntensity)
|
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.
|
||||||
updateNodeData(nodeNumber, temperature, humidity, CO2, TVOC);
|
|
||||||
|
|
||||||
// Log the array for this node
|
|
||||||
console.log(sensorData[nodeNumber]);
|
|
||||||
|
|
||||||
|
```js
|
||||||
// If the array for this node has more than 10 elements, remove the oldest one
|
// If the array for this node has more than 10 elements, remove the oldest one
|
||||||
if (sensorData[nodeNumber].length >= 10) {
|
if (sensorData[nodeNumber].length >= 10) {
|
||||||
sensorData[nodeNumber].shift();
|
sensorData[nodeNumber].shift();
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
function createNodeData(node) {
|
updateNodeData(nodeNumber, temperature, humidity, CO2, TVOC);
|
||||||
// Create main div
|
```
|
||||||
var nodeData = document.createElement("div");
|
|
||||||
nodeData.className = "nodeData";
|
|
||||||
|
|
||||||
// Create flex-NodeData div
|
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.
|
||||||
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.");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
```js
|
||||||
function updateNodeData(node, temperature, humidity, eCO2, TVOC) {
|
function updateNodeData(node, temperature, humidity, eCO2, TVOC) {
|
||||||
// Update the temperature, humidity and light intensity values
|
// Update the temperature, humidity and light intensity values
|
||||||
document.getElementById("temperature" + node).textContent = temperature;
|
document.getElementById("temperature" + node).textContent = temperature;
|
||||||
@@ -148,4 +73,4 @@ function updateNodeData(node, temperature, humidity, eCO2, TVOC) {
|
|||||||
document.getElementById("CO2Status").textContent = "Connected";
|
document.getElementById("CO2Status").textContent = "Connected";
|
||||||
document.getElementById("TVOCStatus").textContent = "Connected";
|
document.getElementById("TVOCStatus").textContent = "Connected";
|
||||||
}
|
}
|
||||||
|
```
|
56
docs/brainstorm/SoftwareDocumentatie/graph_classes.md
Normal file
56
docs/brainstorm/SoftwareDocumentatie/graph_classes.md
Normal file
@@ -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
|
||||||
|
|
||||||
|
|
@@ -13,4 +13,19 @@
|
|||||||
1 - 3 - 2024: {
|
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.
|
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.
|
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.
|
||||||
}
|
}
|
@@ -9,9 +9,9 @@ class liveGraph {
|
|||||||
this.cnt = 0;
|
this.cnt = 0;
|
||||||
this.nodeId = "liveGraph" + id;
|
this.nodeId = "liveGraph" + id;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fuction to create a graph
|
// Fuction to create a graph
|
||||||
makeGraph() {
|
makeGraph() {
|
||||||
|
// Create a new line for temperature
|
||||||
Plotly.plot(this.nodeId, [
|
Plotly.plot(this.nodeId, [
|
||||||
{
|
{
|
||||||
x: this.timeArray, // Use timeArray as x values
|
x: this.timeArray, // Use timeArray as x values
|
||||||
@@ -21,6 +21,7 @@ class liveGraph {
|
|||||||
name: "Temperature",
|
name: "Temperature",
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
// Create a new line for humidity
|
||||||
Plotly.plot(this.nodeId, [
|
Plotly.plot(this.nodeId, [
|
||||||
{
|
{
|
||||||
x: this.timeArray, // Use timeArray as x values
|
x: this.timeArray, // Use timeArray as x values
|
||||||
@@ -30,6 +31,7 @@ class liveGraph {
|
|||||||
name: "Humidity",
|
name: "Humidity",
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
// Create a new line for eCO2
|
||||||
Plotly.plot(this.nodeId, [
|
Plotly.plot(this.nodeId, [
|
||||||
{
|
{
|
||||||
x: this.timeArray, // Use timeArray as x values
|
x: this.timeArray, // Use timeArray as x values
|
||||||
@@ -39,6 +41,7 @@ class liveGraph {
|
|||||||
name: "eCO2 / 10",
|
name: "eCO2 / 10",
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
// Create a new line for TVOC
|
||||||
Plotly.plot(this.nodeId, [
|
Plotly.plot(this.nodeId, [
|
||||||
{
|
{
|
||||||
x: this.timeArray, // Use timeArray as x values
|
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() {
|
updateGraph() {
|
||||||
let time = new Date();
|
let time = new Date();
|
||||||
this.timeArray.push(new Date());
|
this.timeArray.push(new Date());
|
||||||
@@ -71,7 +74,7 @@ class liveGraph {
|
|||||||
Plotly.relayout(this.nodeId, minuteView);
|
Plotly.relayout(this.nodeId, minuteView);
|
||||||
if (this.cnt === 10) clearInterval(interval);
|
if (this.cnt === 10) clearInterval(interval);
|
||||||
}
|
}
|
||||||
|
// function to get the new data for graph
|
||||||
updateData(temperature, humidity, eCO2, TVOC) {
|
updateData(temperature, humidity, eCO2, TVOC) {
|
||||||
// Update the graph
|
// Update the graph
|
||||||
this.tempArray.push(temperature);
|
this.tempArray.push(temperature);
|
||||||
|
89
web/main.js
89
web/main.js
@@ -1,13 +1,17 @@
|
|||||||
|
// Description: Main JavaScript file for the web application.
|
||||||
|
// arrays and stuff
|
||||||
const sensorData = {};
|
const sensorData = {};
|
||||||
let intervalDelay = 1000;
|
let liveGraphs = [];
|
||||||
// Create WebSocket connection.
|
|
||||||
const socket = new WebSocket("ws://145.92.8.114/ws");
|
|
||||||
|
|
||||||
|
// letiables
|
||||||
|
let intervalDelay = 5000;
|
||||||
|
let amountOfNodes = 3;
|
||||||
|
|
||||||
|
const socket = new WebSocket("ws://145.92.8.114/ws");
|
||||||
function openConnection() {
|
function openConnection() {
|
||||||
// Open connection
|
// Open connection
|
||||||
socket.addEventListener("open", (event) => {
|
socket.addEventListener("open", (event) => {
|
||||||
console.log("Connected to the WebSocket server");
|
console.log("Connected to the WebSocket server");
|
||||||
socket.send("Hello Server!");
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Error handling
|
// Error handling
|
||||||
@@ -35,14 +39,11 @@ function openConnection() {
|
|||||||
// Attempt to reconnect
|
// Attempt to reconnect
|
||||||
setTimeout(openConnection, 1000); // Retry after 1 second
|
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();
|
openConnection();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function handleIncomingData(data) {
|
function handleIncomingData(data) {
|
||||||
nodeNumber = data.node;
|
nodeNumber = data.node;
|
||||||
temperature = data.Temp;
|
temperature = data.Temp;
|
||||||
@@ -80,16 +81,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 for making the html elements for the following html code
|
||||||
|
|
||||||
function nodeData(data, node) {
|
function nodeData(data, node) {
|
||||||
let nodeData = document.createElement("div");
|
let nodeData = document.createElement("div");
|
||||||
nodeData.innerHTML = data;
|
nodeData.innerHTML = data;
|
||||||
@@ -100,46 +92,46 @@ function nodeData(data, node) {
|
|||||||
|
|
||||||
function createNodeData(node) {
|
function createNodeData(node) {
|
||||||
// Create main div
|
// Create main div
|
||||||
var nodeData = document.createElement("div");
|
let nodeData = document.createElement("div");
|
||||||
nodeData.className = "nodeData";
|
nodeData.className = "nodeData";
|
||||||
|
|
||||||
// Create flex-NodeData div
|
// Create flex-NodeData div
|
||||||
var flexNodeData = document.createElement("div");
|
let flexNodeData = document.createElement("div");
|
||||||
flexNodeData.className = "flex-NodeData";
|
flexNodeData.className = "flex-NodeData";
|
||||||
|
|
||||||
// Create p element
|
// Create p element
|
||||||
var pNode = document.createElement("p");
|
let pNode = document.createElement("p");
|
||||||
pNode.textContent = "Node " + node;
|
pNode.textContent = "Node " + node;
|
||||||
|
|
||||||
// Append p to flex-NodeData
|
// Append p to flex-NodeData
|
||||||
flexNodeData.appendChild(pNode);
|
flexNodeData.appendChild(pNode);
|
||||||
|
|
||||||
// Create flex-LiveData div
|
// Create flex-LiveData div
|
||||||
var flexLiveData = document.createElement("div");
|
let flexLiveData = document.createElement("div");
|
||||||
flexLiveData.className = "flex-LiveData";
|
flexLiveData.className = "flex-LiveData";
|
||||||
|
|
||||||
// Create data divs (Temperature, Humidity, Light Intensity)
|
// Create data divs (Temperature, Humidity, Light Intensity)
|
||||||
var dataTypes = ["Temperatuur", "Luchtvochtigheid", "CO2", "TVOC"];
|
let dataTypes = ["Temperatuur", "Luchtvochtigheid", "CO2", "TVOC"];
|
||||||
var ids = ["temperature", "humidity", "CO2", "TVOC"];
|
let ids = ["temperature", "humidity", "CO2", "TVOC"];
|
||||||
var statusIds = ["tempStatus", "humidStatus", "CO2Status", "TVOCStatus"];
|
let statusIds = ["tempStatus", "humidStatus", "CO2Status", "TVOCStatus"];
|
||||||
|
|
||||||
for (var i = 0; i < dataTypes.length; i++) {
|
for (let i = 0; i < dataTypes.length; i++) {
|
||||||
var dataDiv = document.createElement("div");
|
let dataDiv = document.createElement("div");
|
||||||
|
|
||||||
var dataTypeDiv = document.createElement("div");
|
let dataTypeDiv = document.createElement("div");
|
||||||
dataTypeDiv.textContent = dataTypes[i] + ": ";
|
dataTypeDiv.textContent = dataTypes[i] + ": ";
|
||||||
|
|
||||||
var pElement = document.createElement("p");
|
let pElement = document.createElement("p");
|
||||||
pElement.id = ids[i] + node;
|
pElement.id = ids[i] + node;
|
||||||
pElement.textContent = "Not connected";
|
pElement.textContent = "Not connected";
|
||||||
|
|
||||||
dataTypeDiv.appendChild(pElement);
|
dataTypeDiv.appendChild(pElement);
|
||||||
dataDiv.appendChild(dataTypeDiv);
|
dataDiv.appendChild(dataTypeDiv);
|
||||||
|
|
||||||
var statusElement = document.createElement("div");
|
let statusElement = document.createElement("div");
|
||||||
statusElement.className = "statusElement";
|
statusElement.className = "statusElement";
|
||||||
|
|
||||||
var statusText = document.createElement("p");
|
let statusText = document.createElement("p");
|
||||||
statusText.className = "statusText";
|
statusText.className = "statusText";
|
||||||
statusText.id = statusIds[i];
|
statusText.id = statusIds[i];
|
||||||
statusText.textContent = "Not connected";
|
statusText.textContent = "Not connected";
|
||||||
@@ -154,15 +146,15 @@ function createNodeData(node) {
|
|||||||
flexNodeData.appendChild(flexLiveData);
|
flexNodeData.appendChild(flexLiveData);
|
||||||
|
|
||||||
// Create flex-graph div
|
// Create flex-graph div
|
||||||
var flexGraph = document.createElement("div");
|
let flexGraph = document.createElement("div");
|
||||||
flexGraph.className = "flex-graph";
|
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:";
|
graphP.textContent = "Live graph:";
|
||||||
|
|
||||||
var liveGraph = document.createElement("div");
|
let liveGraph = document.createElement("div");
|
||||||
liveGraph.id = "liveGraph" + node;
|
liveGraph.id = "liveGraph" + node;
|
||||||
|
|
||||||
graphDiv.appendChild(graphP);
|
graphDiv.appendChild(graphP);
|
||||||
@@ -176,7 +168,7 @@ function createNodeData(node) {
|
|||||||
nodeData.appendChild(flexNodeData);
|
nodeData.appendChild(flexNodeData);
|
||||||
|
|
||||||
// Check if nodeDataLocation element exists
|
// Check if nodeDataLocation element exists
|
||||||
var nodeDataLocation = document.getElementById("nodeDataLocation");
|
let nodeDataLocation = document.getElementById("nodeDataLocation");
|
||||||
if (nodeDataLocation) {
|
if (nodeDataLocation) {
|
||||||
// Append main div to nodeDataLocation
|
// Append main div to nodeDataLocation
|
||||||
nodeDataLocation.appendChild(nodeData);
|
nodeDataLocation.appendChild(nodeData);
|
||||||
@@ -198,23 +190,18 @@ function updateNodeData(node, temperature, humidity, eCO2, TVOC) {
|
|||||||
document.getElementById("CO2Status").textContent = "Connected";
|
document.getElementById("CO2Status").textContent = "Connected";
|
||||||
document.getElementById("TVOCStatus").textContent = "Connected";
|
document.getElementById("TVOCStatus").textContent = "Connected";
|
||||||
|
|
||||||
// Update the graph`
|
// Update the graph
|
||||||
graphNode1.updateData(temperature, humidity, eCO2, TVOC);
|
liveGraphs[node - 1].updateData(temperature, humidity, eCO2, TVOC);
|
||||||
graphNode1.updateGraph();
|
liveGraphs[node - 1].updateGraph();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Call the function to create the HTML structure
|
// Call the function to create the HTML structure
|
||||||
createNodeData(1);
|
for (let i = 1; i <= amountOfNodes; i++) {
|
||||||
createNodeData(2);
|
createNodeData(i);
|
||||||
createNodeData(3);
|
liveGraphs.push(new liveGraph(i));
|
||||||
createNodeData(4);
|
}
|
||||||
|
|
||||||
// Create a new liveGraph object
|
// make the graphs
|
||||||
let graphNode1 = new liveGraph(1);
|
liveGraphs.forEach((graph) => {
|
||||||
|
graph.makeGraph();
|
||||||
graphNode1.makeGraph();
|
});
|
||||||
|
|
||||||
let graphNode2 = new liveGraph(2);
|
|
||||||
|
|
||||||
graphNode2.makeGraph();
|
|
||||||
// openConnection();
|
|
@@ -33,11 +33,6 @@ p1 {
|
|||||||
text-align: begin;
|
text-align: begin;
|
||||||
}
|
}
|
||||||
|
|
||||||
.apiGraph{
|
|
||||||
height: 100%;
|
|
||||||
width: 90%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.statusElement{
|
.statusElement{
|
||||||
display:inline-block;
|
display:inline-block;
|
||||||
border: solid #1f82d3 2px;
|
border: solid #1f82d3 2px;
|
||||||
@@ -50,35 +45,6 @@ p1 {
|
|||||||
font-size: 20px;
|
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 {
|
.flex-NodeData {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-left: 1%;
|
margin-left: 1%;
|
||||||
@@ -87,21 +53,33 @@ p1 {
|
|||||||
/* height: 40%; */
|
/* height: 40%; */
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
border: 3px solid #1f82d3;
|
border: 3px solid #1f82d3;
|
||||||
/* border-radius: 20px; */
|
border-radius: 20px;
|
||||||
|
/* width: 90%; */
|
||||||
/* border: 2px solid red; */
|
/* border: 2px solid red; */
|
||||||
/* margin-right: 90%; */
|
/* margin-right: 90%; */
|
||||||
/* width: 150vh; */
|
|
||||||
/* padding-right: 40%; */
|
/* padding-right: 40%; */
|
||||||
/* padding-left: 40%; */
|
/* padding-left: 40%; */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#nodeDataLocation{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
border: 4px solid rgb(0, 0, 255);
|
||||||
|
/* padding-bottom: 50%; */
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.nodeData {
|
.nodeData {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: left;
|
justify-content: left;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
margin-bottom: 2%;
|
margin-bottom: 2%;
|
||||||
margin-top: 1%;
|
margin-top: 1%;
|
||||||
|
|
||||||
/* border: 2px solid red; */
|
/* border: 2px solid red; */
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -113,8 +91,6 @@ justify-content: left;
|
|||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user