From 2529afd9fc4f0e6f066d8c1d6b690a94d8178068 Mon Sep 17 00:00:00 2001 From: Mika Date: Sun, 10 May 2026 02:07:41 +0000 Subject: [PATCH] Add data_visualization/README.md --- data_visualization/README.md | 77 ++++++++++++++++++++++++++++++++++++ 1 file changed, 77 insertions(+) create mode 100644 data_visualization/README.md diff --git a/data_visualization/README.md b/data_visualization/README.md new file mode 100644 index 0000000..de7ab3d --- /dev/null +++ b/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