120 lines
No EOL
3.7 KiB
Markdown
120 lines
No EOL
3.7 KiB
Markdown
# 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 |