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):

[
  {
    "timestamp": "2026-06-18T21:45:10Z",
    "vbat": 11.8,
    "ir_gain": 4,
    "drift": 0.12,
    "event_flag": "REINIT"
  }
]

Nutzung

Projektverzeichnis im Browser öffnen oder über lokalen Server bereitstellen.
Die Anwendung ruft automatisch /data ab und zeigt Diagramme und Ereignisse an.
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.

2.4 KiB Raw Blame History Unescape Escape