Windkanal/GUI
Windtunnel-Online-GUI
Die Grafik zeigt den Aufbau und die Interaktion der verschiedenen Komponenten der Windtunnel-Online-GUI. Sie ist in zwei Hauptbereiche unterteilt: die Server-Seite und die Client-Seite, die jeweils unterschiedliche Aufgaben übernehmen.
Datenformat
In Bearbeitung und grade nur Notizen:
Für jeden Output der Simulation kann ein sogenannter Frame erstellt werden. Dieser Frame soll das betrachtete Feld (z. B. Dichtefeld) und die Geschwindigkeitsfelder in x- und y-Richtung für einen gegebenen zeitlichen Index enthalten. Ein solcher Frame wird bearbeitet und anschließend in binärer Form versendet. Der Aufbau ist dabei wie folgt:
Frame = header + frame_data
header = Byte {Version} + UInt32 {Länge eines frame_data in byte} + UInt32 {Checksum Validieren der übertragenen Daten}
frame_data = UInt32 {TimeIndex} + UInt32(2) {Shape = [ROWS, COLS]} + 3 * field_data
field_data = Float32 {min(feld)} + Float(32) {divider = (a_max - a_min) if a_max != a_min else 1} + UInt8(ROWS * COLS) {Feld Daten}
Diese Frames werden dann in einem Batch angefragt. Für eine Anzahl von N Zeitpunkten wird eine Anfrage gestellt. Für die jeweiligen Zeitpunkte wird dann ein Frame erstellt. Alle Frames werden anschließend in einer binären Nachricht hintereinander angeordnet (Batch). Die Nachricht wird dann mit LZ4 komprimiert und versendet. Also:
Batch = N * Frame
Auf der Client seite kann dann zunächst dekompremiert werden und dann decoded.
Wichtige Punkte TODO
- Wie sieht das Datenformat fürs Senden aus
- Gründe der Wahl
- Welche Struktur hat der Code der Client Visualisierung
- Modularer Aufbau für zukünftige Features und Maintainability
- Fehlersuche vereinfachen
Wahl des GUI-Frameworks
Die Auswahl eines GUI-Frameworks hängt stark von den gewünschten Funktionen ab. Zunächst erscheint Streamlit jedoch als eine geeignete Wahl zur Darstellung und Interaktion mit verschiedenen Datensätzen.
ThreeJS
Three.js ist eine JavaScript-Bibliothek, die zur Erstellung und Darstellung von 3D-Grafiken im Webbrowser genutzt werden kann. Mithilfe von Three.js werden Datenfelder direkt im Browser visualisiert, was eine interaktive und ansprechende Darstellung ermöglicht. Der Browser erhält die benötigten Datenfelder von einem Server, der ausschließlich für die Verarbeitung und Vorbereitung der Daten zuständig ist. Die eigentliche Visualisierung erfolgt dann clientseitig, wodurch Ressourcen effizient genutzt werden.
Ein Vorteil von Three.js ist die hohe Anpassbarkeit. Es kann genau das umgesetzt werden, was gewünscht ist, und es ermöglicht die Gestaltung moderner Oberflächen. Die Interaktivität ist durch die vielfältigen Module von Three.js sehr groß.
Ein Nachteil ist jedoch der aufwendige Implementationsprozess.
ThreeJS Prototyp
Um zu zeigen, dass ThreeJS eine gute Grundlage liefert um die Visualisierung des Online-Windtunnels entwickeln zu können, wurde folgender Prototyp entwickelt.
Es zeigt sich am Prototyp, dass das Konzept und die Grundidee funktionieren. Der zeitliche Verlauf im Windtunnel lässt sich untersuchen, wobei man zoomen, pausieren, spulen und die Simulationsparameter wechseln kann. In diesem ersten Prototyp wurden somit bereits alle grundlegenden Funktionalitäten eingebaut.
Probleme bestehen derzeit noch bei der Framerate, wenn die Anwendung nicht lokal ausgeführt wird. Dies kann aber voraussichtlich durch Performance-Verbesserungen behoben werden. Ein Vorteil, der sich aufzeigt, ist, dass alle Wege offenstehen und grundsätzlich alle Ideen theoretisch umsetzbar sind.
ThreeJS 2.0
Zu jetztigen Zeitpunkt gilt es für das Windtunnel Projekt ein Framework zu erstellen, mit welchen verschiedenste Experimente im Online-Windtunnel darstellen zu können. Grundlegende Ideen werden dazu im Abschnitt "Windtunnel-Online-GUI" erklärt
Streamlit
Das Python-Framework Streamlit ermöglicht es, interaktive Web-Apps zur Datenvisualisierung einfach zu erstellen. Dabei bietet Streamlit eine Vielzahl vorgefertigter Widgets(Streamlit API-Reference), die es Benutzern ermöglichen, Daten leicht und anschaulich zu visualisieren.
Streamlit bietet auch verschiedene Möglichkeiten zur Optimierung der Performance von Web-Apps. Funktionen wie st.cache_data können dazu beitragen, Ladezeiten deutlich zu verkürzen.
Ein Nachteil des einfachen Aufbaus einer Streamlit-App ist, dass komplexere User-Interaktionen nur schwer realisibar sind. Ein Grund dafür ist, dass Streamlit für jeden User-Input die gesamte Web-App aktualisiert.
Streamlit Prototyp
Um die Eignung von Streamlit zu testen, wurde folgender Prototyp entwickelt:
Bei der Entwicklung des Prototyps sind jedoch einige weitere Probleme aufgefallen. Die gesamte Seite wird bei jeder Interaktion komplett neu geladen, abgesehen von einigen Zuständen, die gespeichert werden können. Dies führt zu Problemen bei der effizienten Darstellung von Daten. Da die Felder mit Matplotlib visualisiert werden, benötigt die Darstellung für einen einzelnen Zeitpunkt mehrere Sekunden. Dadurch kann beispielsweise der zeitliche Verlauf nicht wie ein Video abgespielt werden. Und dabei fanden alle Tests nur lokal statt.
Ein Vorteil ist weiterhin die sehr einfache Implementierung. Der Prototyp besteht nur aus etwa 60 Zeilen Code.
H5P
H5P (HTML5 Package) ist ein Open-Source-Framework zur Erstellung interaktiver Lerninhalte. Seit 2020 können diese Lerninhalte in Moodle ohne zusätzliches Plugin verwendet werden.
Dieses Framework ist besonders für die Erstellung von Lerninhalten wie Multiple-Choice-Tests oder interaktive Videos mit integrierten Fragen geeignet, weniger jedoch für die Visualisierung von Daten.
Im Moodle der Uni-Due existiert ein Kurs zur Erstellung digitaler Lerninhalte mit H5P (Moodle-Kompetenzzentrum: Erste Schritte in H5P).