Documentation de Tkinter¶

La documentation (au sens large) de Tkinter est très inégale.

Logiciels écrits en Tkinter¶

L’écosystème de Tkinter semble très réduit. En février 2019, la page Wikipedia recensait encore cinq interfaces graphiques écrites avec cette bibliothèque mais désormais (vérifié en novembre 2021), plus aucune n’est mentionnée.

Le logiciel écrit en Tkinter le plus utilisé est probablement IDLE qui est l’IDE proposé par la distribution officielle de Python.

Une autre source d’utilisation courante de Tkinter est via Matplotlib dont les graphiques peuvent être générés dans un canevas Tkinter :

Il semblerait qu’il soit utilisé comme backend dans les installations par défaut sous Windows et Linux. Pour le savoir, lancer le code suivant :

from matplotlib import get_backend

print(get_backend())

et qui devrait afficher :

TkAgg

Il existe un éditeur de code Python, fort réussi, du nom de Thonny

qui a fait l’objet de quelques reportages et d’une discussion sur Reddit.

A lire des messages sur stackoverflow : tkinter applications, il semble toutefois que Tkinter soit aussi utilisé dans des projets « locaux » pour créer des interfaces graphiques.

Sur Github, on peut trouver une interface graphique pour un client FTP.

Il semble surtout que Tkinter soit utilisé dans un cadre d’apprentissage de Python ou de la programmation graphique.

Sur Reddit, un jeu 3D écrit en Tkinter, réalisé dans le cadre d’un projet de lycée, a été annoncé mais le code source n’est pas disponible.

La bibliothèque TCL/Tk écrite en langage C et qui sert de base à Tkinter est aussi utilisée pour gérer le graphisme en Ocaml.

Origine de Tkinter¶

La bibliothèque Tkinter trouve son origine dans le langage de programmation TCL. Ce langage dispose d’une extension nommée Tk et permettant de réaliser des interfaces graphiques. Tkinter est un binding de l’extension Tk. D’ailleurs, Tkinter signifie Tk interface. Python n’est pas le seul langage ayant réalisé un binding de Tk ; c’est aussi le cas des langages OCaml, Perl et Ruby.

Tk est lié à CPython par une extension écrite en C, dans le fichier _tkinter.c. La documentation de Python explique l’architecture de liaison de Tk. Le livre Fluent Python analyse la hiérarchie de classes définissant le module Tkinter (chapitre 12).

L’identité du créateur de Tkinter n’est pas claire. Selon Shipman, 2013, pdf, page 3, repris par Wikipedia, c’est Fredrik Lundh (qui a aussi écrit par exemple le moteur du module d’expressions régulières). La documentation et le code source officiels indiquent que les auteurs sont Steen Lumholt and Guido van Rossum ; Fredrik Lundh aurait adapté l’interface à Tk 4.2.

Selon le code source officiel, Steen Lumholt est l’auteur du code de _tkinter.c.

D’ailleurs, dans le forum comp.lang.python en 2001, Fredrik Lundh dit lui-même : I’m pretty sure Steen Lumholt wrote it. Guido has been hacking on it, and I’ve been hacking my way around it, but Steen did the original work.

La notion de programmation événementielle¶

Quand vous utilisez une interface graphique (par exemple, un traitement de texte), la plupart du temps il ne se passe rien : le programme attend que vous interveniez en écrivant quelque chose ou en cliquant sur un bouton. Vos interventions qui font réagir le programme sont ce qu’on appelle des événements. La surveillance des évenements (on dit parfois l” écoute) est réalisée par un programme qu’on appelle une boucle d’événements car c’est une boucle infinie qui scanne les événements et réagit à ceux-ci. Ce type de programmation est dite programmation événementielle ou asynchrone. Ce n’est pas propre aux interfaces graphiques, par exemple un serveur http sous Nodejs fonctionne ainsi.

En Tkinter, la boucle des événements est gérée par la méthode mainloop. Voici un exemple typique :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

from tkinter import *
from random import randrange

def tracer():
    cnv.delete("all")
    u, v = randrange(SIDE), randrange(SIDE)
    R=SIDE//4
    cnv.create_oval(u-R,v-R,u+R, v+R, fill='orange')

SIDE=400

root=Tk()
cnv=Canvas(root, width=SIDE, height=SIDE, background="ivory")
cnv.pack(side=LEFT)


bouton=Button(root, text="Tracer", command=tracer)
bouton.pack()

root.mainloop()

Typiquement, le programme ci-dessous agit en fonction des événements qu’il capture (des clics de souris) :

La plupart du temps, le programme ne fait rien, il est en attente d’événements provoqués par l’utilisateur. La méthode mainloop (ligne 20) surveille l’action de l’utilisateur. Si le bouton défini à la ligne 17 est cliqué, le programme est conçu pour réagir : la fonction tracer (lignes 4-8) est appelée (cf. ligne 17) et dessine un disque orange. Une fois le disque dessiné et affiché, le programme se remet en attente.

Particularités de la programmation événementielle¶

Ce qui suit peut être réservé à une seconde lecture.

Un programme événementiel a les deux particularités suivantes :

• pendant l’exécution de la boucle d’événements, l’exécution du programme est confinée dans la boucle (donc du code qui viendrait après ne s’exécuterait pas, cf. ligne 11 ci-dessous);
• la boucle principale ne doit pas être bloquée.

Voici un code qui illustre le premier point :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

from tkinter import *

SIDE=400

root=Tk()
cnv=Canvas(root, width=SIDE, height=SIDE, background="ivory")
cnv.pack(side=LEFT)

root.mainloop()

print("Bonjour !")

Tant que la fenêtre créé en ligne 5 n’est pas détruite (en cliquant sur la croix), le message de la ligne 11 n’apparaîtra pas car le programme est confiné à la ligne 9.

Concernant le blocage de la boucle événementielle : cette dernière doit d’abord surveiller la réalisation d’événements. Si le programme réalise une opération qui mobilise ses ressources (un calcul intensif par exemple), le programme ne peut plus écouter et il ne va donc plus réagir. Soit par exemple le programme suivant :

Le code du programme (visible ci-dessous) est écrit pour que, au bout de 5 secondes après son ouverture (cf. ligne 30), il effectue un gros calcul (cf. lignes 13-14) qui va empêcher l’interface graphique de réagir et si on clique sur le bouton rien ne se passe. Juste avant le lancement du calcul (10 ms), un petit message annonce que l’interface va être bloquée (lignes 29 et 10-11). Une fois le calcul terminé, le programme redevient réactif, un message que le calcul est terminé (ligne 15) et le clic sur le bouton montre à nouveau le disque orange.

Ci-dessous, le code du programme :

from tkinter import *
from random import randrange

def tracer():
    cnv.delete("all")
    u, v = randrange(SIDE), randrange(SIDE)
    R=SIDE//4
    cnv.create_oval(u-R,v-R,u+R, v+R, fill='orange')

def msg():
    lbl["text"]="Occupé !"

def calcul():
    z=10**6000000
    lbl["text"]="Libre !"

SIDE=400

root=Tk()
cnv=Canvas(root, width=SIDE, height=SIDE, background="ivory")
cnv.pack(side=LEFT)

bouton=Button(root, text="Tracer", command=tracer)
bouton.pack()

lbl=Label(root, text="Libre !", font="Times 12 bold")
lbl.pack(pady=30)

root.after(4990, msg)
root.after(5000, calcul)

root.mainloop()

En particulier, sauf cas exceptionnel ou programme à visée pédagogique, une interface graphique en Tkinter n’utilise jamais la fonction sleep car elle bloque la boucle événementielle et empêche donc l’écoute des événements comme c’est expliqué dans de nombreux messages sur StackOverflow :

• Using Python Tk as a front-end for threaded code (B. Oakley)
• Python: Tkinter - One animation stops when the other begins (abarnert)
• Python Tkinter enter event (B. Oakley)

Création d’une fenêtre et d’un widget¶

Une application graphique de bureau s’exécute dans une fenêtre qui contient des widgets. Un widget est juste un composant graphique comme un menu ou un bouton. Voici un code « Hello Tkinter! » qui crée une fenêtre et un widget sous Tkinter :

fenetre_widget.py

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

from tkinter import *

WIDTH=600
HEIGHT=400

my_root=Tk()
cnv=Canvas(my_root, width=WIDTH, height=HEIGHT, background='ivory')
cnv.pack()

my_root.mainloop()

ce qui ouvre l”« application » suivante

• Ligne 1 : on importe toutes les fonctionnalités de Tkinter même si on n’a pas besoin de toutes celles-ci. C’est pratique pour de petits programmes. On procède légèrement autrement dans des usages plus avancés.
• Ligne 6 : on créé une fenêtre Tkinter en appelant le constructeur Tk, dite fenêtre « maîtresse » (master).
• Ligne 7 : on crée un « canevas » dans la fenêtre : c’est un widget permettant d’effectuer du graphisme, des animations, etc.
• Ligne 8 : on indique avec pack comment le widget doit être intégré dans le widget-maître (ici la fenêtre my_root).
• Ligne 10 : on lance la « boucle principale » (mainloop) de l’application. C’est typique de la programmation événementielle.

Comprendre le fonctionnement de la boucle principale¶

Ce qui suit sera réservé à une 2e lecture. Il contient essentiellement des références provenant toutes de StackOverFlow.

La mainloop de Tkinter est en fait une gigantesque boucle while infinie comme expliqué dans le message Python3, Understanding the GUI loop. Il est donc inutile d’utiliser sa propre boucle infinie appelant périodiquement la méthode update, comme expliqué dans ce message Tkinter understanding mainloop 1.

Si on utilise la fonction sleep dans une interface graphique Tkinter, l’interface ne répond plus. On n’utilise donc quasiment jamais sleep dans une application Tkinter. Les messages suivants détaillent ce point :

• Python Tkinter enter event
• Python: Tkinter - One animation stops when the other begins
• Python Tkinter enter event
• Using Python Tk as a front-end for threaded code

La méthode mainloop étant bloquante, dans certaines circonstances, il peut être envisagé de ne pas l’utiliser comme illustré dans Use TkInter without mainloop.

Le constructeur Tk¶

Tk est une classe définie dans le module tkinter et qui permet la création de la fenêtre-maîtresse de l’application :

1
2
3
4
5
6

from tkinter import Tk, Label

racine=Tk()
annonce=Label(height=5, width= 15, text="BONJOUR !", bg='ivory')
annonce.pack()
racine.mainloop()

• Ligne 3 : construction de la fenêtre « racine » de l’application.
• Ligne 4 : création d’un widget, ici un widget Label (un court texte).
• Ligne 5 : placement du widget dans la fenêtre racine.
• Ligne 6 : lancement de l’application graphique.

On dit que c’est un constructeur car un appel à Tk construit véritablement une fenêtre-maîtresse. En principe, on ne donne aucun argument à Tk. Les éléments de positionnement, comme le bord d’un widget par rapport au bord de la fenêtre principale sont définis par la méthode qui placera le widget dans la fenêtre-maîtresse et non cette dernière. Par exemple, le code ci-dessous place entre la fenêtre-maîtresse et le widget un bord de 20 pixels :

Le code correspondant est :

1
2
3
4
5
6

from tkinter import Tk, Label

racine=Tk()
annonce=Label(height=5, width= 15, text="BONJOUR !", bg='ivory')
annonce.pack(padx=20, pady=20)
racine.mainloop()

• Ligne 5 : le widget lui-même (non la fenêtre principale définie en ligne 3) gère le placement d’un widget dans la fenêtre qui le contient.

Bien qu’une fenêtre Tk ne puisse prendre aucun argument, on peut toutefois lui donner une couleur de fond (mais qui pourrait être caché par un widget) :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

from tkinter import Tk, Label

racine=Tk()

racine['bg']="lavender"

annonce=Label(height=20, width= 20, text="BONJOUR !", font= "Times 20", bg='ivory')
annonce.pack(padx=10, pady=10)

racine.mainloop()

• Ligne 5 : racine donne accès à un dictionnaire dont un des éléments est la chaîne bg (pour background) et reçoit une couleur Tkinter (ici couleur lavande).
• Ligne 8 : les options de padding du label laissent découverte la fenêtre ce qui permet d’apercevoir sa couleur.

Titre de fenêtre¶

Par défaut, le bandeau d’une fenêtre porte le titre de tk. On peut changer ce titre par défaut en appelant la méthode title de Tk :

1
2
3
4
5
6
7
8
9

from tkinter import Tk, Label

racine=Tk()

racine.title("Ma fenêtre principale")

annonce=Label(height=5, width= 50, text="BONJOUR ! ", bg='ivory')
annonce.pack()
racine.mainloop()

Fenêtre non redimensionnable¶

Dans de nombreuses situations, redimensionner la fenêtre n’a pas de sens car le contenu de la fenêtre n’est pas redessiné pour s’adapter aux nouvelles dimensions. Dans ce cas, il vaut mieux bloquer le redimensionnement, ce qui peut se faire comme ci-dessous :

1
2
3
4
5
6
7
8
9

from tkinter import Tk, Canvas

root = Tk()
cnv = Canvas(root, width=400, height=400)
cnv.pack()

root.resizable(False, False)

root.mainloop()

• Ligne 7 : les dimensions de la fenêtre sont bloquées.

On observera qu” il n’y a plus d’icône pour modifier la taille de la fenêtre.

En réalité, le redimensionnement n’est pas absolu : la modification d’un widget interne à la fenêtre a une influence sur la taille de la fenêtre qui le contient.

La position de la fenêtre principale dans le bureau¶

Lorsqu’une application utilise une seule fenêtre, la position de cette fenêtre dans le bureau est codée dans une chaîne de caractères appelée la chaîne de géométrie de la fenêtre et à laquelle on accède par la méthode geometry (ligne 8 ci-dessous):

1
2
3
4
5
6
7
8
9

from tkinter import *

root = Tk()
cnv = Canvas(root, width=600, height=600, bg='ivory')
cnv.pack()

root.update_idletasks()
print(root.geometry())
root.mainloop()

10

300x200-5+40

Cette chaîne donne les informations suivantes concernant la fenêtre générée :

• sa largeur est de 300 px,
• sa hauteur est de 200 px
• le bord droit de la fenêtre est à 5 px du bord droit du bureau,
• le bord supérieur de la fenêtre est à 40 px du haut du bureau

La ligne root.update_idletasks() est parfois nécessaire pour initialiser certaines tâches (sinon, dans notre cas, le message est 1x1+0+0).

D’une manière générale, une chaîne de géométrie de fenêtre a la syntaxe générale suivante :

\(\mathtt{WxH\pm X\pm Y}\)

où \(\mathtt{W, H, X, Y}\) désignent des mesures en pixels avec la signification suivante :

Le schéma ci-dessous explique les mesures :

En particulier, on comprend que le couple (+X,+Y) représente les coordonnées du coin supérieur gauche de la fenêtre dans le repère habituel du bureau (origine en haut à gauche, abscisses = bord supérieur orienté vers la droite, ordonnées = bord gauche orienté vers le bas).

On peut modifier la position initiale de la fenêtre principale en changeant les paramètres que porte cette chaîne.

Par exemple, pour placer la fenêtre à 500 pixels des bords gauche et supérieur :

from tkinter import Tk, Canvas

root = Tk()
cnv = Canvas(root, width=400, height=400)
cnv.pack()

root.geometry("+500+500")

root.mainloop()

Pour centrer une fenêtre dont les dimensions sont données à l’avance, on peut utiliser le code suivant provenant d’un message sur StackOverFlow :

import tkinter as tk


root = tk.Tk() # create a Tk root window

w = 800 # width for the Tk root
h = 650 # height for the Tk root

# get screen width and height
ws = root.winfo_screenwidth() # width of the screen
hs = root.winfo_screenheight() # height of the screen

# calculate x and y coordinates for the Tk root window
x = (ws/2) - (w/2)
y = (hs/2) - (h/2)

# set the dimensions of the screen
# and where it is placed
root.geometry('%dx%d+%d+%d' % (w, h, x, y))

root.mainloop() # starts the mainloop

Modifier dynamiquement la géométrie de la fenêtre¶

La géométrie de la fenêtre peut changer en cours d’exécution :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

from tkinter import Tk, Canvas

root = Tk()
cnv = Canvas(root, width=400, height=400)
cnv.pack()

def printgeom():
    root.geometry("600x600+200+50")
    print(root.geometry())

print(root.geometry())
cnv.after(2500, printgeom)

root.mainloop()

• Ligne 12 : au bout de 2,5 s, la géométrie de la fenêtre est modifiée
• Ligne 8 : modification de la géométrie qui est affichée.

Ouvrir plusieurs fenêtres¶

Le code suivant

1
2
3
4
5
6
7

from tkinter import *

root = Tk()
a = Toplevel(root, bg='red')
b = Toplevel(root, bg='blue')

root.mainloop()

va ouvrir 3 fenêtres : deux fenêtres et leur fenêtre maîtresse comme on le voit ci-dessous :

Pour cacher la fenêtre maîtresse, utiliser withdraw :

1
2
3
4
5
6
7
8

from tkinter import *

root = Tk()
a = Toplevel(root, bg='red')
b = Toplevel(root, bg='blue')
root.withdraw()

root.mainloop()

ce qui produit :

Toutefois, comme la fenêtre est cachée, il n’y a plus moyen de fermer définitivement l’application puisque la croix de fermeture de l’application est invisible. On peut y remédier de la manière suivante :

from tkinter import *

def quit_a():
    a.destroy()
    if closed[1]:
        root.destroy()
    else:
        closed[0]=True

def quit_b():
    b.destroy()
    if closed[0]:
        root.destroy()
    else:
        closed[1]=True

root = Tk()
a = Toplevel(root, bg='red')
b = Toplevel(root, bg='blue')

a.protocol("WM_DELETE_WINDOW", quit_a)
b.protocol("WM_DELETE_WINDOW", quit_b)

closed=[False, False]

root.withdraw()

root.mainloop()

Résolution de l’écran¶

Il peut être utile parfois de coder une application graphique en fonction de la résolution de l’écran de l’hôte. Tkinter permet de récupérer ces informations sur la résolution :

1
2
3
4
5
6
7
8
9

from tkinter import Tk, Canvas

root = Tk()
cnv = Canvas(root, width=400, height=400)
cnv.pack()

print(root.winfo_screenwidth(), root.winfo_screenheight())

root.mainloop()

10

1920 1080

• Ligne 7 : les deux dimensions de la résolution.

Le mode plein écran¶

On peut placer une fenêtre en mode plein écran avec l’option "fullscreen" qu’on place à True. La sortie du mode plein écran n’est pas prévue par défaut donc il faut l’écrire soit même en liant par exemple la touche Echap au retour de l’écran à sa position normale :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

from tkinter import *

SIDE = 1000


def normalscreen(event):
    master.attributes("-fullscreen", False)


master = Tk()
master.attributes("-fullscreen", True)

cnv = Canvas(master, width=SIDE, height=1.3 * SIDE, bg='ivory')
cnv.pack()

master.bind("<Escape>", normalscreen)

master.mainloop()

Appeler plusieurs fois Tk¶

On lit parfois dans du code de débutants plusieurs appels successifs au constructeur Tk afin de créer plusieurs fenêtres. Dans l’immense majorité des cas c’est inutile, comme expliqué dans ce message Why are multiple instances of Tk discouraged? (B. Oakley). Dans une discussion du forum OpenClassroom, le type d’inaccessibilité que provoque l’usage de plusieurs appels à Tk est illustré par un exemple. Voir aussi cette discussion où le même problème a été rencontré.

Si l’objectif est juste de créer plusieurs fenêtres, le faire en appelant le widget TopLevel :

from tkinter import *

root = Tk()
a = Toplevel(root, bg='red')
b = Toplevel(root, bg='blue')

root.mainloop()

Gestionnaires de géométrie¶

Une fois une fenêtre créée, il faut placer ses widgets à l’intérieur. Le placement de tout widget se fait obligatoirement par l’intermédiaire d’un gestionnaire de géométrie. Tkinter dispose de trois gestionnaires de géométrie : pack, grid et place.

Voici un résumé des principales caractéristiques de ces trois gestionnaires :

Bien noter que dans une fenêtre conteneur donnée, on ne peut pas utiliser simultanément les gestionnaires pack et grid (une exception sera levée).

En pratique, tout placement de widget, disons w, dans une fenêtre, disons root, nécessite un appel de la forme root.geometrie(w) où geometrie est le nom de l’un des trois gestionnaires ci-dessus.

Voici un exemple représentatif :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

from tkinter import *

root=Tk()

cnv=Canvas(root, width=300, height=200, bg="orange")
cnv.pack()

bouton=Button(root, text="Pomme")
bouton.pack()

entree=Label(root, width='10', text="Kiwi")
entree.pack()

root.mainloop()

Les widgets sont incorporés dans la fenêtre root (ligne 3, la fenêtre initiale) à la ligne 9 et à la ligne 12 avec le gestionnaire pack.

Organiser des widgets, de façon transparente pour le programmeur, de manière souple et visuellement satisfaisante est une tâche complexe, remplie de calculs géométriques. L’intérêt des deux premiers gestionnaires est qu’ils nous en dispensent tout en assurant un placement satisfaisant.

Pour une description des gestionnaires et des conseils d’utilisation, consulter les messages suivants sur le forum StackOverflow :

• Bryan Oakley : description
• Bryan Oakley : conseils pour designer son interface graphique
• Bryan Oakley : éviter le gestionnaire place
• Bryan Oakley : inconvénients de place
• Bryan Oakley : cas d’usage du gestionnaire place

Dans ce document, le gestionnaire place n’est pas décrit : les deux autres gestionnaires répondent, et répondent bien, à l’immense majorité des usages.

Attention que les gestionnaires grid et pack ne sont pas à fenêtre fixe : si un widget change de taille (par exemple, on ajoute ou on retranche du texte quelque part) alors toute la fenêtre contenante change de taille ce qui est souvent souhaité mais parfois aussi non souhaité.

Enfin, comme indiqué par Bryan Oakley, que ce soit la géométrie pack ou grid, par défaut les widgets contenants ou même n’importe quel widget va adapter ses dimensions pour faire tenir tout ce qu’il contient (et c’est le comportement souhaité dans 99,9 % des cas).

Le gestionnaire grid¶

Le gestionnaire grid permet d’organiser ses widgets selon une grille 2D. C’est un gestionnaire assez simple à utiliser et très efficace. Un cas typique d’utilisation est la réalisation d’un calendrier car il y a beaucoup d’alignements à gérer :

Un autre cas est la réalisation d’un quizz car il y a plusieurs widgets et qui en outre se placent naturellement en grille :

Voici un exemple représentatif de code utilisant le gestionnaire grid :

from tkinter import *

root=Tk()

cnv=Canvas(root, width=300, height=200, bg="orange")
cnv.grid(row=0, column=0)

pomme=Button(root, text="Pomme")
pomme.grid(row=1, column=0)

kiwi=Label(root, width='10', text="Kiwi")
kiwi.grid(row=2, column=0)

begonia=Label(root, width='10', text="Begonia")
begonia.grid(row=1, column=1)

root.mainloop()

qui produit

La grille est implicite (il n’y a pas de traits séparateurs visibles). Et on ne définit pas la grille à l’avance : on donne aux widgets un placement dans la grille en utilisant les arguments nommés row (pour l’indice de ligne) et column (l’indice de colonne) et Tkinter se charge de comprendre combien de lignes et de colonnes il y aura. Les indices des cellules commencent à 0.

Gestionnaire grid : l’option span¶

Le gestionnaire grid permet d’étendre un widget sur plusieurs lignes ou colonnes consécutives :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

from tkinter import *

root=Tk()

a=Label(root, text="A", bg='red', width=20, height=5)
a.grid(row=0, column=0)

b=Label(root, text="B", bg='lightblue', width=20, height=5)
b.grid(row=0, column=1)

x=Label(root, text="X", bg='gray', width=20, height=5)
x.grid(row=1, column=0,columnspan=2)

y=Label(root, text="X", bg='gray', width=20, height=5)
y.grid(row=0, column=2,rowspan=2)

c=Label(root, text="C", bg='lime', width=20, height=5)
c.grid(row=2, column=0)

d=Label(root, text="D", bg='orange', width=20, height=5)
d.grid(row=2, column=1)

root.mainloop()

qui produit

Par exemple, ligne 11, on définit un label gris, qui affiche le texte X. Ce label s’étend sur 2 colonnes (à cause de l’option columnspan=2) et commence ligne 1 et colonne 0.

Gestionnaire grid : les options padx et pady¶

Les options padx et pady ajoutent de l’espace autour du widget.

Le dessin ci-dessous illustre le positionnement des marges padx et pady :

Voici un exemple d’utilisation :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

from tkinter import *

root=Tk()

a=Label(root, text="A", bg='red', width=20, height=5)
a.grid(row=0, column=0, padx=20)

b=Label(root, text="B", bg='lightblue', width=20, height=5)
b.grid(row=0, column=1, padx=50, pady=100)

c=Label(root, text="C", bg='lime', width=20, height=5)
c.grid(row=1, column=0)

d=Label(root, text="D", bg='orange', width=20, height=5)
d.grid(row=1, column=1)

root.mainloop()

La distance padx est comptée sur l’axe des x (horizontal) et pady sur l’axe vertical. la marge padx semble affecter toute la colonne où cette option est placée : ci-dessus, par exemple, la widget a est affecté d’un padx=20 tandis que dans la même colonne, le widget c ne reçoit aucun padx déclaré et pourtant le widget est autant décalé que a.

Gestionnaire grid : l’option sticky¶

Partons de l’interface suivante :

from tkinter import *

root=Tk()

a=Label(root, text="A", bg='red', width=20, height=5)
a.grid(row=0, column=0)

b=Label(root, text="B", bg='lightblue', width=10)
b.grid(row=0, column=1)


c=Label(root, text="C", bg='lime',  height=5)
c.grid(row=1, column=0)

d=Label(root, text="D", bg='orange', width=5, height=2)
d.grid(row=1, column=1)

root.mainloop()

qui produit

et modifions-la pour observer l’effet de l’option sticky :

from tkinter import *

root=Tk()

a=Label(root, text="A", bg='red', width=20, height=5)
a.grid(row=0, column=0)

b=Label(root, text="B", bg='lightblue', width=10)
b.grid(row=0, column=1, sticky=N)


c=Label(root, text="C", bg='lime',  height=5)
c.grid(row=1, column=0, sticky=E+W)

d=Label(root, text="D", bg='orange', width=5, height=2)
d.grid(row=1, column=1, sticky=NE)

root.mainloop()

qui produit

Dans l’option sticky, on indique des directions nord, sud, etc mais écrites en anglais et abrégées en une seule lettre capitale, par exemple W pour la direction ouest. On peut aussi utiliser des combinaisons comme NE (pour nord est) ou encore N+E. L’effet de sticky est de coller le widget dans la direction indiquée, avec un éventuel effet de remplissage par étirement de la zone libre de la cellule. L’option N+E+S+W est de remplir toute la cellule.

Gestionnaire pack¶

Le gestionnaire pack est très direct d’utilisation et est très employé pour les interfaces très simples comportant peu de widgets et dont l’organisation n’est pas cruciale :

from tkinter import *

root=Tk()
cnv=Canvas(root, width=400, height=400, background="ivory")
btn = Button(root, text="Menu", bg="pink")
lbl=Label(root, text="Orange", bg="orange", width=15)

cnv.pack()
btn.pack()
lbl.pack()

root.mainloop()

ce qui produit

et qui a pour effet d’empiler (pack) les widgets les uns sur les autres, bord à bord. Par défaut, on voit que les widgets sont alignés de haut en bas.

S’il s’agit d’obtenir des alignements précis, le gestionnaire pack est peu approprié et les placements ne sont pas toujours faciles à réaliser.

La méthode pack dispose en outre de plusieurs options pour affiner le placement des widgets. Les principales options sont les suivantes :

Gestionnaire pack : l’option side¶

Au fur et à mesure que des widgets sont placés avec le gestionnaire pack, une zone à remplir est redéfinie.

Quand on place l’option side à un widget, par exemple side=BOTTOM, cela signifie que le widget va être comme collé à la partie inférieure de l’espace restant. En particulier, une fois le widget placé, la partie inférieure du widget ne fera plus partie de l’espace restant.

Par défaut, un widget est placé avec l’option side=TOP et cela explique pourquoi, par défaut, les widgets sont empilés de haut en bas.

Voici une succession de trois placements (les numéros sont les numéros d’ordre d’apparition dans le code source) :

from tkinter import *

root=Tk()

Label(bg="red", width=30, height=2, text="1",
      font="arial 30").pack(side=BOTTOM)
Label(bg="purple", width=20, height=2, text="2",
      font="arial 30").pack()
Label(bg="green", width=40, height=2, text="3",
      font="arial 30").pack()
root.mainloop()

ce qui produit :

• Le widget rouge est collé en bas (side=BOTTOM).
• Le widget mauve a un placement par défaut, donc il va se placer en haut (TOP) de la zone restante sonc au-dessus du widget rouge.
• Le widget vert est lui aussi placé avec l’option par défaut side=TOP donc dans la partie supérieure de la zone restante. Le widget mauve étant collé tout en haut de la fenêtre, le vert ne peut pas s’y placer. La zone restante est coincée au-dessus du widget rouge et sous le widget mauve, ce qui explique le placement.

Faisons trois nouveaux placements :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

from tkinter import *

root=Tk()

Label(bg="red", width=30, height=2, text="1", font="arial 30").pack(side=BOTTOM)
Label(bg="purple", width=20, height=2, text="2", font="arial 30").pack()
Label(bg="green", width=40, height=2, text="3", font="arial 30").pack()
Label(bg="pink", width=15, height=2, text="4", font="arial 30").pack(side=RIGHT)
Label(bg="orange", width=25, height=2, text="5", font="arial 30").pack(side=LEFT)
Label(bg="lightblue", width=25, height=2, text="6", font="arial 30").pack()
Label(bg="lavender", width=5, height=2, text="7", font="arial 30").pack(side=RIGHT)
root.mainloop()

ce qui donne :

• Ligne 8 : le widget rose n°4 est placé à droite donc collé à droite de la fenêtre et sous les widgets n°2 et 3
• Ligne 9 : le widget orange n°5 est placé à gauche donc collé à gauche de la fenêtre et sous les widgets n°2 et 3
• Ligne 10 : le widget bleu clair n°6 est placé en haut de la zone restante donc collé sous le widget n°3
• Ligne 11 : le widget lavande n°7 est placé à droite donc collé à gauche du widget n°4 (qui lui était collé à droite de la fenêtre).

On remarque que la progression se fait de l’extérieur vers l’intérieur.

Pour placer côte à côte de la gauche vers la droite, utiliser l’option side=LEFT : chaque widget sera placé à gauche du précédent. Exemple :

from tkinter import *

root=Tk()

Label(bg="red", width=5, height=2, text="1", font="arial 30").pack(side=LEFT)
Label(bg="purple", width=5, height=2, text="2", font="arial 30").pack(side=LEFT)
Label(bg="green", width=5, height=2, text="3", font="arial 30").pack(side=LEFT)

root.mainloop()

ce qui donne :

Gestionnaire pack : l’option fill¶

L’option fill permet d’étendre le widget dans sa zone de placement. On donne l’option sous la fome fill=v ou v vaut

• X pour une expansion dans le sens horizontal,
• Y dans le sens vertical
• NONE pour une absence d’expansion (valeur par défaut)
• BOTH pour une expansion dans toutes les directions

Par exemple, le code suivant

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

from tkinter import *

root=Tk()
cnv=Canvas(root, width=400, height=400, background="ivory")
lbl1=Label(root, text="Orange", bg="orange", width=15)
lbl2=Label(root, text="Orange", bg="red", width=15)

cnv.pack()
lbl1.pack(fill=X)
lbl2.pack()

root.mainloop()

produit :

Le label orange a été élargi à sa gauche et à sa droite, le label rouge lui n’est pas étendu.

Gestionnaire pack : l’option expand¶

L’option expand permet d’étendre le widget par rapport à la fenêtre maîtresse. On donne l’option sous la fome expand=v ou v vaut True ou False. Par défaut, l’option est placée à False. S’il ne reste pas de place dans la fenêtre maîtresse, l’option est sans action.

Voici un exemple :

1
2
3
4
5
6
7

from tkinter import *
root=Tk()

Label(root, text='Label 1', bg='green', height=10).pack(side='left')
Label(root, text='Label 2', bg='lightblue').pack(fill=Y, expand=False)

root.mainloop()

produit :

Malgré l’option fill=Y (ligne 5), l’espace disponible dans la fenêtre (et fourni à cause de la hauteur du label vert ligne 4) n’est pas utilisé.

Si on place l’option expand à True :

from tkinter import *
root=Tk()

Label(root, text='Label 1', bg='green', height=10).pack(side='left')
Label(root, text='Label 2', bg='lightblue').pack(fill=Y, expand=True)

root.mainloop()

le résultat est différent, l’espace disponible dans la fenêtre est utilisé :

Gestionnaire pack : les options padx et pady¶

Quand on place un widget W dans un conteneur C grâce au gestionnaire pack, il y a la possibilité de placer une « marge » autour de W dans C : cela s’obtient avec les arguments nommés padx et pady :

1
2
3
4
5
6

from tkinter import Tk, Canvas

root=Tk()
cnv=Canvas(root, width= 300, height=200, bg="ivory")
cnv.pack(padx=150, pady=100)
root.mainloop()

padx=150 désigne une marge horizontale de 150 pixels à gauche et à droite du canevas dessiné. Et pady=100 désigne une marge verticale de 100 pixels en haut et en bas du canevas

L’algorithme de placement pack¶

L’algorithe complet de placement de pack est assez complexe lorsqu’on prend en compte toutes les options possibles. Dans les documentations, les descriptions de l’algorithme sont assez rares.

Une description très minutieuse en est faite dans la documentation officielle de la bibliothèque Tk : the packer algorithm.

Une description plus lisible mais moins détaillée est fournie par Fredrik Lundh qui suggère d’imaginer un domaine fermé entouré par une frontière élastique et que l’on va remplir par des widget en s’appuyant sur un bord du domaine élastique.

Pour mieux observer les placements opérés par le gestionnaire pack, voici le résultat d’une interface graphique générée automatiquement et aléatoirement et qui utilise les différentes options possibles :

Le code source correspondant est :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

from tkinter import *

fen=Tk()

Label(fen,
      text='order=1\ndir=LEFT\nfill=NONE\nanchor=n\nexpand=1\npadx=2 pady=5',
      font='Arial 10 bold', bg='light sky blue', justify=LEFT).pack(
          side=LEFT, padx=2, pady=5, fill=NONE, anchor='n', expand=1)
Label(fen,
      text='order=2\ndir=RIGHT\nfill=Y\nanchor=se\nexpand=1\npadx=4 pady=2',
      font='Arial 10 bold', bg='ivory', justify=LEFT).pack(
          side=RIGHT, padx=4, pady=2, fill=Y, anchor='se', expand=1)
Label(fen,
      text='order=3\ndir=TOP\nfill=X\nanchor=sw\nexpand=0\npadx=6 pady=4',
      font='Arial 10 bold', bg='orange', justify=LEFT).pack(
          side=TOP, padx=6, pady=4, fill=X, anchor='sw', expand=0)
Label(fen,
      text='order=4\ndir=RIGHT\nfill=NONE\nanchor=sw\nexpand=1\npadx=4 pady=4',
      font='Arial 10 bold', bg='orange', justify=LEFT).pack(
          side=RIGHT, padx=4, pady=4, fill=NONE, anchor='sw', expand=1)
Label(fen,
      text='order=5\ndir=LEFT\nfill=X\nanchor=nw\nexpand=0\npadx=11 pady=4',
      font='Arial 10 bold', bg='cyan', justify=LEFT).pack(
          side=LEFT, padx=11, pady=4, fill=X, anchor='nw', expand=0)
Label(fen,
      text='order=6\ndir=LEFT\nfill=X\nanchor=sw\nexpand=1\npadx=2 pady=3',
      font='Arial 10 bold', bg='salmon', justify=LEFT).pack(
          side=LEFT, padx=2, pady=3, fill=X, anchor='sw', expand=1)
Label(fen,
      text='order=7\ndir=TOP\nfill=Y\nanchor=w\nexpand=1\npadx=10 pady=3',
      font='Arial 10 bold', bg='red', justify=LEFT).pack(
          side=TOP, padx=10, pady=3, fill=Y, anchor='w', expand=1)
Label(fen,
      text='order=8\ndir=RIGHT\nfill=X\nanchor=se\nexpand=1\npadx=9 pady=2',
      font='Arial 10 bold', bg='red', justify=LEFT).pack(
          side=RIGHT, padx=9, pady=2, fill=X, anchor='se', expand=1)
Label(fen,
      text='order=9\ndir=TOP\nfill=BOTH\nanchor=se\nexpand=0\npadx=8 pady=4',
      font='Arial 10 bold', bg='salmon', justify=LEFT).pack(
          side=TOP, padx=8, pady=4, fill=BOTH, anchor='se', expand=0)
Label(fen,
      text='order=10\ndir=LEFT\nfill=BOTH\nanchor=w\nexpand=1\npadx=8 pady=5',
      font='Arial 10 bold', bg='orange', justify=LEFT).pack(
          side=LEFT, padx=8, pady=5, fill=BOTH, anchor='w', expand=1)
Label(fen,
      text='order=11\ndir=RIGHT\nfill=NONE\nanchor=sw\nexpand=1\npadx=2 pady=4',
      font='Arial 10 bold', bg='brown', justify=LEFT).pack(
          side=RIGHT, padx=2, pady=4, fill=NONE, anchor='sw', expand=1)
Label(fen,
      text='order=12\ndir=TOP\nfill=NONE\nanchor=center\nexpand=0\npadx=4 pady=3',
      font='Arial 10 bold', bg='green', justify=LEFT).pack(
          side=TOP, padx=4, pady=3, fill=NONE, anchor='center', expand=0)
Label(fen,
      text='order=13\ndir=BOTTOM\nfill=BOTH\nanchor=nw\nexpand=0\npadx=4 pady=3',
      font='Arial 10 bold', bg='blue', justify=LEFT).pack(
          side=BOTTOM, padx=4, pady=3, fill=BOTH, anchor='nw', expand=0)
Label(fen,
      text='order=14\ndir=TOP\nfill=NONE\nanchor=w\nexpand=1\npadx=9 pady=5',
      font='Arial 10 bold', bg='ivory', justify=LEFT).pack(
          side=TOP, padx=9, pady=5, fill=NONE, anchor='w', expand=1)

fen.mainloop()

Ce code crée une suite de labels, par exemple, lignes 29-32, le label n° 7. Des options aléatoires sont fournies à la méthode pack, par exemple, pour le label n°7, regarder ligne 32. Le label rend visibles ces options, cf. ligne 30 pour le label n°7.

Bien comprendre que le remplissage se fait de manière successive et va de l’extérieur vers l’intérieur. Ainsi, side=RIGHT va placer le widget courant dans la partie droite de l’intérieur de la zone restante. Par ailleurs, l’ajout d’un widget peut modifier le placement relatif des précédents.

Un fichier Python a servi à générer le code ci-dessus dont voici le code :

from random import randrange

COLORS=["red", "blue", "gray", "orange", "brown",
        "magenta", "green", "salmon", "ivory",
        "cyan", 'sky blue', 'light sky blue']
DIR=["RIGHT", "LEFT", "TOP", "BOTTOM"]

cnv = """\
Label(fen,
      text='%s',
      font='Arial 10 bold',
      bg='%s', justify=LEFT).pack(
      side=%s, padx=%s, pady=%s, fill=%s, anchor='%s', expand=%s)"""

FILL=["NONE", "NONE", "BOTH", "X", "Y"]
ANCHOR="NW N NE E SE S SW W CENTER".lower().split()
JUSTIFY="LEFT CENTER RIGHT".split()
EXPAND="0 1".split()

L=[]

for  i in range(30):
    b=COLORS[randrange(len(COLORS))]
    c= DIR[randrange(4)]
    d=FILL[randrange(len(FILL))]
    e=ANCHOR[randrange(len(ANCHOR))]
    f="%s" %JUSTIFY[randrange(len(JUSTIFY))]
    x=EXPAND[randrange(2)]

    padx=randrange(2,12)
    pady=randrange(2,6)
    options=(r"order=%s\ndir=%s\nfill=%s\n"\
              r"anchor=%s\nexpand=%s\npadx=%s pady=%s")
    a= options%(i+1, c, d, e, x, padx, pady)
    L.append(cnv %(a,b,c,padx, pady, d,e, x))

code=["from tkinter import *"]
for i in range(1,15):
    code.append("# Fenêtre n°%s" %i)
    code.append("fen=Tk()\n")
    code.append("\n".join(L[:i]))
    code.append("#------------------------------------\n\n")
code.append("fen.mainloop() ")

open("demo_pack.py", "w").write('\n'.join(code))

Ce code génère un fichier de démonstration demo_pack.py. L’exécution de ce fichier crée un certain de nombre de fenêtres (ici 14) chacune utilisant la méthode pack. La fenêtre visible ci-dessus est l’une d’entre.

Centrer un widget et méthode pack¶

Soit l’interface suivante :

où le widget de droite n’est pas verticalement centré. Le code est :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

from tkinter import *

root=Tk()

cnv=Canvas(root, width=300, height=200, bg="orange")
cnv.pack(side='left')

bouton=Button(root, text="Pomme")
bouton.pack()

root.mainloop()

L’option side=left de la ligne 6 assure que les widgets sont côte à côte. Le 2e widget est placé par défaut avec l’option side=TOP. Cela explique qu’il ne soit pas centré. Pour obtenir un centrage, il suffit de placer l’option side="left" ou side="right" :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

from tkinter import *

root=Tk()

cnv=Canvas(root, width=300, height=200, bg="orange")
cnv.pack(side='left')

bouton=Button(root, text="Pomme")
bouton.pack(side="left")

root.mainloop()

ce qui produit :

Placer en grille avec la méthode pack¶

La méthode pack n’est pas adaptée à présenter une interface dont les widgets sont placés en grille.

Typiquement, soit à réaliser le motif suivant

où un canevas est entouré, en bas et à droite de barres de défilement.

Ce motif se réalise très facilement avec la méthode grid:

from tkinter import *

root=Tk()

Canvas(root, bg="ivory").grid(row=0, column=0)
Scrollbar(root, orient="vertical").grid(row=0, column=1, rowspan=2, sticky=NS)
Scrollbar(root, orient="horizontal").grid(row=1, column=0, sticky=EW)

root.mainloop()

Avec la méthode pack, c’est moins immédiat. On peut se dire qu’on empile le canevas sur la barre de défilement horizontale puis on place à droite ou gauche la barre de défilement vertical :

from tkinter import *

root=Tk()

Canvas(root, bg="ivory").pack()
Scrollbar(root, orient="horizontal").pack(fill=X)
Scrollbar(root, orient="vertical").pack(side=LEFT, fill=Y)

root.mainloop()

mais voilà ce que ça donne :

et ça ne marche pas non plus si side=RIGHT.

Une méthode qui fonctionne est la suivante :

from tkinter import *

root=Tk()

Scrollbar(root, orient="vertical", command=None).pack(side=RIGHT, fill=Y)
Canvas(root, bg="ivory").pack()
Scrollbar(root, orient="horizontal", command=None).pack(fill=X)

root.mainloop()

qui produit :

Version de Tkinter utilisée¶

Pour connaître la version de Tk que vous utilisez, tapez dans une console le code suivant :

1
2
3
4

>>> from tkinter import *
>>> TkVersion
8.6
>>>

Le code ci-dessus est obtenu pour les versions 3.4 à 3.7 de Python.

Tk a évolué assez sensiblement à sa version 8.5 (au moins 2003) : thèmes natifs sous Windows et Mac Os X, création de nouveaux widgets, antialising sous Linux pour le fenêtrage X-11, cf. Tcl/Tk 8.5

La version 8.6 de Tk (à partir de 2008) se distingue de la version 8.5 en ce qu’elle supporte désormais le format d’image png, cf. Tcl/Tk 8.6. En 2019, la dernière version de Tk est la version 8.6.9 et il existe une version alpha 8.7.

Certaines installation sous Mac Os X ont parfois des retards d’installation des dernières versions de Tk, cf. IDLE and tkinter with Tcl/Tk on macOS. À partir de la version 3.7 de Python, il semblerait que la version de Tcl/Tk qui sert de base à Tkinter soit 8.6, laquelle prend en charge le format png, cf. par exemple le bug tracker.

Importer tkinter¶

D’abord, le nom du module sous Python 3 est tkinter en minuscule. Le nom Tkinter s’applique à Python 2 et ne sera pas valide sous Python 3 (rappel : Python 2 n’est plus maintenu en 2020).

En Python, d’une manière générale, il n’est pas recommandé d’importer un module avec la syntaxe suivante :

from this_module import *

car cela peut créer des collision de noms. Concernant l’importation de Tkinter par :

from tkinter import *

elle est souvent déconseillée. Elle ajoute à l’espace de noms de Python environ 140 noms dont certains relativement communs comme

N       |      TOP      |      WORD      |      BOTTOM
E       |      YES      |      enum      |      Button
S       |      sys      |      Entry     |      CENTER
W       |      CHAR     |      FALSE     |      INSIDE
X       |      Grid     |      Image     |      NORMAL
Y       |      LEFT     |      Label     |      Widget
NO      |      Menu     |      PAGES     |      Message
ON      |      Misc     |      Place     |      VERTICAL
re      |      NONE     |      RIGHT     |      mainloop
ALL     |      Pack     |      ROUND     |      constants
END     |      TRUE     |      SOLID
OFF     |      Text     |      UNITS

et que l’on risque d’écraser accidentellement. Par ailleurs, certains considèrent que l’usage libre des noms de la bibliothèque nuit à la lisibilité du code (car on ne sait pas quel nom provient de Tkinter et quel nom provient d’un autre module).

Les programmes Tkinter peu élaborés importent peu de noms, donc ce genre de programme pourrait se contenter d’une importation du type

from tkinter import Tk, Canvas, Button

si par exemple vous avez juste besoin d’une fenêtre Tk, des widgets Canvas et Button.

Toutefois, des besoins plus importants nécessiteraient parfois d’importer beaucoup plus de noms.

Certains utilisateurs et connaisseurs de Tkinter proposent d’écrire plutôt :

import tkinter

ce qui oblige à systématiquement préfixer, par exemple tkinter.Canvas et impose des noms relativement long ; d’où la simplification suivante

import tkinter as tk

ce qui permet d’accéder au Canvas avec la syntaxe assez légère tk.Canvas. C’est ainsi que procède le module turtle dans CPython.

Enfin, il faut relativiser ces mises-en-garde : beaucoup de code, y compris du code-source disponible dans CPython (l’implémentation officielle et largement majoritaire de Python), utilise, à des degrés divers, une importation de type from tkinter import *. Par exemple, c’est le cas de la plupart des modules de IDLE, comme le fichier editor.py. Pour du code destiné à l’apprentissage, du code de petits jeux à caractère pédagogique, ou pour des essais de fonctionnalités, ce type d’importation présente peu d’inconvénients et présente même des avantages pour le débutant.

Le codage des couleurs sous Tkinter¶

On est amené à utiliser des couleurs sous Tkinter dans de nombreuses situations, par exemple, donner une couleur de fond à un bouton ou à un canevas. Il existe deux codages des couleurs sous Tkinter :

• nom de couleur : les couleurs standard du html, peuvent être appelées par leur nom, typiquement des noms courants red ou d’autres comme ivory ;
• codage hexadécimal : on fournit une chaîne hexadécimale RGB commençant par le caractère # ; il existe plusieurs formes, la plus simple étant un code à 3 chiffres hexadécimaux, du type "#5fc" où chacune des trois composantes R, G et B est représentée par un seul chiffre hexadécimal parmi les caractères "0", "1", etc jusqu’à "F" (on peut aussi utiliser des lettres minuscules pour les lettres hexadécimales). Ce codage permet de représenter \(16^3=4096\) couleurs.

Ainsi, typiquement, on pourra rencontrer des codes comme :

1
2

annonce=Label(height=5, width= 15, text="BONJOUR !", bg='ivory')
cnv=Canvas(root, width=200, height=200, bg="#5fc")

Le codage hexadécimal permet aussi d’utiliser deux chiffres hexadécimaux par couleur ; par exemple, la couleur turquoise sera codée par "#40e0d0". On peut même utiliser trois chiffres hexadécimaux par composante RGB.

On trouvera un très pratique nuancier par nom de couleurs HTML dans le message Colour chart for Tkinter and Tix Using Python sur StackOverFlow qui produit le résultat suivant :

Nuancier Tkinter (cliquer pour voir les noms de couleurs).

Le code Tkinter produisant ce nuancier est disponible dans le message.

A toutes fins utiles, voici une fonction renvoie une chaîne de couleur Tkinter depuis un triplet (r, g, b) :

def rgb_10to16(r,g,b):
    return "#%.02x" %r + "%.02x" %g + "%.02x" %b

# Royal Fuschia
print(rgb_10to16(202, 44, 146))

#ca2c92

Pour convertir depuis ou vers du format HSV, utiliser le module standard colorsys.

Donner un canal alpha à un objet¶

Le canvas de Tkinter n’accepte pas de canal alpha, cf. ce message sur stackoverflow.

Les polices¶

Dans un label, un bouton, ou encore pour écrire du texte dans un canevas, on dispose de l’option font permattant de définir une fonte. Elle admet deux syntaxes :

font="Times 12 bold"
font=("Times", 12, "bold")

La 2e est utile si le nom de la police contient des espaces.

Voici un exemple d’utilisation (parmi d’autres) :

from tkinter import *
root=Tk()

Label(root, text="ABCDEFGHIJKLMNOPQRSTUVWXYZ",
      font=('Arial', 12)).pack(side=TOP, anchor="w")
Label(root, text="ABCDEFGHIJKLMNOPQRSTUVWXYZ",
      font=("Times New roman", 12)).pack(side=TOP, anchor="w")
Label(root, text="ABCDEFGHIJKLMNOPQRSTUVWXYZ",
      font=("Times New roman", 12)).pack(side=TOP, anchor="w")
Label(root, text="ABCDEFGHIJKLMNOPQRSTUVWXYZ",
      font=("Courier", 18)).pack(side=TOP, anchor="w")
Label(root, text="01234567890123456789012345",
      font=("Courier", 18)).pack(side=TOP, anchor="w")

root.mainloop()

qui affiche

Exemples de polices

1
2
3

from tkinter import font, Tk
Tk()
print(*font.families(), sep='\n')

Fontes disponibles sous Ubuntu¶

Ci-dessous, quelques fontes disponibles sous une Ubuntu de base :

Century Schoolbook L
Ubuntu
DejaVu Sans Mono
Dingbats
DejaVu Sans
DejaVu Serif
Courier 10 Pitch

Pour utiliser une autre police :

from tkinter import font as tkfont, Tk, Canvas

root = Tk()
canvas = Canvas(root, width=500, height=500, bg="ivory")
canvas.pack()


my_font=tkfont.Font(family="cmsy10")

text=canvas.create_text(420,100,fill="black", font = my_font,
                        text="Portez ce vieux whisky au juge blond qui fume")
root.mainloop()

Les ancres¶

Les ancres permettent d’ancrer un widget ou du texte au nord, au sud, etc d’une certaine zone.

Il y a 9 ancres possibles :

NW   N    NE
W  CENTER  E
SW   S    SE

Elle s’utilisent en tant qu’option dans différents contextes, pour ajuster :

• un widget avec le gestionnaire pack
• placer du texte dans certains widgets (Canvas, Button, etc)

L’utilisation d’une ancre (anchor) permet d’ajuster un objet dans un contexte, le placer plus haut, plus bas, etc.

Voici un exemple d’utilisation :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

from tkinter import *

root = Tk()

lbl1 = Label(root, text="Rose", font='Arial 30 bold', anchor=NW, width=20)
lbl2 = Label(root, text="begonia", font='Arial 30 bold', width=20)
lbl3 = Label(root, text="Kiwi", font='Arial 30 bold', anchor='se', width=20)
lbl1.pack()
lbl2.pack()
lbl3.pack()
root.mainloop()

qui produit :

Noter aux lignes 5 et 7 les deux syntaxes possibles pour déclarer l’ancre. Si on utilise une chaîne (ligne 7), il faut l’écrire en minuscule. Dans l’autre cas, pas de guillemets, il s’agit de noms que l’on doit importer de Tkinter.

Modifier dynamiquement une variable de contrôle¶

La notion de variable de contrôle n’est absolument pas indispensable quand on débute en Tkinter. On peut écrire de nombreux programmes variés sans avoir besoin d’en utiliser.

Tkinter possède un mécanisme original pour mettre à jour automatiquement des variables définies comme options de certains widgets (comme des boutons radio, des entrées ou des labels).

Dans l’interface ci-dessous,

si on clique sur l’un des boutons + ou -, un compteur représentant des objets est mis-à-jour automatiquement dans un label sous les deux boutons.

Le nombre total d’objets est défini de la manière suivante :

total=IntVar()

Ici, total n’est pas exactement un entier mais ce qu’on appelle une Variable Tkinter, ou encore une variable dynamique ou encore une variable de contrôle. Cette variable stocke un entier que l’on peut récupérer par un appel total.get(). On peut aussi modifier la valeur interne avec la méthode set, par exemple total.set(42).

Le code correspondant de l’application ci-dessus est :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

from tkinter import *

root=Tk()
total=IntVar()

def incr():
    total.set(total.get()+1)

def decr():
    total.set(total.get()-1)


btn_plus=Button(root, height=5, width=5, text="+", command=incr)
btn_plus.pack(padx=5, pady=5)
btn_moins=Button(root, height=5, width=5, text="-", command=decr)
btn_moins.pack(padx=5, pady=5)

msg=Label(root, height=5, width=20, textvariable=total)
msg.pack(padx=5, pady=5)

root.mainloop()

• Ligne 4 : une variable de contrôle de type IntVar est définie. Elle représente une variable entière qui compte un certain nombre d’objets (les objets comptés sont ici imaginaires, c’est juste pour l’exemple). Par défaut, la valeur interne de total est 0.
• Lignes 13-26 : on définit deux boutons + et -. Quand on clique sur le bouton +, on appelle la fonction incr qui se charge d’incrémenter la variable de contrôle total (lignes 6-7). De même pour le bouton - et la fonction decr.
• Lignes 7 et 11: noter que le contenu de la variable de contrôle est capturé avec la méthode get de la variable.
• Lignes 7 et 10 : pour mettre à jour (ou parfois initialiser) une variable de contrôle, on utilise sa méthode set et on lui indique la nouvelle valeur.
• La mise à jour est automatique : le clic sur + par exemple incrémente (ligne 7) la variable de contrôle total avec la méthode set ce qui change automatiquement le contenu du label.

En pratique, une variable IntVar est toujours inialisée à 0. Une autre façon d’initialiser (à 42 par exemple) aurait été d’écrire :

total = Intvar(value=42)

L’intérêt d’une variable de contrôle est de pouvoir mettre à jour automatiquement certains paramètres de différents widgets. On trouvera des détails dans la documentation de effbot.

On reconnait la nécessité d’utiliser des variables de contrôle Tkinter lorsqu’un widget a une option qui s’appelle variable ou textvariable.

Dans de beaucoup de codes, on observe une sur-utilisation des variables Tkinter. Dans de nombreuses situations statiques, elles ne sont pas utiles, comme le confirme Bryan Oakley sur StackOverflow. Elle ne servent vraiment que lorsque des objets variables définis par des événements non contrôlables sont partagées dynamiquement par plusieurs widgets. Je donne un cas typique est dans Exemple d’utilisation de StringVar. Elles sont parfois utiles aussi pour mettre à jour automatiquement un grand nombre d’objets. Certains widgets, pour être convenablement contrôlés, doivent absolument utiliser une variable de contrôle, typiquement le widget entrée, le widget bouton-radio ou le widget case à cocher.

Exemple d’utilisation de StringVar¶

StringVar est une classe propre à Tkinter et qui encapsule une variable option d’un widget et permettant une mise à jour automatique du widget. Voici un exemple avec un widget de type Label :

produit par le code :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

from tkinter import *

root=Tk()
msg=StringVar()
entree=Entry(root, textvariable=msg)
entree.pack( padx=20, pady=10)

lbl=Label(root, textvariable=msg)
lbl.pack(padx=20, pady=10)

root.mainloop()

• Ligne 4 : la variable msg est de type StringVar.
• Lignes 5 et 8 : chaque fois que le champ de l’entrée est modifié, le texte entré est capturé dans msg (ligne 5) et il est automatiquement mis à jour dans le label (ligne 8).

Curseur : placer le code dans des fonctions¶

Ci-dessous, on explique comment placer du code utilisant des widgets dans des fonctions et les conséquences que cela peut avoir.

Reprenons le code de démo du slider :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

from tkinter import *

root = Tk()
cnv = Canvas(root, width=400, height=400)
cnv.pack()

old=None

def rayon(r):
    global old
    r=int(r)
    cnv.delete(old)
    old=cnv.create_oval(200-r,200-r,200+r, 200+r)

curseur = Scale(root, orient = "horizontal",
                command=rayon, from_=0, to=200)
curseur.pack()

root.mainloop()

Le code est hors fonction sauf la fonction rayon qui elle est obligatoire puisque le slider a besoin d’une fonction pour agir. L’avantage d’avoir du code hors fonction est que la fonction rayon a accès à des données comme le canevas que, de toute façon, on ne peut pas transmettre à la fonction rayon car son paramètre r est imposé par Tkinter lui-même. Et pour la même raison, l’identifiant old du rayon du précédent cercle ne peut être transmis à la fonction via un paramètre. Noter que le déclarateur global sert uniquement à la modification de la variable globale old.

Essayons d’écrire le code dans des fonctions :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

from tkinter import *


def rayon(r):
    global old
    r=int(r)
    cnv.delete(old)
    old=cnv.create_oval(200-r,200-r,200+r, 200+r)


def demo():
    root = Tk()
    cnv = Canvas(root, width=400, height=400)
    cnv.pack()
    curseur = Scale(root, orient = "horizontal",
                    command=rayon, from_=0, to=200)
    curseur.pack()

    root.mainloop()

    old=None
demo()

Ce code ne va pas fonctionner quand on déplace le curseur car cnv (ligne 13) est inconnu de la fonction rayon (ligne 5). Par ailleurs, le code ci-dessus ne permet pas de modifier la largeur du canevas (ligne 13) et cette largeur est en outre nécessaire à la fonction rayon pour placer le centre du cercle (ligne 8). Comme la fonction rayon ne peut prendre qu’un seul paramètre qui nous est imposé (la valeur lue sur le curseur), il est obligatoire de passer par une déclaration globale (lignes 5 et 21). Toutefois, on peut la minimiser, de la manière suivante par exemple :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

from tkinter import Tk, Canvas, Scale

def rayon(r):
    cnv, side, old=data
    r=int(r)
    m=side/2
    cnv.delete(old)
    data[2]=cnv.create_oval(m-r,m-r,m+r, m+r)

def demo(side):
    global data
    root = Tk()
    cnv = Canvas(root, width=side, height=side)
    cnv.pack()
    old=None
    curseur = Scale(root, orient = "horizontal",
                    command=rayon, from_=0, to=200)
    curseur.pack()
    data=[cnv, side, old]
    root.mainloop()

side=400
demo(side)

Lorsque demo est lancée, une variable globale data est créée. C’est une liste (cf. ligne 19) et on y place toutes les données qui seront nécessaires à la fonction rayon et qu’on ne peut lui donner en paramètres.

Lorsqu’un nouveau cercle est créé, ne pas oublier d’enregistrer son id dans data, à l’indice 2, cf. lignes 8 et 19.

Noter (ligne 1) qu’a juste été importé le strict nécessaire de Tkinter.

Au total, le code ainsi obtenu est beaucoup plus lisible que le code initial.

1
2
3
4
5
6
7
8

def make_move(data):
    cnv, side, old=data
    def rayon(r):
        r=int(r)
        m=side/2
        cnv.delete(data[2])
        data[2]=cnv.create_oval(m-r,m-r,m+r, m+r)
    return rayon

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

from tkinter import Tk, Canvas, Scale

def make_move(data):
    cnv, side, old=data
    def rayon(r):
        r=int(r)
        m=side/2
        cnv.delete(data[2])
        data[2]=cnv.create_oval(m-r,m-r,m+r, m+r)
    return rayon

def demo(side):
    root = Tk()
    cnv = Canvas(root, width=side, height=side)
    cnv.pack()
    data=[cnv, side, None]
    rayon=make_move(data)
    curseur = Scale(root, orient = "horizontal",
                    command=rayon, from_=0, to=200)
    curseur.pack()
    root.mainloop()

def main():
    side=400
    demo(side)

main()

Curseur : placer le code dans une classe¶

Ci-dessous, on va montrer l’avantage à utiliser des classes pour gérer une interface graphique Tkinter. Reprenons pour cela le code découpé en fonctions de la démo du slider :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

from tkinter import Tk, Canvas, Scale

def rayon(r):
    cnv, side, old=data
    r=int(r)
    m=side/2
    cnv.delete(old)
    data[2]=cnv.create_oval(m-r,m-r,m+r, m+r)

def demo(side):
    global data
    root = Tk()
    cnv = Canvas(root, width=side, height=side)
    cnv.pack()
    old=None
    curseur = Scale(root, orient = "horizontal",
                    command=rayon, from_=0, to=200)
    curseur.pack()
    data=[cnv, side, old]
    root.mainloop()

side=400
demo(side)

Une façon d’éviter les variables globales (ligne 11) et de coder de manière plus répandue est d’utiliser une classe (ligne 3 ci-dessous) : ainsi, chaque méthode de la classe aura accès aux attributs de la classe. Ainsi, si on transforme la fonction rayon initiale en une méthode, on n’aura plus besoin de variable globale.

D’où le code suivant :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

from tkinter import Tk, Canvas, Scale

class ScaleDemo:

    def __init__(self, side):
        self.side=side
        self.m=side/2
        root = Tk()
        self.cnv = Canvas(root, width=side, height=side)
        self.cnv.pack()
        self.old=None
        curseur = Scale(root, orient = "horizontal",
                        command=self.rayon, from_=0, to=200)
        curseur.pack()
        root.mainloop()

    def rayon(self, r):
        r=int(r)
        m=self.m
        self.cnv.delete(self.old)
        self.old=self.cnv.create_oval(m-r,m-r,m+r, m+r)

side=400
ScaleDemo(side)

Noter que la mainloop reste dans la fonction __init__ lancée par l’appel ScaleDemo(side).

Le curseur peut appeler la fonction rayon (lignes 17-21) en appelant la méthode rayon qui est référencée en utilisant self (ligne 13). Quand le curseur est modifié par l’utilisateur, Tkinter lance un appel rayon(r) et comme rayon est une méthode de ScaleDemo, l’interpréteur Python rajoute automatiquement comme premier argument à rayon une instance de la classe (self). Cela explique pourquoi r est le 2e paramètre dans la définition ligne 17.

Par ailleurs, les variables globales ont disparu. Par exemple, à l’initialisation, le canevas est déclaré comme attribut d’instance (avec self ligne 9) si bien que lorsque la méthode rayon est appelée, elle a accès, via self.cnv au canevas.

Noter qu’on n’a pas eu besoin de donner au curseur le statut d’attribut d’instance (puisque rayon n’en a pas explicitement besoin).

La ligne 19 est juste un raccourci pour éviter d’écrire 4 fois self.m ligne 21.

Installer Pygame sous Windows¶

Pygame est une bibliothèque de jeux. Dans ce qui suit, on va expliquer comment installer Pygame sous Windows 10 et sous Linux.

Installation sous Windows 10

Je suppose que vous avez installé Python depuis le site python.org. Probablement que ce qui suit ne s’applique pas si vous avez installé Python via Anaconda auquel cas il faut effectuer ce qui va suivre depuis la ligne de commande propre à Anaconda. Je suppose aussi que vous n’utilisez pas Python sous un environnement virtuel (virtualenv).

Le principe d’installation est assez simple : on tape une ligne de commande dans un shell et cela installe automatiquement Pygame.

Ce qui suit suppose que vous travaillez avec une version 3 de Python.

import pygame

pip

'pip' n'est pas reconnu en tant que commande interne
ou externe, un programme exécutable ou un fichier de commandes.

pip install pygame

Successfully installed pygame-1.9.3

import pygame

pygame.version.ver

'1.9.3'

Installer Pygame sous Linux¶

Il s’installe aidément en utilisant l’installeur pip3 :

pip3 install pygame

ce qui affiche

$ pip3 install pygame
Collecting pygame
  Downloading https://files.pythonhosted.org/
  packages/b3/5e/fb7c85304ad1fd52008fd25fce97
  a7f59e6147ae97378afc86cf0f5d9146/
  pygame-1.9.4-cp36-cp36m-manylinux1_x86_64.whl
  (12.1MB)
    100% |████████████████████████████████| 12.1MB 155kB/s
Installing collected packages: pygame
Successfully installed pygame-1.9.4

Audio sous Tkinter avec Pygame¶

Nativement, Tkinter ne prend pas en charge la diffusion de flux audio (fichiers mp3, wav, etc). Il faut faire appel à une bibliothèque tierce pour réaliser l’incorporation d’un flux audio dans un programme Tkinter.

La bibliothèque de jeux Pygame prend en charge l’audio que ce soit sous Windows, Linux ou OsX. On peut donc l’associer à Tkinter pour faire émettre du son. C’est ce qu’on va faire ci-dessous. Toutefois, d’autres choix seraient possibles comme Pyglet.

Pygame prend en charge les fichiers de format wav. Pour l’utilisation du format mp3, voir tout à la fin de cette unité consacrée à l’audio avec Pygame sous Tkinter. Le programme audio.py ci-dessous dépend d’un fichier clap.wav placé à côté du fichier audio.py. Le fichier wav est téléchargeable ICI. C’est un programme minimal qui associe Tkinter et un flux audio géré par Pygame :

audio.py

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

from tkinter import *
import pygame

pygame.mixer.init()

mon_audio=pygame.mixer.Sound("clap.wav")

def lancer():
    mon_audio.play(-1)

def couper():
    mon_audio.stop()

fen = Tk()

Button(fen,text="Son",command=lancer, width=40).pack(pady=20)
Button(fen,text="Couper",command=couper, width=40).pack(pady=20)

fen.mainloop()