ISN TP : Introduction à TkinterOn pourra se référer à l’excellent cours de Fabrice Sincère, très complet avec de nombreux exemples de widgets et de projets classiques (Tic Tac Toe, jeu de Pong, Tetris…) :

http://fsincere.free.fr/isn/python/cours_python_tkinter.php

Et une doc bien faite (en français) : http://tkinter.fdex.eu/index.html

Le module Tkinter permet de créer des interfaces graphiques pour interagir avec l’utilisateur de manière conviviale. Ces fenêtres comportent souvent ce qu’on appelle des widgets (contraction entre windows et gadget). Par exemple : un bouton sur lequel cliquer, une case à cocher, un curseur à déplacer…

Ce TP sera l’occasion d’aborder la notion de programmation orientée objet, à travers l’utilisation de classes. Ce type de programmation, très puissant, permet de structurer des logiciels complexes en les organisant comme des ensembles d’objets qui interagissent entre eux et avec le monde extérieur.

1. Quelques notions sur les objetsa. Définition

Les objets sont des entités appartenant à une classe et pouvant être construits indépendamment les uns des autres (par des programmeurs différents) sans qu’il y ait de risque d’interférence, grâce au concept d’encapsulation. Les fonctionnalités internes de l’objet et les variables qu’il utilise sont en quelque sorte « enfermés » dans l’objet, qui apparaît de l’extérieur comme une « boîte noire », dont on connaît seulement l’interface et les potentialités.

Exemple : imaginons un exemple concret, on définit la classe Voiture.

La classe Voiture permet de créer par instanciation des objets appelés instances de la classe Voiture (comme un moule crée des objets).

Tous les objets créés vont hériter des mêmes caractéristiques (par exemple toutes les voitures ont des phares, 4 roues, un moteur, un volant, etc…).

Cependant, malgré ces points communs, il est possible de donner des attributs différents : la couleur, une peinture métallisée ou non, la puissance du moteur, des antibrouillards ou non.

attributs

méthodes

OBJET

Interactions avecle monde extérieur

Interactions avecle monde extérieur

Pour les objets de la classe Voiture, on peut appliquer des méthodes qui lui seront propres : faire la vidange, changer les freins, changer la courroie, etc ….

b. Les objets en PythonUne classe se définit simplement avec le mot-clef class, suivi de son nom (avec une majuscule) et des deux points. Une première fonction (on dit plutôt méthode pour les objets) permet de lui définir automatiquement des attributs par défaut : c’est un constructeur. Cette méthode s’appelle obligatoirement __init__. Comme toutes les méthodes définies pour un objet, son premier argument est le mot réservé self, qui désigne toute future instance créée à partir de la classe.

Exemple :

On peut également ajouter d’autres méthodes à la classe. Ici, on définit une méthode affiche_heure :

Test de la classe :

Attributs : Couleur Puissance …

Méthodes : Faire la vidange Changer freins Démarrer… Interactions avec

le monde extérieur

Interactions avecle monde extérieur

OBJET VOITURE

Un mécanisme fondamental est que l’on peut créer une classe « dérivée » d’un classe parente. La classe dérivée hérite alors de tous les attributs et méthodes de sa parente (et bien sûr, on peut lui en ajouter d’autres qui lui sont propres).

c. Espace de noms des classes et des instancesOn sait déjà que les variables définies à l’intérieur d’une fonction sont des variables locales, inaccessibles à l’extérieur de la fonction. Ce qui permet d’utiliser les mêmes noms de variables dans différentes parties d’un programme sans risque d’interférences. En d’autres termes, chaque fonction possède son propre espace de noms, indépendant de l’espace de noms principal.

(Les instructions se trouvant à l’intérieur de la fonction peuvent accéder aux variables définies au niveau principal, mais en lecture seulement : elles ne peuvent pas les modifier, à moins de faire appel à l’instruction « global ».)

De même, chaque classe possède son propre espace de noms. Les variables qui en font partie sont appelées attributs de classe

Chaque objet instancié à partir d’une classe possède lui aussi son propre espace de noms, composé de variables appelées attributs d’instance.

Les classes peuvent utiliser (mais pas modifier) les variables définies au niveau principal. De même, les objets instanciés peuvent utiliser (mais pas modifier) les attributs de classe et aussi les variables définies au niveau principal.

Lorsqu’une classe dérive d’une autre, on peut donc parfaitement créer pour elle une méthode portant le même nom qu’une méthode de sa classe parente, mais faisant néanmoins autre chose. Les deux noms ne se « gêneront pas » mutuellement, puisqu’ils « vivent » dans deux espaces de noms séparés. C’est ce que l’on appelle le polymorphisme.

Exemple :

Dans l’exemple ci-dessus, la classe « Ion » dérive de la classe parente « Atome » (c’est normal ! Un ion est un atome qui a gagné ou perdu des électrons…). Elle hérite donc de tous ses attributs et méthodes, en particulier de la méthode « affiche ». La méthode « affiche » de la classe parente est utilisée pour construire une nouvelle méthode affiche, propre à la classe « fille » Ion. On dit que cette méthode a été surchargée.

REMARQUE : le symbole %s est utilisé ici pour le formatage. C’est un marqueur de conversion fort pratique, acceptant n’importe quel type de données et les insérant dans la chaîne de caractères à afficher. Ici, Python remplacera les trois symboles %s par les valeurs respectives des variables self.np, self.ne et self.nn.

2. Premiers pas avec Tkinter

a. Fenêtre et boutonOuvrir avec IDLE le fichier essai_TK1.py qui se trouve dans le répertoire R:/TS/ISN/TP_Tkinter

Exécuter le programme

Lire les commentaires et analyser le programme

Quelle syntaxe utilise-t-on pour activer une méthode meth() d’un objet obj ? …………………………….

Faire un « Enregistrer sous » du fichier dans vos documents (en créant au préalable un dossier

« Tkinter » pour que vos fichiers soient bien organisés !), et lui donner le nom essai_TK1_v1.py.

Modifier alors le programme afin :

o De modifier la couleur du texte (en bleu par exemple)

o D’afficher un autre texte

o De créer un second bouton intitulé « Partir » ayant le même effet que le premier.

Explications pour la ligne fen1.mainloop()

Les programmes que nous avons écrits jusqu’à présent ressemblaient à ceux de la figure 1 : ils se déroulent de manière linéaire, avec un ordre connu à l’avance. Dans le cas d’un programme utilisant une interface graphique, c’est très différent ! On dit que le programme est piloté par les évènements. Le programme est « en attente » des évènements envoyés : clic de souris, touche de clavier enfoncée… comme le montre la figure 2.

b. Canevas et tracé de lignes

Ouvrir avec IDLE le fichier essai_TK2.py qui se trouve dans le répertoire R:/TS/ISN/TP_Tkinter

Exécuter le programme

Lire les commentaires et analyser le programme

Quelle est l’utilité d’une variable globale ?

…………………………………………………………………………………………………………………………………………………

………………………………………………………………………………………………………………………………………………..

………………………………………………………………………………………………………………………………………………..

En réalité, cette pratique n’est pas tout à fait recommandable, surtout pour l’écriture de « grands »

programmes. Il vaut mieux encapsuler au maximum les variables en utilisant des classes, ce qui

permet de fournir un espace de noms commun. Les variables seraient alors des attributs d’instance,

et les fonctions seraient des méthodes attachées aux objets instanciés. Grâce à cela, on peut se

passer de variables globales, ce qui est bien plus « propre » et fiable.

Dans la fenêtre principale (widget « maître »), le programme place des widgets « esclaves ».

Combien y en a-t-il ? ……………………………………………………………………

Qu’est-ce qu’un « Canvas » ? Quel est le mot français correspondant ?

……………………………………………………………………………………………………………………………………………………

…………………………………………………………………………………………………………………………………………………..

Le cadre ci-dessous représente le canevas can1. En analysant le programme (coordonnées x1,

Y1, x2, y2 au début, puis ce qu’elles deviennent au tracé suivant), indiquer le centre du repère,

les axes, l’orientation de ces axes ainsi que les abscisses et ordonnées maximales.

Quelle fonction de la bibliothèque Tkinter permet de tracer une ligne ? A quel objet est-elle

attachée ? (en tant que méthode) Combien prend-elle d’arguments au minimum ?

……………………………………………………………………………………………………………………………………………………..

Pour chacune des modifications suivantes, faire un « Enregistrer sous » du fichier dans vos documents

(dans le dossier « Tkinter » !), avec un nom différent comme essai_TK2_v1.py, essai_TK2_v2.py, etc.

Modifier alors le programme afin :

o Que le dessin soit sur la droite de la fenêtre

o Que la couleur change aléatoirement à chaque tracé

o Pour que seules les couleurs ‘maroon’, ‘cyan’ et ‘green’ soient possibles

o Pour que les lignes soient parallèles et horizontales, en partant du haut, espacées de

10 pixels. (figure 3)

o Pour que le bouton « Tracer une ligne » porte désormais le texte « Tracer », et que

chaque clic sur ce bouton trace deux lignes : l’une horizontale et l’autre verticale (en

partant de la gauche), en décalant au fur et à mesure de 10 pixels vers la droite et

vers le bas (figure 4)

Figure 3                 Figure 4

o Créer un nouveau bouton appelé « Viseur ». Un clic sur ce bouton devra provoquer

l’affichage de deux lignes rouges en croix au centre du canevas.

c. Canevas et tracé de cercles

Ouvrir avec IDLE le fichier essai_TK3.py qui se trouve dans le répertoire R:/TS/ISN/TP_Tkinter

Exécuter le programme

Lire les commentaires et analyser le programme

FOCUS SUR LE DESSIN D’UN CERCLE : La méthode create_ovale() attachée à un objet « Canvas » permet de tracer une ellipse inscrite dans un rectangle, en donnant comme argument les coordonnées de deux sommet opposés de ce rectangle. Quand le rectangle est un carré, on obtient un cercle.

Si le centre du cercle a pour coordonnées (x ; y), alors le coin inférieur gauche du carré a pour coordonnées (x−r ; y−r) et le coin supérieur droit : (x+r ; y+r ) (avec r le rayon du cercle).

Faire un « Enregistrer sous » du fichier dans vos documents (dans le dossier « Tkinter « !), et lui

donner le nom essai_TK3_v1.py.

Modifier alors le programme en créant un bouton intitulé « Feu Tricolore ». Un clic sur le bouton

doit déclencher le dessin suivant : (figure 5). On pourra utiliser la méthode

« create_rectangle() » attachée à un canevas.

              Figure 5 Figure 6

Ouvrir avec IDLE le fichier essai_TK_anneaux.py qui se trouve dans le répertoire R:/TS/ISN/TP_Tkinter

Compléter ce programme afin de permettre le tracé des anneaux olympiques (figure 6)

o Un bouton « Quitter » permettra de fermer la fenêtre.

o Un bouton « Effacer » permettra de faire disparaître tout dessin existant.

o Un bouton « Tracer Anneaux » permet d’afficher les cinq cercles.

Enregistrer sous un autre nom, par exemple essai_TK_anneaux_v1.py, et modifier le

programme en créant cinq boutons, permettant chacun le tracé d’un cercle différent

Mini Projet TK 1 : damier Ecrire une petite application qui fera apparaître un damier lorsqu’on clique sur un

bouton. Le canevas aura une taille de 200x200 pixels. Il doit y avoir 100 cases sur le damier. Choix de la couleur libre pour le damier.

Ajouter un bouton qui fera apparaître des pions de rayon 7 pixels au hasard sur le damier (chaque pression sur le bouton doit faire apparaître un nouveau pion). Choix de la couleur libre pour le pion.

ANNEXE

3. Animation avec Tkinter

a. Détection d’un clic de sourisOn peut associer à n’importe quel widget une fonction « gestionnaire d’évènement », à l’aide de la méthode bind(). Il faut alors obligatoirement utiliser comme premier argument un objet Python standard nommé event.

Exemple :

Ouvrir avec IDLE le fichier clic_souris.py qui se trouve dans le répertoire R:/TS/ISN/TP_Tkinter

Exécuter ce programme

Le script fait apparaître une fenêtre contenant un cadre (frame) rectangulaire de couleur jaune pâle, dans lequel l'utilisateur est invité à effectuer des clics de souris.

La méthode bind() du widget cadre associe l'événement <clic à l'aide du premier bouton de la souris> à la fonction gestionnaire d'événement « pointeur ».

Ce gestionnaire d'événement peut utiliser les attributs x et y de l'objet event généré automatiquement par Python, pour construire la chaîne de caractères qui affichera la position de la souris au moment du clic.

Enregistrer le fichier clic_souris.py sous un autre nom (par exemple : clic_souris_cercle.py) et le modifier de façon à faire apparaître un petit cercle rouge à l’endroit où l’utilisateur a effectué son clic

NB : il faut d’abord remplacer le widget Frame par un widget Canvas)

b. Déplacement à l’aide de boutons

Ouvrir avec IDLE le fichier depl_balle.py qui se trouve dans le répertoire R:/TS/ISN/TP_Tkinter

Exécuter puis analyser ce programme

La nouveauté de ce programme réside dans la fonction avance() définie au début du script. Chaque fois qu’elle sera appelée, cette fonction redéfinira les coordonnées de l’objet « cercle coloré », ce qui provoquera l’animation de l’objet.

Cette manière de procéder est tout à fait caractéristique de la programmation « orientée objet ». On commence par créer des objets, puis on agit sur eux en modifiant leurs propriétés par l’intermédiaire de méthodes. Pas besoin d’effacer des figures pour les redessiner un peu plus loin, comme en programmation « traditionnelle » ! Ces tâches sont prises ici automatiquement en charge par les classes dont les objets dérivent.

Mini projet TK 2 Ecrire un programme qui fait apparaître une fenêtre avec un canevas. Dans ce canevas, on

verra deux cercles (de tailles et couleurs différentes) représentant des astres. On affichera en haut de la fenêtre les masses choisies pour ces astres. Des boutons doivent permettre de les déplacer à volonté tous les deux. Sous le canevas, le programme doit afficher en permanence :

o La distance séparant les deux astreso La force gravitationnelle qu’ils exercent l’un sur l’autre

En s’inspirant du script « clic_souris.py », modifier le programme précédent pour en réduire le nombre de boutons. Pour modifier un astre, il suffira de le sélectionner avec un bouton, puis de cliquer sur le canevas pour que l’astre se positionne à cet endroit précis.

c. Animation automatique - récursivitéPour conclure cette première prise de contact avec Tkinter, voici un dernier exemple d’animation qui fonctionne de façon autonome dès qu’on l’a mis en marche.

Ouvrir avec IDLE le fichier balle_auto.py qui se trouve dans le répertoire R:/TS/ISN/TP_Tkinter

Tester et analyser ce programme

FOCUS 1 : la méthode after(), ici appliquée à l’objet fen1, peut s’appliquer à un widget quelconque. Elle déclenche l’appel d’une fonction après qu’un certain laps de temps se soit écoulé. Ici, le laps de temps est 50 millisecondes, et la fonction appelée est la fonction move()

FOCUS 2 : c’est donc la fonction move() qui est appelée au sein… de la fonction move() elle-même !! On utilise ici la technique très puissante de récursivité (une fonction qui s’appelle elle-même). On obtient alors un bouclage, qui pourrait se perpétuer indéfiniment si on n’avait pas prévu un moyen de l’interrompre.

Quel est ce moyen ? ……………………………………………………………………………………………………………………………

…………………………………………………………………………………………………………………………………………………………….

Dans la fonction start_it(), supprimer l’instruction « if flag==0 » et l’indentation des deux lignes suivantes. Lancer le programme, et cliquer plusieurs fois sur Démarrer. Que se passe-t-il ? Pourquoi ?

…………………………………………………………………………………………………………………………………………………………….

…………………………………………………………………………………………………………………………………………………………….

…………………………………………………………………………………………………………………………………………………………….

Modifier le programme de façon à ce que la balle change de couleur à chaque virage. Modifier le programme de manière à obtenir un mouvement circulaire Modifier le programme de manière à simuler les rebonds d’une balle lâchée d’une certaine

hauteur et qui rebondit sur le sol. Attention : il s’agit de mouvements accélérés !

Mini-projet TK3 : jeu de balle

Ecrire un programme de jeu fonctionnant de la manière suivante :

Une balle se déplace au hasard sur un canevas, à vitesse faible. Le joueur doit essayer de cliquer sur la balle à l’aide de la souris. S’il y arrive, il gagne un point, mais la balle se déplace désormais un peu plus vite, et ainsi de suite. Arrêter le jeu après un certain nombre de clics, et afficher le score atteint.

4. Classes et interfaces graphiques

La programmation orientée objet se prête particulièrement bien au développement d’applications avec interface graphique, comme nous allons le voir dans ces quelques exemples

a. Résistance et code couleursRappels de physique : les résistances sont de petites pièces tubulaires cerclées de trois bandes de couleur, dont la fonction consiste à s’opposer plus ou moins bien au passage du courant. Les bandes de couleur indiquent la valeur numérique de la résistance, en Ohms. Chaque couleur correspond à un chiffre entre 0 et 9. Quand ces bandes colorées sont placées à gauche, les deux premières indiquent les deux premiers chiffres de la valeur numérique, et la troisième la puissance de dix par laquelle il faut multiplier le résultat précédent.

Noir = 0 ; Brun = 1 ; Rouge = 2 ; Orange = 3 ; Jaune = 4 ; Vert = 5 ; Bleu = 6 ; Violet = 7 ; Gris = 8 ; Blanc = 9.

Exemple : si en partant de la gauche, les bandes colorées sont jaune, violette et verte, la valeur de cette résistance sera 47×105Ω, soit 4,7M Ω

NB : avec ce système, on n’a que deux chiffres significatifs, mais c’est largement suffisant dans la plupart des applications électroniques « ordinaires » (radio, TV…)

Cahiers des charges de l’application : Le programme doit faire apparaître une fenêtre comportant un dessin de la résistance, ainsi qu’un champ d’entrée dans lequel l’utilisateur peut rentrer une valeur numérique. Un bouton « Montrer » déclenche la modification visuelle de la résistance, de façon à ce que les couleurs des trois bandes correspondent à la valeur entrée.

Contrainte : le programme doit accepter toute entrée numérique (sous forme d’un entier ou en notation scientifique), dans les limites de 10 à 1011Ω. Par exemple, une valeur telle que 4,78e6 doit être acceptée et arrondie correctement, c’est-à-dire convertie en 4800000Ω

Ouvrir avec IDLE le fichier resistance_couleurs.py qui se trouve dans le répertoire R:/TS/ISN/TP_Tkinter

Analyse du programmeL’application est construite sous forme d’une classe. Son utilité est de fournir un espace de noms commun dans lequel on peut encapsuler les variables et les fonctions, ce qui permet de se passer de variables globales.

Question 1 : pas de « fen1 » ou de « can1 » : par quoi sont désignés dans ce programme :

La fenêtre principale ? ……………………………………………………………….

Le canevas ? ……………………………………………………………….

Question 2 : A quel objet fondamental sont rattachés tous les widgets ? ……………………………….

Quelles sont les méthodes attachées à la classe Application ? …………………………………..

………………………………………………………………………………………………………………………………….

………………………………………………………………………………………………………………………………….

Combien de lignes comporte le programme principal ? …………………………………………..………………………………………………………………………………………………………………………………….

Où est le « constructeur » de la classe ? ……………………………………………………………….

Quelle ligne actionne le réceptionnaire d’évènements ? ………………………………………….

Focus sur la méthode grid() : jusqu’à présent, on disposait les widgets dans la fenêtre avec la méthode pack(), éventuellement avec des arguments type « side = LEFT ». Cette méthode est très simple, mais pas toujours suffisante dès que l’on a plusieurs widgets.

Dans le programme, on utilise la méthode grid : ici

Ou ici :

Cette méthode considère la fenêtre comme un tableau (ou une grille) : il suffit alors d’indiquer dans quelle ligne (row) ou quelle colonne (column) on souhaite placer le widget. On peut numéroter les lignes et colonnes comme on veut, en partant de 0 (valeur par défaut), de 1 ou d’un nombre quelconque. Tkinter ignorera les lignes et colonnes vides. L’argument « sticky » détermine l’alignement du widget, à gauche (W), à droite (E), en haut (N) ou en bas (S).

Focus sur le widget Entry() : il figure dans le tableau récapitulatif de la pages 9, mais on ne l’a pas encore utilisé : il permet de créer un champ d’entrée pour l’utilisateur.

Pour récupérer la valeur entrée par l’utilisateur dans le champ, on utilise la méthode get() attachée à ce widget :

Cette méthode renvoie une chaîne. C’est un peu l’équivalent de « raw_input() » en mode texte.

Focus sur la structure Try… Except…. Else : cette structure permet de gérer des exceptions. Les exceptions sont les opérations effectuées par le compilateur ou l’interpréteur lors de l’exécution d’un programme. En général, le programme est interrompu, et un message d’erreur plus ou moins clair est affiché. Dans de nombreux cas, il est possible d’anticiper un risque d’erreur, et de mettre en place un mécanisme spécifique. Ici, le bloc d’instructions suivant directement « Try » est exécuté par Python sous réserve ! C’est-à-dire que si un erreur survient pendant l’exécution de ce bloc, Python annule cette instruction fautive, et exécute à sa place le code contenu dans le bloc suivant « Except ». Si aucune erreur ne s’est produite, Python saute au bloc contenu après « Else » s’il y a un « Else ». Dans tous les cas, l’exécution du programme peut se poursuivre.

Ici, on essaie de convertir l’entrée de l’utilisateur en valeur numérique de type « float ». Si la conversion échoue (par exemple, si l’utilisateur a entré « toto »…), on mémorise l’erreur, et on peut alors mettre en place un signalement en appelant la méthode signale_erreur()

Question : que fait la méthode signale_erreur() ?

………………………………………………………........................

…………………………………………………………………………………………………………………………………………………………..

Lignes 46 à 53 : voir le cours de mathématiques (logarithmes) pour comprendre comment on

extrait de la valeur numérique son ordre de grandeur, puis ses deux premiers chiffres significatifs,

avant d’arrondir correctement.

Focus sur les méthodes configure() et itemconfigure() : la méthode configure(), appliquée à un objet, permet de modifier ses caractéristiques.

la méthode itemconfigure(), appliquée à un canevas permet de modifier les caractéristiques de l’un des objets dessinés dedans.

Ici, l’objet dessiné concerné est la ligne colorée « self.ligne[n] », il dépend du canevas « self.can », et on modifie sa couleur de remplissage.

Exercices : Modifier le script afin que le bouton « Montrer » ne soit plus nécessaire : il suffira de taper

« Entrer » après avoir indiqué la valeur de la résistance pour que l’affichage s’active.

Modifier le script pour que les trois bandes colorées redeviennent noires si l’utilisateur

fournit une entrée « incorrecte »