PySide6-tutorial: GUI-applicaties bouwen met Python

Laten we eerlijk zijn: niet-technische stakeholders of eindgebruikers zijn niet geïnteresseerd in de Jupyter Notebooks of de Python-scripts die je als dataprofessional maakt. Ze willen met de oplossing kunnen interacteren en de resultaten zelf kunnen zien.

Daarom moeten we ons werk omzetten in inzichtelijke rapporten, dashboards of data-scienceapplicaties. Hoewel rapporten, dashboards en webapplicaties gangbaar zijn, is een minder verkend alternatief de desktopapplicatie.

Stel je voor dat je een app kunt ontwerpen waarin gebruikers op knoppen kunnen klikken, formulieren invullen en door menu’s navigeren — allemaal via een duidelijke en prettige interface op je desktop. Hoe cool is dat?

In deze tutorial introduceren we PySide6, helpen we je met de eerste installaties en bouwen we je eerste desktopapplicatie. We verkennen ook veelgebruikte widgets, nemen datavisualisaties op uit populaire data-sciencebibliotheken en delen handige resources.

Wat is PySide6?

PySide6 is een toolkit waarmee je softwareapplicaties kunt maken met de programmeertaal Python en aantrekkelijke, intuïtieve grafische interfaces.

Het is als een set bouwblokken voor software, waarmee zelfs beginnende programmeurs visuele en interactieve elementen kunnen samenstellen die een app vormen. Met PySide6 kun je je ideeën omzetten in echte, werkende applicaties voor Windows, Mac, Linux en zelfs mobiele platforms.

PySide6 instellen

Voor de setup gaan we ervan uit dat je Python al hebt geïnstalleerd en je gebruikelijke IDE bij de hand hebt. De installatie is vrij eenvoudig.

Open je terminal en voer het volgende uit, dan ben je klaar.

pip3 install pyside6

Je eerste PySide6-applicatie bouwen

Nu je de bibliotheek succesvol hebt geïnstalleerd, is de volgende stap het bouwen van je eerste PySide6-applicatie. Dit is ook een manier om te testen of de setup goed werkt, terwijl je een idee krijgt van desktopapplicaties.

Maak een Python-bestand met de naam “main.py” en kopieer en plak de volgende code.

import sys
from PySide6.QtWidgets import QApplication, QLabel
app = QApplication(sys.argv)
label = QLabel('Hello, PySide6!')
label.show()
sys.exit(app.exec_())

We zullen de code zo uitleggen, maar voer eerst het Python-bestand via je terminal uit als volgt:

python3 run main.py

Gefeliciteerd, je hebt je eerste desktopapplicatie gebouwd! Je zou zoiets als dit moeten zien:

De desktopapplicatie “Hello, PySide6” (Afbeelding door de auteur)

Laten we nu het eenvoudige PySide6-script van eerder opsplitsen. We importeren eerst relevante modules:

import sys
from PySide6.QtWidgets import QApplication, QLabel

• sys is een module uit de standaardbibliotheek van Python die toegang biedt tot enkele variabelen die door de Python-interpreter worden gebruikt of beheerd. In de context van een PySide6-applicatie wordt het vaak gebruikt voor commandoregelargumenten. Bekijk onze tutorial over argumenten parsen op de commandoregel om meer te leren.
• QApplication en QLabel worden geïmporteerd uit PySide6.QtWidgets. QApplication is de kernklasse voor applicatiebeheer in PySide6, noodzakelijk voor elke GUI-applicatie. QLabel is een widget die tekst weergeeft, die we gebruiken om een simpel bericht te tonen.

Vervolgens maken we een instantie van QApplication.

app = QApplication(sys.argv)

Dit is vereist in elke PySide6-applicatie. sys.argv wordt gebruikt om commandoregelargumenten door te geven aan de applicatie. Ook als je geen commandoregelargumenten gebruikt, is sys.argv nog steeds nodig, omdat het de QApplication met enkele standaardwaarden initialiseert.

label = QLabel('Hello, PySide6!')

Vervolgens maken we een QLabel-widget met de tekst "Hello, PySide6!". Dit is de tekst die in ons applicatievenster wordt weergegeven.

label.show()

Deze regel maakt het label zichtbaar. Standaard zijn widgets in PySide6 niet zichtbaar totdat je ze expliciet toont.

sys.exit(app.exec_())

Tot slot start deze regel de eventloop van de applicatie. De methode exec_() van QApplication gaat de hoofdloop van de applicatie in, waar alle events (zoals muisklikken en toetsaanslagen) worden verwerkt. De aanroep sys.exit() zorgt voor een nette afsluiting wanneer de applicatie wordt gesloten. De eventloop draait totdat de QApplication-instantie een exitsignaal ontvangt, zoals het sluiten van het venster.

Zoals we eerder in de output zagen, creëert ons script een basis-GUI-applicatie met één venster dat de tekst “Hello, PySide6!” weergeeft.

PySide6-widgets opnemen in de GUI-applicatie

Widgets in de context van PySide6 en GUI’s zijn de bouwstenen waarmee je een gebruikersinterface in een softwareapplicatie maakt. Zie widgets als de verschillende elementen die je in elke app ziet en gebruikt — zoals knoppen, tekstvakken, labels, schuifregelaars en keuzemenu’s.

In de eerste PySide6-applicatie zagen we een labelwidget die werd gebruikt om tekst weer te geven. Bij het bouwen van een GUI met PySide6 rangschikken we deze widgets in feite in een venster op een manier die logisch is voor onze applicatie. Elke widget heeft een specifiek doel en reageert anders op de gebruiker.

De uitgebreide lijst met widgets en hun gebruik is te vinden in de officiële documentatie, maar de meest gebruikte zijn:

• QLabel: Een widget om tekst of afbeeldingen weer te geven. Wordt vaak gebruikt voor instructies, meldingen of zelfs om afbeeldingen in een GUI te tonen.
• QPushButton: Een klikbare knop waarmee gebruikers acties kunnen starten. Het is een van de meest fundamentele widgets in GUI-ontwikkeling, gebruikt voor het verzenden van formulieren, starten van processen, enzovoort.
• QLineEdit: Met deze widget kunnen gebruikers één regel tekst invoeren en bewerken. Veelgebruikt in formulieren en instellingen waar tekstinvoer nodig is, zoals een naam of een getal.
• QComboBox: Een combinatie van een dropdownlijst en een tekstveld, waarmee gebruikers een optie uit vooraf gedefinieerde keuzes kunnen selecteren of zelf iets kunnen typen.
• QCheckBox: Toont een vakje dat gebruikers kunnen aanvinken of uitvinken. Meestal gebruikt om functies in of uit te schakelen of om akkoord te gaan met voorwaarden.
• QRadioButton: Ontworpen om één optie uit een set te kiezen; keuzerondjes laten één keuze binnen een groep toe en zijn ideaal voor bijvoorbeeld leeftijdscategorieën of andere exclusieve selecties.
• QTextEdit: Een widget voor tekstbewerking met meerdere regels, met meer functionaliteit dan QLineEdit, zoals tekstopmaak, kopiëren en plakken en scrollen.
• QSlider: Biedt een schuifregelaar, handig om numerieke waarden binnen een bereik in te voeren, zoals het aanpassen van volume of het instellen van een prijsfilter.
• QSpinBox: Een widget waarmee gebruikers een getal uit een bepaald bereik kunnen kiezen. Met kleine pijltjes omhoog en omlaag kun je de waarde verhogen of verlagen.
• QProgressBar: Toont de voortgang van een taak. Geeft visueel het voltooiingspercentage weer, handig om voortgang te volgen bij bijvoorbeeld uploads of downloads.
• QTableWidget: Handig om gegevens in tabelvorm weer te geven. Hiermee kun je data in rijen en kolommen organiseren, zodat gestructureerde data makkelijker te tonen en te gebruiken is.

Laten we een applicatie maken die deze veelvoorkomende widgets gebruikt en weergeeft:

import sys
from PySide6.QtWidgets import QApplication, QMainWindow, QLabel, QPushButton, QLineEdit, QComboBox, QCheckBox, QRadioButton, QTextEdit, QSlider, QSpinBox, QProgressBar, QTableWidget, QTableWidgetItem, QVBoxLayout, QHBoxLayout, QWidget

class DemoWindow(QMainWindow):
   def __init__(self):
       super().__init__()

       # Main Widget and Layout
       main_widget = QWidget()
       self.setCentralWidget(main_widget)
       main_layout = QVBoxLayout(main_widget)

       # Function to add widget with label
       def add_widget_with_label(layout, widget, label_text):
           hbox = QHBoxLayout()
           label = QLabel(label_text)
           hbox.addWidget(label)
           hbox.addWidget(widget)
           layout.addLayout(hbox)

       # QLabel
       self.label = QLabel('Hello PySide6!')
       add_widget_with_label(main_layout, self.label, 'QLabel:')

       # QPushButton
       self.button = QPushButton('Click Me')
       self.button.clicked.connect(self.on_button_clicked)
       add_widget_with_label(main_layout, self.button, 'QPushButton:')

       # QLineEdit
       self.line_edit = QLineEdit()
       add_widget_with_label(main_layout, self.line_edit, 'QLineEdit:')

       # QComboBox
       self.combo_box = QComboBox()
       self.combo_box.addItems(['Option 1', 'Option 2', 'Option 3'])
       add_widget_with_label(main_layout, self.combo_box, 'QComboBox:')

       # QCheckBox
       self.check_box = QCheckBox('Check Me')
       add_widget_with_label(main_layout, self.check_box, 'QCheckBox:')

       # QRadioButton
       self.radio_button = QRadioButton('Radio Button')
       add_widget_with_label(main_layout, self.radio_button, 'QRadioButton:')

       # QTextEdit
       self.text_edit = QTextEdit()
       add_widget_with_label(main_layout, self.text_edit, 'QTextEdit:')

       # QSlider
       self.slider = QSlider()
       add_widget_with_label(main_layout, self.slider, 'QSlider:')

       # QSpinBox
       self.spin_box = QSpinBox()
       add_widget_with_label(main_layout, self.spin_box, 'QSpinBox:')

       # QProgressBar
       self.progress_bar = QProgressBar()
       add_widget_with_label(main_layout, self.progress_bar, 'QProgressBar:')

       # QTableWidget
       self.table_widget = QTableWidget(5, 3) 
       for i in range(5):
           for j in range(3):
               item = QTableWidgetItem(f"Cell {i+1},{j+1}")
               self.table_widget.setItem(i, j, item)
       add_widget_with_label(main_layout, self.table_widget, 'QTableWidget:')

   def on_button_clicked(self):
       self.label.setText('Button Clicked!')

# Run the application
app = QApplication(sys.argv)
window = DemoWindow()
window.show()
sys.exit(app.exec_())

De output is als volgt:

De desktopapplicatie met widgets (Afbeelding door de auteur)

We hebben succesvol een desktopapplicatie gemaakt die de meest voorkomende widgets bevat. Voor de duidelijkheid hebben we naast elke widget labels toegevoegd. Hoewel dit een voorbeeldapplicatie is, kunnen we nu een van deze populaire widgets kiezen en gebruiken voor onze complexere applicaties.

Een datavisualisatie-applicatie met PySide6, Matplotlib en Seaborn

Om deze applicatie te maken, kiezen we eerst een populaire dataset en maken we losse visualisaties. Deze stap lijkt op de dagelijkse exploratieve data-analyse die we in data-sciencewerk doen. Daarna verpakken we deze visualisaties in een desktopapplicatie, net zoals we onze rapporten en analyses kunnen omzetten in een interactieve desktopapplicatie.

Voordat we beginnen, zorgen we dat we alle benodigde bibliotheken hebben door de volgende opdracht in de terminal uit te voeren.

pip3 install matplotlib seaborn

Stap 1: Eenvoudige losse visualisaties maken

Hier laden we de bekende “iris-dataset”, die native beschikbaar is in het Python-visualisatiepakket — Seaborn. We gebruiken hetzelfde pakket, samen met Matplotlib, om de visualisaties te maken. Voor een uitgebreid begrip van plotten met Seaborn kun je onze gids voor Python Seaborn-visualisatie bekijken.

import seaborn as sns
import matplotlib.pyplot as plt
# Load the Iris dataset
iris = sns.load_dataset("iris")

Vervolgens maken we visualisaties als volgt:

plt.figure(figsize=(6, 4))
sns.scatterplot(data=iris, x="sepal_length", y="sepal_width", hue="species")
plt.title("Sepal Length vs Sepal Width")
plt.show()

De eerste visualisatie is een scatterplot van kelkbladlengte versus kelkbladbreedte, ingekleurd per soort.

Visualisatie #1: Kelkbladlengte vs. kelkbladbreedte (Afbeelding door de auteur)

De tweede visualisatie is een histogram van kroonbladlengte, ingekleurd per soort.

plt.figure(figsize=(6, 4))
sns.histplot(iris, x="petal_length", hue="species", kde=True)
plt.title("Histogram of Petal Length")
plt.show()

En de output ziet er zo uit:

Visualisatie #2: Histogram van kroonbladlengte (Afbeelding door de auteur)

Tot slot maken we een boxplot die de verdeling van kroonbladbreedte per soort laat zien.

plt.figure(figsize=(6, 4))
sns.boxplot(x="species", y="petal_width", data=iris)
plt.title("Box Plot of Petal Width")
plt.show()

De visualisatie ziet er als volgt uit:

Deze plots bieden verschillende inzichten in de Iris-dataset en laten relaties en verdelingen van diverse kenmerken per irissoort zien.

Stap 2: Visualisaties integreren in de desktopapplicatie

Laten we eerst de code bekijken en begrijpen.

import sys
import seaborn as sns
from PySide6.QtWidgets import QApplication, QMainWindow, QVBoxLayout, QWidget
from matplotlib.backends.backend_qt5agg import FigureCanvasQTAgg as FigureCanvas
from matplotlib.figure import Figure

class IrisVisualizer(QMainWindow):
   def __init__(self):
       super().__init__()
       self.setWindowTitle("Iris Dataset Visualizations")
       self.setGeometry(100, 100, 1200, 900)  # x, y, width, height
       self.initUI()

   def initUI(self):
       central_widget = QWidget(self)
       self.setCentralWidget(central_widget)
       layout = QVBoxLayout(central_widget)

       # Adding multiple plots
       self.addScatterPlot(layout)
       self.addHistogram(layout)
       self.addBoxPlot(layout)

   def addPlotCanvas(self, layout, plot_func):
       canvas = FigureCanvas(Figure(figsize=(6, 4)))
       plot_func(canvas.figure)
       layout.addWidget(canvas)

   def addScatterPlot(self, layout):
       def scatter_plot(figure):
           iris = sns.load_dataset("iris")
           ax = figure.add_subplot(111)
           sns.scatterplot(data=iris, x="sepal_length", y="sepal_width", hue="species", ax=ax)
           ax.set_title("Sepal Length vs Sepal Width")

       self.addPlotCanvas(layout, scatter_plot)

   def addHistogram(self, layout):
       def histogram(figure):
           iris = sns.load_dataset("iris")
           ax = figure.add_subplot(111)
           sns.histplot(iris, x="petal_length", hue="species", kde=True, ax=ax)
           ax.set_title("Histogram of Petal Length")

       self.addPlotCanvas(layout, histogram)

   def addBoxPlot(self, layout):
       def box_plot(figure):
           iris = sns.load_dataset("iris")
           ax = figure.add_subplot(111)
           sns.boxplot(x="species", y="petal_width", data=iris, ax=ax)
           ax.set_title("Box Plot of Petal Width")

       self.addPlotCanvas(layout, box_plot)

# Run the application
app = QApplication(sys.argv)
window = IrisVisualizer()
window.show()
sys.exit(app.exec_())

We structureren de applicatie rond de klasse IrisVisualizer, die PySide6’ QMainWindow uitbreidt. Deze klasse stelt het hoofdvenster en de layout in en fungeert als container voor onze visualisaties. Elke plot wordt in de GUI ingebed met FigureCanvasQTAgg van Matplotlib, waarmee Matplotlib-figuren als PySide6-widgets kunnen worden weergegeven.

De kern van onze integratie zit in de methode addPlotCanvas. Deze methode maakt een Matplotlib-figuur, rendert er een plot op en voegt deze figuur vervolgens toe aan de layout van de applicatie. Specifieke methoden zoals addScatterPlot, addHistogram en addBoxPlot definiëren de afzonderlijke plots, die eerder onze losse plots waren. De layout van het hoofdvenster is een verticale boxlayout (QVBoxLayout), die alle plots verticaal stapelt.

Laten we onze uiteindelijke applicatie bekijken:

Desktopapplicatie met visualisaties van de Iris-dataset (Afbeelding door de auteur)

Is deze applicatie niet beter dan een plot in Jupyter Notebook? Natuurlijk is dit een eenvoudig voorbeeld, maar zodra we de concepten achter het maken van deze applicaties begrijpen, kunnen we ze uitbouwen tot een volwaardig dashboard met datainsights of een data-scienceapplicatie.

Conclusie

Deze tutorial introduceerde PySide6, een Python-bibliotheek waarmee dataprofessionals GUI-desktopapplicaties kunnen maken met de meest vertrouwde taal — Python. We begonnen met het installeren van PySide6 en het maken van onze eerste desktopapplicatie.

We hebben dit verder uitgebreid met de meest gebruikte widgets voor desktopapplicaties.

Tot slot hebben we begrepen hoe we visualisaties uit populaire bibliotheken zoals Seaborn en Matplotlib rechtstreeks in onze PySide6-applicaties kunnen opnemen.

Voor verdere verdieping raden we je aan om de officiële documentatie te raadplegen en je nieuwsgierigheid te volgen om je favoriete applicaties te maken. Of bekijk onze tutorial die GUI-desktopapplicaties in Python maakt met een alternatieve bibliotheek, Tkinter.