Windkanal/GUI - Revision history

Fynn.W: Update Datenformat

2025-03-20T20:47:02Z

Update Datenformat

← Older revision		Revision as of 22:47, 20 March 2025
Line 21:		Line 21:
	... in Bearbeitung ....		... in Bearbeitung ....

	== Datenformat ==		== Datenformat (Wrong - Small Changes in Code) ==
	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:		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:

Fynn.W at 23:49, 18 February 2025

2025-02-18T23:49:08Z

← Older revision		Revision as of 01:49, 19 February 2025
Line 57:		Line 57:

	.... in Bearbeitung ....		.... in Bearbeitung ....

			<nowiki></nowiki>TODO

			- Test mit pyinstrument auf Uni server zum vergleich zu meinen Laptop

	=Wahl des GUI-Frameworks ✅=		=Wahl des GUI-Frameworks ✅=

Fynn.W: Data Format Update + Begin off other chapters

2025-02-15T11:42:16Z

Data Format Update + Begin off other chapters

← Older revision		Revision as of 13:42, 15 February 2025
Line 14:		Line 14:

	[[File:Windtunnel online gui konzept 1.png\|750px\|Ein erste Prototyp der Visualisierung mit ThreeJS]]		[[File:Windtunnel online gui konzept 1.png\|750px\|Ein erste Prototyp der Visualisierung mit ThreeJS]]

			=== Client Side ===
			..... in Bearbeitung ...

			=== Sever Side ===
			... in Bearbeitung ....

	== Datenformat ==		== 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:		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:



	[[File:WINDTUNNEL GUI Frame Batch Diagram.jpg\|border\|frameless\|964x964px]]		[[File:WINDTUNNEL GUI Frame Batch Diagram.jpg\|border\|frameless\|964x964px]]


	Ein '''Frame''' besteht aus zwei Hauptteilen:		Ein '''Frame''' besteht aus zwei Hauptteilen:
Line 40:		Line 46:
	* Auf der Client-Seite werden die Daten nach dem Empfang '''dekomprimiert und decodiert''', bevor sie für die Visualisierung genutzt werden können.		* Auf der Client-Seite werden die Daten nach dem Empfang '''dekomprimiert und decodiert''', bevor sie für die Visualisierung genutzt werden können.

	== ~~Wichtige Punkte TODO~~ ==		== Performance Untersuchung (<small>In Bearbeitung</small>)==
			Nachdem eine erste Version mit allen wichtigen Features implementiert wurde, wurden einige Messungen zur Performance durchgeführt, die in diesem Abschnitt zusammengefasst werden.

			# '''Lesen (~400 MB/s):''' Das Einlesen einer Double-Datei in ein Numpy-Array durch PlutoPlot.
			# '''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.
			# '''Frames Erstellen (~100 MB/s):''' Der gesamte Prozess vom Laden der Daten bis zur vollständigen Konvertierung in das zuvor beschriebene Datenformat.
			# ..... '''(Netzwerk:''' Die theoretisch mögliche Geschwindigkeit im Uni-Netzwerk liegt bei circa '''30 MB/s''') ......
			# '''Im Browser (~7 MB/s):''' Bei der genutzten Frame-Größe ergibt sich eine unkomprimierte Wiedergabe von etwa '''22 Frames pro Sekunde'''.

	* 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

			.... in Bearbeitung ....

	= Wahl des GUI-Frameworks ✅ =		=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.		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 ==		==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.		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.
Line 61:		Line 70:
	Ein '''Nachteil''' ist jedoch der aufwendige Implementationsprozess.		Ein '''Nachteil''' ist jedoch der aufwendige Implementationsprozess.

	=== ThreeJS Prototyp ===		===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.		Um zu zeigen, dass ThreeJS eine gute Grundlage liefert um die Visualisierung des Online-Windtunnels entwickeln zu können, wurde folgender Prototyp entwickelt.
Line 71:		Line 80:
	'''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.		'''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 ===		===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.		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.
Line 77:		Line 86:
	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.		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 ==		==Streamlit==
	Das Python-Framework Streamlit ermöglicht es, interaktive Web-Apps zur Datenvisualisierung einfach zu erstellen. Dabei bietet Streamlit eine Vielzahl vorgefertigter Widgets([https://docs.streamlit.io/develop/api-reference Streamlit API-Reference]), die es Benutzern ermöglichen, Daten leicht und anschaulich zu visualisieren.		Das Python-Framework Streamlit ermöglicht es, interaktive Web-Apps zur Datenvisualisierung einfach zu erstellen. Dabei bietet Streamlit eine Vielzahl vorgefertigter Widgets([https://docs.streamlit.io/develop/api-reference Streamlit API-Reference]), die es Benutzern ermöglichen, Daten leicht und anschaulich zu visualisieren.

Line 84:		Line 93:
	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.		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 ===		===Streamlit Prototyp===

	Um die Eignung von Streamlit zu testen, wurde folgender Prototyp entwickelt:		Um die Eignung von Streamlit zu testen, wurde folgender Prototyp entwickelt:
Line 94:		Line 103:
	Ein '''Vorteil''' ist weiterhin die sehr einfache Implementierung. Der Prototyp besteht nur aus etwa 60 Zeilen Code.		Ein '''Vorteil''' ist weiterhin die sehr einfache Implementierung. Der Prototyp besteht nur aus etwa 60 Zeilen Code.

	== H5P ==		==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.		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.

Fynn.W: Daten Format Update

2025-02-14T20:39:13Z

Daten Format Update

← Older revision		Revision as of 22:39, 14 February 2025
Line 3:		Line 3:
	= Windtunnel-Online-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~~.		== 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:

	[[File:Windtunnel online gui konzept 1.png\|750px\|Ein erste Prototyp der Visualisierung mit ThreeJS]]		[[File:Windtunnel online gui konzept 1.png\|750px\|Ein erste Prototyp der Visualisierung mit ThreeJS]]

	== Datenformat ==		== 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:

	~~<span style="color:#0000FF">~~
	~~In Bearbeitung und grade nur Notizen:~~

	~~<span style="color:red">~~
	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:

	~~<span style="color:red">~~
	~~Frame = header + frame_data~~

	~~<span style="color~~:~~red">~~		[[File:WINDTUNNEL GUI Frame Batch Diagram.jpg\|border\|frameless\|964x964px]]
	~~header = Byte {Version} + UInt32 {Länge eines frame_data in byte} + UInt32 {Checksum Validieren der übertragenen Daten}~~

	~~<span style="color:red">~~
	~~frame_data = UInt32 {TimeIndex} + UInt32(2) {Shape = [ROWS, COLS]} + 3 * field_data~~

	~~<span style="color~~:~~red">~~		Ein '''Frame''' besteht aus zwei Hauptteilen:
	~~field_data = Float32 {min(feld)} + Float(32) {divider = (a_max - a_min) if a_max != a_min else 1} + UInt8(ROWS * COLS) {Feld Daten}~~

	<~~span style="color~~:~~red">~~		* '''<u>Header</u>:''' Enthält Metadaten zur Verwaltung der Daten und stellt sicher, dass die Übertragung korrekt erfolgt.
	~~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~~:		** '''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.
			* '''<u>Body</u>:''' 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.

	~~<span style="color~~:~~red">~~		Da eine Simulation viele Zeitschritte umfasst, werden die Frames in einem '''Batch''' zusammengefasst:
	~~Batch = N * Frame~~

	~~<span style="color:red">~~		* Ein '''Batch''' enthält mehrere Frames hintereinander, sodass mehrere Zeitschritte in einer einzigen Übertragung gesendet werden können.
	Auf der Client ~~seite kann dann zunächst dekompremiert~~ werden und ~~dann decoded~~.		* 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.

	== Wichtige Punkte TODO ==		== Wichtige Punkte TODO ==

Fynn.W: Wahl des GUI-Frameworks fertig

2025-02-14T19:20:25Z

Wahl des GUI-Frameworks fertig

← Older revision		Revision as of 21:20, 14 February 2025
Line 45:		Line 45:


	= Wahl des GUI-Frameworks =		= 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.		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.
Line 69:		Line 69:
	=== ThreeJS 2.0 ===		=== 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~~		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 ==		== Streamlit ==

Fynn.W: Notizen fürs Datenformat

2024-10-30T15:44:10Z

Notizen fürs Datenformat

@@ Line 5: / Line 5: @@
 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.
-[[File:Windtunnel online gui konzept 1.png|750px|Ein erste Prototyp der Visualisierung mit ThreeJS]]
+<span style="color:red">
 == Wichtige Punkte TODO ==

Fynn.W: Beginn Hauptabschnitt "Windtunnel-Online-GUI"

2024-10-29T12:27:32Z

Beginn Hauptabschnitt "Windtunnel-Online-GUI"

← Older revision		Revision as of 14:27, 29 October 2024
Line 3:		Line 3:
	= Windtunnel-Online-GUI =		= Windtunnel-Online-GUI =

	~~todo~~		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.


			[[File:Windtunnel online gui konzept 1.png\|750px\|Ein erste Prototyp der Visualisierung mit ThreeJS]]

			== 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

Fynn.W: ThreeJS + Prototypen + Updates

2024-10-29T10:52:34Z

ThreeJS + Prototypen + Updates

@@ Line 1: / Line 1: @@
 [[Windkanal online|up]]
-= GUI =
+= Windtunnel-Online-GUI =
 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.
 == Streamlit ==
@@ Line 11: / Line 38: @@
 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.
 == H5P ==

Lothar.brendel: +up

2024-04-25T12:29:59Z

+up

← Older revision		Revision as of 14:29, 25 April 2024
Line 1:		Line 1:
			[[Windkanal online\|up]]

	= GUI =		= GUI =

Lothar.brendel: neu

2024-04-25T12:25:44Z

neu

New page

= GUI =

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.

== Streamlit ==
Das Python-Framework Streamlit ermöglicht es, interaktive Web-Apps zur Datenvisualisierung einfach zu erstellen. Dabei bietet Streamlit eine Vielzahl vorgefertigter Widgets([https://docs.streamlit.io/develop/api-reference 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 <code>st.cache_data</code> 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.

== 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 ([https://moodle.uni-due.de/course/view.php?id=11029 Moodle-Kompetenzzentrum: Erste Schritte in H5P]).