101 lines
3.3 KiB
Markdown
101 lines
3.3 KiB
Markdown
# Web-Interface für Magnetfeld-Analyse in Passau
|
||
|
||
## Zweck
|
||
Diese Webanwendung dient zur **Visualisierung und Analyse von Magnetometerdaten** aus Messungen in Passau. Die Benutzeroberfläche erlaubt es, zeitabhängige Magnetfeldverläufe und spektrale Auswertungen zu betrachten, Analysemetriken wie Durchschnittswerte oder Rauschanteile zu vergleichen und Daten interaktiv zu filtern.
|
||
|
||
---
|
||
|
||
## Hauptfunktionen
|
||
- Visualisierung von Magnetometerdaten in Zeitreihen- und Spektraldiagrammen
|
||
- Anzeige von Analyseergebnissen wie Durchschnittswerten, Peaks und Noise-Statistiken
|
||
- Filterung nach Zeitfenster und Magnetometer
|
||
- Interaktive Diagramme mit Zoom- und Hover-Funktion
|
||
- Automatisches Nachladen neuer Analyseergebnisse per API
|
||
- Responsives Layout, optimiert für Desktop- und Mobilgeräte
|
||
|
||
---
|
||
|
||
## Setup
|
||
### Voraussetzungen
|
||
- Moderner Webbrowser (Chrome, Firefox, Edge, Safari)
|
||
- Node.js (>= 18) empfohlen zum lokalen Hosting
|
||
|
||
### Lokale Entwicklung
|
||
```bash
|
||
# Repository klonen
|
||
git clone <repository-url>
|
||
cd data_visualization_web_ui
|
||
|
||
# Lokalen Server starten (z. B. mit serve)
|
||
npm install -g serve
|
||
serve .
|
||
```
|
||
|
||
### Deployment
|
||
Die Anwendung kann auf jedem statischen Webserver betrieben werden. API-Endpunkte müssen unter derselben Domain oder mit CORS-Konfiguration erreichbar sein.
|
||
|
||
---
|
||
|
||
## API-Routen
|
||
|
||
| Route | Methode | Beschreibung | Erwartete Parameter | Antwortstruktur |
|
||
|-------|----------|---------------|---------------------|------------------|
|
||
| `/api/data` | GET | Abruf der Magnetometer-Messdaten | `time_range`, `sensor_id` | Array von Objekten `{ timestamp, sensor, Bx, By, Bz }` |
|
||
| `/api/analysis` | GET | Abruf der Analysemetriken (Durchschnitt, Peaks etc.) | – | Objekt `{ mean, peaks, noise, drift }` |
|
||
|
||
### Beispiel: Anfragen
|
||
```js
|
||
// Abruf der Messdaten
|
||
fetch('/api/data?time_range=last_24h&sensor_id=1')
|
||
.then(res => res.json())
|
||
.then(console.log);
|
||
|
||
// Abruf der Analyseergebnisse
|
||
fetch('/api/analysis')
|
||
.then(res => res.json())
|
||
.then(console.log);
|
||
```
|
||
|
||
---
|
||
|
||
## Datenfluss
|
||
1. JavaScript-Module laden die Daten asynchron über `/api/data` und `/api/analysis`.
|
||
2. Die Daten werden gefiltert, analysiert und an die Visualisierungskomponenten weitergegeben.
|
||
3. HTML-Komponenten werden dynamisch aktualisiert, um Diagramme und Statistiken anzuzeigen.
|
||
4. Benutzerinteraktionen (Zoom, Filter) lösen neue API-Anfragen aus und aktualisieren die Visualisierungen.
|
||
|
||
---
|
||
|
||
## Strukturübersicht
|
||
```
|
||
project_root/
|
||
├── index.html
|
||
├── css/
|
||
│ ├── main.css
|
||
│ └── responsive.css
|
||
├── js/
|
||
│ ├── app.js # Einstiegspunkt, Initialisierung
|
||
│ ├── api.js # API-Requests (fetch /api/data, /api/analysis)
|
||
│ ├── charts.js # Visualisierung (Zeitreihen, Spektren)
|
||
│ └── ui.js # DOM-Updates, Filter, Interaktion
|
||
└── README.md # Diese Datei
|
||
```
|
||
|
||
---
|
||
|
||
## Sicherheit & Datenschutz
|
||
- Keine personenbezogenen Daten werden übertragen oder gespeichert.
|
||
- API-Zugriffe beschränken sich auf wissenschaftliche Messdaten.
|
||
- Kommunikation mit Backend sollte über HTTPS erfolgen.
|
||
|
||
---
|
||
|
||
## Barrierefreiheit & Responsiveness
|
||
- Nutzung semantischer HTML-Elemente (`<main>`, `<section>`, `<nav>`, `<footer>`)
|
||
- Anpassung der Layouts an verschiedene Viewports (Mobile First)
|
||
- ARIA-Attribute zur Unterstützung von Screenreadern
|
||
|
||
---
|
||
|
||
## Lizenz & Copyright
|
||
© 2026 Donau2Space.de
|