Even een tussen update!
This commit is contained in:
Atilla
@@ -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();
|
||||
|
||||
143
src/py/static/js/planten.class.js
Normal file
143
src/py/static/js/planten.class.js
Normal file
@@ -0,0 +1,143 @@
|
||||
class Plant {
|
||||
constructor(dataObject) {
|
||||
this.id = dataObject.id;
|
||||
this.plantNaam = dataObject.plantNaam;
|
||||
this.plantensoort = dataObject.plantensoort;
|
||||
this.plantGeteelt = dataObject.plantGeteelt;
|
||||
}
|
||||
}
|
||||
|
||||
class PlantGrid {
|
||||
constructor() {
|
||||
this.grid = [];
|
||||
this.cols = 2; // Number of columns
|
||||
this.rows = 4; // Number of rows (including the row for the "Add" button)
|
||||
|
||||
// Initialize the grid with null values
|
||||
for (let i = 0; i < this.rows; i++) {
|
||||
this.grid[i] = new Array(this.cols).fill(null);
|
||||
}
|
||||
|
||||
// Sample data
|
||||
const dataHardObject = [
|
||||
{
|
||||
"id": 1,
|
||||
"plantNaam": "Tomt",
|
||||
"plantensoort": "Groente",
|
||||
"plantGeteelt": 1
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"plantNaam": "Komkommer",
|
||||
"plantensoort": "Groente",
|
||||
"plantGeteelt": 1
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"plantNaam": "Appel",
|
||||
"plantensoort": "Groente",
|
||||
"plantGeteelt": 0
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"plantNaam": "KwamKwammer",
|
||||
"plantensoort": "Groente",
|
||||
"plantGeteelt": 1
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"plantNaam": ":p",
|
||||
"plantensoort": "Groente",
|
||||
"plantGeteelt": 1
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"plantNaam": ":3",
|
||||
"plantensoort": "Groente",
|
||||
"plantGeteelt": 1
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"plantNaam": "Groene",
|
||||
"plantensoort": "Groente",
|
||||
"plantGeteelt": 0
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"plantNaam": "test",
|
||||
"plantensoort": "Groente",
|
||||
"plantGeteelt": 0
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"plantNaam": "yippie",
|
||||
"plantensoort": "Groente",
|
||||
"plantGeteelt": 0
|
||||
}
|
||||
];
|
||||
|
||||
// Only save objects that have plantGeteelt as 1
|
||||
const filteredData = dataHardObject.filter(plantObject => plantObject.plantGeteelt === 1);
|
||||
|
||||
// Populate the grid with plant objects
|
||||
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;
|
||||
});
|
||||
|
||||
|
||||
// Display the grid in the HTML table with id "planten"
|
||||
this.displayGrid();
|
||||
}
|
||||
|
||||
displayGrid() {
|
||||
const plantenTable = document.getElementById("planten");
|
||||
|
||||
let itemCount = 0; // Counter for the number of items in the grid
|
||||
|
||||
this.grid.forEach((row, rowIndex) => {
|
||||
const tr = document.createElement("tr");
|
||||
|
||||
row.forEach((plant, colIndex) => {
|
||||
const td = document.createElement("td");
|
||||
|
||||
if (itemCount < 8) {
|
||||
if (plant) {
|
||||
// Handle regular plant items
|
||||
const article = document.createElement("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(article);
|
||||
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);
|
||||
});
|
||||
|
||||
plantenTable.appendChild(tr);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const plantGrid = new PlantGrid();
|
||||
});
|
||||
Reference in New Issue
Block a user