Up to date

app.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require('electron'); /* TYPE IN TERMINAL: "npm install electron" */
+const { app, BrowserWindow,ipcMain } = require('electron'); /* TYPE IN TERMINAL: "npm install electron" */
 const express = require('express');  /* TYPE IN TERMINAL: "npm install express" */
 const bodyParser = require('body-parser');  /* TYPE IN TERMINAL: "npm install body-parser" */
 const { PythonShell } = require('python-shell');  /* TYPE IN TERMINAL: "npm install python-shell" */
@@ -16,19 +16,31 @@ server.post('/submit-form', (req, res) => {
 
   let options = {
     mode: 'text',
-    args: [plant_naam, plantensoort, plant_geteelt] // Zet hier een variable bij om de data toe te voegen aan de database
+    args: [plant_naam, plantensoort, plant_geteelt], // Zet hier een variable bij om de data toe te voegen aan de databas
   };
 
-  // Voer Python script uit met de plant_naam als argument
+/*Om python te gebruiken*/
-  PythonShell.run('./script/db_connect_form.py', options, (err, results) => {
+// ipcMain.on('request-update-temp', (event, args) => {
-    if (err) {
+//   let options = {
-      console.error(err);
+//       mode: 'text',
-      res.send('Er is een fout opgetreden');
+//       scriptPath: 'path/to/your/python/script',
-    } else {
+//       args: args
-      console.log('Python script uitvoering resultaten:', results);
+//   };
-      res.send('Formulier succesvol verwerkt');
+
-    }
+//   PythonShell.run('calculate.py', options, (err, results) => {
-  });
+//       if (err) {
+//           console.error('Error running python script', err);
+//           event.reply('update-temp-result', 'error');
+//       } else {
+//           console.log('Python script results:', results);
+//           event.reply('update-temp-result', results[0]); // Verstuur het resultaat terug naar de renderer proces
+//       }
+//   });
+// });
+
+// En dan in je renderer proces, stuur je een bericht om de update te verzoeken
+ipcRenderer.send('request-update-temp', [/* hier kunnen argumenten komen die je Python script nodig heeft */]);
+
 });
 
 // Start de server voor verbinding met de database
@@ -42,6 +54,7 @@ function createWindow() {
   const mainWindow = new BrowserWindow({
     width: 1280,
     height: 800,
+    frame: false,
     webPreferences: {
       nodeIntegration: true,
       contextIsolation: false
@@ -49,6 +62,27 @@ function createWindow() {
   });
 
   mainWindow.loadURL(urlElectron);
+
+  /*Is om het Python script te kunnen gebruiken*/
+  ipcMain.on('run-python-script', (event, args) => {
+    let options = {
+        mode: 'text',
+        args: args
+    };
+
+    PythonShell.run('../src/py/calculate.py', options, (err, results) => {
+        if (err) 
+        {
+            console.error('Error running python script', err);
+            event.reply('python-script-response', 'error');
+        } 
+        else 
+        {
+            console.log('Python script results:', results);
+            event.reply('python-script-response', results);
+        }
+    });
+});
 }
 
 app.whenReady().then(createWindow);

script/DUMMY.json

@@ -0,0 +1,123 @@
+    
+    // Deze spanningswaarden zijn relatief hoog, wat suggereert dat de batterijen van de sensoren goed opgeladen zijn. De meeste sensorapparaten gebruiken batterijen die een nominale spanning van ongeveer 3,7 volt hebben (typisch voor lithium-ion batterijen) en kunnen worden beschouwd als "volledig opgeladen" wanneer ze een spanning dicht bij of iets boven 4,1 volt bereiken
+    "battery_voltage_events": [
+      {
+        "timestamp": 1707825721,
+        "gateway_receive_time": "2024-02-13T12:02:01Z",
+        "device": 256,
+        "value": 4.098901271820068
+        // Volledig opgeladen: Rond 4.2 volt.
+        // Nominale spanning: Ongeveer 3.7 volt.
+        // Kritiek laag: Minder dan 3.0 volt.
+      },
+      {
+        "timestamp": 1707837460,
+        "gateway_receive_time": "2024-02-13T15:17:40Z",
+        "device": 322,
+        "value": 4.105006217956543
+      }
+    ],
+
+
+
+    
+    "devices": [
+      {
+        "id": 256,
+        "serial_number": "0033889B1BAB1169",
+        "name": "firefly2_0051",
+        "label": "The Field",
+        "last_seen": 1707765066,
+        "last_battery_voltage": 4.09768009185791
+      },
+      {
+        "id": 322,
+        "serial_number": "006FE1FC316ED7D8",
+        "name": "firefly2_0111",
+        "label": "The Field",
+        "last_seen": 1707764966,
+        "last_battery_voltage": 4.107448101043701
+      }
+    ],
+
+
+
+    
+
+    // Fotosyntese??? (zonlicht)
+    "par_events": [
+      {
+        "timestamp": 1707844638,
+        "gateway_receive_time": "2024-02-13T17:17:18Z",
+        "device": 322,
+        "value": 0.0
+      },
+      {
+        "timestamp": 1707851099,
+        "gateway_receive_time": "2024-02-13T19:04:59Z",
+        "device": 256,
+        "value": 0.0
+      }
+    ],
+
+
+
+    
+    // Luchtvochtigheid
+    "relative_humidity_events": [
+      {
+        "timestamp": 1707844638,
+        "gateway_receive_time": "2024-02-13T17:17:18Z",
+        "device": 322,
+        "value": 71.08984375
+      },
+      {
+        "timestamp": 1707851099,
+        "gateway_receive_time": "2024-02-13T19:04:59Z",
+        "device": 256,
+        "value": 66.7294921875
+      }
+    ],
+
+
+
+    
+
+    // De "soil_electric_conductivity_events" gegevens wijzen op metingen van de elektrische geleidbaarheid (EC) van de bodem, een indicator van de hoeveelheid oplosbare zouten of voedingsstoffen in de bodem. EC wordt gemeten in Siemens per meter (S/m) of, voor bodemmetingen, vaak in milliSiemens per centimeter (mS/cm). Een hogere EC-waarde duidt op een hogere concentratie van opgeloste zouten, wat belangrijk is voor het bepalen van de voedingsstatus van de bodem en het beheren van de bemesting voor optimale plantengroei.
+    "soil_electric_conductivity_events": [
+      {
+        "timestamp": 1707851215,
+        "gateway_receive_time": "2024-02-13T19:06:55Z",
+        "device": 322,
+        "value": 0.0
+      }
+    ],
+
+
+
+
+    
+    // In de context van bodemmetingen, geeft deze waarde inzicht in het vochtgehalte van de bodem, omdat water een relatief hoge diëlektrische constante heeft in vergelijking met droge bodem of lucht.
+    "soil_relative_permittivity_events": [
+      {
+        "timestamp": 1707851215,
+        "gateway_receive_time": "2024-02-13T19:06:55Z",
+        "device": 322,
+        "value": 1.52 
+        // Een waarde van 1.52 is relatief laag en suggereert dat de bodem droog kan zijn op het moment van meting. Ter referentie, de diëlektrische constante van lucht is ongeveer 1, terwijl water een diëlektrische constante heeft van ongeveer 80 bij kamertemperatuur.
+      }
+    ],
+    
+
+
+    //De "soil_temperature_events" gegevens bevatten informatie over de temperatuur van de bodem op een specifiek tijdstip. De waarde geeft de temperatuur van de bodem aan in graden Celsius (°C).
+    "soil_temperature_events": [
+      {
+        "timestamp": 1707851215,
+        "gateway_receive_time": "2024-02-13T19:06:55Z",
+        "device": 322,
+        "value": 12.06
+      }
+    ]
+  }
+  

script/battery_voltage_events.py

@@ -1,52 +1,273 @@
-import requests #** TYPE IN TERMINAL: "pip install requests"
+# import requests #** TYPE IN TERMINAL: "pip install requests"
-import time
+# import time
-import mysql.connector #** TYPE IN TERMINAL: "pip install mysql-connector-python"
+# import mysql.connector #** TYPE IN TERMINAL: "pip install mysql-connector-python"
 
-# Import python db_connect.py script
+# # Import python db_connect.py script
-from db_connect import database_connect
+# from db_connect import database_connect
+
+# # Functie voor het aanmaken van gegevens in de database
+# def create_data(url, access_token, repeat_count=5):
+#     for _ in range(repeat_count):
+#         try:
+#             headers = {
+#                 "Authorization": f"Token {access_token}"
+#             }
+#             response = requests.get(url, headers=headers)
+#             response.raise_for_status()
+
+#             data = response.json()
+
+#             # print(f"Data from {url}:")
+#             print(data)
+#             insert_data(data)
+
+#         except requests.exceptions.RequestException as e:
+#             print(f"Error fetching data from {url}: {e}")
+            
+#         print("Waiting for the next create action...")
+#         time.sleep(10)
+#         # time.sleep(300)
+
+# # Functie voor het invoegen van gegevens in de database
+# def insert_data(data):
+#     mydb = database_connect()
+#     if mydb.is_connected():
+#         mycursor = mydb.cursor()
+
+#         insert_query = """
+#         INSERT INTO goodgarden.battery_voltage_events (timestamp, gateway_receive_time, device, value)
+#         VALUES (%s, %s, %s, %s)
+#         """
+
+#         for record in data['results']:  # Pas dit aan op basis van de werkelijke structuur van de JSON
+
+#             timestamp = record.get('timestamp', '')
+#             gateway_receive_time = record.get('gateway_receive_time', '')
+#             device = record.get('device', '')
+#             value = record.get('value', '')
+
+#             print(f"Inserting data: timestamp={timestamp}, gateway_receive_time={gateway_receive_time}, device={device}, value={value}")
+
+#             # Voer de query uit
+#             mycursor.execute(insert_query, (timestamp, gateway_receive_time, device, value))
+
+#         # Bevestig de wijzigingen
+#         mydb.commit()
+
+#         # Sluit cursor en verbinding
+#         mycursor.close()
+#         mydb.close()
+
+# # Functie voor het lezen van gegevens uit de database
+# def read_data(url, access_token, repeat_count=5):
+#     for _ in range(repeat_count):
+#         try:
+#             headers = {
+#                 "Authorization": f"Token {access_token}"
+#             }
+#             response = requests.get(url, headers=headers)
+#             response.raise_for_status()
+
+#             data = response.json()
+#             print(f"Data from {url}:")
+#             print(data)
+
+#         except requests.exceptions.RequestException as e:
+#             print(f"Error fetching data from {url}: {e}")
+
+#         # Wacht een bepaalde tijd in secondes
+#         print("Waiting for the next read action...")
+#         time.sleep(300)
+
+# # Functie voor het bijwerken van gegevens in de database
+# def update_data(record_id, new_value):
+#     try:
+#         mydb = database_connect()
+
+#         if mydb.is_connected():
+#             mycursor = mydb.cursor()
+
+#             # Controleer of het record bestaat voordat je het bijwerkt
+#             mycursor.execute("SELECT * FROM goodgarden.battery_voltage_events WHERE id = %s", (record_id,))
+#             existing_record = mycursor.fetchone()
+
+#             if not existing_record:
+#                 print(f"Record with ID {record_id} not found. Update operation aborted.")
+#                 return
+
+#             # Hier moet je de juiste kolomnamen aanpassen op basis van de structuur van je database
+#             update_query = """
+#             UPDATE goodgarden.battery_voltage_events
+#             SET value = %s
+#             WHERE id = %s
+#             """
+
+#             # Voer de query uit
+#             print(f"Executing update query: {update_query}")
+#             print(f"Updating record with ID {record_id} to new value: {new_value}")
+
+#             mycursor.execute(update_query, (new_value, record_id))  # Provide the tuple with values here
+
+#             # Bevestig de wijzigingen
+#             mydb.commit()
+
+#             print(f"Update executed. Rowcount: {mycursor.rowcount}")
+
+#     except mysql.connector.Error as update_err:
+#             print(f"Error updating data: {update_err}")
+#     finally:
+#         # Zorg ervoor dat je altijd de cursor en de databaseverbinding sluit
+#         if 'mycursor' in locals() and mycursor is not None:
+#             mycursor.close()
+#         if 'mydb' in locals() and mydb.is_connected():
+#             mydb.close()
+
+
+# # Functie voor het verwijderen van gegevens uit de database
+# def delete_data(record_id):
+#     mydb = database_connect()
+#     if mydb.is_connected():
+#         mycursor = mydb.cursor()
+
+#         # Hier moet je de juiste kolomnamen aanpassen op basis van de structuur van je database
+#         delete_query = """
+#         DELETE FROM goodgarden.battery_voltage_events
+#         WHERE id = %s
+#         """
+
+#         # Voer de query uit
+#         mycursor.execute(delete_query, (record_id,))
+
+#         # Bevestig de wijzigingen
+#         mydb.commit()
+
+#         # Sluit cursor en verbinding
+#         mycursor.close()
+#         mydb.close()
+
+#         print(f"Data with ID {record_id} deleted.")
+
+# if __name__ == "__main__":
+#     url = "https://garden.inajar.nl/api/battery_voltage_events/?format=json"
+#     access_token = "33bb3b42452306c58ecedc3c86cfae28ba22329c"
+
+#     repeat_count = 10
+    
+#     operation_choice = input("Choose operation (C for Create, R for Read, U for Update, D for Delete): ").upper()
+
+#     # Maak gegevens aan
+#     if operation_choice == "C":
+#         create_data(url, access_token, repeat_count)
+
+#     # Lees gegevens
+#     elif operation_choice == "R":
+#         read_data(url, access_token, repeat_count)
+
+#     # Update gegevens
+#     elif operation_choice == "U":
+#         record_id = int(input("Enter record ID to update: "))
+#         new_value = input("Enter new value: ")
+#         update_data(record_id, new_value)
+
+#     # Verwijder gegevens
+#     elif operation_choice == "D":
+#         record_id = int(input("Enter record ID to delete: "))
+#         delete_data(record_id)
+
+#     else:
+#         print("Invalid operation choice. Please choose C, R, U, or D.")
+
+import mysql.connector
+import requests
+from datetime import datetime, timezone, timedelta
+import time
+ 
+# Functie om verbinding te maken met de database
+def database_connect():
+    return mysql.connector.connect(
+        host="localhost",
+        user="root",
+        password="",
+        database="goodgarden"
+    )
+ 
+def calculate_timestamp(gateway_receive_time):
+    # Converteer de stringrepresentatie naar een datetime-object in UTC
+    datetime_obj_utc = datetime.strptime(gateway_receive_time, "%Y-%m-%dT%H:%M:%SZ").replace(tzinfo=timezone.utc)
+   
+    # Voeg het tijdsverschil van 1 uur toe voor de Nederlandse tijdzone (UTC+1)
+    datetime_obj_nl = datetime_obj_utc + timedelta(hours=0)
+ 
+    # Formateer het datetime-object als een leesbare datumstring
+    formatted_date = datetime_obj_nl.strftime("%Y-%m-%d %H:%M:%S")
+    return formatted_date
  
 # Functie voor het aanmaken van gegevens in de database
 def create_data(url, access_token, repeat_count=5):
     for _ in range(repeat_count):
         try:
-            headers = {
+            headers = {"Authorization": f"Token {access_token}"}
-                "Authorization": f"Token {access_token}"
-            }
             response = requests.get(url, headers=headers)
             response.raise_for_status()
  
             data = response.json()
+            print(f"Data from {url}:\n")
  
-            # print(f"Data from {url}:")
+            # Check if data is a list (records directly under the root)
-            print(data)
+            if isinstance(data, list):
-            insert_data(data)
+                records = data
-
+            elif isinstance(data, dict) and 'results' in data:
-        except requests.exceptions.RequestException as e:
+                records = data['results']
-            print(f"Error fetching data from {url}: {e}")
+            else:
-            
+                print(f"Unexpected data format received: {data}")
-        print("Waiting for the next create action...")
+                continue
-        time.sleep(10)
-        # time.sleep(300)
-
-# Functie voor het invoegen van gegevens in de database
-def insert_data(data):
-    mydb = database_connect()
-    if mydb.is_connected():
-        mycursor = mydb.cursor()
-
-        insert_query = """
-        INSERT INTO goodgarden.battery_voltage_events (timestamp, gateway_receive_time, device, value)
-        VALUES (%s, %s, %s, %s)
-        """
-
-        for record in data['results']:  # Pas dit aan op basis van de werkelijke structuur van de JSON
  
+            for record in records:
+                # Now, record is assumed to be a dictionary
                 timestamp = record.get('timestamp', '')
                 gateway_receive_time = record.get('gateway_receive_time', '')
                 device = record.get('device', '')
                 value = record.get('value', '')
  
-            print(f"Inserting data: timestamp={timestamp}, gateway_receive_time={gateway_receive_time}, device={device}, value={value}")
+                # Voeg de timestamp-berekening toe
+                calculated_timestamp = calculate_timestamp(gateway_receive_time)
+ 
+                print(f"\nInserted data: Timestamp: {calculated_timestamp}, Device: {device}, Battery Voltage: {value}V")
+                if float(value) < 3.0:
+                    print("Waarschuwing: Batterijspanning is lager dan 3.0 volt. Opladen aanbevolen.\n")
+                # Controleer of de batterijspanning hoger is dan 4.2 volt en geef een melding
+                elif float(value) > 4.2:
+                    print("Melding: Batterijspanning is hoger dan 4.2 volt. Batterij is vol.\n")
+                else:
+                    print("Melding: Batterijspanning is binnen het gewenste bereik.\n\n")
+ 
+                # Insert data into the database
+                insert_data(record)
+ 
+        except requests.exceptions.RequestException as e:
+            print(f"Error fetching data from {url}: {e}")
+ 
+        print("Waiting for the next create action...\n")
+        time.sleep(2)
+ 
+# Functie voor het invoegen van gegevens in de database
+def insert_data(record):
+    mydb = database_connect()
+    if mydb.is_connected():
+        mycursor = mydb.cursor()
+ 
+        # Hier moet je de juiste kolomnamen en gegevensindeling aanpassen op basis van de API-respons
+        insert_query = """
+        INSERT INTO goodgarden.battery_voltage_events (timestamp, gateway_receive_time, device, value)
+        VALUES (%s, %s, %s, %s)
+        """
+        # Pas dit aan op basis van de werkelijke structuur van de JSON
+        timestamp = calculate_timestamp(record.get('gateway_receive_time', ''))
+        gateway_receive_time = record.get('gateway_receive_time', '')
+        device = record.get('device', '')
+        value = record.get('value', '')
+ 
+        print(f"Inserting data: timestamp={timestamp}, gateway_receive_time={gateway_receive_time}, device={device}, value={value}\n\n")  # Print de ingevoerde gegevens
  
         # Voer de query uit
         mycursor.execute(insert_query, (timestamp, gateway_receive_time, device, value))
@@ -58,29 +279,41 @@ def insert_data(data):
         mycursor.close()
         mydb.close()
  
+        print("Data inserted into the database.")
+ 
 # Functie voor het lezen van gegevens uit de database
 def read_data(url, access_token, repeat_count=5):
     for _ in range(repeat_count):
         try:
-            headers = {
+            headers = {"Authorization": f"Token {access_token}"}
-                "Authorization": f"Token {access_token}"
-            }
             response = requests.get(url, headers=headers)
             response.raise_for_status()
            
             data = response.json()
-            print(f"Data from {url}:")
+            print(f"Data from {url}:\n")
-            print(data)
+           
+            for record in data['results']:
+                timestamp = record.get('timestamp', '')
+                device = record.get('device', '')
+                value = record.get('value', '')
+                print(f"Timestamp: {timestamp}, Device: {device}, Battery Voltage: {value}V\n")
+ 
+                if float(value) < 3.0:
+                    print("Waarschuwing: Batterijspanning is lager dan 3.0 volt. Opladen aanbevolen.\n")
+                # Controleer of de batterijspanning hoger is dan 4.2 volt en geef een melding
+                elif float(value) > 4.2:
+                    print("Melding: Batterijspanning is hoger dan 4.2 volt. Batterij is vol.\n")
+                else:
+                    print("Melding: Batterijspanning is binnen het gewenste bereik.\n\n")
  
         except requests.exceptions.RequestException as e:
             print(f"Error fetching data from {url}: {e}")
  
-        # Wacht een bepaalde tijd in secondes
+        print("Waiting for the next read action...\n")
-        print("Waiting for the next read action...")
         time.sleep(300)
  
 # Functie voor het bijwerken van gegevens in de database
-def update_data(record_id, new_value):
+def update_data(record_id):
     try:
         mydb = database_connect()
  
@@ -95,18 +328,24 @@ def update_data(record_id, new_value):
                 print(f"Record with ID {record_id} not found. Update operation aborted.")
                 return
  
+            # Vraag de gebruiker om nieuwe waarden voor de andere velden
+            new_timestamp = input("Enter new timestamp: ")
+            new_gateway_receive_time = input("Enter new gateway_receive_time: ")
+            new_device = input("Enter new device: ")
+            new_value = input("Enter new value: ")
+ 
             # Hier moet je de juiste kolomnamen aanpassen op basis van de structuur van je database
             update_query = """
             UPDATE goodgarden.battery_voltage_events
-            SET value = %s
+            SET timestamp = %s, gateway_receive_time = %s, device = %s, value = %s
             WHERE id = %s
             """
  
             # Voer de query uit
             print(f"Executing update query: {update_query}")
-            print(f"Updating record with ID {record_id} to new value: {new_value}")
+            print(f"Updating record with ID {record_id} to new values - timestamp: {new_timestamp}, gateway_receive_time: {new_gateway_receive_time}, device: {new_device}, value: {new_value}")
  
-            mycursor.execute(update_query, (new_value, record_id))  # Provide the tuple with values here
+            mycursor.execute(update_query, (new_timestamp, new_gateway_receive_time, new_device, new_value, record_id))
  
             # Bevestig de wijzigingen
             mydb.commit()
@@ -122,7 +361,6 @@ def update_data(record_id, new_value):
         if 'mydb' in locals() and mydb.is_connected():
             mydb.close()
  
-
 # Functie voor het verwijderen van gegevens uit de database
 def delete_data(record_id):
     mydb = database_connect()
@@ -147,32 +385,31 @@ def delete_data(record_id):
  
         print(f"Data with ID {record_id} deleted.")
  
+# Functie voor het aanmaken van gegevens in de database op basis van batterijspanningsinformatie
 if __name__ == "__main__":
     url = "https://garden.inajar.nl/api/battery_voltage_events/?format=json"
-    access_token = "33bb3b42452306c58ecedc3c86cfae28ba22329c"
+    access_token = "33bb3b42452306c58ecedc3c86cfae28ba22329c"  # Vervang dit door je werkelijke toegangstoken
    
+    # Je kunt repeat_count wijzigen om te bepalen hoe vaak je de bewerking wilt herhalen
     repeat_count = 10
    
+    # Keuze voor de bewerking
     operation_choice = input("Choose operation (C for Create, R for Read, U for Update, D for Delete): ").upper()
  
-    # Maak gegevens aan
     if operation_choice == "C":
+        # Maak gegevens aan
         create_data(url, access_token, repeat_count)
-
-    # Lees gegevens
     elif operation_choice == "R":
+        # Lees gegevens
         read_data(url, access_token, repeat_count)
-
-    # Update gegevens
     elif operation_choice == "U":
+        # Update gegevens
         record_id = int(input("Enter record ID to update: "))
-        new_value = input("Enter new value: ")
+        # Call the update_data function without additional arguments
-        update_data(record_id, new_value)
+        update_data(record_id)
-
-    # Verwijder gegevens
     elif operation_choice == "D":
+        # Verwijder gegevens
         record_id = int(input("Enter record ID to delete: "))
         delete_data(record_id)
-
     else:
         print("Invalid operation choice. Please choose C, R, U, or D.")

script/main.js

@@ -1,27 +0,0 @@
-function openModal()
-{
-    const modal = document.getElementById("myModal");
-    const button = document.getElementById("modalButton");
-    const close = document.getElementsByClassName("close")[0];
-
-    // Toon de modal wanneer op de knop wordt geklikt
-    button.onclick = function()
-    {
-        modal.style.display = "block";
-    }
-
-    // Sluit de modal wanneer op het 'sluiten' icoon wordt geklikt
-    close.onclick = function() 
-    {
-        modal.style.display = "none";
-    }
-
-    // Sluit de modal wanneer buiten de modal wordt geklikt
-    window.onclick = function(event) 
-    {
-        if (event.target == modal) 
-        {
-            modal.style.display = "none";
-        }
-    }
-}

src/css/style.css

@@ -1,40 +1,118 @@
 /*default colors*/
 @import url("https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap");
-/* The Main container and border*/
+h1, h2, h3, h4, h5 {
+  font-family: "Akaya Kanadaka", system-ui;
+  margin: 0;
+}
+
+p, td {
+  font-family: "Afacad", sans-serif;
+}
+
 body {
   background-image: url("../images/achtergrond.png");
   background-repeat: no-repeat;
   background-size: cover;
-  font-family: "Afacad", sans-serif;
+  background-position: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
 }
-
+body .mainContainer {
-.mainContainer {
+  width: 85vw;
-  margin: 2rem;
+  height: 38rem;
-  height: 37rem;
   background-color: rgba(255, 255, 255, 0.95);
   border-radius: 40px;
   padding: 2rem;
 }
-.mainContainer .mainBorder {
+body .mainContainer .goodgarden-logo {
-  padding: 1rem 0;
+  position: absolute;
+  width: 10vw;
+  left: 50%;
+  top: 2.5rem;
+  transform: translateX(-50%);
+}
+body .mainContainer .informatie-kas-main-container {
+  display: grid;
+  grid-template-columns: 5fr 7fr;
+}
+body .mainContainer .mainBorder {
+  padding: 1.25rem 1.5rem;
   height: 35rem;
   border: solid 5px rgb(171, 211, 174);
   border-radius: 40px;
 }
-.mainContainer .mainBorder .content {
+body .mainContainer .mainBorder .pagina-titel {
+  font-size: 2rem;
+  margin-left: 1.5rem;
+}
+body .mainContainer .mainBorder #sectie-1 {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 0 2.5rem 0 1rem;
+  position: relative;
+}
+body .mainContainer .mainBorder #sectie-1 .parent-algemeen-overzicht {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+  border-radius: 40px;
+  padding: 1rem;
+  margin-top: 1rem;
+}
+body .mainContainer .mainBorder #sectie-1 .parent-algemeen-overzicht .algemeen-overzicht {
+  border: solid 2px rgb(171, 211, 174);
+  border-radius: 35px;
+  font-size: 1.25rem;
+  padding: 0.5rem 1rem;
+}
+body .mainContainer .mainBorder #sectie-1 .parent-algemeen-overzicht .algemeen-overzicht .table-informatie-kas {
+  width: 100%;
+}
+body .mainContainer .mainBorder #sectie-1 .parent-algemeen-overzicht .algemeen-overzicht .table-informatie-kas .tr-informatie-kas {
+  display: flex;
+  justify-content: space-between;
+  text-align: left;
+}
+body .mainContainer .mainBorder #sectie-1 .grafiek {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+  border-radius: 40px;
+  padding: 1rem;
+  position: relative;
+}
+body .mainContainer .mainBorder #sectie-1 .grafiek .grafiek-innerbox {
+  border: solid 2px rgb(171, 211, 174);
+  border-radius: 35px;
+  font-size: 1.25rem;
+  padding: 0 1rem 2.5rem;
+  height: 225px;
+}
+body .mainContainer .mainBorder #sectie-1 .grafiek .grafiek-innerbox h2 {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+body .mainContainer .mainBorder #sectie-1 .grafiek .grafiek-innerbox canvas {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+body .mainContainer .mainBorder #sectie-1 .content {
   display: grid;
   grid-template-columns: 3fr 1fr 3fr;
   height: 100%;
 }
-.mainContainer .mainBorder .content .kant-links {
+body .mainContainer .mainBorder #sectie-1 .content .kant-links {
   grid-column: 1;
 }
-.mainContainer .mainBorder .content .kant-links #planten {
+body .mainContainer .mainBorder #sectie-1 .content .kant-links #planten {
   width: 100%;
   border-collapse: collapse;
 }
-.mainContainer .mainBorder .content .kant-links #planten td article {
+body .mainContainer .mainBorder #sectie-1 .content .kant-links #planten td article {
   height: 7rem;
   width: 10rem;
   padding: 0.6rem;
@@ -48,35 +126,76 @@ body {
   border-radius: 40px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
-.mainContainer .mainBorder .content .kant-links #planten td article #toevoegen {
+body .mainContainer .mainBorder #sectie-1 .content .kant-links #planten td article #toevoegen {
   height: 5rem;
   width: 5rem;
 }
-.mainContainer .mainBorder .content .kant-links #planten td article h2 {
+body .mainContainer .mainBorder #sectie-1 .content .kant-links #planten td article h2 {
   color: gray;
 }
-.mainContainer .mainBorder .content .kant-links #planten td article:hover {
+body .mainContainer .mainBorder #sectie-1 .content .kant-links #planten td article:hover {
   background-color: lightgray;
 }
-.mainContainer .mainBorder .content .kant-rechts {
+body .mainContainer .mainBorder #sectie-1 .content .kant-rechts {
   grid-column: 3;
-  margin-right: 2rem;
 }
-.mainContainer .mainBorder .content .kant-rechts #metingen {
+body .mainContainer .mainBorder #sectie-1 .content .kant-rechts #metingen {
   border: solid 3px rgb(171, 211, 174);
   border-radius: 40px;
 }
-.mainContainer .mainBorder .content .kant-rechts #metingen #main-waardes {
+body .mainContainer .mainBorder #sectie-1 .content .kant-rechts #metingen #main-waardes {
   display: flex;
   justify-content: space-evenly;
   padding: 0.5rem;
   padding-bottom: 0;
   width: 100%;
 }
-.mainContainer .mainBorder .content .kant-rechts #metingen #main-waardes table {
+body .mainContainer .mainBorder #sectie-1 .content .kant-rechts #metingen #main-waardes table {
   display: flex;
   justify-content: space-around;
 }
+body .mainContainer .mainBorder .grid-column-2 {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+  border-radius: 40px;
+  padding: 1rem;
+  margin: 3.25rem 1rem 1.25rem 1rem;
+}
+body .mainContainer .mainBorder .grid-column-2 .grid-2-child {
+  border: solid 2px rgb(171, 211, 174);
+  border-radius: 35px;
+  height: 100%;
+}
+body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table {
+  padding: 1.5rem 2rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  height: 90%;
+}
+body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table table tr td {
+  font-size: 1.05rem;
+}
+body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-table-1 tr td {
+  font-size: 1.25rem;
+}
+body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-table-2 {
+  position: relative;
+}
+body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-table-2::after, body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-table-2::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 1px;
+  width: 90%;
+  background: black;
+}
+body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-table-2::after {
+  bottom: -20px;
+}
+body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-table-2::before {
+  top: -20px;
+}
 
 /* Divider */
 .divider {
@@ -97,7 +216,7 @@ body {
   top: 50%;
   transform: translate(-50%, -50%);
   background: white;
-  padding: 20px;
+  padding: 1.25rem;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   width: 30vw;
   height: auto;
@@ -107,7 +226,7 @@ body {
 .modal .close {
   color: #aaa;
   float: right;
-  font-size: 28px;
+  font-size: 1.75rem;
   font-weight: bold;
 }
 .modal .close:hover, .modal .close:active {

src/css/style.css.map

@@ -1 +1 @@
-{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA,iBAAA;AAKQ,mFAAA;AACA,2GAAA;AAMR,iCAAA;AACA;EAEI,kDAAA;EACA,4BAAA;EACA,sBAAA;EACA,iCARQ;ACDZ;;ADYA;EAEI,YAAA;EACA,aAAA;EACA,2CAAA;EACA,mBAAA;EACA,aAAA;ACVJ;ADYI;EAEI,eAAA;EACA,aAAA;EACA,oCAAA;EACA,mBAAA;ACXR;ADaQ;EAEI,aAAA;EACA,kCAAA;EACA,YAAA;ACZZ;ADgBgB;EAEI,cAAA;ACfpB;ADiBoB;EAEI,WAAA;EACA,yBAAA;AChBxB;ADoB4B;EAEI,YAAA;EACA,YAAA;EACA,eAAA;EACA,cAAA;EACA,iBAAA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;EACA,oCAAA;EACA,mBAAA;EACA,wCAAA;ACnBhC;ADqBgC;EAEI,YAAA;EACA,WAAA;ACpBpC;ADuBgC;EAEI,WAAA;ACtBpC;ADyBgC;EAEI,2BAAA;ACxBpC;ADgCgB;EAEI,cAAA;EACA,kBAAA;AC/BpB;ADiCoB;EAGI,oCAAA;EACA,mBAAA;ACjCxB;ADmCwB;EAEA,aAAA;EACA,6BAAA;EACA,eAAA;EACA,iBAAA;EACA,WAAA;AClCxB;ADoC4B;EAEI,aAAA;EACA,6BAAA;ACnChC;;AD8CA,YAAA;AACA;EACI,aAAA;EACA,uBAAA;EACA,oCAAA;EACA,kBAAA;EACA,UAAA;EACA,cAAA;AC3CJ;;AD8CA,2BAAA;AAEA;EAEI,aAAA;EACA,eAAA;EACA,YAAA;EACA,SAAA;EACA,QAAA;EACA,gCAAA;EACA,iBAAA;EACA,aAAA;EACA,wCAAA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;EACA,mBAAA;AC7CJ;AD+CI;EAEI,WAAA;EACA,YAAA;EACA,eAAA;EACA,iBAAA;AC9CR;ADgDQ;EAGI,YAAA;EACA,qBAAA;EACA,eAAA;AChDZ","file":"style.css"}
+{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"}

src/css/style.scss

@@ -7,33 +7,170 @@ $secondary-color: rgb(143, 188, 143);
 @import url('https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap');
 
 $font-titels: "Akaya Kanadaka", system-ui;
-;
+
 $font-text: "Afacad", sans-serif;
 
-/* The Main container and border*/
+@mixin flexbox
+{
+    display: flex;
+    justify-content: space-around;
+}
+
+@mixin groene-border
+{
+    border: solid 2px $primary-color;
+}
+
+@mixin box-shadow
+{
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+}
+
+@mixin border-radius
+{
+    border-radius: 40px;
+}
+
+@mixin inner-border-radius
+{
+    border-radius: 35px;
+}
+
+h1, h2, h3, h4, h5
+{
+    font-family: $font-titels;
+    margin: 0;
+}
+
+p, td
+{
+    font-family: $font-text;
+}
+
 body
 {
     background-image: url("../images/achtergrond.png");
     background-repeat: no-repeat;
     background-size: cover;
-    font-family: $font-text;
+    background-position: center;
-}
+    // font-family: $font-text;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0; 
 
-.mainContainer 
+    .mainContainer 
-{
+    {
-    margin: 2rem;
+        width: 85vw;
-    height: 37rem;
+        height: 38rem;
         background-color: rgb(255, 255, 255, 95%);
         border-radius: 40px;
         padding: 2rem;
 
+        .goodgarden-logo
+        {
+            // z-index: inherit;
+            position: absolute;
+            width: 10vw;
+            left: 50%;
+            top: 2.5rem;
+            transform: translateX(-50%);
+        }
+
+        .informatie-kas-main-container
+        {
+            display: grid;
+            grid-template-columns: 5fr 7fr;
+        }
+
         .mainBorder 
         {
-        padding: 1rem 0;
+            padding: 1.25rem 1.5rem;
             height: 35rem;
             border: solid 5px $primary-color;
             border-radius: 40px;
 
+            .pagina-titel
+            {
+                font-size: 2rem;
+                margin-left: 1.5rem;
+            }
+
+            #sectie-1
+            {
+                display: flex;
+                flex-direction: column;
+                gap: 1rem;
+                padding: 0 2.5rem 0 1rem;
+                position: relative;
+
+                .parent-algemeen-overzicht
+                {
+                    @include box-shadow;
+                    @include border-radius;
+                    padding: 1rem;
+                    margin-top: 1rem;
+
+
+                    .algemeen-overzicht
+                    {
+                        @include groene-border;
+                        @include inner-border-radius;
+                        font-size: 1.25rem;
+                        padding: .5rem 1rem;
+                        // background-color: red;
+
+                        .table-informatie-kas
+                        {
+                            width: 100%;
+
+                            .tr-informatie-kas
+                            {
+                                display: flex;
+                                justify-content: space-between;
+                                text-align: left;
+                            }
+
+
+                        }
+                    }   
+                }
+
+                .grafiek
+                {
+                    @include box-shadow;
+                    @include border-radius;
+                    padding: 1rem;
+                    position: relative;
+
+                    .grafiek-innerbox
+                    {
+                        @include groene-border;
+                        @include inner-border-radius;
+                        font-size: 1.25rem;
+                        padding: 0 1rem 2.5rem;
+                        height: 225px;
+                        // position: relative;
+
+                        h2
+                        {
+                            position: absolute;
+                            left: 50%;
+                            transform: translateX(-50%);
+                        }
+
+                        canvas
+                        {
+                            // Zorgt ervoor dat de grafiek precies in eht midden komt
+                            position: absolute;
+                            top: 50%;
+                            left: 50%;
+                            transform: translate(-50%, -50%);
+                        }
+                    }
+                }
+
                 .content
                 {
                     display: grid;
@@ -89,10 +226,11 @@ body
                                 }
                             }
                         }
+
                         &-rechts
                         {
                             grid-column: 3;
-                    margin-right: 2rem;
+                            // margin-right: 2rem;
 
                             #metingen
                             {
@@ -120,9 +258,89 @@ body
                     }
                 }
             }
+
+            .grid-column-2
+            {
+                @include box-shadow;
+                @include border-radius;
+                padding: 1rem;
+                margin: 3.25rem 1rem 1.25rem 1rem;
+
+                .grid-2-child
+                {
+                    @include groene-border;
+                    @include inner-border-radius;
+                    height: 100%;
+                    
+
+                    .parent-table
+                    {
+                        padding: 1.5rem 2rem;
+                        display: flex;
+                        flex-direction: column;
+                        // align-items: stretch;
+                        // gap: 2.5rem;
+                        justify-content: space-around;
+                        height: 90%;
+
+                        table
+                        {
+                            tr
+                            {
+                                td
+                                {
+                                    font-size: 1.05rem;
+                                }
+                            }
+                        }
+
+                        .kas-table-1
+                        {
+                            tr
+                            {
+                                td
+                                {
+                                    font-size: 1.25rem;
+                                }
+                            }
+                        }
+
+                        .kas-table-2
+                        {
+                            position: relative;
+
+                            &::after,
+                            &::before
+                            {
+                                content: "";
+                                position: absolute;
+                                left: 0;
+                                right: 0;
+                                height: 1px;
+                                width: 90%;
+                                background: black;
+                            }
+
+                            &::after
+                            {
+                                bottom: -20px;
+                            }
+
+                            &::before
+                            {
+                                top: -20px;
+                            }
+                        }
+
+                    }
+                }
+            }
+
+        }
+    }   
 }
 
-/* Divider */
+    /* Divider */
 .divider {
     display: flex;
     justify-content: center;
@@ -143,7 +361,7 @@ body
     top: 50%;
     transform: translate(-50%, -50%);
     background: white;
-    padding: 20px;
+    padding: 1.25rem;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     width: 30vw;
     height: auto;
@@ -154,7 +372,7 @@ body
     {
         color: #aaa;
         float: right;
-        font-size: 28px;
+        font-size: 1.75rem;
         font-weight: bold;
 
         &:hover,

src/index.html

@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <link rel="stylesheet" href="./css/style.css">
-    <script src="../script/main.js"></script>
+    <script src="../script/main.js" defer></script>
-    <script src="../script/main.py" defer></script>
+    <!-- <script src="../script/main.py"></script> -->
 </head>
 <body>
     <section class="mainContainer">
@@ -16,10 +16,12 @@
                     <table id="planten">
                         <tr>
                             <td>
+                                <a href="../src/kas_informatie.html">
                                 <article class="article-1">
                                     <img src="images/Icon awesome-apple-alt.png" alt="">
                                     <h2>Tomaat</h2>
                                 </article>
+                            </a>
                             </td>
                             <td>
                                 <article>

src/js/main.js

@@ -0,0 +1,124 @@
+const { ipcRenderer } = require("electron");
+
+document.addEventListener('DOMContentLoaded', () => 
+{
+    // Stuur een bericht naar de main process om het Python script uit te voeren
+// In je renderer.js (geladen met defer in je HTML)
+    ipcRenderer.send('request-update-temp', ['some', 'arguments']);
+
+    ipcRenderer.on('update-temp-result', (event, newTemperature) => {
+        if (newTemperature === 'error') {
+            console.error('Er is een fout opgetreden bij het ophalen van de nieuwe temperatuur');
+        } else {
+            document.getElementById('bodem-temperatuur').textContent = newTemperature;
+        }
+    });
+
+});
+
+// function dataTablePython()
+// {
+//     document.getElementById("")
+// }
+
+function openModal()
+{
+    const modal = document.getElementById("myModal");
+    const button = document.getElementById("modalButton");
+    const close = document.getElementsByClassName("close")[0];
+
+    // Toon de modal wanneer op de knop wordt geklikt
+    button.onclick = function()
+    {
+        modal.style.display = "block";
+    }
+
+    // Sluit de modal wanneer op het 'sluiten' icoon wordt geklikt
+    close.onclick = function() 
+    {
+        modal.style.display = "none";
+    }
+
+    // Sluit de modal wanneer buiten de modal wordt geklikt
+    window.onclick = function(event) 
+    {
+        if (event.target == modal) 
+        {
+            modal.style.display = "none";
+        }
+    }
+}
+
+/**
+ * --- Functie om de grafiek te tekenen. Enigste belangrijke is de eerste 2 "const" arrays "data" & "xLabels".
+ */
+function drawLineChart()
+{
+    /*Dit is de data die getoond wordt als "punt" op de grafiek. 20 = y20 / x20, 50 = y50 / x50 enzovoort... De array "data" & "xLabels" moeten beide evenveel array items hebben!!*/
+    const data = [20, 50, 60, 45, 50, 100, 70, 60, 65, 0, 85, 0];
+    const xLabels = ["", "", "", "", "", 6, "", "", "", "", "", 12];
+    
+    // Define Y-axis labels here. The number of labels should match your scale.
+    const yLabels = ["", 20, "", 40, "", 60, "", 80, "", 100]; /*NIET VERANDEREN!!!*/
+
+    const canvas = document.getElementById("myCanvas");
+    const ctx = canvas.getContext("2d");
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
+
+    const padding = 35; // Increased padding for Y labels
+    const graphWidth = canvas.width - padding * 2;
+    const graphHeight = canvas.height - padding * 2;
+
+    // Draw the axes
+    ctx.beginPath();
+    ctx.moveTo(padding, padding);
+    ctx.lineTo(padding, canvas.height - padding);
+    ctx.lineTo(canvas.width - padding, canvas.height - padding);
+    ctx.stroke();
+
+    // Set the color of the line
+    ctx.strokeStyle = "#008000"; // This sets the line color to green
+
+    const xIncrement = graphWidth / (xLabels.length - 1);
+    const yIncrement = graphHeight / (yLabels.length - 1); // Assuming you have labels for each increment
+
+    // Plot the 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(); // Apply the stroke to the line
+
+    // Draw Y labels
+    ctx.fillStyle = "black";
+    ctx.textAlign = "right"; // Align text to the right
+    ctx.textBaseline = "middle"; // Center vertically
+
+    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);
+        }
+    }
+
+    // Draw X labels
+    ctx.textAlign = "center"; // Center horizontally for 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);
+        }
+    }
+}
+
+drawLineChart();

src/kas_informatie.html

@@ -1,25 +1,111 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
+  <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="../src/css/style.css" />
+    <!-- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> -->
+    <script src="../src/js/main.js" defer></script>
     <title>Informatie Kas</title>
-</head>
+  </head>
-<body>
+  <body>
-    <section>
+    <section class="mainContainer">
       <article>
+        <img src="../src/images/logo.png" class="goodgarden-logo">
+      </article>
+      <section class="mainBorder informatie-kas-main-container">
         <article>
-                
+          <h1 class="pagina-titel">Informatie Kas</h1>
+          <section id="sectie-1">
+            <article class="parent-algemeen-overzicht">
+              <article class="algemeen-overzicht">
+                <table class="table-informatie-kas">
+                  <tr class="tr-informatie-kas">
+                    <td>Dagen tot Oogst</td>
+                    <td>12</td>
+                  </tr>
+                  <tr class="tr-informatie-kas">
+                    <td>Dagen in Kas</td>
+                    <td>2</td>
+                  </tr>
+                  <tr class="tr-informatie-kas">
+                    <td>Tevredenheid</td>
+                    <td>80%</td>
+                  </tr>
+                  <tr class="tr-informatie-kas">
+                    <td>Aandachtspunten</td>
+                    <td>1</td>
+                  </tr>
+                </table>
               </article>
             </article>
-        <article>
+            <article class="grafiek">
-            <article>
+              <article class="grafiek-innerbox">
-
+                <h2>Zonlicht</h2>
+                <canvas
+                  id="myCanvas" class="canvas-informatie-kas" width="275" height="275"></canvas>
               </article>
             </article>
           </section>
-    <section>
+          <!-- <section id="sectie-2"></section> -->
-        
+        </article>
+        <article class="grid-column-2">
+          <article class="grid-2-child">
+            <section class="parent-table">
+              <table class="kas-table-1">
+                  <tr>
+                    <td>Aantal geplant:</td>
+                    <td>2</td>
+                  </tr>
+                  <tr>
+                    <td>Succesvolle Oogst:</td>
+                    <td>2</td>
+                  </tr>
+                  <tr>
+                    <td>Gefaalde Oogst:</td>
+                    <td>2</td>
+                  </tr>
+              </table>
+              <table class="kas-table-2">
+                  <tr>
+                    <td>Warmste Maand:</td>
+                    <td>n.v.t.</td>
+                  </tr>
+                  <tr>
+                    <td>koudste Maand:</td>
+                    <td>December</td>
+                  </tr>
+                  <tr>
+                    <td>Gemiddelde Bodemtemp.:</td>
+                    <td id="bodem-temperatuur">2˚C</td>
+                  </tr>
+                  <tr>
+                    <td>Gemiddelde Uren Zonlicht:</td>
+                    <td>2u</td>
+                  </tr>
+              </table>
+              <table class="kas-table-3">
+                  <tr>
+                    <td>Laatste Irrigatie:</td>
+                    <td>2u</td>
+                  </tr>
+                  <tr>
+                    <td>Aankomende Irrigatie:</td>
+                    <td>2u</td>
+                  </tr>
+                  <tr>
+                    <td>Laatste Bemesting</td>
+                    <td>2d</td>
+                  </tr>
+                  <tr>
+                    <td>Aankomende Bemesting:</td>
+                    <td>2w</td>
+                  </tr>
+              </table>
             </section>
-</body>
+          </article>
+        </article>
+      </section>
+    </section>
+  </body>
 </html>

src/py/calculate.py

@@ -0,0 +1,7 @@
+# In calculate.py
+
+# Doe je berekeningen hier, vervang 42 door je berekende waarde
+calculated_value = 42
+
+# Print het resultaat, dat zal worden gelezen door de PythonShell.run callback
+print(calculated_value)