Interface homme-machine

Introduction

Objectif

Découverte de la bibliothèque Tkinter (de l'anglais Tool kit interface) dans le but de réaliser une IHM (Interface Homme-Machine) en Python.

Préparation

Afin de garder organisées les productions réalisées en travaux pratiques, veuillez mettre à jour l'arborescence du dossier NSI en fonction l'ordinateur utilisé :

💻 Ordinateur portable

1. Lancer
2. Se rendre dans le dossier Documents
3. Créer le dossier NSI s'il n'existe pas
4. Dans le dossier NSI, créer le dossier chapitre_12
5. Dans le dossier chapitre_12, créer le dossier tp2_ihm

🖥 Ordinateur fixe des salles informatiques

1. Depuis le bureau, cliquer sur l'icône intitulée Zone personnelle
2. Créer le dossier NSI s'il n'existe pas
3. Dans le dossier NSI, créer le dossier chapitre_12
4. Dans le dossier chapitre_12, créer le dossier tp2_ihm

Téléchargement des fichiers

Pour effectuer ce TP, il est nécessaire de télécharger certains fichiers :

1. Télécharger le fichier ZIP contenant les fichiers du TP : 📦 télécharger
2. Ouvrir le fichier ZIP
3. Copier/coller tous les fichiers dans le dossier NSI\chapitre_12\tp2_ihm

1. Première fenêtre

Introduction

Le module Python tkinter permet de créer des interfaces graphiques (Graphical User Interface ou GUI en anglais). C'est une adaptation de la bibliothèque Tcl/Tk utilisée pour concevoir des applications fenêtrées.

La programmation orientée objet

Le module tkinter s'utilise selon le paradigme de programmation objet qui fait partie de l'enseignement de la spécialité NSI en terminale. Voici quelques notions qui vous seront utiles pour mieux appréhender la syntaxe python des exercices qui suivront.

Un objet est une instance (une copie indépendante) d'un type construit décrit au moyen d'une classe :

# Création de l'objet "moi" qui est une instance de la classe "Humain"
moi = Humain()

Un objet peut contenir des variables appelées propriétés (mais aussi appelées champs ou attributs) :

moi.nom            # Lecture d'une propriété "nom" de l'objet "moi"
moi.nom = "Gaston" # Affectation d'une valeur à la propriété "nom" de l'objet "moi"

Un objet peut disposer de méthodes. Une méthode est une fonction rattachée et qu'il est possible d'appeler ainsi :

moi.manger() # Appel de la méthode "manger" de l'objet "moi"

Ressources

Voici des ressources en ligne dédiées au module tkinter ou TCL/TK. La documentation en français est complète et instructive.

• Documentation non officielle (en français)
• Documentation (en anglais)
• Site officiel de TCL/TK (en anglais)

Réalisation

1. Ouvrir le fichier exercice1.py
2. Exécutez le programme et observez le résultat
3. Testez le programme en supprimant ou commentant l'instruction fenetre.mainloop()
4. Testez le programme en supprimant ou commentant l'instruction fenetre.geometry("400x300")
5. Testez la modification du titre de la fenêtre
6. Testez la modification des dimensions de la fenêtre
7. Testez les dimensions "400x300+300+500" et essayez de comprendre l'effet de l'ajout de +300+500
8. Veillez à bien enregistrer toute modification

Synthèse

L'instruction fenetre = Tk() affecte une instance de la classe TK à la variable fenetre. Cet objet correspond à la fenêtre principale de votre application. L'appel de la méthode geometry() sur cet objet permet de fixer les dimensions de la fenêtre.

L'instruction fenetre.mainloop() entraine l'affichage de la fenêtre et le démarrage de son gestionnaire d'événements. Cette instruction est nécessaire pour que l'application soit à l'écoute des événements déclenchés depuis la fenêtre comme un clic de souris, ou l'appui sur une touche du clavier.

2. Premiers composants

Introduction

Une fenêtre est un composant graphique (widgets en anglais) capable de contenir d'autres composants graphiques et de gérer leur positionnement. Voici une liste non exhaustive de composants graphiques qu'il est possible d'ajouter à une fenêtre :

• Étiquette (classe Label)
• Bouton (classe Button)
• Champ de saisie simple (classe Entry)
• Case à cocher (classe Checkbutton)
• Bouton radio (classe Radiobutton)
• Zone graphique( classe Canvas)

Réalisation

1. Ouvrir le fichier exercice2.py
2. Exécutez le programme et observez le résultat
3. Expérimentez de façon à comprendre le fonctionnement de chaque ligne et de chaque paramètre
4. Ajoutez les 4 commentaires explicatifs manquants
5. Veillez à bien enregistrer toute modification

Synthèse

Le composant graphique Label l'affichage d'un texte. Sa classe dispose de nombreux paramètres d'instanciation dont :

Paramètre	Description
text	Fixe le texte affiché
fg	Fixe la couleur du texte (foreground)
bg	Fixe la couleur de fond (background)
width	Fixe la largeur
height	Fixe la hauteur

Le composant graphique Button permet d'afficher un bouton cliquable. Sa classe dispose de nombreux paramètres d'instanciation dont :

Paramètre	Description
text	Fixe le texte du bouton
command	Fixe la fonction ou la méthode à appeler au clic

3. Les événements

Introduction

Une application dotée d'une IHM doit être en mesure de réagir aux actions de l'utilisateur et mettre à jour l'état de ses composants graphiques en conséquence.

Modifier un composant graphique

Vous pouvez modifier les propriétés de tout composant graphique après sa création grâce à la méthode config(). Voici l'exemple d'un appel à la méthode config() permettant de modifier le contenu textuel d'une étiquette :

# Création d'une étiquette
message = Label(fenetre, text="Texte initial")
message.pack()

# Modification du texte du composant
message.config(text="Texte modifié")

Réagir à un événement

La propriété command du composant Button permet de définir la fonction à appeler à chaque clic :

# Fonction effectuant un traitement
def quitter_application():
    """Ferme la fenetre principale"""
    fenetre.destroy()

# Bouton dont l'action au clic est définie via la propriété "command"
bouton = Button(fenetre, text="Quitter", command=quitter_application)

Réalisation

1. Ouvrir le fichier exercice3.py
2. Complétez la fonction changer_texte afin de modifier le texte de label en Au revoir !
3. Modifiez la propriété command du bouton afin que le texte soit modifié au lieu de quitter l'application
4. Veillez à bien enregistrer toute modification

4. Application

Introduction

Vous allez devoir compléter le code Python d'une application simple de lancer de dé. Il y a peu de différences par rapport à l'exercice précédent, si ce n'est un bouton supplémentaire et un traitement un peu plus élaboré.

Réalisation

1. Ouvrir le fichier exercice4.py
2. Complétez tout code manquant signalé par un ...
3. Veillez à bien enregistrer toute modification

5. Saisie de données

Introduction

Le composant de saisie de texte

Le composant graphique Entry est utilisé pour créer des champs de saisie :

from tkinter import *

fenetre = Tk()
fenetre.title("Saisie")

# Étiquette permettant d'afficher les instructions
texte = Label(fenetre, text='Saisir une chaîne de caractères')
texte.pack()

# Champ de saisie
entree = Entry(fenetre, width=30)
entree.pack(padx=10, pady=10)

# Gestionnaire d'événements
fenetre.mainloop()

Pour récupérer la valeur saisie, nous utilisons ce qu'on appelle une variable de contrôle. Une variable de contrôle est un objet chargé de stocker une valeur. Il est possible de lier une variable de contrôle à un composant graphique afin de récupérer une valeur, mais aussi de lui en fixer une.

Les variables de contrôle

Pour disposer d'une variable de contrôle, il vous suffit d'utiliser la classe adaptée au type de valeur que vous souhaitez mémoriser :

• v = DoubleVar() contient un nombre à virgule flottant dont la valeur par défaut est 0.0
• v = IntVar() contient un nombre entier dont la valeur par défaut est 0
• v = StringVar() contient une chaine de caractères dont la valeur par défaut est ""

Toutes les variables de contrôle disposent des méthodes suivantes :

• v.get() renvoie la valeur courante de la variable de contrôle
• v.set(valeur) modifie la valeur de la variable de contrôle

Réalisation

Compréhension du fonctionnement des variables de contrôle

1. Ouvrir le fichier exercice5.py
2. Exécuter le programme et comprendre son fonctionnement
3. Compléter la description de la fonction afficher en détaillant son fonctionnement
4. Complétez tous commentaires manquant signalé par un ...
5. Veillez à bien enregistrer toute modification

Application

Vous allez maintenant créer le jeu du nombre secret, dont voici les règles :

Règles du jeu

• L'ordinateur choisit un aléatoirement un nombre entier compris entre 0 et 100
• L'utilisateur doit réussir à le retrouver en transmettant ses tentatives

1. Créez le fichier secret.py qui contiendra le code de votre jeu
2. Commencez par créer et placer tous les composants graphiques
3. Créez une variable de contrôle permettant de récupérer la saisie de l'utilisateur
4. Créez une variable de contrôle permettant de modifier le texte indiquent le résultat
5. Créez la fonction verifier() qui sera appelée au clic sur le bouton "Vérifier". Cette fonction :
   • Récupère la saisie de l'utilisateur
   • La compare avec le nombre secret
   • Ajuste le texte du résultat en conséquence

Vous avez terminé ?

• Compressez le dossier tp2_ihm au format zip et déposez-le dans Pronote
• Améliorez le jeu en offrant la possibilité de relancer une partie et en comptant le nombre de tentatives. Consultez la documentation Géométrie des widgets afin de découvrir de nouvelles techniques de positionnement des composants.
• Une fois vos modifications terminées, vous pouvez rendre une seconde fois votre travail