Add data_visualization/README.md

data_visualization/README.md

@@ -0,0 +1,77 @@
+# 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