diff --git a/data_visualization/README.md b/data_visualization/README.md new file mode 100644 index 0000000..0f69968 --- /dev/null +++ b/data_visualization/README.md @@ -0,0 +1,120 @@ +# Datenvisualisierung für Langzeitbelichtungs-Experimente + +## Überblick +Diese Webanwendung visualisiert Umweltdaten (Temperatur, Windgeschwindigkeit, Luftfeuchtigkeit) und analysierte Bilddaten aus Langzeitbelichtungs-Experimenten. Sie ermöglicht Wissenschaftlern und Technikern die Untersuchung von Trends, Korrelationen und Bildanalysen über Zeitintervalle hinweg. + +## Ziel +- Darstellung von Echtzeit- und historischen Umweltdaten +- Interaktive Diagramme zur Trendanalyse +- Bildgalerie mit Zoomfunktion zur Darstellung analysierter Bilddaten +- Filterfunktionen nach Zeitintervallen und Sensoren +- Responsives Design für Desktop und Mobilgeräte +- Automatische Datenaktualisierung über die bereitgestellte API + +## Architekturübersicht +### Datenfluss +1. Das Frontend fordert Messdaten und Bildinformationen über die API-Endpunkte `/data` und `/images` an. +2. Die Daten werden im JS aufbereitet und in Diagrammen und Galerien visualisiert. +3. Nutzerinteraktionen (Filtern, Zeitraumwahl) lösen erneute API-Requests aus. +4. Die UI aktualisiert sich dynamisch mit den neuen Daten. + +### Ordnerstruktur +``` +root/ +├── index.html +├── css/ +│ ├── styles.css +│ └── responsive.css +├── js/ +│ ├── api.js +│ ├── app.js +│ ├── ui.js +│ └── charts.js +├── README.md +└── assets/ (optional, keine Bilddateien innerhalb des Projekts) +``` + +## Setup & Installation +### Voraussetzungen +- Node.js (empfohlen Version ≥ 18) +- Moderner Browser mit ECMAScript 2020+ Unterstützung + +### Lokaler Start +```bash +git clone +cd data_visualization +npm install +npx serve . +``` +Danach im Browser `http://localhost:5000` öffnen. + +## API-Übersicht +### **GET /data** +**Beschreibung:** Liefert JSON mit Messwerten der Umweltsensoren. + +**Optionale Parameter:** +- `time_range`: Zeitraumfilter (`YYYY-MM-DD,YYYY-MM-DD`) +- `sensor_id`: Filter nach spezifischem Sensor + +**Beispielantwort:** +```json +[ + { + "timestamp": "2026-03-05T12:00:00Z", + "temperature": 24.3, + "wind_speed": 3.6, + "humidity": 45.2 + } +] +``` + +### **GET /images** +**Beschreibung:** Liefert Metadaten zu analysierten Langzeitbelichtungsbildern. + +**Optionale Parameter:** +- `start_time`, `end_time`: Zeitfilter + +**Beispielantwort:** +```json +[ + { + "url": "/images/2026_03_05_12_00_processed.png", + "capture_time": "2026-03-05T12:00:00Z", + "analysis_result": { + "exposure": 15.2, + "detail_level": "medium" + } + } +] +``` + +## Dateirollen +| Datei | Beschreibung | +| ------ | ------------- | +| `index.html` | Einstiegspunkt der Anwendung, lädt alle Komponenten | +| `css/styles.css` | Grundlegendes Layout, Farben, Abstände | +| `css/responsive.css` | Media Queries und responsive Anpassungen | +| `js/api.js` | Schnittstelle zur Backend-API, kümmert sich um Fetches | +| `js/app.js` | Zentrale Steuerung der Anwendung, orchestriert Datenabruf und UI-Updating | +| `js/ui.js` | Rendering und DOM-Interaktionen (Galerie, Diagramme, Filter) | +| `js/charts.js` | Erstellung und Aktualisierung interaktiver Diagramme | +| `README.md` | Dieses Dokument: Erklärung, Setup, Architektur | + +## Nutzung +1. APP starten und gewünschtes Zeitintervall im Filter wählen. +2. Diagramme zeigen Trends der Umweltdaten an. +3. Galerie erlaubt die Untersuchung der verarbeiteten Bilddaten. +4. System aktualisiert periodisch Live-Daten automatisch. + +## Barrierefreiheit & Responsivität +- HTML-Struktur folgt semantischen Standards (`
`, `
`, `
`, `