Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
tkinter [Le 04/02/2013, 00:49] – [Les diffèrentes méthodes de placements] couverture-jonathan-btkinter [Le 25/11/2023, 14:36] (Version actuelle) – [PyConnect] ne pas utiliser la commande ifconfig mais ip addr show Amiralgaby
Ligne 1: Ligne 1:
-{{tag> programmation BROUILLON}}+{{tag> programmation python}}
 ---- ----
 ====== Créer des interfaces graphiques avec Tkinter ====== ====== Créer des interfaces graphiques avec Tkinter ======
Ligne 5: Ligne 5:
 ===== Présentation ===== ===== Présentation =====
  
-**Tkinter** est une librairie basique mais très simple d'utilisation pour construire rapidement des interfaces graphiques avec [[:python|Python]].+**Tkinter** est une bibliothèque basique mais très simple d'utilisation pour construire rapidement des interfaces graphiques avec [[:python|Python]].
  
-Le style de widgets n'est pas très esthétique (question de goût) mais ça reste tout de même une bonne base pour commencer dans le développement d'interface graphique (GUI). +Le style de widgets n'est pas très esthétique (question de goût) mais ça reste tout de même une bonne base pour commencer dans le développement d'interface graphique (GUI).
  
 ===== Installation ===== ===== Installation =====
Ligne 13: Ligne 13:
 [[:tutoriel:comment_installer_un_paquet|Installez les paquets]]: [[:tutoriel:comment_installer_un_paquet|Installez les paquets]]:
   * **[[apt>python-tk]]**   * **[[apt>python-tk]]**
-  * **[[apt>python-imaging-tk]]** pour la gestion des images sous tkinter  +  * **[[apt>python-imaging-tk]]** pour la gestion des images sous tkinter 
-  * **[[apt>python3-tk]]** pour la version 3.x de python. +  * **[[apt>python3-tk]]** pour la version 3.x de python. (La version 3.x comprend les widgets ttk)
-Ceci peut se résumer avec l'outil [[:apt-get]] en saisissant dans un [[:terminal]] les [[:commande_shell|commandes]] suivantes: +
-<code>sudo apt-get install python-tk +
-sudo apt-get install python-imaging-tk +
-sudo apt-get install python3-tk +
-</code>+
  
-===== Etude d'un programme simple ===== +===== Étude d'un programme simple ===== 
-Pour commencer, regardez et essayer de comprendre la structure du code :+Pour commencer, regardez et essayez de comprendre la structure du code :
  
 <file python> <file python>
Ligne 29: Ligne 24:
 # #
 #  Programme Tkinter.py #  Programme Tkinter.py
-#  +#  Démonstration du language
  
  
-from Tkinter import *  #Pour python3.x Tkinter devient tkinter+from Tkinter import * #Pour python3.x Tkinter devient tkinter
  
 class ApplicationBasic(): class ApplicationBasic():
Ligne 49: Ligne 44:
  self.bou_quitter.pack()  self.bou_quitter.pack()
      
- self.fen.mainloop()+ def run(self): 
 +                self.fen.mainloop()
   
  def action(self):  def action(self):
Ligne 60: Ligne 56:
 if __name__ == '__main__': if __name__ == '__main__':
  app = ApplicationBasic()  app = ApplicationBasic()
 +        app.run()
 </file> </file>
 chaque partie correspond à : chaque partie correspond à :
   * importation de la librairie : <file python>from Tkinter import *</file>   * importation de la librairie : <file python>from Tkinter import *</file>
-  * la création d'une classe : <file python>class ApplicationBasic():</file> +  * création d'une classe : <file python>class ApplicationBasic():</file> 
-  * la création d'une méthode constructrice : <file python>def __init__(self):</file> +  * création d'une méthode constructrice : <file python>def __init__(self):</file>
   * instancier une fenêtre Tk() : <file python>self.fen = Tk()</file>   * instancier une fenêtre Tk() : <file python>self.fen = Tk()</file>
   * définition du titre de cette fenêtre : <file python>self.fen.title('Tkinter')</file>   * définition du titre de cette fenêtre : <file python>self.fen.title('Tkinter')</file>
  
-  * création d'un simple bouton action : <file python>self.bou_quitter = Button(self.fen)</file>+  * création d'un simple bouton action : <file python>self.bou_action = Button(self.fen)</file>
      * configuration de ce bouton : <file python>self.bou_action.config(text='Action', command=self.action)</file>      * configuration de ce bouton : <file python>self.bou_action.config(text='Action', command=self.action)</file>
      * mise en place de celui-ci dans la fenêtre avec une méthode de placement : <file python>self.bou_action.pack()</file>      * mise en place de celui-ci dans la fenêtre avec une méthode de placement : <file python>self.bou_action.pack()</file>
-     * définition de la fonction qui sera connecté au bouton //Action// : <file python> +     * définition de la fonction qui sera connectée au bouton //Action// : <file python> 
-  ef action(self) :+  def action(self) :
       '''Action sur un bouton'''       '''Action sur un bouton'''
       self.lab = Label(self.fen)       self.lab = Label(self.fen)
Ligne 87: Ligne 84:
   * assignation de la classe à une variable :<file python>app = ApplicationBasic()</file>   * assignation de la classe à une variable :<file python>app = ApplicationBasic()</file>
  
-Enregistrer votre fichier source avec une exrenstion .py +Enregistrez votre fichier source avec une extension //.py// puis lancez-le depuis un [[:terminal]] en saisissant la [[:commande_shell|commande]] suivante: 
-Dans un terminal : +<code>python 'fichier.py'</code>
-</code>python 'fichier.py'</code>+
  
  {{:programmetkinter.png?direct&100|Fenêtre nommée Tkinter avec les deux boutons}}            {{:programmetkinter.png?direct&100|Fenêtre nommée Tkinter avec les deux boutons}}          
 {{:terminal:programmetkinter01.png?direct&100|Fenêtre Tkinter après appui sur le bouton //Action//}} {{:terminal:programmetkinter01.png?direct&100|Fenêtre Tkinter après appui sur le bouton //Action//}}
  
-===== Configurer correctement sa fenêtre ===== +===== Exemple de programmes ===== 
-Nous allons voir dans cette section comment bien configurer sa fenêtre selon le but recherché. +==== PyConnect ==== 
-Nous prendrons comme référence les variables du programme précédent. +La structure du code est un peu différente car j'utilise une classe.
-Voici les principales configurations les plus utilisées : +
-==== Titre ====+
  
-La configuration du titre de la fenêtre s'effectue trés simplement : 
-<file python>self.fen.title('Votre Titre')</file> 
- 
-==== Dimensions ==== 
- 
-Pour configurer la taille : 
-<file python>self.fen.geometry((400x400))</file> 
-Le code peut varier selon la logique du développeur, nous pourions trés bien écrire : 
 <file python> <file python>
-self.taille = (400,400) +#!/usr/bin/env python 
-self.fen.geometry(self.taille)+# -*- coding: utf-8 -*- 
 +# 
 +#  PyConnect.py 
 +# 
 +# Vérification de la connexion internet avec interface et ping 
 +# 
 +  
 +#Importation des librairies nécéssaire au bon fonctionnement du programme. 
 +#Tkinter pour l'interface graphique 
 +#urllib pour les schémas internet 
 +#os pour dialoguer avec le systeme 
 +from tkinter import * 
 +from urllib import request 
 +import os 
 +class Application(Frame): 
 + def __init__(self,parent): 
 + Frame.__init__(self) 
 + self.parent = parent 
 + self.etat = Label(self, text='',font='Times 28 italic bold') 
 + self.etat.grid(row=0, column=0, columnspan=4, sticky=NSEW) 
 +  
 + self.lab_iface = Label(self, text='Interfaces:',font='Times',underline=0) 
 + self.lab_iface.grid(row=1,column=0,sticky=NSEW) 
 +  
 + self.iface = Text(self, font='Times 10') 
 + self.iface.grid(row=2, column=0, sticky=NSEW) 
 +  
 + self.lab_ping = Label(self, text='Ping:',font='Times',underline=0) 
 + self.lab_ping.grid(row=1,column=2,sticky=NSEW) 
 +  
 + self.ping = Text(self, font='Times',state='disabled') 
 + self.ping.grid(row=2, column=1, columnspan=3, sticky=NSEW) 
 +  
 + self.recharger = Button(self, text='Recharger', font='Times', command=self.checkIface) 
 + self.recharger.grid(row=3, column=0, sticky=NSEW) 
 +  
 + self.quitter = Button(self, text='Quitter', font='Times', command=self.leave) 
 + self.quitter.grid(row=3, column=1, columnspan=3,sticky=NSEW) 
 +  
 + self.checkIface() 
 +  
 + def checkIface(self): 
 + self.iface.config(state='normal') 
 + self.iface.delete(1.0,END) 
 + self.listing = os.popen('ip addr show', 'r').read() 
 + self.iface.insert(END, self.listing) 
 + self.iface.config(state='disabled') 
 + self.checkInternet() 
 +  
 + def checkInternet(self): 
 + try: 
 + request.urlopen('http://www.google.com') 
 + self.etat.config(text='Connexion internet active') 
 + self.checkPing() 
 + except Exception as e: 
 +                    print(e) 
 +                    self.etat.config(text='Connexion internet inactive') 
 +                    self.ping.config(state='normal') 
 +                    self.ping.delete(1.0,END) 
 +                    self.ping.insert(END, 'Ping impossible...') 
 +                    self.ping.config(state='disabled') 
 +  
 + def checkPing(self): 
 + self.ping.config(state='normal') 
 + self.ping.delete(1.0,END) 
 + c = 3 
 + while c != 0: 
 + self.pingPacket = os.popen('ping -c 1 google.com').read() 
 + self.ping.insert(END, self.pingPacket+'\n') 
 + self.parent.after(1,self.parent.update()) 
 + c = c-1 
 +  
 + self.ping.config(state='disabled') 
 +  
 + def leave(self): 
 + quit() 
 +  
 +if __name__ == '__main__': 
 + fen = Tk() 
 + fen.title('Connexion Internet') 
 + fen.resizable(False,False) 
 +  
 + app = Application(fen) 
 + app.grid(row=0, column=0, sticky=NSEW) 
 +  
 + fen.mainloop()
 </file> </file>
-ou encore pour un petit exemple : +{{:pyconnect.png?800|}}
-<file python> +
-self.fenwidth = 400 +
-self.fenheight = 400 +
-self.fen.geometry((self.fenwidth,self.fenheight)) +
-</file> +
-Noter que la configuration des dimensions se fait selon le shéma: 'largeur' x 'hauteur'. +
-==== Placement sur l'écran==== +
- +
-Imaginer maintenant vouloir placer une fenêtre de (400x400) centré sur votre écran. +
-Pour ma part je créerais une fonction gérant cela : +
-<file python> +
-self.screenwidth = self.fen.winfo_screenwidth()  #Récupération de la largeur de l'écran +
-self.screenheight = self.fen.winfo_screenheight()  #Récupération de la hauteur de l'écran +
- +
-def geometry_fen(self) : +
- '''Cette fonction est utilisée pour mettre à jour les éléments graphiques +
- et créer une géométrie pour la fenêtre.''' +
- self.fen.update_idletasks() #Recalcul des propriétés de la fenêtre en prenant en compte les widgets placés. +
-  +
- self.fenwidth = 400  #Définition de la largeur de la fenêtre. +
-                self.fenheight = 400  #Définition de la hauteur de la fenêtre. +
- +
- x = (self.screenwidth/2) - (self.fenwidth/2)  #Division par 2 de la largeur de l'écran moins la largeur de la fenêtre par 2. +
- y = (self.screenheight/2) - (self.fenheight/2) #Division par 2 de la hauteur de l'écran moins la hauteur de la fenêtre par2. +
-  +
- self.fen.geometry('%dx%d+%d+%d' % (self.fenwidth, self.fenheight, x, y))  #Définition de la géométrie de la fenêtre. +
-</file> +
-Pour appliquer la géométrie, il vous suffira de lancer cette fonction avant de lancer le gestionnaire d'événements. +
-==== Redimmensionnement ==== +
- +
-Le redimensionnement de la fenêtre, par défaut est vrai autant pour x et y. Cela veut dire que l'utilisateur peut modifier autant qu'il le souhaite la largeur comme la hauteur de la fenêtre. +
- +
-Comment interdire le redimmensionnement de la fenêtre ? +
-<file python> +
-self.fen.resizable(False,False)  #Toujours suivant le même schéma : largeur, hauteur. +
-</file> +
-Est-il possible d'interdire de modifier seulement la hauteur ou la largeur ? +
-<file python> +
-self.fen.resizable(True,False) #Pour autoriser seulement le changement en x. +
-self.fen.resizable(False,True) #Pour autoriser seulement le changement en y. +
-</file> +
-==== Style de fenêtre ==== +
- +
-===== Les 4 widgets de base ===== +
-==== Label ==== +
- +
-Le Label est utilisé pour afficher du texte dans la fenêtre. +
-==== Button ==== +
- +
-Un simple bouton cliquable. +
-==== Canvas ==== +
- +
-Le widget Canvas est le plus intéressant de tous les widgets présents dans la librairie. +
-Pourquoi? Tout simplement parce que vous pouvez pousser vos interfaces graphiques au maximum autant dans le style que dans les fonctionnalités.... +
-Pour une construction simple et rapide d'interface en Tk(), vous utiliserez la plupart du temps les méthodes de placement (pack(), grid(), place() ), nous expliquerons ces méthodes de placement un peu plus tard. +
-Vous pourrez vous apercevoir que ces trois méthodes sont limitées et particulièrement linéaires. +
- +
-=== Un peu de géométrie === +
- +
-=== Dessiner === +
- +
-=== Positionner des éléments === +
- +
-=== Déplacements d'éléments présents dans la Canvas === +
- +
-=== Créer des effets graphiques === +
- +
- +
-==== Entry ==== +
- +
-Zone de récupération de saisies utilisateur. +
- +
-===== Les autres widgets ===== +
-En construction +
- +
-===== La configuration des widgets ===== +
-Chaque widgets et configurable dans la limite du raisonnable :-). Nous allons voir dans cette partie comment configurer vos widgets pour s'approcher au maximum de ce que vous recherché. +
- +
-==== Les couleurs ==== +
-En construction +
-==== La police ==== +
-En construction +
-==== Les dimensions ==== +
-En construction +
-==== Reliefs et bordures ==== +
-En construction +
-==== Autre ==== +
-En construction +
- +
-===== Relation Fonctions/Widgets ===== +
-En construction +
- +
-===== Les diffèrentes méthodes de placements ===== +
-Il existe trois méthodes de placements dans la librairie Tkinter. L'utilisation très simpliste de ces méthodes vous ferrons gagner beaucoup de temps lors de vos codages. +
-==== Pack() ==== +
-En construction +
- +
-==== Grid() ==== +
-En construction +
- +
-==== Place() ==== +
-En construction +
- +
-===== Les événements ===== +
-==== Souris ==== +
-En construction +
-==== Clavier ==== +
-En construction +
-==== Autres ==== +
-En construction +
- +
-===== Le Canvas, un widget intéressant ===== +
-En construction +
- +
-===== Un peu de multimédia ===== +
-En construction +
-==== Gérer des images ==== +
-En construction +
-==== Gérer de la musique ==== +
-En construction +
- +
-===== Qu'avons nous appris? ===== +
-En construction +
- +
-===== Exemple de programmes ===== +
- +
-==== PyQuizzz version 0.1 -- GUI - Tkinter (en cours de construction) ==== +
- +
-{{:capture_du_2013-02-04_00_02_19.png?direct&300|}} +
- +
-=== L'interface === +
-En construction +
- +
-=== Le code === +
-En construction +
-===== Pour aller plus loin ===== +
-En construction +
 ===== Liens ===== ===== Liens =====
-  * [[http://wiki.python.org/moin/TkInter|Tkinter]] (En)+  * [[https://wiki.python.org/moin/TkInter|Tkinter]] (En) 
 +  * [[http://effbot.org/tkinterbook/|Tkinter]] (En) 
 +  * [[https://github.com/tarball69/tkRAD/wiki/Accueil|tkRAD: Tkinter XML widget builder]] (Fr) - génération facile de widgets Tkinter grâce à un fichier source XML.
   * [[:python]]   * [[:python]]
   * [[:glade]] : pour créer des GUI facilement   * [[:glade]] : pour créer des GUI facilement
  
 ---- ----
-//Contributeurs:Boileau jonathan -- Mail: [[boileau_jonathan@hotmail.fr]] //+//Contributeurs:Boileau jonathan -- Mail: [[couverture.jonathan.b@gmail.com]] //
tkinter.1359935385.txt.gz · Dernière modification : de couverture-jonathan-b
CC Attribution-Noncommercial-Share Alike 4.0 International Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC Attribution-Noncommercial-Share Alike 4.0 International