Joachim Hummel
51f9585781
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
220 lines
6.2 KiB
Markdown
220 lines
6.2 KiB
Markdown
# SDS-Feinstaubbelastung Datenvisualisierung
|
||
|
||
Eine interaktive Web-Anwendung zur Visualisierung von SDS-Feinstaubsensor-Daten (Particulate Matter) mit automatischer Ausreißer-Erkennung und Filterung.
|
||
|
||
|
||
|
||
## Funktionen
|
||
|
||
- **📊 Interaktive Visualisierung**: Zeitreihen-Darstellung von SDS_P1 und SDS_P2 Messwerten mit Chart.js
|
||
- **📁 Flexible Datenquellen**: Laden von JSON-Dateien oder direkt von API-Endpunkten
|
||
- **🔍 Automatische Ausreißer-Erkennung**: IQR-basierte (Interquartile Range) Filterung von fehlerhaften Messwerten
|
||
- **⚙️ Anpassbare Filter**: Manuelle Einstellung der Grenzwerte für SDS_P1 und SDS_P2
|
||
- **📈 Statistiken**: Automatische Berechnung von Durchschnittswerten, Datenpunktanzahl und Zeiträumen
|
||
- **🎨 Modernes Design**: Responsives Layout mit Gradient-Hintergrund und ansprechender Benutzeroberfläche
|
||
|
||
## Verwendung
|
||
|
||
### Lokal öffnen
|
||
|
||
Die Anwendung ist eine standalone HTML-Datei und kann direkt im Browser geöffnet werden:
|
||
|
||
```bash
|
||
# macOS
|
||
open feinstaub.html
|
||
|
||
# Linux
|
||
xdg-open feinstaub.html
|
||
|
||
# Windows
|
||
start feinstaub.html
|
||
```
|
||
|
||
Alternativ über einen lokalen Webserver:
|
||
|
||
```bash
|
||
python3 -m http.server 8000
|
||
```
|
||
|
||
Dann im Browser öffnen: `http://localhost:8000/feinstaub.html`
|
||
|
||
### Daten laden
|
||
|
||
**Option 1: JSON-Datei hochladen**
|
||
- Klicken Sie auf "JSON Datei laden"
|
||
- Wählen Sie eine JSON-Datei mit Sensordaten aus
|
||
|
||
**Option 2: Von API laden**
|
||
- Geben Sie die API-URL in das Eingabefeld ein
|
||
- Klicken Sie auf "Von API laden"
|
||
|
||
### Datenformat
|
||
|
||
Die Anwendung unterstützt folgende JSON-Formate:
|
||
|
||
```json
|
||
[
|
||
{
|
||
"Uhrzeit": "10:00:38",
|
||
"SDS_P1": 9.15,
|
||
"SDS_P2": 6.22,
|
||
"sensor_name": "Sensor-1"
|
||
},
|
||
{
|
||
"Uhrzeit": "10:15:36",
|
||
"SDS_P1": 9.75,
|
||
"SDS_P2": 5.97,
|
||
"sensor_name": "Sensor-1"
|
||
}
|
||
]
|
||
```
|
||
|
||
Oder als Objekt mit Daten-Array:
|
||
|
||
```json
|
||
{
|
||
"data": [
|
||
{ "Uhrzeit": "10:00:38", "SDS_P1": 9.15, "SDS_P2": 6.22, "sensor_name": "Sensor-1" }
|
||
]
|
||
}
|
||
```
|
||
|
||
**Unterstützte Zeitstempel-Felder** (in Reihenfolge der Priorität):
|
||
- `Uhrzeit`
|
||
- `timestamp`
|
||
- `Zeitstempel`
|
||
- `created_at`
|
||
|
||
## NocoDB-Setup
|
||
|
||
Für die automatische Datenerfassung und -speicherung muss eine NocoDB-Datenbank mit folgender Tabellenstruktur eingerichtet werden:
|
||
|
||
### Erforderliche Tabellenspalten
|
||
|
||
| Spaltenname | Typ | Beschreibung |
|
||
|-------------|-----|--------------|
|
||
| `Title` | Text | Optionaler Titel (kann leer bleiben) |
|
||
| `SDS_P1` | Number | Feinstaub PM10-Wert |
|
||
| `SDS_P2` | Number | Feinstaub PM2.5-Wert |
|
||
| `sensor_name` | Text | Bezeichnung des Sensors zur Unterscheidung mehrerer Sensoren |
|
||
| `BME280_Temperature` | Number | Temperatur in °C |
|
||
| `BME280_Humidity` | Number | Luftfeuchtigkeit in % |
|
||
| `BME280_Pressure` | Number | Luftdruck (optional) |
|
||
| `Datum` | Date/Text | Datum im Format TT/MM/YYYY |
|
||
| `Uhrzeit` | Time/Text | Uhrzeit im Format HH:MM:SS |
|
||
|
||
**Hinweis**: Die genaue Struktur ist in der CSV-Datei `1763107744883.csv` zu finden, die als Vorlage dienen kann.
|
||
|
||
## n8n Workflows
|
||
|
||
Das Projekt enthält zwei n8n-Workflows für die Automatisierung:
|
||
|
||
### 1. Datensammlung (`feinstaub-daten.json`)
|
||
|
||
**Zweck**: Automatisches Sammeln von Sensordaten und Speichern in NocoDB
|
||
|
||
**Workflow-Schritte**:
|
||
1. **Schedule Trigger**: Läuft alle 15 Minuten automatisch
|
||
2. **HTTP Request**: Ruft Daten von `https://feinstaub.example.com/data.json` ab
|
||
3. **NocoDB Create**: Schreibt die Sensordaten in die NocoDB-Tabelle
|
||
|
||
**Import in n8n**:
|
||
```bash
|
||
# Workflow in n8n importieren
|
||
# Settings → Import from File → feinstaub-daten.json auswählen
|
||
```
|
||
|
||
**Konfiguration**:
|
||
- NocoDB API-Token einrichten
|
||
- Project-ID und Table-ID anpassen
|
||
- Sensor-URL bei Bedarf ändern
|
||
|
||
### 2. Daten-Webhook (`feinstaub-webhook.json`)
|
||
|
||
**Zweck**: API-Endpunkt für die Visualisierung
|
||
|
||
**Workflow-Schritte**:
|
||
1. **Webhook**: Empfängt Anfragen auf `/sds-data`
|
||
2. **NocoDB GetAll**: Liest alle Daten aus der Tabelle (SDS_P1, SDS_P2, Uhrzeit, sensor_name)
|
||
3. **JavaScript Code**: Filtert die letzten 50 Einträge
|
||
4. **Response**: Gibt JSON-Daten zurück
|
||
|
||
**Webhook-URL**: `https://n8n.unixweb.home64.de/webhook/sds-data`
|
||
|
||
**Verwendung**:
|
||
```javascript
|
||
// In feinstaub.html die API-URL anpassen:
|
||
const webhookUrl = 'https://n8n.unixweb.home64.de/webhook/sds-data';
|
||
```
|
||
|
||
## CSV-Export
|
||
|
||
Die Datei `1763107744883.csv` enthält exportierte Sensordaten im CSV-Format und dient als:
|
||
- Beispieldatei für die erwartete Datenstruktur
|
||
- Vorlage für NocoDB-Tabellendefinition
|
||
- Backup der Sensordaten
|
||
|
||
**CSV-Struktur**: Siehe NocoDB-Setup oben
|
||
|
||
## Ausreißer-Filterung
|
||
|
||
Die Anwendung verwendet eine statistische Methode zur automatischen Erkennung von Ausreißern:
|
||
|
||
1. **IQR-Methode**: Berechnung des Interquartilsabstands (Q3 - Q1)
|
||
2. **Obergrenze**: Q3 + (1,5 × IQR)
|
||
3. **95. Perzentil**: Zusätzliche Begrenzung auf das 95. Perzentil
|
||
|
||
Die automatisch erkannten Schwellenwerte können manuell über die Schieberegler angepasst werden.
|
||
|
||
## Technische Details
|
||
|
||
- **Framework**: Vanilla JavaScript (keine Build-Tools erforderlich)
|
||
- **Visualisierung**: Chart.js 3.9.1 (via CDN)
|
||
- **Styling**: Modernes CSS mit CSS Grid und Flexbox
|
||
- **Browser-Kompatibilität**: Moderne Browser (Chrome, Firefox, Safari, Edge)
|
||
|
||
## Architektur
|
||
|
||
```
|
||
feinstaub.html
|
||
├── HTML-Struktur
|
||
│ ├── Header mit Datei-Upload und API-Eingabe
|
||
│ ├── Filter-Sektion mit Schiebereglern
|
||
│ ├── Statistik-Karten
|
||
│ └── Chart-Container
|
||
├── CSS (eingebettet)
|
||
│ ├── Responsives Grid-Layout
|
||
│ ├── Gradient-Hintergrund
|
||
│ └── Komponentenstile
|
||
└── JavaScript (eingebettet)
|
||
├── Datenverarbeitung (processData, applyFilters)
|
||
├── Ausreißer-Erkennung (calculateOutlierThreshold)
|
||
├── Chart-Rendering (updateChart)
|
||
└── Event-Handler für Interaktionen
|
||
```
|
||
|
||
## Entwicklung
|
||
|
||
Da es sich um eine einzelne HTML-Datei handelt:
|
||
|
||
1. Datei `feinstaub.html` bearbeiten
|
||
2. Im Browser aktualisieren (F5)
|
||
3. Keine Kompilierung oder Build-Schritte erforderlich
|
||
|
||
## Beispieldaten
|
||
|
||
Die Anwendung enthält eingebettete Beispieldaten, die beim ersten Laden automatisch angezeigt werden. Diese können als Referenz für das erwartete Datenformat dienen.
|
||
|
||
## Autor
|
||
|
||
Entwickelt von **Joachim Hummel** (Next8AI)
|
||
|
||
- Website: [joachimhummel.de](https://joachimhummel.de)
|
||
|
||
## Lizenz
|
||
|
||
© 2025 Joachim Hummel. Alle Rechte vorbehalten.
|
||
|
||
## Links
|
||
|