gestuurdd
This commit is contained in:
@@ -181,7 +181,7 @@ import mysql.connector
|
||||
import requests
|
||||
from datetime import datetime, timezone, timedelta
|
||||
import time
|
||||
from py.script.servermqtt import servermqtt
|
||||
# from py.script.servermqtt import servermqtt
|
||||
|
||||
# Function to make a connection to the database
|
||||
def database_connect():
|
||||
@@ -194,7 +194,7 @@ def database_connect():
|
||||
|
||||
def calculate_timestamp(gateway_receive_time):
|
||||
# Converteer de stringrepresentatie naar een datetime-object in UTC
|
||||
datetime_obj_utc = datetime.strptime(gateway_receive_time, "%Y-%m-%dT%H:%M:%SZ").replace(tzinfo=timezone.utc)
|
||||
datetime_obj_utc = datetime.strptime(gateway_receive_time, "%Y-%m-%d%H:%M:%S:").replace(tzinfo=timezone.utc)
|
||||
|
||||
# Voeg het tijdsverschil van 1 uur toe voor de Nederlandse tijdzone (UTC+1)
|
||||
datetime_obj_nl = datetime_obj_utc + timedelta(hours=1)
|
||||
@@ -289,6 +289,7 @@ def insert_data(record):
|
||||
|
||||
|
||||
|
||||
|
||||
# Functie voor het lezen van gegevens uit de database
|
||||
def read_data(url, access_token, repeat_count=5):
|
||||
for _ in range(repeat_count):
|
||||
|
||||
@@ -1,142 +1,65 @@
|
||||
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']);
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Send a message to the main process to execute the Python script
|
||||
ipcRenderer.send('run-python-script', ['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');
|
||||
ipcRenderer.on('python-script-response', (event, pythonData) => {
|
||||
if (pythonData === 'error') {
|
||||
console.error('An error occurred while retrieving data from Python');
|
||||
} else {
|
||||
document.getElementById('bodem-temperatuur').textContent = newTemperature;
|
||||
// Update HTML elements with data received from Python
|
||||
document.getElementById('bodem-temperatuur').textContent = pythonData.bodemTemperatuur; // Adjust the property based on your actual Python response
|
||||
}
|
||||
});
|
||||
|
||||
// Additional IPC event to update HTML data
|
||||
ipcRenderer.on('update-html-data', (event, data) => {
|
||||
document.getElementById('battery_data_device_placeholder').innerText = data.battery_data_device;
|
||||
document.getElementById('battery_data_voltage_placeholder').innerText = data.battery_data_voltage;
|
||||
document.getElementById('battery_data_time_placeholder').innerText = data.battery_data_time;
|
||||
});
|
||||
|
||||
// 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 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 dataTablePython()
|
||||
// {
|
||||
// document.getElementById("")
|
||||
// }
|
||||
|
||||
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];
|
||||
|
||||
// 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
|
||||
|
||||
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);
|
||||
ctx.lineTo(canvas.width - padding, canvas.height - padding);
|
||||
ctx.stroke();
|
||||
|
||||
// Set the color of the line
|
||||
ctx.strokeStyle = "#008000"; // This sets the line color to green
|
||||
|
||||
const xIncrement = graphWidth / (xLabels.length - 1);
|
||||
const yIncrement = graphHeight / (yLabels.length - 1); // Assuming you have labels for each increment
|
||||
|
||||
// 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(); // Apply the stroke to the line
|
||||
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var battery_data = {
|
||||
device: "{{ battery_data[2] }}",
|
||||
batteryVoltage: "{{ battery_data[3] }}",
|
||||
time: "{{ battery_data[1] }}"
|
||||
};
|
||||
|
||||
// Update HTML elements using dynamically generated IDs
|
||||
document.getElementById('battery_data_device').innerText = battery_data.device;
|
||||
document.getElementById('battery_data_voltage').innerText = battery_data.batteryVoltage;
|
||||
document.getElementById('battery_data_time').innerText = battery_data.time;
|
||||
// Add other updates as needed
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
drawLineChart();
|
||||
@@ -3,6 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../static/css/style.css">
|
||||
<script src="../static/js/main.js" defer></script>
|
||||
|
||||
@@ -5,9 +5,9 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="../static/css/style.css" />
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> -->
|
||||
<link rel="stylesheet" href="../static/css/style.css">
|
||||
<script src="../static/js/main.js" defer></script>
|
||||
<title>Informatie Kas</title>
|
||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='src/py/script/static/css/style.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
<section class="mainContainer">
|
||||
@@ -23,19 +23,19 @@
|
||||
<table class="table-informatie-kas">
|
||||
<tr class="tr-informatie-kas">
|
||||
<td>Device </td>
|
||||
<td id="battery_data_device"></td>
|
||||
</tr>
|
||||
<tr class="tr-informatie-kas">
|
||||
<td id="batteryVoltage">{{battery_data[2]}}</td>
|
||||
</tr>
|
||||
<tr class="tr-informatie-kas">
|
||||
<td>Batterij Voltage</td>
|
||||
<td id="battery_data_voltage"></td>
|
||||
</tr>
|
||||
<tr class="tr-informatie-kas">
|
||||
<td id="batteryVoltage">{{battery_data[3]}}</td>
|
||||
</tr>
|
||||
<tr class="tr-informatie-kas">
|
||||
<td>Tijden</td>
|
||||
<td id="battery_data_time"></td>
|
||||
</tr>
|
||||
<td id="batteryVoltage">{{battery_data[1]}}</td>
|
||||
</tr>
|
||||
<tr class="tr-informatie-kas">
|
||||
<td>Tevredenheid</td>
|
||||
<td>-</td>
|
||||
<td id="batteryVoltage">{{battery_data[0]}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</article>
|
||||
|
||||
Reference in New Issue
Block a user