# 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