28 - Projet avec tkinter

1 - Création de l'application graphique

⇩ ⇧ ⤊

RAPPEL

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

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.

La grande différence par rapport aux codes précédents sur Tkinter ? Nous allons faire comme lors de l'activité sur le pendu : 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 donnees qui contient les données encodant les cases du plateau, sous forme d'un simple entier
• d'un tableau complement contenant des informations complémentaires diverses sur le jeu.

Que fait le programme ?

Ligne 3 : importation du module sous l'alias tk

Lignes 14-23 : 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 31-32 dans le programme principal : on commence par l'utilisation des docstrings en tant que jeu de tests :

Lignes 36-47 : créations de 2 variables globales.

On commence avec un tableau complement contenant des données générales sur l'état du jeu et on rajoute une matrice donnees qui encode le contenu des cases.

• complement est un tableau ayant deux éléments :
• Indice 0 : le numéro du joueur actif.
• Indice 1 : le nombre de coups joués.
• donnees est une matrice, un tableau de tableaux, qui va contenir les données liées aux cases du jeu. Dans la version présentée ici, on y stocke juste une valeur par case (par exemple 0 pour non sélectionnée ou pour dire mur, 1 pour sélectionnée par le joueur 1 ou pour dire couloir...), mais on pourrait y mettre un tuple, un string, un autre tableau... On accède au contenu d'une case précise à l'aide de sa ligne et sa colonne :
  donnees[ligne][colonne].

S'agissant de deux tableaux (qui sont des structures de données muables en Python), nous pourrons ainsi modifier le contenu depuis les fonctions simplement en leur transférant l'identifiant-mémoire.

Lignes 50-51 : création de la fenêtre graphique.

Ligne 50 : Création d'un objet de classe Tk et stockage de sa référence dans fenetre.

Ligne 51 : Activation de la procédure configurer_fenetre qui reçoit ici l'argument fenetre et le place dans son paramètre fe.

• Ligne 21 : geometry permet de fournir les dimensions en pixels.
• Ligne 22 : title permet de faire de même pour le titre de la fenêtre
• Ligne 23 : configure permet de modifier la couleur de fond (bg) à qui on affecte la couleur "black"

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 notre programme, x correspondra donc à l'indice de la colonne (il commence à 0) et y correspondra à l'indice de la ligne (il commence à 0 également).

Création de la matrice de stockage des Labels

Ligne 97, on crée la nouvelle matrice nommée widgets qui contient les références des différents widgets colorés. Cette création utilise la fonction creer_cases. Voyons comment elle fonctionne.

L'appel à la fonction se fait ainsi :

Le début du code de la fonction est :

Ligne 97 + Ligne 25 : le paramètre fe reçoit donc la réference de la fenêtre fenetre et le paramètre d reçoit la matrice donnees.

Lignes 33 et 34 : on récupère le nombre de lignes nbl et le nombre de colonnes nbc de la matrice donnees (voir Q02 et Q03).

Ligne 37 : cette dernière ligne permet de voir qu'on crée une matrice puisqu'on crée un tableau de 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 40-41 : 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 ligne_y et 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.

Bon, en même temps, 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 47 :

Nous avons donc création d'un objet widget de class 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).

Voyons maintenant comment on parvient à placer nos widgets colorés. Pour l'instant, le widget-case est créé et mémorisé dans la matrice w mais tant qu'on n'a pas utilisé une méthode de placement, le widget ne s'affichera pas à l'écran.

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

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 donnees : son numéro de case, son numéro de ligne et de colonne :

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 suffira de taper ceci : case.ligne. Pratique, non ?

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 60 : on teste si notre case se situe sur la colonne d'indice 1
• Ligne 61 : si c'est le cas, on utilise la méthode configure qui modifie le fond coloré (bg) en rouge vif (red).
• Ligne 62 : sinon, on teste sur notre case se situe sur la ligne d'indice 2
• Ligne 63 : 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): '''Procédure gérant 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, d): '''Renvoie une matrice ayant les mêmes dimensions que dc et contenant des widgets Labels :: param fe(tkinter.Tk) :: la référence d'une fenêtre de classe Tk :: param d(list(list)) :: la matrice contenant les données des cases :: return (list(list)) :: matrice ayant les dimensions d'entrée, contenant des tkinter.Label ''' nbl = len(d) # Nombre de lignes nbc = len(d[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.