75 lines
No EOL
3 KiB
Markdown
75 lines
No EOL
3 KiB
Markdown
# 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 |