Das Fenster mit PySimpleGui

Werfen wir zunächst noch einmal einen Blick auf das Bild in Kapitel 2:

So soll unser Taschenrechner also aussehen.

Wir können 20 Schaltflächen (oder englisch "button") erkennen, 4 in jeder Reihe und 5 Reihen.

Darüber, sozusagen in der ersten Reihe, ist das Eingabefeld platziert. Hier werden die Zahlen und Rechenzeichen angezeigt.

In "PySimpleGui" werden die einzelnen Elemente im "layout" gebündelt. Damit wir uns der Materie sachte nähern, schauen wir uns die Umsetzung mal nur für die ersten beiden Zeilen an. Der Code lautet wie folgt:

import PySimpleGUI as sg

# die Elemente im Fenster werden im layout gebündelt:
layout = [[sg.Input(size=(17, 1), justification='right', key='eingabe',
                    font=('OCR A Extended', 16))],
          [sg.Button('+'), sg.Button('-'), sg.Button('*'), sg.Button('/')]
        ]

# das Fenster selber wird erzeugt
window = sg.Window('Taschenrechner', layout, default_button_element_size=(5,2),
                   auto_size_buttons=False)

# Programmschleife
while True:
    event, values = window.read()
    if event == sg.WIN_CLOSED:
        break

Wenn Ihr das als Programm ausführen lasst, sollte der Rechner etwa so aussehen:

Gehen wir den Code durch. Zeile 1 importiert die Bibliothek. Voraussetzung für die Nutzung ist natürlich, dass Ihr sie installiert habt. Falls das noch nicht geschehen ist, findet Ihr in Kapitel 3 eine Anleitung.

Zeile 4 bis Zeile 7 ist das oben angekündigte "layout". Das schauen wir uns gleich näher an.

In Zeile 10 wird das Fenster selber instanziiert. Der erste Parameter in der Funktion ist der Name, der oben links angezeigt wird ("Taschenrechner"). Parameter 2 ist der Verweis auf das "layout", in unserem Fall haben wir es auch genau so benannt, nämlich "layout". Der an dritter Stelle stehende Parameter "default_button_element_size=(5,2)" gibt an, dass alle Button (ich nehme jetzt mal die denglische Form der Schaltfläche) gleich groß sein sollen. Der Wert "auto_size_buttons=False" besagt, dass sich die Button nicht nach der Anzahl der Stallen richten soll, sondern, dass die Größe fix bleibt. Setzt den Parameter auch gerne mal auf "True", dann seht Ihr den Unterschied.

Ab Zeile 14 ist die Programmschleife codiert. In Zeile 15 wird das Ereignis innerhalb des Fensters (das "event", also z.B. das Klicken auf einen Button) abgefragt, aber auch der Wert oder Zustand des Objekts ("value"), also bei gedrücktem "+"-Button das "+" selbst.

Besonders wird der Klick auf das "X" in der rechten oberen Ecke des Fensters geachtet, das schließt das Programm, indem die Schleife mit "break" verlassen wird.

Wenn Ihr jetzt etwas über die Tatstatur eingebt, seht Ihr die Zeichen in der Anzeige.

Damit ist natürlich noch keine Berechnung möglich, dazu kommen wir aber später.

Schauen wir jetzt genauer auf die Zeilen 4 bis 7, also das "layout".

Wir haben zwei ineinander verschachtelte Listen. Das layout selbst sieht so aus:

layout = []

Es erstreckt sich über 3 Zeilen. Innerhalb von layout gibt es nun eine Liste für die erste Zeile…

[sg.Input(size=(17, 1), …, font=('OCR A Extended', 16))]

…und eine Liste für die zweite Zeile, in der die Button enthalten sind:

[sg.Button('+'), sg.Button('-'), sg.Button('*'), sg.Button('/')]

Um alle relevanten Button für den Taschenrechner zu implementieren, müsste die Erweiterung dem folgenden Bild entsprechend gemacht werden:

Ich habe da mal was vorbereitet…

import PySimpleGUI as sg

# die Elemente im Fenster werden im layout gebündelt:
layout = [[sg.Input(size=(17, 1), justification='right', key='eingabe',
                    font=('OCR A Extended', 16))],
          [sg.Button('+'), sg.Button('-'), sg.Button('*'), sg.Button('/')]
        ]

# das Fenster selber wird erzeugt
window = sg.Window('Taschenrechner', layout, default_button_element_size=(5,2),
                   auto_size_buttons=False)

# Programmschleife
while True:
    event, values = window.read()
    if event == sg.WIN_CLOSED:
        break

Achtet bitte darauf, dass Zeilen 10 und 11 eigentlich zusammengehören, ich habe der besseren Lesbarkeit halber einen Zeilenumbruch eingefügt.

Die Anweisungen "button_color=("black","orange")" in den Zeilen 10 und 11 geben dem Ruhezustand des Button die Farbe "orange" mit, sobald er angeklickt wird, ändert sich die Farge auf "Schwarz". Spielt hier auch gerne mal mit unterschiedlichen Farben herum.

Wenn Ihr das jetzt laufen lasst, sollte das dann so aussehen:

Hübsch, oder?

Für die Codierung der Button nehmen wir uns mal wieder ein neues Unterkapitel vor.

• Zurück
• Source Kapitel
• Weiter