SCHOON

ReadMe.md

@@ -48,7 +48,7 @@ De branch "oomen" is up to date. Het mergen ging niet helemaal goed dus we hebbe
 
 ## Auteurs
 
-* **Atilla Oomen** - *Projectleider | Programmeur* - [Znooptokkie](https://github.com/Znooptokkie)
+* **Atilla Oomen** - *Projectleider | Back end Programmeur* - [Znooptokkie](https://github.com/Znooptokkie)
 
 * **Mohammed Çifçi** - *Back end Programmeur* - [6028570](https://github.com/6028570)
 

app.js

@@ -14,8 +14,21 @@ const { PythonShell } = require("python-shell");
 const path = require("path");
 
 // Definieert het pad naar de index.html van de Electron app.
-const urlElectron = path.join(__dirname, "src/index.html");
+// const urlElectron = path.join(__dirname, "src/index.html");
-
+/*⠀⠀⠀⢸⣦⡀⠀⠀⠀⠀⢀⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⢸⣏⠻⣶⣤⡶⢾⡿⠁⠀⢠⣄⡀⢀⣴⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⣀⣼⠷⠀⠀⠁⢀⣿⠃⠀⠀⢀⣿⣿⣿⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠴⣾⣯⣅⣀⠀⠀⠀⠈⢻⣦⡀⠒⠻⠿⣿⡿⠿⠓⠂⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠉⢻⡇⣤⣾⣿⣷⣿⣿⣤⠀⠀⣿⠁⠀⠀⠀⢀⣴⣿⣿⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠸⣿⡿⠏⠀⢀⠀⠀⠿⣶⣤⣤⣤⣄⣀⣴⣿⡿⢻⣿⡆⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠟⠁⠀⢀⣼⠀⠀⠀⠹⣿⣟⠿⠿⠿⡿⠋⠀⠘⣿⣇⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⢳⣶⣶⣿⣿⣇⣀⠀⠀⠙⣿⣆⠀⠀⠀⠀⠀⠀⠛⠿⣿⣦⣤⣀⠀⠀
+⠀⠀⠀⠀⠀⠀⣹⣿⣿⣿⣿⠿⠋⠁⠀⣹⣿⠳⠀⠀⠀⠀⠀⠀⢀⣠⣽⣿⡿⠟⠃
+⠀⠀⠀⠀⠀⢰⠿⠛⠻⢿⡇⠀⠀⠀⣰⣿⠏⠀⠀⢀⠀⠀⠀⣾⣿⠟⠋⠁⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠀⠀⣰⣿⣿⣾⣿⠿⢿⣷⣀⢀⣿⡇⠁⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠉⠁⠀⠀⠀⠀⠙⢿⣿⣿⠇⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠀⠀⠀*/
 // Initialiseert de Express app.
 const server = express();
 
@@ -52,12 +65,26 @@ server.post("/submit-form", (req, res) =>
 });
 
 // Definieert de poort waarop de server luistert.
+// const PORT = 5000;
 const PORT = 3000;
 server.listen(PORT, () => 
 {
   console.log(`Server is listening on port ${PORT}`);
 });
-
+/*⠀⠀⠀⢸⣦⡀⠀⠀⠀⠀⢀⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⢸⣏⠻⣶⣤⡶⢾⡿⠁⠀⢠⣄⡀⢀⣴⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⣀⣼⠷⠀⠀⠁⢀⣿⠃⠀⠀⢀⣿⣿⣿⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠴⣾⣯⣅⣀⠀⠀⠀⠈⢻⣦⡀⠒⠻⠿⣿⡿⠿⠓⠂⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠉⢻⡇⣤⣾⣿⣷⣿⣿⣤⠀⠀⣿⠁⠀⠀⠀⢀⣴⣿⣿⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠸⣿⡿⠏⠀⢀⠀⠀⠿⣶⣤⣤⣤⣄⣀⣴⣿⡿⢻⣿⡆⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠟⠁⠀⢀⣼⠀⠀⠀⠹⣿⣟⠿⠿⠿⡿⠋⠀⠘⣿⣇⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⢳⣶⣶⣿⣿⣇⣀⠀⠀⠙⣿⣆⠀⠀⠀⠀⠀⠀⠛⠿⣿⣦⣤⣀⠀⠀
+⠀⠀⠀⠀⠀⠀⣹⣿⣿⣿⣿⠿⠋⠁⠀⣹⣿⠳⠀⠀⠀⠀⠀⠀⢀⣠⣽⣿⡿⠟⠃
+⠀⠀⠀⠀⠀⢰⠿⠛⠻⢿⡇⠀⠀⠀⣰⣿⠏⠀⠀⢀⠀⠀⠀⣾⣿⠟⠋⠁⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠀⠀⣰⣿⣿⣾⣿⠿⢿⣷⣀⢀⣿⡇⠁⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠉⠁⠀⠀⠀⠀⠙⢿⣿⣿⠇⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠀⠀⠀*/
 let mainWindow; // Referentie naar het hoofdvenster van de Electron app.
 
 // Creëert het hoofdvenster van de Electron app.
@@ -103,10 +130,20 @@ app.on("activate", () =>
     createWindow();
   }
 });
-
+/*⠀⠀⠀⢸⣦⡀⠀⠀⠀⠀⢀⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
-//
+⠀⠀⠀⢸⣏⠻⣶⣤⡶⢾⡿⠁⠀⢠⣄⡀⢀⣴⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
-
+⠀⠀⣀⣼⠷⠀⠀⠁⢀⣿⠃⠀⠀⢀⣿⣿⣿⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
-
+⠴⣾⣯⣅⣀⠀⠀⠀⠈⢻⣦⡀⠒⠻⠿⣿⡿⠿⠓⠂⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠉⢻⡇⣤⣾⣿⣷⣿⣿⣤⠀⠀⣿⠁⠀⠀⠀⢀⣴⣿⣿⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠸⣿⡿⠏⠀⢀⠀⠀⠿⣶⣤⣤⣤⣄⣀⣴⣿⡿⢻⣿⡆⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠟⠁⠀⢀⣼⠀⠀⠀⠹⣿⣟⠿⠿⠿⡿⠋⠀⠘⣿⣇⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⢳⣶⣶⣿⣿⣇⣀⠀⠀⠙⣿⣆⠀⠀⠀⠀⠀⠀⠛⠿⣿⣦⣤⣀⠀⠀
+⠀⠀⠀⠀⠀⠀⣹⣿⣿⣿⣿⠿⠋⠁⠀⣹⣿⠳⠀⠀⠀⠀⠀⠀⢀⣠⣽⣿⡿⠟⠃
+⠀⠀⠀⠀⠀⢰⠿⠛⠻⢿⡇⠀⠀⠀⣰⣿⠏⠀⠀⢀⠀⠀⠀⣾⣿⠟⠋⠁⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠀⠀⣰⣿⣿⣾⣿⠿⢿⣷⣀⢀⣿⡇⠁⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠉⠁⠀⠀⠀⠀⠙⢿⣿⣿⠇⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠀⠀⠀*/
 // Configureert IPC (Inter-Process Communication) luisteraars.
 function setupIpcMainListeners() 
 {

app.py

@@ -1,5 +1,4 @@
-from flask import Flask, render_template,  jsonify, request, redirect, url_for
+from flask import Flask, jsonify
-from flask_sqlalchemy import SQLAlchemy
 import mysql.connector
 import requests
  
@@ -35,7 +34,6 @@ def get_database_data():
         mydb.close()
         return battery_data
  
- 
 @app.route('/', methods=['GET'])
 def get_data():
     battery_data = get_database_data()
@@ -75,14 +73,27 @@ def get_weather():
 def get_planten_data():
     mydb = database_connect()
     if mydb and mydb.is_connected():
-        cursor = mydb.cursor(dictionary=True)  # Corrected from corsor to cursor
+        try:
-
+            cursor = mydb.cursor(dictionary=True)
             query = "SELECT id, plant_naam, plantensoort, plant_geteelt FROM planten"
-
             cursor.execute(query)
-        planten_data = cursor.fetchall()  # Fetch all rows
+            planten_data = cursor.fetchall()
             mydb.close()
             return planten_data
+        except Exception as e:
+            print("Failed to fetch planten data:", e)
+            return {"error": "Kon plantendata niet ophalen"}
+    else:
+        return {"error": "Database connection failed"}
+    
+@app.route("/planten", methods=["GET"])
+def get_planten():
+    planten_response = get_planten_data()
+
+    if "error" in planten_response:
+        return jsonify(planten_response)
+ 
+    return jsonify(planten_response)
 
 if __name__ == "__main__":
     app.run(host="127.0.0.1", port=5000)

mqtt/db_connect.py

@@ -1,36 +0,0 @@
-# Importeer de benodigde modules voor MySQL connectiviteit.
-import mysql.connector
-from mysql.connector import Error
-
-def database_connect():
-    """
-    Maakt verbinding met de MySQL database.
-
-    Probeert een verbinding met de MySQL-database op te zetten met behulp van
-    de mysql.connector.connect methode, gebruikmakend van de database
-    credentials. Bij succes retourneert het de verbinding; bij een mislukking
-    vangt het de fout op en print een bericht.
-
-    Returns:
-        connection (mysql.connector.connect object): Een connectie object als
-        de verbinding succesvol is. Anders None.
-    """
-    try:
-        # Probeert een verbinding op te zetten met de MySQL database.
-        connection = mysql.connector.connect(
-            host="localhost",  # Database host
-            user="root",       # Database gebruikersnaam
-            password="",       # Database wachtwoord
-            database="goodgarden"  # Database naam
-        )
-
-        # Controleert of de verbinding succesvol was.
-        if connection.is_connected():
-            return connection  # Retourneert het verbinding object.
-
-    except Error as e:
-        # Vangt en print elke fout die optreedt tijdens het verbindingsproces.
-        print(f"Connection NIET gelukt! ${e}")
-    
-    # Retourneert None als de verbinding mislukt.
-    return None

mqtt/publisher.py

@@ -7,7 +7,7 @@ import json
 from mqtt_client import create_client, start_loop  
 
 # Stel het interval in seconden in voor het periodiek ophalen en publiceren van data.
-publish_interval = 900  # MOET ~900 ZIJN voor productiegebruik. -- 15min
+publish_interval = 900  # MOET ~900 ZIJN. -- 15min
 
 # Definieer API-eindpunten en de corresponderende MQTT topics.
 api_endpoints = [
@@ -65,7 +65,7 @@ def fetch_and_publish_data():
     for endpoint in api_endpoints:
         url = endpoint["url"]
         mqtt_topic = endpoint["topic"]
-        access_token = "33bb3b42452306c58ecedc3c86cfae28ba22329c"  # Voorbeeld token.
+        access_token = "33bb3b42452306c58ecedc3c86cfae28ba22329c"
 
         try:
             headers = {"Authorization": f"Token {access_token}"}

src/py/script/battery_voltage_events.py

@@ -1,17 +1,8 @@
 import mysql.connector
 import requests
-from datetime import datetime, timezone, timedelta
 import time
-import sys
 
-# Function to make a connection to the database
+from db_connect import database_connect
-def database_connect():
-    return mysql.connector.connect(
-        host="localhost",
-        user="root",
-        password="",
-        database="goodgarden"
-    )
 
 # Functie voor het aanmaken van gegevens in de database
 def create_data(url, access_token, repeat_count=5):
@@ -197,7 +188,7 @@ def delete_data(record_id):
 
 if __name__ == "__main__":
     url = "https://garden.inajar.nl/api/battery_voltage_events/?format=json"
-    access_token = "33bb3b42452306c58ecedc3c86cfae28ba22329c"  # Vervang dit door je werkelijke toegangstoken
+    access_token = "33bb3b42452306c58ecedc3c86cfae28ba22329c"
     
     # Je kunt repeat_count wijzigen om te bepalen hoe vaak je de bewerking wilt herhalen
     repeat_count = 10

src/py/script/db_connect.py

@@ -1,5 +1,5 @@
-# Importeer de mysql.connector module en Error klasse uit deze module.
 import mysql.connector
+
 from mysql.connector import Error
 
 # Definieer een functie genaamd `database_connect` om verbinding te maken met de database.

src/py/script/db_connect_form.py

@@ -1,35 +1,27 @@
 import sys
 import json
-import mysql.connector #** TYPE IN TERMINAL: "pip install mysql-connector-python"
+
+from db_connect import database_connect
 from mysql.connector import Error
 
 # Voeg de data uit het formulier toe aan de database
 def insert_plant_name(plant_naam, plantensoort, plant_geteelt):
 
-    # Als er "true" is meegeven als waarde dan komt in de database 1 anders 0 (false)
+    # Als er "true" is meegegeven als waarde dan komt in de database 1 anders 0 (false)
     plant_geteelt_value = 1 if plant_geteelt.lower() == "true" else 0
 
     try:
-        connection = mysql.connector.connect(
+        # Gebruik de verbinding die teruggegeven wordt door de database_connect functie uit de db_connect module
-            host='localhost',
+        connection = database_connect()
-            database='goodgarden',
-            user='root',
-            password=''
-        )
 
-        # Als er verbinding gemaakt kan worden voer dan onderstaande query uit
+        # Je kunt de controle of de verbinding succesvol is rechtstreeks in de database_connect functie uitvoeren
-        if connection.is_connected():
+        # De cursor() zorgt ervoor dat er een verbinding met de database gelegd kan worden en de data gemanipuleerd
-
-            # De crusor() zorgt ervoor dat er een verbinding met de database gelegt kan worden en de data gemanipuleerd
         cursor = connection.cursor()
         query = "INSERT INTO goodgarden.planten (plant_naam, plantensoort, plant_geteelt) VALUES (%s, %s, %s)"
         cursor.execute(query, (plant_naam, plantensoort, plant_geteelt_value))  # "%s" wordt hier ingevuld doormiddel van de variable (parameter)
         connection.commit()
         print(json.dumps({"success": True}))
     
-        else:
-            print(json.dumps({"success": False, "error": "Database connection failed"}))
-    
     except Error as e:
         print(json.dumps({"success": False, "error": str(e)}))
     

src/py/script/devices.py

@@ -1,4 +1,5 @@
 import json
+
 from db_connect import database_connect
 from paho.mqtt import subscribe
 

src/py/script/json/plants.json

@@ -0,0 +1,14 @@
+[
+    {
+        "id": 1,
+        "plant_naam": "Tomatenplant",
+        "plantensoort": "Groente",
+        "plant_geteelt": 1
+    },
+    {
+        "id": 15,
+        "plant_naam": "ergerg",
+        "plantensoort": "ergerwgergerg",
+        "plant_geteelt": 1
+    }
+]

src/py/script/par_events.py

@@ -1,4 +1,3 @@
-# Importeer de json module om met JSON data te werken.
 import json
 
 # Importeer de subscribe module van paho.mqtt om te abonneren op MQTT topics.
@@ -11,23 +10,6 @@ def on_message(client, userdata, message):
     # Laad de JSON string in een Python dictionary.
     data = json.loads(payload_str)
 
-    # Initialiseer variabelen om de waarden van de apparaten op te slaan.
-    device_322_value = None
-    device_256_value = None
-
-    # Doorloop de "results" key in de data dictionary.
-    for key in data["results"]:
-        # Controleer of de "device" key overeenkomt met device 322 of 256 en sla de waarde op.
-        if key["device"] == 322:
-            device_322_value = key["value"]
-        elif key["device"] == 256:
-            device_256_value = key["value"]
-
-    # Print de waarden van beide apparaten.
-    print(f"Device 322 value: {device_322_value}")
-    print(f"Device 256 value: {device_256_value}")
-
-    # Print het volledige bericht dat ontvangen is op het abonnementstopic.
     print(f"Message received on topic {message.topic}: {data}")
 
 # Dit blok zorgt ervoor dat de code alleen wordt uitgevoerd als dit script rechtstreeks wordt uitgevoerd.

src/py/script/planten.py

@@ -1,17 +1,8 @@
-# Importeer de json en mysql.connector modules voor het werken met JSON data en MySQL databases.
-# Importeer ook os voor bestandssysteem operaties.
 import json
 import mysql.connector
 import os
 
-# Functie om een verbinding met de database te maken.
+from db_connect import database_connect  # Gebruik deze geïmporteerde functie
-def database_connect():
-    return mysql.connector.connect(
-        host="localhost",  # De server waar de database draait.
-        user="root",       # De gebruikersnaam om in te loggen op de database.
-        password="",       # Het wachtwoord voor de gebruiker.
-        database="goodgarden"  # De naam van de database waarmee verbinding moet worden gemaakt.
-    )
 
 # Functie om het absolute pad van de huidige directory te krijgen.
 def get_current_directory():
@@ -33,7 +24,7 @@ def fetch_plant_and_write_to_json():
         # Verkrijg het absolute pad van de huidige directory.
         current_directory = get_current_directory()
         # Construeer het absolute pad voor het JSON-bestand.
-        json_file_path = os.path.join(current_directory, 'plants.json')
+        json_file_path = os.path.join(current_directory, './json/plants.json')
         
         # Schrijf de opgehaalde gegevens naar een JSON-bestand.
         with open(json_file_path, 'w') as json_file:
@@ -41,13 +32,13 @@ def fetch_plant_and_write_to_json():
             
     except mysql.connector.Error as error:
         # Print de fout als er iets misgaat bij het ophalen van de gegevens.
-        print("Error fetching data from MySQL table:", error)
+        print(f"Error fetching data from MySQL table: {error}")
         
     finally:
         # Sluit de cursor en de verbinding, indien ze bestaan.
         if 'cursor' in locals():
             cursor.close()
-        if connection.is_connected():
+        if connection and connection.is_connected():
             connection.close()
 
 # Roept de functie aan om gegevens op te halen en naar JSON te schrijven.

src/py/script/plants.json

@@ -1,20 +0,0 @@
-[
-    {
-        "id": 1,
-        "plant_naam": "Tomatenplant",
-        "plantensoort": "Groente",
-        "plant_geteelt": 1
-    },
-    {
-        "id": 15,
-        "plant_naam": "Sla",
-        "plantensoort": "Groente",
-        "plant_geteelt": 1
-    },
-    {
-        "id": 16,
-        "plant_naam": "Aardappel",
-        "plantensoort": "Groente",
-        "plant_geteelt": 1
-    }
-]

src/py/script/relative_humidity_events.py

@@ -1,4 +1,3 @@
-# Importeer de json module voor het werken met JSON data.
 import json
 
 # Importeer de subscribe functie uit de paho.mqtt module voor MQTT-communicatie.

src/py/script/soil_electric_conductivity_events.py

@@ -1,4 +1,3 @@
-# De json module wordt geïmporteerd om te werken met JSON-geformatteerde data.
 import json
 
 # Van de paho.mqtt bibliotheek wordt de subscribe module geïmporteerd.

src/py/script/soil_relative_permittivity_events.py

@@ -1,4 +1,3 @@
-# Importeer de json module om te werken met JSON data.
 import json
 
 # Importeer de subscribe functie van paho.mqtt om te abonneren op MQTT berichten.

src/py/script/soil_temperature_events.py

@@ -1,4 +1,3 @@
-# Importeer de json module om te werken met JSON-geformatteerde data.
 import json
 
 # Importeer de subscribe functie van de paho.mqtt bibliotheek voor MQTT communicatie.

src/py/static/css/style.css

@@ -20,7 +20,7 @@ a {
 }
 
 body {
-  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("../images/achtergrond.png");
+  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("../images/achtergrond.webp");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
@@ -345,8 +345,8 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-
 .switch {
   position: relative;
   display: inline-block;
-  width: 60px;
+  width: 50px;
-  height: 30px;
+  height: 25px;
 }
 
 .switch input[type=checkbox] {
@@ -370,21 +370,21 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-
 .slider:before {
   position: absolute;
   content: "";
-  height: 26px;
+  height: 22px;
-  width: 26px;
+  width: 22px;
-  left: 4px;
+  left: 3px;
-  bottom: 4px;
+  bottom: 2px;
   background-color: white;
   border-radius: 50%;
   transition: 0.4s;
 }
 
 input:checked + .slider {
-  background-color: #2ecc71;
+  background-color: rgb(171, 211, 174);
 }
 
 input:checked + .slider:before {
-  transform: translateX(26px);
+  transform: translateX(23px);
 }
 
 .rechterkant {

src/py/static/css/style.css.map

@@ -1 +1 @@
-{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"}
+{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"}

src/py/static/css/style.scss

@@ -58,7 +58,7 @@ a
 
 body 
 {
-  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("../images/achtergrond.png");
+  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("../images/achtergrond.webp");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
@@ -475,8 +475,8 @@ body
 .switch {
   position: relative;
   display: inline-block;
-  width: 60px;
+  width: 50px;
-  height: 30px;
+  height: 25px;
 }
  
 .switch input[type="checkbox"] {
@@ -500,21 +500,21 @@ body
 .slider:before {
   position: absolute;
   content: "";
-  height: 26px;
+  height: 22px;
-  width: 26px;
+  width: 22px;
-  left: 4px;
+  left: 3px;
-  bottom: 4px;
+  bottom: 2px;
   background-color: white;
   border-radius: 50%;
   transition: 0.4s;
 }
  
 input:checked + .slider {
-  background-color: #2ecc71;
+  background-color: $primary-color;
 }
  
 input:checked + .slider:before {
-  transform: translateX(26px);
+  transform: translateX(23px);
 }
 .rechterkant {
   display: flex;

src/py/static/images/desktop.ini

@@ -0,0 +1,2 @@
+[LocalizedFileNames]
+achtergrond.webp=@achtergrond.webp,0

src/py/static/js/grafiek.js

@@ -0,0 +1,116 @@
+/**
+ * Class to handle the creation and manipulation of line charts on a canvas.
+ */
+class LineChart 
+{
+    /**
+     * Creates an instance of LineChart.
+     * @param {string} canvasId - The ID of the canvas element where the chart will be drawn.
+     */
+    constructor(canvasId) 
+    {
+        this.canvas = document.getElementById(canvasId);
+        if (this.canvas) 
+        {
+            this.ctx = this.canvas.getContext("2d");
+        }
+        this.padding = 35; // Default padding around the graph
+    }
+
+    /**
+     * Clears the entire canvas, preparing it for a new drawing.
+     */
+    clearCanvas() 
+    {
+        if (this.canvas) 
+        {
+            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        }
+    }
+
+    /**
+     * Draws a line chart on the canvas using the provided data.
+     * @param {Array<string>} xLabels - Labels for the x-axis.
+     * @param {Array<number>} data - Data points for the chart, one per x-label.
+     * @param {Array<number|string>} [yLabels=["", 10, 15, 20, 25, 30, 35, 40]] - Labels for the y-axis.
+     */
+    drawChart(xLabels, data, yLabels = ["", 10, 15, 20, 25, 30, 35, 40]) 
+    {
+        if (!this.canvas) 
+        {
+            return; // Exit if canvas is not initialized
+        }
+        
+        this.clearCanvas();
+        const graphWidth = this.canvas.width - this.padding * 2;
+        const graphHeight = this.canvas.height - this.padding * 2;
+
+        // Draw the axes
+        this.ctx.strokeStyle = "rgb(143, 188, 143)";
+        this.ctx.beginPath();
+        this.ctx.moveTo(this.padding, this.padding);
+        this.ctx.lineTo(this.padding, this.canvas.height - this.padding);
+        this.ctx.lineTo(this.canvas.width - this.padding, this.canvas.height - this.padding);
+        this.ctx.stroke();
+
+        // Calculate increments for plotting points
+        const xIncrement = graphWidth / (xLabels.length - 1);
+        const yIncrement = graphHeight / (yLabels.length - 1);
+        
+        // Plot the data points
+        this.ctx.beginPath();
+        this.ctx.moveTo(this.padding, this.canvas.height - this.padding - (data[0] / 100) * graphHeight);
+        for (let i = 1; i < data.length; i++) 
+        {
+            const xPos = this.padding + i * xIncrement;
+            const yPos = this.canvas.height - this.padding - (data[i] / 100) * graphHeight;
+            this.ctx.lineTo(xPos, yPos);
+        }
+        this.ctx.stroke();
+        
+        // Draw y-axis labels
+        this.ctx.fillStyle = "black";
+        this.ctx.textAlign = "right";
+        this.ctx.textBaseline = "middle";
+        yLabels.forEach((label, i) => 
+        {
+            if (label !== "") 
+            {
+                const yPos = this.canvas.height - this.padding - i * yIncrement;
+                this.ctx.fillText(label, this.padding - 10, yPos);
+            }
+        });
+
+        // Draw x-axis labels
+        this.ctx.textAlign = "center";
+        xLabels.forEach((label, i) => 
+        {
+            if (label !== "") 
+            {
+                const xPos = this.padding + i * xIncrement;
+                this.ctx.fillText(label, xPos, this.canvas.height - this.padding + 20);
+            }
+        });
+    }
+}
+
+/**
+ * Fetches weather data from an API and draws a line chart with the fetched data.
+ * @param {LineChart} chart - The LineChart instance to draw on.
+ * @param {string} apiUrl - The URL to fetch the weather data from.
+ */
+function fetchWeatherDataAndDrawChart(chart, apiUrl) 
+{
+    fetch(apiUrl)
+        .then(response => response.ok ? response.json() : Promise.reject('Network response was not ok.'))
+        .then(data => 
+        {
+            const dates = data.weather_forecast.map(day => day.dag);
+            const temperatures = data.weather_forecast.map(day => day.max_temp);
+            chart.drawChart(dates, temperatures);
+        })
+        .catch(error => console.error('There was a problem with the fetch operation:', error));
+}
+
+const myChart = new LineChart("myCanvas");
+fetchWeatherDataAndDrawChart(myChart, "http://127.0.0.1:5000/weather");

src/py/static/js/main.js

@@ -4,7 +4,41 @@ const { ipcRenderer } = require("electron");
 
 // Importeer Axios voor het maken van HTTP-verzoeken
 const axios = require('axios');
- 
+/*⠀⠀⠀⢸⣦⡀⠀⠀⠀⠀⢀⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⢸⣏⠻⣶⣤⡶⢾⡿⠁⠀⢠⣄⡀⢀⣴⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⣀⣼⠷⠀⠀⠁⢀⣿⠃⠀⠀⢀⣿⣿⣿⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠴⣾⣯⣅⣀⠀⠀⠀⠈⢻⣦⡀⠒⠻⠿⣿⡿⠿⠓⠂⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠉⢻⡇⣤⣾⣿⣷⣿⣿⣤⠀⠀⣿⠁⠀⠀⠀⢀⣴⣿⣿⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠸⣿⡿⠏⠀⢀⠀⠀⠿⣶⣤⣤⣤⣄⣀⣴⣿⡿⢻⣿⡆⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠟⠁⠀⢀⣼⠀⠀⠀⠹⣿⣟⠿⠿⠿⡿⠋⠀⠘⣿⣇⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⢳⣶⣶⣿⣿⣇⣀⠀⠀⠙⣿⣆⠀⠀⠀⠀⠀⠀⠛⠿⣿⣦⣤⣀⠀⠀
+⠀⠀⠀⠀⠀⠀⣹⣿⣿⣿⣿⠿⠋⠁⠀⣹⣿⠳⠀⠀⠀⠀⠀⠀⢀⣠⣽⣿⡿⠟⠃
+⠀⠀⠀⠀⠀⢰⠿⠛⠻⢿⡇⠀⠀⠀⣰⣿⠏⠀⠀⢀⠀⠀⠀⣾⣿⠟⠋⠁⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠀⠀⣰⣿⣿⣾⣿⠿⢿⣷⣀⢀⣿⡇⠁⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠉⠁⠀⠀⠀⠀⠙⢿⣿⣿⠇⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠀⠀⠀*/
+function closeApplication() 
+{
+    if (confirm("Weet je zeker dat je de applicatie wilt sluiten?")) 
+    {
+        window.close();
+    }
+}
+/*⠀⠀⠀⢸⣦⡀⠀⠀⠀⠀⢀⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⢸⣏⠻⣶⣤⡶⢾⡿⠁⠀⢠⣄⡀⢀⣴⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⣀⣼⠷⠀⠀⠁⢀⣿⠃⠀⠀⢀⣿⣿⣿⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠴⣾⣯⣅⣀⠀⠀⠀⠈⢻⣦⡀⠒⠻⠿⣿⡿⠿⠓⠂⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠉⢻⡇⣤⣾⣿⣷⣿⣿⣤⠀⠀⣿⠁⠀⠀⠀⢀⣴⣿⣿⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠸⣿⡿⠏⠀⢀⠀⠀⠿⣶⣤⣤⣤⣄⣀⣴⣿⡿⢻⣿⡆⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠟⠁⠀⢀⣼⠀⠀⠀⠹⣿⣟⠿⠿⠿⡿⠋⠀⠘⣿⣇⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⢳⣶⣶⣿⣿⣇⣀⠀⠀⠙⣿⣆⠀⠀⠀⠀⠀⠀⠛⠿⣿⣦⣤⣀⠀⠀
+⠀⠀⠀⠀⠀⠀⣹⣿⣿⣿⣿⠿⠋⠁⠀⣹⣿⠳⠀⠀⠀⠀⠀⠀⢀⣠⣽⣿⡿⠟⠃
+⠀⠀⠀⠀⠀⢰⠿⠛⠻⢿⡇⠀⠀⠀⣰⣿⠏⠀⠀⢀⠀⠀⠀⣾⣿⠟⠋⠁⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠀⠀⣰⣿⣿⣾⣿⠿⢿⣷⣀⢀⣿⡇⠁⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠉⠁⠀⠀⠀⠀⠙⢿⣿⣿⠇⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠀⠀⠀*/
 /**
  * Functie om een modaal venster te openen.
  * Deze functie stelt event listeners in voor het openen en sluiten van de modaal.
@@ -41,24 +75,45 @@ function openModal()
         }
     } 
 }
-
 // Call openModal when DOM content is loaded
 openModal();
+/*⠀⠀⠀⢸⣦⡀⠀⠀⠀⠀⢀⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⢸⣏⠻⣶⣤⡶⢾⡿⠁⠀⢠⣄⡀⢀⣴⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⣀⣼⠷⠀⠀⠁⢀⣿⠃⠀⠀⢀⣿⣿⣿⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠴⣾⣯⣅⣀⠀⠀⠀⠈⢻⣦⡀⠒⠻⠿⣿⡿⠿⠓⠂⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠉⢻⡇⣤⣾⣿⣷⣿⣿⣤⠀⠀⣿⠁⠀⠀⠀⢀⣴⣿⣿⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠸⣿⡿⠏⠀⢀⠀⠀⠿⣶⣤⣤⣤⣄⣀⣴⣿⡿⢻⣿⡆⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠟⠁⠀⢀⣼⠀⠀⠀⠹⣿⣟⠿⠿⠿⡿⠋⠀⠘⣿⣇⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⢳⣶⣶⣿⣿⣇⣀⠀⠀⠙⣿⣆⠀⠀⠀⠀⠀⠀⠛⠿⣿⣦⣤⣀⠀⠀
+⠀⠀⠀⠀⠀⠀⣹⣿⣿⣿⣿⠿⠋⠁⠀⣹⣿⠳⠀⠀⠀⠀⠀⠀⢀⣠⣽⣿⡿⠟⠃
+⠀⠀⠀⠀⠀⢰⠿⠛⠻⢿⡇⠀⠀⠀⣰⣿⠏⠀⠀⢀⠀⠀⠀⣾⣿⠟⠋⠁⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠀⠀⣰⣿⣿⣾⣿⠿⢿⣷⣀⢀⣿⡇⠁⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠉⠁⠀⠀⠀⠀⠙⢿⣿⣿⠇⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠀⠀⠀*/
+/**
+ * *WAT IS DIT, WERKT HET? */
+
 
 // Send a message to the main process to execute the Python script
 ipcRenderer.send('run-python-script', ['some', 'arguments']);
 
-ipcRenderer.on('python-script-response', (event, pythonData) => {
+ipcRenderer.on('python-script-response', (event, pythonData) => 
-    if (pythonData === 'error') {
+{
+    if (pythonData === 'error') 
+    {
         console.error('An error occurred while retrieving data from Python');
-    } else {
+    } 
+    else 
+    {
         // Update HTML elements with data received from Python
         document.getElementById('bodem-temperatuur').textContent = pythonData.bodemTemperatuur; // Adjust the property based on your actual Python response
     }
 });
 
 // Listen for updates to HTML data from the main process
-ipcRenderer.on('update-html-data', (event, data) => {
+ipcRenderer.on('update-html-data', (event, data) => 
+{
     // Update the HTML with the received data
     document.getElementById('batteryVoltage').innerText = data.batteryVoltage;
     // Add similar lines for other data fields
@@ -66,131 +121,20 @@ ipcRenderer.on('update-html-data', (event, data) => {
 
 // Trigger an event to request data update
 ipcRenderer.send('request-update-data');
-
+ /*⠀⠀⠀⢸⣦⡀⠀⠀⠀⠀⢀⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
-// Fetch battery data when the page loads
+⠀⠀⠀⢸⣏⠻⣶⣤⡶⢾⡿⠁⠀⢠⣄⡀⢀⣴⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
-fetchBatteryData();
+⠀⠀⣀⣼⠷⠀⠀⠁⢀⣿⠃⠀⠀⢀⣿⣿⣿⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
- 
+⠴⣾⣯⣅⣀⠀⠀⠀⠈⢻⣦⡀⠒⠻⠿⣿⡿⠿⠓⠂⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
-/**
+⠀⠀⠀⠉⢻⡇⣤⣾⣿⣷⣿⣿⣤⠀⠀⣿⠁⠀⠀⠀⢀⣴⣿⣿⠀⠀⠀⠀⠀⠀⠀
- * Functie om een lijngrafiek te tekenen.
+⠀⠀⠀⠀⠸⣿⡿⠏⠀⢀⠀⠀⠿⣶⣤⣤⣤⣄⣀⣴⣿⡿⢻⣿⡆⠀⠀⠀⠀⠀⠀
- * @param {Array} xLabels Labels voor de x-as.
+⠀⠀⠀⠀⠀⠟⠁⠀⢀⣼⠀⠀⠀⠹⣿⣟⠿⠿⠿⡿⠋⠀⠘⣿⣇⠀⠀⠀⠀⠀⠀
- * @param {Array} data De data punten voor de grafiek.
+⠀⠀⠀⠀⠀⢳⣶⣶⣿⣿⣇⣀⠀⠀⠙⣿⣆⠀⠀⠀⠀⠀⠀⠛⠿⣿⣦⣤⣀⠀⠀
- */
+⠀⠀⠀⠀⠀⠀⣹⣿⣿⣿⣿⠿⠋⠁⠀⣹⣿⠳⠀⠀⠀⠀⠀⠀⢀⣠⣽⣿⡿⠟⠃
-function drawLineChart(xLabels, data) 
+⠀⠀⠀⠀⠀⢰⠿⠛⠻⢿⡇⠀⠀⠀⣰⣿⠏⠀⠀⢀⠀⠀⠀⣾⣿⠟⠋⠁⠀⠀⠀
-{
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠀⠀⣰⣿⣿⣾⣿⠿⢿⣷⣀⢀⣿⡇⠁⠀⠀⠀⠀⠀
-    // Definieer Y labels (niet veranderen volgens commentaar).
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠉⠁⠀⠀⠀⠀⠙⢿⣿⣿⠇⠀⠀⠀⠀⠀⠀
-    const yLabels = ["", 10, 15, 20, 25, 30, 35, 40];
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⠀⠀⠀⠀⠀⠀⠀
- 
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠀⠀⠀*/
-    // Verkrijg het canvas element en de context voor tekenen.
-    const canvas = document.getElementById("myCanvas");
-    if (canvas) 
-    {
-    const ctx = canvas.getContext("2d");
-    // Maak het canvas schoon voor nieuwe tekening.
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
- 
-    // Definieer padding en bereken grafiekafmetingen.
-    const padding = 35; // Vergrote padding voor Y labels.
-    const graphWidth = canvas.width - padding * 2;
-    const graphHeight = canvas.height - padding * 2;
- 
-    // Teken de as van de grafiek.
-    ctx.beginPath();
-    ctx.moveTo(padding, padding);
-    ctx.lineTo(padding, canvas.height - padding);
-    ctx.lineTo(canvas.width - padding, canvas.height - padding);
-    ctx.stroke();
- 
-    // Stel de kleur van de lijn in.
-    ctx.strokeStyle = "rgb(143, 188, 143)";
- 
-    // Bereken incrementen voor het plotten.
-    const xIncrement = graphWidth / (xLabels.length - 1);
-    const yIncrement = graphHeight / (yLabels.length - 1);
- 
-    // Plot de data.
-    ctx.beginPath();
-    ctx.moveTo(padding, canvas.height - padding - (data[0] / 100) * graphHeight);
- 
-    for (let i = 1; i < data.length; i++) 
-    {
-        const xPos = padding + i * xIncrement;
-        const yPos = canvas.height - padding - (data[i] / 100) * graphHeight;
-        ctx.lineTo(xPos, yPos);
-    }
-    ctx.stroke();
- 
-    // Teken Y labels.
-    ctx.fillStyle = "black";
-    ctx.textAlign = "right"; // Tekst naar rechts uitlijnen.
-    ctx.textBaseline = "middle"; // Verticaal centreren.
- 
-    for (let i = 0; i < yLabels.length; i++) 
-    {
-        if (yLabels[i] !== "") 
-        {
-            const yPos = canvas.height - padding - i * yIncrement;
-            ctx.fillText(yLabels[i], padding - 10, yPos);
-        }
-    }
- 
-    // Teken X labels.
-    ctx.textAlign = "center"; // Horizontaal centreren voor X labels.
-    for (let i = 0; i < xLabels.length; i++) 
-    {
-        if (xLabels[i] !== "") 
-        {
-            const xPos = padding + i * xIncrement;
-            ctx.fillText(xLabels[i], xPos, canvas.height - padding + 20);
-        }
-    }
-}
-else
-{
-    console.log("Canvas element does not exist on this page.");
-}
-}
- 
-/**
- * Functie om weergegevens op te halen en een grafiek te tekenen.
- * Deze functie haalt weergegevens op van een lokale server en tekent een lijngrafiek
- * op basis van de verkregen data.
- */
-function fetchWeatherDataAndDrawChart() 
-{
-    // URL van de API waar de weergegevens opgehaald kunnen worden.
-    const apiUrl = `http://127.0.0.1:5000/weather`;
- 
-    // Voer een GET-verzoek uit naar de API.
-    fetch(apiUrl)
-        .then(response => 
-        {
-            // Controleer of het verzoek succesvol was.
-            if (response.ok) 
-            {
-                return response.json();
-            }
-            // Gooi een fout als het verzoek niet succesvol was.
-            throw new Error('Network response was not ok.');
-        })
-        .then(data => 
-            {
-                // Verkrijg de weersvoorspelling voor de eerste 5 dagen.
-                const weatherForecast = data.weather_forecast.slice(0, 5);
-                // Converteer datums naar afkortingen van dagen van de week.
-                const dates = weatherForecast.map(day => convertDateToDayOfWeek(day.dag));
-                // Verkrijg de maximale temperaturen.
-                const temperatures = weatherForecast.map(day => day.max_temp);
-             
-                // Teken de lijngrafiek met de verkregen data.
-                drawLineChart(dates, temperatures);
-            })            
-        .catch(error => 
-        {
-            // Log eventuele fouten tijdens het ophalen.
-            console.error('There was a problem with the fetch operation:', error);
-        });
-}
- 
 /**
  * Functie om batterijdata op te halen wanneer de pagina laadt.
  * Deze functie haalt data op met Axios en verwerkt deze vervolgens.
@@ -212,7 +156,6 @@ function fetchBatteryData()
         });
 }
 
- 
 /**
  * Functie om batterijdata op de pagina bij te werken.
  * Deze functie update de HTML met de ontvangen batterijdata.
@@ -243,52 +186,26 @@ function updateBatteryData(batteryData)
         }
     }
 }
+// Fetch battery data when the page loads
+fetchBatteryData();
+/*⠀⠀⠀⢸⣦⡀⠀⠀⠀⠀⢀⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⢸⣏⠻⣶⣤⡶⢾⡿⠁⠀⢠⣄⡀⢀⣴⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⣀⣼⠷⠀⠀⠁⢀⣿⠃⠀⠀⢀⣿⣿⣿⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠴⣾⣯⣅⣀⠀⠀⠀⠈⢻⣦⡀⠒⠻⠿⣿⡿⠿⠓⠂⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠉⢻⡇⣤⣾⣿⣷⣿⣿⣤⠀⠀⣿⠁⠀⠀⠀⢀⣴⣿⣿⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠸⣿⡿⠏⠀⢀⠀⠀⠿⣶⣤⣤⣤⣄⣀⣴⣿⡿⢻⣿⡆⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠟⠁⠀⢀⣼⠀⠀⠀⠹⣿⣟⠿⠿⠿⡿⠋⠀⠘⣿⣇⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⢳⣶⣶⣿⣿⣇⣀⠀⠀⠙⣿⣆⠀⠀⠀⠀⠀⠀⠛⠿⣿⣦⣤⣀⠀⠀
+⠀⠀⠀⠀⠀⠀⣹⣿⣿⣿⣿⠿⠋⠁⠀⣹⣿⠳⠀⠀⠀⠀⠀⠀⢀⣠⣽⣿⡿⠟⠃
+⠀⠀⠀⠀⠀⢰⠿⠛⠻⢿⡇⠀⠀⠀⣰⣿⠏⠀⠀⢀⠀⠀⠀⣾⣿⠟⠋⠁⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠀⠀⣰⣿⣿⣾⣿⠿⢿⣷⣀⢀⣿⡇⠁⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠉⠁⠀⠀⠀⠀⠙⢿⣿⣿⠇⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⠀⠀⠀⠀⠀⠀⠀
+⠀⠀                        ⠀⠈⠀⠀⠀*/
 
 
- 
+function dynamischSensor()
-// Definieer de API-sleutel en de stad waarvoor we de weergegevens willen ophalen.
+{
-const apiKey = "9516081f15727d063c9e2f08454a2fe9";
-const city = "Leiden";
- 
-// Construeer de URL voor de API-aanroep. In dit geval is het een lokale server.
-const apiUrl = `http://127.0.0.1:5000/weather`;
- 
-// Voer een GET-verzoek uit naar de API om de weergegevens op te halen.
-fetch(apiUrl)
-  .then(response => 
-  {
-    // Controleer of de respons van de server in orde is (status code 200).
-    if (response.ok) 
-    {
-      // Zo ja, parse de JSON uit de respons.
-      return response.json();
-    }
-    // Zo niet, gooi een fout.
-    throw new Error('Network response was not ok.');
-  })
-  .then(data => 
-  {
-    // Log de ontvangen data naar de console voor debugging.
-    console.log(data);
- 
-    // Extraheren van de weersvoorspelling voor de eerste vijf dagen.
-    const weatherForecast = data.weather_forecast.slice(0, 5);
-    // Haal de dagen op waarvoor de voorspelling geldt.
-    const dates = weatherForecast.map(day => day.dag);
-    // Haal de maximale temperaturen op voor deze dagen.
-    const temperatures = weatherForecast.map(day => day.max_temp);
- 
-    // Update de grafiek met de nieuwe data.
-    drawLineChart(dates, temperatures);
-  })
-  .catch(error => 
-  {
-    // Log eventuele fouten tijdens het ophalen van de data.
-    console.error('There was a problem with the fetch operation:', error);
-  });
-
-  function dynamischSensor()
-  {
     if (window.location.pathname.endsWith('index.html') || window.location.pathname === '/') 
     {
         const sensor1 = document.getElementById("sensor-1");
@@ -304,19 +221,28 @@ fetch(apiUrl)
             console.log("Elementen 'sensor-1' of 'sensor-2' bestaan niet in de DOM.");
         }
     }
-  }
+}
   
-  // Aanroepen van de functie
+// Aanroepen van de functie
-  dynamischSensor();
+dynamischSensor();
 
+/*⠀⠀⠀⢸⣦⡀⠀⠀⠀⠀⢀⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⢸⣏⠻⣶⣤⡶⢾⡿⠁⠀⢠⣄⡀⢀⣴⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⣀⣼⠷⠀⠀⠁⢀⣿⠃⠀⠀⢀⣿⣿⣿⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠴⣾⣯⣅⣀⠀⠀⠀⠈⢻⣦⡀⠒⠻⠿⣿⡿⠿⠓⠂⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠉⢻⡇⣤⣾⣿⣷⣿⣿⣤⠀⠀⣿⠁⠀⠀⠀⢀⣴⣿⣿⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠸⣿⡿⠏⠀⢀⠀⠀⠿⣶⣤⣤⣤⣄⣀⣴⣿⡿⢻⣿⡆⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠟⠁⠀⢀⣼⠀⠀⠀⠹⣿⣟⠿⠿⠿⡿⠋⠀⠘⣿⣇⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⢳⣶⣶⣿⣿⣇⣀⠀⠀⠙⣿⣆⠀⠀⠀⠀⠀⠀⠛⠿⣿⣦⣤⣀⠀⠀
+⠀⠀⠀⠀⠀⠀⣹⣿⣿⣿⣿⠿⠋⠁⠀⣹⣿⠳⠀⠀⠀⠀⠀⠀⢀⣠⣽⣿⡿⠟⠃
+⠀⠀⠀⠀⠀⢰⠿⠛⠻⢿⡇⠀⠀⠀⣰⣿⠏⠀⠀⢀⠀⠀⠀⣾⣿⠟⠋⠁⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠀⠀⣰⣿⣿⣾⣿⠿⢿⣷⣀⢀⣿⡇⠁⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠉⠁⠀⠀⠀⠀⠙⢿⣿⣿⠇⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀PLANTEN⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⠈⠀⠀⠀*/
 
-  function closeApplication() {
+function fetchPlantenData()
-    if (confirm("Weet je zeker dat je de applicatie wilt sluiten?")) {
+{
-        window.close();
-    }}
-
-    function fetchPlantenData()
-    {
     // Gebruik Axios om een GET-verzoek te versturen naar de planten endpoint.
     axios.get('http://127.0.0.1:5000/planten')
     .then(response => 
@@ -330,20 +256,20 @@ fetch(apiUrl)
         // Log eventuele fouten tijdens het ophalen.
         console.error('Error fetching planten data:', error);
     });
-    }
+}
 
-    function getPlantIdFromUrl()
+function getPlantIdFromUrl()
-    {
+{
     // Maak een URL-object van de huidige locatie.
     const currentUrl = new URL(window.location.href);
     // Gebruik de URLSearchParams API om de query parameters te verwerken.
     const searchParams = currentUrl.searchParams;
     // Haal de 'id' query parameter op.
     return searchParams.get('id'); // Dit zal een string retourneren of null als het niet bestaat.
-    }
+}
 
-    function updatePlantenData(plantenData) 
+function updatePlantenData(plantenData) 
-    {
+{
     // Verkrijg de plant ID uit de URL.
     const plantId = parseInt(getPlantIdFromUrl(), 10);
 
@@ -355,31 +281,44 @@ fetch(apiUrl)
     {
         document.title = gevondenPlant.plant_naam;
         document.querySelector(".plant-titel").textContent = gevondenPlant.plant_naam;
-            console.log("@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@");
+        // console.log("@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@");
     }
     else 
     {
         console.log(`Geen plant gevonden met ID ${plantId}`);
     }
-    }
-    
-    // Roep fetchPlantenData aan ergens waar het logisch is binnen je applicatielogica, bijvoorbeeld na het laden van de pagina of na een gebruikersactie.
-    fetchPlantenData();
-    
-// Get the battery voltage
-const batteryVoltage = parseFloat(document.getElementById('battery-voltage').textContent);
- 
-// Select the img element
-const batteryImage = document.getElementById('battery-image');
- 
-// Check the battery voltage and decide whether to show the image
-if (batteryVoltage < 3.0) {
-    // Battery is lower than 3.0 volts, show the empty battery image
-    batteryImage.src = '../static/img/warning-logo.png';
-} else if (batteryVoltage > 4.2) {
-    // Battery is higher than 4.2 volts, do not show the image
-    batteryImage.style.display = 'none';
-} else {
-    // Battery voltage is within the desired range, hide the image
-    batteryImage.style.display = 'none';
 }
+    
+// Roep fetchPlantenData aan ergens waar het logisch is binnen je applicatielogica, bijvoorbeeld na het laden van de pagina of na een gebruikersactie.
+fetchPlantenData();
+    /*⠀⠀⠀⢸⣦⡀⠀⠀⠀⠀⢀⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⢸⣏⠻⣶⣤⡶⢾⡿⠁⠀⢠⣄⡀⢀⣴⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⣀⣼⠷⠀⠀⠁⢀⣿⠃⠀⠀⢀⣿⣿⣿⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠴⣾⣯⣅⣀⠀⠀⠀⠈⢻⣦⡀⠒⠻⠿⣿⡿⠿⠓⠂⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠉⢻⡇⣤⣾⣿⣷⣿⣿⣤⠀⠀⣿⠁⠀⠀⠀⢀⣴⣿⣿⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠸⣿⡿⠏⠀⢀⠀⠀⠿⣶⣤⣤⣤⣄⣀⣴⣿⡿⢻⣿⡆⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠟⠁⠀⢀⣼⠀⠀⠀⠹⣿⣟⠿⠿⠿⡿⠋⠀⠘⣿⣇⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⢳⣶⣶⣿⣿⣇⣀⠀⠀⠙⣿⣆⠀⠀⠀⠀⠀⠀⠛⠿⣿⣦⣤⣀⠀⠀
+⠀⠀⠀⠀⠀⠀⣹⣿⣿⣿⣿⠿⠋⠁⠀⣹⣿⠳⠀⠀⠀⠀⠀⠀⢀⣠⣽⣿⡿⠟⠃
+⠀⠀⠀⠀⠀⢰⠿⠛⠻⢿⡇⠀⠀⠀⣰⣿⠏⠀⠀⢀⠀⠀⠀⣾⣿⠟⠋⠁⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠀⠀⣰⣿⣿⣾⣿⠿⢿⣷⣀⢀⣿⡇⠁⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠉⠁⠀⠀⠀⠀⠙⢿⣿⣿⠇⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠀⠀⠀*/
+// Get the battery voltage
+// const batteryVoltage = parseFloat(document.getElementById('battery-voltage'));
+ 
+// // Select the img element
+// const batteryImage = document.getElementById('battery-image');
+ 
+// // Check the battery voltage and decide whether to show the image
+// if (batteryVoltage < 3.0) {
+//     // Battery is lower than 3.0 volts, show the empty battery image
+//     batteryImage.src = '../static/img/warning-logo.png';
+// } else if (batteryVoltage > 4.2) {
+//     // Battery is higher than 4.2 volts, do not show the image
+//     batteryImage.style.display = 'none';
+// } else {
+//     // Battery voltage is within the desired range, hide the image
+//     batteryImage.style.display = 'none';
+// }

src/py/static/js/planten.class.js

@@ -28,7 +28,7 @@ class PlantGrid {
     
     // Methode om data te laden.
     loadData() {
-        fetch('../script/plants.json')
+        fetch('../script/json/plants.json')
             .then(response => {
                 // Controleer of de netwerkrespons ok is.
                 if (!response.ok) {

src/py/static/js/planten_pagina.js

@@ -0,0 +1 @@
+/*Hier komt alle code die te maken heeft met de "dynamische" planten pagina's*/

src/py/templates/index.html

@@ -32,13 +32,13 @@
                     <span class="close">&times;</span>
                     <form action="http://localhost:3000/submit-form" method="post" onsubmit="return addplant()">
                         <label for="plantNaam">Naam van de plant</label>
-                        <br>
+                        
                         <input type="text" name="plant_naam" id="plantNaam">
-                        <br>
+                        
                         <label for="plantensoort">Soort van de plant</label>
-                        <br>
+                        
                         <input type="text" name="plantensoort" id="plantensoort">
-                        <br>
+                        
                         <label for="aanwezig">Aanwezig
                           <input type="radio" name="plant_geteelt" id="aanwezig" value="true">
                         </label>
@@ -48,14 +48,14 @@
                         </label>
 
                         <label for="ontvangenMeldingen">Meldingen ontvangen</label>
-                        <br>
+                        
                         <select name="ontvangen_meldingen">
                             <option value="true">Ja</option>
                             <option value="false">Nee</option>
                         </select>
-                        <br>
+                        
                         <section class="knop-container">
-                            <br><button class="annulatie-knop" type="button" onclick="closeOverlay()">Annuleren</button>
+                            <button class="annulatie-knop" type="button" onclick="closeOverlay()">Annuleren</button>
                             <input type="submit" value="Submit">
                         </section>
                     </form>
@@ -68,7 +68,7 @@
             <section id="sectie-1">
               <article class="parent-algemeen-overzicht">
                 <article class="algemeen-overzicht">
-                  <a href="pomp_informatie.html" id="kas-informatie">
+                  <a href="./pomp_informatie.html" id="kas-informatie">
                     <table class="table-informatie-kas">
                       <tr class="tr-informatie-pomp">
                         <td>Pomp Status:</td>

src/py/templates/kas_informatie.html

@@ -8,6 +8,7 @@
     <meta name="keywords" content="Kas informatie / Algoritme / Voeding / Planten / Data / Kas" />
     <link rel="stylesheet" href="../static/css/style.css" />
     <script src="../static/js/main.js" defer></script>
+    <script src="../static/js/grafiek.js" defer></script>
     <title>Informatie Kas</title>
   </head>
   <body>

src/py/templates/planteninfo.html

@@ -8,6 +8,7 @@
     <meta name="keywords" content="Planten informatie / Algoritme / Voeding / Planten / Data / Kas" />
     <link rel="stylesheet" href="../static/css/style.css" />
     <script src="../static/js/main.js" defer></script>
+    <script src="../static/js/grafiek.js" defer></script>
     <title>Planten</title>
   </head>
   <body>

src/py/templates/pomp_informatie.html

@@ -8,6 +8,7 @@
     <meta name="keywords" content="Pomp / Algoritme / Voeding / Planten / Data / Kas" />
     <link rel="stylesheet" href="../static/css/style.css" />
     <script src="../static/js/main.js" defer></script>
+    <script src="../static/js/grafiek.js" defer></script>
     <title>Informatie Pomp</title>
   </head>
   <body>

src/py/templates/sensor.html

@@ -8,6 +8,7 @@
     <meta name="keywords" content="Sensor / Algoritme / Voeding / Planten / Data / Kas" />
     <link rel="stylesheet" href="../static/css/style.css" />
     <script src="../static/js/main.js" defer></script>
+    <script src="../static/js/grafiek.js" defer></script>
     <title>Informatie Sensor</title>
   </head>
   <body>
@@ -58,7 +59,7 @@
               <article class="grafiek-innerbox">
                 <h2>Zonlicht</h2>
                 <canvas
-                  id="myCanvas"
+                  id="sensorCanvas"
                   class="canvas-informatie-kas"
                   width="275"
                   height="275"