heboba/goodgarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SCHOON

Browse Source
This commit is contained in:
Atilla
2024-04-12 21:23:08 +02:00
parent 5d58ac6cf0
commit 49b0a66cb4
34 changed files with 454 additions and 433 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ReadMe.md
View File

@@ -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)

51
app.js
View File

@@ -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()
{

31
app.py
View File

@@ -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)

BIN
documentatie/Goodgarden.pptx Normal file
View File

Binary file not shown.

BIN
documentatie/Projectdossier_goodgarden.docx Normal file
View File

Binary file not shown.

36
mqtt/db_connect.py
View File

@@ -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

6
mqtt/publisher.py
View File

@@ -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()

13
src/py/script/battery_voltage_events.py
View File

@@ -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

2
src/py/script/db_connect.py
View File

@@ -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.

32
src/py/script/db_connect_form.py
View File

@@ -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)}))

1
src/py/script/devices.py
View File

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

14
src/py/script/json/plants.json Normal file
View File

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

20
src/py/script/par_events.py
View File

@@ -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)

17
src/py/script/planten.py
View File

@@ -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.

20
src/py/script/plants.json
View File

@@ -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
}
]

1
src/py/script/relative_humidity_events.py
View File

@@ -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.

1
src/py/script/soil_electric_conductivity_events.py
View File

@@ -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.

1
src/py/script/soil_relative_permittivity_events.py
View File

@@ -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.

1
src/py/script/soil_temperature_events.py
View File

@@ -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.

18
src/py/static/css/style.css
View File

@@ -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 {

2
src/py/static/css/style.css.map
View File

@@ -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"}

18
src/py/static/css/style.scss
View File

@@ -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;

BIN
src/py/static/images/achtergrond.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 19 MiB

BIN
src/py/static/images/achtergrond.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

2
src/py/static/images/desktop.ini Normal file
View File

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

116
src/py/static/js/grafiek.js Normal file
View File

@@ -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");

457
src/py/static/js/main.js
View File

@@ -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';
}
// // 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';
// }

2
src/py/static/js/planten.class.js
View File

@@ -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) {

1
src/py/static/js/planten_pagina.js Normal file
View File

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

16
src/py/templates/index.html
View File

@@ -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>

1
src/py/templates/kas_informatie.html
View File

@@ -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>

1
src/py/templates/planteninfo.html
View File

@@ -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>

1
src/py/templates/pomp_informatie.html
View File

@@ -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>

3
src/py/templates/sensor.html
View File

@@ -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"