99 lines
No EOL
2.9 KiB
Markdown
99 lines
No EOL
2.9 KiB
Markdown
# Datenvisualisierung – Nachtfotografie ISS-Jagd
|
||
|
||
## Überblick
|
||
Diese Anwendung ist eine Weboberfläche zur **interaktiven Analyse und Visualisierung von Messdaten** aus dem Nachtfotografie-Experiment zur **Beobachtung der Internationalen Raumstation (ISS) im Nebel**.
|
||
|
||
Ziel ist es, über eine einheitliche Benutzeroberfläche Messdaten dynamisch zu laden, visuell darzustellen und auf Basis von Filteroptionen auszuwerten.
|
||
|
||
---
|
||
|
||
## Hauptfunktionen
|
||
- **Interaktive Diagramme** zur Anzeige von Temperatur, Luftfeuchtigkeit und Signalintensität
|
||
- **Datenabruf** über die API-Route `/data`
|
||
- **Filterfunktionen** nach Zeitintervallen und Belichtungsparametern
|
||
- **Responsive Darstellung** für Desktop-, Tablet- und Mobilgeräte
|
||
- **Hervorhebung der ISS-Phasen** auf dem Diagramm
|
||
- **Live-Update** bei eintreffenden Messdaten
|
||
- **Tooltip-Interaktionen** für Detailinformationen
|
||
|
||
---
|
||
|
||
## Datenfluss
|
||
1. **Abruf der Messdaten** über `GET /data`
|
||
2. Verarbeitung im Modul **dataHandler** (Parsing, Filterung, Sortierung)
|
||
3. Übergabe an **chartRenderer** zur visuellen Darstellung
|
||
4. **DOM-Update** bei Filteränderung oder neuen Daten
|
||
|
||
```txt
|
||
Nutzer → UI-Filter → dataHandler → chartRenderer → DOM
|
||
```
|
||
|
||
---
|
||
|
||
## API-Details
|
||
### Route: `/data`
|
||
**Methode:** GET
|
||
|
||
**Zweck:** Abrufen der Messdaten zur Visualisierung.
|
||
|
||
**Optionale Query-Parameter:**
|
||
- `filter` – definiert etwa Zeitintervalle oder Belichtungsbereiche
|
||
|
||
**Erwartete Antwort:**
|
||
Ein Array von Messobjekten:
|
||
```json
|
||
[
|
||
{
|
||
"timestamp": "2026-02-22T22:01:00Z",
|
||
"temperature": 3.4,
|
||
"humidity": 87.2,
|
||
"iso": 800,
|
||
"exposure_time": 15.0,
|
||
"brightness": 0.76
|
||
}
|
||
]
|
||
```
|
||
|
||
---
|
||
|
||
## Aufbau des Projektes
|
||
```txt
|
||
/ (Root)
|
||
│
|
||
├── index.html # Einstiegspunkt der Anwendung
|
||
├── css/
|
||
│ ├── style.css # Layout & Theme
|
||
│ └── responsive.css # Responsive Anpassungen
|
||
├── js/
|
||
│ ├── app.js # App-Initialisierung & Event-Handling
|
||
│ ├── api.js # Datenabruf von /data
|
||
│ ├── dataHandler.js # Verarbeitung & Filterung der Daten
|
||
│ └── chartRenderer.js # Erstellung & Aktualisierung der Diagramme
|
||
└── README.md # Diese Datei
|
||
```
|
||
|
||
---
|
||
|
||
## Nutzung
|
||
1. **Server starten**, der die API `/data` bereitstellt.
|
||
2. Die `index.html` im Browser öffnen.
|
||
3. Messdaten werden automatisch geladen und dargestellt.
|
||
4. Filter- oder Zeitbereich im Interface wählen, um Diagramme anzupassen.
|
||
|
||
---
|
||
|
||
## Barrierefreiheit & Responsiveness
|
||
- **Semantische HTML-Struktur** (header, main, footer, section)
|
||
- **ARIA-Attribute** für interaktive Elemente
|
||
- **Mobile-first Designansatz** mit CSS-Variablen für Abstände, Farben und Breakpoints
|
||
|
||
---
|
||
|
||
## Sicherheit und Datenschutz
|
||
- Es werden keine personenbezogenen Daten gespeichert oder verarbeitet.
|
||
- API-Zugriffe sind read-only (GET) und erfordern keine Authentifizierung.
|
||
|
||
---
|
||
|
||
## Lizenz & Urheberrecht
|
||
© 2026 Donau2Space.de – Alle Rechte vorbehalten. |