B.4: Visualisierung in C++#

Als View können sie natürlich auch Visualisierungen und GUIs einsetzen. Hierfür gibt es in C++ eine Menge von Alternativen:

  • Sehr verbreitet und viel eingesetzt ist Qt, da dies aber ein sehr mächtiges Framework, benötigt es einige Einarbeitung.

  • libncurses ist dagegen eine minimale Darstellung rein Zeichen-basiert direkt im Terminal und weitverbreitet vorinstalliert. Dies kann eine Alternative für die Umsetzung sein.

  • Als einen Mittelweg betrachten wir die Simple and Fast Multimedia Library, da sie einen relativ direkten Einstieg ermöglicht und für viele Plattformen verfügbar ist.

Aufgabe#

Führen sie über SFML (oder eine andere Library) einen neuen View ein für den simplen Chatbot (aus B.3, dort ist eine Musterlösung gegeben). Der View

Der View soll den Zustand des Models darstellen. Der View darf auf eine Sicht des Model zugreifen und über Methoden die entsprechenden Werte der einzelnen Elemente abfragen.

  • Umsetzung einer Visualisierung,

  • die den aktuellen Zustand des Modells wiedergibt

  • und bei Änderungen diesen View automatisch anpasst.

Hinweise zu SFML#

Ein Beispiel für ein einfaches Window (ein Button und ein Textinput) ist im github unter Task B hinterlegt (sfml_example).

Installation#

Sie müssen SFML einmal installieren:

  • Auf dem Jupyterhub – im Terminal: in dem sfml_example-Verzeichnis einfach make getSFML aufrufen. Dies installiert ein entsprechendes Unterverzeichnis SFML mit den Headern (in include) und den Libraries (in lib).

  • Unter MacOS: über homebrew in einem Terminal brew install sfml

  • Für Windows folgen sie der Anleitung auf der SFML Homepage.

Kompilieren#

Aufruf von make sfml_test.

Wenn sie ihr eigenes Programm anpassen, achten sie darauf, dass sie im Makefile entsprechend für SFML die includes hinzufügen und libraries verlinken (dies ist im Verzeichnis B4 schon einmal eingetragen).

  • Für Includes: im Makefile sollten folgende eingetragen sein INCLUDES := -I./include -I./SFML/include -I/opt/homebrew/include

  • Für Libraries müssen wir die entsprechenden Verzeichnisse erst hinzufügen: LDFLAGS := -L/usr/local/lib -L./SFML/lib -L/opt/homebrew/lib und dann die entsprechenden Libraries linken: LDLIBS := -lsfml-system -lsfml-window -lsfml-graphics .

Ausführung#

Zur Ausführung des Programms müssen weiter die entsprechenden Libraries auffindbar sein. Dazu müssen sie gegebenenfalls ihren LD_LIBRARY_PATH anpassen (bei der Installation über homebrew werden diese automatisch gefunden): Sie müssen einmal in der Konsole (siehe unten) aufrufen export LD_LIBRARY_PATH=./SFML/lib:$LD_LIBRARY_PATH – wobei sie sich in dem entsprechenden Verzeichnis befinden müssen (also sfml_example), unter dem SFML lokal installiert wurde

  • Auf ihrem eigenen Rechner können sie direkt im Terminal das Testprogramm aufrufen: ./sfml_test

  • Im Jupyterhub: Sie benötigen Zugriff auf X11 und Fenstermanager (daher können sie dies Programm nicht direkt aus dem Terminal starten und bekommen dort einen Fehler Failed to open X11 display ...).

    • Öffnen sie dafür eine Konsole im Hub: Direkt im Launcher auf dem JupyterHub gibt es in der obersten Zeile den Eintrag Konsole (den Launcher erreichen sie oben rechts über das +).

    • Sie müssen in der Konsole den Librarypath erweitern – gehen sie zuerst in das Verzeichnis mit ihrem Programm und unter dem SFML installiert wurde (cd /cppcourse/sfml_example) und erweitern dort den Pfad: export LD_LIBRARY_PATH=./SFML/lib:$LD_LIBRARY_PATH

    • Danach können sie das Programm starten über ./sfml_test .