Premiers pas avec l'interface graphique Raspberry Pi : 8 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:08

Vous avez donc un Raspberry Pi et une idée géniale, mais comment rendre l'interaction aussi facile qu'un smartphone avec votre utilisateur ?

Construire une interface utilisateur graphique (GUI) est en fait assez simple, et avec un peu de patience, vous pouvez produire des projets étonnants.

Étape 1: La vue d'ensemble

L'un des outils les plus puissants fournis par Raspberry Pi par rapport aux autres micros est la rapidité et la facilité avec lesquelles vous pouvez créer une interface utilisateur graphique (GUI) pour votre projet.

Une façon d'y parvenir, spécialité si vous avez un écran tactile complet (ou un écran standard et un périphérique de saisie comme une souris), c'est devenu incroyable !

Pour les besoins de cet article, nous utiliserons Python 3 avec Tkinter:

Une bibliothèque puissante pour développer des applications d'interface utilisateur graphique (GUI), sur le Raspberry Pi en ce qui concerne les fabricants.

Tkinter est probablement le plus couramment utilisé avec Python, et de nombreuses ressources existent sur Internet.

Étape 2: "Hello World" dans Tkinter

Nous utilisons aRaspberry Pi chargé avec Raspbian Stretch OS.

Pour exécuter nos applications GUI Tkinter. nous pouvons également utiliser n'importe quel autre système d'exploitation sur lequel python est installé.

Raspbian est livré avec Python 2, Python 3 et la bibliothèque Tkinter installés.

Pour vérifier quelle version vous avez installée, à partir du terminal, exécutez:

python3 --version

Créez un nouveau fichier appelé app.py et entrez le code de base ci-dessous:

#!/usr/bin/python

from tkinter import * # importe la lib Tkinter root = Tk() # crée l'objet racine root.wm_title("Hello World") # définit le titre de la fenêtre root.mainloop() # démarre la boucle GUI

Si vous n'utilisez pas d'IDE, exécutez la commande suivante dans un terminal à partir du répertoire contenant votre code Python pour exécuter le programme.

python3 app.py

Étape 3: Personnalisation de la fenêtre

Voyons maintenant comment personnaliser cette fenêtre.

La couleur d'arrière-plan

root.configure(bg="black") # changer la couleur de fond en "noir"

ou

root.configure(bg="#F9273E") # utilise le code couleur hexadécimal

Dimensions de la fenêtre

root.geometry("800x480") # spécifie la dimension de la fenêtre

ou

root.attributes("-fullscreen", True) # défini en plein écran

Gardez à l'esprit que vous resterez bloqué en mode plein écran si vous ne créez pas de moyen de sortie

# nous pouvons sortir lorsque nous appuyons sur la touche d'échappement

def end_fullscreen(événement): root.attributes("-fullscreen", False) root.bind("", end_fullscreen)

Étape 4: Widgets dans Tkinter

Tkinter comprend de nombreux widgets différents pour vous aider à créer l'interface utilisateur la plus appropriée. Les widgets que vous pouvez utiliser incluent: • une zone de texte

• boutons

• bouton de contrôle

• glissière

• zone de liste

• bouton radio

•etc..

Nous pouvons maintenant ajouter des widgets tels que du texte, des boutons et des entrées.

Ajout de widgets

Étiquettes

label_1 = Label(root, text="Hello, World!")

Avant qu'il ne soit visible dans la fenêtre, nous devons définir sa position. Nous utiliserons le positionnement de grille.

label_1.grid(row=0, column=0) # définit la position

Saisie Saisie

label_1 = Label(root, text="Hello, World!", font="Verdana 26 bold, fg="#000", bg="#99B898")

label_2 = Label(root, text="Quel est votre nom ?", fg="#000", bg="#99B898") entry_1 = Entry(root) #input entry label_1.grid(row=0, colonne=0) label_2.grid(ligne=1, colonne=0) entrée_1.grid(ligne=1, colonne=1)

Boutons

#Ajouter un bouton à l'intérieur de la fenêtre

Button = Button(root, text="Submit") Button.grid(row=2, column=1)

Étape 5: Ajout de logique

Nous avons maintenant un formulaire simple, cependant cliquer sur le bouton ne fait rien !!

Nous allons explorer comment configurer un événement sur le widget de boutons et le lier à une fonction qui s'exécute lorsque vous cliquez dessus.

Pour cela, nous mettrons à jour label_1 pour afficher "Bonjour + le texte saisi dans l'entrée". Lorsque vous sélectionnez le bouton soumettre.

Téléchargez le code ci-dessous puis exécutez-le.

Étape 6: Contrôle LED

Jusqu'à présent, nous avons vu comment ajouter un bouton à la fenêtre et lui ajouter une logique afin d'effectuer une action.

Maintenant, nous allons changer un peu le code. Nous allons donc créer un formulaire et y ajouter deux boutons. Un pour allumer/éteindre la LED et l'autre pour quitter le programme.

Note: Assurez-vous d'avoir mis à jour votre Raspberry avant de commencer, et que vous avez l'installation de la bibliothèque GPIO, ouvrez la fenêtre de commande et entrez les éléments suivants l'installation de la bibliothèque GPIO. Ouvrez la fenêtre de commande et entrez ce qui suit:

$ sudo apt-get update

$ sudo apt-get install python-rpi.gpio python3-rpi.gpio

La construction:

Pièces requises:

1 x Raspberry Pi 3

1 LED

1 x 330Ω Résistance

Construire le circuit:

Suivez les photos ci-dessus.

Faites attention à l'orientation de la LED et à la broche où elle est connectée (GPIO23).

Étape 7: Ajout d'un contrôleur de servomoteur

Nous allons passer à autre chose qu'un bouton, nous pouvons également utiliser diverses entrées pour contrôler les sorties PWM (Pulse Width Modulation) du Raspberry Pi.

Un servomoteur est un excellent choix car il traduit un signal PWM en un angle.

La construction:

Pièces requises:

1 x Raspberry Pi 3

1 LED

1 x 330Ω Résistance

1 x servomoteur

Construire le circuit:

Suivez le schéma ci-dessus (LED connectée au GPIO 23, servomoteur connecté au GPIO 18).

Regardez la vidéo si vous êtes bloqué.

Étape 8: Conclusion

Voilà! Allez-y et conquérez des idées d'interface utilisateur incroyables !

Si vous avez des questions, vous pouvez bien sûr laisser un commentaire.

Pour en savoir plus sur mes travaux, veuillez visiter ma chaîne

monYouTube

mon Twitter

monLinkedin

Merci d'avoir lu cette instructable ^^ et bonne journée. À plus. Ahmed Nouira.