Les interfaces graphiques servent à rendre les programmes plus conviviaux. Elles sont pratiques
à utiliser mais elles demandent un peu de temps pour les concevoir.
Un programme fonctionne de manière différente. Il n’exécute plus successivement les
instructions mais attend un événement - pression d’une
touche du clavier, clic de souris - pour exécuter une fonction.
C’est comme si le programme avait une multitude de points d’entrée.
Il existe plusieurs modules permettant d’exploiter les interfaces graphiques. Le plus simple est le module tkinter présent lors de l’installation du langage Python. Ce module est simple mais limité. Le module wxPython est plus complet mais un peu plus compliqué dans son utilisation. Toutefois, le fonctionnement des interfaces graphiques sous un module ou un autre est identique. C’est pourquoi ce chapitre n’en présentera qu’un seul, le module tkinter. Pour d’autres modules, les noms de classes changent mais la logique reste la même : il s’agit d’associer des événements à des parties du programme Python.
Les interfaces graphiques évoluent sans doute plus vite que les autres modules, des composantes de plus en plus complexes apparaissent régulièrement. Un module comme wxPython change de version plusieurs fois par an. Il est possible de trouver sur Internet des liens qui donnent des exemples de programme. Une excellente source de documentation sont les forums de discussion qui sont un lieu où des programmeurs échangent questions et réponses. Un message d’erreur entré sur un moteur de recherche Internet permet souvent de tomber sur des échanges de ce type, sur des problèmes résolus par d’autres.
Introduction
Un programme muni d’une interface graphique fonctionne différemment d’un programme classique. Un programme classique est une succession presque linéaire d’instructions.
Il y a un début ou point d’entrée du programme et aucun événement extérieur ne vient troubler son déroulement Avec une interface graphique, le point d’entrée du programme est masqué : il est pris en compte automatiquement. Du point de vue du programmeur, le programme a plusieurs points d’entrée : une simple fenêtre avec deux boutons propose deux façons de commencer et il faut prévoir une action associée à chaque bouton. La conception d’une interface graphique se déroule généralement selon deux étapes. La première consiste à dessiner l’interface, c’est-à-dire choisir une position pour les objets de la fenêtre (bouton, zone de saisie, liste déroulante, ...). La seconde étape définit le fonctionnement de la fenêtre, c’est-à-dire associe à chaque objet des fonctions qui seront exécutées si un tel événement se réalise (pression d’un bouton, pression d’une touche, ...).
Pour le moment, nous allons supposer que ces deux étapes sont scindées même si elles sont parfois entremêlées lorsqu’un événement implique la modification de l’apparence de la fenêtre. Nous allons décrire des objets que propose le module tkinter. Ensuite on présente la manière de les disposer dans une fenêtre et on décrit les événements et le moyen de les relier à des fonctions du programme. Enfin nous allons voir comment gérer des images c’est-à-dire comment dessiner sur la fenêtre, placer des images et les déplacer.
Couleurs
En Python, on peut donner un nombre en binaire ou en hexadécimal en utilisant une chaîne de caractère commençant respectivement par 0b ou 0x qu’il faut alors transformer en valeur numérique à l’aide de la fonction eval. Depuis Python 2.6 des fonctions ont été ajoutées pour passer d’un nombre en écriture décimale à l’écriture binaire ou hexadécimale, comme le résume le tableau d’exemples qui suit :
| Saisie | Résultat |
| eval('0b110') | 6 |
| eval('0xCA0') | 3 232 |
| bin(37) | 0b100101 |
| hex(243) | 0xf3 |
Attention
Pour revenir à nos couleurs, en Python, avec le module tkinter, un certain nombre de couleurs existe déjà sous forme de chaînes de caractères parmi lesquelles :
black, white, red, purple, cyan, maroon, green, blue, orange, yellow, grey ….
Si l’on souhaite une couleur personnalisée, on peut alors préciser la couleur que l’on souhaite en indiquant le code HTML de la couleur désirée. Le code HTML d’une couleur est une chaîne de caractère composée de :
- Un symbole # pour commencer.
- 2 symboles correspondant au niveau de rouge codé en hexadécimal.
- 2 symboles correspondant au niveau de vert codé en hexadécimal.
- 2 symboles correspondant au niveau de bleu codé en hexadécimal.
Par exemple en saisissant :
...
Label(fenetre, text = "Bonjour ", bg = "#18BFA8", fg = 'red')
...
On obtiendra un Label assez illisible où il est écrit "Bonjour " en rouge sur fond vert.
Polices de caractères
Lors de la création d’un Label ou d’un texte sur un Canvas on peut, comme on l’a vu, préciser une police de caractères à l’aide de l’option font sous la forme d’un triplet de cette manière :
font = (famille, taille, decoration)
Famille : une chaîne de caractères indiquant le nom de la police. Les valeurs les plus compatibles d’un ordinateur à l’autre et d’un système d’exploitation à l’autre sont les suivantes :
Arial : Arial Courier New : Courier New Comic Sans MS : Comic Sans MS MS Sans Serif : MS Sans Serif Times New Romain : Times New Romain Verdana : Verdana On peut bien évidemment utiliser d’autres noms de polices installées sur son propre ordinateur, mais on prend alors le risque que le joueur qui ne dispose pas de cette police obtienne des affichages très exotiques …
- taille (optionnel) : un entier qui indique la taille du texte comme on le retrouve dans les traitements de textes.
- decoration (optionnel) : on peut ici préciser, dans une chaîne de caractères comportant des mots-clefs séparés
par des espaces, un certain nombre d’informations sur la mise en forme du texte :
mot clef signification normal normal bold gras italic italique underline souligné overstrike barré
Par exemple pour placer le texte "Bonjour " sur le Canvas Fond en gras et souligné :
...
Fond.create_text(500,100,text="Bonjour ", font=('Times New Romain',16, 'bold underline'))
...
Exemple 16
from tkinter import *
fenetre=Tk()
fenetre.title("Vous avez gagné !")
Fond=Canvas(fenetre,bg="white", width=1000, height = 800)
Fond.grid()
T = Fond.create_text(500,400,text="Gagné", font=('Arial',12, 'bold'))
for t in range(200) :
Fond.itemconfig(T,font=('Arial',t))
Fond.update()
fenetre.mainloop()
Que fait ce programme ?