33 - Projet avec tkinter

1 - Création de l'application graphique

⇩ ⇧ ⤊

RAPPEL

Contrairement au système d'axes Oxy classique en mathématiques, dans le système d'axes de Tkinter, l'axe y est orienté vers le bas et le point d'origine (0,0) correspond au point en haut à gauche.

Nous allons voir comment réaliser une fenêtre graphique dans laquelle nous allons placer nos éléments graphiques. Par exemple ceci :

Nous prendrons comme support de travail le plateau de jeu que nous avions modélisé dans l'activité Matrice de la partie Données.

Pour travailler proprement,nous allons clairement séparer :

1. la partie "Interface" : les variables et les fonctions qui dépendent de l'Interface Homme Machine (IHM) (l'interface graphique Tkinter ici)
2. la partie "Données" : les variables et les fonctions qui contiennent les données brutes sur le plateau de jeu (tout ce qui n'aura pas à être modifié si on décide de passer de l'interface Tkinter à l'interface Qt ou autre par exemple)

Nous allons construire peu à peu une interface de ce type dans cette activité. L'activité suivante consiste à sa "transformation" de façon à en faire un véritable jeu. Commençons par la création de :

• la fenêtre servant d'écran principal fenetre
• la matrice qui contient les données encodant les cases du plateau (sous forme d'un simple entier)
• d'un dictionnaire infos contenant des informations complémentaires diverses sur le jeu (quel joueur, l'état actuel du jeu...).

Que fait le programme ?

Ligne 3 : importation du module sous l'alias tk

Lignes 14-33 : passons pour l'instant sur la partie déclaration des fonctions. Nous verrons ce qu'elles font lorsque nous aurons besoin de le savoir.

Lignes 41-32 dans le programme principal : on commence par l'utilisation des docstrings en tant que jeu de tests :

Lignes 45-58 : créations de 2 variables globales.

• Un dictionnaire infos contenant des données générales sur l'état du jeu
• La clé "joueur" permet d'accéder au joueur actif : 1, 2 ou -1 si aucun
• La clé "état" permet d'accéder à l'état du jeu : 0 pour inactif, 1 pour actif et 2 pour fini par exemple.
• Une matrice donnees qui encode le contenu des cases du plateau de jeu. Dans la version présentée ici :
• 0 veut dire que la case contient une case vide
• 1 veut dire que la case contient un mur
• d'autres valeurs pour l'aventurier, le dragon...

J'utilise un integer ici mais, dans votre projet, vous pourrez y mettre un tuple, un string, un autre tableau...

Tableaux et dictionnaires étant muables dans Python , nous pourrons modifier le contenu de ces variables depuis les fonctions en leur transférant la référence-mémoire.

Lignes 61 : création de la fenêtre graphique.

Pour comprendre comment cela fonctionne, il faut bien entendu aller voir la déclaration de la fonction creer_fenetre(), qui utilise d'ailleurs à l'interne la fonction configurer_fenetre().

• Ligne 20 : Création d'un objet de classe Tk et stockage de sa référence dans la variable locale fe.
• Ligne 21 : Appel à configurer_fenetre qui reçoit ici l'argument fe et le place dans son paramètre qui se nomme également fe.
• Ligne 31 : geometry permet de fournir les dimensions en pixels.
• Ligne 32 : title permet de faire de même pour le titre de la fenêtre
• Ligne 33 : configure permet de modifier la couleur de fond (bg) à qui on affecte la couleur "black"
• Ligne 22 : On renvoie la référence de la nouvelle fenêtre stockée dans fe.

A partir de là, on peut lancer l'interface graphique avec cette dernière partie :

Activation de la surveillance en boucle sur l'interface graphique jusqu'à fermeture

2 - Les carrés colorés

⇩ ⇧ ⤊

Voyons maintenant comment créer des carrés colorés sur cette interface. Ici :

• le carré numéro 0 est aux coordonnées x = 0 et y = 0
• le carré numéro 1 est aux coordonnées x = 1 et y = 0
• le carré numéro 5 est aux coordonnées x = 1 et y = 1

Dans ce programme,

• x correspondra donc à l'indice de la colonne (0 est la colonne de gauche)
• y correspondra à l'indice de la ligne (0 est la ligne du haut).

Création de la matrice de stockage des Labels

Ligne 107, on crée (à l'aide de la fonction creer_cases()) la nouvelle matrice nommée widgets qui contient les différents widgets colorés.

L'appel à la fonction se fait ainsi :

On envoie donc les argmuments fenetre et matrice.

Ligne 107 puis 35 : le paramètre fe reçoit donc fenetre et le paramètre m reçoit matrice.

Lignes 43 et 44 : on récupère le nombre de lignes nbl et le nombre de colonnes nbc de la matrice m.

Ligne 47 : on crée une matrice puisqu'on crée un tableau contenant des tableaux.

Création des cases et remplissage de cases

Nous avons donc une belle matrice vide nommée w. Voyons comment nous parvenons à la remplir.

Lignes 50-51 : double boucle permettant d'accéder aux coordonnées des cases de la matrice dans l'ordre habituel de lecture : de gauche à droite et avec un passage à la ligne suivante :

On va donc boucler plusieurs fois et obtenir la suite de valeurs suivantes pour la ligne y et la colonne x :

Si on prend l'exemple d'une petite matrice 3x3 avec des indices valant donc 0, 1 ou 2, les indices successifs pris par les variables de boucle y et x sont donc :
(y=0, x=0) puis (y=0, x=1) puis (y=0, x=2) puis
(y=1, x=0) puis (y=1, x=1) puis (y=1, x=2) puis
(y=2, x=0) puis (y=2, x=1) puis (y=2, x=2) et c'est fini.

La question n'était pas difficile puisque les cases sont numérotées de base dans l'ordre de création !

Reprenons la création du Label en ligne 57 :

On place donc dans w[y][x] la référence d'un widget-Label. On lui transmet différents paramètres nommés, dont on peut trouver la description dans la documentation de Tkinter :

• Un paramètre obligatoire : la réference d'une fenêtre Tkinter qui contiendra ce Label : fe ici
• text, le texte qu'on veut voir s'afficher dans le widget Label
• fg pour foreground, fond du premier plan, le texte.
• bg pour background, fond coloré.
• width pour width, la largeur (en largeur de caractères puisqu'il s'agit d'un texte)
• height pour height, la hauteur (en hauteur de caractères puisqu'il s'agit d'un texte).

Les widgets sont maintenant créés et stockés dans la matrice w mais si nous arrêtions ici, ils n'apparaitraient pas à l'écran : il faut encore dire précisement où les placer dans l'interface.

Placement des widgets

Voici donc pourquoi nous calculons leurs coordonnées en pixels px et py en fonction des positions théoriques x et y et que nous faisons appel à la méthode place() pour placer les widgets.

Si les écartements entre cases ne vous conviennent pas, il suffit de modifier les valeurs.

Rajout de quelques informations

On rajoute ensuite quelques informations liées à la position de la case qui vont être assez utiles faire le lien entre la matrice widgets et la matrice matrice : son numéro de case, son numéro de ligne et de colonne. L'explication profonde du mécanisme n'arrivera qu'en Terminale. Mais c'est facile à lire :

Ainsi si on veut récupérer le numéro de ligne d'un Label sur lequel on vient de cliquer et dont la référence est stockée

• dans case : il suffit de taper case.ligne.
• dans w[y][x] : il suffit de taper w[y][x].ligne.

Pratique, non ?

Quelques modifications optionnelles supplémentaires

On trouve enfin une modification des caractéristiques de la case. Nous aurions pu les placer directement lors de la création : elles ne servent qu'à vous montrer comment modifier avec configure() les attributs d'un Label qui existe déjà.

Comme nous l'avons vu, les carrés devraient être gris. Or, ils ne sont pas tous gris. Pourquoi ?

• Ligne 70 : on teste si notre case se situe sur la colonne d'indice 1
• Ligne 71 : si c'est le cas, on utilise la méthode configure() qui modifie le fond coloré (bg) en rouge vif (red).
• Ligne 72 : sinon, on teste sur notre case se situe sur la ligne d'indice 2
• Ligne 73 : si c'est le cas, on utilise la méthode configure() pour modifier le fond coloré en rouge foncé.

Et une fois que nous sommes sortis des deux boucles FOR et avons stocké tous les labels dans la nouvelle matrice, il faut la renvoyer puisqu'il s'agit d'une variable locale : si on ne la renvoie pas, elle disparaitrait dès qu'on sort de cette fonction.

3 - Partie Données vers partie Interface graphique

⇩ ⇧ ⤊

Pour l'instant l'affichage n'a aucun rapport avec ce qu'on a placé dans la matrice donnees. Nous allons ici nous intéresser à la liaison DONNEES vers INTERFACE : on veut que les données stockées dans la matrice donnees soient visibles à l'écran. Il faudrait ainsi que les 0, 1, 3 et 8 stockés dans donnees soient transformés en effet visible à l'écran. Voici le début du nouveau code.

Nous voudrions maintenant créer la fonction modifier_apparence_cases. Cette fonction devra

1. regarder chaque valeur contenue dans donnees et
2. modifier en conséquence l'apparence du widget correspondant contenu dans widgets.

Comme il s'agit de modifier l'interface à partri des données, il s'agit bien d'une fonction à placer dans la partie Interface. Nous allons partir du principe "une tâche - une fonction":

• modifier_apparence_case se charge de modifier l'apparence d'un widget en fonction d'une valeur de contenu qu'on lui transmet (0 ou MUR par exemple).
• modifier_apparence_cases se charge de le faire sur toutes les cases, en utilisant modifier_apparence_case.

12° Mettre ce code en mémoire pour vérifier qu'il fonctionne sur votre système.

Vous devriez obtenir ceci :

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 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149

# ----- 1 - IMPORTATIONS ------------------------------------ import tkinter as tk # ----- 2 - CONSTANTES -------------------------------------- # Codification des contenus COULOIR = 0 MUR = 1 AVENTURIER = 3 DRAGON = 8 # texte à afficher - couleur - couleur au survol APPARENCE = { COULOIR: ('', '#EEEEEE', '#DDDDDD'), MUR: ('', 'black', '#111111'), AVENTURIER: ('A', '#8888FF', '#AAAAFF'), DRAGON: ('D', '#FF5555', '#FF7777') } # ----- 3 - FONCTIONS liées à la partie DONNEES ------------- # ----- 4 - FONCTIONS liées à la partie INTERFACE ----------- def configurer_fenetre(fe): """Modifie les paramètres de la fenêtre reçue en paramètre :: param fe(tkinter.Tk) :: la référence d'une fenêtre de classe Tk :: return (None) :: "procédure" Python """ fe.geometry("1200x600") fe.title("Mon super jeu") fe.configure(bg="black") def creer_cases(fe, m): """Renvoie une matrice ayant les mêmes dimensions que m et contenant des widgets-Labels :: param fe(tkinter.Tk) :: la référence d'une fenêtre de classe Tk :: param m(list(list)) :: la matrice contenant les données des cases :: return (list(list)) :: une matrice ayant les mêmes dimensions que m mais contenant des tkinter.Label """ nbl = len(m) # Nombre de lignes nbc = len(m[0]) # Nombre de lignes # On crée une matrice w qui servira à contenir les widgets représentant les cases w = [ [None for x in range(nbc)] for y in range(nbl) ] # On crée les Labels un par un et on les stocke dans la matrice for y in range(nbl): for x in range(nbc): # Calcul du numéro de la case numero = x + y * nbc # Création et stockage d'un Label w[y][x] = tk.Label(fe, text=numero, fg="white", bg='grey', width=10, height=5) # Affichage et placement du widget contenu dans w[y][x] px = 20 + x * 90 # position px en pixels py = 20 + y * 85 # position py en pixels w[y][x].place(x=px, y=py) # Option : rajout d'attributs pour les récupérer facilement w[y][x].numero = numero w[y][x].colonne = x w[y][x].ligne = y # Option : modification du widget (juste pour montrer qu'on peut !!) #if x == 1 : # nous sommes sur la 2e colonne (indice 1) # w[y][x].configure(bg='red') #elif y == 2 : # nous sommes sur la 3e ligne (indice 2) # w[y][x].configure(bg='#AA0000') # On renvoie la matrice return w def modifier_apparence_case(case, v): """Modifie l'apparence du widget en fonction de la valeur v :: param case (tkinter.Label) :: la référence du widget-case à modifier :: param v (int) :: le code du contenu à afficher dans la case :: return (None) :: "procédure" Python .. effet de bord :: modifie le widget case """ if v in APPARENCE.keys(): case.configure(text=APPARENCE[v][0]) case.configure(bg=APPARENCE[v][1]) def modifier_apparence_cases(w, d): """Modifie les widgets pour refléter les données du plateau de jeu :: param w (list(list)) :: matrice contenant les références des widgets :: param d (list(list)) :: matrice contenant les données des cases :: return (None) :: "procédure" Python .. effet de bord :: modifie la matrice w """ # On récupére les dimensions de la matrice d nbl = len(d) # Nombre de lignes nbc = len(d[0]) # Nombre de lignes # On lit les données une par une et on modifie les widgets modifier_apparence_case(w[5][0], AVENTURIER) modifier_apparence_case(w[0][0], d[0][0]) # ----- 5 - PROGRAMME PRINCIPAL ------------------------------ if __name__ == '__main__': # --- Activation des tests sur les fonctions du module import doctest doctest.testmod() # --- Données du jeu # informations diverses : complement = [-1, 0] # Indice 0 contiendra le joueur actif : -1 (aucun), 1 , 2 ... # matrice encodant les données du plateau, C par défaut C = COULOIR M = MUR A = AVENTURIER D = DRAGON donnees = [ [M, C, C, M, M, C], [M, C, D, M, M, C], [M, C, C, C, D, C], [A, C, C, C, M, M], [M, C, M, C, M, C], [M, C, M, C, C, C] ] # --- Création de la fenêtre principale fenetre = tk.Tk() configurer_fenetre(fenetre) # --- Création des widgets représentant graphiquement les cases widgets = creer_cases(fenetre, donnees) modifier_apparence_cases(widgets, donnees) # --- Activation de la surveillance sur l'application graphique fenetre.mainloop()

15° Modifier maintenant la fonction modifier_apparence_cases pour qu'elle fasse ce qu'on lui demande en réalité : lire la matrice d case par case et imposer la bonne apparence aux widgets stockés dans la matrice w.

Il faudra bien entendu utiliser deux boucles imbriquées. Vous noterez que j'ai déjà récupéré le nombre de lignes et le nombre de colonnes.

Résultat attendu de ce type :

4 - Evénements

⇩ ⇧ ⤊

Tout d'abord : qu'est-ce qu'un événement pour l'interface ? Il s'agit d'une modification de l'environnement extérieur : une touche de clavier sur laquelle on appuie, le déplacement de la souris, l'appui sur une touche de la souris...

Passons à la pratique : nous allons rajouter une partie à notre programme de test : après la création de widgets, il est temps de surveiller quelques événements sur ceux-ci.

Nous voulons maintenant rendre la couleur des widgets plus claire lorsqu'on les survole :

Imaginons maintenant qu'on ne veuille pas animer les murs au survol. Les murs ne bougeront pas dans notre jeu. On peut donc juste récupérer la valeur du fond coloré de la case et s'il correspond à celui d'un mur, on ne fait rien. Pour cela, il faut utiliser la méthode cget.

5 - Très Mini projet décrit : déplacer l'aventurier

⇩ ⇧ ⤊

Avant de commencer, réfléchissons à la manière de procéder lorsque réalise un projet basé sur une IHM (Interface Homme Machine). Vous allez avoir besoin d'appliquer cette méthode de réflexion pendant votre projet.

Un bon moyen de faire un projet en équipe est de :

1. En groupe : réflechir avec un texte écrit en français qui décrit le déroulé des actions. On y trouve le nom des fonctions et ce qu'elles doivent faire
2. En groupe : créer le schéma du projet pour vérifier qu'il est bien conçu (la partie Interface n'agit que sur l'Interface et la partie Données n'agit que sur les Données). Les interactions entre les deux catégories sont encapsulées dans certaines fonctions bien ciblées.
3. En groupe : Réaliser les prototypages
4. Individuel : Travailler sur sa fonction, créer sa documentation et des tests si possible.

Un exemple - Parvenir à déplacer l'aventurier :

On commence par réflechir aux fonctions qu'on désire, à ce qu'elle doive recevoir et à ce qu'elle doit faire ou répondre.

1. Partie Données : on veut une fonction coordonnees_aventurier qui renvoie les x et y de la case-donnée contenant l'aventurier dans donnees.

1 2 3 4 5 6 7 8

def coordonnees_aventurier(d): """Renvoie un tuple (x,y) contenant les coordonnes de l'aventurier :: param d(list(list)) :: la matrice contenant les données des cases :: return (tuple(int,int)) :: (x,y) """ return (0,0) # Fausse réponse qui permet néanmoins de travailler

2. Partie Données : on veut une fonction est_case_proche qui renvoie True si les coordonnées-paramètres x et y correspondent à un élément adjacent verticalement ou horizontalement à la case-donnée cible (celle de l'aventurier ici).

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

def est_case_proche(d, x, y, xA, yA): """Renvoie True si d[y][x] est proche de la case cible d[yA][xA] :: param d(list(list)) :: la matrice contenant les données des cases :: param x(int) :: l'indice de la colonne de la case étudiée :: param y(int) :: l'indice de la ligne de la case étudiée :: param xA(int) :: l'indice de la colonne de la case cible :: param yA(int) :: l'indice de la ligne de la case cible :: return (bool) :: True si proche, False sinon """ return True # Fausse réponse qui permet de travailler en attendant

3. Partie Données : on veut une fonction intervertir qui intervertit les contenus de deux éléments de donnees dont on fournit les quatre coordonnées x1, y1, x2 et y2.

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

def intervertir(d, x1, y1, x2, y2): """Intervertit les contenus de d[y1][x1] et d[y2][x2] :: param d(list(list)) :: la matrice contenant les données des cases :: param x1(int) :: l'indice de la colonne de la 1er case :: param y1(int) :: l'indice de la ligne de la 1er case :: param x2(int) :: l'indice de la colonne de la 2e case :: param y2(int) :: l'indice de la ligne de la 2e case :: return (None) :: "Procédure" python .. effet de bord :: Modifie la matrice d """ pass

4. Partie Données : on crée une fonction tentative_deplacement qui reçoit des coordonnées x et y, qui vérifie si elles sont bien proches de l'aventurer et qui intervertit les éléments dans ce cas. Elle renvoie True si on fait une interversion.

1 2 3 4 5 6 7 8 9 10 11

def tentative_deplacement(d, x, y): """Tente de déplacer l'aventurier et renvoie True si cela fonctionne :: param d(list(list)) :: la matrice contenant les données des cases :: param x(int) :: l'indice de la colonne de la case étudiée :: param y(int) :: l'indice de la ligne de la case étudiée :: return (bool) :: True si déplacement possible et effectué .. effet de bord :: Modifie la matrice d si déplacement possible """ return True # Fausse réponse qui permet de travailler en attendant

5. Partie Interface : on crée une fonction gerer_clic_case liée aux clics sur l'une des cases et qui
   • récupère la référence de la case-widget, sa ligne et sa colonne
   • envoie cette ligne et cette colonne à la fonction tentative_deplacement appartenant à la partie Données.
   • si tentative_deplacement répond True, on actualise l'affichage de l'interface avec la fonction modifier_apparence_cases (déja codée)

   1 2 3 4 5 6 7 8 9 10 11

   def gerer_clic_case(e, w, d): """Tente de faire bouge l'aventurier sur le plateau :: param e (tkinter.Event) :: contient les informations sur l'événement :: param w (list(list)) :: matrice contenant les références des widgets :: param d (list(list)) :: matrice contenant les données des cases :: return (None) :: "procédure" Python .. effet de bord :: modifie la matrice w et la matrice d """ modifier_apparence_cases(w, d) # en attendant mieux

Si on représente la répartition entre partie Interface et partie Données, cela donne :

Pour travailler en équipe, vous allez donc devoir avoir au moins le prototype des fonctions (avec la documentation précises des préconditions et postconditions).

Chaque personne du groupe peut ensuite commencer à réfléchir sur sa propre fonction.

Voici le code final du très mini-projet Déplacement Aventurier. Vous pouvez le lancer, le tester et voir comment je propose de résoudre les problèmes. Bien entendu, il a d'autres manières de coder une même fonction.