4V748 Interface graphique TD/TP

Transcription

1 4V748 Interface graphique TD/TP Avant de commencer... Pour pouvoir utiliser les caractères accentués, etc, il faut préciser l'encodage, ainsi : #!/usr/bin/python # -*- coding: utf-8 -*- import os, sys Niveau 1 En partant d'un programme de dot-plot textuel, réaliser un affichage graphique au moyen du widget Canvas. Les séquences à comparer, la taille de la fenêtre glissante et le seuil d'affichage sont pour l'instant fixés arbitrairement «en dur» dans le programme. Les points du dot-plot sont affichés en noir sur fond blanc. Niveau 2 Les points sont maintenant en nuances de gris : les meilleurs scores correspondent au noir, les moins bons sont gris clair. Niveau 3 Ajouter des légendes dans les marges : nom de chaque séquence et règle pour la longueur (ex. une graduation tous les 50 aa). Niveau 4 Ajouter un bouton d'inversion de l'image : lorsqu'on clique dessus, l'affichage passe en négatif (fond noir et points clairs). Niveau 5 Modifier le programme pour qu'il affiche d'abord une fenêtre qui permet de choisir : deux fichiers de séquences une matrice de substitution une taille de fenêtre glissante un seuil d'affichage Lorsque ces données sont entrées, on clique sur un bouton, qui déclenche l'affichage du dot-plot. Niveau 6 Ajouter un bouton pour sauvegarder l'image sous forme d'un fichier au format png. NB Cette nouvelle fonctionnalité nécessite d'importer les modules Image, ImageDraw et ImageFont 1 1 Cf

2 1. Les widgets simples Référence D'après «widget» signifie «bidule». Il s'agit d'éléments simples, comme un titre, un bouton, un texte, un champ éditable... ou plus complexes, comme un système de menus. 'Label' permet un affichage simple de texte texte=tkinter.label(racine, text="premier texte\ndans une fenêtre", fg="black") texte.pack(side=tkinter.right) side=tkinter.right permet de placer la chaîne de caractère à droite de la fenêtre 'Text' définit une plage permettant l'insertion et la manipulation d'un texte texte=tkinter.text(racine, width=25, height=5) texte.insert(tkinter.end,'un texte inséré') texte.pack(side=tkinter.right) 'width' est la largeur de la plage en nombre de caractères, 'height' le nombre de lignes. RIGHT concerne la plage de texte: en agrandissant la fenêtre, on verra que la plage se situe à droite, même si le texte est aligné à gauche. RIGHT est une variable du module, il faut donc la précéder du nom de celui-ci avec le mode d'importation du module qu'on a choisi. 'Entry' permet de saisir un texte Il faut donc prévoir une variable permettant de recevoir le texte saisi. texte=tkinter.label(racine, text='cliquer et saisir:', width=20, height=3, fg="black") saisir=tkinter.stringvar() # prevoir la variable pour recevoir le texte saisi saisie=tkinter.entry(textvariable=saisir, width=30) saisie.pack() print saisir.get() # on recupere et affiche le texte saisi On peut recevoir une variable numérique avec IntVar(). 'Button' définit un bouton cliquable bouton=tkinter.button(racine, text="quitter", command=racine.quit) bouton.pack(side=tkinter.bottom) side peut également prendre les valeurs LEFT, RIGHT, TOP ou CENTER

3 'Checkbutton' est une "case à cocher" Une méthode est proposée pour récupérer l'information sur l'état de la "case à cocher". retour=tkinter.intvar() # on cree une variable pour l'etat de la case a cocher bouton=tkinter.checkbutton(racine, variable=retour, text="cochez-moi") bouton.pack() # la valeur est recuperee lors de la sortie de la fenetre: if retour.get() == 0: # la variable 'retour' reste a 0 si la case est restee intacte print "Vide!" else: print "Tilt!" 'Radiobutton' est un ensemble de Checkbuttons exclusifs pour une même variable La variable option rendra la valeur proposée par 'value' du bouton sélectionné. retour=tkinter.intvar() # on cree une variable pour la valeur liee a la case cochee bouton1=tkinter.radiobutton(racine,text="oui", variable=retour, value=2) bouton2=tkinter.radiobutton(racine,text="non", variable=retour, value=3) bouton3=tkinter.radiobutton(racine,text="p-ê", variable=retour, value=7) bouton1.grid() bouton2.grid() bouton3.grid() print retour.get() # retourne 2, 3 ou 7 selon le bouton choisi, ou 0 si pas de choix Il est possible de définir des valeurs-retours sous forme de chaîne (value="bof") et en précisant retour=tkinter.stringvar() 2. L'espace graphique Canvas Un Canvas est une surface sur laquelle on peut placer des éléments graphiques: fond=tkinter.canvas(racine, width=300, height=200, background='darkgray') fond.pack()... # votre script On considère que racine est le widget Tk, et que fond représente un canevas préalablement ouvert. Pour les fonctions qui suivent (à placer dans un script tel que ci-dessus, à la place de «# votre script», 'fill' permet la définition d'une couleur (même pour 'creat_text'), 'width' l'épaisseur, 'outline' la couleur du bord; les objets seront placés par "anchor". Afficher une image photo=tkinter.photoimage(file="une_jolie_image.gif") # ouverture de l'image # determination des dimensions largeur=photo.width() hauteur=photo.height() racine.geometry(str(largeur+2)+'x'+str(hauteur+2)) racine.title(str(largeur)+'x'+str(hauteur)) img=fond.create_image(largeur/2+1,hauteur/2+1,image=photo)

4 Rectangle, ellipse et quartier rect=fond.create_rectangle(140,40,280,90, fill='white', outline='red', width=10) ellipse=fond.create_oval(30,120,150,180, fill='green', outline='blue', width=5) fond.create_arc(x1,y1,x2,y2,start=depart,extent=extension,style=tkinter.pieslice) Les deux premiers entiers représentent les coordonnées du point en haut à gauche du rectangle, les deux suivants celles du point en bas à droite. Pour 'create_oval' et 'create_arc', il s'agit des coordonnées du rectangle circonscrit. Pour 'create_arc', l'angle de départ et l'extension sont donnés en degrés (progression anti-horaire). Tkinter.CHORD limite la surface entre la partie d'arc et sa corde. Lignes et points ligne=fond.create_line(160,190, 250,110, 270,170, 180,120) Les arguments commencent par des paires qui sont des coordonnées de points. smooth=true si une ligne brisée doit être courbée (spline) splinesteps=12 pour un lissage de la courbe si smooth=true capstyle=tkinter.butt, ROUND ou PROJECTING arrow=tkinter.both place une flèche aux bouts de la ligne (Tkinter.FIRST pour le départ, Tkinter.LAST pour la fin) arrowshape=(8,10,3) permet de modifier la longueur de la flèche, la longueur des branches et la largeur. Pour afficher le point x,y, il faut afficher une ligne qui va de x,y à x+1,y+1 (le dernier point d'une ligne n'est pas affiché). Polygones polygone=fond.create_polygon(35,105, 120,85, 95,25, 80,75, 25,60, 65,30, fill="cyan", width=5, outline='black') Les arguments commencent par des paires qui sont des coordonnées de points. Il n'est pas nécessaire de répéter les coordonnées du premier sommet. smooth=true si le pourtour doit être arrondi splinesteps=12 pour un lissage de la courbe si smooth=true Texte graphique Pour positionner un texte au pixel près sur un canevas: txt=fond.create_text(15, 25, text="spam?", font="arial 16 italic", fill="gray") Rappel: la couleur du texte est définie ici par 'fill'! 3. Fenêtres, cadres et panneaux 'TopLevel' permet l'ouverture d'une nouvelle fenêtre. Afin de ne pas surcharger l'exemple, la nouvelle fenêtre n'affiche rien de plus que la première. racine.title("principale") fenetre=tkinter.toplevel() fenetre.title("seconde") fenetre.grid()

5 Deux fenêtres vont s'ouvrir: la principale, nommée pour l'occasion 'Principale', et la seconde, appelée 'Seconde'. On subordonne le plus souvent la création d'une seconde fenêtre à un événement de la première, par exemple associée au clic d'un bouton. 'Frame' et 'LabelFrame' Frame est un cadre, permettant de regrouper géographiquement les widgets dans une fenêtre. Cadre=Tkinter.Frame(racine) bouton1=tkinter.button(cadre,text="bouton 1") bouton2=tkinter.button(cadre,text="bouton 2") bouton3=tkinter.button(cadre,text="bouton 3") bouton1.pack(side=tkinter.left) bouton2.pack(side=tkinter.top) bouton3.pack() Cadre.pack() Il est possible de donner un bord et un nom à un cadre avec LabelFrame: Cadre=Tkinter.LabelFrame(racine,text="Titre de cadre") 'PanedWindow' permet de diviser une fenêtre en plusieurs panneaux adaptables racine.geometry("400x300") division=tkinter.panedwindow(orient=tkinter.vertical) division.pack(expand="yes",fill="both") panneau1=tkinter.label(division,text="panneau Un") division.add(panneau1) panneau2=tkinter.label(division,text="panneau Deux") division.add(panneau2) panneau3=tkinter.label(division,text="panneau Trois") division.add(panneau3) On adapte cette fonction dans l'autre direction avec les paramètres suivants: orient=tkinter.horizontal. Il est possible de créer des subdivisions dans un des panneaux. Dans l'exemple suivant, c'est le panneau 'bas' qui devient l'objet à diviser par PanedWindows: c'est donc à lui que les sous-panneaux 'gauche' et 'droite' doivent se référer. racine.geometry("400x300") division=tkinter.panedwindow(orient=tkinter.vertical) division.pack(expand="yes",fill="both") haut=tkinter.label(division,text="panneau du haut") division.add(haut) milieu=tkinter.label(division,text="panneau du milieu") division.add(milieu) bas=tkinter.panedwindow(orient=tkinter.horizontal) # nouvelle division bas.pack(expand="yes",fill="both") gauche=tkinter.label(bas,text="panneau bas-gauche") bas.add(gauche) droit=tkinter.label(bas,text="panneau bas-droit") bas.add(droit) division.add(bas) # on acheve la déclaration du panneau bas

6 4. Listes et menus 'Listbox' liste=tkinter.listbox(racine,width=10) liste.pack() texte=tkinter.text(racine,width=10) for element in ["Monthy", "Python", "Flying", "Circus"]: liste.insert(tkinter.end, element) def clic(inutile): texte.insert(tkinter.end,liste.get(liste.curselection())+"\n") liste.bind('<double-1>', clic) 'inutile' est une variable nécessaire mais qu'on n'utilise pas. liste=tkinter.listbox(selectmode=tkinter.extended) permet un mode de sélection multiple avec Ctrl-Clic, Maj-Clic... MULTIPLE permet une sélection multiple par ajout de simple clic. Il est possible de remplacer le double-clic par un bouton. #! /usr/bin/python liste=tkinter.listbox(racine,width=10) liste.pack() bouton=tkinter.button(racine,text='confirmer') bouton.pack() texte=tkinter.text(racine,width=10) for element in ["Monthy", "Python", "Flying", "Circus"]: liste.insert(tkinter.end, element) def clic(inutile): texte.insert(tkinter.end,liste.get(liste.curselection())+"\n") bouton.bind('<button-1>', clic) 'Scrollbar' permet de placer un ascenseur, afin de manipuler facilement une 'Listbox' L'exemple ci-dessous montre qu'il est possible de prévoir un défilement vertical à partir d'un ascenseur horizontal. racine = Tkinter.Tk() ascenseur= Tkinter.Scrollbar(racine,orient=Tkinter.HORIZONTAL) ascenseur.pack(side=tkinter.top,fill=tkinter.x) liste= Tkinter.Listbox(racine, yscrollcommand=ascenseur.set) for i in range(0,128): liste.insert(tkinter.end, str(i)) liste.pack(fill=tkinter.y) ascenseur.config(command=liste.yview) orient=tkinter.horizontal pour un ascenseur horizontal (vertical par défaut), même si la commande a une action verticale: 'yview' fill=tkinter.x met de l'espace entre les deux flèches de l'ascenseur horizontal side=tkinter.left aurait placé l'ascenseur à gauche

7 'Menu' Voici un exemple commenté d'un système de menu fonctionnel comportant des cascades (sous-menus). Pour la fonction Menu, deux méthodes sont nécessaires: add_cascade pour ajouter un menu ou un sous-menu, et add_command pour décider de la commande associée au clic. Les actions sont ici limitées à l'affichage d'un texte. texte=tkinter.text(racine) # prevoit une place pour l'affichage des textes def ecran(var): # fonction servant a l'affichage des textes: texte.insert(tkinter.end,var) sysdemenu = Tkinter.Menu(racine) # Creation du systeme de menu (variable explicite sysdemenu): menu1 = Tkinter.Menu(sysdemenu) # Creation du premier menu: sysdemenu.add_cascade(label="menu 1", menu=menu1) # addition des deux items pour le premier menu et leur commande associee menu1.add_command(label="cr\xe9dit", command=lambda: ecran('cr\xe9dit: menu1.add_command(label="quitter", command=racine.quit) menu2 = Tkinter.Menu(sysdemenu) # Creation du second menu sysdemenu.add_cascade(label="menu 2", menu=menu2) # addition du premier item pour le second menu et leur sous-items associes item1 = Tkinter.Menu(menu2) menu2.add_cascade(label="item 1", menu=item1) # addition des sous-items du premier item du second menu et leur commande associee item1.add_command(label="action 1", command=lambda: ecran('item 1 / Action 1\n')) item1.add_command(label="action 2", command=lambda: ecran('item 1 / Action 2\n')) item2 = Tkinter.Menu(menu2) # addition du second item pour le second menu et leur sous-items associes menu2.add_cascade(label="item 2", menu=item2) # addition des sous-items du second item du second menu et leur commande associee item2.add_command(label="action 1", command=lambda: ecran('item 2 / Action 1\n')) item2.add_command(label="action 2", command=lambda: ecran('item 2 / Action 2\n')) item2.add_command(label="action 3", command=lambda: ecran('item 2 / Action 3\n')) racine.config(menu=sysdemenu) Chaque menu commence par une ligne discontinue. Un clic transfère le menu dans une fenêtre indépendante. On peut empêcher cela en ajoutant le paramètre tearoff=0 dans la fonction 'Menu'