Grafische Oberflächen für kleine Displays

Für das Ansteuern kleiner Displays gibt es keine Programme von der Stange. Mit Python und einer Pygame-Bibliothek erstellen Sie trotzdem im Handumdrehen Anwendungen.

Im Artikel “Geschrumpft” [1] aus der letzten Ausgabe ging es um die Auswahl und Installation von kleinen Touch-Displays für den Raspberry Pi. Auf den Kauf solcher Hardware folgt in der Regel die Ernüchterung: Für die Bildschirme gibt es so gut wie keine vorgefertigten Bibliotheken. Das liegt daran, dass zum einen jeder Hersteller sein eigenes Süppchen kocht und es zum anderen für diese Display-Größen lange einfach keine sinnvollen generischen Anwendungen gab. Hier heißt es also immer noch selbst Hand anlegen.

Erschwerend kommt hinzu, dass es keine für kleine Displays optimierten GUI-Toolkits gibt. Die Variante, die im Zentrum dieses Artikels steht, hat der Autor für einige seiner Projekte neu geschrieben. Für das Verständnis des Artikels sollten Sie Grundwissen in Python mitbringen. Wer schon grafische Oberflächen in anderen Sprachen geschrieben hat, findet sich leichter ins Thema ein; derartiges Wissen ist aber keine Voraussetzung.

Selbst wenn Sie keinen kleinen Bildschirm besitzen, eignen sich die Beispiele problemlos für den Einsatz auf einem normalen Linux-System, wie etwa Raspbian Pixel oder Ubuntu. Der Autor entwickelt Anwendungen immer unter X11, erst das fertige Programm läuft dann auf dem Raspberry Pi.

Installation

Die Schritte für die Installation der GUI-Bibliothek Pygame-fbgui [2] finden Sie in Listing 1. Das in Zeile 3 aufgerufene Skript kopiert die Dateien, passt die Python-Umgebung an und installiert zusätzlich das Pygame-Paket. Handelt es sich bei dem von Ihnen eingesetzten System nicht um einen Debian-Abkömmling, passen Sie vorher das Skript an und tauschen die Debian-spezifischen Kommandos (dpkg, apt-get) aus.

$ git clone https://github.com/bablokb/pygame-fbgui.git
$ cd pygame-fbgui
$ sudo tools/install
$ files/usr/local/lib/fbgui/demo/buttons.py

Sie prüfen den Erfolg der Installation mit dem Kommando aus der letzten Zeile des Listings. Das auf dem Bildschirm erscheinende Fenster zeigt vier Schaltflächen. Im Verzeichnis demo/ finden Sie nicht nur das Testprogramm (Zeile 4), sondern verschiedene weitere Programme, die die einzelnen Funktionen der Bibliothek verdeutlichen. Sie eignen sich unter anderem als Vorlagen. Im Verzeichnis doc/ finden Sie einen Leitfaden sowie eine Referenz.

Grundstruktur

Am Anfang eines jeden Tutorials für Programmierer steht ein Hallo-Welt-Beispiel. Das Programm in Listing 2 umfasst nur wenige Zeilen und zeigt eine solche Struktur. Wie bei jedem GUI-Programm gibt es eine Endlosschleife, in dem das Programm auf Klicks und Eingaben wartet und diese bei Bedarf verarbeitet. Die Klasse fbgui.App, von der die Instanz app abgeleitet ist, besitzt dafür eine Methode run() (Zeile 18).

#!/usr/bin/python3
import fbgui
if __name__ == '__main__':
  config            = fbgui.Settings()
  config.msg_level  = "DEBUG"
  config.font_size  = 40
  config.width      = 320
  config.height     = 240
  config.title      = "Hallo Welt"
  app   = fbgui.App(config)
  label = fbgui.Label("id1","Hallo Welt",toplevel=True)
  label.pack()
  app.set_widget(label)
  app.run()

Vor dem Start der Endlosschleife erzeugt das Programm eine Konfiguration (Zeilen 7 bis 12), einen Text (Zeile 15 mit der Klasse fbgui.Label) und weist diesen Text der Anwendung als oberstes GUI-Element zu (Zeile 17). Die Konfiguration (Klasse fbgui.Settings) spielt eine zentrale Rolle in der Bibliothek, denn darüber manipulieren Sie das Aussehen und das Verhalten der Anwendung sowie der GUI-Elemente. Die Breite und Höhe des Fensters sowie dessen Titel (Zeilen 10 bis 12) wirken sich dabei nur unter X11 aus. Auf der Zielumgebung mit kleinem Bildschirm wechselt die Anwendung automatisch in den Vollbildmodus.

Die jetzige Anwendung hat den Mangel, dass der Text in der linken unteren Ecke des Bildschirms klebt (Abbildung 1). Das Label als einziges GUI-Element hat zwar den ganzen Bildschirm für sich, aber die Bibliotheksfunktionen setzen Texte in der Standardeinstellung von links nach rechts und richten sie an der Grundlinie aus.

Abbildung 1: Eine erste Hallo-Welt-Anwendung vermittelt einen Eindruck von den Möglichkeiten der Bibliothek. Sie offenbart aber auch, dass ein optisch ansprechender Einsatz zusätzliche Parameter erfordert.

Sie modifizieren die Ausrichtung, indem Sie die Zeile 15 von Listing 2 durch die Zeilen aus Listing 3 ersetzen, die dem Label-Element im Konstruktor ein Settings-Element übergeben. Die Schreibweise ist etwas knapper (Initialisieren per Dictionary) als in Listing 2 (Zeilen 7 bis 12 für App), aber gleichwertig. Mit der neuen Schreibweise ändern Sie nicht nur die Ausrichtung (Eigenschaft align), sondern daneben über die Eigenschaft fg_color die Schriftfarbe (Abbildung 2).

  label = fbgui.Label("id1","Hallo Welt",
    settings=fbgui.Settings({
      'align': (fbgui.CENTER,fbgui.CENTER),
      'fg_color': fbgui.Color.RED
    }),toplevel=True)