Initiation à Tkinter (Tool Kit Interface)

Projet Python Initiation à Tkinter (Tool Kit Interface) Objectif de ce tutoriel : initiation à Tkinter (gestionnaire d interface graphique) en vue des projets de fin d année. Gestion du projet Méthodologie Ce travail de prise main de tkinter doit être réparti en plusieurs séances, en autonomie (chez vous), et doit être mené à bien d ici le mois de mars. Taper et ne pas hésiter à modifier les scripts ci-dessous. Commentez vos scripts sous peine de perdre un temps considérable : ce travail va s étaler dans le temps! Parallèlement à cette prise en main, commencer à définir un jeu ou une application que vous souhaiteriez programmer. En cas de problème ou pour rechercher des fonctionnalités supplémentaires, vous trouverez sur le web de très nombreuses ressources (cf. liste non exhaustive ci-dessous). Ressources (liste non exhaustive!) http://apprendre-python.com/page-tkinter-interface-graphique-python-tutoriel (synthétique, parfois des problèmes avec Pyzo) http://fsincere.free.fr/isn/python/cours_python.php (Beaucoup de ressources sur le son, les images ) http://effbot.org/tkinterbook/ (Exhaustif! Toute la documentation) Ne pas hésiter à lancer des requêtes sur un moteur de recherche. Par exemple : tkinter move image Le site Stack Overflow (forums) proposé dans les réponses à cette requête est généralement très pertinent. Consignes Travail par équipe de 2 ou 3 élèves. Présentation du jeu à la classe en fin d année et mise à disposition en ligne (espace spécifique sur mon site). Nous n utiliserons pas le module pygame. Le jeu ou l application devra obligatoirement sauvegarder des informations dans des fichiers et des bases de données (à venir). Widgets Widget : contraction de l'anglais windows gadget (gadget fenêtre). Les widgets sont tous les objets graphiques que l'on peut insérer dans une interface (fenêtre). Les principaux widgets sont : Les boutons : Button (pour commander une action). Les labels : Label (pour insérer un texte). Les zones de saisie : Entry (pour permettre l'entrée d'une donnée). Les canevas : Canvas (pour insérer des dessins ou des images). Chaque widget a des propriétés et des méthodes qui permettent de régler son apparence et les interactions avec l'utilisateur. https://fr.wikibooks.org/wiki/programmation_python/tkinter PCSI IPT G. Monod Initiation_Tkinter.docx 1/9

Modules from tkinter import * from tkinter.messagebox import * from numpy import random as rd # Boîtes de dialogue prédéfinies Création (instanciation) d une fenêtre : Tk() Boucle principale : méthode mainloop() # Création de la fenêtre, le nom choisi est quelconque : f1 = Tk() convient """ Instructions pour définir et placer les éléments de la fenêtre, interagir """ # Boucle scrutant les événements (clavier, souris et autres actions) Il est alors possible de placer des widgets dans la fenêtre et d interagir avec elle. La méthode mainloop() scrute les évènements déclenchés au clavier ou par les clics souris (cf. méthode bind() ci-dessous). Astuces pratiques Lors de la mise au point d un script, s il se produit une erreur qui interrompt l exécution après l instruction, taper fenetre.destroy() dans la console interactive afin de supprimer la fenêtre créée (sinon Python se bloque). Contrairement à ce que vous trouverez parfois sur le web, c est bien fenetre.destroy() et non fenetre.quit() qu il faut utiliser avec Pyzo (sinon Python se bloque). Widgets Label, Entry, Button - Méthodes destroy() et pack() - Focus # Personnalisation de la fenêtre fenetre.title('3 Widgets') fenetre.geometry('300x100') fenetre['bg'] = 'lightgrey' # Titre de la fenêtre # Dimensions de la fenêtre largeur x hauteur # Couleur du fond # bg = background (arrière-plan) fg = foreground (1er plan) # Widget Label = zone de texte à lire (étiquette, légende, information ) label1 = Label(fenetre, text='nom : ',fg='blue', bg='yellow') # Positionnement automatique du widget avec la méthode pack() label1.pack(padx=5, pady=5) # padx et pady = distance par rapport au bord de la fenêtre # Widget Entry = zone de texte à entrer (zone de saisie) entree1 = Entry(fenetre, width=100, fg='red') entree1.pack(padx=5, pady=5) # Place le focus sur la zone d'entrée de texte (curseur de la souris dans la zone de saisie) entree1.focus_force() # Widget Button utilisant la méthode destroy SANS PARENTHESES boutq.pack(padx=5, pady=5) PCSI IPT G. Monod Initiation_Tkinter.docx 2/9

Widget Canvas - Bouton associé à une fonction : command = fonction # Fonction appelée par le bouton boutm def dessinedisque(): """ Déplace le disque aléatoirement """ global largeur, hauteur, dessin, disque xd = rd.randint(30,largeur-30) yd = rd.randint(30,largeur-30) # Modification de la position du disque dessin.coords(disque,xd,yd,xd+30,yd+30) fenetre.title('widget Canvas') # widget Canvas = zone de dessin (ou fichier image png) hauteur, largeur = 250, 300 dessin = Canvas(fenetre,bg='dark grey',height=hauteur, width=largeur) # Positionnment du widget sur le côté gauche dessin.pack(side=left, padx=5, pady=5) # Dessin d'un disque dans la zone de dessin xd, yd = rd.randint(largeur), rd.randint(hauteur) disque = dessin.create_oval(xd, yd, xd+30, yd+30, width=1, fill='red') # Les coordonnées sont celles du rectangle circonscrit à l'oval # width = épaisseur du contour ; fill = couleur de remplissage # widget Label = zone de texte à lire label1 = Label(fenetre, text='déplace le disque') # Positionnment automatique label1.pack(padx=5, pady=5) # widget Button utilisant appelant la fonction dessinedisque SANS PARENTHESES boutm = Button(fenetre, text='move!', command=dessinedisque) # Positionnment automatique boutm.pack(padx=5, pady=5) # Positionnment du widget en bas boutq.pack(side=bottom,padx=5, pady=5) PCSI IPT G. Monod Initiation_Tkinter.docx 3/9

Animation D'après le site de Gérard Swinnen auteur de «Apprendre à programmer avec Python 3» : http://inforef.be/swi/python.htm def deplacedisque(): """ Déplace le disque """ global x, y, dx, dy, anim x, y = x +dx, y + dy if x > 210: x, dx, dy = 210, 0, 15 if y > 210: y, dx, dy = 210, -15, 0 if x < 10: x, dx, dy = 10, 0, -15 if y < 10: y, dx, dy = 10, 15, 0 dessin.coords(oval,x,y,x+30,y+30) if anim: fenetre.after(50,deplacedisque) # boucler après 50 millisecondes def stop_anim(): """ Arrêt de l'animation """ global anim anim = False def start_anim(): """ Démarrage de l'animation """ global anim if not anim: # pour éviter que le bouton ne puisse lancer plusieurs boucles anim =True deplacedisque() x, y = 10, 10 # coordonnées initiales dx, dy = 15, 0 # Pas du déplacement anim = False # commutateur fenetre.title("animation avec Tkinter") dessin = Canvas(fenetre,bg='dark grey',height=250, width=250) dessin.pack(side=left, padx =5, pady =5) oval = dessin.create_oval(x, y, x+30, y+30, width=2, fill='red') boutq = Button(fenetre,text='Quitter', width =8, command=fenetre.destroy) boutq.pack(side=bottom,padx =5, pady =5) boutd = Button(fenetre, text='démarrer', width =8, command=start_anim) boutd.pack(padx =5, pady =5) bouta = Button(fenetre, text='arrêter', width =8, command=stop_anim) bouta.pack(padx =5, pady =5) PCSI IPT G. Monod Initiation_Tkinter.docx 4/9

Détection des événements : clics souris - event.x, event.y et bind() <Button-1>" # Fonction appelée lors de la détection d'un clic gauche (<Button-1>) def souris(event): # event est un évènement (ici clic bouton gauche) """ Récupération des coordonnées du pointeur de la souris """ xsouris, ysouris = event.x, event.y # Affichage des coordonnées dans une boîte de dialogue showinfo('clic','x =' + str(xsouris) + '\ny =' + str(ysouris)) # Facultatif mais utile pour le débogage ; affichage dans la console print(xsouris, ysouris) fenetre.title('détection clics') # Surveillance du bouton gauche (<Button-1>) de la souris et appel de souris() fenetre.bind("<button-1>", souris) Détection des événements : clavier - event.char, repr() et bind() <Key>, <Up>, <Down>, <Left>, <Right> # Fonction appelée lors de la détection d'une touche enfoncée (<Key>) def clavier(event): # event est un évènement (ici touche enfoncée) """ Récupération de la touche enfoncée """ touchepressee = event.char # Affichage de la touche enfoncée showinfo('touche pressée',repr(touchepressee)) # Facultatif mais utile pour le débogage ; affichage dans la console print(repr(touchepressee)) fenetre.title('détection clavier') # Indispensable : place le focus sur la fenêtre qui vient d'être créée fenetre.focus_force() # Surveillance du clavier (<Key>) et appel de clavier() fenetre.bind("<key>", clavier) # Autres choix : <Up>, <Down>, <Left>, <Right> (flèches du clavier) PCSI IPT G. Monod Initiation_Tkinter.docx 5/9

Déplacer une image au clavier ou à la souris (clics ou drag & drop) <B1-Motion> def deplaceimage(event,dx,dy): """ Déplace un objet grâce aux flèches """ global xc, yc, dessin, chat xc += dx yc += dy dessin.move(chat,dx,dy) def sourisclic(event): """ Déplace un objet jusqu'au point cliqué """ global xc, yc xs, ys = event.x, event.y deplaceimage(none,xs-xc,ys-yc) # Réutilisation d'une fct dans un autre contexte => event remplacé par None def sourisdrag(event): """ Déplace un objet par drag & drop """ global xc, yc, dessin xs, ys = event.x, event.y objet = dessin.find_closest(xs,ys) deplaceimage(none,xs-xc,ys-yc) fenetre.title("déplacement d'un objet") pas = 15 # Pas de déplacement de l'objet au clavier hauteur, largeur = 300, 300 # Dimensions de la zone de dessin dessin = Canvas(fenetre,bg='dark grey',height=hauteur, width=largeur) dessin.pack(side=left, padx=10, pady=10) xc, yc = 100, 100 # Coordonnées du centre de l'image # Personnaliser le chemin (chemin complet si StartDir est resté vide dans Shell/Configuration des Shells) fichier = 'Projets\\Scratchcat2.png' # Création d'une image Tkinter (utiliser un fichier png) imgchat = PhotoImage(file='Projets\\Scratchcat2.png') # Création d'un objet dans la zone de dessin chat = dessin.create_image(xc,yc, image=imgchat) label1 = Label(fenetre, text='flèches, clic souris ou drag & drop') label1.pack(padx=5, pady=5) boutq.pack(side=bottom,padx=10, pady=10) fenetre.focus_force() # Syntaxe appel d'une fct AVEC PARAMETRES : utilisation de lambda fenetre.bind("<up>", lambda event : deplaceimage(event, 0, -pas)) fenetre.bind("<down>", lambda event : deplaceimage(event, 0, pas)) fenetre.bind("<left>", lambda event : deplaceimage(event, -pas,0)) fenetre.bind("<right>", lambda event : deplaceimage(event, pas,0)) fenetre.bind("<button-1>", sourisclic) # Surveillance du drag & drop fenetre.bind("<b1-motion>", sourisdrag) PCSI IPT G. Monod Initiation_Tkinter.docx 6/9

Créer, effacer des objets - Activer / désactiver des boutons def creecarre(): """ Dessine un carré s'il n'en existe aucun """ global existecarre, xr, yr, largeur, hauteur, cote, dessin, carre if not existecarre: xr, yr = rd.randint(cote,largeur-cote), rd.randint(cote,hauteur-cote) carre = dessin.create_rectangle(xr, yr, xr+cote, \ yr+cote, width=1, fill='blue') existecarre = True boutc.configure(state=disabled) # Activation / désactivation de boutons boute.configure(state=active) def effacecarre(): """ Efface un carré existant """ global dessin,existecarre, carre if existecarre: dessin.delete(carre) existecarre = False boutc.configure(state=active) boute.configure(state=disabled) def deplacecarre(event,dx,dy): """ Déplace un carré grâce aux flèches """ global existecarre, xr, yr, cote, dessin, carre if existecarre: xr += dx yr += dy dessin.move(carre,dx,dy) # Ou dessin.coords(carre,xr,yr,xr+cote,yr+cote) def sourisclic(event): """ Déplace un carré jusqu'au point cliqué """ global existecarre, xr, yr, cote xs, ys = event.x, event.y if existecarre: deplacecarre(none,xs-xr-cote//2,ys-yr-cote//2) def sourisdrag(event): """ Déplace un carré par drag & drop """ global existecarre, xr, yr, cote, dessin, carre if existecarre: xr, yr = event.x - cote//2, event.y - cote//2 objet = dessin.find_closest(xr,yr) dessin.coords(carre,xr,yr,xr+cote,yr+cote) fenetre.title("déplacement d'un carré") existecarre = False # Initialisation du booléen utilisé par les fonctions pas = 15 # Pas de déplacement du carré au clavier cote = 30 # Dimension du côté du carré hauteur, largeur = 250, 300 # Dimensions de la zone de dessin dessin = Canvas(fenetre,bg='dark grey',height=hauteur, width=largeur) dessin.pack(side=left, padx=10, pady=10) label1 = Label(fenetre, text='flèches ou souris') label1.pack(padx=5, pady=5) boutc = Button(fenetre, text='crée un carré', width = 15, command= creecarre) boutc.pack(padx=5, pady=5) boutc.configure(state=active) # Bouton actif boute = Button(fenetre, text='efface un carré', width = 15, command=effacecarre) boute.pack(padx=5, pady=5) boute.configure(state=disabled) # Bouton désactivé boutq.pack(side=bottom,padx=10, pady=10) fenetre.focus_force() fenetre.bind("<up>", lambda event : deplacecarre(event, 0, -pas)) fenetre.bind("<down>", lambda event : deplacecarre(event, 0, pas)) fenetre.bind("<left>", lambda event : deplacecarre(event, -pas,0)) fenetre.bind("<right>", lambda event : deplacecarre(event, pas,0)) fenetre.bind("<button-1>", sourisclic) fenetre.bind("<b1-motion>", sourisdrag) PCSI IPT G. Monod Initiation_Tkinter.docx 7/9

Récupération du contenu de Entry : get() - Version 1 def affichetexte(): """ Récupération du texte tapé """ # Méthode get() valeur = int(entree1.get()) if (valeur) > 0: # Affichage d'une boîte de dialogue "info" showinfo('mon info','bravo!\na bientôt?') fenetre.destroy() else: # Affichage d'une boîte de dialogue "warning" showwarning('mon avertissement','raté! \ntry again...') montexte ='' # Effacement du contenu de entree1 fenetre.title('ma fenêtre') label1 = Label(fenetre, text='entrer un entier : ',fg='blue', bg='yellow') label1.pack(side=left,padx=10, pady=10) montexte = '' entree1 = Entry(fenetre, textvariable=montexte, width=50, fg='red') entree1.focus_set() entree1.pack(side=left,padx=10, pady=10) entree1.focus_force() bouta = Button(fenetre, text='affiche', command=affichetexte) bouta.pack(padx=10, pady=10) boutq.pack(padx=10, pady=10) Récupération du contenu de Entry : IntVar( ) - Version 2 def affichetexte(): """ Récupération du texte tapé """ # Utilise une variable typée (cf. ci-dessous) valeur = montexte.get() if (valeur) > 0: # Affichage d'une boîte de dialogue "info" showinfo('mon info','bravo!\na bientôt?') fenetre.destroy() else: # Affichage d'une boîte de dialogue "warning" showwarning('mon avertissement','raté! \ntry again...') montexte.set('') # Effacement du contenu de entree1 fenetre.title('ma fenêtre') label1 = Label(fenetre, text='entrer un entier > 0 : ',fg='blue', bg='yellow') label1.pack(side=left,padx=10, pady=10) # Création d'une variable Tkinter traçable (modification détectable par get) montexte = IntVar() # Autres types : StringVar, BooleanVar, DoubleVar # Utilisation de cette variable dans entree1 entree1 = Entry(fenetre, textvariable=montexte, width=100, fg='red') Suite identique PCSI IPT G. Monod Initiation_Tkinter.docx 8/9

Disposition avancée des widgets : grid( ) La méthode grid() permet de disposer les widgets sur une «grille» (une matrice) constituée de lignes et de colonnes. fenetre.title('ma fenêtre') label1 = Label(fenetre, text='nom : ',fg='red') label2 = Label(fenetre, text='prénom : ') label3 = Label(fenetre, text='2015', fg='red') dessin = Canvas(fenetre, width=200, height=200, bg='lightgrey') entree1 = Entry(fenetre, width=50, fg='blue') entree2 = Entry(fenetre, width=50) bout1 = Button(fenetre, text='appliquer', padx =20) bout2 = Button(fenetre, text='quitter', command=fenetre.destroy, padx =20) # sticky = collé, E = Est, O = Ouest, rowspan = fusion de lignes label1.grid(row=1, column=1, sticky=e, padx=10) entree1.grid(row=1, column=2) label2.grid(row=2, column=1, sticky=e, padx=10) entree2.grid(row=2, column=2) dessin.grid(row=1, column=3, rowspan=2, padx=10, pady=10) bout1.grid(row=3, column=2) bout2.grid(row=3, column=3) label3.grid(row=4, column=2, pady=10) Autres boîtes de dialogue du module tkinter.messagebox showinfo(), showwarning(), showerror() askquestion(), askokcancel(), askyesno(), askretrycancel() Gestion rigoureuse des exceptions Il existe des instructions permettant une gestion rigoureuse des erreurs susceptibles de se produire au cours d un programme : try / except. Voir par exemple : https://openclassrooms.com/courses/les-exceptions-9 http://fsincere.free.fr/isn/python/cours_python_ch5.php À vous de jouer! PCSI IPT G. Monod Initiation_Tkinter.docx 9/9