Le module matplotplib pour réaliser des courbes automatiquement.
Le module Pillow pour travailler sur les images : récupérer une image, la transformer plusieurs fois et coller l'ensemble pour faire une belle affiche :
Le module Tkinter pour travailler sur les images : récupérer une image, la transformer plusieurs fois et coller l'ensemble pour faire une belle affiche :
Ligne 2 : il importe le module permettant de tracer des courbes sous le nom de plt
Ligne 5 : on déclare une constante valant 50.
Lignes 9-10-11 : la fonction scatter() ajoute un point sur le graphique; il faut lui fournir les coordonnées x et y, ainsi que leur couleur c et leur taille s (pour size). To scatter veut dire éparpiller en anglais).
Ligne 13 : la fonction grid() affiche la grille sur le graphique. Grid veut dire grille en anglais.
Ligne 14 : la fonction show() lance l'affichage du graphique à l'écran.
Ligne 15 : la fonction save() sauvegarde le graphique sous forme d'un fichier-image.
On fait trois fois la même chose pour placer les points avec scatter(). Or, la fonction scatter() accepte également de recevoir des arguments de type tableau. On peut donc lui envoyer un tableau contenant les trois abscisses, un autre tableau contenant les trois ordonnées correspondantes, un tableau contenant les couleurs et un tableau contenant la taille du point.
⚙ 03° Utiliser ce nouveau programme pour vérifier qu'il crée bien un graphique identique au précédent en utilisant uniquement la ligne 12 pour le générer :
Que reçoit le paramètre x de la fonction scatter() cette fois (type et contenu) ?
Quelles vont être les informations utilisées pour tracer le premier point ?
Quelles vont être les informations transmises pour tracer le deuxième point ?
...CORRECTION...
Que reçoit le paramètre x de la fonction scatter() cette fois ?
12
plt.scatter(x=TX,y=TY,c=TC,s=TS)
On voit que le paramètre x reçoit l'argument nommé TX. En allant voir en ligne 6, on voit que cette variable fait référence à un tableau.
6
TX=[5,10,15]
Quelles vont être les informations utilisées pour tracer le premier point ?
Pour répondre, il faut comprendre la ligne 12 : le paramètre x des abscisses reçoit le tableau TX, le paramètre y des ordonnées reçoit le tableau TY, le paramètre c des couleurs reçoit le tableau TC, le paramètre s des tailles (sizes en anglais) reçoit le tableau TS.
Ensuite, la fonction utilise d'abord les éléments d'indice 0, puis ceux d'indice 1...
Lors du premier tracé, on utilise donc les valeurs surlignées en jaune, celles correspondant aux élements d'indice 0.
✔ 04° Utiliser ce nouveau programme où la seule différence se trouve en ligne 12 : on utilise la fonction plot() qui permet de tracer le graphique en lui fournissant un tableau des abscisses et un tableau des ordonnées.
Cette fois, on obtient un graphique où les points sont reliés entre eux par des droites.
En anglais,
to scatter veut dire éparpiller ou disperser.
to plot veut dire tracer un graphique.
✔ 05° Lancer le programme pour visualiser le graphique obtenu : cette fois les tableaux des abscisses et ordonnées sont créés par compréhension sur les lignes 12-1.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 1 - Importation des modules nécessairesimportmathimportmatplotlib.pyplotasplt# 2 - Constantes# 3 - Déclaration des fonctions# 4 - Programme principal# Création des tableaux de donnéestx=[xforxinrange(100)]# Tableau des valeurs en abscissety=[x**2forxintx]# Tableau des valeurs en ordonnée# Création puis affichage de la(les) courbe(s)plt.plot(tx,ty,label="Cas 1",color='orange')plt.show()# Affichage à l'écran des courbes
f(x) = x2
⚙ 06° Répondre aux questions suivantes :
Comment se nomme le tableau qui contient les valeurs en abscisse ?
Comment se nomme ce type de création ?
Expliquer à l'aide d'une phrase ce que contient ce tableau au final.
Comment se nomme le tableau qui contient les valeurs en ordonnée ?
Expliquer à l'aide d'une phrase ce que contient ce tableau au final.
Lorsqu'on utilise la fonction plot() située dans le module dont l'alias est ici plt :
que doit contenir le premier argument envoyé ?
que doit contenir le deuxième argument envoyé ?
à quoi sert l'envoi de color='orange' ?
...CORRECTION...
Comment se nomme le tableau qui contient les valeurs en abscisse ?
12
tx=[xforxinrange(100)]# Tableau des valeurs en abscisse
Comment se nomme ce type de création ?
Création par compréhension.
Expliquer à l'aide d'une phrase ce que contient ce tableau au final.
On voit qu'on va rajouter une case contenant une valeur x pour chaque x dans l'intervalle [0; 99]. Cela veut donc dire qu'on aura 100 cases allant de 0 à 99.
Comment se nomme le tableau qui contient les valeurs en ordonnée ?
13
ty=[x**2forxintx]# Tableau des valeurs en ordonnée
Expliquer à l'aide d'une phrase ce que contient ce tableau au final.
Pour chaque valeur x du tableau tx, on rajoute une case dans ty qui va contenir x2.
Lorsqu'on utilise la fonction plot() située dans le module dont l'alias est ici plt :
19
plt.plot(tx,ty,label="Cas 1",color='orange')
que doit contenir le premier argument envoyé ?
Visiblement, il faut envoyer les valeurs x pour l'abscisse.
que doit contenir le deuxième argument envoyé ?
Visiblement, il faut envoyer les valeurs y pour l'ordonnée.
à quoi sert l'envoi de color='orange' ?
A donner la couleur attribuée à cette courbe.
⚙ 07° Mettre cette version plus élaborée en mémoire, vérifier qu'elle fonctionne puis répondre aux questions :
# 1 - Importation des modules nécessairesimportmathimportmatplotlib.pyplotasplt# 2 - Constantes# 3 - Déclaration des fonctions# 4 - Programme principal# Création des tableaux de donnéestx=[xforxinrange(100)]# Tableau des valeurs en abscissety=[x**2forxintx]# Tableau des valeurs en ordonnée# Création puis affichage de la(les) courbe(s)plt.plot(tx,ty,label="Cas 1",color='orange')# Choix des axes et autres options graphiquesxmax=max(tx)# Fonction native max de Pythonymax=max(ty)# Fonction native max de Pythonplt.axis([0,xmax,0,ymax])plt.title("Exemple de graphique obtenu avec Python")plt.legend(loc='upper center')plt.xlabel("Ici, c'est l'abscisse")plt.ylabel("Ici, c'est l'ordonnée")plt.grid()# Ordre final d'affichage des courbesplt.show()
f(x) = x2, version 2
L21 : A votre avis, que va contenir xmax après avoir stocké la réponse de la fonction native max() ?
L22 : A votre avis, que va contenir ymax après avoir stocké la réponse de la fonction native max() ?
L23 : On envoie à la fonction axis() dans l'ordre la valeur min puis max qu'on veut en abscisse puis la même chose en ordonnée. Quel est le type de l'argument qu'il faut lui envoyer ?
Sur quelle ligne demande-t-on d'afficher une grille de lecture ?
...CORRECTION...
L21 : A votre avis, que va contenir xmax après avoir stocké la réponse de la fonction native max() ?
La plus grande valeur qu'on puisse trouver dans le tableau tx.
L22 : A votre avis, que va contenir ymax après avoir stocké la réponse de la fonction native max() ?
La plus grande valeur qu'on puisse trouver dans le tableau ty.
L23 : On envoie à la fonction axis() dans l'ordre la valeur min puis max qu'on veut en abscisse puis la même chose en ordonnée. Quel est le type de l'argument qu'il faut lui envoyer ?
Il faut envoyer un tableau des 4 cases visiblement. L'indice 0 doit contenir la valeur minimale sur l'axe des abscisses, l'indice 1 la valeur d'abscisse maximale, l'indice 2 la valeur minimale en ordonnée et l'indice 3 la valeur maximale sur l'ordonnée.
Sur quelle ligne demande-t-on d'afficher une grille de lecture ?
L28 : on demande le placement d'une grille en utilisant la fonction grid() qui se trouve dans le module plt.
⚙ 08° Deux dernières choses pour aujourd'hui :
Lignes 18-19 : on utilise les fonctions f() et g() pour gérer les valeurs des absisses et ordonnées.
On trace plus d'une courbe sur un même graphique en utilisant deux fois la fonction plot() en lignes 22 et 23.
# 1 - Importation des modules nécessairesimportmathimportmatplotlib.pyplotasplt# 2 - Constantes# 3 - Déclaration des fonctionsdeff(x:int)->int:returnx**2defg(x:int)->int:return8000-10*x# 4 - Programme principal# Création des tableaux de donnéestx=[xforxinrange(100)]# Tableau des valeurs en abscissety1=[f(x)forxintx]# Tableau des valeurs en ordonnéety2=[g(x)forxintx]# Tableau des valeurs en ordonnée# Création puis affichage de la(les) courbe(s)plt.plot(tx,ty1,label="Cas 1",color='orange')plt.plot(tx,ty2,label="Cas 1",color="red")# Choix des axes et autres options graphiquesxmax=max(tx)# Fonction native max de Pythonymax=max(ty1)# Fonction native max de Pythonplt.axis([0,xmax,0,ymax])plt.title("Exemple de graphique obtenu avec Python")plt.legend(loc='upper center')plt.xlabel("Ici, c'est l'abscisse")plt.ylabel("Ici, c'est l'ordonnée")plt.grid()# Ordre final d'affichage des courbesplt.show()
Mettre cette version qui affiche deux courbes sur un même graphique, vérifier qu'elle fonctionne puis répondre aux questions :
f(x) = x2, version 2
L18 : Expliquer ce que fait cette ligne, en français.
L19 : Expliquer ce que fait cette ligne, en français.
...CORRECTION...
Sur la ligne 18, on voit qu'on crée un tableau en compréhension : pour chaque valeur x contenue dans tx, on ajoute une case dont la valeur est f(x).
Sur la ligne 19, on voit qu'on crée un tableau en compréhension : pour chaque valeur x contenue dans tx, on ajoute une case dont la valeur est g(x).
1 Introduction au module pyplot
1..1 Installer puis importer
Le module pyplot appartient à la bibliothèque matplotlib.
Par y avoir accès, il faut
Avoir téléchargé sur votre ordinateur la bibliothèque matplotlib contenant ce module pyplot: elle n'est pas présente de base dans Python Pour cela, deux solutions :
Avec Thonny : utiliser le menu Outils puis Gérer les paquets et rechercher puis installer matplotlib. C'est fini.
Avec Python en ayant bien coché la case PATH lors de l'installation : ouvrir un terminal (bash sous Linux, invite de commande ou powershell sous Windows puis taper ceci :
$ python3 -m pip install matplotlib
La bibliothèque s'installe toute seule. C'est fini. Sous Windows, le 3 n'est pas obligatoire.
Importer le module dans votre programme. Pour vérifier que l'installation s'est bien passée, le mieux est de tenter d'importer le module depuis la console Python.
>>> from matplotlib import pyplot
D'ailleurs, comme pyplot est long à taper, on fait plutôt ceci :
>>> from matplotlib import pyplot as plt
1..2 Fonctions basiques
On notera qu'on rajoute toujours ici plt. pour indiquer d'aller chercher cette fonction dans le module qui porte ce nom.
plt.scatter(x=5,y=10,c="green",s=3) permet de demander la création d'un point en fournissant les coordonnées x, y et la couleur c et la taille s (size) du point.
plt.scatter(x=[5,10,15],y=[10,20,6],c=["blue","green","red"],s=[1,2,4]) permet de demander la création de plusieurs points en fournissant 4 tableaux : un par les x, un pour les y, un pour les couleurs et un pour les tailles de ces points.
Le premier point sera donc en (x=5, y=10) et aura l'apparence d'un point bleu de taille 1 pixel.
plt.plot([5,10,15],[10,15,5]) permet de placer les points puis trace des traits entrechaque point. On lui transmet ici d'abord le tableau des x puis le tableau des y.
plt.grid() permet de demander l'affichage d'une grille facilitant la lecture des valeurs.
plt.show() permet de demander l'affichage des données fournies. Sans son appel, rien ne s'affiche : plot() et scatter() générent la courbe en mémoire mais c'est bien show() qui autorise sa visualisation.
plt.savefig("graphique.png") permet d'enregistrer le résultat visuel dans un fichier image nommé ici "graphique.png". Puisqu'on ne donne qu'une adresse relative, le fichier-image apparaitra dans le répertoire où se trouve votre fichier-python.
Dans cette partie, nous allons travailler notamment avec les tuples (qu'on déclare avec des parenthèses ()) et le module de gestion d'images Pillow mais qui se nomme PIL dans les scipts Python...
✔ 09° Si cela n'est pas fait, installer la bibliothèque Pillow dans Thonny :
Allez dans l'onglet "Outils"
Cherchez "Gérer les paquets"
Lancez la recherche sur Pillow puis activer l'installation
Attendez que l'installation soit totalement effectuée
Validez l'installation en utisant le bouton Fermer
Vérifiez que cela c'est bien passé en tentant d'importer le module depuis la console
>>> import PIL
>>> _
Vous devriez juste retrouver la main une fois le module importé.
✔ 10° Télécharger l'image suivante en la plaçant dans un répertoire nommé par exemple Couleurs. Vous nommerez l'image Tux.png.
Tux est le nom de ce pingouin, la mascotte de Linux.
Sur votre ordinateur, vous aurez donc quelque chose semblable à cela :
📁 Couleurs
📄 Tux.png
4 types d'images
Les images PNG
ce type compresse les images sans les dégrader (leurs fichiers nécessitent moins d'octets qu'avec un enregistrement basique)
Ce type PNG accepte
les images où les pixels sont définis par trois valeurs (dans l'ordre RGB ou RVB : le rouge, le vert, le bleu) mais également
les images RGBA possèdant une capacité de transparence et où les pixels sont définis par quatre valeurs : le rouge, le vert, le bleu et la valeur ALPHA qui désigne à quel point ce pixel doit être transparent.
Les images JPEG ou JPG
Ce type d'images compressent encore plus les données et les fichiers image prennent donc encore moins de place.
Leurs désavantages ?
Ces fichiers JPEG n'acceptent pas la transparence ALPHA
Les images enregistrées sont dégradées lors de la compression : elles perdent un peu en qualité. Pas assez pour le voir réellement sur un écran, mais assez pour le voir si on zoome.
Les images BMP
Ces images ne sont pas compressées : on ne perd pas en qualité mais les fichiers sont énormes...
Les images GIF
Ces images permettent pas un grand nombre de couleurs mais ont l'avantage d'être de petits fichiers, d'avoir la capacité de transparence si on le veut et on peut les associer à la suite pour réaliser une animation GIF.
✔ 11° Créer un nouveau programme Python nommé gestion_images.py dans un répertoire Couleurs.
Si vous lancez le programme, vous devriez voir et comprendre :
Qu'il crée un objet-python de votre image en L9. A partir de là, la variable ref_image contient l'identifiant mémoire de l'image que Python pourra manipuler. Mais attention, l'image stockée en mémoire de Python est juste une copie créée à partir du fichier-image. Les deux sont indépendants.
En L10, on demande à Python de demander au programme d'affichage d'images de votre ordinateur de vous l'afficher à l'écran.
Nous allons maintenant utiliser Python pour créer des images à la Andy Warhol.
⚙ 12° Télécharger l'image suivante en la plaçant dans Couleurs. Vous nommerez l'image mm.jpg.
Il s'agit d'une image de Marilyn Monroe.
📁 Couleurs
📄 Tux.png
📄 gestion_image.py
📄 mm.jpg
Modifier le script gestion_image.py pour qu'il parvienne à afficher cette nouvelle image. Bien entendu, modifier les choses correctement en agissant uniquement sur les variables et constantes.
Dans cette partie, nous allons voir comment modifier facilement les couleurs d'une image RBG. Nous allons :
Créer d'un objet-image dans Python à partir d'un fichier-image (avec la fonction open()).
Récupérer dans trois variables les informations des couches R, G, et B avec la méthode split(). On notera qu'en anglais, to split veut dire séparer.
Créer un nouvel objet-image avec la méthode merge() mais en inversant les couches. On notera qu'en anglais, to merge veut dire fusionner.
Demander l'affichage à l'écran du nouveau objet-image avec show().
Enregistrer le nouvel objet-image dans un vrai fichier-image save().
✎ 13° Utiliser cette version de gestion_images.py. Ce nouveau programme réalise les opérations 1 à 5 signalées ci-dessus.
# ImportationsfromPILimportImageasImg# ConstantesNOM_IMAGE="mm.jpg"NOM_SAUVEGARDE="mm_modif.jpg"# Programme principalref_image=Img.open(NOM_IMAGE)# Création d'un objet-imagecouches=ref_image.split()# Récupération des intensités des différentes couchesrouge=couches[0]# contient uniquement les valeurs rouges des pixelsvert=couches[1]# contient uniquement les valeurs vertes des pixelsbleu=couches[2]# contient uniquement les valeurs bleues des pixelsnouvelles_couches=(bleu,rouge,vert)# RGB : bleu prend la place de rouge, rouge celle de vert et vert celle de bleunouvelle_image=Img.merge("RGB",nouvelles_couches)# On fusionne (merge) les 3 couches dans un autre sens !nouvelle_image.show()nouvelle_image.save(NOM_SAUVEGARDE)
Lancer le programme. Vous devriez constater l'apparition d'un nouveau fichier image dans le répertoire :
📁 Couleurs
📄 Tux.png
📄 gestion_image.py
📄 mm.jpg
📄 mm2.jpg
Répondre aux questions suivantes sur votre copie numérique (et faire appel à moi si vous ne comprennez pas une question ou ce qu'il faut répondre).
Sur quelle ligne est déclaré le nom du fichier-image à lire ?
Sur quelle ligne est déclaré l'objet-imageref_image ?
Lignes 12 à 15 : qu'est-ce qui indique dans la syntaxe utilisée que la variable couches (créée par split() fait référence à un type construit ?
Ligne 17 : qu'est-ce qui indique dans la syntaxe utilisée que la variable nouvelles_couches référence un tuple ? Quelle est la couche qui remplacera la couche rouge dans notre nouvelle image ?
Ligne 18 : comment se nomme la méthode qui permet de créer une nouvelle image en lui fournissant trois couches jouant le rôle des couches R, G et B ?
Comment se nomme la méthode qui permet de sauvegarder notre nouvel objet-image dans un fichier ?
Nouvelle compétence testée savoir analyser un programme d'une trentaine de lignes.
Le programme ci-dessous utilise une nouvelle méthode paste() dont voici le prototype :
image_sur_laquelle_on_veut_coller.paste(image_à_coller, (x,y)) où le couple (x, y) désigne les coordonnées du point où on veut coller l'image.
✔ 14° Utiliser cette dernière version du programme :
Il lit l'image de base et en tire les informations dont on a besoin (largeur, hauteur, valeurs des couches R, G et B)
Il génère 3 nouvelles images aux mêmes dimensions mais en permutant les couches.
Il génère une nouvelle image nommée affiche_artistique, deux fois plus large et plus haute que les autres
Il place une à une les 4 autres images sur l'affiche de façon à faire un panneau.
Il montre l'affiche à l'écran puis la sauvegarde dans un fichier.
# ImportationsfromPILimportImageasImg# ConstantesNOM_IMAGE="mm.jpg"NOM_AFFICHE="affiche_Andy_Warhol.jpg"# Programme principal# étape 1 : on récupère l'image de base et les informations dont on aura besoinref_image=Img.open(NOM_IMAGE)# Création d'un objet-imagex=ref_image.width# on récupère la largeur en pixels de l'image de basey=ref_image.height# on récupère la hauteur en pixels de l'image de base couches=ref_image.split()# Récupération des intensités des différentes couchesrouge=couches[0]# contient uniquement les valeurs rouges des pixelsvert=couches[1]# contient uniquement les valeurs vertes des pixelsbleu=couches[2]# contient uniquement les valeurs bleues des pixels# étape 2 : on génère trois images en permutant les couleursnouvelle_image1=Img.merge("RGB",(bleu,vert,rouge))# On fusionne (merge) les 3 couches dans un autre sens !nouvelle_image2=Img.merge("RGB",(bleu,rouge,vert))# On fusionne (merge) les 3 couches dans un autre sens !nouvelle_image3=Img.merge("RGB",(rouge,bleu,vert))# On fusionne (merge) les 3 couches dans un autre sens !# étape 3 : on génère une image RBB complétement noir et on rajoute les 3 autres dessus.affiche_artistique=Img.new("RGB",(x*2,y*2),(0,0,0))affiche_artistique.paste(ref_image,(0,0))# on la colle en haut à gaucheaffiche_artistique.paste(nouvelle_image1,(x,0))# on la colle en haut à droiteaffiche_artistique.paste(nouvelle_image2,(0,y))# on la colle en bas à gaucheaffiche_artistique.paste(nouvelle_image3,(x,y))# on la colle en bas à gaucheaffiche_artistique.show()affiche_artistique.save(NOM_AFFICHE)
✌ 15° Modifier le programme pour qu'il réalise une affiche des 4 images en largeur (4*1) plutôt qu'en (2*2). La nouvelle image devra se nommer affiche_Andy_Warhol4x1.jpg".
Une fois que cela fonctionne avec Marilyn Monroe, choisir une autre image et réaliser votre propre affiche.
Vous avez vu plusieurs interfaces homme-machine (IHM) : la console (pour le texte), turtle (pour apprendre à programmer), pyplot de matplotlib (pour tracer des courbes) et pyxel (pour faire des jeux retro). Mais il existe également des IHM généralistes, permettant d'afficher des choses, sans but prédéfini. Le module turtle est basé lui-même sur le module d'interface graphique intégré de base à Python : tkinter.
Sans rentrer dans les détails, vous allez maintenant manipuler un programme permettant de créer une interface graphique Tkinter, et voir l'importance des variables dans un tel programme plutôt que de tout définir à la main.
Regardons à quoi ressemble le code de cette petite interface graphique.
✔ facultative 01° Placer le programme en mémoire en le nommant interface.py par exemple. Attention, n'utilisez surtout par un nom comme turtle, random, tkinter... Jamais l'un des noms d'un module Python déjà existant. Lancer.
# Importationsimporttkinterastk# Déclaration des constantesCOU1="#FF8844"# Première couleur (une variante de rouge)COU2="#4488FF"# Deuxième couleur (une variante de bleu)FOND="#000000"# Couleur du fond (noir)# Programme# ----- création de la fenêtre de l'application graphiquefenetre=tk.Tk()fenetre.geometry("600x300")fenetre.title("Ma première interface graphique")fenetre.configure(bg=FOND)# ----- création et affichage des Labelszone1=tk.Label(fenetre,text="A",fg="white",bg=COU1,width=10,height=5)zone1.place(x=25,y=25)zone2=tk.Label(fenetre,text="B",fg="white",bg=COU2,width=10,height=5)zone2.place(x=125,y=25)
Vous devriez voir la fenêtre graphique s'ouvrir.
✔ facultative 02° Lire (et comprendre, en demandant de l'aide au besoin) les explications sur son fonctionnement.
D'abord l'importation des modules utiles pour notre programme
1
2
3
# 1 - Importation de modules importtkinterastk
On importe le module tkinter sous l'alias tk.
Constantes
5
6
7
8
9
# Déclaration des constantesCOU1="#FF8844"# Première couleur (variante de rouge)COU2="#4488FF"# Deuxième couleur (variante de bleu)FOND="#000000"# Couleur du fond (noir)
On déclare 3 constantes COU1COU2 et FOND contenant deux couleurs pour les cases et la couleur de fond de l'interface. Elles sont fournies en mode RGB hexadécimal.
COU1="#FF8844"# Première couleur (variante de rouge) Valeur du rouge : FF (le maximum)
Valeur du vert(green) : 88
Valeur du bleu : 44
Le programme en lui-même
Il se décompose en deux sous-parties :
la création de la fenêtre graphique en elle-même
11
12
13
14
15
16
17
18
# Programme# ----- création de la fenêtre de l'application graphiquefenetre=tk.Tk()fenetre.geometry("600x300")fenetre.title("Ma première interface graphique")fenetre.configure(bg=FOND)
On retrouve la notation avec le point pour indiquer qu'on va agir sur l'objet devant le point.
Ligne 15 : on crée la fenêtre en utilisant tk.Tk() et on stocke la référence dans la variable fenetre.
Ligne 16 : on définit les dimensions (600 pixels de large et 300 pixels de haut) en utilisant la notation habituelle utilisant un point : objet.methode().
Ligne 17 : on définit le titre de l'application (elle apparaît en haut de la fenêtre)
Ligne 18 : on utilise la méthode configure() pour modifier la couleur du fond (background, bg)
la création des widgets (gadgets visuels, contraction de window gadget) qui vont remplir la fenêtre
20
21
22
23
24
25
26
# ----- création et affichage des Labelszone1=tk.Label(fenetre,text="A",fg="white",bg=COU1,width=10,height=5)zone1.place(x=25,y=25)zone2=tk.Label(fenetre,text="B",fg="white",bg=COU2,width=10,height=5)zone2.place(x=125,y=25)
Ligne 22 : on crée une zone d'affichage (un Label) en lui fournissant quelques informations :
d'abord, on précise qu'il est lié à fenetre
ensuite, on dit qu'on veut y afficher "A"
on précise que la couleur d'écriture est "white" (fg pour foreground, avant-plan)
on précise que la couleur d'arrière plan (background, bg) est COU1
on impose une largeur (width) de 10 caractères.
on impose un hauteur (height) de 5 lignes.
Ligne 23, on l'affiche à l'écran en le plaçant à la position correspondant aux coordonnées x et y fournies en pixels.
Ligne 25 et ligne 26, on fait la même chose avec un autre widget. C'est quasiment du copier/coller, seul la couleur du carré est différente puisque qu'on a choisi COU2 en tant que couleur de background (bg).
ATTENTION
Le module que nous allons utiliser se nomme tkinter. Il est donc important de ne pas nommer votre programme tkinter.py. Sinon, l'interpréteur Python ne parviendra pas à retrouver le vrai fichier tkinter.py !
⚙ facultative 03° Compléter le programme de façon à obtenir cet affichage :
Il faudrait donc créer les widgets zone3 et zone4.
# Importationsimporttkinterastk# Déclaration des constantes et des variablesCOU1="#FF8844"# Première couleur (variante de rouge initialement)COU2="#4488FF"# Deuxième couleur (variante de bleu initialement)FOND="#000000"# Couleur du fond (noir initialement)# Programme# ----- création de la fenêtre de l'application graphiquefenetre=tk.Tk()fenetre.geometry("600x300")fenetre.title("Ma première interface graphique")fenetre.configure(bg=FOND)# ----- création et affichage des Labelszone1=tk.Label(fenetre,text="A",fg="white",bg=COU1,width=10,height=5)zone1.place(x=25,y=25)zone2=tk.Label(fenetre,text="B",fg="white",bg=COU2,width=10,height=5)zone2.place(x=125,y=25)zone3=tk.Label(fenetre,text="C",fg="white",bg=COU1,width=10,height=5)zone3.place(x=225,y=25)zone4=tk.Label(fenetre,text="D",fg="white",bg=COU2,width=10,height=5)zone4.place(x=325,y=25)
✎ facultative 04° Quelles sont les deux seules lignes à modifier si on désire modifier les couleurs des widgets ?
Faire quelques essais de modification.
Mais on peut aussi gérer les tailles avec des variables, de façon à avoir des widgets de plus en plus haut par exemple.
✔ facultative 05° Utiliser ce nouveau programme. Les modifications importantes par rapport au précédent sont surlignées et feront l'objet de la dernière question.
# Importationsimporttkinterastk# Déclaration des constantes et des variablesCOU1="#88BB44"# Première couleur (variante de rouge initialement)COU2="#44BB88"# Deuxième couleur (variante de bleu initialement)FOND="#000000"# Couleur du fond (noir initialement)taille=5# taille du premier widget# Programme# ----- création de la fenêtre de l'application graphiquefenetre=tk.Tk()fenetre.geometry("600x300")fenetre.title("Ma première interface graphique")fenetre.configure(bg=FOND)# ----- création et affichage des Labelszone1=tk.Label(fenetre,text="A",fg="white",bg=COU1,width=10,height=taille)zone1.place(x=25,y=25)taille=taille+1zone2=tk.Label(fenetre,text="B",fg="white",bg=COU2,width=10,height=taille)zone2.place(x=125,y=25)taille=taille+1zone3=tk.Label(fenetre,text="C",fg="white",bg=COU1,width=10,height=taille)zone3.place(x=225,y=25)taille=taille+1zone4=tk.Label(fenetre,text="D",fg="white",bg=COU2,width=10,height=taille)zone4.place(x=325,y=25)
✎ facultative 06° Analyser le programme précédent pour répondre aux questions suivantes :
Ligne 10 : Que vaut la variable taille ?
Ligne 23 : Quelle va alors être la hauteur du widget zone1 ?
Ligne 26 : Que vaut la variable taille ?
Ligne 27 : Quelle va alors être la hauteur du widget zone2 ?
Ligne 30 : Que vaut la variable taille ?
Ligne 31 : Quelle va alors être la hauteur du widget zone3 ?
Ligne 34 : Que vaut la variable taille ?
Ligne 35 : Quelle va alors être la hauteur du widget zone4 ?
Pourquoi ne peut avoir utiliser les majuscules sur le nom taille ?
Activité publiée le 11 11 2023
Dernière modification : 02 07 2024
Auteur : ows. h.
