Différences

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

--- ateliers:robotique:les_bases_de_tkinter [2023/02/13 15:12] – [traduisons :] 2a02:a03f:c67b:d100:7da1:ecb6:ce07:cfe6
+++ ateliers:robotique:les_bases_de_tkinter [2024/03/25 14:02] (Version actuelle) – [traduisons :] 109.133.206.189
@@ Ligne 2: / Ligne 2: @@
 {{:ateliers:robotique:calctkinter.png?nolink&200 |}}
-Ecrire un programme, c'est bien, mais l'interfacer, c'est mieux !\\
+Écrire un programme, c'est bien, mais l'interfacer, c'est mieux !\\
 //"L'interfaquoi?"// \\
@@ Ligne 10: / Ligne 10: @@
 Par défaut, quand nous exécutons notre code dans un IDE comme Pycharm, celui-ci se lance dans le terminal.\\
 Avouer que ce n'est pas fort pratique!\\
-Pour que notre programme soit plus convivial et surtout ergonomique, nous créons une interface graphique avec la librairie "Tkinter"
+Pour que notre programme soit plus convivial et surtout ergonomique, nous créons une interface graphique avec la librairie "Tkinter".
 Tkinter est un module de base intégré dans Python , normalement vous n'avez rien à faire pour pouvoir l'utiliser. L'un des avantages de Tkinter est sa portabilité sur les OS les plus utilisés par le grand public.
@@ Ligne 17: / Ligne 17: @@
 Pour utiliser la librairie, nous devons au préalable l'installer.\\
-Pour cela, rien de plus simple, nous effectuons la requête via la commande PIP\\
+Pour cela, rien de plus simple, nous effectuons la requête via la commande PIP.\\
-Si vous n'avez pas encore utilisé la commande PIP, vous pouvez vous référer à[[ateliers:robotique:les_bases_de_python| cette page]]
+Si vous n'avez pas encore utilisé la commande PIP, vous pouvez vous référer à [[ateliers:robotique:les_bases_de_python| cette page]]
 Pour cela, entrer la commande dans votre terminal
@@ Ligne 36: / Ligne 36: @@
 <code python>
-from tkinter import *
+import tkinter as tk
-fenetre = Tk()
+fenetre = tk.Tk()
-label = Label(fenetre, text="Hello World")
+label = tk.Label(fenetre, text="Hello World")
 label.pack()
@@ Ligne 52: / Ligne 52: @@
 <code python>
-from tkinter import *
+import tkinter as tk
 </code>
-Cela signifie que, **depuis** (from) **tkinter** tu importes **tout** (*)
+Cela signifie que tu importes "tkinter", et que tu l'appelles "tk"
 Nous créons ensuite une variable nommée "fenetre" dans laquelle nous stockons la fonction "Tk()"
@@ Ligne 61: / Ligne 61: @@
 ==== Entrée/input ====
+<code python>
 # entrée
 value = StringVar()
 value.set("texte par défaut")
-entree = Entry(fenetre, textvariable=string, width=30)
+entree = tk.Entry(fenetre, textvariable=value, width=30)
 entree.pack()
+</code>
+==== Récupérer la valeur d'un input ====
+Pour récupérer la valeur d'un input il vous faudra utiliser la méthode get() :
+<code python>
+def recupere():
+    showinfo("Alerte", entree.get())
+value = StringVar()
+value.set("Valeur")
+entree = Entry(fenetre, textvariable=value, width=30)
+entree.pack()
+bouton = Button(fenetre, text="Valider", command=recupere)
+bouton.pack()
+</code>
+==== La pasition des boutons ====
+Nous pouvons placer nos boutons sur une grille.
+<code python>
+Button(fenetre, text='L1-C1', borderwidth=1).grid(row=1, column=1)
+Button(fenetre, text='L1-C2', borderwidth=1).grid(row=1, column=2)
+Button(fenetre, text='L2-C3', borderwidth=1).grid(row=2, column=3)
+Button(fenetre, text='L2-C4', borderwidth=1).grid(row=2, column=4)
+Button(fenetre, text='L3-C3', borderwidth=1).grid(row=3, column=3)
+</code>
+<code python>
+clear = Button(btns_frame, text = "C", fg = "black", width = 32, height = 3, bd = 0, bg = "#eee", cursor = "hand2",
+               command=lambda: bt_clear()).grid(row = 0, column = 0, columnspan = 3, padx = 1, pady = 1)
+</code>
+==== La grille ====
+Il est possible de placer les éléments en raisonnant en grille:
+Pour cela, nous imaginons dans notre tête des colonnes (verticales) et des lignes (horizontales).\\
+La colonne se dit **row** et la ligne se dit **colomn**
+Pour positionner une boutons en haut à gauche de notre fenêtre, nous lui passons en paramètre **row = 1** et en **colomn = 1**
+<code python>
+for ligne in range(5):
+    for colonne in range(5):
+        Button(fenetre, text='L%s-C%s' % (ligne, colonne), borderwidth=1).grid(row=ligne, column=colonne)
+</code>
+Dans cette exemple, nous créons en mémoire la grille que nous allons utiliser par la suite pour positionner les boutons.
+====  Les listes ====
+Les listes permettent de récupérer une valeur sélectionnée par l'utilisateur.
+<code python>
+# liste
+liste = Listbox(fenetre)
+liste.insert(1, "Python")
+liste.insert(2, "PHP")
+liste.insert(3, "jQuery")
+liste.insert(4, "CSS")
+liste.insert(5, "Javascript")
+liste.pack()
+</code>
+==== Canvas ====
+Un canvas (toile, tableau en français) est un espace dans lequel vous pouvez dessiner ou écrire ce que vous voulez:
+<code python>
+# canvas
+canvas = Canvas(fenetre, width=150, height=120, background='yellow')
+ligne1 = canvas.create_line(75, 0, 75, 120)
+ligne2 = canvas.create_line(0, 60, 150, 60)
+txt = canvas.create_text(75, 60, text="Cible", font="Arial 16 italic", fill="blue")
+canvas.pack()
+</code>
+Mais nous pouvons aussi créer d'autres éléments :
+<code python>
+create_arc()        :  arc de cercle
+create_bitmap()     :  bitmap
+create_image()      :  image
+create_line()       :  ligne
+create_oval()       :  ovale
+create_polygon()    :  polygone
+create_rectangle()  :  rectangle
+create_text()       :  texte
+create_window()     :  fenetre
+</code>
+Si vous voulez changer les coordonnées d'un élement crée dans le canevas, vous pouvez utiliser la méthode coords .
+<code python>
+canvas.coords(élément, x0, y0, x1, y1)
+</code>
+Pour supprimer un élément, nous pouvons utiliser la méthode **delet**
+<code python>
+canvas.delete(élément)
+</code>
+==== PanedWindow ====
+Le panedwindow est un conteneur qui peut contenir autant de panneaux que nécessaire disposé horizontalement ou verticalement.
+<code python>
+p = PanedWindow(fenetre, orient=HORIZONTAL)
+p.pack(side=TOP, expand=Y, fill=BOTH, pady=2, padx=2)
+p.add(Label(p, text='Volet 1', background='blue', anchor=CENTER))
+p.add(Label(p, text='Volet 2', background='white', anchor=CENTER) )
+p.add(Label(p, text='Volet 3', background='red', anchor=CENTER) )
+p.pack()
+</code>
+===== Pour aller plus loin =====
+==== Barre de menu ====
+Il est possible de créer une barre de menu comme-ceci:
+<code python>
+def alert():
+    showinfo("alerte", "Bravo!")
+menubar = Menu(fenetre)
+menu1 = Menu(menubar, tearoff=0)
+menu1.add_command(label="Créer", command=alert)
+menu1.add_command(label="Editer", command=alert)
+menu1.add_separator()
+menu1.add_command(label="Quitter", command=fenetre.quit)
+menubar.add_cascade(label="Fichier", menu=menu1)
+menu2 = Menu(menubar, tearoff=0)
+menu2.add_command(label="Couper", command=alert)
+menu2.add_command(label="Copier", command=alert)
+menu2.add_command(label="Coller", command=alert)
+menubar.add_cascade(label="Editer", menu=menu2)
+menu3 = Menu(menubar, tearoff=0)
+menu3.add_command(label="A propos", command=alert)
+menubar.add_cascade(label="Aide", menu=menu3)
+fenetre.config(menu=menubar)
+</code>
+La grille: \\
+Il est possible de placer les éléments en raisonnant en grille:
+<code python>
+for ligne in range(5):
+    for colonne in range(5):
+        Button(fenetre, text='L%s-C%s' % (ligne, colonne), borderwidth=1).grid(row=ligne, column=colonne)
+</code>
+<code python>
+Button(fenetre, text='L1-C1', borderwidth=1).grid(row=1, column=1)
+Button(fenetre, text='L1-C2', borderwidth=1).grid(row=1, column=2)
+Button(fenetre, text='L2-C3', borderwidth=1).grid(row=2, column=3)
+Button(fenetre, text='L2-C4', borderwidth=1).grid(row=2, column=4)
+Button(fenetre, text='L3-C3', borderwidth=1).grid(row=3, column=3)
+</code>