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

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 à cette page

Pour cela, entrer la commande dans votre terminal

>>> pip install tk

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…

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

import tkinter as tk
 
fenetre = tk.Tk()
 
label = tk.Label(fenetre, text="Hello World")
label.pack()
 
fenetre.mainloop()

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

import tkinter as tk

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
value = StringVar()
value.set("texte par défaut")
entree = tk.Entry(fenetre, textvariable=value, width=30)
entree.pack()

Pour récupérer la valeur d'un input il vous faudra utiliser la méthode get() :

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

Nous pouvons placer nos boutons sur une grille.

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)

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)

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

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)
 

Dans cette exemple, nous créons en mémoire la grille que nous allons utiliser par la suite pour positionner les boutons.

Les listes permettent de récupérer une valeur sélectionnée par l'utilisateur.

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

Un canvas (toile, tableau en français) est un espace dans lequel vous pouvez dessiner ou écrire ce que vous voulez:

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

Mais nous pouvons aussi créer d'autres éléments :

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

Si vous voulez changer les coordonnées d'un élement crée dans le canevas, vous pouvez utiliser la méthode coords .

canvas.coords(élément, x0, y0, x1, y1)

Pour supprimer un élément, nous pouvons utiliser la méthode delet

canvas.delete(élément)

Le panedwindow est un conteneur qui peut contenir autant de panneaux que nécessaire disposé horizontalement ou verticalement.

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

Il est possible de créer une barre de menu comme-ceci:

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)

La grille:
Il est possible de placer les éléments en raisonnant en grille:

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)

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)