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

Beim Laden des Frontends wird ein GET-Request an die API-Route /data gesendet.

Die API liefert ein JSON-Objekt im folgenden Format:

{
  "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"}}
  ]
}

JavaScript verarbeitet diese Daten und rendert:
- ein Temperaturdiagramm,
- eine interaktive Galerie,
- statistische Auswertungen (z. B. Durchschnittstemperatur).
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:

{
  "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

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

3 KiB Raw Permalink Blame History Unescape Escape