Tutorial PySide6: crea applicazioni GUI con Python

Diciamoci la verità: gli stakeholder non tecnici, o gli utenti finali, non sono interessati ai Jupyter Notebook o agli script Python che crei come data practitioner. Vogliono poter interagire con la soluzione e vedere i risultati con i propri occhi.

Per questo dobbiamo trasformare il nostro lavoro in report di insight, dashboard o applicazioni di data science. Sebbene report, dashboard e applicazioni web siano comuni, un’alternativa meno esplorata sono le applicazioni desktop.

Immagina di poter progettare un’app in cui gli utenti possano cliccare pulsanti, compilare moduli e navigare tra i menu — tutto tramite un’interfaccia chiara e gradevole sul tuo desktop. Quanto sarebbe bello?

In questo tutorial introdurremo PySide6, ti aiuteremo con le installazioni iniziali e costruiremo la tua prima applicazione desktop. Esploreremo anche i widget più usati, integreremo visualizzazioni dei dati dalle librerie di data science più popolari e condivideremo risorse utili.

Cos’è PySide6?

PySide6 è un toolkit che ti permette di creare applicazioni software in Python con interfacce grafiche attraenti e intuitive.

È come un set di mattoncini per il software, che consente anche a chi è alle prime armi di assemblare gli elementi visivi e interattivi che compongono un’app. Con PySide6 puoi trasformare le tue idee in applicazioni reali e funzionanti che girano su Windows, Mac, Linux e persino su piattaforme mobile.

Installare PySide6

Per la configurazione, diamo per scontato che tu abbia già installato Python e che stia usando il tuo solito IDE. L’installazione è piuttosto semplice.

Apri il terminale ed esegui il seguente comando: tutto qui.

pip3 install pyside6

Crea la tua prima applicazione PySide6

Ora che hai installato correttamente la libreria, il passo successivo è creare la tua prima applicazione PySide6. È anche un modo per verificare che tutto funzioni, dandoti un assaggio delle applicazioni desktop.

Crea un file Python chiamato “main.py” e copia e incolla il codice seguente.

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

Capiremo il codice tra un attimo, ma prima esegui il file Python dal terminale come segue:

python3 run main.py

Complimenti, hai creato la tua prima applicazione desktop! Dovresti vedere qualcosa di simile:

L’app desktop “Hello, PySide6” (Immagine dell’autore)

Analizziamo ora il semplice script PySide6 visto in precedenza. Per prima cosa importiamo i moduli rilevanti:

import sys
from PySide6.QtWidgets import QApplication, QLabel

• sys è un modulo della libreria standard di Python che fornisce accesso ad alcune variabili usate o mantenute dall’interprete Python. Nel contesto di un’applicazione PySide6, è comunemente usato per gli argomenti a riga di comando. Dai un’occhiata al nostro tutorial sul parsing degli argomenti da riga di comando per saperne di più.
• QApplication e QLabel sono importati da PySide6.QtWidgets. QApplication è la classe centrale di gestione dell’applicazione in PySide6, necessaria per qualsiasi applicazione GUI. QLabel è un widget che visualizza testo, che usiamo per mostrare un semplice messaggio.

Successivamente, creiamo un’istanza di QApplication.

app = QApplication(sys.argv)

Questo è richiesto in ogni applicazione PySide6. sys.argv viene utilizzato per passare gli argomenti da riga di comando all’applicazione. Anche se non usi argomenti da riga di comando, sys.argv è comunque necessario, perché inizializza QApplication con alcuni valori predefiniti.

label = QLabel('Hello, PySide6!')

Poi creiamo un widget QLabel con il testo "Hello, PySide6!". Questo è il testo che verrà visualizzato nella finestra dell’applicazione.

label.show()

Questa riga rende visibile il label. Per impostazione predefinita, i widget in PySide6 non sono visibili finché non li mostri esplicitamente.

sys.exit(app.exec_())

Infine, questa riga avvia il loop degli eventi dell’applicazione. Il metodo exec_() di QApplication entra nel ciclo principale dell’applicazione, dove vengono elaborati tutti gli eventi (come clic del mouse e pressioni dei tasti). La chiamata a sys.exit() garantisce un’uscita pulita quando l’applicazione viene chiusa. Il loop degli eventi continua finché l’istanza di QApplication non riceve un segnale di uscita, ad esempio la chiusura della finestra.

Come abbiamo visto nell’output, il nostro script crea una semplice applicazione GUI con una finestra singola che mostra il testo “Hello, PySide6!”.

Integrare i widget di PySide6 nell’applicazione GUI

I widget, nel contesto di PySide6 e delle GUI, sono i mattoni fondamentali usati per creare un’interfaccia utente in un’applicazione software. Pensa ai widget come ai vari elementi che vedi e con cui interagisci in qualsiasi applicazione — pulsanti, caselle di testo, etichette, slider e menu a discesa.

Nella prima applicazione PySide6 abbiamo visto un widget label usato per visualizzare del testo. Quando costruiamo una GUI con PySide6, in sostanza disponiamo questi widget in una finestra in modo che abbia senso per la nostra applicazione. Ogni widget ha uno scopo specifico e interagisce con l’utente in modo diverso.

L’elenco completo dei widget e del loro utilizzo si trova nella documentazione ufficiale, ma quelli più comuni sono:

• QLabel: Un widget usato per visualizzare testo o immagini. Spesso è utilizzato per mostrare istruzioni, messaggi o anche immagini in una GUI.
• QPushButton: Un pulsante cliccabile con cui gli utenti possono interagire per avviare determinate azioni. È uno dei widget più fondamentali nello sviluppo GUI, usato per inviare moduli, avviare processi e altro.
• QLineEdit: Questo widget consente agli utenti di inserire e modificare una singola riga di testo. È comunemente usato in moduli e impostazioni in cui è richiesto un input testuale, come l’inserimento di un nome o di un numero.
• QComboBox: Una combinazione di un elenco a discesa e un campo di testo, che consente di scegliere un’opzione da un elenco di scelte predefinite o di digitare la propria.
• QCheckBox: Presenta una casella che l’utente può selezionare o deselezionare. È tipicamente usata per abilitare o disabilitare funzionalità o per indicare l’accettazione di termini e condizioni.
• QRadioButton: Progettato per selezionare un’unica opzione da un insieme: i radio button consentono una sola scelta all’interno di un gruppo, rendendoli ideali per opzioni come genere, fasce d’età o altre selezioni esclusive.
• QTextEdit: Un widget per l’editing di testo su più righe, che offre più funzionalità rispetto a QLineEdit, come formattazione del testo, copia e incolla e scorrimento.
• QSlider: Fornisce un controllo a cursore, utile per inserire valori numerici entro un intervallo, ad esempio regolare il volume o impostare un filtro di prezzo.
• QSpinBox: Un widget che consente di selezionare un numero all’interno di un intervallo. L’utente può aumentare o diminuire il numero usando piccole frecce su e giù.
• QProgressBar: Mostra l’avanzamento di un’attività. Rappresenta visivamente la percentuale di completamento, risultando utile per monitorare processi come caricamenti o download di file.
• QTableWidget: Utile per visualizzare dati in formato tabellare. Consente di organizzare i dati in righe e colonne, facilitando la visualizzazione e l’interazione con dati strutturati.

Creiamo un’applicazione che utilizza e visualizza questi widget comuni:

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_())

L’output è il seguente:

L’app desktop dei widget (Immagine dell’autore)

Abbiamo creato con successo un’applicazione desktop che include i widget più comuni. Per facilitare la comprensione, abbiamo aggiunto etichette accanto a ciascun widget. Anche se si tratta di un’applicazione di esempio, ora possiamo scegliere e usare uno di questi widget popolari per le nostre applicazioni più complesse.

Un’app di visualizzazione dei dati con PySide6, Matplotlib e Seaborn

Per creare questa applicazione, prima scegliamo un dataset popolare e realizziamo visualizzazioni indipendenti. Questo passaggio ricorda l’analisi esplorativa dei dati che facciamo quotidianamente nel lavoro di data science. Poi incapsuliamo queste visualizzazioni in un’app desktop, proprio come possiamo trasformare i nostri report e le nostre analisi in un’applicazione desktop interattiva.

Prima di iniziare, assicuriamoci di avere tutte le librerie necessarie eseguendo il seguente comando nel terminale.

pip3 install matplotlib seaborn

Passo 1: creare semplici visualizzazioni indipendenti

Qui carichiamo il celebre “iris dataset” disponibile nativamente nel pacchetto di visualizzazione Python — Seaborn. Usiamo lo stesso pacchetto, insieme a Matplotlib, per creare le visualizzazioni. Per una comprensione completa del plotting con Seaborn, potresti voler consultare la nostra guida alle visualizzazioni con Python Seaborn.

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

Quindi creiamo le visualizzazioni come segue:

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()

La prima visualizzazione è uno scatter plot della lunghezza del sepalo rispetto alla larghezza del sepalo, colorato per specie.

Visualizzazione n. 1: lunghezza del sepalo vs. larghezza del sepalo (Immagine dell’autore)

La seconda visualizzazione è un istogramma della lunghezza del petalo, colorato per specie.

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

E l’output è il seguente:

Visualizzazione n. 2: istogramma della lunghezza del petalo (Immagine dell’autore)

Infine, tracciamo un box plot che mostra la distribuzione della larghezza del petalo nelle diverse specie.

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

La visualizzazione è la seguente:

Questi grafici forniscono diversi insight sul dataset Iris, mettendo in luce relazioni e distribuzioni di varie caratteristiche tra le specie di iris.

Passo 2: integrare le visualizzazioni nell’app desktop

Per prima cosa, vediamo il codice e capiamolo.

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_())

Strutturiamo l’applicazione attorno alla classe IrisVisualizer, che estende QMainWindow di PySide6. Questa classe imposta la finestra principale e il suo layout, fungendo da contenitore per le nostre visualizzazioni. Ogni grafico è incorporato nella GUI usando FigureCanvasQTAgg di Matplotlib, che consente di visualizzare le figure di Matplotlib come widget PySide6.

La chiave dell’integrazione è nel metodo addPlotCanvas. Questo metodo crea una figura Matplotlib, vi disegna un grafico e poi incorpora tale figura nel layout dell’applicazione. Metodi specifici come addScatterPlot, addHistogram e addBoxPlot definiscono i singoli grafici, che prima erano grafici indipendenti. Il layout della finestra principale è impostato su un layout a riquadri verticali (QVBoxLayout), che impila tutti i grafici in verticale.

Vediamo la nostra applicazione finale:

Applicazione desktop con visualizzazioni del dataset Iris (Immagine dell’autore)

Questa applicazione non è forse migliore di un grafico nel Jupyter Notebook? Certo, è un esempio semplice, ma una volta compresi i concetti alla base della creazione di queste applicazioni, possiamo evolverle in una dashboard di insight sui dati completa o in un’applicazione di data science.

Conclusione

Questo tutorial ha introdotto PySide6, una libreria Python che consente ai data practitioner di creare applicazioni desktop GUI utilizzando il linguaggio più familiare — Python. Siamo partiti dall’installazione di PySide6 e dalla creazione della prima applicazione desktop.

Abbiamo poi esteso l’esempio per coprire i widget più comuni usati nelle applicazioni desktop.

Infine, abbiamo visto come integrare visualizzazioni da librerie popolari come Seaborn e Matplotlib direttamente nelle nostre applicazioni PySide6.

Per approfondire, ti invitiamo a consultare la documentazione ufficiale e a seguire la tua curiosità per creare le applicazioni che preferisci. In alternativa, puoi dare un’occhiata anche al nostro tutorial che crea applicazioni desktop GUI in Python usando un’altra libreria, Tkinter.