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

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

Browse Source
This commit is contained in:
Dano van den Bosch
2024-03-07 13:11:03 +01:00
parent 878fb9f491 24164841a9
commit 9566148fa6
20 changed files with 612 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
arduino/Button code/simple-buttons.ino Normal file
View File

@@ -0,0 +1,40 @@
//connect the 3v3 directly to the button and the other end of the button to a pin.
//this script adds a digital resistor so you dont have to add one yourself
const int buttonPin = 21; // the number of the pushbutton pin
const int buttonPin1 = 1; // the number of the pushbutton pin
const int buttonPin2 = 37; // the number of the pushbutton pin
// variables will change:
int buttonState = 0; // variable for reading the pushbutton status
int buttonState1 = 0; // variable for reading the pushbutton status
int buttonState2 = 0; // variable for reading the pushbutton status
void setup() {
// initialize the pushbutton pin as an input:
pinMode(buttonPin, INPUT_PULLDOWN);
Serial.begin(9600);
}
void loop() {
// read the state of the pushbutton value:
buttonState = digitalRead(buttonPin);
buttonState1 = digitalRead(buttonPin1);
buttonState2 = digitalRead(buttonPin2);
// check if the pushbutton is pressed. If it is, the buttonState is HIGH:
if (buttonState == HIGH) {
Serial.println("ik ben high");
}
else if (buttonState1 == HIGH){
Serial.println("ik ben higher");
}
else if (buttonState2 == HIGH){
Serial.println("ik ben highest");
}
else {
// turn LED off:
}
}

69
arduino/Screen code/Screen-code-full/Screen-code-full.ino Normal file
View File

@@ -0,0 +1,69 @@
#include <SPI.h>
#include "Adafruit_GFX.h"
#include "Adafruit_ST7796S_kbv.h"
#include "headerFile.h"
#include "displayText.h"
int i = 0;
char* Question[] = {
"How clean are the toilets?",
"How clean is the study area?",
"What do you think of the temperature in the study area?",
"How crowded would you say the study area is?",
"Is there enough help available?"
};
char* Answer[] = {
"clean, normal, disgusting",
"clean, normal, disgusting",
"hot, perfect, cold",
"not at all, its fine, really crowded",
"no, decently, yes"
};
//simplify the name of the library
Adafruit_ST7796S_kbv tft = Adafruit_ST7796S_kbv(TFT_CS, TFT_DC, MOSI, SCK, TFT_RST, MISO);
DisplayText displayText(tft);
void setup() {
tft.begin(); // Initialize the display
tft.setRotation(3); // Set the rotation to horizontal
tft.fillScreen(ST7796S_BLACK);
}
void loop() {
i++;
if (i == 5) {
i = 0;
}
tft.fillScreen(ST7796S_BLACK); // Fill the screen with black color
// writeText(Question[0], 2, 50, 0, 0);
// writeText(Answer[0], 2, 50, 300, 4000);
displayText.writeText(Question[i], 3, 0, 0, 0, true);
displayText.writeText(Answer[i], 3, 0, 200, 0, true);
delay(10000);
}
// void writeText(char* text, int size, int posX, int posY, int screenTime, bool center){
// //if true overwrites x
// if (center){
// posX = centerText(text);
// }
// tft.setCursor(posX, posY); // Set the cursor to the top left corner
// tft.setTextSize(size); // Set textsize
// tft.println(text);
// delay(screenTime);
// }
// int centerText(char* text) {
// int16_t x1, y1;
// uint16_t w, h;
// tft.getTextBounds(text, 0, 0, &x1, &y1, &w, &h); // Calculate the width of the text
// int x = (tft.width() - w) / 2; // Calculate the x-coordinate for the centered text
// return x;
// }

25
arduino/Screen code/Screen-code-full/displayText.cpp Normal file
View File

@@ -0,0 +1,25 @@
#include "displayText.h"
#include "Arduino.h"
//constructor
DisplayText::DisplayText(Adafruit_ST7796S_kbv& tftDisplay) : tft(tftDisplay) {
}
void DisplayText::writeText(char* text, int size, int posX, int posY, int screenTime, bool center) {
if (center) {
posX = centerText(text);
}
tft.setCursor(posX, posY);
tft.setTextSize(size);
tft.println(text);
delay(screenTime);
}
int DisplayText::centerText(char* text) {
int16_t x1, y1;
uint16_t w, h;
tft.getTextBounds(text, 0, 0, &x1, &y1, &w, &h);
int x = (tft.width() - w) / 2;
return x;
}

17
arduino/Screen code/Screen-code-full/displayText.h Normal file
View File

@@ -0,0 +1,17 @@
#ifndef DISPLAYTEXT_H
#define DISPLAYTEXT_H
#include "Adafruit_GFX.h"
#include "Adafruit_ST7796S_kbv.h"
class DisplayText {
private:
Adafruit_ST7796S_kbv& tft;
int centerText(char* text);
public:
DisplayText(Adafruit_ST7796S_kbv& tftDisplay);
void writeText(char* text, int size, int posX, int posY, int screenTime, bool center);
};
#endif

6
arduino/Screen code/Screen-code-full/headerFile.h Normal file
View File

@@ -0,0 +1,6 @@
#define TFT_CS 14
#define TFT_DC 13
#define TFT_RST 12
#define MOSI 11
#define SCK 10
#define MISO 9

53
arduino/Screen code/screen-with-questions-nostyling.ino Normal file
View File

@@ -0,0 +1,53 @@
//styling still needs to be done.
//this code is to display the questions on the screen.
#include <SPI.h>
#include "Adafruit_GFX.h"
#include "Adafruit_ST7796S_kbv.h"
#define TFT_CS 14
#define TFT_DC 13
#define TFT_RST 12
#define MOSI 11
#define SCK 10
#define MISO 9
char* Question[] = {
"How clean are the toilets? (clean, normal, disgusting).",
"How clean is the study area? (clean, normal, disgusting).",
"What do you think of the temperature in the study area? (hot, perfect, cold).",
"How crowded would you say the study area is?(not at all, its fine, really crowded).",
"Is there enough help available? (no, decently, yes)"
};
//simplify the name of the library
Adafruit_ST7796S_kbv tft = Adafruit_ST7796S_kbv(TFT_CS, TFT_DC, MOSI, SCK, TFT_RST, MISO);
void setup() {
tft.begin(); // Initialize the display
tft.setRotation(3); // Set the rotation to horizontal
tft.fillScreen(ST7796S_BLACK); // Fill the screen with black color
tft.setTextColor(ST7796S_WHITE); // Set the text color to white
tft.setTextSize(2); // Set the text size to 2
Serial.begin(9600);
}
void loop() {
tft.setTextSize(2); // Set textsize
tft.setCursor(0, 0); // Set the cursor to the top left corner
//the cursor is where it types the text or shape on the screen, 0,0 is the topleft
tft.println("Hello, world!"); // Print the text
delay(2000); // Wait for 2 seconds
tft.fillScreen(ST7796S_BLACK); // Clear the screen
tft.setCursor(0, 0); // Set the cursor to the top left corner
tft.println("New text!"); // Print the new text
delay(2000); // Wait for 2 seconds
tft.fillScreen(ST7796S_BLACK); // Clear the screen
tft.setCursor(0, 0); // Set the cursor to the top left corner
tft.println(Question[1]);
delay(10000); //delay set a longer delay so the long text can write out
}

40
arduino/Screen code/writetext function.ino Normal file
View File

@@ -0,0 +1,40 @@
#include <SPI.h>
#include "Adafruit_GFX.h"
#include "Adafruit_ST7796S_kbv.h"
#include "headerFile.h"
char* Question[] = {
"How clean are the toilets? (clean, normal, disgusting).",
"How clean is the study area? (clean, normal, disgusting).",
"What do you think of the temperature in the study area? (hot, perfect, cold).",
"How crowded would you say the study area is?(not at all, its fine, really crowded).",
"Is there enough help available? (no, decently, yes)"
};
//simplify the name of the library
Adafruit_ST7796S_kbv tft = Adafruit_ST7796S_kbv(TFT_CS, TFT_DC, MOSI, SCK, TFT_RST, MISO);
void setup() {
tft.begin(); // Initialize the display
tft.setRotation(3); // Set the rotation to horizontal
tft.fillScreen(ST7796S_BLACK);
}
void loop() {
writeText(Question[0], 2, 0, 0, 4000);
writeText(Question[1], 2, 0, 0, 4000);
writeText(Question[2], 2, 0, 0, 4000);
}
void writeText(char* text, int size, int posX, int posY, int screenTime){
tft.fillScreen(ST7796S_BLACK); // Fill the screen with black color
tft.setCursor(posX, posY); // Set the cursor to the top left corner
tft.setTextSize(size); // Set textsize
tft.println(text);
delay(screenTime);
}

44
arduino/node-code/node-code-final/node-code-final.ino
View File

@@ -1,5 +1,5 @@
// Sietse Jonker & Dano van den Bosch
// 27/02/2024
// Sietse Jonker & Dano Bosch
// 28/02/2024
// include these libraries
#include <Wire.h>
@@ -21,6 +21,9 @@
#define i2c_adress 0x3c
#define USE_SERIAL Serial
// define node identification number
#define nodeIdentificationNumber 1
// make new objects
Adafruit_SH1106G display = Adafruit_SH1106G(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire);
DHT dht(DHTPIN, DHTTYPE);
@@ -69,13 +72,13 @@ void webSocketEvent(WStype_t type, uint8_t * payload, size_t length) {
webSocket.sendTXT("Connected");
break;
case WStype_TEXT:
USE_SERIAL.printf("[WSc] get text: %s\n", payload);
// USE_SERIAL.printf("[WSc] get text: %s\n", payload);
// send message to server
// webSocket.sendTXT("message here");
break;
case WStype_BIN:
USE_SERIAL.printf("[WSc] get binary length: %u\n", length);
// USE_SERIAL.printf("[WSc] get binary length: %u\n", length);
hexdump(payload, length);
// send data to server
@@ -128,38 +131,38 @@ bool checkForError(){
if (!sgp.IAQmeasure()) {
Serial.println("SGP30: BAD");
errorSGP30 = true;
return true;
} else {
Serial.println("SGP30: OK");
errorSGP30 = false;
return false;
}
if (isnan(temperature) || isnan(humidity)){
Serial.println("DHT11: BAD");
errorDHT11 = true;
return true;
} else {
Serial.println("DHT11: OK");
errorDHT11 = false;
return false;
}
return false;
}
// function to update when interval is met (see intervalCounter variable)
void update(){
// webSocket.sendTXT("{\"Temp\":\"" + String(temperature) + \",\"Humi\":\" " + String(humidity) + "\",\"eCO2\":\"" + String(sgp.eCO2) + "\",\"TVOC\":\"" + String(sgp.TVOC) + "\"}");
webSocket.sendTXT("{\"Temp\":\"" + String(temperature) + "\",\"Humi\":\"" + String(humidity) + "\",\"eCO2\":\"" + String(sgp.eCO2) + "\",\"TVOC\":\"" + String(sgp.TVOC) + "\"}");
// webSocket.sendTXT("Temp: " + String(temperature));
// webSocket.sendTXT("Humi: " + String(humidity));
// webSocket.sendTXT("eCO2: " + String(sgp.eCO2));
// webSocket.sendTXT("TVOC: " + String(sgp.TVOC));
// display sensordata on oled screen
displayData();
// webSocket.sendTXT("{\"Temp\":\"" + String(temperature) + "\",\"Humi\":\"" + String(humidity) + "\",\"eCO2\":\"" + String(sgp.eCO2) + "\",\"TVOC\":\"" + String(sgp.TVOC) + "\"}");
webSocket.sendTXT("{\"node\": \"" + String(nodeIdentificationNumber) + "\", \"Temp\":\"" + String(temperature) + "\",\"Humi\":\"" + String(humidity) + "\",\"eCO2\":\"" + String(sgp.eCO2) + "\",\"TVOC\":\"" + String(sgp.TVOC) + "\"}");
sgp.getIAQBaseline(&eCO2_base, &TVOC_base);
// read dht11 sensor
temperature = float(dht.readTemperature());
humidity = float(dht.readHumidity());
// check if any errors occured when reading sensors
checkForError();
}
// function to display data on oled screen
@@ -177,12 +180,14 @@ void displayData() {
+ "Humi: " + int(humidity) + "%" + '\n'
+ "eCO2: " + int(sgp.eCO2) + '\n'
+ "TVOC: " + int(sgp.TVOC));
// display the screen
display.display();
}
// setup function
void setup() {
// make serial connection at 115200 baud
Serial.begin(115200);
// tell display what settings to use
@@ -191,8 +196,7 @@ void setup() {
// tell sensors to start reading
dht.begin();
sgp.begin();
sgp.begin();
pinMode(MICPIN, INPUT);
pinMode(DHTPIN, INPUT);
@@ -203,15 +207,9 @@ void setup() {
// loop function
void loop() {
// check for errors
checkForError();
// loop the websocket connection so it stays alive
webSocket.loop();
// display sensordata on oled screen
displayData();
// update when interval is met
if (currentMillis - lastMillis >= interval){
lastMillis = millis();

1
docs/.pages
View File

@@ -8,6 +8,7 @@ nav:
- Links: opdracht/links
- 🎮 Arduino documentation:
- I2C: arduino-documentation/i2c-ESP32
- TFT screen : node-documentation/TFT-screen
- 🍓 RPi Documentation:
- Raspberry pi: Sp1SchetsProject/InfrastructuurDocumentatie/raspberryPi
- MariaDB: rpi-documentation/mariadb-installation

0
docs/LearningProcessBram/Sprint1/FeedbackRetro → docs/LearningProcessBram/Sprint1/FeedbackRetro.md
View File

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

@@ -57,7 +57,7 @@ examples, basics, fade
\/ servo's
examples, servo, sweep
### Linux and raspberrypi.
### Linux and raspberryPI.
To gain more knowledge about linux, i first asked my class mates if they could get me started.
They showed me how to gain acces to a server, and told me how to navigate through files.
By doing this i got taught the following commands:
@@ -71,4 +71,97 @@ By doing this i got taught the following commands:
~ $ 'ssh username@ip address' = open ssh connection.
From here i went and looked up several linux video's wich taught me the following:
....
### Air, temperature, and all sort of stuff.
After the linux coding i decided to take a step back and began gaining experience with sensors.
I began trying to make our group project's "node" for myself.
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:
```
#include "DHT.h"
#define DHTPIN 4
#define DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE);
void setup() {
// put your setup code here, to run once:
Serial.begin(9600);
Serial.println(F("DHTxx test!"));
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);
if (isnan(h) || isnan(t) || isnan(f)) {
Serial.println(F("Failed to read from DHT sensor!"));
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: "));
Serial.print(h);
Serial.print(F("% Temperature: "));
Serial.print(t);
Serial.print(F("°C "));
Serial.print(f);
Serial.print(F("°F Heat index: "));
Serial.print(hic);
Serial.print(F("°C "));
Serial.print(hif);
Serial.println(F("°F"));
}
```
And The fysical board looks like this:
And here it looks in action:
Later on i could expand this code and the fysical product to include the rest of the sensors.
### Buzzers .pt 2
I found out how to make multiple buzzers go off with the press of one button and increase as mutch as there are pins.
I tried to not look up anything for this one, but did ask questions form time to time.
I designed it to work with scaning if there is and input and then output this signal to activate the buzzers.
This output signal can activate over multiple pins so this one button can set off all sorts of stuff.
The code is short and simple:
```
int button = 20;
int buzzerone = 12;
int buzzertwo = 11;
void setup() {
// put your setup code here, to run once:
pinMode(button, INPUT);
pinMode(buzzerone, OUTPUT);
pinMode(buzzertwo, OUTPUT);
}
void loop() {
if(digitalRead(button) == HIGH){
digitalWrite(buzzerone, HIGH);
digitalWrite(buzzertwo, HIGH);
}else{
digitalWrite(buzzerone, LOW);
digitalWrite(buzzertwo, LOW);
}
}
```
and the fysical design looks like this: ...

4
docs/Sp1SchetsProject/InfrastructuurDocumentatie/raspberryPi.md
View File

@@ -18,12 +18,14 @@ The Raspberry 3 can be descriped as a "little" computer running a quad-code 64-b
### Dev Page
For monitoring porpoises we are going to implement a dev page, this means that there basicey is a debug page. On this page we will be displaying the current readings that are comming in in to graphs and also the data form the last 10 redings from all the nodes, the readings are sorted in there respective graphs like temp, humidity and noice redings for example.
For monitoring porpoises we are going to implement a dev page, this means that there basicey is a debug page. On this page we will be displaying the current readings that are comming in in to graphs and also the data form the last 10 redings from all the nodes, the readings are sorted in there respective graphs like temp, humidity and noice redings for example. This is handy for quick access to the data ouwr nodes are sending out. So it will be easy to see if one is malvuntion and monetoring the state off the battery to check if its nessesery to replace it.
### Database
## Database
The database is set up on the raspberry so that we dont always have to have a computewr
### Database software
### Esp to database

BIN
docs/assets/imagesSp2/IMG_1131.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 MiB

BIN
docs/assets/imagesSp2/fritzingscreen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 151 KiB

32
docs/brainstorm/Questions Enquete.md
View File

@@ -1,11 +1,31 @@
# Questions
## Criteria
Questions shouldnt be able to measure using sensors. 3 possible answers.
Questions shouldn't be able to measure using sensors. 3 possible answers.
## Questions
How clean are the toilets? (clean, normal, disgusting).
How clean is the study area? (clean, normal, disgusting).
What do you think of the temperature in the study area? (hot, perfect, cold).
How crowded would you say the study area is?(not at all, its fine, really crowded).
Is there enough help available? (no, decently, yes).
- How clean are the toilets? (clean, normal, disgusting).
- How clean is the study area? (clean, normal, disgusting).
- What do you think of the temperature in the study area? (hot, perfect, cold).
- How crowded would you say the study area is?(not at all, its fine, really crowded).
- Is there enough help available? (no, decently, yes).
### Feedback questions
- Zijn de vragen duidelijk en snel te beantwoorden hierboven?
- Hebben jullie nog andere feedback voor gebouwbeheer, die niet gemeten kan worden door sensoren?
## Feedback
1. vraag 5 is onduidelijk. Wat bedoel je met genoeg hulp? Docenten, schoonmakers? Andere manier formuleren over welke hulp. Andere vragen zijn duidelijk. Er kan een vraag worden toegevoegd over of het goed gaat met de studie of over de dag. Dit is niet heel hulpvol voor gebouwbeheer maar voor de studenten zelf wel.
2. andere variant van antwoord geven op de vragen. Bijvoorbeeld een schaal van 1 tot 5. Of een schaal van 1 tot 10. Dit is makkelijker te verwerken en te analyseren. Voor de rest zijn de vragen duidelijk. Deze persoon heeft geen andere feedback voor gebouwbeheer want deze vragen zijn genoeg
3. De vragen zijn duidelijk en snel te beantwoorden. behalve vraag 5 die onduidleijk is. geen andere vragen vragen als feedback.
## Conclusion
The questions are clear and easy to answer, except for question 5 which is unclear.

103
docs/node-documentation/TFT-screen.md Normal file
View File

@@ -0,0 +1,103 @@
# TFT screen
## Prequesites
To use the TFT screen, you need to install the following libraries:
``` SPI.h , Adafruit_GFX.h, Adafruit_ST7796S_kbv.h ```
## Programming the screen
To program the screen we need to first declare all the pins and give it to the Adafruit_ST7796S_kbv.h library. Then we need to initialize the screen and we can start using it.
```cpp
#define TFT_CS 14
#define TFT_DC 13
#define TFT_RST 12
#define MOSI 11
#define SCK 10
#define MISO 9
//simplify the name of the library and feed all the correct pins to it
Adafruit_ST7796S_kbv tft = Adafruit_ST7796S_kbv(TFT_CS, TFT_DC, MOSI, SCK, TFT_RST, MISO);
```
## Drawing on the screen
To draw on the screen we can use the following functions:
```cpp
tft.fillScreen(0x0000); //clear the screen
tft.fillRect(0, 0, 240, 240, 0xFFFF); //draw a white rectangle
tft.fillCircle(120, 120, 50, 0xF800); //draw a red circle
tft.fillTriangle(0, 0, 240, 240, 0, 240, 0x1F); //draw a blue triangle
tft.fillRoundRect(0, 0, 240, 240, 10, 0xF81F); //draw a pink rounded rectangle
tft.drawChar(120, 120, 'A', 0xFFFF, 0x0000, 2); //draw a character
tft.setTextSize(2); //set the text size
tft.setTextColor(0xFFFF); //set the text color
tft.setCursor(0, 0); //set the cursor
tft.println("Hello World!"); //print a string
```
To write Hello world on the screen we can use the following code:
```cpp
tft.fillScreen(0x0000); //clear the screen
tft.setTextSize(2); //set the text size
tft.setTextColor(0xFFFF); //set the text color
tft.setCursor(0, 0); //set the cursor so it starts at the top right, you can also make this other numbers to change the position
tft.println("Hello World!"); //print a string
```
To clear the screen for new text you can use the following code:
```cpp
tft.fillScreen(0x0000); //clear the screen
```
## Wiring
You can connect the wires to any pin except the vcc and the ground. The vcc and ground need to be connected to the 3.3v and ground of the esp32. The other pins can be connected to any pin of the esp32.
![TFT screen diagram](../assets/imagesSp2/fritzingscreen.png)
We aren't using the cs2 and the pen pin because we arent utilizing the touch function of the screen.
```mermaid
classDiagram
displayTex <|-- Adafruit_ST7796S_kbv
loop <-- displayTex
class displayTex{
+text
+color
+size
+posx
+posy
+void writeText()
-int centerText(char* text)
}
class Adafruit_ST7796S_kbv{
+fillScreen()
+fillRect()
+fillCircle()
+fillTriangle()
+fillRoundRect()
+drawChar()
+setTextSize()
+setTextColor()
+setCursor()
+println()
}
```
## Sources
* https://www.tinytronics.nl/en/displays/tft/4-inch-tft-display-320*480-pixels-with-touchscreen-spi-st7796s Source for Driver
* https://github.com/prenticedavid/Adafruit_ST7796S_kbv Download link for the library

16
teamdocumentatie/dailyStandupNotes.md Normal file
View File

@@ -0,0 +1,16 @@
### Sprint 2: The product.
28 - 2 - 2024: {
At the standup we made soem finishing touches on who is gonna do what and what each role will feature.
Dano and Bram are going to start with doing research about extracting information from the PI and wil be setting up a HTML page for the information to display.
Sam and Sietse are going to be busy with connecting to the websocket and will do some minor tweaking to the current node moddel that we have.
}
29 - 2 - 2024: {
At today's standup we got together to talk about our progression in each of our tasks. Where we found that our tasks for today will be moreso the same but wit hsome minor ajusting.
Sam and Sietse will be designing the pcb aswell as making some progress on the questionaire, while Dano and Bram will be making the connection between the websocket and the devpage/ html page aswell as making some user-stories.
}
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.
}

82
web/classes.js Normal file
View File

@@ -0,0 +1,82 @@
class liveGraph {
// Constructor to initialize the graph
constructor(id) {
this.timeArray = [];
this.tempArray = [];
this.humiArray = [];
this.eco2Array = [];
this.tvocArray = [];
this.cnt = 0;
this.nodeId = "liveGraph" + id;
}
// Fuction to create a graph
makeGraph() {
Plotly.plot(this.nodeId, [
{
x: this.timeArray, // Use timeArray as x values
y: this.tempArray,
mode: "lines",
line: { color: "#FF0000" },
name: "Temperature",
},
]);
Plotly.plot(this.nodeId, [
{
x: this.timeArray, // Use timeArray as x values
y: this.humiArray,
mode: "lines",
line: { color: "#80CAF6" },
name: "Humidity",
},
]);
Plotly.plot(this.nodeId, [
{
x: this.timeArray, // Use timeArray as x values
y: this.eco2Array,
mode: "lines",
line: { color: "#FFA500" },
name: "eCO2 / 10",
},
]);
Plotly.plot(this.nodeId, [
{
x: this.timeArray, // Use timeArray as x values
y: this.tvocArray,
mode: "lines",
line: { color: "#000000" },
name: "TVOC / 10",
},
]);
}
// Function to update the graph with new values
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: [olderTime, futureTime],
},
};
Plotly.relayout(this.nodeId, minuteView);
if (this.cnt === 10) clearInterval(interval);
}
updateData(temperature, humidity, eCO2, TVOC) {
// Update the graph
this.tempArray.push(temperature);
this.humiArray.push(humidity);
this.eco2Array.push(eCO2 / 10);
this.tvocArray.push(TVOC / 10);
}
}

41
web/index.html
View File

@@ -26,44 +26,9 @@
<div id="nodeDataLocation">
</div>
<!-- Make a new flex container for the live data -->
<!-- <div class="nodeData">
<div class="flex-NodeData">
<p>Node 1</p>
<div class="flex-LiveData">
<div>
<div>Temperatuur: <p id="temperature">Not connected</p>
</div>
<div class="statusElement">
<p class="statusText" id="tempStatus">Not connected</p>
</div>
</div>
<div>
<div>Luchtvochtigheid: <p id="humidity">Not connected</p>
</div>
<div class="statusElement">
<p class="statusText" id="humidStatus">Not connected</p>
</div>
</div>
<div>
<div>Lichtintensiteit: <p id="lightIntensity">Not connected</p>
</div>
<div class="statusElement">
<p class="statusText" id="lightIntensityStatus">Not connected</p>
</div>
</div>
</div>
<div class="flex-graph">
<div>
<p>Live graph:</p>
<div id="liveGraph"></div>
</div>
</div>
</div> -->
<!-- Include the js file -->
<!-- Include the js file -->
<script src="classes.js"></script>
<script src="main.js"></script>
</body>
<html>

67
web/main.js
View File

@@ -1,17 +1,5 @@
let data;
let measurements;
let date;
let value;
let newArrayTemp = [];
let newArrayHumid = [];
let newArrayLight = [];
let timeArray = []; // Array to store time values`
let valueArray = [1, 2, 3, 4, 5];
let newValueArray = [4, 5, 6];
let myValue = 1;
let intervalDelay = 50;
const sensorData = {};
let intervalDelay = 1000;
// Create WebSocket connection.
const socket = new WebSocket("ws://145.92.8.114/ws");
@@ -99,46 +87,6 @@ function pushArray(array) {
array.push(Math.random() * 10);
}
}
// Make lines in the graph of the live data
/*Plotly.plot("liveGraph", [
{
x: timeArray, // Use timeArray as x values
y: valueArray,
mode: "lines",
line: { color: "#80CAF6" },
name: "Temperature",
},
]);
let cnt = 0;
// Update the graph every 1 ms
let interval = setInterval(function () {
var time = new Date();
timeArray.push(new Date());
pushArray(valueArray);
var update = {
x: [[timeArray]],
y: [[newValueArray]],
};
var olderTime = time.setMinutes(time.getMinutes() - 1);
var futureTime = time.setMinutes(time.getMinutes() + 1);
var minuteView = {
xaxis: {
type: "date",
range: [olderTime, futureTime],
},
};
Plotly.relayout("liveGraph", minuteView);
if (cnt === 10) clearInterval(interval);
}, intervalDelay);
*/
//function for making the html elements for the following html code
@@ -215,7 +163,7 @@ function createNodeData(node) {
graphP.textContent = "Live graph:";
var liveGraph = document.createElement("div");
liveGraph.id = "liveGraph";
liveGraph.id = "liveGraph" + node;
graphDiv.appendChild(graphP);
graphDiv.appendChild(liveGraph);
@@ -249,6 +197,10 @@ function updateNodeData(node, temperature, humidity, eCO2, TVOC) {
document.getElementById("humidStatus").textContent = "Connected";
document.getElementById("CO2Status").textContent = "Connected";
document.getElementById("TVOCStatus").textContent = "Connected";
// Update the graph`
graphNode1.updateData(temperature, humidity, eCO2, TVOC);
graphNode1.updateGraph();
}
// Call the function to create the HTML structure
@@ -257,5 +209,12 @@ createNodeData(2);
createNodeData(3);
createNodeData(4);
// Create a new liveGraph object
let graphNode1 = new liveGraph(1);
graphNode1.makeGraph();
let graphNode2 = new liveGraph(2);
graphNode2.makeGraph();
// openConnection();