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

Final Versie!

Browse Source
This commit is contained in:
Atilla
2024-04-14 12:17:21 +02:00
parent ff93fa9af2
commit 7d0a2bf2f8
5 changed files with 94 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
ReadMe.md
View File

@@ -26,7 +26,6 @@ Zorg dat je in de hoofdmap "GoodGarden" zit. Kijk in je path: "../GoodGarden". A
pip install mysql-connector-python
pip install requests
pip install flask-cors
pip install Flask-SQLAlchemy
## Gebruik
@@ -42,7 +41,7 @@ Zorg dat je in de hoofdmap "GoodGarden" zit. Kijk in je path: "../GoodGarden". A
## Versiebeheer
We gebruiken [Github](https://github.com) voor versiebeheer. Voor de beschikbare versies, zie de [GoodGarden](https://github.com/6028570/GoodGarden).
We gebruiken [Github](https://github.com) voor versiebeheer. Voor de beschikbare versies, zie de [GoodGarden](https://github.com/Znooptokkie/GoodGarden).
De branch "oomen" is up to date. Het mergen ging niet helemaal goed dus we hebben het niet met "main" gemerged.

12
src/py/script/json/plants.json
View File

@@ -10,5 +10,17 @@
"plant_naam": "ergerg",
"plantensoort": "ergerwgergerg",
"plant_geteelt": 1
},
{
"id": 16,
"plant_naam": "sdfsf",
"plantensoort": "ewfewfwf",
"plant_geteelt": 1
},
{
"id": 17,
"plant_naam": "34t3t34t34t",
"plantensoort": "343245345345",
"plant_geteelt": 1
}
]

2
src/py/static/css/style.scss
View File

@@ -1,6 +1,8 @@
$primary-color: rgb(171, 211, 174);
$secondary-color: rgb(143, 188, 143);
$titel-color: rgb(46, 86, 81);
@import url("https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap");

94
src/py/static/js/grafiek.js
View File

@@ -34,7 +34,7 @@ class LineChart
* @param {Array<number>} data - Data points for the chart, one per x-label.
* @param {Array<number|string>} [yLabels=["", 10, 15, 20, 25, 30, 35, 40]] - Labels for the y-axis.
*/
drawChart(xLabels, data, yLabels = ["", 10, 15, 20, 25, 30, 35, 40])
drawChart(xLabels, data, yLabels = [0, 5, 10, 15, 20, 25, 30, 35, 40])
{
if (!this.canvas)
{
@@ -44,9 +44,11 @@ class LineChart
this.clearCanvas();
const graphWidth = this.canvas.width - this.padding * 2;
const graphHeight = this.canvas.height - this.padding * 2;
const maxValue = Math.max(...yLabels);
const graphScale = graphHeight / maxValue;
// Draw the axes
this.ctx.strokeStyle = "rgb(143, 188, 143)";
this.ctx.strokeStyle = "rgb(46, 86, 81)";
this.ctx.beginPath();
this.ctx.moveTo(this.padding, this.padding);
this.ctx.lineTo(this.padding, this.canvas.height - this.padding);
@@ -55,62 +57,104 @@ class LineChart
// Calculate increments for plotting points
const xIncrement = graphWidth / (xLabels.length - 1);
const yIncrement = graphHeight / (yLabels.length - 1);
// Plot the data points
// Plot the data points and draw the line
this.ctx.strokeStyle = "rgb(191, 215, 182)";
this.ctx.beginPath();
this.ctx.moveTo(this.padding, this.canvas.height - this.padding - (data[0] / 100) * graphHeight);
let xPos = this.padding;
let yPos = this.canvas.height - this.padding - (data[0] * graphScale);
this.ctx.moveTo(xPos, yPos);
for (let i = 1; i < data.length; i++)
{
const xPos = this.padding + i * xIncrement;
const yPos = this.canvas.height - this.padding - (data[i] / 100) * graphHeight;
xPos = this.padding + i * xIncrement;
yPos = this.canvas.height - this.padding - (data[i] * graphScale);
this.ctx.lineTo(xPos, yPos);
}
this.ctx.stroke();
// Draw points on the line and temperature labels
this.ctx.fillStyle = "rgb(46, 86, 81)";
for (let i = 0; i < data.length; i++)
{
xPos = this.padding + i * xIncrement;
yPos = this.canvas.height - this.padding - (data[i] * graphScale);
// Draw point for each data entry
this.ctx.beginPath();
this.ctx.arc(xPos, yPos, 3, 0, Math.PI * 2);
this.ctx.fill();
// Draw temperature values beside each point
this.ctx.fillStyle = "rgb(46, 86, 81)";
this.ctx.fillText(data[i] + "°C", xPos + 10, yPos - 10);
}
// Draw y-axis labels
this.ctx.fillStyle = "black";
this.ctx.textAlign = "right";
this.ctx.textBaseline = "middle";
yLabels.forEach((label, i) =>
this.ctx.textBaseline = "middle"; // Center the text vertically
for (let i = 0; i < yLabels.length; i++)
{
if (label !== "")
{
const yPos = this.canvas.height - this.padding - i * yIncrement;
const label = yLabels[i];
// Calculate the y position for the label
yPos = this.canvas.height - this.padding - (label * graphScale);
this.ctx.fillText(label, this.padding - 10, yPos);
}
});
// Draw x-axis labels
this.ctx.textAlign = "center";
xLabels.forEach((label, i) =>
this.ctx.textBaseline = "alphabetic"; // Default vertical alignment for text
for (let i = 0; i < xLabels.length; i++)
{
if (label !== "")
xPos = this.padding + i * xIncrement;
if (xLabels[i] !== "")
{
const xPos = this.padding + i * xIncrement;
this.ctx.fillText(label, xPos, this.canvas.height - this.padding + 20);
this.ctx.fillText(xLabels[i], xPos, this.canvas.height - this.padding + 20);
}
});
}
}
}
/**
* Fetches weather data from an API and draws a line chart with the fetched data.
* @param {LineChart} chart - The LineChart instance to draw on.
* @param {string} apiUrl - The URL to fetch the weather data from.
*/
function fetchWeatherDataAndDrawChart(chart, apiUrl)
{
function fetchWeatherDataAndDrawChart(chart, apiUrl) {
fetch(apiUrl)
.then(response => response.ok ? response.json() : Promise.reject('Network response was not ok.'))
.then(data =>
{
const dates = data.weather_forecast.map(day => day.dag);
const temperatures = data.weather_forecast.map(day => day.max_temp);
.then(data => {
const dates = data.weather_forecast.map(item => {
// Split the date string
const [day, month, year] = item.dag.split('-').map(Number);
// Create a new Date object (Month is 0-based in JavaScript)
const date = new Date(year, month - 1, day);
// Map days to Dutch weekdays
const weekdays = ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'];
const weekday = weekdays[date.getDay()];
// Format the date string
// return `${weekday} ${String(day).padStart(2, '0')}-${String(month).padStart(2, '0')}`;
return `${weekday}`;
});
const temperatures = data.weather_forecast.map(item => item.max_temp);
// Draw the chart with the transformed dates and temperatures
chart.drawChart(dates, temperatures);
})
.catch(error => console.error('There was a problem with the fetch operation:', error));
}
// Utility function to return the weekday in Dutch
function getWeekday(date) {
const options = { weekday: 'short' };
return date.toLocaleDateString('nl-NL', options);
}
const myChart = new LineChart("myCanvas");
fetchWeatherDataAndDrawChart(myChart, "http://127.0.0.1:5000/weather");

2
src/py/templates/pomp_informatie.html
View File

@@ -57,7 +57,7 @@
<!-- Weergave van zonlichtdata in een grafiek -->
<article class="grafiek">
<article class="grafiek-innerbox">
<h2>Waterverbruik</h2>
<h2>Temperatuur</h2>
<canvas
id="myCanvas"
class="canvas-informatie-kas"