Mika/robot_night_logging
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add data_visualization/index.html

Browse source
This commit is contained in:
Mika 2026-05-10 02:07:39 +00:00
commit 1a4868c9cf
1 changed files with 73 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
data_visualization/index.html Normal file
View file

@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Robot Night Logging – Telemetrieanalyse</title>
<link rel="stylesheet" href="css/style.css" />
<script type="module" src="js/app.js" defer></script>
</head>
<body>
<header class="app-header" role="banner">
<h1>Robot Night Logging – Telemetrieanalyse</h1>
<div class="app-header__status" aria-live="polite">
<span class="app-header__connection">Verbindung: <span id="connection-status">Offline</span></span>
<span class="app-header__time" id="current-time" aria-label="Aktuelle Zeit"></span>
</div>
</header>
<main>
<section class="filter-panel" aria-label="Filtersteuerung">
<form id="filter-form">
<fieldset>
<legend>Zeitraum</legend>
<label for="time-range-start">Start:</label>
<input type="datetime-local" id="time-range-start" name="time_range_start" />
<label for="time-range-end">Ende:</label>
<input type="datetime-local" id="time-range-end" name="time_range_end" />
</fieldset>
<fieldset>
<legend>IR-Gain</legend>
<select id="ir-gain" name="ir_gain">
<option value="">Alle</option>
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
</fieldset>
<fieldset>
<legend>Materialtyp</legend>
<select id="material-type" name="material_type">
<option value="">Alle</option>
<option value="asphalt">Asphalt</option>
<option value="beton">Beton</option>
<option value="sand">Sand</option>
</select>
</fieldset>
<button type="submit">Filter anwenden</button>
</form>
</section>
<section class="chart-container" aria-label="Diagrammbereich">
<div id="chart-ir-gain" class="chart" aria-label="IR-Gain Verlauf"></div>
<div id="chart-vbat" class="chart" aria-label="Batteriespannung Verlauf"></div>
<div id="chart-drift" class="chart" aria-label="Drift Verlauf"></div>
</section>
<section class="event-log" aria-label="Ereignisprotokoll">
<h2>Ereignisse</h2>
<ul id="event-list">
<!-- Dynamisch generierte Ereignisse -->
</ul>
</section>
</main>
<footer class="app-footer" role="contentinfo">
<p>© 2026 Donau2Space.de</p>
<p id="system-status" aria-label="Systemstatus">Status: Inaktiv</p>
</footer>
</body>
</html>