Python 07 : COMPLEMENTS SUR LES WIDGETS DE TKINTER

Nous allons apprendre ici à gérer quelques nouveaux widgets. Pratique mais pas indispensable pour réaliser vos projets.

1 - Scale : Les curseurs, les curseurs !

Rien de mieux qu’un curseur pour rendre un programme interactif.

Il s’agit de la classe Scale (oui oui, avec une majuscule).

Nous allons pouvoir récupérer des données numériques plutôt que texte.

On peut créer des widgets autonomes, non rattachés à une variable externe :

On peut alors lire la valeur actuelle du Scale avec la méthode get :

Et on peut même forcer la valeur du curseur à une certaine valeur avec la méthode set :

Si on intègre cela dans une interface Tkinter basique (un Scale, un Label et un Button qui modifie l'affichage du Label avec la valeur du Scale), le code devient :

01° Lancer le programme test et vérifier qu'il fonctionne correctement en faisant bouger le curseur :

Lors du lancement, on obtient :

Après l'activation du bouton :

Voici quelques attributs permettant d'améliorer le visuel de votre interface :

Comment avoir un curseur/scale horizontal ?

Comment gérer la taille du curseur/scale ?

Comment mettre un nom sur un curseur/scale ?

02° Modifier le curseur pour que cela ressemble à ceci :

Rappel : le background (bg) et le foreground(fg) permettent de gérer les couleurs.

On peut également rattacher le curseur à une variable externe. On utilisera ici une méthode constructeur IntVar() qui est l'équivalent du StringVar() mais en integer. Si vous modifiez cette variable, les widgets qui en dépendent vont automatiquement être modifiés.

Le plus fort, c'est qu'on peut associer cet objet de classe IntVar à un Label via l'attribut textvariable. Et Tkinter fera le boulot à votre place dès que ce IntVar va varier.

03° Utiliser ces nouvelles connaissances pour parvenir à créer un interface sans bouton dans laquelle bouger le curseur modifie automatiquement la valeur affichée dans le Label.

2 - La SpinBox

Il s’agit de la classe Spinbox : une entrée où on peut rentrer la valeur à la main ou en utilisant deux boutons + ou -.

04° Afficher le contenu de la Spinbox en appuyant sur l’un des boutons. Il faudra utiliser la fonction get() appliquée à la spinbox s.

La correction en cliquant sur l'image :

Les remarques faites sur le Scale ayant un attribut variable pointant vers un Scale sont valables ici aussi.

3 - La liste prédéfinie : la Listbox

Cette classe se note Listbox, avec une majuscule, oui oui, on a compris.

On voit que ça se code un peu différemment mais sans plus.

Pour récupérer la valeur du choix, on utilise :

Pour définir les choix par programmation, on peut utiliser le code ci-dessous. Il crée les choix 'un, 'deux' et 'trois'.

Beaucoup d'autres choses sont possibles. Il suffit de lire la documentation.

05° Compléter le programme ci-dessous pour qu'il permette de modifier l’affichage du label en fonction des valeurs d’une liste et de l’appui sur un bouton.

La correction   en cliquant sur l'image :

06° Créer un programme qui utilise une liste contenant des strings ('blue', 'green', 'red' ...). Utilisez ensuite les valeurs de cette liste pour changer la couleur d'un Label texte lorsqu'on appuie sur un bouton.

Remarque : comme le texte n'est pas destiné à changer, j'ai utilisé l'attribut text et pas textvariable dans la correction.

4 - Ouvrir la fenêtre de sélection des fichiers

Nous allons avoir besoin d'importer les éléments de tkinter.filedialog.

Il faudra ensuite utiliser la fonction askopenfilename et lui transmettre en argument le titre de la boîte de dialogue (title), les types de fichiers qui seront affichés (filetypes).

Filetypes doit recevoir une liste, cela se voit aux crochets de définitions [ et ]. Chaque élément de la liste est un 2-uplets (string affiché, extension correspondante).

Une fois le fichier sélectionné, votre variable (ici filepath) contiendra un string correspondant au nom du fichier voulu avec son chemin d'accés.

07° On voudrait activer la fenêtre lorsqu’on appuie sur un bouton. Il faudrait alors afficher le contenu de filepath dans un Label. Un simple monTexte.set(filepath) devrait suffire. N'oubliez pas non plus qu'on modifie le contenu d'un StringVar à l'aide de la méthode get.

Le programme ci-dessous crée un Label et un Entry qui sont liés au même StringVar nommé monTexte.

La correction  en cliquant sur l'image :

5 - Ouvrir la boite de dialogue fichier et afficher l’image

C'est la suite logique : on va associer ce qu’on a vu sur l'affichage d'une image et ce qu'on vient de voir sur le choix d'un fichier.

N’oubliez pas l’importation des classes indispensables :

Pour affecter l'image au bon Label, utilisons :

Voici ce que cela donne sur un programme qui demande directement l'image qu'on veut voir s'afficher.

08° Tester le code pour qu'on puisse ouvrir la fenetre de dialogue, sélectionner un fichier image et l'afficher dans un Label. Et expliquer le, ligne par ligne, c'est très important. Aucune ligne de code ne doit vous paraitre inconnue.

Si on sélectionne une image, ça donne

Et si nous tentions de faire la même chose mais avec un bouton. Pour l'instant, la boîte de dialogue s'affiche dès le départ.

09° Modifier le programme pour que le choix de l'image se fasse après avoir cliqué sur un bouton. Tenter de modifier l'image du Label.

Dans le corps du programme, vous pouvez créer au départ l'image de base sans sélection avec le code suivant : (voir l'activité précédente sur Tkinter)

Dans la fonction, il faudra donc recréer un contenu pour presentationTk et il faudra donc modifier l'attribut image avec un code du type :

Tenter d'aller jusqu'au bout et de ne plus avoir d'erreur dans le code. Vous ne devriez néanmoins pas réussir à modifier votre image ... Tout cela à cause du ramasse-miettes : vous tentez de modifier l'image de votre label avec un = depuis une fonction : dès qu'on sort de la fonction, le ramasse-miettes détruit les variables qui ne sont pas liées à des objets du programme principal directement.

Vous devriez néanmoins réussir à afficher l'image de base (un carré coloré) et choisir le fichier et modifier le nom affiché dans le label.

Voici une correction du code non fonctionnel que vous devriez avoir écrit :

Alors, d'où vient le problème ?

Regardons le code :

Pourquoi ça ne marche pas ? La documentation explique qu'il faut garder une référence vers votre objet-image. Ici, on ne stocke dans l'attribut image que l'adresse mémoire de l'objet-image lui-même. Or, le ramasse-miette détruit les variables locales créées par la fonction qui ne sont pas stockées dans un objet-créé dans le corps du programme. Le résultat en image :

La technique pour stocker un objet-image qui n'est pas créé dans le programme principal est de le stocker dans l'objet-Label en lui créant un nouvel attribut. On peut le nommmer comme on veut : toto, monEmplacement, memoireImage ...

Voici ce que cela donnera en image :

Et on peut obtenir ceci avec une ligne en plus :

10° Rajouter la ligne qui permet de stocker notre référence à l'image dans l'objet-Label lui-même et relancer votre programme. Cette fois, cela va fonctionner.

Puis :

6 - Complément sur les textes

Nous n'avions pas réglé le probléme des textes trop grands pour le widget-Label dans lequel ils sont affichés :

Voici le code utilisé pour obtenir un résultat proche du précédent :

Tentons de résoudre ce problème : on peut définir des formats d’affichage.

L’attribut height définit la hauteur de l’affichage :

• en lignes en fonction de la taille de la police, si affiche un texte
• en pixels, si on affiche une image

L’attribut width définit la largeur de l’affichage.

11° Tester le code suivant :

Vous devriez voir que le Label prend 3 lignes de hauteur (mais n’en utilise qu’une) et que la chaîne de caractères ne s’affiche que sur 15 caractères. Ce n’est pas ce qui était voulu…

Si le texte ne s’affiche pas correctement, on peut déjà indiquer quelle zone du texte on désire afficher :

Le paramètre anchor permet d’afficher le texte en l’alignant sur   :

• La partie gauche : anchor=W (pour West, Ouest).
• La partie droite : anchor=E (pour East, Est)
• La partie centrale : anchor=CENTER (c’est la valeur par défaut si vous ne sélectionnez rien, voir au dessus).
• La partie haute : anchor=N (pour North, Nord)
• La partie basse : anchor=S (pour South, Sud).

On notera qu’on peut également utiliser les associations : NW ….

Quelques exemples 

12° Tester le code suivant (attention, votre chaîne de caractères doit être réellement longue).

Ca fonctionne mieux un peu mieux.

13° Tester le code en modifiant le type de l’ancrage du texte (anchor) pour en comprendre la signification (notamment les associations NW, SE ..)

C’est bien beau tout ça, mais mon texte ne s’affiche toujours pas en entier. Ce ne fait pas très sérieux.

Pour palier à ce petit problème, nous allons lui demander d’accepter de s’afficher sur plusieurs lignes si ça peut vous faire plaisir. Pour cela, on utilise wraplength.

monAffichage = Label(fen_princ, text = "C’est ici que j’affiche mon très très long premier texte !", font = ("Helvetica", 32), height = 3, width = 25, anchor = NW, wraplength = 800)

14° Tester cette ligne pour que votre long texte s’affiche maintenant correctement. Attention wraplength est à donner en mesure-écran. Il faudra sûrement jouer sur width pour que cela fonctionne bien. Pensez également à rajouter des lignes avec height si la place n’est pas suffisante. Le problème vient du fait que la police utilisée fait varier la taille de la lettre en fonction de la taille réellement nécessairement en largeur : un a prend plus de place qu'une virgule.

Vous devriez réussir à obtenir quelque chose comme

Il existe beaucoup d’autres attributs modifiables. Le mieux est encore de faire une recherche sur « Python Tkinter Label ».

7 - Attributs height et width

Il s'agit juste d'une remarque.

Ces deux attributs que nous avons utilisé avec les widgets Label pour du texte sont utilisables sur tous les widgets. Si vous devez modifier la taille d'un widget, pensez à ces deux attributs.

Par exemple pour un bouton :

Ce résultat est obtenu avec :

Comme il s'agit d'un bouton affichant du texte, les dimensions sont en colonnes et lignes, pas en pixels.

Cela marche aussi avec les labels affichant des images. Et cette fois, le résulat est en pixels.

Il reste encore des cas à traiter. Mais vous avez maintenant assez de connaissances pour vous débrouiller avec la documentation de Tkinter.