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

docs/.pages

@@ -11,6 +11,8 @@ nav:
         - TFT screen : node-documentation/TFT-screen
         - Classes : arduino-documentation/classes
         - Node Documentation: node-documentation/node
+        - Node Class: node-documentation/NodeClassDocumentation
+        - Node Uml Diagram: node-documentation/NodeClassUml
     - 🍓 RPi Documentation: 
         - Raspberry pi: Sp1SchetsProject/InfrastructuurDocumentatie/raspberryPi
         - MariaDB: rpi-documentation/mariadb-installation

docs/node-documentation/NodeClassDocumentation.md

@@ -0,0 +1,20 @@
+# OOP within Arduino
+
+Object-Oriented Programming (OOP) is a way of programing that provides a means of structuring your code so the code is modular and can be used more often without making huge changes or having to copy past the same code.
+
+## Abstraction
+
+Abstraction in OOP is the process of exposing only the required essential variables and functions. This means hiding the complexity and only showing the essential features of the object. In Arduino, this could mean creating a class like `Sensor node` with methods such as `setUp()`, `displayData()`, and `checkForError()`.
+
+## Encapsulation
+
+Encapsulation is the technique used to hide the data and methods within an object and prevent outside access. In Arduino, this could mean having private variables and methods in a class that can only be accessed and modified through public methods.
+
+## Which classes did we use
+
+In this Arduino project, we used several classes to organize our code and manage the complexity of the project. Some of these classes include:
+
+- `websockets`: This class is responsible for managing the WebSocket connections.
+- `nodeReadings`: This class is responsible for managing the sensor readings.
+
+Each of these classes encapsulates the data and methods related to a specific part of the project, making the code easier to understand and maintain.

docs/node-documentation/NodeClassUml.md

@@ -0,0 +1,43 @@
+### Uml diagram:
+
+``` mermaid
+classDiagram
+
+namespace Esp {
+    class Websockets{
+        +webSocket
+        +_WiFiMulti
+        hexdump()
+        websocketSetup()
+        loop()
+        webSocketEvent()
+        sendMyText()
+    }
+
+    class NodeReadings{
+
+    +TVOC_base, eCO2_base
+    +counter
+    +eCO2
+    +TVOC
+    +interval
+    +temperature
+    +humidity
+    +currentMillis
+    +lastMillis
+    +errorSGP30
+    +errorDHT11
+    +noise        
+
+    setup()
+    loop()
+    resetValues()
+    update()
+    checkForError()
+    displayData()
+
+    }
+
+
+}
+```

docs/rpi-documentation/Databaseconnection.md

@@ -1,32 +1,40 @@
+# Original Version (by bram)
+
 ## Python code + explaination
+
 We wanted to make a working connection between our websocket wich runs all the data gatherd by our nodes and a live feed to our database.
 So we set out to make this connection using python.
 
 At first we needed to import the folowing librarys:
+
 ```js
 // everything is running async so the code can run together and not interfere with eachother.
 import asyncio
 import websockets
 // a library to connect to the database.
-import mysql.connector 
+import mysql.connector
 import json
 ```
+
 Then we began the process of connecting with both the websocket and the database.
 
 First-off, we began making a connection to the database by using a mysql library in wich we gave the log in in order to connect to our ow database.
+
 ```js
-//the data that has to be pushed needs to be 
+//the data that has to be pushed needs to be
 async def process_data(data):
     try:
         mydb = mysql.connector.connect(
             host="localhost",
             user="*****",
             password="*********",
-            database="*******" 
+            database="*******"
         )
 ```
+
 Then after this we code in the infromation we want to put inside of the database.
 The data collected from the websocket is json data, so this has to be changed.
+
 ```js
 //Making a variable for the database connection
     cursor = mydb.cursor()
@@ -49,7 +57,7 @@ The data collected from the websocket is json data, so this has to be changed.
 //fetch the data from the database an[d put it in an array.
     MACDataFetching = MACDataReading.fetchall()
     MACArray = list(MACDataFetching)
-    
+
 //see if the fetched data is not in the gotten array.
 //otehrwise insert it into the database directly.
     if MACTuple not in MACArray:
@@ -70,9 +78,11 @@ The data collected from the websocket is json data, so this has to be changed.
         cursor.close()
         mydb.close()
 ```
+
 After fully connecting t othe database, making statements of what to put there and telling the code what to do, we ofcourse need to write the code to connect to the weebsocket.
 We begin by telling our websocket id and what type of port we are using.
-Then we will collect live data from the conected websocket, store it in a variable, and then in the previous code 
+Then we will collect live data from the conected websocket, store it in a variable, and then in the previous code
+
 ```js
 //here the connection to the websocked is made
 async def receive_data():
@@ -94,4 +104,165 @@ async def main():
     await receive_data()
 
 asyncio.run(main())
-```
+```
+
+# New Version (by sietse)
+
+## Changes made
+
+The original code was a good start, but it had some issues. The code could only handle the data from the sensorNodes and didn't include the nodeID for measurements.
+
+Since we have 2 kind of nodes (sensorNodes and enqueteNodes) we needed to make another function to commit the enqueteData in the database. I have also made a filter to know which data is from the sensorNodes and which data is from the enqueteNodes. This way we can commit the data to the right table in the database.
+
+I have also added a function to get the nodeID from the MAC address. This way we can commit the data to the right node in the database.
+
+## The new "filter" code
+
+### Function to get a list with macAdresses from the sensorNodes and enqueteNodes
+
+To filter i have made 2 lists, one with all the mac adresses of the sensorNodes and the other with the mac adresses of the enqueteNodes.
+
+The function that handles that and updates the list is the following:
+
+```python
+async def getNodeInfo(type):
+    global sensorNodeArray
+    global enqueteNodeArray
+
+    nodeInfoArray = []
+
+    id = (type,)
+    mydb = dbLogin()
+    cursor = mydb.cursor()
+    cursor.execute("""SELECT MAC FROM Node WHERE Type = %s""", id)
+    nodeInfo = cursor.fetchall()
+
+    for tuples in nodeInfo:
+        for item in tuples:
+            nodeInfoArray.append(item)
+    print(nodeInfoArray)
+
+    cursor.close()
+    mydb.close()
+
+    if type == 'sensor':
+        sensorNodeArray = nodeInfoArray
+        print(sensorNodeArray)
+        return sensorNodeArray
+
+    elif type == 'enquete':
+        enqueteNodeArray = nodeInfoArray
+        return enqueteNodeArray
+```
+
+As you can it works like this:
+
+1. It gets the MAC adresses from the database with the type of node you want to get the data from. (sensor or enquete)
+
+2. It executes the command and puts the data in a list.
+
+3. It uses a nested for loop to get the data out of the tuples and puts it in the nodeInfoArray.
+
+4. It updates, depending on what type, the sensorNodeArray or the enqueteNodeArray with the new data (NodeInfoArray).
+
+5. It returns the array with the data.
+
+### The filter code
+
+Now that we have the data we can filter the data from the websocket.
+
+```python
+    data = await websocket.recv()
+
+    processedData = json.loads(data)
+    macAdress = processedData['node']
+
+    if "Temp" in processedData:
+        type = 'sensor'
+    else:
+        type = 'enquete'
+
+    await getNodeInfo('sensor')
+    await getNodeInfo('enquete')
+
+    if macAdress in sensorNodeArray:
+        nodeID = await getNodeID(macAdress)
+        await processSensorNodeData(data, nodeID)
+    elif macAdress in enqueteNodeArray:
+        nodeID = await getNodeID(macAdress)
+        await processEnqueteNodeData(data, nodeID)
+    else:
+    await newNode(macAdress, type)
+```
+
+As you can see its alot of code to explain. So to make it easier i made a mermaid diagram to show how the code works / what it does.
+
+```mermaid
+graph TD
+    A[Get data from websocket] --> B{Is it sensor data or enquete data?}
+    B -->|sensor| C[Get sensorNodeArray]
+    B -->|enquete| D[Get enqueteNodeArray]
+    B -->|New node| E[Add new node to database]
+    C -->|data| G[Process sensorNodeData]
+    D -->|data| H[Process enqueteNodeData]
+```
+
+## The function to get the nodeID
+
+This function is used to get the nodeID from the MAC adress. This way we can commit the data with the right id in the database.
+
+The function to get the nodeID from the MAC adress is the following:
+
+```python
+async def getNodeID(macAdress):
+    id = (macAdress,)
+    mydb = dbLogin()
+    cursor = mydb.cursor()
+    cursor.execute("""SELECT nodeID FROM Node WHERE MAC = %s""", id)
+    data = cursor.fetchall()
+
+    for tuples in data:
+        for item in tuples:
+            nodeID = item
+
+    return nodeID
+```
+
+1. It gets the nodeID from the database with the MAC adress.
+2. It executes the command and puts the data in a list.
+3. It uses a nested for loop to get the data out of the tuples and puts it in the nodeID.
+4. It returns the nodeID.
+
+## The function to commit the data from the sensorNodes
+
+This function is alot like the original one, with the only 2 changes being that it now also commits the nodeID and that the code to make a new node is now in a different function.
+
+[Link to code](server\data.py)
+
+## The function to commit the data from the enqueteNodes
+
+This function is alot like the sensorNode function. It just commits the data to the enqueteData table in the database. And it has another data.
+
+[Link to code](server\data.py)
+
+## The function to add a new node to the database
+
+This function is used to add a new node to the database. This is used when a new node is connected to the websocket, but not yet in the database.
+
+The function to add a new node to the database is the following:
+
+```python
+async def newNode(mac, type):
+    id = (mac, type)
+    mydb = dbLogin()
+
+    cursor = mydb.cursor()
+    cursor.execute("INSERT INTO `Node` (MAC, Type) VALUES (%s, %s)", id)
+    print("new node assigned")
+    mydb.commit()
+```
+
+1. It gets the MAC adress and the type of node from the arguments.
+2. It executes the command to add the new node to the database.
+3. It prints that a new node is assigned.
+4. It commits the data to the database.

server/bullshitSenderENQUETE.py

@@ -12,7 +12,7 @@ async def send_data(uri):
             data = {
                 "node": "69:42:08:F5:00:00",
                 "Response": str(round(random.uniform(0, 2))),
-                "QuestionID": str(round(random.uniform(0, 90))),
+                "QuestionID": str(round(random.uniform(1, 2))),
             }
             await websocket.send(json.dumps(data))
             print("Data sent")

teamdocumentatie/dailyStandupNotes.md

@@ -87,4 +87,11 @@ Sam, tft scherm, rest api ombouwen om data in node tabel te douwen
     Sam: gebouw beheer vragen, Wall mounted enquete doos
     Sietse: rest api encete vragen
     Bram: expert voorbereigen, node data updaten
-    Dano: Documentatie schreiven,
+    Dano: Documentatie schreiven,
+
+27/03/2024
+
+    Bram: OOP python
+    Sam: new website
+    Sietse: enquete screen data sending to database and database cript better
+    Dano: documentation about oop arduino

web/new website/gauge.js

@@ -0,0 +1,20 @@
+// JavaScript
+function updateGauge(value) {
+    const gaugeValue = document.getElementById('gaugeValue');
+    const maxGaugeValue = 100; // Maximum value the gauge can display
+    const rotationDegree = ((value / maxGaugeValue) * 180) - 90; // Convert value to degree (-90 to 90)
+
+    gaugeValue.style.transform = `rotate(${rotationDegree}deg)`;
+
+    // Change color based on value
+    if (value <= 40) {
+        gaugeValue.style.backgroundColor = 'green';
+    } else if (value <= 80) {
+        gaugeValue.style.backgroundColor = 'orange';
+    } else {
+        gaugeValue.style.backgroundColor = 'red';
+    }
+}
+
+// Example usage:
+updateGauge(50); // Rotates the gauge to 0 degrees (50 out of 100) and changes color to orange

web/new website/index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css"
+    <title>bruh</title>
+</head>
+<body>
+
+
+    <div class="Node">
+        <div class="Sensorvalues">
+            <div id="gaugeContainer" class="gaugeContainer">
+                <img src="gauge.png" class="gaugeImage">
+                
+                <div id="gaugeValue" class="gaugeValue">
+                    
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+<!-- HTML -->
+
+
+</body>
+</html>
+
+
+<script src="gauge.js"></script>

web/new website/style.css

@@ -0,0 +1,59 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.gaugeContainer {
+    width: 300px;
+    height: 300px;
+    border: 3px solid black;
+    border-radius: 50%;
+    margin: 50px auto;
+    position: relative;
+}
+
+.center-point {
+    width: 20px;
+    height: 20px;
+    background-color: black;
+    border-radius: 50%;
+    position: absolute;
+    top: 137px;
+    left: 137px;
+}
+
+.speedometer-scale {
+    width: 8px;
+    height: 280px;
+    background-color: black;
+}
+
+/* CSS */
+/* CSS */
+.gaugeContainer {
+    width: 300px;
+    height: 300px;
+    border: 3px solid black;
+    border-radius: 50%;
+    margin: 50px auto;
+    position: relative;
+    display: block;
+}
+
+.gaugeValue {
+    width: 10px;
+    height: 150px;
+    position: absolute;
+    bottom: 50%;
+    left: 50%;
+    transform-origin: bottom;
+    transition: transform 0.3s ease, background-color 0.3s ease; /* Smooth transition for rotation and color change */
+}
+
+.gaugeImage {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+}