77 lines
2.4 KiB
Markdown
77 lines
2.4 KiB
Markdown
# Data Visualization Interface – Robot Night Logging
|
||
|
||
## Zweck
|
||
Dieses Web-Frontend dient zur **Darstellung und Analyse von Telemetriedaten** eines Linienfolger-Roboters, insbesondere während Nachtversuchen mit verschiedenen **IR-Gain-Einstellungen** und **Materialbedingungen**. Die Oberfläche visualisiert Messgrößen wie Spannung, Drift, IR-Intensität und Ereignisse in interaktiven Diagrammen und Tabellen.
|
||
|
||
---
|
||
|
||
## Architekturüberblick
|
||
|
||
- **Frontend:** HTML/CSS/JavaScript – Responsive, dark-mode-orientiertes Layout
|
||
- **API-Backend:** `/data` – Liefert Telemetriedaten als JSON
|
||
- **Zielsystem:** Webbrowser (Desktop & Tablet, für Nachtbetrieb optimiert)
|
||
|
||
### Hauptdateien
|
||
|
||
| Datei | Zweck |
|
||
|--------|--------|
|
||
| `js/app.js` | Einstiegspunkt der Anwendung – Initialisierung, State-Management, Interaktionen |
|
||
| `js/api.js` | Definiert API-Funktionen, z. B. `fetchData()` für den Abruf der Telemetrie über `/data` |
|
||
| `js/visualizations.js` | Generiert Diagramme (IR-Gain, Drift, Spannungsverlauf) und aktualisiert sie bei Filteränderungen |
|
||
| `css/style.css` | Enthält das Layout, Variablen und den Dark-Mode-Stil |
|
||
| `index.html` | Grundgerüst der Webanwendung, bindet JS-Module und Styles ein |
|
||
|
||
---
|
||
|
||
## API-Nutzung
|
||
|
||
**Route:** `/data`
|
||
|
||
**Methode:** `GET`
|
||
|
||
**Beschreibung:** Abrufen der Telemetriedaten des Nacht-Linienfolger-Experiments.
|
||
|
||
**Erwartete Parameter:**
|
||
```
|
||
time_range: ISO 8601 oder UNIX Range
|
||
ir_gain: numerischer Filterwert
|
||
material_type: Kennung des Versuchsmaterials
|
||
```
|
||
|
||
**Erwartete Struktur (Response):**
|
||
```json
|
||
[
|
||
{
|
||
"timestamp": "2026-06-18T21:45:10Z",
|
||
"vbat": 11.8,
|
||
"ir_gain": 4,
|
||
"drift": 0.12,
|
||
"event_flag": "REINIT"
|
||
}
|
||
]
|
||
```
|
||
|
||
---
|
||
|
||
## Nutzung
|
||
|
||
1. Projektverzeichnis im Browser öffnen oder über lokalen Server bereitstellen.
|
||
2. Die Anwendung ruft automatisch `/data` ab und zeigt Diagramme und Ereignisse an.
|
||
3. Filtereinstellungen (Zeitfenster, IR-Gain, Material) verändern Datendarstellung dynamisch.
|
||
|
||
---
|
||
|
||
## Erweiterungshinweise
|
||
|
||
Neue Versuchsdaten lassen sich einbinden, indem:
|
||
- **Neue Parameter** in `api.js` ergänzt und an `fetchData()` übergeben werden,
|
||
- **Weitere Diagrammtypen** in `visualizations.js` angelegt werden (z. B. Temperatur, Signal‑Noise‑Ratio),
|
||
- **Neue Styles** oder Dark-Mode-Varianten in `style.css` berücksichtigt werden.
|
||
|
||
Achten Sie auf konsistenten Aufbau und defensive Programmierung in JS und API-Kommunikation.
|
||
|
||
---
|
||
|
||
## Lizenz & Rechtliches
|
||
|
||
© 2026 Donau2Space.de
|