Construire une interface graphique Python avec PyQt Designer

Un workflow Python + PyQt Designer efficace

Avant de commencer, il est supposé que vous avez une connaissance intermédiaire à avancée de Python. Cela inclut les types de données de base (en particulier les dictionnaires), les instructions et les fonctions. Des connaissances sur la programmation orientée objet (POO) seraient utiles mais non nécessaires.

Ce sera un tutoriel rapide sur la création d’une interface graphique Python en utilisant une combinaison de la bibliothèque Python PyQt et du Concepteur. Designer est un programme fourni avec PyQt et vous permet de créer visuellement l’interface graphique. Nous utiliserons juste Designer et un éditeur de texte / editor Python. L’interface graphique Python n’a pas besoin d’être compliquée!

Examinons la création d’un workflow d’interface graphique Python avec ces fonctionnalités:

Un fichier de configuration pour les paramètres utilisateur personnalisés
Plusieurs fenêtres dans le programme
Ajout de fonctions aux boutons, boîtes de saisie et autres éléments cliquables
Images et logos

C’est vraiment tout ce dont vous avez besoin pour une interface graphique Python simple mais robuste. Dans ce tutoriel, créons simplement un simple convertisseur de devises.

Nous utiliserons Python 3.6 dans ce tutoriel et je vais créer ce tutoriel dans un environnement virtuel à l’aide de Windows 10. Dans ce tutoriel, nous n’aurons besoin que d’installer PyQt5 pour l’interface graphique et les demandes de notre exemple de projet. Cela se fera en utilisant pip. Il est important de noter que Designer n’est pas livré avec l’installation pip PyQt5 et doit être installé séparément. Le bloc de code ci-dessous affiche les commandes que vous devez taper:

pip install PyQt5
pip install PyQt5Designer
pip install requests

Output of the pip install process for PyQt5

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

Rechercher « Designer ”et il devrait apparaître

Données monétaires

Nous pouvons obtenir des données Forex gratuites de ExchangeRate-API qui a commodément une API que nous pouvons utiliser. L’API renvoie un objet JSON avec les informations de devise qui peuvent être naviguées à l’aide d’un dictionnaire Python. Les taux de change sont basés sur la devise principale que vous spécifiez.

Dans l’exemple ci-dessous, nous voulons examiner le Forex en utilisant le dollar américain (USD) comme devise 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.
}
}

La création de l’interface graphique

Vient maintenant la partie amusante. Création de l’interface graphique !

Lorsque vous ouvrez Qt Designer, cette invite s’ouvre. Je veux commencer avec une toile vide, je vais donc choisir « Boîte de dialogue sans boutons », puis cliquer sur ”Créer ».

Vous avez maintenant une fenêtre de dialogue vide avec laquelle travailler. Vous pouvez commencer à ajouter des widgets en utilisant la liste de gauche. Vous ajoutez ces widgets en les faisant glisser et en les déposant dans la fenêtre de votre interface graphique. Bien qu’il existe de nombreux widgets, dans ce tutoriel, je ne couvrirai que les widgets suivants:

Étiquettes
Bouton poussoir
Line Edit
Combo Box

La liste déroulante est également connue sous le nom de liste déroulante et vous pouvez remplir cette liste en double-cliquant sur l’objet Combo Box dans Designer, cela vous donnera une fenêtre où vous pourrez ajouter des éléments. Dans ce cas, nous ajouterons les devises que nous utilisons. Cela permettra à l’utilisateur de décider quelle devise il souhaite utiliser comme devise de référence.

Remplissez le widget en cliquant sur le bouton d’ajout vert sur le bouton en bas à gauche

Lorsque vous commencez à ajouter ces widgets, vous devez vous assurer qu’ils sont correctement nommés afin de pouvoir y faire référence facilement dans le code Python. Cela se fait en utilisant le NOM d’objet dans l’éditeur de propriétés à droite. Habituellement, j’ajoute simplement leur fonction au nom existant, tel que labelTitle ou lineEditLocationDetails. Ce style de nommage m’aide à me souvenir du type d’objet GRAPHIQUE avec lequel je travaille lorsque je tape le code Python.

ObjectName (surligné en rouge) sera le nom de la variable lorsque nous travaillons avec le code Python

Stylisez-le comme vous le souhaitez, mais pour ceux qui suivent ce tutoriel, créez une interface graphique qui ressemble à ceci ci-dessous:

Ce texte flottant « Logo” est un espace réservé pour une image que nous allons charger. Cela sera expliqué plus tard!

Qt Designer en Python

Enregistrez le fichier d’interface utilisateur dans votre dossier de projet en tant que « mainDialog.ui », j’aime créer un sous-dossier appelé « ui », puis l’enregistrer là-bas afin que nous puissions organiser le dossier du projet.

Une fois qu’il est enregistré, nous devons le convertir en quelque chose que Python comprend réellement. À l’aide de l’invite de commandes, accédez au sous-dossier de l’interface utilisateur. Si vous le faites également dans un environnement virtuel, assurez-vous que vous vous trouvez également dans votre environnement virtuel contenant l’installation de PyQt5.

Tapez ce code pour accéder au dossier contenant le fichier d’interface utilisateur et convertir le .fichier ui dans un fichier .py:

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

À la racine du dossier du projet, créez un fichier Python appelé « main.py « . Entrez ce code:

Exécutez le main.py fichier utilisant votre interpréteur Python. Félicitations! Maintenant, Python peut exécuter le code et votre interface graphique apparaîtra. Je vais vous expliquer les parties importantes du code jusqu’à présent:

Ligne 5: Nous importons le mainDialog.py fichier de l’intérieur du sous-dossier de l’interface utilisateur. J’utilise un alias « mainDialog » pour faciliter le nommage.
Ligne 10: Cette classe contient toutes les fonctions liées à votre fenêtre mainDialog que vous venez de créer. Le premier argument appelle l’objet QDialog qui est le type d’interface graphique que nous utilisons. Le deuxième argument est basé sur l’alias que nous avons déclaré et c’est la classe Ui_Dialog dans le fichier Python qui a été générée à partir du.conversion de fichier ui
Ligne 12: La fonction __init__ est importante car c’est le code que vous souhaitez exécuter au démarrage du programme. C’est donc là que le soi.setupUi (self) intervient car vous souhaitez que l’interface utilisateur s’exécute lorsque vous ouvrez le programme. Nous allons mettre des choses comme le chargement des fichiers de configuration et la fonctionnalité des boutons ici parce que nous voulons qu’ils fonctionnent dès que nous exécutons le logiciel.
Ligne 20 : C’est le code qui exécute et ouvre l’interface graphique.

Ajout de fonctions aux boutons et objets

Maintenant, nous avons notre belle interface graphique. Comment faisons-nous pour qu’il fasse du Forex? Ajoutons la fonction pour charger les derniers taux Forex que j’ai montré au début de ce post. Ensuite, mettons le code pour connecter les objets au code Python.

Lorsque vous essayez de vous connecter aux objets que vous avez créés dans Designer, vous devez commencer par le « self.”. Donc, si votre objet dans PyQt Designer s’appelait labelTitle, vous appellerez l’objet en tapant self.Étiquette. Si votre objet s’appelait lineEditInputDirectory, vous l’appellerez en tapant self.lineEditInputDirectory et ainsi de suite.

Consultez l’essentiel de Github et l’explication ci-dessous:

Ligne 16: Cette fonction est appelée lorsque l’utilisateur clique sur le bouton pour charger les taux Forex. L’objet lui-même est soi.pushButtonLoadRates mais nous attachons une fonctionnalité lorsque l’utilisateur clique dessus en ajoutant.cliquer.connecter(). Cette fonction a quelques nuances spécifiques. L’argument pour.connect() n’accepte que la fonction sans parenthèse, donc dans ce cas, self.taux de charge. Si vous devez ajouter des arguments en raison des exigences de la fonction Python, vous devez utiliser un lambda, reportez-vous au bloc de code ci-dessous:

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

Ligne 19:.currentText() obtient la chaîne actuelle de l’objet ComboBox qui sera notre devise de référence. Donc, si l’utilisateur sélectionne USD, il retournera les taux Forex par rapport à 1 USD. Cette chaîne est ajoutée à l’URL utilisée pour se connecter à l’API dans la ligne suivante.

Lignes 24 à 26 : Elles sont utilisées pour charger nos données sur des objets lineEdit. Nous utilisons.setText() pour modifier le texte sur les objets lineEdit. Il n’accepte que les chaînes, donc les nombres de l’API doivent être convertis en chaîne.

Derniers taux Forex par rapport à 1 Peso philippin

Ajout d’un fichier de configuration

Cette partie est un peu délicate et c’est là que vos connaissances Python existantes seront utiles. Dans cette section, nous aborderons les fonctionnalités suivantes:

Ouverture d’une nouvelle fenêtre dans le programme
Création et utilisation d’un fichier de configuration

Maintenant que nous avons un programme fonctionnel, disons que, par exemple, différentes personnes de votre département ont des besoins différents et travaillent toutes avec des devises différentes. Nous pouvons leur faciliter la vie en ajoutant un fichier de configuration afin qu’ils n’aient pas à utiliser la liste déroulante à chaque fois. En utilisant un fichier de configuration, nous pouvons enregistrer leurs paramètres uniques, puis les charger au démarrage du programme.

C’est là qu’intervient le bouton « Config”. Créons une nouvelle fenêtre pour que l’utilisateur puisse modifier ses paramètres. Cela nous permet de garder la fenêtre principale propre et organisée.

Enregistrez ceci dans votre dossier d’interface utilisateur en tant que configDialog.ui et comme nous l’avons fait plus tôt dans ce tutoriel, convertissez-le en utilisant la même commande pyuic5 que celle du bloc de code ci-dessous:

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

Voici à quoi devrait ressembler le code mis à jour ci-dessous. Les explications pour les nouveaux ajouts de code sont ci-dessous cet élément essentiel de Github:

Ligne 6: Nous ajoutons la fenêtre de dialogue de configuration via cette instruction d’importation
Ligne 10-11: Nouvelles instructions d’importation pertinentes pour avoir un bon flux de travail de fichier de configuration. pickle et os sont tous deux livrés avec votre environnement Python par défaut et n’ont pas besoin d’installations supplémentaires.
Ligne 13-14: L’emplacement du fichier de configuration est utilisé tout au long du script dans toutes les classes, nous le déclarons donc global et le mettons en majuscules car il s’agit d’une constante.
Ligne 17 : Cette classe contient toutes les informations pertinentes pour la fenêtre de configuration. Si vous souhaitez appeler des objets dans le fichier d’interface utilisateur de configuration que vous avez créé, il est recommandé que l’appel soit effectué dans cette classe, pas dans la classe MainDialog.
Ligne 23 : Nous chargeons le fichier de configuration existant. Nous faisons cela pour pouvoir montrer quel est le paramètre actuel à l’utilisateur.
Ligne 26: À l’aide du fichier de configuration chargé, nous définissons le texte de la zone de liste déroulante quel que soit le paramètre actuel.
Ligne 33: Lorsque nous enregistrons la configuration, nous voulons mettre à jour le dictionnaire stocké dans self.config avant d’écrire le fichier de configuration.
Ligne 39 : Ceci ferme la fenêtre des paramètres de configuration.
Ligne 48-54 : C’est la logique lors du chargement du fichier de configuration dans la fenêtre de dialogue principale. Pour une raison quelconque, le fichier de configuration peut disparaître et le programme ne se lancera pas en raison d’erreurs. Si le fichier de configuration est manquant, créez un fichier de configuration avec les paramètres par défaut afin que l’utilisateur puisse toujours lancer le programme, puis modifier les paramètres ultérieurement.
Ligne 56: Nous chargeons les paramètres personnalisés et définissons la liste déroulante sur la devise préférée de l’utilisateur.
Ligne 62-63 : Cela lance la fenêtre des paramètres de configuration. Ceci est basé sur le nom du nom de la classe de dialogue de configuration. Dans ce cas, la classe est nommée ConfigParameters.
Ligne 65-68: Une fois que l’utilisateur a terminé de configurer ses paramètres et que la fenêtre est fermée. Le programme se mettra à jour et chargera à nouveau le fichier de configuration avant de mettre à jour la liste déroulante de la devise de référence.

Ce flux de travail permet à l’utilisateur d’enregistrer ses paramètres uniques et le programme fonctionnera toujours si le fichier de configuration est manquant. Vous voulez essayer de prendre en compte chaque problème que votre programme rencontrera.

Ajout d’images

Maintenant que vous avez un programme entièrement fonctionnel, ajoutons la touche finale: un logo. Bien qu’il puisse y avoir un fichier de ressources PyQt où vous pouvez stocker des images, je préfère simplement charger des images à l’aide d’étiquettes et de pixmaps. C’est très rapide.

Ligne 56-58: Nous chargeons le logo que j’ai enregistré dans le dossier ui. Ensuite, j’ai défini l’objet labelLogo pour charger le pixmap et défini le contenu à l’échelle à la taille de l’objet labelLogo.

Final Thoughts

Hopefully this tutorial gives some clarity on how PyQt5 Designer works. J’ai passé d’innombrables heures à googler ces choses et même des tutoriels payants sur Udemy étaient un peu inutiles.