TP5: les interfaces graphiques
Dans ce TP, nous allons créer des interfaces graphiques pour cela on a besoin de La librairie tkinter qui
contient tous les outils dont nous aurons besoin pour créer une fenêtre.
Tkinter est une boite à outils pour faire des interfaces graphiques (GUI : graphical user interface) en Python.
Elle repose sur un autre langage de script. Tkinter est l'abréviation de « Tk interface ».
1. Création d’une fenêtre
Avec le module TKinter (Tk), on a ainsi créé une instance (un objet Tk) appelé « fenetre ».
fenetre.mainloop() : il s'agit d'une boucle infinie qui va tourner jusqu'à la fermeture de la fenêtre, pour
capter et transmettre toutes les actions de l'utilisateur.
Paramètre d’une fenêtre
On peut préciser le titre de la fenêtre :
fenetre.title(‘’ma premier fenêtre’’)
on peut préciser la taille de la fenêtre
:
fenetre.configure(width=200,height=100)
on peut préciser la couleur de la fenêtre :
fenetre.configure(bg= ‘’red’’) ou fenetre.configure(bg= ‘’ #D47304’’)
Nb : on peut faire tout en meme temps
fenetre.configure(width=500,height=300,bg=’red’)
Exercice1:
Créer une instance (un objet Tk) appelé « fenetre » de 500 pixels de large et 300 pixels de haut avec pour titre
« Nom Prénom » et comme couleur de fond du bleu ciel.
2. Meubler une fenêtre
La fenêtre est une « coquille vide », qui ne permet pas de faire quoi que ce soit. Pour la rendre plus
intéressante, nous allons y placer des widgets, qui vont permettre à l'utilisateur de réaliser différentes choses.
a. Widget bouton
Testez le script suivant
from tkinter import *
fen = Tk()
bouton = Button(fen, text = 'cliquer')
bouton.pack()
fen.mainloop()
1
bouton = Button(fen, text = 'cliquer')
Elle signifie : créer un widget « bouton poussoir », dans la fenêtre « fen », portant le texte « cliquer »
Modifier la taille du bouton
Soit dès le départ Soit par la suite:
bouton=button(fn, text=’cliquer’, width=10, bouton.configure(width=10, height=1)
height=1)
Choisir la couleur du texte du bouton ou de son fond
De la même façon on peut le préciser dès le départ ou par la suite avec la méthode configure()
bouton=Bouton(fg=’’#66099 ‘’,bg=’’#1FFED8‘’)
Changer le texte du bouton
bouton.configure(texte=’’OK’’)
Déplacer un bouton
bouton.place(x=10,y=20)
Exercice 1:
Créer la fenêtre suivante :
b. Widget label
Tester le script suivant :
from tkinter import *
fenetre = Tk()
label1 = Label(fenetre, text = 'Bonjour tout le monde !')
label1.pack()
fen.mainloop()
Avec le widget Label, on crée un texte en lui donnant un nom ici label1 puis en indiquant dans quelle fenêtre
ici fenetre il sera affiché. Ensuite on l’épingle sur la fenêtre.
Choisir la couleur du texte ou de son fond
Soit dès le départ Soit par la suite:
Label1=label(fenetre, text=’Bonjour tout le Label1.configure(fg=’’red’’)
monde’, fg=’’red’’)
Remarques :
fg : c’est pour le texte lui-même
bg :c’est pour le fond du texte
Choisir la fonte (famille, taille et décoration)
Label1.config(font(‘times’,20,’bold’))
2
La famille c’est-à-dire la police utilisée (arial, verdana, times …)
La taille c’est-à-dire un entier qui précise la hauteur de la fonte, en 11 pour ce texte.
La décoration c’est-à-dire normal, bold, italic, underline, overstrike
Déplacer le texte
Label1.place(x=20,y=30)
Changer le texte
Lable1.config(texte=’hello’)
Désépingler le texte
Label1.place_forget()
Exercice2 :
Ecrire en haut à gauche de la fenêtre « HAUT » en violet sur fond turquoise en arial taille 30 en italic. Ecrire
au milieu de la fenêtre « MILIEU» en vert sur fond orange en verdana taille 20 souligné. Ecrire bas à droite
de la fenêtre « BAS» en marron sur fond beige en times taille 10 surligné.
c. Widget canevas
Un canevas est une surface rectangulaire dont on spécifie la taille en pixels, et sur laquelle on peut dessiner
ou placer des images. Tester le programme suivant :
from tkinter import *
fen=Tk()
can=Canvas(fen, bg='bisque', heigh=400, width=600)
can.pack()
fen.mainloop()
A noter :
Le canevas est un widget. Les éléments que nous allons placer de dans (cercles, droites, textes...), s'appellent
des items.
Dessinons maintenant :
Nous pouvons dessiner maintenant dans le canevas orangé (couleur bisque) créé ci-dessus.
Pour dessiner différentes formes (cercle, carrée, rectangle, segment), il faut indiquer les coordonnées des
deux points extrêmes de la « boite » contenant notre forme.
Le repère sur un canevas est placé de la façon suivante :
3
Nous allons pouvoir dessiner :
Un item cercle, en plein centre, rempli de bleu, avec un bord rouge :
can.create_oval(200,100,400,300, outline='red', fill='blue')
Un item carré, vide, en plein centre, avec un bord noir :
can.create_rectangle(200,100,400,300, outline='black', width=2)
un item droite, selon la diagonale de la boite
can.create_line(0,0,600,400, fill='pink', width=4)
Exercice3:
Dessiner un smiley (un peu plus simple que celui-ci) :
4
3. Gestion des événements : event et binding.
Afin de permettre au réceptionnaire d'événements de traiter les événements qui vont se dérouler au clavier
ou à la souris, nous allons lier certains événements à des objets de la fenêtre, en indiquant alors le
traitement à effectuer. Par exemple, si nous disposons d'un canevas nommé can, et d'une fonction explose :
can.bind("<Button-1>", explose)
Explose signifie que lorsqu'un clic gauche est détecté sur le canevas, il faut déclencher la fonction explose :
l'événement "clic gauche" à l'objet "can". En effet, lors de la survenue d'un événement, tkinter crée
automatiquement un objet "event", destiné à être transmis à la fonction gestionnaire, et qui contient de
nombreuses informations sur l'événement (touche du clavier ou clic, position du clic, instant où il est
survenu...).
Événement Description
'<Motion>’ '' Mouvement de la souris à l'intérieur du widget.
"<Button-1>" Clic (enfoncement) du bouton gauche (1) ou droit (3)
‘<ButtonRelease-3>’ Relâchement du bouton gauche (1) ou droit (3).
‘<Enter’> La souris passe au-dessus du widget.
‘<Leave> ‘ La souris «sort» du widget.
‘<k>’ Appui sur la touche h (par exemple).
‘<keyRelease>’ Relâchement de la touche h (par exemple).
Tapons le programme suivant :
from tkinter import *
def position(event):
chaine.configure(text = "Clic détecté en X =" + str(event.x) + ", Y =" + str(event.y))
fen = Tk()
can = Canvas(fen, width =600, height =500, bg="light yellow")
can.pack()
chaine = Label(fen)
chaine.pack()
can.bind("<Button-1>", position)
fen.mainloop()
Événements déclenchés par la souris Événement Description '' Mouvement de la souris à l'intérieur du
widget. '' Clic (enfoncement) du bouton gauche (1) ou droit (3). '' Relâchement du bouton gauche (1) ou
droit (3). '' La souris passe au-dessus du widget. '' La souris «sort» du widget.
4. Déplacer un item du canevas : les méthodes coords et move.
Nous aimerions maintenant pouvoir déplacer un objet dans le canevas : un Mario Bros quand le joueur appuie
sur flèche droite, par exemple.
a. La méthode coords.
La méthode "coords" du canevas permet de déplacer :
un item du canevas à préciser,
vers une nouvelle position à préciser elle-aussi :
can.coords(objet_à_déplacer, new_x1, new_y1, new_x2, new_y2)
Nous allons ici lier l'événement "appui sur la flèche droite" à la fenêtre, le gestionnaire de l'événement étant
alors la fonction avance. Testons le programme suivant :
from tkinter import *
5
def avance(event) :
global x
x = x + 50
can.coords(bal, x, 200, x + 50, 250)
fen = Tk()
can = Canvas(fen, width = 600, height = 450, bg = 'ivory')
can.pack()
x=0
bal = can.create_oval(x, 200, x + 50, 250, fill='blue')
fen.bind("<Right>", avance)
fen.mainloop()
b. La méthode move.
dans certains cas, nous pourrons préférer indiquer le déplacement à effectuer (+ 50 pixels en x, par exemple),
plutôt que la nouvelle position où aller : on pourra alors utiliser la méthode move :
can.move(NomItem, dx, dy)
Exercice: Après avoir étudié en détail le programme du cours partie "4) Déplacer un objet dans le canevas",
coder un programme du même type de façon à obtenir :
un canevas de dimension 50x600,
avec au départ : un carré bleu, de dimension 50x50, situé tout en haut du canevas,
le carré devra descendre de 50 pixels, à chaque pression du joueur sur la touche flèche vers le bas.
5. Animation automatique : les fonctions récursives.
Commençons par copier et exécuter le programme suivant :
from tkinter import *
def moove() :
global x
x = x + 50
can.coords(bal, x, 200, x + 50, 250)
fen.after(500, moove) # appeler à nouveau la fonction moove 500 ms plus tard
fen = Tk()
can = Canvas(fen, width = 600, height = 450, bg = 'ivory')
can.pack()
x=0
bal = can.create_oval(x, 200, x + 50, 250, fill='blue')
# On lance la fonction d'animation :
moove()
fen.mainloop()
La méthode "after" peut s'appliquer à un widget quelconque.
fen.after(500, moove)
Dans le programme ci-dessus, alors que nous sommes déjà dans la fonction "moove", la fonction qui est
appelée par la méthode "after" est la fonction "moove" elle-même : la fonction moove se réappelle elle-
même. La fonction sera donc relancée 500 ms plus tard. Nous lançons ainsi une boucle infinie : toutes les
500 ms, la fonction moove sera relancée.
On appelle cela une fonction récursive : une fonction s'appelle elle-même.
