ICTPR2 - GUI

T. Issaris

22 Februari 2021

Graphical User Interfaces

Installatie 1/4

Download Qt for Python:

(https://www.qt.io/qt-for-python)[https://www.qt.io/qt-for-python]

Installatie 2/4

Maak een virtuele omgeving:

python -m venv gui

Installatie 3/4

Activeer je virtuele omgeving:

gui\Scripts\activate.bat

Installatie 4/4

Installeer Qt for Python:

pip install pyside6

Basis GUI 1/10

Eerst importeren we de module QtWidgets uit module PySide6:

from PySide6 import QtWidgets

Basis GUI 2/10

Vervolgens maken we een app object aan van class QApplication:

from PySide6 import QtWidgets

app = QtWidgets.QApplication() # Nieuw

QApplication is een blauwdruk voor een applicatie.

Basis GUI 3/10

In de vorige slide werd een applicatie object aangemaakt, maar het programma werd beeindigd voordat er iets mee kon gebeuren…

from PySide6 import QtWidgets

app = QtWidgets.QApplication()

app.exec() # Nieuw

Roep de functie exec_() op: Dit noemt men de eventloop. In de eventloop worden events van b.v. je Windows grafische omgeving verwerkt.

Basis GUI 4/10

Als je de code uit de vorige slides zou uitvoeren, zou je nog geen programma-venster zien verschijnen.

Nu maken we een programma-venster aan door een instantie aan te maken van de QWidget class:

from PySide6 import QtWidgets

app = QtWidgets.QApplication()

wid = QtWidgets.QWidget() # Nieuw

app.exec_()

Basis GUI 5/10

Als je de code uit de vorige slides zou uitvoeren, zou je nog steeds geen programma-venster zien verschijnen.

We dienen expliciet de show() method uit te voeren op de widgets die we willen tonen:

from PySide6 import QtWidgets

app = QtWidgets.QApplication()

wid = QtWidgets.QWidget()
wid.show() # Nieuw

app.exec_()

Basis GUI 6/10

from PySide6 import QtWidgets

app = QtWidgets.QApplication()

wid = QtWidgets.QWidget()
wid.show()

app.exec_()

Basis GUI 7/10

Je kan de titel die getoond wordt boven je programma-venster aanpassen met de method setWindowTitle op het object van class QWidget:

from PySide6 import QtWidgets

app = QtWidgets.QApplication()

wid = QtWidgets.QWidget()
wid.setWindowTitle('De titel') # Nieuw
wid.show()

app.exec_()

Basis GUI 8/10

Verder kan je met method resize() de grootte van je venster aanpassen:

from PySide6 import QtWidgets

app = QtWidgets.QApplication()

wid = QtWidgets.QWidget()
wid.resize(250, 150) # Nieuw
wid.setWindowTitle('De titel')
wid.show()

app.exec_()

Basis GUI 9/10

We willen nu een button toevoegen, Qt voorziet hiervoor de QPushButton class:

from PySide6 import QtWidgets
app = QtWidgets.QApplication()
wid = QtWidgets.QWidget()
wid.setWindowTitle('De titel')
wid.show()
button = QtWidgets.QPushButton("Klik op mij", wid) # Nieuw
app.exec_()

We geven als argumenten, het label dat op de button dient te verschijnen en het venster waarin de button getoond dient te worden.

Basis GUI 10/10

De button verscheen echter niet… We dienen ook voor deze widget de method show() op te roepen:

from PySide6 import QtWidgets

app = QtWidgets.QApplication()

wid = QtWidgets.QWidget()
wid.setWindowTitle('De titel')
wid.show()

button = QtWidgets.QPushButton("Klik op mij", wid)
button.show() # Nieuw

app.exec_()

Oefening 1

Schrijf een Python programma met Qt dat 2 buttons toont:

Save
Cancel

Event handling 1/3

Heel erg veel nut heeft onze button momenteel nog niet.

We willen code kunnen uitvoeren als er op de button geklikt wordt. We definieren eerst een functie die uitgevoerd moet worden als er geklikt wordt op de button:


def mijn_functie():   # Nieuw
    print("Er werd op mij geklikt!") # Nieuw

Event handling 2/3

Vervolgens koppelen we onze functie aan de button door middel van de clicked.connect() method:

...
button.clicked.connect(mijn_functie) # Nieuw
...

Event handling 3/3

Samen geeft dit:

from PySide6 import QtWidgets

app = QtWidgets.QApplication()

wid = QtWidgets.QWidget()
wid.show()

button = QtWidgets.QPushButton("Cool", wid)
button.show()

def mijn_functie():   # Nieuw
    print("Er werd op mij geklikt!") # Nieuw

button.clicked.connect(mijn_functie) # Nieuw

app.exec_()

Oefening 2

Schrijf een Python programma met Qt dat 2 buttons toont en waarbij je “Opgeslagen” afdrukt als je op “Save” klikt, en “Geannulleerd” als je op “Cancel” klikt:

Save
Cancel

Invoerveld 1/3

from PySide6 import QtWidgets

def mijn_functie():
    print("Er werd op mij geklikt!")

app = QtWidgets.QApplication()
wid = QtWidgets.QWidget()
wid.show()
button = QtWidgets.QPushButton("Klik op mij", wid)
button.show()
button.clicked.connect(mijn_functie)

edit = QtWidgets.QTextEdit("Je naam", wid) # Nieuw
edit.show() # Nieuw

app.exec_()

Invoerveld 2/3

Om dit probleem te voorkomen, kunnen we de positie van het invoerveld aanpassen via de setGeometry() method:

from PySide6 import QtWidgets

def mijn_functie():
    print("Er werd op mij geklikt!")

app = QtWidgets.QApplication()
wid = QtWidgets.QWidget()
wid.show()
button = QtWidgets.QPushButton("Klik op mij", wid)
button.show()
button.clicked.connect(mijn_functie)

edit = QtWidgets.QTextEdit("Je naam", wid)
edit.setGeometry(10, 30, 100, 100) # Nieuw
edit.show()

app.exec_()

Invoerveld 3/3

from PySide6 import QtWidgets

def mijn_functie():
    print(edit.toPlainText())

app = QtWidgets.QApplication()
wid = QtWidgets.QWidget()
wid.show()
button = QtWidgets.QPushButton("Klik op mij", wid)
button.show()
button.clicked.connect(mijn_functie)

edit = QtWidgets.QTextEdit("Je naam", wid)
edit.setGeometry(10, 30, 100, 100) # Nieuw
edit.show()

app.exec_()