diff --git a/ReadMe.md b/ReadMe.md index 03e2245..330c3ca 100644 --- a/ReadMe.md +++ b/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) diff --git a/app.js b/app.js index b137651..7111309 100644 --- a/app.js +++ b/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() { diff --git a/app.py b/app.py index 1f66a27..223a811 100644 --- a/app.py +++ b/app.py @@ -1,5 +1,4 @@ -from flask import Flask, render_template, jsonify, request, redirect, url_for -from flask_sqlalchemy import SQLAlchemy +from flask import Flask, jsonify import mysql.connector import requests @@ -34,7 +33,6 @@ def get_database_data(): battery_data = cursor.fetchall() # Fetch all rows mydb.close() return battery_data - @app.route('/', methods=['GET']) def get_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() + 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() - query = "SELECT id, plant_naam, plantensoort, plant_geteelt FROM planten" - - cursor.execute(query) - planten_data = cursor.fetchall() # Fetch all rows - mydb.close() - return 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) \ No newline at end of file diff --git a/documentatie/Goodgarden.pptx b/documentatie/Goodgarden.pptx new file mode 100644 index 0000000..6ad1bde Binary files /dev/null and b/documentatie/Goodgarden.pptx differ diff --git a/documentatie/Projectdossier_goodgarden.docx b/documentatie/Projectdossier_goodgarden.docx new file mode 100644 index 0000000..0ebe324 Binary files /dev/null and b/documentatie/Projectdossier_goodgarden.docx differ diff --git a/mqtt/db_connect.py b/mqtt/db_connect.py deleted file mode 100644 index eda2e93..0000000 --- a/mqtt/db_connect.py +++ /dev/null @@ -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 diff --git a/mqtt/publisher.py b/mqtt/publisher.py index 3760cb0..442ee0d 100644 --- a/mqtt/publisher.py +++ b/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}"} @@ -84,4 +84,4 @@ if __name__ == "__main__": print(f"\033[91mWachten, wachten en nog eens wachten... {publish_interval} secondes!\033[0m\n") time.sleep(publish_interval) # Wacht voor het ingestelde interval. - client.loop_stop() + client.loop_stop() \ No newline at end of file diff --git a/src/py/script/battery_voltage_events.py b/src/py/script/battery_voltage_events.py index baa1c3a..ea94d22 100644 --- a/src/py/script/battery_voltage_events.py +++ b/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 -def database_connect(): - return mysql.connector.connect( - host="localhost", - user="root", - password="", - database="goodgarden" - ) +from db_connect import database_connect # 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 diff --git a/src/py/script/db_connect.py b/src/py/script/db_connect.py index 648a1a7..68054b9 100644 --- a/src/py/script/db_connect.py +++ b/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. diff --git a/src/py/script/db_connect_form.py b/src/py/script/db_connect_form.py index 5202ebc..87f7755 100644 --- a/src/py/script/db_connect_form.py +++ b/src/py/script/db_connect_form.py @@ -1,34 +1,26 @@ 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( - host='localhost', - database='goodgarden', - user='root', - password='' - ) + # Gebruik de verbinding die teruggegeven wordt door de database_connect functie uit de db_connect module + connection = database_connect() - # Als er verbinding gemaakt kan worden voer dan onderstaande query uit - if connection.is_connected(): - - # 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"})) + # Je kunt de controle of de verbinding succesvol is rechtstreeks in de database_connect functie uitvoeren + # De cursor() zorgt ervoor dat er een verbinding met de database gelegd 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})) except Error as e: print(json.dumps({"success": False, "error": str(e)})) diff --git a/src/py/script/devices.py b/src/py/script/devices.py index 1261446..753d293 100644 --- a/src/py/script/devices.py +++ b/src/py/script/devices.py @@ -1,4 +1,5 @@ import json + from db_connect import database_connect from paho.mqtt import subscribe diff --git a/src/py/script/json/plants.json b/src/py/script/json/plants.json new file mode 100644 index 0000000..762550c --- /dev/null +++ b/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 + } +] \ No newline at end of file diff --git a/src/py/script/par_events.py b/src/py/script/par_events.py index 7979e50..a245a13 100644 --- a/src/py/script/par_events.py +++ b/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. @@ -35,4 +17,4 @@ if __name__ == "__main__": # Definieer het topic waarop geabonneerd wordt. topic = "goodgarden/par_events" # Roep de subscribe.callback functie aan met de on_message functie als callback om te luisteren naar berichten op het gespecificeerde topic. - subscribe.callback(on_message, topic) + subscribe.callback(on_message, topic) \ No newline at end of file diff --git a/src/py/script/planten.py b/src/py/script/planten.py index ebbc540..139f5c4 100644 --- a/src/py/script/planten.py +++ b/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. -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. - ) +from db_connect import database_connect # Gebruik deze geïmporteerde functie # 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. diff --git a/src/py/script/plants.json b/src/py/script/plants.json deleted file mode 100644 index a032e4c..0000000 --- a/src/py/script/plants.json +++ /dev/null @@ -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 - } -] \ No newline at end of file diff --git a/src/py/script/relative_humidity_events.py b/src/py/script/relative_humidity_events.py index 363116a..0982b37 100644 --- a/src/py/script/relative_humidity_events.py +++ b/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. diff --git a/src/py/script/soil_electric_conductivity_events.py b/src/py/script/soil_electric_conductivity_events.py index 8917a10..b7672c8 100644 --- a/src/py/script/soil_electric_conductivity_events.py +++ b/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. diff --git a/src/py/script/soil_relative_permittivity_events.py b/src/py/script/soil_relative_permittivity_events.py index 0d01ff5..0232764 100644 --- a/src/py/script/soil_relative_permittivity_events.py +++ b/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. diff --git a/src/py/script/soil_temperature_events.py b/src/py/script/soil_temperature_events.py index 7b06a01..2c35ec5 100644 --- a/src/py/script/soil_temperature_events.py +++ b/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. diff --git a/src/py/static/css/style.css b/src/py/static/css/style.css index 9fc7264..0004d2e 100644 --- a/src/py/static/css/style.css +++ b/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; - height: 30px; + width: 50px; + 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; - width: 26px; - left: 4px; - bottom: 4px; + height: 22px; + width: 22px; + left: 3px; + 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 { diff --git a/src/py/static/css/style.css.map b/src/py/static/css/style.css.map index 991b722..6805f45 100644 --- a/src/py/static/css/style.css.map +++ b/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"} \ No newline at end of file +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/src/py/static/css/style.scss b/src/py/static/css/style.scss index b1aa5e2..a0a3438 100644 --- a/src/py/static/css/style.scss +++ b/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; - height: 30px; + width: 50px; + height: 25px; } .switch input[type="checkbox"] { @@ -500,21 +500,21 @@ body .slider:before { position: absolute; content: ""; - height: 26px; - width: 26px; - left: 4px; - bottom: 4px; + height: 22px; + width: 22px; + left: 3px; + 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; diff --git a/src/py/static/images/achtergrond.png b/src/py/static/images/achtergrond.png deleted file mode 100644 index aea4958..0000000 Binary files a/src/py/static/images/achtergrond.png and /dev/null differ diff --git a/src/py/static/images/achtergrond.webp b/src/py/static/images/achtergrond.webp new file mode 100644 index 0000000..3d9070a Binary files /dev/null and b/src/py/static/images/achtergrond.webp differ diff --git a/src/py/static/images/desktop.ini b/src/py/static/images/desktop.ini new file mode 100644 index 0000000..0f1fe00 --- /dev/null +++ b/src/py/static/images/desktop.ini @@ -0,0 +1,2 @@ +[LocalizedFileNames] +achtergrond.webp=@achtergrond.webp,0 diff --git a/src/py/static/js/grafiek.js b/src/py/static/js/grafiek.js new file mode 100644 index 0000000..222246a --- /dev/null +++ b/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} xLabels - Labels for the x-axis. + * @param {Array} data - Data points for the chart, one per x-label. + * @param {Array} [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"); \ No newline at end of file diff --git a/src/py/static/js/main.js b/src/py/static/js/main.js index 3d7a228..4d71710 100644 --- a/src/py/static/js/main.js +++ b/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) => { - if (pythonData === 'error') { +ipcRenderer.on('python-script-response', (event, pythonData) => +{ + 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,143 +186,139 @@ function updateBatteryData(batteryData) } } } +// Fetch battery data when the page loads +fetchBatteryData(); +/*⠀⠀⠀⢸⣦⡀⠀⠀⠀⠀⢀⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ +⠀⠀⠀⢸⣏⠻⣶⣤⡶⢾⡿⠁⠀⢠⣄⡀⢀⣴⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ +⠀⠀⣀⣼⠷⠀⠀⠁⢀⣿⠃⠀⠀⢀⣿⣿⣿⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ +⠴⣾⣯⣅⣀⠀⠀⠀⠈⢻⣦⡀⠒⠻⠿⣿⡿⠿⠓⠂⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀ +⠀⠀⠀⠉⢻⡇⣤⣾⣿⣷⣿⣿⣤⠀⠀⣿⠁⠀⠀⠀⢀⣴⣿⣿⠀⠀⠀⠀⠀⠀⠀ +⠀⠀⠀⠀⠸⣿⡿⠏⠀⢀⠀⠀⠿⣶⣤⣤⣤⣄⣀⣴⣿⡿⢻⣿⡆⠀⠀⠀⠀⠀⠀ +⠀⠀⠀⠀⠀⠟⠁⠀⢀⣼⠀⠀⠀⠹⣿⣟⠿⠿⠿⡿⠋⠀⠘⣿⣇⠀⠀⠀⠀⠀⠀ +⠀⠀⠀⠀⠀⢳⣶⣶⣿⣿⣇⣀⠀⠀⠙⣿⣆⠀⠀⠀⠀⠀⠀⠛⠿⣿⣦⣤⣀⠀⠀ +⠀⠀⠀⠀⠀⠀⣹⣿⣿⣿⣿⠿⠋⠁⠀⣹⣿⠳⠀⠀⠀⠀⠀⠀⢀⣠⣽⣿⡿⠟⠃ +⠀⠀⠀⠀⠀⢰⠿⠛⠻⢿⡇⠀⠀⠀⣰⣿⠏⠀⠀⢀⠀⠀⠀⣾⣿⠟⠋⠁⠀⠀⠀ +⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠀⠀⣰⣿⣿⣾⣿⠿⢿⣷⣀⢀⣿⡇⠁⠀⠀⠀⠀⠀ +⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠉⠁⠀⠀⠀⠀⠙⢿⣿⣿⠇⠀⠀⠀⠀⠀⠀ +⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⠀⠀⠀⠀⠀⠀⠀ +⠀⠀ ⠀⠈⠀⠀⠀*/ - -// 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) +function dynamischSensor() +{ + if (window.location.pathname.endsWith('index.html') || window.location.pathname === '/') { - // 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"); - const sensor2 = document.getElementById("sensor-2"); - - if (sensor1 && sensor2) - { - sensor1.href = `sensor.html?id=${322}`; - sensor2.href = `sensor.html?id=${256}`; - } - else - { - console.log("Elementen 'sensor-1' of 'sensor-2' bestaan niet in de DOM."); - } - } - } - - // Aanroepen van de functie - dynamischSensor(); - - - function closeApplication() { - 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 => + const sensor1 = document.getElementById("sensor-1"); + const sensor2 = document.getElementById("sensor-2"); + + if (sensor1 && sensor2) { - // Verwerk de ontvangen data. - const plantenData = response.data; - updatePlantenData(plantenData); - }) - .catch(error => - { - // Log eventuele fouten tijdens het ophalen. - console.error('Error fetching planten data:', error); - }); - } - - 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) - { - // Verkrijg de plant ID uit de URL. - const plantId = parseInt(getPlantIdFromUrl(), 10); - - // Vind de plant met die ID in de ontvangen JSON-data. - const gevondenPlant = plantenData.find(plant => plant.id === plantId); - - // Update de titel van de pagina met de naam van de gevonden plant. - if (gevondenPlant) - { - document.title = gevondenPlant.plant_naam; - document.querySelector(".plant-titel").textContent = gevondenPlant.plant_naam; - console.log("@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@"); + sensor1.href = `sensor.html?id=${322}`; + sensor2.href = `sensor.html?id=${256}`; } else { - console.log(`Geen plant gevonden met ID ${plantId}`); + console.log("Elementen 'sensor-1' of 'sensor-2' bestaan niet in de DOM."); } } +} + +// Aanroepen van de functie +dynamischSensor(); + +/*⠀⠀⠀⢸⣦⡀⠀⠀⠀⠀⢀⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ +⠀⠀⠀⢸⣏⠻⣶⣤⡶⢾⡿⠁⠀⢠⣄⡀⢀⣴⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ +⠀⠀⣀⣼⠷⠀⠀⠁⢀⣿⠃⠀⠀⢀⣿⣿⣿⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ +⠴⣾⣯⣅⣀⠀⠀⠀⠈⢻⣦⡀⠒⠻⠿⣿⡿⠿⠓⠂⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀ +⠀⠀⠀⠉⢻⡇⣤⣾⣿⣷⣿⣿⣤⠀⠀⣿⠁⠀⠀⠀⢀⣴⣿⣿⠀⠀⠀⠀⠀⠀⠀ +⠀⠀⠀⠀⠸⣿⡿⠏⠀⢀⠀⠀⠿⣶⣤⣤⣤⣄⣀⣴⣿⡿⢻⣿⡆⠀⠀⠀⠀⠀⠀ +⠀⠀⠀⠀⠀⠟⠁⠀⢀⣼⠀⠀⠀⠹⣿⣟⠿⠿⠿⡿⠋⠀⠘⣿⣇⠀⠀⠀⠀⠀⠀ +⠀⠀⠀⠀⠀⢳⣶⣶⣿⣿⣇⣀⠀⠀⠙⣿⣆⠀⠀⠀⠀⠀⠀⠛⠿⣿⣦⣤⣀⠀⠀ +⠀⠀⠀⠀⠀⠀⣹⣿⣿⣿⣿⠿⠋⠁⠀⣹⣿⠳⠀⠀⠀⠀⠀⠀⢀⣠⣽⣿⡿⠟⠃ +⠀⠀⠀⠀⠀⢰⠿⠛⠻⢿⡇⠀⠀⠀⣰⣿⠏⠀⠀⢀⠀⠀⠀⣾⣿⠟⠋⠁⠀⠀⠀ +⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠀⠀⣰⣿⣿⣾⣿⠿⢿⣷⣀⢀⣿⡇⠁⠀⠀⠀⠀⠀ +⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠉⠁⠀⠀⠀⠀⠙⢿⣿⣿⠇⠀⠀⠀⠀⠀⠀ +⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⠀⠀⠀⠀⠀⠀⠀ +⠀⠀⠀⠀⠀PLANTEN⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⠈⠀⠀⠀*/ + +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 => + { + // Verwerk de ontvangen data. + const plantenData = response.data; + updatePlantenData(plantenData); + }) + .catch(error => + { + // Log eventuele fouten tijdens het ophalen. + console.error('Error fetching planten data:', error); + }); +} + +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) +{ + // Verkrijg de plant ID uit de URL. + const plantId = parseInt(getPlantIdFromUrl(), 10); + + // Vind de plant met die ID in de ontvangen JSON-data. + const gevondenPlant = plantenData.find(plant => plant.id === plantId); + + // Update de titel van de pagina met de naam van de gevonden plant. + if (gevondenPlant) + { + document.title = gevondenPlant.plant_naam; + document.querySelector(".plant-titel").textContent = gevondenPlant.plant_naam; + // 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(); - +// 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); +// const batteryVoltage = parseFloat(document.getElementById('battery-voltage')); -// Select the img element -const batteryImage = document.getElementById('battery-image'); +// // 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'; -} \ No newline at end of file +// // 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'; +// } \ No newline at end of file diff --git a/src/py/static/js/planten.class.js b/src/py/static/js/planten.class.js index c094936..cad68c7 100644 --- a/src/py/static/js/planten.class.js +++ b/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) { diff --git a/src/py/static/js/planten_pagina.js b/src/py/static/js/planten_pagina.js new file mode 100644 index 0000000..4dcea13 --- /dev/null +++ b/src/py/static/js/planten_pagina.js @@ -0,0 +1 @@ +/*Hier komt alle code die te maken heeft met de "dynamische" planten pagina's*/ \ No newline at end of file diff --git a/src/py/templates/index.html b/src/py/templates/index.html index c881fb1..c96096a 100644 --- a/src/py/templates/index.html +++ b/src/py/templates/index.html @@ -32,13 +32,13 @@ ×
-
+ -
+ -
+ -
+ @@ -48,14 +48,14 @@ -
+ -
+
-
+
@@ -68,7 +68,7 @@
- + diff --git a/src/py/templates/kas_informatie.html b/src/py/templates/kas_informatie.html index 02bb69c..3ef4e99 100644 --- a/src/py/templates/kas_informatie.html +++ b/src/py/templates/kas_informatie.html @@ -8,6 +8,7 @@ + Informatie Kas diff --git a/src/py/templates/planteninfo.html b/src/py/templates/planteninfo.html index 967450b..77e8de7 100644 --- a/src/py/templates/planteninfo.html +++ b/src/py/templates/planteninfo.html @@ -8,6 +8,7 @@ + Planten diff --git a/src/py/templates/pomp_informatie.html b/src/py/templates/pomp_informatie.html index 5c1bbee..a07fb91 100644 --- a/src/py/templates/pomp_informatie.html +++ b/src/py/templates/pomp_informatie.html @@ -8,6 +8,7 @@ + Informatie Pomp diff --git a/src/py/templates/sensor.html b/src/py/templates/sensor.html index 8ba9cdd..2bef16b 100644 --- a/src/py/templates/sensor.html +++ b/src/py/templates/sensor.html @@ -8,6 +8,7 @@ + Informatie Sensor @@ -58,7 +59,7 @@

Zonlicht

Pomp Status: