Un efficace flusso di lavoro Python + PyQt Designer

Prima di iniziare, si presume che tu abbia una conoscenza intermedia o avanzata di Python. Ciò include tipi di dati di base (in particolare dizionari), istruzioni e funzioni. La conoscenza della programmazione orientata agli oggetti (OOP) sarebbe utile ma non necessaria.

Questo sarà un breve tutorial sulla creazione di una GUI Python utilizzando una combinazione della libreria Python PyQt e Designer. Designer è un programma che viene fornito con PyQt e consente di creare visivamente la GUI. Useremo solo Designer e un IDE Python / editor di testo. Python GUI non ha bisogno di essere complicato!

vediamo la creazione di un Python GUI flusso di lavoro con queste caratteristiche:

• Un file di configurazione per le impostazioni utente personalizzate
• Più finestre all’interno del programma.
• Aggiunta di funzioni ai pulsanti, caselle di input, e altri elementi cliccabili
• Immagini e loghi

Questo è davvero tutto il necessario per un semplice ma robusto Python GUI. In questo tutorial creiamo solo un semplice convertitore di valuta.

Useremo Python 3.6 in questo tutorial e sarò la creazione di questo tutorial in un ambiente virtuale utilizzando Windows 10. In questo tutorial avremo solo bisogno di installare PyQt5 per la GUI e le richieste per il nostro progetto di esempio. Questo sarà fatto usando pip. È importante notare che Designer non viene fornito con l’installazione pip PyQt5 e deve essere installato separatamente. Il blocco di codice qui sotto mostra i comandi che è necessario digitare:

pip install PyQt5
pip install PyQt5Designer
pip install requests

Once it is installed, just search for “Designer” in your computer and it should pop up.

Dati Valuta

E ‘ possibile ottenere gratuitamente i dati Forex da ExchangeRate-API che, opportunamente, una API che possiamo utilizzare. L’API restituisce un oggetto JSON con le informazioni sulla valuta che possono essere navigate utilizzando un dizionario Python. I tassi di cambio sono basati sulla valuta principale specificata.

Nell’esempio seguente vogliamo guardare al Forex usando il dollaro USA (USD) come valuta principale.

import requestsurl = 'https://api.exchangerate-api.com/v4/latest/USD'
response = requests.get(url)
data = response.json()# The data variable will look like the dictionary below
{
"base": "USD",
"date": "2020-14-20",
"time_last_updated": 1553092232,
"rates": {
"USD": 1,
"AUD": 1.4882,
"CAD": 1.325097,
"...": 1.311357,
"...": 7.4731, etc. etc.
}
}

Creare la GUI

Ora arriva la parte divertente. Creazione della GUI!

Quando apri Qt Designer si aprirà questo prompt. Voglio iniziare con una tela vuota, quindi sceglierò ” Finestra di dialogo senza pulsanti “e quindi fare clic su”Crea”.

Ora è vuota la finestra di dialogo per lavorare con. È possibile iniziare ad aggiungere widget utilizzando l’elenco a sinistra. Aggiungi questi widget trascinandoli e rilasciandoli sulla tua finestra GUI. Mentre ci sono molti widget, in questo tutorial voglio solo coprire i seguenti widget:

• Etichette
• premere il Pulsante
• testo
• Casella Combinata

La Casella Combinata è anche conosciuto come un elenco a discesa e si può compilare questa lista con un doppio clic sull’oggetto della Casella Combinata nella Progettazione, essa vi darà una finestra in cui è possibile aggiungere elementi. In questo caso, aggiungeremo le valute che stiamo usando. Ciò consentirà all’utente di decidere quale valuta desidera utilizzare come valuta di riferimento.

Quando si avvia l’aggiunta di questi widget è necessario assicurarsi che essi sono denominati correttamente in modo che si può vedere facilmente in codice Python. Questo viene fatto usando objectName nell’editor delle proprietà sulla destra. Di solito aggiungo semplicemente la loro funzione al nome esistente, come labelTitle o lineEditLocationDetails. Questo stile di denominazione mi aiuta a ricordare il tipo di oggetto GUI con cui sto lavorando quando sto digitando il codice Python.

lo Stile nel modo desiderato, ma per coloro che hanno seguito questo tutorial per creare una GUI simile a questa qui sotto:

Che il galleggiante “Logo” il testo è un segnaposto per una foto che vi farà carico. Che sarà spiegato più tardi!

Qt Designer to Python

Salvare il file UI nella cartella del progetto come ” mainDialog.ui”, mi piace creare una sottocartella chiamata “ui” e quindi salvarla lì in modo da poter mantenere organizzata la cartella del progetto.

Una volta salvato, dobbiamo convertirlo in qualcosa che Python effettivamente capisce. Utilizzando il prompt dei comandi, passare alla sottocartella dell’interfaccia utente. Se lo stai facendo anche in un ambiente virtuale, assicurati di trovarti anche nel tuo ambiente virtuale che contiene l’installazione di PyQt5.

Digitare questo codice per passare alla cartella contenente il file ui e convertire il .file ui in un file. py:

cd "your/ui/folder/here"
pyuic5 mainDialog.ui -o mainDialog.py

Nella radice della cartella del progetto, creare un file Python chiamato “main.py”. Inserisci questo codice:

Eseguire il main.py file usando il tuo interprete Python. Congratulazioni! Ora Python può eseguire il codice e la tua GUI apparirà. Spiegherò le parti importanti del codice finora:

• Linea 5: Stiamo importando il mainDialog.py file dall’interno della sottocartella dell’interfaccia utente. Io uso un alias “mainDialog” per rendere più facile la denominazione.
• Linea 10: Questa classe contiene tutte le funzioni relative alla finestra mainDialog che hai appena creato. Il primo argomento chiama l’oggetto QDialog che è il tipo di GUI che stiamo usando. Il secondo argomento si basa sull’alias che abbiamo dichiarato ed è la classe Ui_Dialog all’interno del file Python che è stato generato dal .conversione file ui
• Riga 12: La funzione__ init _ _ è importante perché è il codice che si desidera eseguire all’avvio del programma. Quindi questo è dove il sé.setupUi (self) arriva perché vuoi che l’interfaccia utente venga eseguita quando apri il programma. Metteremo cose come caricare file di configurazione e funzionalità dei pulsanti qui perché vogliamo che funzionino non appena eseguiamo il software.
• Riga 20: Questo è il codice che esegue e apre la GUI.

Aggiunta di funzioni ai pulsanti e agli oggetti

Ora abbiamo la nostra bella GUI. Come facciamo a fare Forex? Aggiungiamo la funzione per caricare le ultime tariffe Forex che ho mostrato all’inizio di questo post. Quindi, inseriamo il codice per collegare gli oggetti al codice Python.

Quando si tenta di connettersi agli oggetti creati in Designer, è necessario iniziare con il ” sé.”. Quindi, se il tuo oggetto in PyQt Designer è stato chiamato labelTitle, chiamerai l’oggetto digitando self.labelTitle. Se il tuo oggetto è stato chiamato lineEditInputDirectory, lo chiamerai digitando self.lineEditInputDirectory e così via.

Controlla il Github gist e la spiegazione di seguito:

Linea 16: Questa funzione viene chiamata quando l’utente fa clic sul pulsante per caricare i tassi Forex. L’oggetto stesso è sé stesso.pushButtonLoadRates ma alleghiamo funzionalità quando l’utente fa clic su di esso aggiungendo .clic.collegare(). Questa funzione ha alcune sfumature specifiche. L’argomento per .connect () accetta solo la funzione senza parentesi, quindi in questo caso, self._radi carico. Se è necessario aggiungere argomenti a causa dei requisiti della funzione Python è necessario utilizzare un lambda, fare riferimento al blocco di codice di seguito:

self.pushButton.clicked.connect(lambda:self.load_rates(arg1,arg2,...)) 

Riga 19: .currentText () ottiene la stringa corrente dell’oggetto comboBox che sarà la nostra valuta di riferimento. Quindi, se l’utente seleziona USD, restituirà i tassi Forex relativi a 1 USD. Questa stringa viene aggiunta all’URL che viene utilizzato per connettersi all’API nella riga successiva.

Linee 24-26: Vengono utilizzate per caricare i nostri dati sugli oggetti lineEdit. Usiamo .setText() per modificare il testo sugli oggetti lineEdit. Accetta solo stringhe, quindi i numeri dell’API dovrebbero essere convertiti in stringa.

Aggiunta di un File di Configurazione

Questa parte è un po ‘ difficile e, dove esistente Python conoscenza sarà utile. In questa sezione tratteremo le seguenti caratteristiche:

• Aprire una nuova finestra all’interno del programma
• Creare e utilizzare un file di configurazione

Ora che abbiamo un programma funzionante, diciamo che, per esempio, diverse persone nel tuo dipartimento hanno esigenze diverse e lavorano tutte con valute diverse. Possiamo rendere le loro vite più facili aggiungendo un file di configurazione in modo che non debbano usare la casella a discesa ogni volta. Utilizzando un file di configurazione possiamo salvare le loro impostazioni uniche e poi caricarlo quando il programma si avvia.

È qui che entra in gioco il pulsante “Config”. Creiamo una nuova finestra per l’utente di modificare le proprie impostazioni. In questo modo ci permette di mantenere la finestra principale pulita e organizzata.

Salva questo nel tuo ui cartella configDialog.ui e come abbiamo fatto in precedenza in questo tutorial, convertirlo utilizzando lo stesso comando pyuic5 come si vede nel blocco di codice qui sotto:

cd "your/ui/folder/here"
pyuic5 configDialog.ui -o configDialog.py

Ora ecco come dovrebbe essere il codice aggiornato di seguito. Le spiegazioni per le nuove aggiunte di codice sono sotto questo Github gist:

• Riga 6: Aggiungiamo la finestra di dialogo config attraverso questa istruzione import
• Riga 10-11: Nuove istruzioni import che sono rilevanti per avere un bel flusso di lavoro sui file di configurazione. pickle e os sono entrambi dotati del tuo ambiente Python predefinito e non hanno bisogno di installazioni aggiuntive.
• Linea 13-14: La posizione del file di configurazione viene utilizzata in tutto lo script in tutte le classi, quindi la dichiariamo come globale e la rendiamo all-caps poiché è una costante.
• Riga 17: Questa classe contiene tutte le informazioni rilevanti per la finestra di configurazione. Se si desidera chiamare gli oggetti nel file dell’interfaccia utente di configurazione creato, si consiglia di effettuare la chiamata in questa classe, non nella classe MainDialog.
• Riga 23: Carichiamo il file di configurazione esistente. Lo facciamo in modo da poter mostrare qual è l’impostazione corrente all’utente.
• Linea 26: Usando il file di configurazione caricato, impostiamo il testo della casella combinata su qualunque sia l’impostazione corrente.
• Linea 33: Quando salviamo la configurazione, vogliamo aggiornare il dizionario memorizzato in sé.config prima di scrivere il file di configurazione.
• Riga 39: Chiude la finestra dei parametri di configurazione.
• Linea 48-54: Questa è la logica quando si carica il file di configurazione nella finestra di dialogo principale. Per qualsiasi motivo, il file di configurazione potrebbe mancare e quindi il programma non verrà avviato a causa di errori. Se manca il file di configurazione, creare un file di configurazione con i parametri predefiniti in modo che l’utente possa ancora avviare il programma e quindi modificare i parametri in seguito.
• Linea 56: Carichiamo le impostazioni personalizzate e impostiamo la casella combinata sulla valuta preferita dell’utente.
• Riga 62-63: Avvia la finestra dei parametri di configurazione. Questo si basa sul nome del nome della classe di dialogo di configurazione. In questo caso, la classe è denominata ConfigParameters.
• Linea 65-68: Dopo che l’utente ha terminato la configurazione delle impostazioni e la finestra è chiusa. Il programma si aggiornerà e caricherà nuovamente il file di configurazione prima di aggiornare la casella combinata valuta di riferimento.

Questo flusso di lavoro consente all’utente di salvare le proprie impostazioni uniche e il programma funzionerà ancora se il file di configurazione è mancante. Vuoi provare a tenere conto di ogni problema che il tuo programma incontrerà.

Aggiungere immagini

Ora hai un programma completamente funzionale, aggiungiamo gli ultimi ritocchi: un logo. Mentre ci può essere un file di risorse PyQt in cui è possibile memorizzare le immagini, preferisco caricare semplicemente le immagini usando etichette e pixmap. Questo è molto veloce.

Linea 56-58: Carichiamo il logo che ho salvato nella cartella ui. Quindi ho impostato l’oggetto labelLogo per caricare la pixmap e impostare il contenuto in scala alla dimensione dell’oggetto labelLogo.

Final Thoughts

Hopefully this tutorial gives some clarity on how PyQt5 Designer works. Ho passato innumerevoli ore a cercare su Google queste cose e persino i tutorial a pagamento su Udemy sono stati un po ‘ inutili.