diff --git a/app.js b/app.js index 6f6adec..d856744 100644 --- a/app.js +++ b/app.js @@ -1,7 +1,7 @@ -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" */ +const { app, BrowserWindow, ipcMain } = require('electron'); +const express = require('express'); +const bodyParser = require('body-parser'); +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*/ -// ipcMain.on('request-update-temp', (event, args) => { -// let options = { -// mode: 'text', -// scriptPath: 'path/to/your/python/script', -// args: args -// }; - -// 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 */]); - + // Voer Python script uit met de plant_naam als argument + PythonShell.run('./script/db_connect_form.py', options, (err, results) => { + if (err) { + console.error(err); + res.send('Er is een fout opgetreden'); + } else { + console.log('Python script uitvoering resultaten:', results); + res.send('Formulier succesvol verwerkt'); + } + }); }); // 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); diff --git a/script/battery_voltage_events.py b/script/battery_voltage_events.py index ee63266..5c777fe 100644 --- a/script/battery_voltage_events.py +++ b/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(): diff --git a/src/css/style.css b/src/css/style.css index 8e26c88..1770397 100644 --- a/src/css/style.css +++ b/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; } diff --git a/src/css/style.css.map b/src/css/style.css.map index d300b9e..b11fddc 100644 --- a/src/css/style.css.map +++ b/src/css/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/src/css/style.scss b/src/css/style.scss index 24bade7..28c57eb 100644 --- a/src/css/style.scss +++ b/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 { @@ -170,95 +170,95 @@ body } } } + + } + .content + { + display: grid; + grid-template-columns: 3fr 1fr 3fr; + height: 100%; - .content + .kant { - display: grid; - grid-template-columns: 3fr 1fr 3fr; - height: 100%; - - .kant + &-links { - &-links + grid-column: 1; + + #planten { - grid-column: 1; + width: 100%; + border-collapse: collapse; - #planten + td { - width: 100%; - border-collapse: collapse; - - td + article { - 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; - 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: 5rem; - width: 5rem; - } - - h2 - { - color: gray; - } - - &:hover - { - background-color: lightgray; - } - - + height: 5rem; + width: 5rem; } + + h2 + { + color: gray; + } + + &:hover + { + background-color: lightgray; + } + + } } } + } + + &-rechts + { + grid-column: 3; + margin-right: 2rem; - &-rechts + #metingen { - grid-column: 3; - // margin-right: 2rem; - #metingen + border: solid 3px $primary-color; + border-radius: 40px; + + #main-waardes { + display: flex; + justify-content: space-between; + padding: .5rem; + padding-bottom: 0; + width: 100%; - border: solid 3px $primary-color; - border-radius: 40px; - - #main-waardes + table { - display: flex; - justify-content: space-evenly; - padding: .5rem; - padding-bottom: 0; - width: 100%; - - table - { - display: flex; - justify-content: space-around; - // width: 100%; - } + display: flex; + justify-content: space-between; + width: 100%; } } } } } } - + .grid-column-2 { @include box-shadow; @@ -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; } } } diff --git a/src/index.html b/src/index.html index 9de297b..54968d1 100644 --- a/src/index.html +++ b/src/index.html @@ -4,12 +4,14 @@ Document - - - + +
+
+ +
@@ -76,11 +78,24 @@
@@ -88,28 +103,37 @@

a

-
-
- - - - - - -
-

Waardes

- 		-

Huidig

- 		-

24u gemiddelde

-
-
-
-
-
- -
-
+
+
+
+ + + + + + + + + + + + + + + + + +
Dagen tot Oogst12
Dagen in Kas2
Tevredenheid80%
Aandachtspunten1
+
+
+
+
+

Zonlicht

+ +
+
+
diff --git a/src/js/main.js b/src/js/main.js index 4e828e3..5d770b7 100644 --- a/src/js/main.js +++ b/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"; diff --git a/src/kas_informatie.html b/src/kas_informatie.html index c86333d..7018db9 100644 --- a/src/kas_informatie.html +++ b/src/kas_informatie.html @@ -4,7 +4,6 @@ - Informatie Kas @@ -47,7 +46,6 @@ -
@@ -81,7 +79,7 @@ Gemiddelde Uren Zonlicht: - 2u + 2u