Introduction interfaces graphiques en Python avec Tkinter cours
Introduction interfaces graphiques en Python avec Tkinter cours PDF
...
Module Tkinter
Widgets : Window gadgets
Fonctionnalités des widgets, composants d’IHM affichage d’informations (label, message ) composants d’interaction (button, scale ) zone d’affichage, saisie de dessin, texte (canvas, entry ) conteneur de composants (frame) fenêtres secondaires de l’application (toplevel)
TkInter : fenêtres, conteneurs
Toplevel : fenêtre secondaire de l’application
Canvas : afficher, placer des “éléments” graphiques
Frame : surface rectangulaire pour contenir des widgets Scrollbar: barre de défilement à associer a` un widget
TkInter : gestion de textes
Label: afficher un texte, une image
Message: variante de label pour des textes plus importants
Text: afficher du texte, des images
Entry: champ de saisie de texte
Tkinter: gestion de listes
Listbox: liste d’items sélectionnables
Menu: barres de menus, menus déroulants, surgissants
Tkinter: composants d’interactions
Menubutton: item de sélection d’action dans un menu
Button: associer une interaction utilisateur
Checkbutton: visualiser l’état de sélection
Radiobutton: visualiser une sélection exclusive
Scale: visualiser les valeurs de variables
Etapes de programmation
Etapes de programmation
TkInter : Structuration d’un programme
# ------- Initialisation --------------------------from Tkinter import Tk,Label,Button
# ------- Composants graphiques -------------------mw=Tk() labelHello=Label(mw, text="Hello World !",fg="blue") buttonQuit=Button(mw, text="Goodbye World", fg="red",\ command=mw.destroy)
# ------- Positionnement des composants () ()
# ------- Definition des interactions -------------# ------- Gestion des e´vénements -----------------mw.mainloop() exit(0)
Gestion d’événements
Interaction par défaut : option command en cas de “click gauche” exécuter la fonction associée
Paramétrer l’interaction utilisateur : méthode bind() lier (bind) l’événement au comportement d’un composant gestion des interactions
# ------- Definition des interactions -------------def sortie(event) :
mw.destroy()
# ------- Gestion des evenements ("", sortie) mw.mainloop() exit(0)
Gestion d’événements
Interaction Utilisateur
Informations utiles a` l’interaction donnnées liées aux périphériques de l’utilisateur argument event
données liés au composant graphique d’interaction configure() : fixer des valeurs aux options de widget cget() : récupérer une valeur d’option
Affichage des coordonnées du pointeur de souris def mouseLocation(event):
labelPosition.configure(text = "Position X =" \
+ str(event.x) \
+ ", Y =" \
+ str(event.y))
# print ("width")
Interaction utilisateur
Interaction utilisateur
Interaction entre composants
(cf Didier Vaudène : “un abc des IHM”)
(cf Stéphanie Jean-Daubias : “Programmation événementielle”)
Fenêtre principale
Fenêtre principale
MainWindow: Fenêtre de base class MainWindow(Tk):
def __init__(self, width=100,height=100,bg="white"): Tk.__init__(self) self.title(’Editeur Graphique’) self.canvas =Canvas(self,width=width-20, height=height-20, bg=bg)
self.libelle =Label(text ="Serious Game", font="Helvetica 14 bold")
() ()
Fenêtre principale
Barre de menu
MenuBar : Menu déroulant class MenuBar(Frame):
def __init__(self,boss=None):
Frame.__init__(self,borderwidth=2) mbuttonFile = Menubutton(self,text=’Fichier’) (side=LEFT) menuFile=Menu(mbuttonFile) menuFile.add_command(label=’Effacer’, command=boss.effacer)
menuFile.add_command(label=’Terminer’, )
mbuttonFile.configure(menu=menuFile)
Barre de menu
ScrolledCanvas : scrollbars
scv=Scrollbar(self,orient=VERTICAL, command =self.canvas.yview)
sch=Scrollbar(self,orient=HORIZONTAL, command=self.canvas.xview)
self.canvas.configure(, )
(row=0,column=1,sticky=NS) (row=1,colum=0,sticky=EW) ("", self.retailler) self.started =False
Application : initialisation
MainWindow : init (self)
=self.canvas.create_window(self.x,self.y, window=self.buttonStart)
self.xscale,self.yscale=200,200 =self.canvas.create_window(self.xscale, self.yscale, window=self.scaleCercle)
self.xcercle,self.ycercle=100,100 self.cercle=self.canvas.create_oval(self.x, self.y, self.x+self.xcercle, self.y+self.xcercle, fill=’yellow’, outline=’black’)
Application : interaction
MainWindow: modification d’affichage def effacer(self): self.canvas.delete(self.cercle)
def afficher(self):
self.cercle=self.canvas.create_oval(self.x,self.y, self.x+self.xcercle, self.y+self.ycercle, fill=’yellow’)
def updateCercle(self,x):
self.canvas.delete(self.cercle) self.xcercle, self.ycercle=int(x),int(x) self.cercle=self.canvas.create_oval(self.x,self.y, self.x+self.xcercle, self.y+self.ycercle, fill=’yellow’)
Projet de Labo Oscilloscope
Projet de Labo
Oscilloscope
Autres exemples :
Mouvement vibratoire harmonique Mouvement vibratoire harmonique
OscilloGraphe : initialisation class OscilloGraphe(Canvas):
def __init__(self,boss=None,larg=200,haut=150): Canvas.__init__(self) boss.title("OscilloGraphe : version 1") self.configure(width=larg,height=haut) ,=larg,haut self.courbe=[]
OscilloGraphe : calcul du mouvement def calculVibration(self,
frequence=1,phase=0,amplitude=10):
"calcul de l’elongation sur 1 seconde" del self.courbe[0:] pas=(self.largeur-10)/1000.
for t in range(0,1001,5):
e=amplitude*sin(2*pi*frequence*t/1000-phase) x=10+t*pas y=self.hauteur/2-e*self.hauteur/25 self.courbe.append((x,y))
return
Classe OscilloGraphe : version 1
Programmation procédurale Python : Programmation procédurale
Programmation procédurale
Python : Programmation procédurale
Traitements de données, sortie de programme
# Traitements x = input(’Entrez la valeur de x : ’) y = input(’Entrez la valeur de y : ’) z = input(’Entrez la valeur de z : ’) print "Les coordonnees spheriques du point :", x,y,z print "sont : ", spherical(x,y,z)
# sortie de programme (0)
Composition class Rectangle:
"""Un rectangle A UN coin superieur gauche""" def __init__(self, coin, largeur, hauteur):
= coin self.largeur = largeur self.hauteur = hauteur
def __repr__(self):
return "<Rectangle(’%s’,’%s’,’%s’)>" \
% (,self.largeur, self.hauteur)
… . … …
TP:
Le widget « Entry » permet de récupérer le mot de passe saisi par l’utilisateur. L’appui sur le bouton « Valider » permet d’exécuter la fonction Verification() qui doit tester si le mot de passe est correct. Si le mot de passe est correct une boîte de dialogue « showinfo » apparaît, informant que le mot de passe est correct et la fenêtre Tkinter est fermée. Si le mot de passe est incorrect une boîte de dialogue « showwarning » apparaît, informant que le mot de passe est incorrect.
- Compléter, dans le script mot_passe.py, la ligne 5 permettant de tester si le mot de passe est égal à « gustave_eiffel ».
if Motdepasse.get()3. Compléter la ligne 8 permettant de fermer la fenêtre Tkinter « Mafenetre ».
- Compléter les lignes 15 et 16 permettant de créer la fenêtre Tkinter « Mafenetre » et de lui donner le titre « Identification Requise ».
- Compléter les lignes 19 et 20 afin de créer le label « Mot de passe » en respectant la forme donnée sur l’image ci-dessus.
Label1 = Label1.pack(……………………………………………………………………………………)
- Compléter les lignes 29 et 30 afin de créer le bouton « Valider » en respectant la forme donnée sur l’image ci-dessus.
Bouton = (……………………………………………………………………………………)
Bouton.pack(……………………………………………………………………………………)
- Exécuter le script et vérifier le fonctionnement du programme.
- Commenter la ligne 24 du script. Modifier-la afin d’obtenir d’autres couleurs d’affichage et que le mot de passe soit masqué par le caractère « _ ».
Widget Canvas (caneva) et gestion des images.
Un caneva est zone rectangulaire qui est intégrée à la fenêtre graphique et destinée à contenir des dessins, des figures complexes ou images. Il est possible d’y placer des graphiques, du texte, d’autres
widgets ou des cadres (frames).
L’objet « Canvas » peut accepter 4 paramètres :
fen : fenêtre tkinter dans laquelle sera integré le canveva.
with : largeur du caneva.
height : hauteur du caneva.
background : couleur de fond du canvas (par défaut, la couleur de fond est grise).
Syntaxe
can=Canvas(fen,width=1000,height=1000,background='red')
Création d’un canevas intégré à la fenêtre Tkinter « fen » de dimensions 1000x1000 et de fond d’écran rouge.
Chaque élément affiché sera représenté par un item placé dans une liste d’affichage.
La méthode create_image(x,y,anchor=…,image=…) permet d’afficher une image dans un canevas :
- x,y : coordonnées du point par rapport auquel sera positionnée l’image.
- anchor : position de l’image par rapport aux coordonnées (x,y). L’image sera positionnée de sorte que le point (x, y) soit situé au milieu de son bord inférieur (sud) si anchor = S. Par défaut anchor = CENTER et dans ce cas l’image sera positionnée de sorte que le point (x, y) soit situé au centre de l’image.
Syntaxe
Item1=can.create_image(0,100,anchor=N,image=photo) Affichage de l’image « photo » dans le canevas « can », l’image sera positionnée de sorte que le point (0,100) soit situé au milieu de son bord supérieur.
Exercice 5 : Afficher des images
- Ouvrir le script aff_images.py.
Ce script permet d’afficher deux images dans un canevas. Un bouton quitter permet de fermer la fenêtre Tkinter.