Programmieren lernen am Raspberry Pi – Teil 3: GUI erstellen

In den vorherigen beiden Teilen haben wir grundlegende Funktionen und die Nutzung der programmierbaren GPIOs kennengelernt. Üblicherweise wird von den meisten Nutzern erwartet, dass ein Programm auch eine grafische Oberfläche hat, um bestimmte Funktionen zu steuern.

Darum geht es im dritten Teil: Wir erstellen mit Hilfe von der Bibliothek Tkinter eine grafische Oberfläche. Mit Hilfe dieser können u.a. auch GPIOs gesteuert werden. Schlussendlich wartet am Ende des Tutorials noch eine Aufgabe darauf gelöst zu werden.

Zubehör

Auch hier wieder vorweg der Hinweis, dass das Tutorial nur einen Teil des Ganzen umfasst. Gerade da die Erstellung eines User Interface eine ganz eigene Geschichte für sich ist und die von uns verwendete Bibliothek sehr viel mehr Funktionen hat, als wir in diesem Tutorial behandeln, ist der Blick in eines der Python Nachschlagewerke immer nützlich.

Da wir in diesem Teil jedoch primär keine Hardware ansprechen, ist neben dem Raspberry Pi nichts weiter nötig. Du solltest allerdings den Pi entweder per HDMI an einen Bildschirm verbunden haben, oder aber dich per Remotedesktopverbindung über deinen PC verbinden. Besonders gut lässt sich eine grafische Oberfläche auch mit z.B. dem Raspberry Pi Touchscreen verbinden.

Am Ende des Tutorials stelle ich noch eine Aufgabe, für diejenigen die das Gelernte gleich selbst umsetzen wollen (keine Sorge – die Lösung gibt es auch). Dazu ist weiterhin folgendes nötig:

• 5V Servomotor
• Jumper Kabel (male – female)

Vorbereitung

Die Bibliothek von Tkinter ist nicht immer installiert, daher ist dies der erste Schritt. Wir öffnen ein neues Terminal Fenster (geht auch per SSH) und geben folgendes ein:

sudo apt-get install python python-tk idle python-pmw python-imaging --yes

Nachdem alles durchgelaufen ist, kannst du den Dateiexplorer öffnen und im Homeverzeichnis (/home/pi) einen neuen Ordner mit dem Namen „python-GUI“ (ohne Anführungszeichen) per Rechtsklick anlegen. Öffne diesen Ordner nur erstelle per Rechtsklick -> Create New -> Empty File eine Datei mit dem Namen „gui.py“ (ohne Anführungszeichen).

Durch Rechtsklick auf diese Datei kannst du sie mit verschiedenen Editoren bearbeiten. Ein Klick auf Open öffnet sie mit dem Standardeditor, worin wir gleich unseren Code schreiben.

Du könntest die folgenden Schritte auch sequentiell wie zuvor in der Python Konsole ausführen. Dies bietet sich dann an, wenn du die Funktionalität der aufgerufenen Befehle nachvollziehen willst – ist allerdings im Produktivbetrieb nicht all zu sinnvoll.

In jenem Skript importieren wir als aller erstes die Bibliothek:

Achtung: Wenn du Python 2.7 verwendest, muss Tkinter groß geschrieben, wohingegen es bei der Verwendung von Python 3 klein geschrieben wird.

GUI erstellen

Zunächst fügen wir den einfachen Aufbau ein, damit ein leeres Fenster erstellt wird. Später definieren wir die Elemente, welche angezeigt werden sollen. Zunächst aber geben wir lediglich den Titel und die Hintergrundfarbe des Fensters an. Die Farbe wird dabei durch einen RGB Hex Wert angegeben, wobei #FFFFFF für Weiß steht.

Dies ist der Code, den wir einfügen:

Wir öffnen ein Terminal und wechseln in das Verzeichnis (cd ~/python-GUI). Dort starten wir das Skript:

sudo python3 gui.py

In der unteren Ecke öffnet sich nun unser definiertes Fenster:

Nun kann unser grafisches Interface noch nichts, außer sich öffnen. Daher wollen wir in den nächsten Schritten Elemente hinzufügen. Jeglicher Code kommt zwischen Zeile 8 und 10.

Frames

Damit unser Programm eine Struktur bekommt, müssen wir uns zunächst Gedanken zum Layout machen. Ich habe testweise folgenden Aufbau vorgesehen:

Dabei können beide Seiten über sog. Frames definiert werden. Ein Frame braucht ein übergeordnetes Element (in welchem es eingefügt wird) sowie seine Höhe und Breite.

Darüber hinaus können wir die Position des Frames in seinem übergeordnetem Element angeben. Stelle dir dabei vor, dass jedes Element eine Art Gitter hat und wir die Reihe und Spalte angeben. Da wir zwei nebeneinander platzierte Frames haben möchten, befinden diese sich in der selben Zeile, allerdings in einer anderen Spalte:

Unser resultierendes Ergebnis sieht nun folgend aus:

Wie du siehst haben beide Frames auch einen Abstand zu den Seiten. An den horizontalen Kanten ist dieser 10 Pixel und an den vertikalen nur 3 Pixel (padx und pady). Übrigens ist es auch bei diesen Elementen möglich die Hintergrundfarbe etc. einzustellen.

Die Elemente innerhalb eines Frames werden nach der Initialisierung dieses Frames angegeben.

Labels (und Bilder)

Labels sind quasi Beschriftungen – also Texte, die nicht bearbeitet werde können. Diese sind z.B. für  Infoboxen oder andere Informationen zu nutzen. Im folgenden habe ich zwei Beispieltexte im linken Frame eingefügt, welche untereinander angezeigt werden. Der Text kann auch Zeilenumbrüche enthalten, indem man \n in der Zeichenkette nutzt:

Labels können außerdem dazu genutzt werden, um Bilder anzuzeigen. Falls wir bereits ein Bild gespeichert haben, können wir dieses nutzen. Ansonsten geben wir im Terminal einfach kurz folgenden Befehl ein, womit wir ein Platzhalter Bild herunterladen:

wget http://placehold.it/200x200

Mit einem zusätzlichen Parameter können wir dem Label ein Bild zuweisen:

Führen wir das Skript aus, bekommen wir ein folgendes Programm zu Gesicht:

Wie du siehst, passt sich der Platz des Frames an. Mit einem größeren Y-Padding könnten wir den Frame wieder vergrößern.

Eingabefelder (Inputs)

Nun kommen wir zum rechten Frame. Als erstes wollen wir hier eiu Eingabefeld erstellen, welches später z.B. für Benutzereingaben genutzt werden kann.

Ein solches Feld erstellen wir mit diesem Befehl:

Die Breite ist hier allerdings nicht in Pixeln, sondern in Zeichen angegeben, welche gleichzeitig angezeigt werden können.

Was du noch für das Eingabefeld definieren kannst, steht in der Dokumentation.

Button

In dem Layout von oben sind als nächstes zwei Buttons zu sehen. Nun sollen diese natürlich auch Funktionen bekommen. Dazu soll der rote Knopf die Eingabe des vorher erstellten Textfelds auslese und der gelbe Button einfach das Ergebnis aus 1+1 ausgeben (da dies nur zu Vorführungszwecken dient, sehen wir mal über die Sinnhaftigkeit des gelben Buttons hinweg 😉 ).

Wir erstellen dazu erst einmal zwei Funktionen, wovon die erste nur den Wert des eben erstellen Textfeldes (E1) ausließt und im Terminal ausgibt. Die zweite Funktion, gibt einfach „2“ aus. Die Funktionen werden gleich den Buttons übergeben.

def callback1():
    print(E1.get())
 def callback2():
    print(1 + 1)

Bevor wir nun die Buttons erstellen, öffnen wir noch ein weiteres Layout für die horizontal angeordneten Buttons.
Die Buttons an sich sind schnell erstellt und bekommen einen Text, eine Hintergrundfarbe („bg“ in HEX), eine Breite (width) sowie eine Funktion (command). Diese Funktion wird aufgerufen, sobald der jeweilige Button gedrückt wurde.

Wenn wir nun etwas eingeben und Button 1 drücken, erscheint die Eingabe im Terminal:

Slider / Schieberegler

Zu guter Letzt wollen wir noch einen Slider erstellen. Dieser ist quasi eine grafische Darstellung eines numerischen Eingabefelds mit vordefinierten Bereich (z.B. von 0-180). In der unteren Aufgabe wird dieser auch gebraucht. Darüber hinaus kann die Schrittgröße (resolution) angegeben werden, was im Endeffekt der Genauigkeit entspricht.

Den Code erweitern wir wie folgt:

Und damit ist unser Programm auch fertig:

Tipp: Auch bei Slidern kann wieder der Command Parameter genutzt werden (allerdings sollte die Funktion dafür einen Eingabeparameter akzeptieren).

Weiteres

Neben den hier vorgestellten Elementen, gibt es noch viele weitere, u.a. Canvas, mit welchen man Zeichnungen / Skizzen erstellen kann. Da dies den Rahmen des Tutorials sprengen würde, leite ich an dieser Stelle mal auf die Dokumentation weiter, da dort auch alle verfügbaren Komponenten aufgelistet sind. Auf den Unterseiten findest du außerdem noch Beispielcode.

Zusammenfassung & Ausführung

Falls du bei einem der Punkte nicht mitgekommen bist bzw. du dein Skript noch einmal vergleichen willst, gibt es hier noch einmal die komplette Fassung:

Du kannst diesen Code z.B. per SSH oder FTP ganz einfach auf den Raspberry Pi laden. Falls du dich per SSH verbunden hast, rufst du folgenden Befehl im entsprechenden Ordner auf:

sudo nano gui.py

Nachdem du den Code eingefügt hast (geht in Putty per Rechtsklick), speicherst du mit STRG+O. Anschließend kehrst du mit STRG+X in die Kommandozeile zurück.

Die Ausführung solltest du allerdings nicht von der Remote-Kommandozeile ausführen, sondern im Desktop Modus:

sudo python3 gui.py

Testaufgabe + Lösung

Wie versprochen gibt es noch eine kleine Testaufgabe: Erstelle eine neue Programmoberfläche, die lediglich einen Slider enthält, mit welchem ein GPIO gesteuert wird. Im Speziellen soll der Winkel eines Servomotors gesteuert werden.

Falls du noch nicht mit Servomotoren vertraut bist, hilft ein Blick in dieses Tutorial. Im nächsten Teil dieser Reihe werden wir PWM noch genauer betrachten.

Falls du soweit bist (oder nicht weiter kommst) findest du hier die Lösung:

Lösung anzeigen

sudo nano servogui.py

sudo python3 servogui.py

Übrigens: Da Python und Tkinter ebenso auf Windows und MacOS laufen, kann damit natürlich auch eine Programmoberfläche für PCs und Macs erstellt werden.