heboba/goodgarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Doc gemaakt voor scripts

Browse Source
This commit is contained in:
Atilla
2024-04-03 14:08:30 +02:00
parent 417dacbe73
commit b8ab58bb53
21 changed files with 629 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

250
src/py/static/js/main.js
View File

@@ -1,98 +1,117 @@
// Importeer de ipcRenderer-module van Electron voor communicatie tussen processen.
// Dit maakt het mogelijk voor renderer-processen (webpagina's) om berichten te verzenden naar het hoofdproces.
const { ipcRenderer } = require("electron");
// Importeer Axios voor het maken van HTTP-verzoeken
const axios = require('axios');
// Function to open the modal
function openModal() {
/**
* Functie om een modaal venster te openen.
* Deze functie stelt event listeners in voor het openen en sluiten van de modaal.
*/
function openModal()
{
// Verkrijg de elementen voor de modaal, de open-knop en de sluit-knop op basis van hun ID of klasse.
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 () {
// Controleer of de elementen bestaan om fouten te voorkomen.
if (modal && button)
{
// Toon de modaal 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 () {
// Sluit de modaal 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) {
// Sluit de modaal wanneer buiten de modaal wordt geklikt.
window.onclick = function (event)
{
if (event.target == modal)
{
modal.style.display = "none";
}
}
} else {
console.error("Modal elements not found");
}
else
{
console.error("Modaal elementen niet gevonden");
}
}
document.addEventListener('DOMContentLoaded', () => {
// Call openModal when DOM content is loaded
document.addEventListener('DOMContentLoaded', () =>
{
openModal();
// Send a message to the main process to execute the Python script
// Roep andere functies hier aan zoals vereist, bijvoorbeeld:
// fetchWeatherDataAndDrawChart();
// Stuur een bericht naar het hoofdproces om het Python-script uit te voeren.
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');
} 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
}
});
// Listen for updates to HTML data from the main process
ipcRenderer.on('update-html-data', (event, data) => {
// Update the HTML with the received data
// Luister naar updates van HTML-data vanuit het hoofdproces.
ipcRenderer.on('update-html-data', (event, data) =>
{
// Werk de HTML bij met de ontvangen data.
document.getElementById('batteryVoltage').innerText = data.batteryVoltage;
// Add similar lines for other data fields
// Voeg vergelijkbare regels toe voor andere data velden.
});
// Trigger an event to request data update
// Trigger een event om data update aan te vragen.
ipcRenderer.send('request-update-data');
// Fetch battery data when the page loads
// Haal batterij data op wanneer de pagina laadt.
fetchBatteryData();
});
function drawLineChart()
/**
* Functie om een lijngrafiek te tekenen.
* @param {Array} xLabels Labels voor de x-as.
* @param {Array} data De data punten voor de grafiek.
*/
function drawLineChart(xLabels, data)
{
/*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!!!*/
// Definieer Y labels (niet veranderen volgens commentaar).
const yLabels = ["", 10, 15, 20, 25, 30, 35, 40];
// Verkrijg het canvas element en de context voor tekenen.
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Maak het canvas schoon voor nieuwe tekening.
ctx.clearRect(0, 0, canvas.width, canvas.height);
const padding = 35; // Increased padding for Y labels
// Definieer padding en bereken grafiekafmetingen.
const padding = 35; // Vergrote padding voor Y labels.
const graphWidth = canvas.width - padding * 2;
const graphHeight = canvas.height - padding * 2;
// Teken de as van de grafiek.
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
// Stel de kleur van de lijn in.
ctx.strokeStyle = "rgb(143, 188, 143)";
// Bereken incrementen voor het plotten.
const xIncrement = graphWidth / (xLabels.length - 1);
const yIncrement = graphHeight / (yLabels.length - 1);
// Plot the data
// Plot de data.
ctx.beginPath();
ctx.moveTo(padding, canvas.height - padding - (data[0] / 100) * graphHeight);
for (let i = 1; i < data.length; i++)
for (let i = 1; i < data.length; i++)
{
const xPos = padding + i * xIncrement;
const yPos = canvas.height - padding - (data[i] / 100) * graphHeight;
@@ -100,84 +119,171 @@ function drawLineChart()
}
ctx.stroke();
// Draw Y labels
// Teken Y labels.
ctx.fillStyle = "black";
ctx.textAlign = "right"; // Align text to the right
ctx.textBaseline = "middle"; // Center vertically
ctx.textAlign = "right"; // Tekst naar rechts uitlijnen.
ctx.textBaseline = "middle"; // Verticaal centreren.
for (let i = 0; i < yLabels.length; i++)
for (let i = 0; i < yLabels.length; i++)
{
if (yLabels[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++)
// Teken X labels.
ctx.textAlign = "center"; // Horizontaal centreren voor X labels.
for (let i = 0; i < xLabels.length; i++)
{
if (xLabels[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() {
/**
* Functie om weergegevens op te halen en een grafiek te tekenen.
* Deze functie haalt weergegevens op van een lokale server en tekent een lijngrafiek
* op basis van de verkregen data.
*/
function fetchWeatherDataAndDrawChart()
{
// URL van de API waar de weergegevens opgehaald kunnen worden.
const apiUrl = `http://127.0.0.1:5000/weather`;
// Voer een GET-verzoek uit naar de API.
fetch(apiUrl)
.then(response =>
{
// Controleer of het verzoek succesvol was.
if (response.ok)
{
return response.json();
}
// Gooi een fout als het verzoek niet succesvol was.
throw new Error('Network response was not ok.');
})
.then(data =>
{
// Verkrijg de weersvoorspelling voor de eerste 5 dagen.
const weatherForecast = data.weather_forecast.slice(0, 5);
// Converteer datums naar dagen van de week.
const dates = weatherForecast.map(day => convertDateToDayOfWeek(day.dag));
// Verkrijg de maximale temperaturen.
const temperatures = weatherForecast.map(day => day.max_temp);
// Teken de lijngrafiek met de verkregen data.
drawLineChart(dates, temperatures);
})
.catch(error =>
{
// Log eventuele fouten tijdens het ophalen.
console.error('There was a problem with the fetch operation:', error);
});
}
/**
* Functie om een datum (bijv. "07-02") om te zetten naar de dag van de week (bijv. "zo", "ma", etc.).
* @param {string} dateString - De datum als string in het formaat "dd-mm".
* @returns {string} De afkorting van de dag van de week.
*/
function convertDateToDayOfWeek(dateString)
{
// Split de datum in dag en maand, en zet deze om naar nummers.
const [day, month] = dateString.split('-').map(Number);
// Maak een nieuwe datumobject (jaar is willekeurig omdat we alleen maand en dag nodig hebben).
const date = new Date(2024, month - 1, day);
// Verkrijg de dag van de week en zet deze om naar een afkorting.
const dayOfWeek = ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'][date.getDay()];
return dayOfWeek;
}
/**
* Functie om batterijdata op te halen wanneer de pagina laadt.
* Deze functie haalt data op met Axios en verwerkt deze vervolgens.
*/
function fetchBatteryData()
{
// Voer een GET-verzoek uit naar de server om batterijdata op te halen.
axios.get('http://127.0.0.1:5000')
.then(response => {
.then(response =>
{
// Verwerk de ontvangen data.
const batteryData = response.data;
updateBatteryData(batteryData);
})
.catch(error => {
.catch(error =>
{
// Log eventuele fouten tijdens het ophalen.
console.error('Error fetching battery data:', error);
});
}
/**
* Functie om batterijdata op de pagina bij te werken.
* Deze functie update de HTML met de ontvangen batterijdata.
* @param {Array} batteryData - De ontvangen batterijdata.
*/
function updateBatteryData(batteryData)
{
if(batteryData[1].device_id == 322)
// Update de data voor specifieke apparaten op basis van hun ID.
if (batteryData[1].device_id == 322)
{
document.getElementById('deviceNumber-322').innerHTML = batteryData[1].device_id;
document.getElementById('voltage-322').innerHTML = batteryData[1].label;
document.getElementById('time-322').innerHTML = batteryData[1].last_seen;
document.getElementById('time-322').innerHTML = new Date(batteryData[0].last_seen).toLocaleTimeString();
document.getElementById('tevredenheid-322').innerHTML = batteryData[1].last_battery_voltage;
}
if (batteryData[0].device_id == 256)
if (batteryData[0].device_id == 256)
{
document.getElementById('deviceNumber-256').innerHTML = batteryData[0].device_id;
document.getElementById('voltage-256').innerHTML = batteryData[0].label;
document.getElementById('time-256').innerHTML = batteryData[0].last_seen;
document.getElementById('time-256').innerHTML = new Date(batteryData[0].last_seen).toLocaleTimeString();
document.getElementById('tevredenheid-256').innerHTML = batteryData[0].last_battery_voltage;
}
console.log(batteryData);
}
// Definieer de API-sleutel en de stad waarvoor we de weergegevens willen ophalen.
const apiKey = "9516081f15727d063c9e2f08454a2fe9";
const city = "Leiden";
// Maak de URL voor de API-aanroep
const apiUrl = `https://weerlive.nl/api/weerlive_api_v2.php?key=${apiKey}&locatie=${city}`;
// Construeer de URL voor de API-aanroep. In dit geval is het een lokale server.
const apiUrl = `http://127.0.0.1:5000/weather`;
// Doe een GET-verzoek naar de API
// Voer een GET-verzoek uit naar de API om de weergegevens op te halen.
fetch(apiUrl)
.then(response => {
if (response.ok) {
.then(response =>
{
// Controleer of de respons van de server in orde is (status code 200).
if (response.ok)
{
// Zo ja, parse de JSON uit de respons.
return response.json();
}
// Zo niet, gooi een fout.
throw new Error('Network response was not ok.');
})
.then(data => {
// Verwerk de ontvangen weerdata
.then(data =>
{
// Log de ontvangen data naar de console voor debugging.
console.log(data);
const weatherIcon = data.live_weather.image;
const weatherImageUrl = `https://www.weerlive.nl/delen.php?size=klein&weer=${weatherIcon}`;
document.getElementById('weatherImage').src = weatherImageUrl;
// Extraheren van de weersvoorspelling voor de eerste vijf dagen.
const weatherForecast = data.weather_forecast.slice(0, 5);
// Haal de dagen op waarvoor de voorspelling geldt.
const dates = weatherForecast.map(day => day.dag);
// Haal de maximale temperaturen op voor deze dagen.
const temperatures = weatherForecast.map(day => day.max_temp);
// Update de grafiek met de nieuwe data.
drawLineChart(dates, temperatures);
})
.catch(error => {
.catch(error =>
{
// Log eventuele fouten tijdens het ophalen van de data.
console.error('There was a problem with the fetch operation:', error);
});

101
src/py/static/js/planten.class.js
View File

@@ -1,51 +1,59 @@
// Definitie van de Plant klasse.
class Plant {
// Constructor om een Plant object te initialiseren met data van een dataObject.
constructor(dataObject) {
// Initialiseren van de eigenschappen van de plant.
this.id = dataObject.id;
this.plantNaam = dataObject.plant_naam; // Note the property name change
this.plantensoort = dataObject.plantensoort;
this.plantGeteelt = dataObject.plant_geteelt;
this.plantNaam = dataObject.plant_naam; // Naam van de plant.
this.plantensoort = dataObject.plantensoort; // Soort van de plant.
this.plantGeteelt = dataObject.plant_geteelt; // Geteelt status van de plant.
}
}
class PlantGrid {
// Constructor om een PlantGrid object te initialiseren.
constructor() {
this.grid = [];
this.cols = 2; // Number of columns
this.rows = 4; // Number of rows (including the row for the "Add" button)
this.grid = []; // De datastructuur die het raster van planten bevat.
this.cols = 2; // Aantal kolommen in het raster.
this.rows = 4; // Aantal rijen in het raster (inclusief de rij voor de "Toevoegen" knop).
// Initialize the grid with null values
// Initialiseren van het raster met null waarden.
for (let i = 0; i < this.rows; i++) {
this.grid[i] = new Array(this.cols).fill(null);
}
// Load JSON data from the server
// Laadt JSON data van de server.
this.loadData();
}
// Methode om data te laden.
loadData() {
fetch('../script/plants.json') // Assuming your JSON data is stored in 'plants.json'
fetch('../script/plants.json') // Veronderstelt dat de JSON data is opgeslagen in 'plants.json'.
.then(response => {
// Controleer of de netwerkrespons ok is.
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
return response.json(); // Parse de JSON uit de respons.
})
.then(data => {
// Filter de data op planten die geteeld zijn.
const filteredData = data.filter(plantObject => plantObject.plant_geteelt === 1);
// Populate the grid with plant objects
// Vul het raster met plantobjecten.
filteredData.slice(0, 8).forEach((plantObject, index) => {
const plant = new Plant(plantObject);
const col = index % this.cols;
const row = Math.floor(index / this.cols);
this.grid[row][col] = plant;
const plant = new Plant(plantObject); // Maak een nieuw Plant object.
const col = index % this.cols; // Bereken de kolomindex.
const row = Math.floor(index / this.cols); // Bereken de rijindex.
this.grid[row][col] = plant; // Voeg de plant toe aan het raster.
});
// Display the grid in the HTML table with id "planten"
// Toon het raster in de HTML tabel met id "planten".
this.displayGrid();
})
.catch(error => console.error('Error loading data:', error));
.catch(error => console.error('Error loading data:', error)); // Log eventuele fouten.
}
displayGrid() {
const plantenTable = document.getElementById("planten");
@@ -98,8 +106,63 @@ class PlantGrid {
});
}
displayGrid() {
const plantenTable = document.getElementById("planten"); // Verkrijg de tabel waarin het raster getoond moet worden.
let itemCount = 0; // Teller voor het aantal items in het raster.
this.grid.forEach((row, rowIndex) => {
const tr = document.createElement("tr"); // Maak een tabelrij element.
row.forEach((plant, colIndex) => {
const td = document.createElement("td"); // Maak een tabeldata element.
// Logica om plantitems of de "Toevoegen" knop te verwerken.
if (itemCount < 8) {
if (plant) {
// Verwerk normale plantitems.
// Creëer een link element naar de planteninformatiepagina met plant ID als query parameter.
// Voeg vervolgens een artikel, afbeelding en titel toe met de plantinformatie.
// Handle regular plant items
const link = document.createElement("a");
link.href = `planteninfo.html?id=${plant.id}`;
const article = document.createElement("article");
article.classList.add("plant-container");
link.appendChild(article);
const img = article.appendChild(document.createElement("img"));
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;
td.appendChild(link);
itemCount++;
} else if (rowIndex === this.rows - 1 && colIndex === this.cols - 1 && itemCount <= 7) {
// Handle the "Add" button
const article = document.createElement("article");
const img = article.appendChild(document.createElement("img"));
img.src = "../static/images/Toevoegen.png";
img.id = "toevoegen";
img.alt = "Add";
article.id = "modalButton";
article.onclick = openModal;
td.appendChild(article);
itemCount++;
}
}
tr.appendChild(td); // Voeg de td toe aan de tr.
});
plantenTable.appendChild(tr); // Voeg de tr toe aan de tabel.
});
}
}
document.addEventListener("DOMContentLoaded", () => {
const plantGrid = new PlantGrid();
});
});