test

app.js

@@ -1,7 +1,7 @@
-const { app, BrowserWindow,ipcMain } = require('electron'); /* TYPE IN TERMINAL: "npm install electron" */
+const { app, BrowserWindow, ipcMain } = require('electron');
-const express = require('express');  /* TYPE IN TERMINAL: "npm install express" */
+const express = require('express');
-const bodyParser = require('body-parser');  /* TYPE IN TERMINAL: "npm install body-parser" */
+const bodyParser = require('body-parser');
-const { PythonShell } = require('python-shell');  /* TYPE IN TERMINAL: "npm install python-shell" */
+const { PythonShell } = require('python-shell');
 const path = require('path');
 const urlElectron = path.join(__dirname, "src/index.html");
 
@@ -16,31 +16,19 @@ 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 databas
+    args: [plant_naam, plantensoort, plant_geteelt] // Zet hier een variable bij om de data toe te voegen aan de database
   };
 
-/*Om python te gebruiken*/
+  // Voer Python script uit met de plant_naam als argument
-// ipcMain.on('request-update-temp', (event, args) => {
+  PythonShell.run('./script/db_connect_form.py', options, (err, results) => {
-//   let options = {
+    if (err) {
-//       mode: 'text',
+      console.error(err);
-//       scriptPath: 'path/to/your/python/script',
+      res.send('Er is een fout opgetreden');
-//       args: args
+    } else {
-//   };
+      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
@@ -62,27 +50,6 @@ 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/battery_voltage_events.py

@@ -181,6 +181,9 @@ import mysql.connector
 import requests
 from datetime import datetime, timezone, timedelta
 import time
+import os
+# import paho.mqtt.client as mqtt
+# from dotenv import load_dotenv
  
 # Functie om verbinding te maken met de database
 def database_connect():

src/css/style.css

@@ -1,4 +1,3 @@
-/*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");
 h1, h2, h3, h4, h5 {
@@ -15,6 +14,7 @@ body {
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
+  font-family: "Afacad", sans-serif;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -41,6 +41,7 @@ body .mainContainer .informatie-kas-main-container {
 }
 body .mainContainer .mainBorder {
   padding: 1.25rem 1.5rem;
+  padding: 1rem 0;
   height: 35rem;
   border: solid 5px rgb(171, 211, 174);
   border-radius: 40px;
@@ -56,6 +57,9 @@ body .mainContainer .mainBorder #sectie-1 {
   padding: 0 2.5rem 0 1rem;
   position: relative;
 }
+body .mainContainer .mainBorder #sectie-1 h1 {
+  background-color: green;
+}
 body .mainContainer .mainBorder #sectie-1 .parent-algemeen-overzicht {
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
   border-radius: 40px;
@@ -88,6 +92,7 @@ body .mainContainer .mainBorder #sectie-1 .grafiek .grafiek-innerbox {
   font-size: 1.25rem;
   padding: 0 1rem 2.5rem;
   height: 225px;
+  position: relative;
 }
 body .mainContainer .mainBorder #sectie-1 .grafiek .grafiek-innerbox h2 {
   position: absolute;
@@ -100,19 +105,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,33 +131,35 @@ 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;
+  margin-right: 2rem;
 }
-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;
+  justify-content: space-between;
   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;
+  justify-content: space-between;
+  width: 100%;
 }
 body .mainContainer .mainBorder .grid-column-2 {
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
@@ -172,12 +179,6 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table {
   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;
 }

src/css/style.css.map

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

src/css/style.scss

@@ -1,5 +1,3 @@
-/*default colors*/
-
 $primary-color:  rgb(171, 211, 174);
 $secondary-color: rgb(143, 188, 143);
 
@@ -53,7 +51,7 @@ body
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
-    // font-family: $font-text;
+    font-family: $font-text;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -70,7 +68,6 @@ body
 
         .goodgarden-logo
         {
-            // z-index: inherit;
             position: absolute;
             width: 10vw;
             left: 50%;
@@ -87,6 +84,7 @@ body
         .mainBorder 
         {
             padding: 1.25rem 1.5rem;
+            padding: 1rem 0;
             height: 35rem;
             border: solid 5px $primary-color;
             border-radius: 40px;
@@ -105,6 +103,11 @@ body
                 padding: 0 2.5rem 0 1rem;
                 position: relative;
 
+                h1
+                {
+                    background-color: green;
+                }
+
                 .parent-algemeen-overzicht
                 {
                     @include box-shadow;
@@ -119,7 +122,6 @@ body
                         @include inner-border-radius;
                         font-size: 1.25rem;
                         padding: .5rem 1rem;
-                        // background-color: red;
 
                         .table-informatie-kas
                         {
@@ -131,8 +133,6 @@ body
                                 justify-content: space-between;
                                 text-align: left;
                             }
-
-
                         }
                     }   
                 }
@@ -151,7 +151,7 @@ body
                         font-size: 1.25rem;
                         padding: 0 1rem 2.5rem;
                         height: 225px;
-                        // position: relative;
+                        position: relative;
 
                         h2
                         {
@@ -171,6 +171,7 @@ body
                     }
                 }
             
+            }
             .content
             {
                 display: grid;
@@ -230,7 +231,7 @@ body
                     &-rechts
                     {
                         grid-column: 3;
-                            // margin-right: 2rem;
+                        margin-right: 2rem;
 
                         #metingen
                         {
@@ -241,7 +242,7 @@ body
                             #main-waardes
                             {
                             display: flex;
-                                justify-content: space-evenly;
+                            justify-content: space-between;
                             padding: .5rem;
                             padding-bottom: 0;
                             width: 100%;
@@ -249,9 +250,8 @@ body
                                 table
                                 {
                                     display: flex;
-                                        justify-content: space-around;
+                                    justify-content: space-between;
-                                        // width: 100%;
+                                    width: 100%;
-                                    }
                                 }
                             }
                         }
@@ -289,7 +289,7 @@ body
                             {
                                 td
                                 {
-                                    font-size: 1.05rem;
+                                    // font-size: 1.05rem;
                                 }
                             }
                         }
@@ -300,7 +300,7 @@ body
                             {
                                 td
                                 {
-                                    font-size: 1.25rem;
+                                    // font-size: 1.25rem;
                                 }
                             }
                         }

src/index.html

@@ -4,12 +4,14 @@
     <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="../src/css/style.css">
-    <script src="../script/main.js" defer></script>
+    <script src="../src/js/main.js" defer></script>
-    <!-- <script src="../script/main.py"></script> -->
 </head>
 <body>
     <section class="mainContainer">
+        <article>
+            <img src="../src/images/logo.png" class="goodgarden-logo">
+          </article>
         <section class="mainBorder">
             <section class="content">
                 <section class="kant-links">
@@ -76,11 +78,24 @@
                         </tr>
                     </table>
                     <div id="myModal" class="modal">
-                        <!-- Modal content -->
                         <span class="close">&times;</span>
                         <form action="http://localhost:3000/submit-form" method="post">
-                            <!-- Form content -->
+                
+                            <input type="text" name="plant_naam" id="plantNaam">
+                            <label for="plantNaam">Naam van de plant</label>
+                
+                            <input type="text" name="plantensoort" id="plantensoort">
+                            <label for="plantensoort">Soort van de plant</label>
+                
+                            <input type="radio" name="plant_geteelt" id="aanwezig" value="true">
+                            <label for="aanwezig">Aanwezig</label>
+                
+                            <input type="radio" name="plant_geteelt" id="afwezig" value="false">
+                            <label for="afwezig">Afwezig</label>
+                
+                            <input type="submit" value="Submit">
                         </form>
+                
                     </div>
                 </section>
                 <!-- White space -->
@@ -88,26 +103,35 @@
                     <p>a</p>
                 </section>
                 <section class="kant-rechts">
-                    <section id="metingen">
+                    <section id="sectie-1">
-                        <article id="main-waardes">
+            <article class="parent-algemeen-overzicht">
-                            <table>
+              <article class="algemeen-overzicht">
-                                <tr>
+                <table class="table-informatie-kas">
-                                    <td>
+                  <tr class="tr-informatie-kas">
-                                        <p>Waardes</p>
+                    <td>Dagen tot Oogst</td>
-                                    </td>
+                    <td>12</td>
-                                    <td>
+                  </tr>
-                                        <p>Huidig</p>
+                  <tr class="tr-informatie-kas">
-                                    </td>
+                    <td>Dagen in Kas</td>
-                                    <td>
+                    <td>2</td>
-                                        <p>24u gemiddelde</p>
+                  </tr>
-                                    </td>
+                  <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>
-                        <div class="divider">
+            </article>
-                        </div>
+            <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>

src/js/main.js

@@ -2,8 +2,6 @@ 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) => {
@@ -16,11 +14,6 @@ document.addEventListener('DOMContentLoaded', () =>
 
 });
 
-// function dataTablePython()
-// {
-//     document.getElementById("")
-// }
-
 function openModal()
 {
     const modal = document.getElementById("myModal");
@@ -58,19 +51,17 @@ function drawLineChart()
     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
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
 
     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);
@@ -78,10 +69,10 @@ function drawLineChart()
     ctx.stroke();
 
     // Set the color of the line
-    ctx.strokeStyle = "#008000"; // This sets the line color to green
+    ctx.strokeStyle = "rgb(143, 188, 143)";
 
     const xIncrement = graphWidth / (xLabels.length - 1);
-    const yIncrement = graphHeight / (yLabels.length - 1); // Assuming you have labels for each increment
+    const yIncrement = graphHeight / (yLabels.length - 1);
 
     // Plot the data
     ctx.beginPath();
@@ -93,7 +84,7 @@ function drawLineChart()
         const yPos = canvas.height - padding - (data[i] / 100) * graphHeight;
         ctx.lineTo(xPos, yPos);
     }
-    ctx.stroke(); // Apply the stroke to the line
+    ctx.stroke();
 
     // Draw Y labels
     ctx.fillStyle = "black";

src/kas_informatie.html

@@ -4,7 +4,6 @@
     <meta charset="UTF-8" />
     <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>
@@ -47,7 +46,6 @@
               </article>
             </article>
           </section>
-          <!-- <section id="sectie-2"></section> -->
         </article>
         <article class="grid-column-2">
           <article class="grid-2-child">
@@ -81,7 +79,7 @@
                   </tr>
                   <tr>
                     <td>Gemiddelde Uren Zonlicht:</td>
-                    <td>2u</td>
+                    <td id="battery_voltage">2u</td>
                   </tr>
               </table>
               <table class="kas-table-3">