SOMMAIRE

I Introduction
II Installation des modules
III Codage de l'application
IV Conclusion

I Introduction

Dans ce document nous allons voir comment installer les packages utiles afin d’utiliser les modules de PyQt5 dans vos projets Python sur votre Raspberry Pi.

II Installation des modules

Pour utiliser PyQt5 sur votre mini-ordinateur, il vous faut avoir installé préalablement une édition de Python 3. Si vous ne l’avez pas déjà effectué il va falloir l’installer.

Avant de commencer à installer quoique ce soit il est toujours bon de mettre à jour le système, pour ce faire exécutez ces deux commandes :

puis :

Donc si vous n’avez pas encore installé Python et ses outils associés sur votre Raspberry Pi exécutez cette commande :

Cette commande installe la version 3.9 de Python, ce n’est pas la plus récente mais cela sera suffisant pour commencer. C’est la version la plus récente qui est fournie par le gestionnaire de paquets apt sous Raspberry Pi OS à l’heure actuelle.

Une fois l’installation de Python effectuée il suffit ensuite d’installer les packages liés à PyQt5 et ceux qui y sont associés (pour les Widgets et les outils de conception comme PyQt Designer et PyQt Creator).

Commencez par installer le paquet pyton3-pyqt5 :

Ensuite si vous voulez installer les outils de conception associés à PyQt5 (Qt Designer, Qt Creator) exécutez cette commande :

Si vous souhaitez utiliser aussi les outils Qt Quick il faut ensuite installer le paquet associé :

Pour développez notre première avec PyQt vous pouvez utiliser votre éditeur préféré, sinon je vous conseille d’installer Visual Studio Code :

Je vous recommande Visual Studio Code car il vous permet d’ajouter des extensions qui vous apporteront des fonctionnalités supplémentaires vous permettant de travailler plus efficacement (coloration syntaxique, autocomplétion, etc...)

Nous sommes maintenant prêts à utiliser PyQt5 et ses modules. Nous allons dans la partie suivante créer une petite application qui va nous permettre d’entrevoir quelques concepts de conception d’interface utilisateur avec PyQt5.

III Codage de l'application

Ouvrez votre éditeur et créez un nouveau fichier. Nommez-le par exemple « app.py » par exemple.

Si vous utilisez Visual Studio Code. Vous devez ouvrir un dossier de travail. Allez dans l’explorateur de fichier de votre Raspberry Pi et créez un dossier où bon vous semble et nommez-le comme vous le souhaitez. De retour dans l’éditeur ouvrez le dossier que vous venez de créer et ensuite créez votre fichier « app.py ».

Pour commencer il faut importer les modules nécessaires qui vont nous servir pour construire notre petite application.

Pour pouvoir construire une interface utilisateur nous avecc PyQt5 on utilise des composants dont les classes sont définies dans le module QtWidgets. On trouve toutes sortes de composants allant des labels aux tableaux en passant par les layouts qui vont vous permettent d’agencer vos composants le plus ergonomiquement possible. Tout est objet avec PyQt5.

Nous allons avoir besoin de ces composants suivants :

• QApplication qui est l’objet indispensable qui représente l’application en elle même;
• QMainWindow qui représente la fenêtre principale de l’application ;
• QPushButton qui va nous permettre de créer un bouton et de le placer dans la fenêtre ;
• Qlabel qui va nous permettre de créer et ajouter une étiquette sur notre fenêtrre ;
• QLineEdit qui va nous permettre d’y ajouter un champ de saisie ;
• QVBoxLayout qui est un objet layout nous permettant d’agencer ces composants verticalement sur la fenêtre ;
• Qwidget qui va être le composant qui va contenir tout ce beau monde et qui sera ajouté en dernier à la fenêtre.

Voici un aperçu de la fenêtre en cours d’exécution que nous devrions obtenir une fois le codage terminé.

Voici donc les lignes d’import utiles pour cet exemple :

import sys
from PyQt5.QtWidgets import (
    QApplication,
    QMainWindow,
    QPushButton,
    QLabel,
    QLineEdit,
    QVBoxLayout,
    QWidget
)

Continuons ensuite par la définition de la classe de notre objet principal c’est-à-dire notre fenêtre principale qui va être l’objet parent.

Cette classe doit hériter de la classe parente QmainWindow, donc voici comment la définir :

class MainWindow(QMainWindow):

Dans le corps de la classe nous allons définir son constructeur dans lequel nous allons ajouter les lignes de code permettant d’ajouter et de placer tous ces composants à la fenêtre.

Nous verrons aussi comment interagir avec le bouton et la saisie d’un nom dans la boîte de saisie.

Nous définissons le constructeur de la classe associée à notre fenêtre principale :

def __init__(self):

    super().__init__()

    # On ajoute un titre à la fenêtre principale
    self.setWindowTitle("My App")
    
    # Création des composants de l'UI
    self.label = QLabel("Entrez votre nom:")
    self.txtbox = QLineEdit()
    self.button = QPushButton("Show Hello!")

    self.button.clicked.connect(self.show_message)
    
    # Définition d'un layout vertical auquel on ajoute les composants créés
    layout = QVBoxLayout()
    layout.addWidget(self.label)
    layout.addWidget(self.txtbox)
    layout.addWidget(self.button)

    # Créaion du widget qui va contenir le layout 
    widget = QWidget()
    widget.setLayout(layout)
    self.setCentralWidget(widget)

Comme vous pouvez le constater on commence par appeler le constructeur de la classe parente dont hérite notre nouvelle classe avec super().__init__() .

Ensuite on définit un titre pour notre fenêtre qui apparaîtra dans la barre de titre de notre fenêtre principale en appelant la fonction setWindowTitle qui prend en argument une chaîne de caractères constituant le titre.

Dans l’étape suivante nous créons les objets que nous allons placer sur notre fenêtre. On commence par créer une instance de classe QLabel pour créer une étiquette informative avec comme argument le texte qui sera affiché sous forme de chaîne de caractères (self.label = QLabel("Entrez votre nom:")). Nous créons ensuite un champ de saisie en appelant le constructeur de la classe QLineEdit. On finit par créer un bouton en appelant celui de classe QpushButton(). Les variables associées sont préfixées du mot clé self ce qui veut dire que ces objets sont rattachés à l’objet parent qui est la fenêtre.

Ensuite nous abordons un nouveau concept de la programmation d’interface utilisateur avec PyQt5 : la notion de slot et de signal, qui permettent une interaction entre l’utilisateur et l’application. Nous verrons la définition de ce type de méthode plus loin dans cet article.

Dans notre exemple nous allons réagir à un clic de souris sur le bouton. Ceci est associé à la propriété clicked du bouton et on le connecte à une méthode slot que nous allons étudier dans la suite de ce document.

A partir de la ligne suivante nous abordons le concept de layout. C’est avec ce type d’objet que vous allez contrôler le placement de vos objets Widgets dans la fenêtre. Dans cet exemple nous utilisons un objet de type QVBoxLayout qui va nous permettre d’assembler les objets qu’il va contenir de façon verticale. Nous ajoutons les objets que l’on a créé plus tôt à ce layout en appelant la fonction addWidget de cet objet.

On crée ensuite le widget principal et on lui associe le layout qu’on vient de créer. Et on le centre sur la fenêtre avec la fonction setCentralWidget qui le prend en paramètre.

La fonction constructeur est terminé, passons à la définition de la fonction slot qui correspond au signal clicked de l’objet QPushButton qu’on a créé dans le contructeur.

def show_message(self):
        print("Hello ", self.txtbox.text())

Celle-ci ne fait qu’afficher le texte « Hello » concaténé avec le contenu de la zone de texte dans la console.

Il faut maintenant aborder le programme principal.

on crée un objet application en créant un objet de type QApplication.

app = QApplication(sys.argv)

On crée ensuite une instance d’objet de notre classe MainWindow en appelant son constructeur. Et on l’affiche à l’écran.

window = MainWindow()
window.show()

On termine en appelant la fonction exec() permet d’exécuter l’application jusqu’à ce que l’utilisateur ferme la fenêtre.

Ce premier programme est maintenant terminé. Voici le code complet de cet exemple :

import sys
from PyQt5.QtWidgets import (
    QApplication,
    QMainWindow,
    QPushButton,
    QLabel,
    QLineEdit,
    QVBoxLayout,
    QWidget
)

# Définition de la classe de la fenêtre principale
class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()

        # On ajoute un titre à la fenêtre principale
        self.setWindowTitle("My App")
        
        # Création des composants de l'UI
        self.label = QLabel("Entrez votre nom:")
        self.txtbox = QLineEdit()
        self.button = QPushButton("Show Hello!")

        self.button.clicked.connect(self.show_message)
        
        # Définition d'un layout vertical auquel on ajoute les composants créés
        layout = QVBoxLayout()
        layout.addWidget(self.label)
        layout.addWidget(self.txtbox)
        layout.addWidget(self.button)

        # Créaion du widget qui va contenir le layout 
        widget = QWidget()
        widget.setLayout(layout)
        self.setCentralWidget(widget)

    def show_message(self):
        print("Hello ", self.txtbox.text())


app = QApplication(sys.argv)

window = MainWindow()
window.show()

app.exec()

IV Conclusion

Dans ce document nous avons vu comment installer PyQt5 et ses différents modules sur un Raspberry Pi. Nous avons ensuite vu un petit exemple de code qui vous a permis d’aborder les notions essentielles de conception d’une interface utilisateur avec Python et PyQt5. Nous verrons dans un prochain article comment réaliser une interface avec l’outil graphique Qt Designer.