Activité 10 : MINIS PROJETS AVEC LA FENETRE GRAPHIQUE

Activité 10 : MINIS PROJETS AVEC LA FENETRE GRAPHIQUE tkinther
MANIPULATION COULEURS ET TEXTE
Classe de Terminale S – Spécialité ISN
1 – LES COULEURS
Actuellement les écrans d’ordinateur savent afficher 16 millions de couleurs.
Il existe différentes solutions pour décrire une couleur. Celle qui va nous intéresser est le système RGB (RVB en français). En
utilisant le principe de superposition additive des couleurs, on peut recréer toutes les couleurs.
Les proportions de rouge, vert et bleu ne sont pas données en pourcentage mais par un nombre entier entre 0 et 255. C’est un
entier codé sur un octet.
 Le codage en python.
Le module tkinter donne un certain nombre de couleurs sous forme de chaîne de caractères parmi lesquelles : black,
white, red, yellow, blue….
Si on souhaite une couleur personnalisée on peut préciser le couleur que l’on souhaite en utilisant le code HTML de la couleur
désirée.
Le code d’une couleur est composée d’une chaîne de caractère avec :
 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= ‘coucou ‘, bg=’#18BFA8’, fg=’red’)
On obtient un Label où il est écrit « coucou » en rouge sur fond vert.
 EXERCICE.
1 – Réaliser une fonction RVB2HTML qui :
Attend pour paramètre d’entrée 3 nombres entiers r, v, b entre 0 et 225
Renvoie une chaîne de caractère correspondant à la couleur (r, v, b) entrée.
Attention, le code HTML d’une couleur doit comporter forcément 7 caractères (il faut ajouter des « 0 » le cas échéant)
2 – Réaliser un bandeau de dégradé entre 2 couleurs tirées au hasard.
3 – Adapter l’exercice précédent pour réaliser un canvas carré de 400x400 pixels, un dégradé circulaire.
2 – LE TEXTE : POLICE DE CARACTERE.
La plupart des polices de caractères affichées sur un ordinateur sont des polices vectorielles, c’est-à-dire que le dessin du
caractère n’est pas comme une photo numérique par un certain nombre de pixels, mais à l’aide de lignes courbes et droites.
Ainsi, on peut en théorie zoomer sur une lettre à l’infini.
Avec python, 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ère à 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ère indiquant le nom de la police. Les valeurs les plus compatbles d’un ordinateur à un autre et
d’un système d’exploitation à un autre sont les suivantes : Arial, Helvetica, Courier New, Courier, Comic Sans MS, Fixedsys, MS
Sans Serif, MS Serif, Symbol, system, Tmes New Roman, Times, Verdana.
On peut utiliser d’autres noms de polices installées sur son propre ordinateur, mais on prend le risque qu’un autre ordinateur ne
possède pas la police, ce qui donnera des affichages très exotiques.
Taille : un entier qui indique la taille du texte comme on le trouve dans les traitements de texte. C’est optionnel.
Décoration : on peut préciser, dans une chaîne de caractères comportant des mots clés séparés par des espaces, un certain
nombre d’informations sur la mise en forme du texte :
Mot-clé
Signification
normal
Normal
bold
Gras
italic
Italique
underline
Souligné
overstrike
Barré
Exemple :
Fond.create_text(500, 100, text=’coucou’, font = (‘Times’, 16, ‘bold, underline))
On place le texte “coucou” sur le canvas Fond en gras et souligné.
EXERCICE.
Réaliser une animation du texte « SALUT LES ELEVES » en rouge, sur 2 lignes, sur fond jaune provenant du fond de l’écran en
effectuant un zoom.
_____________________________________________________________________________________________________________________
Année scolaire 2014-2015 – Lycée « Cordeliers-Victoire » DINAN – Enseignement de Spécialité ISN – Mardi 27 Janvier - © Doc. A. ROBERT
1
3 – DES WIDGETS TKINTER.
Il existe 15 classes de base pour les widgets tkinter :
Widget
Description
Button
Un bouton classique, à utiliser pour provoquer l'exécution d'une commande quelconque.
Canvas
Un espace pour disposer divers éléments graphiques. Ce widget peut être utilisé pour dessiner, créer
des éditeurs graphiques, et aussi pour implémenter des widgets personnalisés.
Checkbutton
Une « case à cocher » qui peut prendre deux états distincts (la case est cochée ou non). Un clic sur
ce widget provoque le changement d'état.
Entry
Un champ d'entrée, dans lequel l'utilisateur du programme pourra insérer un texte quelconque à
partir du clavier.
Frame
Une surface rectangulaire dans la fenêtre, où l'on peut disposer d'autres widgets. Cette surface peut
être colorée. Elle peut aussi être décorée d'une bordure.
Label
Un texte (ou libellé) quelconque (éventuellement une image).
Listbox
Une liste de choix proposés à l'utilisateur, généralement présentés dans une sorte de boîte. On peut
également configurer la Listbox de telle manière qu'elle se comporte comme une série de « boutons
radio » ou de cases à cocher.
Menu
Un menu. Ce peut être un menu déroulant attaché à la barre de titre, ou bien un menu « pop up »
apparaissant n'importe où à la suite d'un clic.
Menubutton
Un bouton-menu, à utiliser pour implémenter des menus déroulants.
Message
Permet d'afficher un texte. Ce widget est une variante du widget Label, qui permet d'adapter
automatiquement le texte affiché à une certaine taille ou à un certain rapport largeur/hauteur.
Radiobutton
Représente (par un point noir dans un petit cercle) une des valeurs d'une variable qui peut en
posséder plusieurs. Cliquer sur un « bouton radio » donne la valeur correspondante à la variable, et
"vide" tous les autres boutons radio associés à la même variable.
Scale
Vous permet de faire varier de manière très visuelle la valeur d'une variable, en déplaçant un
curseur le long d'une règle.
Scrollbar
« ascenseur » ou « barre de défilement » que vous pouvez utiliser en association avec les autres
widgets : Canvas, Entry, Listbox, Text.
Text
Affichage de texte formaté. Permet aussi à l'utilisateur d'éditer le texte affiché. Des images peuvent
également être insérées.
Toplevel
Une fenêtre affichée séparément, « par-dessus ».
Ces classes de widgets intègrent chacune un grand nombre de méthodes. On peut aussi leur associer (lier) des événements,
comme nous venons de le voir dans les pages précédentes. Vous allez apprendre en outre que tous ces widgets peuvent être
positionnés dans les fenêtres à l'aide de trois méthodes différentes : la méthode grid(), la méthode pack() et la méthode place().
L'utilité de ces méthodes apparaît clairement lorsque l'on s'efforce de réaliser des programmes portables (c'est-à-dire
susceptibles de fonctionner indifféremment sur des systèmes d'exploitation aussi différents que Unix, MacOS ou Windows), et
dont les fenêtres soient redimensionnables.
4 – DES RAPPELS
 Le widget Canvas
Le module tkinter dispose d’un widget nommé Canvas destiné à dessiner la fenêtre. Si on veut créer un canvas nommé
canv, l’appel se fait comme pour tous les widgets de la manière suivante :
canv=Canvas(emplacement, options)
où emplacement est le nom de la fenêtre sur laquelle il est déposé et options indique les différentes propriétés du Canvas
comme
Options
Effet
bg
Couleur du fond du Canvas
Hauteur et largeur du Canvas (en pixels)
height - width
 Dessiner sur le Canvas
Sur un Canvas ici noté C, on peut dessiner différents types d’objets que l’on appelle item.
Une ligne : ligne = C.create_line(x1,y1,x2,x2,options) dessine un segment reliant le point de coordonnées (x1,y1)en haut à
gauche inclus et point (x2,y2) en bas à droite.
Options
Effet
width
Epaisseur de la ligne en pixels
fill
Couleur de la ligne
_____________________________________________________________________________________________________________________
Année scolaire 2014-2015 – Lycée « Cordeliers-Victoire » DINAN – Enseignement de Spécialité ISN – Mardi 27 Janvier - © Doc. A. ROBERT
2
Un rectangle : rect = C.create_rectangle(x1,y1,x2,x2,options) dessine un rectangle dont deux sommets opposés ont pour
coordonnées (x1,y1)en haut à gauche et point (x2,y2) en bas à droite.
Options
Effet
width
Epaisseur du trait en pixels
fill
Couleur à l’intérieur du rectangle
outline
Couleur du trait
Une ellipse ou une cercle rectangle : el = C.create_oval (x1,y1,x2,x2,options) dessine une ellipse dans un rectangle imaginaire
dont deux sommets opposés ont pour coordonnées (x1,y1)en haut à gauche et point (x2,y2) en bas à droite.
Options
Effet
width
Epaisseur du trait en pixels
fill
Couleur à l’intérieur du rectangle
outline
Couleur du trait
Un texte dans un Canvas : txt = C.create_text (x,y,options) affiche un texte aux coordonnées (x,y).
Options
anchor
Effet
Précise la position d’attache du texte par rapport au point de coordonnées (x,y). par
défaut, le texte est centré autour du point indiqué (’center’). Il peut prendre les valeurs
‘n’, ‘ne’, ‘e’, ‘se’, ‘s’, ‘sw, ‘w’, ‘nw’, ou ‘center’ (par défaut).
Couleur du texte
Police de caractère utilisée (comme pour le widget Label)
Une chaîne de caractère contenant le texte à afficher
fill
font
text
Exemples :
Fond = Canvas(fenetre,width=800, height=40, bg=’black’)
Fond.create_line(200, 300, fil=’green’)
Fond.create_oval(20,20, 40,40, fill=’blue’)
2 - Réalisation du jeu du « bonneteau »
Cette application doit permettre de :

Deux gobelets côte à côte.

A chaque fois que l’on clique sur le bouton « ECHANGER », on réalise une animation : on inverse le gobelet de gauche
noté « A » avec le gobelet de droite noté « B » en faisant glisser celui de gauche derrière celui de droite.
3 – Quelques aides.
 Charger une image.
a) On charge l’image dans une variable globale (ici fichierimg) à l’aide de la commande :
fichierimg = PhotoImage(file=’image.gif’) (si le fichier se nomme ‘image.gif’ qui doit être placé dans le répertoire
des scripts)
b) On place l’image au point de coordonnées x,y sur le Canvas C avec la méthode : img = C.create_image(x,y,options)
Le paramètre options permet de renseigner les propriétés. Par exemple :
Options
Effet
anchor
Comme pour l’objet text, indique la position du point de références (x,y) par rapport au
reste de l’image. Il peut prendre les valeurs ‘n’, ‘ne’, ‘e’, ‘se’, ‘s’, ‘sw,
‘w’, ‘nw’, ou ‘center’ (par défaut).
image
Indique l’image à afficher (fichierimg dans l’exemple ci-dessus)

Diverses méthodes sur le widget Canvas permettent de modifier les propriétés des items placés.
méthode
Effet
C.delete(item)
Efface l’item item du canvas C.
C.delete (ALL)
Efface tout ce qui se trouve sur le canvas C.
C.coords(item, x,y)
Modifie les coordonnées de l’item item (2 ou 4 selon l’objet)
Ccoords(item, x1, y1, x2,
y2)
C.itemconfig(item, options)
Permet de modifier une ou plusieurs options de l’item item
C.itemcget (item,prop)
Renvoie la valeur de la propriété prop de l’item item
Si on souhaite modifier plusieurs options d’un coup, on sépare les propriétés par une virgule.
Exemple : C.itemconfig(titre, text= «gagné », fill= « red »), transforme le contenu du texte « Titre » sur le Canvas C en « Gagné »
écrit en « Rouge ».
Rappels encore.
Options
row=…
column=…
Effet
Indique respectivement le numéro de ligne et de colonne (la numérotation
commence à 0)
_____________________________________________________________________________________________________________________
Année scolaire 2014-2015 – Lycée « Cordeliers-Victoire » DINAN – Enseignement de Spécialité ISN – Mardi 27 Janvier - © Doc. A. ROBERT
3
rowspan=…
columnspan=…
padx=…
pady=…
sticky=…
Indique respectivement le nombre de lignes et de colonnes qu’occupe un widget (1
par défaut)
Indique respectivement les distances minimales horizontale et verticales entre le
widget et les bords de la grille (permet d’aérer la fenêtre).
Indique quel côté du widget est collé à la grille (centré par défaut). Les valeurs
possible sont : ‘n’, ‘ne’, ‘e’, ‘se’, ‘s’, ‘sw, ‘w’, ‘nw’, ou
‘center’ (par défaut). Ce sont les points cardinaux.
Fen.resizable(width=False)
Empêche le redimensionnement (respectivement en largeur et en hauteur) de la
Fen.resizable(height=False) fenêtre Fen.
On peut placer les deux arguments dans les parenthèses en les séparant par une
virgule pour n’utiliser qu’une seule ligne.
Fen.place(x,y)
Place l’objet créé aux coordonnées souhaitées.
Attention, dans un programme, on fait le choix d’utiliser la méthode grid ou place, mais on ne mélange pas les deux
méthodes. La méthode place a un inconvénient car parfois, les bordures de la fenêtre ou l’épaisseur des butons ne sont pas
identiques d’un ordinateur à l’autre ou d’une version d’un système d’exploitation à une autre.
_____________________________________________________________________________________________________________________
Année scolaire 2014-2015 – Lycée « Cordeliers-Victoire » DINAN – Enseignement de Spécialité ISN – Mardi 27 Janvier - © Doc. A. ROBERT
4