Windkanal/GUI

up

Windtunnel-Online-GUI

Struktureller Aufbau

Die Windtunnel-Online-GUI ist dafür entwickelt worden, um durch PLUTO generierte Simulationsdatensätze effizient in einer Webanwendung darzustellen. Die Herausforderung dabei liegt in der Größe der Datensätze, die oft sehr umfangreich sind. Diese müssen so aufbereitet werden, dass sie auf einer Website sinnvoll visualisiert werden können, ohne dass es zu langen Ladezeiten oder Performance-Problemen kommt.

Das Problem ist daher in zwei zentrale Bereiche unterteilt:

• Server-Side: Hier sind die vollständigen Datensätze aus PLUTO gespeichert. Die Hauptaufgabe besteht darin, diese Daten effizient zu verwalten, in einem geeigneten Format aufzubereiten und auf Anfrage an den Client zu senden.
• Client-Side: Auf der Client-Seite werden die vorbereiteten Daten empfangen, dekomprimiert und visuell dargestellt. Zudem gibt es eine Benutzeroberfläche, über die verschiedene Parameter angepasst werden können. Ändert der Nutzer eine Einstellung, müssen neue Daten vom Server angefordert werden, um die Visualisierung entsprechend zu aktualisieren.

Die folgende Grafik gibt einen Überblick über den strukturellen Aufbau und die Interaktion dieser Komponenten:

Client Side

..... in Bearbeitung ...

Sever Side

... in Bearbeitung ....

Datenformat

Für jeden Zeitschritt werden drei physikalische Felder – das betrachtete Feld (z. B. Dichte) sowie die Geschwindigkeitskomponenten vx1 und vx2 – in einem Frame versendet. Mehrere dieser Frames werden zu einem Batch zusammengefasst, sodass mehrere Zeitschritte effizient in einer einzigen Nachricht übertragen werden können. Die folgende Grafik zeigt den Aufbau eines solchen Frame-Batches:

Ein Frame besteht aus zwei Hauptteilen:

• Header: Enthält Metadaten zur Verwaltung der Daten und stellt sicher, dass die Übertragung korrekt erfolgt.
  • Version (1 Byte): Gibt die Version des Frame-Formats an.
  • Body Length (4 Byte): Speichert die Größe des Frame-Bodies in Byte.
  • Checksum (4 Byte): Eine Prüfsumme zur Validierung der übertragenen Daten.
• Body: Enthält die eigentlichen Simulationsdaten.
  • Time Index (4 Byte): Gibt an, zu welchem Zeitschritt der Frame gehört.
  • Shape (4 + 4 Byte): Speichert die Dimensionen des Datenfeldes (Anzahl der Zeilen und Spalten).
  • Normierung: Jeder Wert wird normalisiert, indem der minimale Wert und ein Divider berechnet werden. Falls das Maximum gleich dem Minimum ist, wird der Divider auf 1 gesetzt, um eine Division durch Null zu vermeiden.
  • Datenfelder (3 × ROWS × COLUMNS × 1 Byte): Enthält die Werte für Dichte, vx1 und vx2.

Da eine Simulation viele Zeitschritte umfasst, werden die Frames in einem Batch zusammengefasst:

• Ein Batch enthält mehrere Frames hintereinander, sodass mehrere Zeitschritte in einer einzigen Übertragung gesendet werden können.
• Vor dem Versand kann die Batch mit LZ4 komprimiert, um die Datenmenge zu reduzieren.
• Auf der Client-Seite werden die Daten nach dem Empfang dekomprimiert und decodiert, bevor sie für die Visualisierung genutzt werden können.

Performance Untersuchung (In Bearbeitung)

Nachdem eine erste Version mit allen wichtigen Features implementiert wurde, wurden einige Messungen zur Performance durchgeführt, die in diesem Abschnitt zusammengefasst werden.

1. Lesen (~400 MB/s): Das Einlesen einer Double-Datei in ein Numpy-Array durch PlutoPlot.
2. Zu Byte-Str (~360 MB/s): Die Konvertierung des Numpy-Float-Arrays nach dem Einlesen in ein UInt8-Array, anschließend die Umwandlung in eine Byte-Str und das Aneinanderhängen dieser.
3. Frames Erstellen (~100 MB/s): Der gesamte Prozess vom Laden der Daten bis zur vollständigen Konvertierung in das zuvor beschriebene Datenformat.
4. ..... (Netzwerk: Die theoretisch mögliche Geschwindigkeit im Uni-Netzwerk liegt bei circa 30 MB/s) ......
5. Im Browser (~7 MB/s): Bei der genutzten Frame-Größe ergibt sich eine unkomprimierte Wiedergabe von etwa 22 Frames pro Sekunde.

.... in Bearbeitung ....

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

Für das Windtunnel-Projekt wurde mittlerweile ein grundlegendes Framework auf Basis von Three.js entwickelt, das verschiedene Simulationen visuell darstellen kann. Der Fokus lag dabei auf einem flexiblen und modularen Aufbau, der es ermöglicht, zukünftige Erweiterungen und Anpassungen einfacher umzusetzen. Eine genauere Erklärung sowie einige technische Hintergründe sind im Abschnitt Windtunnel-Online-GUI beschrieben.

Mit diesem Schritt ist die Wahl des GUI-Frameworks vorerst abgeschlossen, sodass der Fokus nun auf Optimierungen und die Weiterentwicklung einiger wichtiger Features gelegt werden kann.

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).