# Langzeitbelichtung Nachtfotografie – Datenvisualisierung

## Ziel
Diese Anwendung dient der Visualisierung und Analyse von Temperatur- und Bilddaten aus einem Langzeitbelichtungs-Experiment bei Nacht. Sie stellt Temperaturverläufe und aufgenommene Bilder dar, um Zusammenhänge zwischen Temperaturbedingungen und Bildqualität zu erforschen.

## Funktionsübersicht
- **Abruf und Anzeige** von Temperatur- und Bilddaten über eine API.
- **Liniendiagramm** zur Darstellung der Temperaturentwicklung über die Zeit.
- **Bildergalerie** mit Navigations- und Zoomfunktion.
- **Filterung** nach Zeit oder Temperaturwerten.
- **Responsive Gestaltung** für Desktop und mobile Geräte.
- **Visuelle Zusammenfassung** mit Durchschnittstemperatur und Anzahl der verwendbaren Bilder.

## Datenfluss
1. Beim Laden des Frontends wird ein GET-Request an die API-Route `/data` gesendet.
2. Die API liefert ein JSON-Objekt im folgenden Format:
   ```json
   {
     "temperatures": [
       {"timestamp": "2026-03-24T22:00:00Z", "value": 12.3},
       {"timestamp": "2026-03-24T23:00:00Z", "value": 11.9}
     ],
     "images": [
       {"filename": "img_001.jpg", "timestamp": "2026-03-24T22:00:00Z", "metadata": {"exposure": "60s"}}
     ]
   }
   ```
3. JavaScript verarbeitet diese Daten und rendert:
   - ein Temperaturdiagramm,
   - eine interaktive Galerie,
   - statistische Auswertungen (z. B. Durchschnittstemperatur).
4. Benutzerinteraktionen (z. B. Filterung) führen zur Neuberechnung und Aktualisierung der Visualisierungen im DOM.

## API-Nutzung
### Route: `/data`
- **Methode:** GET
- **Verwendung:** Abruf gesammelter Temperatur- und Bilddaten.
- **Erwarteter Response:**
  ```json
  {
    "temperatures": [ {"timestamp": string, "value": number} ],
    "images": [ {"filename": string, "timestamp": string, "metadata": object} ]
  }
  ```

Die Daten werden von `js/api.js` abgefragt und im Frontend verarbeitet.

## Struktur
```
.
├── index.html               # Einstiegspunkt
├── css/
│   ├── styles.css           # Layout und Komponenten-Styling
│   └── responsive.css       # Zusätzliche responsive Anpassungen
├── js/
│   ├── api.js               # API-Kommunikation
│   ├── chart.js             # Liniendiagramm-Rendering
│   ├── gallery.js           # Bildergalerie und Zoomfunktionen
│   └── filters.js           # Filterlogik
└── README.md                # Projektdokumentation (diese Datei)
```

## Responsives Design
- **Mobile-first:** Basislayout für kleine Bildschirme; stufenweise Skalierung bis Desktop.
- **Fluid Layout:** relative Größen (rem, %) und CSS-Variablen.
- **Barrierefreiheit:** semantische HTML-Struktur, ARIA-Attribute bei dynamischen Inhalten.

## Nutzung
1. Lokalen Server starten oder Projekt auf Webserver bereitstellen.
2. API unter `/data` muss erreichbar sein.
3. Browser öffnen und `index.html` laden.
4. Mit Filtern oder Zooms interagieren, um Datenausschnitte zu analysieren.

## Lizenz & Copyright
© 2026 Donau2Space.de