# 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 <repository-url>
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 (`<main>`, `<section>`, `<header>`, `<footer>`)
- ARIA-Attribute unterstützen Screenreader
- Mobile-First CSS Design

## Sicherheit & Datenschutz
- API-Kommunikation nur über HTTPS
- Keine Speicherung personenbezogener Daten
- CSRF- & XSS-Schutz in geplanten PHP-Komponenten berücksichtigt

## Lizenz & Copyright
© 2026 Donau2Space.de