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

arduino/Mic/Mic.ino

@@ -0,0 +1,41 @@
+const int sampleWindow = 50;  // Sample window width in mS (50 mS = 20Hz)
+int const AMP_PIN = 7;       // Preamp output pin connected to A0
+unsigned int sample;
+
+void setup()
+{
+  Serial.begin(9600);
+}
+
+void loop()
+{
+  unsigned long startMillis = millis(); // Start of sample window
+  unsigned int peakToPeak = 0;   // peak-to-peak level
+
+  unsigned int signalMax = 0;
+  unsigned int signalMin = 1024;
+
+  // collect data for 50 mS and then plot data
+  while (millis() - startMillis < sampleWindow)
+  {
+    sample = analogRead(AMP_PIN);
+    if (sample < 1024)  // toss out spurious readings
+    {
+      if (sample > signalMax)
+      {
+        signalMax = sample;  // save just the max levels
+      }
+      else if (sample < signalMin)
+      {
+        signalMin = sample;  // save just the min levels
+      }
+    }
+  }
+  peakToPeak = signalMax - signalMin;  // max - min = peak-peak amplitude
+  if (peakToPeak == 4294966272){
+    peakToPeak = 0;
+  }
+  Serial.println(peakToPeak);
+  //double volts = (peakToPeak * 5.0) / 1024;  // convert to volts
+  //Serial.println(volts);
+}

arduino/node-code/node-code-1,3.ino

@@ -1,3 +1,6 @@
+// Dano Bosch
+// 14/2/2024
+
 #include <SPI.h>
 #include <Wire.h>
 #include <Adafruit_GFX.h>

arduino/node-code/node-code-final.ino

@@ -1,5 +1,5 @@
-// Sietse Jonker
-// 09/02/2024
+// Sietse Jonker & Dano Bosch
+// 13/02/2024
 
 #include <Wire.h>
 #include <Adafruit_SH110X.h>

docs/.pages

@@ -13,6 +13,12 @@ nav:
         - MariaDB: rpi-documentation/mariadb-installation
         - phpMyAdmin: rpi-documentation/phpmyadmin-installation
         - Websockets: rpi-documentation/websockets
+        - Reverse Proxy: rpi-documentation/Reverse-Proxy
     - 🧠 Brainstorm:
         - Ideeën: brainstorm/ideeën
         - Database design: brainstorm/Database 
+        - Feedback: brainstorm/Feedback
+        - Problem: brainstorm/Problem
+        - Infrastructure: brainstorm/UML-infrastructure
+        - Taskflow: brainstorm/Taskflow
+        

docs/Sp1SchetsProject/FirstDesign.md

@@ -1,6 +1,6 @@
-## The First Designs
+## The First Designs(led By Bram)
 The first designs are made using a pencil and paper, because we want a clear view of the direction we want to go in. The design of the nodes that are being put around school, wil have a compact and simple look. 
-![The First Node Sketch](../assets/ImagesSp1/sp1NodeSketch.jpg)
+![The First Node Sketch(Bram)](../assets/ImagesSp1/sp1NodeSketch.jpg)
 On the top of this, page the front of the node is visable. 
 This front shows a screen , a bar with led's ( wich is used to show how much sound is picked up on the node.), and a hexagon grid where the sensors are located behind. 
 This way we can have enough airflow and more sensor pickups.
@@ -13,7 +13,7 @@ The nodes will be powerd by batteries and wil be mounted on walls around eye hei
 
 Next up is the central node that has a questionaire built into it. 
 
-![The First Questionaire Node Sketch](../assets/ImagesSp1/Sp1questionBoxNode.jpg)
+![The First Questionaire Node Sketch(Bram)](../assets/ImagesSp1/Sp1questionBoxNode.jpg)
 
 On the top Of the page The front of the node is drawn. The node has two screens to show both the statistics and the questionaire. On the node, three Buttons are show wich the user can press in order to take the questionaire. 
 
@@ -22,4 +22,20 @@ This node still has all the sensors like all of the others, except this one has
 The locations for the nodes are still unsure but what is certain is that the questionaire node will be placed besides the water fountain and cofemachines.
 
 This location is frequently visited and is a wel known spot. 
-The people going for a cup of coffee often have to wait for it to be finished, so we can take advantage of that time by giving them a short questionaire that they can comforably fil in while their cofee is being made.
+The people going for a cup of coffee often have to wait for it to be finished, so we can take advantage of that time by giving them a short questionaire that they can comforably fil in while their cofee is being made.
+
+### Feedback
+
+As for feedback, we got a lot of positives, but also a few critic points.
+`the LED's could be seen as distracting.
+
+That is why we decided to remove them intirely. THis wat the lights can't be distracting and the focus can remain on the statistics.
+
+`The whole ventilation look is a bit too crowded and messy.
+
+That is why we will shrink down the size of the hexagons and make them less obvious.
+
+We also redesignd the shell shape. it now curves inward in order to lock the statistics screen in place.
+
+Here is an updated version ready to be printed.
+![3D design by Sietse](../assets/ImagesSp1/Sp13DDesignUpdated.png)

docs/Sprint1/sprint1Revieuw.md

@@ -6,11 +6,12 @@ Welkom bij de sprint review, wij zijn *insert namen*.
 
 Wij hebben de opdracht gekregen om de studieruimte te optimaliseren. Hiervoor moeten we data verzamelen over de studieomgeving en de meningen van onze medeleerlingen. We hebben feedback gevraagd bij studenten en daar is uit gebleken dat mensen moeite hebben met een rustige omgeving te vinden. Daarom gaan we een systeem bouwen waardoor je makkelijk rustige studieplekken kan vinden.
 
- Dit gaan we doen door het plaatsen van een centrale hub node en een aantal losse hub nodes. Deze nodes zullen verschillende datapunten verzamelen met behulp van sensoren, namelijk: temperatuur, luchtvochtigheid, ppm van koolstof en *insert funny bio massa meting ofzo*. Daarnaast hebben we een display waarop de huidige metingen worden getoond. In de centrale hub is ook een meetstation en een tweede scherm met enkele enquêteachtige vragen, waarbij gebruikers hun mening kunnen geven met behulp van 3 knoppen. We moeten nog testen of dit toegankelijk genoeg is. We hebben ook al een basisidee van hoe het design van de nodes eruit zal zien. *insert bram funny pic*
+ Dit gaan we doen door het plaatsen van een centrale hub node en een aantal losse hub nodes. Deze nodes zullen verschillende datapunten verzamelen met behulp van sensoren, namelijk: temperatuur, luchtvochtigheid, ppm van koolstof en TVOC. Daarnaast hebben we een display waarop de huidige metingen worden getoond. In de centrale hub is ook een meetstation en een tweede scherm met enkele enquêteachtige vragen, waarbij gebruikers hun mening kunnen geven met behulp van 3 knoppen. We moeten nog testen of dit toegankelijk genoeg is. We hebben ook al een basisidee van hoe het design van de nodes eruit zal zien. *insert bram funny pic*
 
 ### Bespreek welke User Stories jullie hebben gemaakt voor de Product Backlog.
 
 *laat belangrijke user stories zien*
+
 *leg uit waarom*
 
 ### Bespreek welke User Stories jullie hebben opgepakt in de Sprint Backlog.

docs/brainstorm/Feedback.md

@@ -1,6 +1,6 @@
 # Feedback
 
-### Studieomgeving
+### Studieomgeving(Led by Sam)
 
 * "Betere zitplekken"
 * "Mensen minder praten"
@@ -12,7 +12,7 @@
 We are going to build multiple sensor nodes and hang them around study areas to measure the sound level. These nodes are going to send the data to a server, which is going to process the data and send it to the main node that is located at the coffee machine. This node is going to show the data so the student can quickly find a quiet spot to work.
 
 
-### Feedback about physical node design 
+### Feedback about physical node design(Led By Sam)
 
 * "Cool"
 * "Goed"
@@ -26,5 +26,11 @@ We are going to build multiple sensor nodes and hang them around study areas to
 * "Lampjes mischien afleidend"
 
 
-### Conclusion
-We got a lot of positive feedback like "Cool" and "Vet idee". But we also got some feedback about the design of the node. 
+### Conclusion(led by Bram and Sam)
+We got a lot of positive feedback like "Cool" and "Vet idee". But we also got some feedback about the design of the node.
+
+We Wil use this Feedback and see what we can do to change the design in a way that is more accepted by our target audience.
+The design will be updated to include:
+`smaller holes for less distraction.
+`ventilation at the bottom for better airflow. 
+`Remove the lamps on top of the node for less distraction.

docs/brainstorm/Questions Enquete.md

@@ -1,5 +1,11 @@
 # Questions
 
-How clean are the toilets (clean, normal, disgusting)
-How clean is the study area (clean, normal, disgusting)
-What do you think of the temparature in the study area (hot, perfect, cold)
+## Criteria
+Questions shouldnt 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).

docs/brainstorm/UML-infrastructure.md

@@ -11,6 +11,9 @@ Raspberry pi <--> EnqueteNode : Websocket
 
 namespace Server {
     class Raspberry pi {
+        +MariaDB
+        +Apache2
+        +Python
         Database()
         Webserver()
         Websocket()
@@ -27,7 +30,6 @@ namespace Server {
     }
 }
 
-
 namespace User {
     class Website {
         +Co2

docs/node-documentation/node-design.md

@@ -0,0 +1,64 @@
+# Node Design
+
+## Design Process (led by sietse)
+### Thoughts
+
+Before making the design i was thinking about the following things:
+
+- The node should be compact and simple
+- The node should have a screen
+- The node should have a bar with led's to show how much sound is picked up on the node
+- The node should have a hexagon grid where the sensors are located behind
+- The node should have two lights on top
+- The nodes should be powered by batteries
+
+I also thought about the following things on how to make the design. I have decided to make the design using fusion360, because i have some experience with it and i think it is a good tool to make the design. I wanted it to be really easy to assemble so i split the design in two parts. The top and the bottom. The top part will be the part with the screen and the sensors, and the bottom part will be the part with the whole circuitboard.
+
+### Bottom design
+I made the final design of sprint 1 using fusion360. I used the original drawing from Bram and modified it using the feedback we've got from the usertest. I begun making the bottom side of the node, because this could serve me as a template to make the rest. The bottom side was pretty easy to make because i only had to sketch and measure a few things. It eventually looked like this: 
+
+![The Bottom Side of the Node](../assets/ImagesSp1/Sp1NodeBottomSide.png)
+
+### Top design
+When i went to work on the upper side it took some more time than the bottom one. since i had to make cutouts for the screen and led bar and the hexagon grid. The hexagon grid was the hardest because i used the geometric pattern fucntion on my hexagon object and i had to make sure that there would still be room between the hexagons. I made it so the screens have like a indent on the top part. Otherwise the battery, sensors and esp32 wouldnt be able to fit underneath the grid. The final product looks like this:
+
+![The Upper Side of the Node](../assets/ImagesSp1/Sp1NodeUpperSide.png)
+
+### Assembly 
+
+#### First assembly
+The part was finished on 15/2 at 11am. I first screwed the pcb in the bottom part which was really easy to do. When trying to put the top part on the bottom part i noticed that the holes were not aligned, and the batteryholder was fatter than i thought. I tried to cut some material away from the top part but it was still not fitting.
+
+It looked like this from the top:
+
+![The Assembly of the Node Topview](../assets/ImagesSp1/assemblyOfNodeTopview.jpg)
+
+You can see that the oled screen cutouts and the led bar cutouts are not aligned with the components on the pcb.
+
+---
+
+And like this from the side view:
+
+![The Assembly of the Node Sideview](../assets/ImagesSp1/assemblyOfNodeSideview.jpg)
+
+Here you can see that the wifi antenna of the esp32 is not fitting in the top part, because the fillet is too small.
+
+#### Second assembly
+In fusion360 i made the cutouts for the screen and the led bar lower on the part. I also made the fillet on the top part a bit bigger, and adjusted the fillet on top too. We also decided we'd take this oppurtunitty to make vent holes in the bottom aswell. This is because hot air rises and with this there would be a little bit of air coming through the node for more accurate readings. I then printed the new design and it took around 7 hours. The new design looks like this:
+
+
+![The New Upper Side of the Node](../assets/ImagesSp1/Sp1NodeUpperSideNew.png)
+
+The new design fits perfectly and looks like this:
+
+...
+
+
+### Conclusion
+
+```mermaid
+graph LR
+A[Design Sketch] -->|Usertest| B(Fusion360 design)
+B -->|Not fitting| C[New fusion360 design]
+C -->|assembly| D[Finished product]
+```

docs/rpi-documentation/Reverse-Proxy.md

@@ -0,0 +1,46 @@
+### Reverse proxy
+
+
+#### Introduction
+A reverse proxy is for example used to host 2 services on the same port. This is useful for us because we can use the same port for the websockets and the webserver. 
+
+#### How to use a reverse proxy
+We are going to use `Apache2` as our reverse proxy. This is because it is easy to use and has a lot of documentation. It also hosts our webserver so it is easy to configure and we don't have to install another program.
+
+#### Additional modules
+We need to enable the `proxy` and `proxy_wstunnel` modules. These are used to proxy the websockets.
+
+You can install them with these commands on a Raspberry Pi. For other linux distributions its may be different.
+
+```bash
+$ sudo a2enmod proxy
+$ sudo a2enmod proxy_wstunnel
+```
+
+#### Script
+The enabled apache2 config scripts are found in `/etc/apache2/conf-enabled/`. You can create a new file with the name of your service. For example `studyarea.conf`.
+```apache
+<VirtualHost *:80>
+    DocumentRoot /home/pi/www/html/
+
+    # Enable proxying WebSockets
+    ProxyPass /ws ws://localhost:8001/
+
+    # Enable proxying HTTP
+    ProxyPass /ws http://localhost:8080/
+</VirtualHost>
+```
+Because VirtualHost is listening on port 80, we can use the same port for the webserver and the websockets. The `ProxyPass` is used to proxy the websocket. The `/ws` is the path where the websockets are hosted. Its hosted on `localhost/ws` so it kinda creates a new subdomain for the websocket. The `localhost:8001` is the address of the websockets and the `localhost:8080` is the address of the webserver.
+
+
+`DocumentRoot` is the path where the files are for the website.
+
+
+
+### Sources:
+
+* https://httpd.apache.org/docs/2.4/howto/reverse_proxy.html
+* https://www.serverlab.ca/tutorials/linux/web-servers-linux/how-to-reverse-proxy-websockets-with-apache-2-4/
+* https://gist.github.com/mortenege/91ec6fe02dca6f736303a00f8cea2731
+* https://www.jscape.com/blog/forward-proxy-vs-reverse-proxy#:~:text=While%20a%20forward%20proxy%20proxies,is%20providing%20file%20transfer%20services.
+* https://webmasters.stackexchange.com/questions/143106/functional-difference-between-proxypass-and-proxypassreverse-in-apache

docs/rpi-documentation/websockets.md

@@ -12,7 +12,9 @@ There are different languages to serve websockets with, but we are going to use
 ### Ports
 We can only use certain ports like 113, 80, 443. These are common ports and are not blocked by firewalls. Something in the network is blocking all other ports which makes it hard to use websockets.
 
-
+A solution for this is to use a reverse proxy. (See [Reverse Proxy](./Reverse-Proxy.md))
 
 #### Sources: 
-* https://websockets.readthedocs.io/en/stable/index.html
+* https://websockets.readthedocs.io/en/stable/index.html
+
+**Written by Sam**

requirements.txt

@@ -2,7 +2,7 @@ mkdocs ~= 1.4.0
 Jinja2==3.1.0
 mkdocs-material ~= 9.1.12
 mkdocs-video ~= 1.3
-mkdocs-mermaid2-plugin ~= 0.6.0
+mkdocs-mermaid2-plugin ~= 1.0.4
 mkdocs-macros-plugin ~= 0.7.0
 mkdocs-awesome-pages-plugin ~= 2.8.0
 mkdocs-autolinks-plugin ~= 0.6.0