Firefox https://www.cours-gratuit.com/cours-framework-python/introduction-int...

…ntroduction interfaces graphiques en Python avec Tkinter

cours

1.7 étoiles sur 5 a partir de 6 votes.

Votez ce document: ☆☆☆☆☆

Téléchargez notre guide

Aucune avance de frais dans les zones à 100%

A
Arrttiicclle
ess ssiim
miilla
aiirre
ess
CFE.fr Télécharger
Tuto Python & Tkinter : programmation
événementielle
Tuto Python & Tkinter : personnaliser les
widgets
Tutoriel python: réaliser des graphiques
avec pyplot
Tuto Python & Tkinter : créer une fenêtre
graphique
Tuto Python & Tkinter : réaliser un
formulaire d'inscription
Python : introduction au hacking/piratage
éthique
Exercice JAVA héritage et interfaces -
primes de risque
Comment faire une introduction pour une
analyse de texte philosophique ?
Voici les différents types de graphiques
Excel
Comment faire une étude de document
en histoire terminale ES et S ?
Tutoriel Python: le module random avec
Numpy
Voici les plus fameux sites web réalisés
avec Python

1 sur 19 25/12/2022, 00:57

Firefox https://www.cours-gratuit.com/cours-framework-python/introduction-int...

IIn
nttrro
oddu
uccttiio
onn iin
ntteerrffa
acceess g
grra
apph
hiiq
quueess een
n PPyytth
hoon
naavveecc TTkkiin
ntteerr cco
ouurrss PPD
DFF

...

M
Mood
duullee TTkkiin
ntteerr

Widgets : W
Wiindow gad
dggeettss

Fonctionnalités des widgets, composants d’IHM affichage d’informations (label, message )

composants d’interaction (button, scale ) zone d’affichage, saisie de dessin, texte (canvas,
Votre Assurance Santé
entry ) conteneur de composants (frame) fenêtres secondaires de l’application (toplevel) Sérénité d'esprit au quotidien pour vous & votre
famille avec MSH International
MSH International Ouvrir

D
Dooccu
umme
ennttss ssiim
miilla
aiirre
ess

TkInter : fenêtres, conteneurs

Toplevel : fenêtre secondaire de l’application

Canvas : afficher, placer des “éléments” graphiques

Frame : surface rectangulaire pour contenir des widgets Scrollbar: barre de défilement à
associer a` un widget

Créer des interfaces Formation Python pour

graphiques en Python apprendre à créer des
avec Tkinter pas à pa… interfaces graphiques…

TkInter : gestion de textes

Label: afficher un texte, une image

Message: variante de label pour des textes plus importants

Cours sur les interfaces
Text: afficher du texte, des images graphiques en Python
avec PyQt

Python gui
programming using
tkinter and python…

Cours C++ Interfaces

Graphiques de Base Formation pour
apprendre à créer des
applications graphique…

Entry: champ de saisie de texte

Tkinter: gestion de listes

Detailed course on the
Listbox: liste d’items sélectionnables fundamentals of python
first programs
Menu: barres de menus, menus déroulants, surgissants

Apprendre à
programmer en python
pour jeunes débutants

2 sur 19 25/12/2022, 00:57

Firefox https://www.cours-gratuit.com/cours-framework-python/introduction-int...

Tkinter: composants d’interactions

Menubutton: item de sélection d’action dans un menu

Button: associer une interaction utilisateur

Checkbutton: visualiser l’état de sélection

Radiobutton: visualiser une sélection exclusive

Scale: visualiser les valeurs de variables

Etapes de programmation

EEtta
appeess d
dee p
prro
oggrra
ammm
maattiio
onn

3 sur 19 25/12/2022, 00:57

Firefox https://www.cours-gratuit.com/cours-framework-python/introduction-int...

TkInter : Structuration d’un programme

# ------- Initialisation --------------------------from Tkinter import Tk,Label,Button

# ------- Composants graphiques -------------------mw=Tk() labelHello=Label(mw,

text="Hello World !",fg="blue") buttonQuit=Button(mw, text="Goodbye World", fg="red",\
command=mw.destroy)

# ------- Positionnement des composants () ()

# ------- Definition des interactions -------------# ------- Gestion des e´vénements

-----------------mw.mainloop() exit(0)

G
Geessttiio
onnd
d’’éévvéén
neem
meen
nttss

Interaction par défaut : option command en cas de “click gauche” exécuter la fonction
associée

Paramétrer l’interaction utilisateur : méthode bind() lier (bind) l’événement au

comportement d’un composant gestion des interactions

# ------- Definition des interactions -------------def sortie(event) :

mw.destroy()

# ------- Gestion des evenements ("", sortie) mw.mainloop() exit(0)

G
Geessttiio
onnd
d’’éévvéén
neem
meen
nttss

IIn
ntteerra
accttiio
onnU
Uttiilliissa
atteeu
urr

Informations utiles a` l’interaction donnnées liées aux périphériques de l’utilisateur

argument event

4 sur 19 25/12/2022, 00:57

Firefox https://www.cours-gratuit.com/cours-framework-python/introduction-int...

données liés au composant graphique d’interaction configure() : fixer des valeurs aux
options de widget cget() : récupérer une valeur d’option

Devenir auteur, ça vous tente?

Affichage des coordonnées du pointeur de souris def mouseLocation(event):

labelPosition.configure(text = "Position X =" \

+ str(event.x) \

+ ", Y =" \

+ str(event.y))

#               print ("width")

IIn
ntteerra
accttiio
onnu
uttiilliissa
atteeu
urr

IIn
ntteerra
accttiio
onnu
uttiilliissa
atteeu
urr

IIn
ntteerra
accttiio
onn een
nttrree cco
ommp
poossa
annttss

(cf Didier Vaudène : “un abc des IHM”)

 (cf Stéphanie Jean-Daubias : “Programmation événementielle”)

Fenêtre principale

FFeen
nêêttrree p
prriin
ncciip
paallee

5 sur 19 25/12/2022, 00:57

Firefox https://www.cours-gratuit.com/cours-framework-python/introduction-int...

MainWindow: Fenêtre de base class MainWindow(Tk):

def __init__(self, width=100,height=100,bg="white"): Tk.__init__(self) self.title(’Editeur

Graphique’) self.canvas =Canvas(self,width=width-20, height=height-20, bg=bg)

self.libelle =Label(text ="Serious Game", font="Helvetica 14 bold")

() ()

Fenêtre principale

Barre de menu

MenuBar : Menu déroulant class MenuBar(Frame):

def __init__(self,boss=None):

Frame.__init__(self,borderwidth=2) mbuttonFile = Menubutton(self,text=’Fichier’)

(side=LEFT) menuFile=Menu(mbuttonFile) menuFile.add_command(label=’Effacer’,
command=boss.effacer)

menuFile.add_command(label=’Terminer’, )

mbuttonFile.configure(menu=menuFile)

Barre de menu

6 sur 19 25/12/2022, 00:57

Firefox https://www.cours-gratuit.com/cours-framework-python/introduction-int...

ScrolledCanvas : scrollbars

scv=Scrollbar(self,orient=VERTICAL, command =self.canvas.yview)

sch=Scrollbar(self,orient=HORIZONTAL, command=self.canvas.xview)

self.canvas.configure(, )

(row=0,column=1,sticky=NS) (row=1,colum=0,sticky=EW) ("", self.retailler) self.started

=False

A
Appp
plliicca
attiio
onn :: iin
niittiia
alliissa
attiio
onn

MainWindow : init (self)

=self.canvas.create_window(self.x,self.y, window=self.buttonStart)

self.xscale,self.yscale=200,200 =self.canvas.create_window(self.xscale, self.yscale,

window=self.scaleCercle)

7 sur 19 25/12/2022, 00:57

Firefox https://www.cours-gratuit.com/cours-framework-python/introduction-int...

window=self.scaleCercle)

self.xcercle,self.ycercle=100,100 self.cercle=self.canvas.create_oval(self.x, self.y,

self.x+self.xcercle, self.y+self.xcercle, fill=’yellow’, outline=’black’)

A
Appp
plliicca
attiio
onn :: iin
ntteerra
accttiio
onn

MainWindow: modification d’affichage def effacer(self): self.canvas.delete(self.cercle)

def afficher(self):

self.cercle=self.canvas.create_oval(self.x,self.y, self.x+self.xcercle, self.y+self.ycercle,

fill=’yellow’)

def updateCercle(self,x):

self.canvas.delete(self.cercle) self.xcercle, self.ycercle=int(x),int(x)

self.cercle=self.canvas.create_oval(self.x,self.y, self.x+self.xcercle, self.y+self.ycercle,
fill=’yellow’)

8 sur 19 25/12/2022, 00:57

Firefox https://www.cours-gratuit.com/cours-framework-python/introduction-int...

Projet de Labo Oscilloscope

Projet de Labo

O
Osscciillllo
osscco
oppee

Autres exemples :

Mouvement vibratoire harmonique Mouvement vibratoire harmonique

OscilloGraphe : initialisation class OscilloGraphe(Canvas):

MSH International

Votre Assurance Santé

Sérénité d'esprit au quotidien pour vous & votre famille avec MSH International

Ouvrir

def __init__(self,boss=None,larg=200,haut=150): Canvas.__init__(self)

boss.title("OscilloGraphe : version 1") self.configure(width=larg,height=haut) ,=larg,haut
self.courbe=[]

OscilloGraphe : calcul du mouvement def calculVibration(self,

9 sur 19 25/12/2022, 00:57

Firefox https://www.cours-gratuit.com/cours-framework-python/introduction-int...

frequence=1,phase=0,amplitude=10):

"calcul de l’elongation sur 1 seconde" del self.courbe[0:] pas=(self.largeur-10)/1000.

for t in range(0,1001,5):

e=amplitude*sin(2*pi*frequence*t/1000-phase) x=10+t*pas y=self.hauteur/2-

e*self.hauteur/25 self.courbe.append((x,y))

return

C
Clla
assssee O
Osscciillllo
oGGrra
apph
hee :: vveerrssiio
onn 11

PPrro
oggrra
ammm
maattiio
onnp
prro
occééd
duurra
allee PPyytth
hoon
n :: PPrro
oggrra
ammm
maattiio
onnp
prro
occééd
duurra
allee

Programmation procédurale

PPyytth
hoon
n :: PPrro
oggrra
ammm
maattiio
onnp
prro
occééd
duurra
allee

Traitements de données, sortie de programme

# Traitements x = input(’Entrez la valeur de x : ’) y = input(’Entrez la valeur de y : ’) z =

input(’Entrez la valeur de z : ’) print "Les coordonnees spheriques du point :", x,y,z print "sont :
", spherical(x,y,z)

# sortie de programme (0) 

Composition class Rectangle:

"""Un rectangle A UN coin superieur gauche""" def __init__(self, coin, largeur, hauteur):

= coin self.largeur = largeur self.hauteur = hauteur

def __repr__(self):

return "<Rectangle(’%s’,’%s’,’%s’)>" \

% (,self.largeur, self.hauteur)

… . … …

TP:

Le widget « Entry » permet de récupérer le mot de passe saisi par l’utilisateur. L’appui sur le
bouton « Valider » permet d’exécuter la fonction Verification() qui doit tester si le mot de
passe est correct. Si le mot de passe est correct une boîte de dialogue « showinfo »
apparaît, informant que le mot de passe est correct et la fenêtre Tkinter est fermée. Si le
mot de passe est incorrect une boîte de dialogue « showwarning » apparaît, informant que
le mot de passe est incorrect.

2. Compléter, dans le script mot_passe.py, la ligne 5 permettant de tester si le mot de

passe est égal à « gustave_eiffel ».
if Motdepasse.get()3. Compléter la ligne 8 permettant de fermer la fenêtre Tkinter «
Mafenetre ».

4. Compléter les lignes 15 et 16 permettant de créer la fenêtre Tkinter « Mafenetre » et de

lui donner le titre « Identification Requise ».
5. Compléter les lignes 19 et 20 afin de créer le label « Mot de passe » en respectant la
forme donnée sur l’image ci-dessus.
Label1 = Label1.pack(……………………………………………………………………………………)

6. Compléter les lignes 29 et 30 afin de créer le bouton « Valider » en respectant la

forme donnée sur l’image ci-dessus.
Bouton = (……………………………………………………………………………………)

Bouton.pack(……………………………………………………………………………………)

7. Exécuter le script et vérifier le fonctionnement du programme.

8. Commenter la ligne 24 du script. Modifier-la afin d’obtenir d’autres couleurs
d’affichage et que le mot de passe soit masqué par le caractère « _ ». 

10 sur 19 25/12/2022, 00:57

Firefox https://www.cours-gratuit.com/cours-framework-python/introduction-int...

d’affichage et que le mot de passe soit masqué par le caractère « _ ». 

Widget Canvas (caneva) et gestion des images.

Un caneva est zone rectangulaire qui est intégrée à la fenêtre graphique et destinée à
contenir des dessins, des figures complexes ou images. Il est possible d’y placer des
graphiques, du texte, d’autres

widgets ou des cadres (frames).

L’objet « Canvas » peut accepter 4 paramètres :

fen : fenêtre tkinter dans laquelle sera integré le canveva.

with : largeur du caneva.

height : hauteur du caneva.

background : couleur de fond du canvas (par défaut, la couleur de fond est grise).

Syntaxe

can=Canvas(fen,width=1000,height=1000,background='red')

Création d’un canevas intégré à la fenêtre Tkinter « fen » de dimensions 1000x1000 et de

fond d’écran rouge.

Chaque élément affiché sera représenté par un item placé dans une liste d’affichage.

La méthode create_image(x,y,anchor=…,image=…) permet d’afficher une image dans un

canevas :

- x,y : coordonnées du point par rapport auquel sera positionnée l’image.

- anchor : position de l’image par rapport aux coordonnées (x,y). L’image sera positionnée
de sorte que le point (x, y) soit situé au milieu de son bord inférieur (sud) si anchor = S. Par Cours Excel Les Introduction à
Graphiques l’algorithmique et à la
défaut anchor = CENTER et dans ce cas l’image sera positionnée de sorte que le point (x,
programmation avec…
y) soit situé au centre de l’image.

Syntaxe

Item1=can.create_image(0,100,anchor=N,image=photo) Affichage de l’image « photo »

dans le canevas « can », l’image sera positionnée de sorte que le point (0,100) soit situé au
milieu de son bord supérieur.

Exercice 5 : Afficher des images

1. Ouvrir le script aff_images.py.

Ce script permet d’afficher deux images dans un canevas. Un bouton quitter permet de Initiation à la
fermer la fenêtre Tkinter.… programmation avec BTS Arts et Industries
Python et C++ Graphiques

11 sur 19 25/12/2022, 00:57

Firefox https://www.cours-gratuit.com/cours-framework-python/introduction-int...

MSH
INTERNATIONAL

Votre
Assurance
Santé
Sérénité d'esprit au
quotidien pour vous & votre
famille avec MSH
International

Ouvrir

12 sur 19 25/12/2022, 00:57

Firefox https://www.cours-gratuit.com/cours-framework-python/introduction-int...

13 sur 19 25/12/2022, 00:57

Firefox https://www.cours-gratuit.com/cours-framework-python/introduction-int...

14 sur 19 25/12/2022, 00:57

Firefox https://www.cours-gratuit.com/cours-framework-python/introduction-int...

15 sur 19 25/12/2022, 00:57

Firefox https://www.cours-gratuit.com/cours-framework-python/introduction-int...

16 sur 19 25/12/2022, 00:57

Firefox https://www.cours-gratuit.com/cours-framework-python/introduction-int...

17 sur 19 25/12/2022, 00:57

Firefox https://www.cours-gratuit.com/cours-framework-python/introduction-int...

18 sur 19 25/12/2022, 00:57

Firefox https://www.cours-gratuit.com/cours-framework-python/introduction-int...

19 sur 19 25/12/2022, 00:57