====== Utiliser la librairie python Tkinter ======

{{:ateliers:robotique:calctkinter.png?nolink&200 |}}
Écrire un programme, c'est bien, mais l'interfacer, c'est mieux !\\

//"L'interfaquoi?"// \\

L'interfacer, c'est le fait de lui créer une interface graphique !\\

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".

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.

===== Installer Tkinter =====

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.\\
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

<code python>
>>> pip install tk
</code>

===== Les widgets =====

Pour créer un logiciel graphique vous devez ajouter dans une fenêtre des éléments graphiques que l'on nomme widget. \\
Ce widget peut être tout aussi bien une liste déroulante que du texte ou un champ d'entrée... 

===== Hello world =====

Pour commencer notre première interface, rien de tel que le classique, mais indémodable "Hello Word"!\\

<code python> 
import tkinter as tk

fenetre = tk.Tk()

label = tk.Label(fenetre, text="Hello World")
label.pack()

fenetre.mainloop()

</code>

==== traduisons : ====

Pour indiquer à python qu'il doit importer la librairie, nous écrivons :

<code python> 
import tkinter as tk
</code>

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()"

==== Entrée/input ====

<code python>
# entrée
value = StringVar()
value.set("texte par défaut")
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>