diff --git a/data_visualization/README.md b/data_visualization/README.md new file mode 100644 index 0000000..97dafb2 --- /dev/null +++ b/data_visualization/README.md @@ -0,0 +1,76 @@ +# 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 +1. **Datenerfassung:** ESP32-Module scannen lokale WLANs und erfassen Standort- sowie Signalstärkeinformationen. +2. **Übertragung:** Die Messdaten werden in regelmäßigen Intervallen als JSON-Objekte (Struktur: `heatmap_data`) an den Webserver weitergegeben. +3. **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. +4. **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 +1. **Initialisierung:** Beim Laden öffnet sich eine Kartendarstellung über dem Ilzstausee. +2. **Heatmap-Layer:** Die Messpunkte werden nach Signalstärke eingefärbt und überlagert. +3. **Web-Update:** Bei neuen Datensätzen wird die Heatmap ohne Neuladen des Fensters aktualisiert. +4. **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. \ No newline at end of file