From d38d61950c1ed41032319b746b0e0fcd18304674 Mon Sep 17 00:00:00 2001 From: Atilla Date: Tue, 19 Mar 2024 18:58:43 +0100 Subject: [PATCH] Even een tussen update! --- app.js | 2 +- src/css/style.css.map | 1 - src/get_data.php | 50 ---- src/index.html | 97 -------- src/js/main.js | 113 ---------- src/kas_informatie.html | 119 ---------- ...ple-alt.png => Icon_awesome-apple-alt.png} | Bin src/py/static/js/main.js | 177 ++++++++------- src/{ => py/static}/js/planten.class.js | 4 +- src/py/templates/index.html | 139 +++++------- src/py/templates/kas_informatie.html | 213 +++++++++--------- 11 files changed, 271 insertions(+), 644 deletions(-) delete mode 100644 src/css/style.css.map delete mode 100644 src/get_data.php delete mode 100644 src/index.html delete mode 100644 src/js/main.js delete mode 100644 src/kas_informatie.html rename src/py/static/images/{Icon awesome-apple-alt.png => Icon_awesome-apple-alt.png} (100%) rename src/{ => py/static}/js/planten.class.js (96%) diff --git a/app.js b/app.js index 298bbe2..cee16e7 100644 --- a/app.js +++ b/app.js @@ -23,7 +23,7 @@ server.post('/submit-form', (req, res) => }; // Execute Python script with plant name as an argument - PythonShell.run('./script/db_connect_form.py', options, (err, results) => + PythonShell.run('src/py/script/db_connect_form.py', options, (err, results) => { if (err) { diff --git a/src/css/style.css.map b/src/css/style.css.map deleted file mode 100644 index 43ebafd..0000000 --- a/src/css/style.css.map +++ /dev/null @@ -1 +0,0 @@ -{"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/get_data.php b/src/get_data.php deleted file mode 100644 index 77ba071..0000000 --- a/src/get_data.php +++ /dev/null @@ -1,50 +0,0 @@ -connect_error) { - die("Connection failed: " . $conn->connect_error); -} - -// Query om gegevens op te halen uit de tabel devices -$query_devices = "SELECT * FROM devices"; -$result_devices = $conn->query($query_devices); - -// Query om gegevens op te halen uit de tabel battery_voltage_events -$query_battery_voltage = "SELECT * FROM battery_voltage_events"; -$result_battery_voltage = $conn->query($query_battery_voltage); - -// Query om gegevens op te halen uit de tabel fetch -$query_fetch = "SELECT * FROM fetch"; -$result_fetch = $conn->query($query_fetch); - -// Array om resultaten op te slaan -$data = array(); - -// Controleren of er resultaten zijn van de tabel devices -if ($result_devices->num_rows > 0) { - $data['devices'] = $result_devices->fetch_all(MYSQLI_ASSOC); -} - -// Controleren of er resultaten zijn van de tabel battery_voltage_events -if ($result_battery_voltage->num_rows > 0) { - $data['battery_voltage_events'] = $result_battery_voltage->fetch_all(MYSQLI_ASSOC); -} - -// Controleren of er resultaten zijn van de tabel fetch -if ($result_fetch->num_rows > 0) { - $data['fetch'] = $result_fetch->fetch_all(MYSQLI_ASSOC); -} - -// Gegevens als JSON-uitvoer -echo json_encode($data); - -// Verbinding sluiten -$conn->close(); diff --git a/src/index.html b/src/index.html deleted file mode 100644 index 2c4e0d5..0000000 --- a/src/index.html +++ /dev/null @@ -1,97 +0,0 @@ - - - - - - Document - - - - - -
-
- -
-
-
-
- - -
- -
-
- -
-
-
-
-
-
- - - - - - - - - - - - - - - - - -
Dagen tot Oogst12
Dagen in Kas2
Tevredenheid80%
Aandachtspunten1
-
-
-
-
-

Zonlicht

- -
-
-
-
-
-
-
- - - \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js deleted file mode 100644 index 5d770b7..0000000 --- a/src/js/main.js +++ /dev/null @@ -1,113 +0,0 @@ -const { ipcRenderer } = require("electron"); - -document.addEventListener('DOMContentLoaded', () => -{ - 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 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]; - - 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); - - const padding = 35; // Increased padding for Y labels - const graphWidth = canvas.width - padding * 2; - const graphHeight = canvas.height - padding * 2; - - 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 = "rgb(143, 188, 143)"; - - const xIncrement = graphWidth / (xLabels.length - 1); - const yIncrement = graphHeight / (yLabels.length - 1); - - // 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(); - - // 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); - } - } -} diff --git a/src/kas_informatie.html b/src/kas_informatie.html deleted file mode 100644 index c3d34b4..0000000 --- a/src/kas_informatie.html +++ /dev/null @@ -1,119 +0,0 @@ - - - - - - - - Informatie Kas - - -
-
- -
-
-
-

Informatie Kas

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

Zonlicht

- -
-
-
-
-
-
-
- - - - - - - - - - - - - -
Aantal geplant:Loading...
Succesvolle Oogst:2
Gefaalde Oogst:2
- - - - - - - - - - - - - - - - - -
Warmste Maand:n.v.t.
koudste Maand:December
Gemiddelde Bodemtemp.:2˚C
Gemiddelde Uren Zonlicht:2u
- - - - - - - - - - - - - - - - - -
Laatste Irrigatie:2u
Aankomende Irrigatie:2u
Laatste Bemesting2d
Aankomende Bemesting:2w
-
-
-
-
-
- - - \ No newline at end of file diff --git a/src/py/static/images/Icon awesome-apple-alt.png b/src/py/static/images/Icon_awesome-apple-alt.png similarity index 100% rename from src/py/static/images/Icon awesome-apple-alt.png rename to src/py/static/images/Icon_awesome-apple-alt.png diff --git a/src/py/static/js/main.js b/src/py/static/js/main.js index 7d13680..24631b3 100644 --- a/src/py/static/js/main.js +++ b/src/py/static/js/main.js @@ -1,96 +1,115 @@ const { ipcRenderer } = require("electron"); -const axios = require('axios'); -document.addEventListener('DOMContentLoaded', () => { - // Send a message to the main process to execute the Python script - ipcRenderer.send('run-python-script', ['some', 'arguments']); +document.addEventListener('DOMContentLoaded', () => +{ + ipcRenderer.send('request-update-temp', ['some', 'arguments']); - ipcRenderer.on('python-script-response', (event, pythonData) => { - if (pythonData === 'error') { - console.error('An error occurred while retrieving data from Python'); + 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 { - // Update HTML elements with data received from Python - document.getElementById('bodem-temperatuur').textContent = pythonData.bodemTemperatuur; // Adjust the property based on your actual Python response + document.getElementById('bodem-temperatuur').textContent = newTemperature; } }); - // Listen for updates to HTML data from the main process - ipcRenderer.on('update-html-data', (event, data) => { - // Update the HTML with the received data - document.getElementById('batteryVoltage').innerText = data.batteryVoltage; - // Add similar lines for other data fields - }); +}); - // Trigger an event to request data update - ipcRenderer.send('request-update-data'); +function openModal() +{ + const modal = document.getElementById("myModal"); + const button = document.getElementById("modalButton"); + const close = document.getElementsByClassName("close")[0]; - // Function to open the modal - 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"; + } - // Check if elements are found before attaching events - if (modal && button && close) { - // Show the modal when the button is clicked - button.onclick = function () { - modal.style.display = "block"; - } + // Sluit de modal wanneer op het 'sluiten' icoon wordt geklikt + close.onclick = function() + { + modal.style.display = "none"; + } - // Close the modal when the 'close' icon is clicked - close.onclick = function () { - modal.style.display = "none"; - } - - // Close the modal when clicked outside the modal - window.onclick = function (event) { - if (event.target == modal) { - 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"; } } - - // Call the function to open the modal - openModal(); - - /** - * --- Function to draw the chart. The important arrays are "data" & "xLabels". - */ - function drawLineChart() { - const canvas = document.getElementById("myCanvas"); - const ctx = canvas.getContext("2d"); - - // ... (rest of the function remains unchanged) - } - - // Call the function to draw the line chart - drawLineChart(); - - // Function to fetch battery data from Flask API - function fetchBatteryData() { - axios.get('http://127.0.0.1:5000') - .then(response => { - const batteryData = response.data; - updateBatteryData(batteryData); - }) - .catch(error => { - console.error('Error fetching battery data:', error); - }); - } - -// Function to update HTML content with battery data -function updateBatteryData(batteryData){ - document.getElementById('deviceNumber').innerText = batteryData.device; - document.getElementById('voltage').innerText = batteryData.value; - document.getElementById('time').innerText = batteryData.gateway_receive_time; - document.getElementById('tevredenheid').innerText = batteryData.timestamp; - - // Voeg andere eigenschappen toe zoals nodig } +/** + * --- 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]; + + const yLabels = ["", 20, "", 40, "", 60, "", 80, "", 100]; /*NIET VERANDEREN!!!*/ + const canvas = document.getElementById("myCanvas"); + const ctx = canvas.getContext("2d"); - // Fetch battery data when the page loads - fetchBatteryData(); -}); + 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; + + 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 = "rgb(143, 188, 143)"; + + const xIncrement = graphWidth / (xLabels.length - 1); + const yIncrement = graphHeight / (yLabels.length - 1); + + // 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(); + + // 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(); diff --git a/src/js/planten.class.js b/src/py/static/js/planten.class.js similarity index 96% rename from src/js/planten.class.js rename to src/py/static/js/planten.class.js index b671e08..c54657f 100644 --- a/src/js/planten.class.js +++ b/src/py/static/js/planten.class.js @@ -108,7 +108,7 @@ class PlantGrid { // Handle regular plant items const article = document.createElement("article"); const img = article.appendChild(document.createElement("img")); - img.src = "images/Icon awesome-apple-alt.png"; + img.src = "../static/images/icon_awesome-apple-alt.png"; const h2 = article.appendChild(document.createElement("h2")); h2.classList.add("plant-naam"); h2.textContent = plant.plantNaam; @@ -119,7 +119,7 @@ class PlantGrid { // Handle the "Add" button const article = document.createElement("article"); const img = article.appendChild(document.createElement("img")); - img.src = "images/Toevoegen.png"; + img.src = "../static/images/Toevoegen.png"; img.id = "toevoegen"; img.alt = "Add"; article.id = "modalButton"; diff --git a/src/py/templates/index.html b/src/py/templates/index.html index 25d03c9..123f355 100644 --- a/src/py/templates/index.html +++ b/src/py/templates/index.html @@ -3,114 +3,93 @@ - - Document + Dashboard - +
+
+ +
- - + - - - - - - - - - - - - - + -->
- -
- -

Tomaat

-
- -
-
- -

Tomaat

-
- 		-
- -

Tomaat

-
-
-
- -

Tomaat

-
- 		-
- -

Tomaat

-
-
-
- +

Tomaat
- +
+
-

-
-
- - - - - - -
-

Waardes

- 		-

Huidig

- 		-

24u gemiddelde

-
-
-
-
-
- -
-
+
+ +
+
+

Zonlicht

+ +
+
+
diff --git a/src/py/templates/kas_informatie.html b/src/py/templates/kas_informatie.html index 5406aae..3d340b8 100644 --- a/src/py/templates/kas_informatie.html +++ b/src/py/templates/kas_informatie.html @@ -1,110 +1,119 @@ - - - - - Informatie Kas + + + - - + + Informatie Kas + +
+
+ +
+
- +

Informatie Kas

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

Zonlicht

+ +
+
+
-
-
-

Informatie Kas

-
-
-
- - - - - - - - - - - - - - - - - -
Device
Batterij Voltage
Tijden
Zulu
-
-
-
-
-

Zonlicht

- -
-
-
-
-
-
-
- - - - - - - - - - - - - -
Aantal geplant:2
Succesvolle Oogst:2
Gefaalde Oogst:2
- - - - - - - - - - - - - - - - - -
Warmste Maand:n.v.t.
Koudste Maand:December
Gemiddelde Bodemtemp.:2˚C
Gemiddelde Uren Zonlicht:2u
- - - - - - - - - - - - - - - - - -
Laatste Irrigatie:2u
Aankomende Irrigatie:2u
Laatste Bemesting2d
Aankomende Bemesting:2w
-
-
-
-
+
+
+
+ + + + + + + + + + + + + +
Aantal geplant:Loading...
Succesvolle Oogst:2
Gefaalde Oogst:2
+ + + + + + + + + + + + + + + + + +
Warmste Maand:n.v.t.
koudste Maand:December
Gemiddelde Bodemtemp.:2˚C
Gemiddelde Uren Zonlicht:2u
+ + + + + + + + + + + + + + + + + +
Laatste Irrigatie:2u
Aankomende Irrigatie:2u
Laatste Bemesting2d
Aankomende Bemesting:2w
+
+
+
+
- - + - + \ No newline at end of file