abschlussarbeit/webserver/templates/index.html
mia 70c4de1a30 Added webserver font
Added bigger example data
Html changes in formating and in function
Json now gets Read in a function
Matplotlib now uses the 'Agg' backend
Modified gitignore
2025-06-02 08:52:31 +02:00

73 lines
2.1 KiB
HTML

<!-- Copyright 2025 Kieler, Chiara -->
<!---->
<!-- Licensed under the AGPLv3.0 (the "License"); -->
<!-- You may not use this file except in compliance with the License. -->
<!-- You may obtain a copy of the License at -->
<!---->
<!-- https://www.gnu.org/licenses/ -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link
rel="shortcut icon"
href="{{ url_for('static', filename='favicon.ico') }}"
/>
<title>Sensor Data</title>
<style>
@font-face {
font-family: 'CaskaydiaCove Nerd Font';
src: url('/static/CaskaydiaCove-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
* {
font-family: "CaskaydiaCove Nerd Font";
font-size: 18px;
color: white;
background: #1c1c1c;
}
.container {
display: flex; /* Enable flexbox */
justify-content: space-between; /* Optional: space between items */
}
.imgbox {
background-color: #4CAF50; /* Background color for the boxes */
display: flex; /* Enable flexbox for inner content */
justify-content: right; /* Center text horizontally */
}
.txtbox {
background-color: #C4FA05; /* Background color for the boxes */
justify-content: left; /* Center text horizontally */
}
</style>
</head>
<body>
<div class = "container">
<div class = "txtbox">
<h1>Sensor Readings</h1>
</div>
</div>
<h2>{% for sensor in data.items() %}</h2>
<hr>
<h2>{{ sensor[1].getId() }}[{{ sensor[1].getType() }}]</h2>
<h3>{{ sensor[1].renderPlot() }}</h3>
<div class = "container">
<div class = "txtbox">
<ul>
{% for key,value in sensor[1].getReadingsTimeDate().items() %}
<li>{{ key }}» {{ value }}{{ sensor[1].getUnit() }}</li>
{% endfor %}
</ul>
</div>
<div class = "imgbox">
<img
src="{{ url_for('static', filename='plots/' + sensor[1].getId() + '.png') }}"
alt="Graph"
/>
</div>
</div>
{% endfor %}
</body>
</html>