Smikkelbakje/J1B3-Sensor-boxes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of https://gitlab.fdmci.hva.nl/propedeuse-hbo-ict/onderwijs/2023-2024/out-a-se-ti/blok-3/qaajeeqiinii59

Browse Source
This commit is contained in:
Sam
2024-03-07 19:55:05 +01:00
parent 56abd5cbde 67aaaca588
commit 28bfd3a300
8 changed files with 151 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/.pages
View File

@@ -24,5 +24,5 @@ nav:
- Taskflow: brainstorm/Taskflow
- Design: Sp1SchetsProject/FirstDesign
- 🖨️ Software:
- Dev page: brainstrom/SotwareDocumentatie/Dev_page
- Dev page: brainstorm/SotwareDocumentatie/Dev_page

5
docs/LearningProcessBram/Sprint1/FirstDocumentation.md
View File

@@ -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: "));

115
docs/brainstorm/SoftwareDocumentatie/Dev_page.md
View File

@@ -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. 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) {
nodeNumber = data.node;
temperature = data.Temp;
@@ -20,13 +22,20 @@ 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,
@@ -35,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;
@@ -148,4 +73,4 @@ function updateNodeData(node, temperature, humidity, eCO2, TVOC) {
document.getElementById("CO2Status").textContent = "Connected";
document.getElementById("TVOCStatus").textContent = "Connected";
}
```

56
docs/brainstorm/SoftwareDocumentatie/graph_classes.md Normal file
View 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

15
teamdocumentatie/dailyStandupNotes.md
View File

@@ -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.
}

9
web/classes.js
View File

@@ -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);

89
web/main.js
View File

@@ -1,13 +1,17 @@
// Description: Main JavaScript file for the web application.
// arrays and stuff
const sensorData = {};
let intervalDelay = 1000;
// Create WebSocket connection.
const socket = new WebSocket("ws://145.92.8.114/ws");
let liveGraphs = [];
// letiables
let intervalDelay = 5000;
let amountOfNodes = 3;
const socket = new WebSocket("ws://145.92.8.114/ws");
function openConnection() {
// Open connection
socket.addEventListener("open", (event) => {
console.log("Connected to the WebSocket server");
socket.send("Hello Server!");
});
// Error handling
@@ -35,14 +39,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 +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 nodeData(data, node) {
let nodeData = document.createElement("div");
nodeData.innerHTML = data;
@@ -100,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";
@@ -154,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);
@@ -176,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);
@@ -198,23 +190,18 @@ 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(temperature, humidity, eCO2, TVOC);
liveGraphs[node - 1].updateGraph();
}
// Call the function to create the HTML structure
createNodeData(1);
createNodeData(2);
createNodeData(3);
createNodeData(4);
for (let i = 1; i <= amountOfNodes; i++) {
createNodeData(i);
liveGraphs.push(new liveGraph(i));
}
// Create a new liveGraph object
let graphNode1 = new liveGraph(1);
graphNode1.makeGraph();
let graphNode2 = new liveGraph(2);
graphNode2.makeGraph();
// openConnection();
// make the graphs
liveGraphs.forEach((graph) => {
graph.makeGraph();
});

54
web/styles.css
View File

@@ -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,33 @@ 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: row;
flex-wrap: wrap;
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 +91,6 @@ justify-content: left;
justify-content: space-evenly;
gap: 5px;
padding: 10px;
}