pythonwebsitewerkt

.gitignore

@@ -1 +1,4 @@
-node_modules/
+node_modules/
+__pycache__/
+venv/
+.vscode/

.hintrc

@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "axe/text-alternatives": "off"
+  }
+}

app.js

@@ -61,7 +61,7 @@ function createWindow() {
     }
   });
 
-  mainWindow.loadURL(urlElectron);
+  mainWindow.loadFile(path.join(__dirname, 'src', 'py', 'templates', 'index.html'));
 
   /*Is om het Python script te kunnen gebruiken*/
   ipcMain.on('run-python-script', (event, args) => {

app.py

@@ -0,0 +1,56 @@
+from flask import Flask, render_template, jsonify
+import requests
+import mysql.connector  # Import MySQL connector
+
+app = Flask(__name__, template_folder='src/py/templates', static_folder='src/py/static')
+
+# Function to get data from the API
+def get_api_data():
+    api_url = "https://garden.inajar.nl/api/battery_voltage_events/?format=json"
+    access_token = "33bb3b42452306c58ecedc3c86cfae28ba22329c"  # Replace this with your actual access token
+
+    headers = {"Authorization": f"Token {access_token}"}
+    response = requests.get(api_url, headers=headers)
+
+    if response.ok:
+        return response.json().get('results', [])
+    else:
+        print(f"Error fetching data from the API. Status code: {response.status_code}")
+        return []
+
+# Function to get data from the MySQL database
+def get_database_data():
+    connection = mysql.connector.connect(
+        host='localhost',
+        user='root',
+        password='',
+        database='goodgarden'  # Specify the correct database name here
+    )
+    cursor = connection.cursor()
+
+    # Query to retrieve the latest battery voltage data
+    query = "SELECT timestamp, gateway_receive_time, device, value FROM battery_voltage_events ORDER BY timestamp DESC LIMIT 1"
+    cursor.execute(query)
+    battery_data = cursor.fetchone()
+
+    connection.close()
+
+    return battery_data
+
+@app.route('/')
+def index():
+    # Get data from the API
+    api_data = get_api_data()
+    print("API Data:", api_data)  # Add this line for debugging
+
+    # Get data from the database
+    battery_data = get_database_data()
+    print("Battery Data:", battery_data)  # Add this line for debugging
+
+    # Pass data to the HTML template
+    return render_template('kas_informatie.html', api_data=api_data, battery_data=battery_data)
+
+
+
+if __name__ == "__main__":
+    app.run(debug=True)

src/DUMMY.json

@@ -1,123 +0,0 @@
-    
-    // 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
-      }
-    ]
-  }
-  

src/py/script/DUMMY.json

@@ -1,14 +1,10 @@
-    
+{    "battery_voltage_events": [
-    // 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,
@@ -44,7 +40,6 @@
 
     
 
-    // Fotosyntese??? (zonlicht)
     "par_events": [
       {
         "timestamp": 1707844638,
@@ -63,7 +58,6 @@
 
 
     
-    // Luchtvochtigheid
     "relative_humidity_events": [
       {
         "timestamp": 1707844638,
@@ -83,7 +77,6 @@
 
     
 
-    // 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,
@@ -97,20 +90,17 @@
 
 
     
-    // 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,

src/py/script/app.py

@@ -1,33 +0,0 @@
-from flask import Flask, render_template, jsonify
-import requests
-
-app = Flask(__name__)
-
-# Functie om gegevens van de API op te halen
-def get_api_data():
-    api_url = "https://garden.inajar.nl/api/battery_voltage_events/?format=json"
-    access_token = "33bb3b42452306c58ecedc3c86cfae28ba22329c"  # Vervang dit met je echte toegangstoken
-
-    headers = {"Authorization": f"Token {access_token}"}
-    response = requests.get(api_url, headers=headers)
-
-    if response.ok:
-        return response.json().get('results', [])
-    else:
-        print(f"Fout bij het ophalen van gegevens van de API. Statuscode: {response.status_code}")
-        return []
-
-@app.route('/')
-def index():
-    return render_template('kas_informatie.html')
-
-@app.route('/battery_voltage_events')
-def battery_voltage_events():
-    # Haal gegevens op van de API
-    api_data = get_api_data()
-
-    # Return de gegevens als JSON naar de frontend
-    return jsonify(results=api_data)
-
-if __name__ == "__main__":
-    app.run(debug=True)

src/py/script/battery_voltage_events.py

@@ -181,7 +181,7 @@ import mysql.connector
 import requests
 from datetime import datetime, timezone, timedelta
 import time
-import GoodGarden.src.py.servermqtt as servermqtt
+from py.script.servermqtt import servermqtt
 
 # Function to make a connection to the database
 def database_connect():

src/py/script/fetch.py

@@ -1,73 +0,0 @@
-import requests
-import time
-
-from db_connect import database_connect
-
-# Establish a database connection
-connection = database_connect()
-
-def fetch_and_display_all(urls, access_token):
-    for url in urls:
-        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)
-            load_data(data)
-
-        except requests.exceptions.RequestException as e:
-            print(f"Error fetching data from {url}: {e}")
-
-        # Wait for a certain time (e.g., 60 seconds) before making the next call
-        print("Waiting for the next retrieval action...")
-        time.sleep(10)  # Time here is in seconds.
-
-def load_data(data):
-    mydb = database_connect()
-    if mydb.is_connected():
-        mycursor = mydb.cursor()
-
-        # Here you need to adjust the correct column names and data formats based on the API response
-        insert_query = """
-        INSERT INTO goodgarden.fetch (timestamp, gateway_receive_time, device, value)
-        VALUES (%s, %s, %s, %s)
-        """
-        for record in data['results']:  # Adjust this based on the actual structure of the 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}")  # Print the data being inserted
-
-            # Execute the query
-            mycursor.execute(insert_query, (timestamp, gateway_receive_time, device, value))
-
-        # Commit the changes
-        mydb.commit()
-
-        # Close cursor and connection
-        mycursor.close()
-        mydb.close()
-
-        print("Data inserted into the database.")
-
-if __name__ == "__main__":
-    urls = [
-        "https://garden.inajar.nl/api/battery_voltage_events/?format=json",
-        "https://garden.inajar.nl/api/devices/?format=json",
-        "https://garden.inajar.nl/api/par_events/?format=json",
-        "https://garden.inajar.nl/api/relative_humidity_events/?format=json",
-        "https://garden.inajar.nl/api/soil_electric_conductivity_events/?format=json",
-        "https://garden.inajar.nl/api/soil_relative_permittivity_events/?format=json",
-        "https://garden.inajar.nl/api/soil_temperature_events/?format=json"
-    ]
-    
-    access_token = "33bb3b42452306c58ecedc3c86cfae28ba22329c"  # Vervang dit met jouw echte toegangstoken
-    
-    fetch_and_display_all(urls, access_token)

src/py/script/fetch_data.py

@@ -1,57 +0,0 @@
-import requests
-import time
-
-from db_connect import database_connect
-
-def fetch_battery_voltage_events():
-    url = "https://garden.inajar.nl/api/battery_voltage_events/?format=json"
-    headers = {
-        "Authorization": "Token 33bb3b42452306c58ecedc3c86cfae28ba22329c"
-    }
-
-    while True:
-        try:
-            response = requests.get(url, headers=headers)
-            response.raise_for_status()
-
-            data = response.json()
-            load_data(data)
-
-            print("Wachten voor de volgende ophaalactie...")
-            time.sleep(300)  # De tijd hier is in seconden.
-
-        except requests.exceptions.RequestException as e:
-            print(f"Error fetching data: {e}")
-            # Wacht ook hier bij een fout, om niet in een snelle foutloop te komen
-            time.sleep(300)
-
-def load_data(data):
-    mydb = database_connect()
-    if mydb.is_connected():
-        mycursor = mydb.cursor()
-
-        # Hier moet je de juiste kolomnamen en dataformaten 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)
-        """
-        for record in data['results']:
-            timestamp = record['timestamp']
-            gateway_receive_time = record['gateway_receive_time']
-            device = record['device']
-            value = record['value']
-
-        # print(f"Inserting data: timestamp={timestamp}, gateway_receive_time={gateway_receive_time}, device={device}, value={value}")
-        mycursor.execute(insert_query, (timestamp, gateway_receive_time, device, value))
-
-        # Commit de wijzigingen
-        mydb.commit()
-
-        # Sluit cursor en verbinding
-        mycursor.close()
-        mydb.close()
-
-        print("Data ingevoegd in de database.")
-
-if __name__ == "__main__":
-    fetch_battery_voltage_events()

src/py/script/goodgarden.sql

@@ -7,6 +7,11 @@
 -- Serverversie: 10.4.28-MariaDB
 -- PHP-versie: 8.2.4
 
+DROP DATABASE IF EXISTS goodgarden;
+CREATE DATABASE goodgarden;
+
+USE goodgarden; 
+
 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
 START TRANSACTION;
 SET time_zone = "+00:00";

src/py/static/css/style.css

@@ -100,19 +100,19 @@ body .mainContainer .mainBorder #sectie-1 .grafiek .grafiek-innerbox canvas {
   left: 50%;
   transform: translate(-50%, -50%);
 }
-body .mainContainer .mainBorder #sectie-1 .content {
+body .mainContainer .mainBorder .content {
   display: grid;
   grid-template-columns: 3fr 1fr 3fr;
   height: 100%;
 }
-body .mainContainer .mainBorder #sectie-1 .content .kant-links {
+body .mainContainer .mainBorder .content .kant-links {
   grid-column: 1;
 }
-body .mainContainer .mainBorder #sectie-1 .content .kant-links #planten {
+body .mainContainer .mainBorder .content .kant-links #planten {
   width: 100%;
   border-collapse: collapse;
 }
-body .mainContainer .mainBorder #sectie-1 .content .kant-links #planten td article {
+body .mainContainer .mainBorder .content .kant-links #planten td article {
   height: 7rem;
   width: 10rem;
   padding: 0.6rem;
@@ -126,31 +126,31 @@ body .mainContainer .mainBorder #sectie-1 .content .kant-links #planten td artic
   border-radius: 40px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
-body .mainContainer .mainBorder #sectie-1 .content .kant-links #planten td article #toevoegen {
+body .mainContainer .mainBorder .content .kant-links #planten td article #toevoegen {
   height: 5rem;
   width: 5rem;
 }
-body .mainContainer .mainBorder #sectie-1 .content .kant-links #planten td article h2 {
+body .mainContainer .mainBorder .content .kant-links #planten td article h2 {
   color: gray;
 }
-body .mainContainer .mainBorder #sectie-1 .content .kant-links #planten td article:hover {
+body .mainContainer .mainBorder .content .kant-links #planten td article:hover {
   background-color: lightgray;
 }
-body .mainContainer .mainBorder #sectie-1 .content .kant-rechts {
+body .mainContainer .mainBorder .content .kant-rechts {
   grid-column: 3;
 }
-body .mainContainer .mainBorder #sectie-1 .content .kant-rechts #metingen {
+body .mainContainer .mainBorder .content .kant-rechts #metingen {
   border: solid 3px rgb(171, 211, 174);
   border-radius: 40px;
 }
-body .mainContainer .mainBorder #sectie-1 .content .kant-rechts #metingen #main-waardes {
+body .mainContainer .mainBorder .content .kant-rechts #metingen #main-waardes {
   display: flex;
   justify-content: space-evenly;
   padding: 0.5rem;
   padding-bottom: 0;
   width: 100%;
 }
-body .mainContainer .mainBorder #sectie-1 .content .kant-rechts #metingen #main-waardes table {
+body .mainContainer .mainBorder .content .kant-rechts #metingen #main-waardes table {
   display: flex;
   justify-content: space-around;
 }

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

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

src/py/static/css/style.scss

@@ -170,88 +170,88 @@ body
                         }
                     }
                 }
+            }
+            
+            .content
+            {
+                display: grid;
+                grid-template-columns: 3fr 1fr 3fr;
+                height: 100%;
 
-                .content
+                .kant
                 {
-                    display: grid;
+                    &-links
-                    grid-template-columns: 3fr 1fr 3fr;
-                    height: 100%;
-
-                    .kant
                     {
-                        &-links
+                        grid-column: 1;
+
+                        #planten 
                         {
-                            grid-column: 1;
+                            width: 100%;
+                            border-collapse: collapse;
 
-                            #planten 
+                            td 
                             {
-                                width: 100%;
+                                article
-                                border-collapse: collapse;
-
-                                td 
                                 {
-                                    article
+                                    height: 7rem;
+                                    width: 10rem;
+                                    padding: .6rem;
+                                    margin: .1rem;
+                                    margin-left: 2rem;
+                                    display: flex;
+                                    flex-direction: column;
+                                    justify-content: center;
+                                    align-items: center;
+                                    border: solid 3px $primary-color;
+                                    border-radius: 40px;
+                                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+
+                                    #toevoegen
                                     {
-                                        height: 7rem;
+                                        height: 5rem;
-                                        width: 10rem;
+                                        width: 5rem;
-                                        padding: .6rem;
-                                        margin: .1rem;
-                                        margin-left: 2rem;
-                                        display: flex;
-                                        flex-direction: column;
-                                        justify-content: center;
-                                        align-items: center;
-                                        border: solid 3px $primary-color;
-                                        border-radius: 40px;
-                                        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-
-                                        #toevoegen
-                                        {
-                                            height: 5rem;
-                                            width: 5rem;
-                                        }
-
-                                        h2 
-                                        {
-                                            color: gray;
-                                        }
-
-                                        &:hover
-                                        {
-                                            background-color: lightgray;
-                                        }
-
-
                                     }
+
+                                    h2 
+                                    {
+                                        color: gray;
+                                    }
+
+                                    &:hover
+                                    {
+                                        background-color: lightgray;
+                                    }
+
+
                                 }
                             }
                         }
+                    }
 
-                        &-rechts
+                    &-rechts
+                    {
+                        grid-column: 3;
+                        // margin-right: 2rem;
+
+                        #metingen
                         {
-                            grid-column: 3;
-                            // margin-right: 2rem;
 
-                            #metingen
+                            border: solid 3px $primary-color;
+                            border-radius: 40px;
+
+                            #main-waardes
                             {
+                            display: flex;
+                            justify-content: space-evenly;
+                            padding: .5rem;
+                            padding-bottom: 0;
+                            width: 100%;
 
-                                border: solid 3px $primary-color;
+                                table
-                                border-radius: 40px;
-
-                                #main-waardes
                                 {
-                                display: flex;
+                                    display: flex;
-                                justify-content: space-evenly;
+                                    justify-content: space-around;
-                                padding: .5rem;
+                                    // width: 100%;
-                                padding-bottom: 0;
-                                width: 100%;
-
-                                    table
-                                    {
-                                        display: flex;
-                                        justify-content: space-around;
-                                        // width: 100%;
-                                    }
                                 }
                             }
                         }

src/py/static/js/main.js

@@ -121,4 +121,22 @@ function drawLineChart()
     }
 }
 
+  
+document.addEventListener('DOMContentLoaded', function() {
+    var battery_data = {
+        device: "{{ battery_data[2] }}",
+        batteryVoltage: "{{ battery_data[3] }}",
+        time: "{{ battery_data[1] }}"
+    };
+
+    // Update HTML elements using dynamically generated IDs
+    document.getElementById('battery_data_device').innerText = battery_data.device;
+    document.getElementById('battery_data_voltage').innerText = battery_data.batteryVoltage;
+    document.getElementById('battery_data_time').innerText = battery_data.time;
+    // Add other updates as needed
+});
+
+
+    
+  
 drawLineChart();

src/py/static/style.css.map

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

src/py/templates/index.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
-    <link rel="stylesheet" href="./css/style.css">
+    <link rel="stylesheet" href="../static/css/style.css">
-    <script src="../script/main.js" defer></script>
+    <script src="../static/js/main.js" defer></script>
     <!-- <script src="../script/main.py"></script> -->
 </head>
 <body>
@@ -16,16 +16,16 @@
                     <table id="planten">
                         <tr>
                             <td>
-                                <a href="../src/kas_informatie.html">
+                                <a href="../templates/kas_informatie.html">
                                 <article class="article-1">
-                                    <img src="images/Icon awesome-apple-alt.png" alt="">
+                                    <img src="../static/images/Icon awesome-apple-alt.png"alt="">
                                     <h2>Tomaat</h2>
                                 </article>
                             </a>
                             </td>
                             <td>
                                 <article>
-                                    <img src="images/Icon awesome-apple-alt.png" alt="">
+                                    <img src="../static/images/Icon awesome-apple-alt.png" alt="">
                                     <h2>Tomaat</h2>
                                 </article>
                             </td>
@@ -34,13 +34,13 @@
                         <tr>
                             <td>
                                 <article>
-                                    <img src="images/Icon awesome-apple-alt.png" alt="">
+                                    <img src="../static/images/Icon awesome-apple-alt.png" alt="">
                                     <h2>Tomaat</h2>
                                 </article>
                             </td>
                             <td>
                                 <article>
-                                    <img src="images/Icon awesome-apple-alt.png" alt="">
+                                    <img src="../static/images/Icon awesome-apple-alt.png" alt="">
                                     <h2>Tomaat</h2>
                                 </article>
                             </td>
@@ -49,13 +49,13 @@
                         <tr>
                             <td>
                                 <article>
-                                    <img src="images/Icon awesome-apple-alt.png" alt="">
+                                    <img src="../static/images/Icon awesome-apple-alt.png" alt="">
                                     <h2>Tomaat</h2>
                                 </article>          
                         </td>
                             <td>
                                 <article>
-                                    <img src="images/Icon awesome-apple-alt.png" alt="">
+                                    <img src="../static/images/Icon awesome-apple-alt.png" alt="">
                                     <h2>Tomaat</h2>
                                 </article>
                             </td>
@@ -64,13 +64,13 @@
                         <tr>
                             <td>
                                 <article>
-                                    <img src="images/Icon awesome-apple-alt.png" alt="">
+                                    <img src="../static/images/Icon awesome-apple-alt.png" alt="">
                                     <h2>Tomaat</h2>
                                 </article>
                             </td>
                             <td>
                                 <article id="modalButton" onclick="openModal()">
-                                    <img id="toevoegen"src="images/Toevoegen.png" alt="">
+                                    <img id="toevoegen"src="../static/images/toevoegen.png" alt="">
                                 </article>
                             </td>
                         </tr>
@@ -85,7 +85,7 @@
                 </section>
                 <!-- White space -->
                 <section>
-                    <p>a</p>
+                    <p></p>
                 </section>
                 <section class="kant-rechts">
                     <section id="metingen">

src/py/templates/kas_informatie.html

@@ -3,15 +3,16 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="../src/css/style.css" />
+    <link rel="stylesheet" href="../static/css/style.css" />
     <!-- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> -->
-    <script src="../src/js/main.js" defer></script>
+    <script src="../static/js/main.js" defer></script>
     <title>Informatie Kas</title>
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='src/py/script/static/css/style.css') }}">
   </head>
   <body>
     <section class="mainContainer">
       <article>
-        <img src="../src/images/logo.png" class="goodgarden-logo">
+        <img src="../static/images/logo.png" class="goodgarden-logo">
       </article>
       <section class="mainBorder informatie-kas-main-container">
         <article>
@@ -21,20 +22,20 @@
               <article class="algemeen-overzicht">
                 <table class="table-informatie-kas">
                   <tr class="tr-informatie-kas">
-                    <td>Dagen tot Oogst</td>
+                    <td>Device </td>
-                    <td>12</td>
+                    <td id="battery_data_device"></td>
-                  </tr>
+                </tr> 
-                  <tr class="tr-informatie-kas">
+                <tr class="tr-informatie-kas">
-                    <td>Dagen in Kas</td>
+                    <td>Batterij Voltage</td>
-                    <td>2</td>
+                    <td id="battery_data_voltage"></td>
-                  </tr>
+                </tr>                
+                <tr class="tr-informatie-kas">
+                    <td>Tijden</td>
+                    <td id="battery_data_time"></td>
+                </tr>
                   <tr class="tr-informatie-kas">
                     <td>Tevredenheid</td>
-                    <td>80%</td>
+                    <td>-</td>
-                  </tr>
-                  <tr class="tr-informatie-kas">
-                    <td>Aandachtspunten</td>
-                    <td>1</td>
                   </tr>
                 </table>
               </article>