| .. | ||
| css | ||
| js | ||
| index.html | ||
| README.md | ||
WLAN Sternenhimmel Ilzstausee – Echtzeit-WLAN-Datenvisualisierung
Überblick
Diese Webanwendung dient der interaktiven, webbasierten Visualisierung von in Echtzeit erfassten WLAN-Daten rund um den Ilzstausee. Kernstück ist eine dynamisch erzeugte Heatmap, die Signalstärken und relevante Metadaten (SSID, Frequenz, RSSI, SNR) georeferenziert darstellt.
Die Anwendung ist Teil des Experiment-Schlüssels: wlan_sternenhimmel_ilzstausee mit dem Artefakt data_visualization.
Zielsetzung
Die visualisierten Daten sollen:
- Signalverteilungen im Gelände sichtbar machen,
- Frequenzabhängige Abdeckungen im 2,4 GHz- und 5 GHz-Band untersuchen,
- Dynamische Änderungen (z. B. durch Bewegungen oder Interferenzen) in Echtzeit darstellen.
Hauptfunktionen
- Echtzeit-Heatmap: Darstellung der Signalstärke über Geokoordinatenpunkte.
- Metadatenanzeige: Anzeige von SSID, Frequenz, RSSI und SNR für jeden Messpunkt.
- Kartensteuerung: Zoom, Pan, Layer-Umschaltung (z. B. zwischen Satellit und Standardkarte).
- Frequenzfilter: Auswahl zwischen 2.4 GHz und 5 GHz Messwerten.
- Legende & Statistik: Anzeige von minimalen, maximalen und durchschnittlichen Signalstärken.
- Responsive Design: Optimiert für Desktop- und Tabletgeräte.
- Automatische Aktualisierung: Regelmäßige Erneuerung der Anzeige bei neuen Daten vom ESP32.
System- und Datenfluss
- Datenerfassung: ESP32-Module scannen lokale WLANs und erfassen Standort- sowie Signalstärkeinformationen.
- Übertragung: Die Messdaten werden in regelmäßigen Intervallen als JSON-Objekte (Struktur:
heatmap_data) an den Webserver weitergegeben. - Interpretation im Browser: JavaScript-Module nehmen diese Strukturen entgegen, parsen sie und aktualisieren:
- Die Heatmap-Darstellung im Canvas- oder SVG-Element.
- Die numerischen Statistiken im UI.
- Interaktive Steuerung: Nutzer können Filteroptionen anwenden, um spezifische Frequenzbereiche oder Netzwerktypen auszuwählen.
Ordnerstruktur
/data_visualization
│
├── index.html # Hauptoberfläche mit Karten- und Statistiklayout
├── css/
│ ├── main.css # Hauptstyling inkl. Layout, Heatmap-Layer, Responsive-Design
├── js/
│ ├── app.js # Einstiegspunkt, Initialisierung der Karte und Datenverarbeitung
│ ├── heatmap.js # Datenrendering und Layer-Aktualisierung
│ ├── filters.js # Frequenzband- und Metadatenfilter
│ ├── stats.js # Berechnung und Anzeige von Signalstatistiken
├── assets/ # (optional, keine externen Bilder/Grafiken)
└── README.md # Dieses Dokument
Funktionsweise der Echtzeit-Heatmap
- Initialisierung: Beim Laden öffnet sich eine Kartendarstellung über dem Ilzstausee.
- Heatmap-Layer: Die Messpunkte werden nach Signalstärke eingefärbt und überlagert.
- Web-Update: Bei neuen Datensätzen wird die Heatmap ohne Neuladen des Fensters aktualisiert.
- Statistikfeld: Zeigt kontinuierlich Mittelwerte und Extremwerte an, synchron mit der Heatmap.
Nutzungshinweise
- Für produktive Nutzung wird empfohlen, die Anwendung über einen lokalen oder entfernten Webserver (z. B.
http://localhost) auszuführen. - Datenquellen müssen im gleichen Netzwerk bereitgestellt oder serverseitig weitergeleitet werden.
- Unterstützte Browser: Aktuelle Versionen von Firefox, Chrome oder Edge.
- Keine externen Frameworks oder Bildressourcen notwendig.
Lizenz
© 2026 Donau2Space.de
Dieses Projekt ist ausschließlich zu Forschungs- und Visualisierungszwecken vorgesehen und enthält keine proprietären oder urheberrechtlich geschützten Inhalte Dritter.