diff --git a/src/py/script/plants.json b/src/py/script/plants.json index 4d4c8ef..0359e11 100644 --- a/src/py/script/plants.json +++ b/src/py/script/plants.json @@ -22,5 +22,35 @@ "plant_naam": "Sla", "plantensoort": "Groente", "plant_geteelt": 1 + }, + { + "id": 52, + "plant_naam": "Wietplant", + "plantensoort": "Onkruid", + "plant_geteelt": 1 + }, + { + "id": 53, + "plant_naam": "Patat", + "plantensoort": "Aarde", + "plant_geteelt": 1 + }, + { + "id": 54, + "plant_naam": "asfasfas", + "plantensoort": "fasfasfsaf", + "plant_geteelt": 1 + }, + { + "id": 55, + "plant_naam": "sadfadsfdsf", + "plantensoort": "sdfdsafdsfdf", + "plant_geteelt": 1 + }, + { + "id": 56, + "plant_naam": "asdasd", + "plantensoort": "asdasdasdasdasd", + "plant_geteelt": 1 } ] \ No newline at end of file diff --git a/src/py/static/js/main.js b/src/py/static/js/main.js index ad6370a..3fc80cf 100644 --- a/src/py/static/js/main.js +++ b/src/py/static/js/main.js @@ -1,7 +1,7 @@ // const { ipcRenderer } = require("electron"); +// const axios = require('axios'); -// document.addEventListener('DOMContentLoaded', () => -// { +// // document.addEventListener('DOMContentLoaded', () => { // ipcRenderer.send('request-update-temp', ['some', 'arguments']); // ipcRenderer.on('update-temp-result', (event, newTemperature) => { @@ -12,109 +12,122 @@ // } // }); -// }); +// // Send a message to the main process to execute the Python script +// ipcRenderer.send('run-python-script', ['some', 'arguments']); -// 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"; +// ipcRenderer.on('python-script-response', (event, pythonData) => { +// if (pythonData === 'error') { +// console.error('An error occurred while retrieving data from Python'); +// } 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 // } -// } -// } +// }); -// /** -// * --- 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!!!*/ +// // 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 +// }); -// const canvas = document.getElementById("myCanvas"); -// const ctx = canvas.getContext("2d"); +// // Trigger an event to request data update +// ipcRenderer.send('request-update-data'); -// ctx.clearRect(0, 0, canvas.width, canvas.height); +// // Function to open the modal +// function openModal() { +// const modal = document.getElementById("myModal"); +// const button = document.getElementById("modalButton"); +// const close = document.getElementsByClassName("close")[0]; -// const padding = 35; // Increased padding for Y labels -// const graphWidth = canvas.width - padding * 2; -// const graphHeight = canvas.height - padding * 2; +// // 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"; +// } -// ctx.beginPath(); -// ctx.moveTo(padding, padding); -// ctx.lineTo(padding, canvas.height - padding); -// ctx.lineTo(canvas.width - padding, canvas.height - padding); -// ctx.stroke(); +// // Close the modal when the 'close' icon is clicked +// close.onclick = function () { +// modal.style.display = "none"; +// } -// // 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); +// // Close the modal when clicked outside the modal +// window.onclick = function (event) { +// if (event.target == modal) { +// modal.style.display = "none"; +// } +// } // } // } -// // Draw X labels -// ctx.textAlign = "center"; // Center horizontally for X labels -// for (let i = 0; i < xLabels.length; i++) -// { -// if (xLabels[i] !== "") -// { +// // Call the function to open the modal +// openModal(); + +// /** +// * --- Function to draw the chart. The important arrays are "data" & "xLabels". +// */ +// function drawLineChart() { +// 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; -// ctx.fillText(xLabels[i], xPos, canvas.height - padding + 20); +// 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(); - -// ///////////////////////////////// +// // Call the function to draw the line chart +// drawLineChart(); // // Function to fetch battery data from Flask API // function fetchBatteryData() { @@ -133,32 +146,53 @@ // 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; +// document.getElementById('zulu').innerText = batteryData.timestamp; // // Voeg andere eigenschappen toe zoals nodig // } // // Fetch battery data when the page loads // fetchBatteryData(); -///////////////////////////////// +// // }); const { ipcRenderer } = require("electron"); const axios = require('axios'); - -// 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 to open the modal +function openModal() { + const modal = document.getElementById("myModal"); + const button = document.getElementById("modalButton"); + const close = document.getElementsByClassName("close")[0]; + + if (modal && button) { // Check if elements are found + // 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"; + } + } + } else { + console.error("Modal elements not found"); + } +} + +document.addEventListener('DOMContentLoaded', () => { + // Call openModal when DOM content is loaded + openModal(); + // Send a message to the main process to execute the Python script ipcRenderer.send('run-python-script', ['some', 'arguments']); - + ipcRenderer.on('python-script-response', (event, pythonData) => { if (pythonData === 'error') { console.error('An error occurred while retrieving data from Python'); @@ -167,134 +201,106 @@ const axios = require('axios'); document.getElementById('bodem-temperatuur').textContent = pythonData.bodemTemperatuur; // Adjust the property based on your actual Python response } }); - + // 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 to open the modal - function openModal() { - const modal = document.getElementById("myModal"); - const button = document.getElementById("modalButton"); - const close = document.getElementsByClassName("close")[0]; - - // 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"; - } - - // 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"; - } - } - } - } - - // Call the function to open the modal - openModal(); - - /** - * --- Function to draw the chart. The important arrays are "data" & "xLabels". - */ - function drawLineChart() { - 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); - } - } - } - - // 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('zulu').innerText = batteryData.timestamp; - - // Voeg andere eigenschappen toe zoals nodig - } - + // Fetch battery data when the page loads fetchBatteryData(); -// }); \ No newline at end of file +}); + +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); + } + } +} + 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 +} \ No newline at end of file diff --git a/src/py/templates/index.html b/src/py/templates/index.html index e64b3b3..392e5f8 100644 --- a/src/py/templates/index.html +++ b/src/py/templates/index.html @@ -31,10 +31,10 @@ --> -
+ + +