Listing 5
vbox = fbgui.VBox("Hauptseite",
settings=fbgui.Settings({
'margins': 10,
'padding': 2
}),toplevel=True)
# erste HBox
zeile1 = fbgui.HBox("Bild_Titel",
settings=fbgui.Settings({
'bg_color': fbgui.Color.CORNFLOWERBLUE,
'radius': 0.1,
'margins': 5,
'padding': 5,
'width': 1.0, # 100%
'weight': (0,1),
'align': fbgui.LEFT,
}),parent=vbox)
# Elemente der ersten HBox
bild = fbgui.Image("Cover", img="music.png",
settings=fbgui.Settings({
'align': fbgui.CENTER,
'min_size': (50,50),
'scale': True,
}),parent=zeile1)
titel = fbgui.Label("Titel","Money for Nothing ...",
settings=fbgui.Settings({
'weight': 1,
'align': (fbgui.LEFT,fbgui.CENTER),
}),parent=zeile1)
Für das Layout besonders relevant sind die beiden Attribute 'width': 1.0 und 'weight': (0,1) von fbgui.HBox. Das erste Attribut macht die Box genauso breit wie das Elternelement, also die Box mit vertikaler Ausrichtung, die als Toplevel-Element den ganzen Bildschirm füllt. Es gibt einen subtilen Unterschied bei den Angaben für Breite und Höhen zwischen 1.0 und 1: Fließkommazahlen fungieren als Größenangaben relativ zum Elternelement, während Integer-Werte eine feste Pixelgröße definieren.
Mit der Angabe weight entscheiden Sie, wie die Software zusätzlichen Platz auf Kinder derselben Ebene verteilt. In horizontaler Richtung beträgt der Wert 0, da die Breite schon über width festgelegt ist. Vertikal setzen Sie den Wert auf 1. Da die anderen beiden Zeilen hier den Vorgabewert 0 verwenden, bekommt die erste Zeile den gesamten freien Platz zugeteilt, während die Leisten mit den Schaltflächen gerade so hoch ausfallen, dass die Symbole hineinpassen.
In der Box mit horizontaler Ausrichtung wiederholt sich das Spiel: Hier erhält der Text das Gewicht und nimmt sich horizontal den gesamten Raum.
Schaltflächen
Für die Buttons verwenden Sie den Code aus Listing 6. Die umschließende Box (zeile2) nimmt wieder die ganze Breite ein. Neu ist das Attribut 'uniform': True in Zeile 5. Dieser Parameter sorgt dafür, dass alle Kindelemente gleich groß ausfallen. Damit die Schaltflächen außerdem auch den gesamten Platz einnehmen, geben Sie jedem Button zusätzlich dasselbe Gewicht (Zeile 19).
Listing 6
zeile2 = fbgui.HBox("Buttons1",
settings=fbgui.Settings({
'margins': 2,
'padding': 1,
'uniform': True,
'width': 1.0, # 100%
'align': fbgui.CENTER,
}),parent=vbox)
# Buttons hinzufügen
liste = [("pause.png",do_pause),
("start.png",do_start),
("stop.png",do_stop)]
for icon,methode in liste:
btn = fbgui.Button("id_%s"% icon,img=icon,
settings=fbgui.Settings({
'margins': 5,
'padding': 1,
'bg_color': fbgui.Color.CORNFLOWERBLUE,
'weight': 1
}),parent=zeile2)
btn.on_click = methode
def do_pause(widget,event):
pass
Die Icons stammen aus der GTK-Bibliothek und liegen auf dem Testsystem unter /usr/share/icons/. Damit bei einem Klick etwas passiert, weist Zeile 23 dem Attribut on_click noch eine Methode aus dem Programm zu (ab Zeile 25). Ebenso wie die identischen Methoden do_start und do_stop dient sie rein zum Test und tut einfach nichts.
Die zweite Leiste darunter folgt im Aufbau demselben Prinzip, nur hat dort die Liste (Zeilen 11 bis 14) vier statt nur drei Einträge. Noch mehr derartige Elemente pro Zeile erweisen sich bei dieser Bildschirmgröße als nicht mehr praktikabel.
Der komplette Code liegt im Verzeichnis examples/ der Bibliothek. Da es im Beispiel um die Oberfläche geht, wurden die eigentlichen Methoden hinter den Buttons (etwa do_play) nicht implementiert.
Wichtig ist hier, dass diese Event-Methoden durchlaufen, denn sonst blockieren sie das Verarbeiten neuer Events. Die erwähnte Methode do_play würde das Lied per Programmaufruf von Mpg123 asynchron starten – Python bietet mit dem Modul subprocess eine passende Möglichkeit.
Fazit
Komplexe Oberflächen und kleine Displays vertragen sich nicht immer. Weniger ist dabei oft mehr, zur Not verteilen Sie die Elemente auf mehrere Seiten. Dank Pygame klappt das selbst mit einem Raspbian Lite auf einem Pi Zero. Die hier vorgestellte Bibliothek deckt bei Weitem nicht alle Wünsche ab, nicht einmal alle des Autors, der sie deshalb nach Bedarf laufend um weitere Methoden ergänzt.
Derzeit ist die Bibliothek bereits in diversen Projekten des Autors im Einsatz, etwa einer Wetterstation auf einem 4-Zoll-Display [3] (Abbildung 4) sowie einer minimalen Oberfläche für einen auf Tvheadend basierenden Videorekorder [4] (Abbildung 5).
Abbildung 4: Mit dem passenden Layout bringen Sie problemlos eine ganze Reihe Wetterdaten auf einem 4-Zoll-Display unter.
Abbildung 5: Die abgespeckte Oberfläche für den Videorekorder eignet sich für den Einsatz mit einer Fernbedienung.
Bei Letzterem ist die Auflösung mit 1920 x 1080 Pixeln zwar nicht klein, aber weder Tvheadend noch Kodi benötigen X11; Kodi läuft sogar nur ohne X11. Statt einer Maus oder eines Touchscreens bedient beim Fernseher eine CEC-Fernbedienung die entsprechend gefärbten Schaltflächen [5].
Der Autor
Bernhard Bablok (mailto:[email protected]) arbeitet bei der Allianz Technology SE als SAP-HR-Entwickler. Wenn er nicht Musik hört oder mit dem Rad respektive zu Fuß unterwegs ist, beschäftigt er sich mit Themen rund um Linux, Programmierung und Kleincomputer.
