Introduzione alla GUI con Tkinter in Python

Widget

I widget sono simili, nello spirito, agli elementi in HTML. In Tkinter troverai diversi tipi di widget per diversi tipi di elementi. Sono elementi GUI standard e forniscono all'utente controlli come pulsanti, testo, menu e caselle di testo.

Comprendiamo tutti questi widget in Tkinter, insieme a un esempio (Fonte).

• Button: il widget Button ha una proprietà di attivazione/disattivazione. Quando un utente fa clic sul pulsante, in Tkinter viene attivato un evento.

  Sintassi: button_widget = tk.Button(widget, option=placeholder) dove widget è l'argomento per la finestra/frame padre mentre option è un segnaposto che può avere vari valori come colore di primo piano e di sfondo, font, command (per la chiamata di funzione), image, altezza e larghezza del pulsante.

• Canvas: Canvas viene usato per disegnare forme nella tua GUI e supporta vari metodi di disegno.

  Sintassi: canvas_widget = tk.Canvas(widget, option=placeholder) dove widget è il parametro per la finestra/frame padre mentre option è un segnaposto che può avere vari valori come spessore del bordo, colore di sfondo, altezza e larghezza del widget.

• Checkbutton: Checkbutton registra uno stato on-off o vero-falso. Ti permette di selezionare più di un'opzione alla volta e anche di lasciarlo deselezionato.

  Sintassi: checkbutton_widget = tk.CheckButton(widget, option=placeholder) dove widget è il parametro per la finestra/frame padre mentre option è un segnaposto che può avere vari valori come titolo, testo, colore di sfondo e di primo piano mentre il widget è sotto il cursore, font, image, ecc.

• Entry: il widget Entry viene usato per creare campi di input o per ottenere testo in input dall'utente all'interno della GUI.

  Sintassi: entry_widget = tk.Entry(widget, option=placeholder) dove widget è il parametro per la finestra/frame padre mentre option è un segnaposto che può avere vari valori come spessore del bordo, colore di sfondo, larghezza e altezza del pulsante, ecc.

• Frame: Frame viene usato come contenitore in Tkinter per raggruppare e organizzare correttamente i widget.

  Sintassi: frame_widget = tk.Frame(widget, option=placeholder) dove widget è il parametro per la finestra/frame padre mentre option è un segnaposto che può avere vari valori come spessore del bordo, altezza e larghezza del widget, highlightcolor (colore quando il widget è a fuoco).

• Label: Label è usato per creare widget su una singola riga come testo, immagini, ecc.

  Sintassi: label_widget = tk.Label(widget, option=placeholder) dove widget è il parametro per la finestra/frame padre mentre option è un segnaposto che può avere vari valori come il font di un pulsante, colore di sfondo, image, larghezza e altezza del pulsante.

Puoi trovare l'elenco completo dei widget nella documentazione ufficiale di Python.

Gestione della geometria

Tutti i widget in Tkinter hanno alcune misure di geometria. Queste misure ti permettono di organizzare i widget all'interno dei frame padre o dell'area del widget padre.

Una delle classi di gestione della geometria, cioè pack(), è già stata trattata qui.

A questo scopo, Tkinter ti mette a disposizione tre principali classi di gestione della geometria:

• pack(): organizza i widget a blocchi e occupa tutta la larghezza disponibile. È un metodo convenzionale per mostrare i widget nella finestra.
  
  
• grid(): organizza i widget in una struttura simile a una tabella. Lo imparerai in dettaglio più avanti in questo tutorial.
  
  
• place(): serve a posizionare i widget in una posizione specifica come indicato dall'utente nel widget padre.

Organizzare layout e widget

In questa sezione del tutorial userai sia la geometria sia i widget, e vedrai la magia di Tkinter.

Per disporre il layout nella window, userai la classe del widget Frame. Creiamo un semplice programma per vedere come funziona il Frame.

• Definirai due frame - superiore e inferiore con l'aiuto della classe pack. La classe Frame aiuterà a creare una divisione nella finestra. In pratica, una singola finestra sarà replicata due volte come superiore e inferiore sotto forma di Frame.

• Infine, creerai quattro pulsanti nella finestra, due per ciascun frame. Puoi nominare e colorare i tuoi pulsanti come preferisci come parametro.

import tkinter

# Let's create the Tkinter window.
window = tkinter.Tk()
window.title("GUI")

# You will first create a division with the help of Frame class and align them on TOP and BOTTOM with pack() method.
top_frame = tkinter.Frame(window).pack()
bottom_frame = tkinter.Frame(window).pack(side = "bottom")

# Once the frames are created then you are all set to add widgets in both the frames.
btn1 = tkinter.Button(top_frame, text = "Button1", fg = "red").pack() #'fg or foreground' is for coloring the contents (buttons)

btn2 = tkinter.Button(top_frame, text = "Button2", fg = "green").pack()

btn3 = tkinter.Button(bottom_frame, text = "Button3", fg = "purple").pack(side = "left") #'side' is used to left or right align the widgets

btn4 = tkinter.Button(bottom_frame, text = "Button4", fg = "orange").pack(side = "left")

window.mainloop()

Eseguiamo il codice qui sopra e vediamo l'output.

Grid

Proprio come un Frame, una griglia è un altro modo per organizzare i widget. Usa il concetto di matrice riga-colonna. Facciamo un'analogia tra la classe grid e l'idea riga-colonna con l'aiuto del diagramma qui sotto.

Grid prende principalmente due parametri, row e column. Come mostrato nella figura sopra, immagina che 00 corrisponda al primo pulsante mentre 01 al secondo. E per posizionare due pulsanti uno accanto all'altro, grid prenderà come parametri riga e colonna rispettivamente 00 e 01.

Usiamo checkbutton per capire come funziona la classe grid. Definirai due checkbutton e specificherai del testo per entrambi i pulsanti. Lo stato dei checkbutton sarà deciso da onvalue e offvalue mentre lo stato corrente del checkbutton sarà tracciato da IntVar(), che sarà memorizzato in una variabile separata. Quando offvalue=1 e onvalue=0 il checkbutton corrispondente sarà selezionato.

Passando ora alla classe grid, passerai un parametro row, che posizionerà il pulsante nella prima riga se row=0 e nella seconda riga se row=1.

import tkinter
from tkinter import *
top = tkinter.Tk()
CheckVar1 = IntVar()
CheckVar2 = IntVar()
tkinter.Checkbutton(top, text = "Machine Learning",variable = CheckVar1,onvalue = 1, offvalue=0).grid(row=0,sticky=W)
tkinter.Checkbutton(top, text = "Deep Learning", variable = CheckVar2, onvalue = 0, offvalue =1).grid(row=1,sticky=W)
top.mainloop()

Eseguiamo questo codice e vediamo l'output.

Facciamo un altro esempio per capire grid. In questo esempio passerai anche un column come parametro insieme a row.

import tkinter
# Let's create the Tkinter window
window = tkinter.Tk()
window.title("GUI")

# You will create two text labels namely 'username' and 'password' and and two input labels for them

tkinter.Label(window, text = "Username").grid(row = 0) #'username' is placed on position 00 (row - 0 and column - 0)

# 'Entry' class is used to display the input-field for 'username' text label
tkinter.Entry(window).grid(row = 0, column = 1) # first input-field is placed on position 01 (row - 0 and column - 1)

tkinter.Label(window, text = "Password").grid(row = 1) #'password' is placed on position 10 (row - 1 and column - 0)

tkinter.Entry(window).grid(row = 1, column = 1) #second input-field is placed on position 11 (row - 1 and column - 1)

# 'Checkbutton' class is for creating a checkbutton which will take a 'columnspan' of width two (covers two columns)
tkinter.Checkbutton(window, text = "Keep Me Logged In").grid(columnspan = 2)                 

window.mainloop()

Guardiamo l'output del codice qui sopra!

Non è fantastico? Quanto è stato semplice, e sembra identico a uno scritto in HTML.

Funzioni di binding o command

Le funzioni di binding o command sono quelle che vengono chiamate ogni volta che si verifica o viene attivato un evento.

Facciamo un esempio per capire le funzioni di binding.

Definirai un pulsante che, quando cliccato, chiama una funzione chiamata DataCamp_Tutorial. Inoltre, la funzione DataCamp_Tutorial creerà una nuova etichetta con il testo GUI with Tkinter!.

import tkinter
# Let's create the Tkinter window
window = tkinter.Tk()
window.title("GUI")

# creating a function called DataCamp_Tutorial()
def DataCamp_Tutorial():
    tkinter.Label(window, text = "GUI with Tkinter!").pack()

tkinter.Button(window, text = "Click Me!", command = DataCamp_Tutorial).pack()
window.mainloop()

Eseguiamo il codice e osserviamo l'output.

Oltre a invocare funzioni di binding con un clic del mouse, gli eventi possono essere invocati con movimento del mouse, mouse-over, clic, scrolling, ecc.

Vediamo ora la funzione bind, che ti fornisce la stessa funzionalità vista sopra.

Evento di clic del mouse tramite il metodo Bind

Il metodo Bind ti offre un approccio molto semplice per implementare gli eventi di clic del mouse. Vediamo le tre funzioni predefinite che possono essere usate subito con il metodo bind.

Gli eventi di clic sono di tre tipi: leftClick, middleClick e rightClick.

• Il parametro <Button-1> del metodo bind è l'evento di clic sinistro, cioè quando fai clic con il pulsante sinistro, il metodo bind chiamerà la funzione specificata come secondo parametro.
  
  
• <Button-2> per il clic centrale
  
  
• <Button-3> per il clic destro

Ora imparerai come chiamare una funzione particolare in base all'evento che si verifica.

• Esegui il seguente programma e fai clic sui pulsanti sinistro, centrale, destro per chiamare una funzione specifica.
  
  
• Quella funzione creerà una nuova etichetta con il testo specificato.

import tkinter
# Let's create the Tkinter window
window = tkinter.Tk()
window.title("GUI")

#You will create three different functions for three different events
def left_click(event):
    tkinter.Label(window, text = "Left Click!").pack()

def middle_click(event):
    tkinter.Label(window, text = "Middle Click!").pack()

def right_click(event):
    tkinter.Label(window, text = "Right Click!").pack()

window.bind("<Button-1>", left_click)
window.bind("<Button-2>", middle_click)
window.bind("<Button-3>", right_click)

window.mainloop()

Fonte

Eseguiamo il codice qui sopra.

Finestra di avviso

Puoi creare finestre di avviso in Tkinter usando il metodo messagebox. Puoi anche creare domande usando il metodo messasgebox.

Qui creerai una semplice finestra di avviso e anche una domanda. Per generare un avviso, userai la funzione di messagebox showinfo. Per creare una domanda, userai il metodo askquestion e, in base alla risposta alla domanda, mostrerai una Label sulla GUI.

import tkinter
import tkinter.messagebox

# Let's create the Tkinter window
window = tkinter.Tk()
window.title("GUI")

# Let's create a alert box with 'messagebox' function
tkinter.messagebox.showinfo("Alert Message", "This is just a alert message!")

# Let's also create a question for the user and based upon the response [Yes or No Question] display a message.
response = tkinter.messagebox.askquestion("Tricky Question", "Do you love Deep Learning?")

# A basic 'if/else' block where if user clicks on 'Yes' then it returns 1 else it returns 0. For each response you will display a message with the help of 'Label' method.
if response == 1:
    tkinter.Label(window, text = "Yes, offcourse I love Deep Learning!").pack()
else:
    tkinter.Label(window, text = "No, I don't love Deep Learning!").pack()

window.mainloop()

Eseguiamo rapidamente il codice qui sopra e vediamo l'output.

Rendering di immagini

Se sei riuscito a seguire fino a qui, allora aggiungere immagini e icone alla GUI sarà un gioco da ragazzi. Ti basta usare il metodo PhotoImage di Tkinter e passargli come parametro il file_path.

Senza ulteriori indugi, scriviamo rapidamente un codice per visualizzare un'immagine sulla GUI.

import tkinter

# Let's create the Tkinter window
window = tkinter.Tk()
window.title("GUI")

# In order to display the image in a GUI, you will use the 'PhotoImage' method of Tkinter. It will an image from the directory (specified path) and store the image in a variable.
icon = tkinter.PhotoImage(file = "CNN.png")

# Finally, to display the image you will make use of the 'Label' method and pass the 'image' variriable as a parameter and use the pack() method to display inside the GUI.
label = tkinter.Label(window, image = icon)
label.pack()

window.mainloop()

Ben fatto se sei riuscito a seguire fino a qui!

Come bonus, creerai una Calculator usando tutte le conoscenze acquisite finora. Quindi, concludiamo questo tutorial con una nota fantastica.

Creare una calcolatrice con Tkinter

Ogni app GUI prevede due passaggi.

• Creare un'interfaccia utente
  
  
• Aggiungere funzionalità alla GUI

Iniziamo a creare la calcolatrice. Gran parte del codice è autoesplicativa e alcune righe sono commentate con spiegazioni.

from tkinter import *

# Let's create the Tkinter window
window = Tk()

# Then, you will define the size of the window in width(312) and height(324) using the 'geometry' method
window.geometry("312x324")

# In order to prevent the window from getting resized you will call 'resizable' method on the window
window.resizable(0, 0)

#Finally, define the title of the window
window.title("Calcualtor")


# Let's now define the required functions for the Calculator to function properly.

# 1. First is the button click 'btn_click' function which will continuously update the input field whenever a number is entered or any button is pressed it will act as a button click update.
def btn_click(item):
    global expression
    expression = expression + str(item)
    input_text.set(expression)

# 2. Second is the button clear 'btn_clear' function clears the input field or previous calculations using the button "C"
def btn_clear():
    global expression
    expression = ""
    input_text.set("")

# 3. Third and the final function is button equal ("=") 'btn_equal' function which will calculate the expression present in input field. For example: User clicks button 2, + and 3 then clicks "=" will result in an output 5.
def btn_equal():
    global expression
    result = str(eval(expression)) # 'eval' function is used for evaluating the string expressions directly
    # you can also implement your own function to evalute the expression istead of 'eval' function
    input_text.set(result)
    expression = ""

expression = ""
# In order to get the instance of the input field 'StringVar()' is used
input_text = StringVar()

# Once all the functions are defined then comes the main section where you will start defining the structure of the calculator inside the GUI.

# The first thing is to create a frame for the input field
input_frame = Frame(window, width = 312, height = 50, bd = 0, highlightbackground = "black", highlightcolor = "black", highlightthickness = 1)
input_frame.pack(side = TOP)


# Then you will create an input field inside the 'Frame' that was created in the previous step. Here the digits or the output will be displayed as 'right' aligned
input_field = Entry(input_frame, font = ('arial', 18, 'bold'), textvariable = input_text, width = 50, bg = "#eee", bd = 0, justify = RIGHT)
input_field.grid(row = 0, column = 0)
input_field.pack(ipady = 10) # 'ipady' is an internal padding to increase the height of input field


# Once you have the input field defined then you need a separate frame which will incorporate all the buttons inside it below the 'input field'
btns_frame = Frame(window, width = 312, height = 272.5, bg = "grey")
btns_frame.pack()


# The first row will comprise of the buttons 'Clear (C)' and 'Divide (/)'
clear = Button(btns_frame, text = "C", fg = "black", width = 32, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_clear()).grid(row = 0, column = 0, columnspan = 3, padx = 1, pady = 1)
divide = Button(btns_frame, text = "", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_click("")).grid(row = 0, column = 3, padx = 1, pady = 1)


# The second row will comprise of the buttons '7', '8', '9' and 'Multiply (*)'
seven = Button(btns_frame, text = "7", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(7)).grid(row = 1, column = 0, padx = 1, pady = 1)
eight = Button(btns_frame, text = "8", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(8)).grid(row = 1, column = 1, padx = 1, pady = 1)
nine = Button(btns_frame, text = "9", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(9)).grid(row = 1, column = 2, padx = 1, pady = 1)
multiply = Button(btns_frame, text = "*", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_click("*")).grid(row = 1, column = 3, padx = 1, pady = 1)


# The third row will comprise of the buttons '4', '5', '6' and 'Subtract (-)'
four = Button(btns_frame, text = "4", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(4)).grid(row = 2, column = 0, padx = 1, pady = 1)
five = Button(btns_frame, text = "5", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(5)).grid(row = 2, column = 1, padx = 1, pady = 1)
six = Button(btns_frame, text = "6", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(6)).grid(row = 2, column = 2, padx = 1, pady = 1)
minus = Button(btns_frame, text = "-", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_click("-")).grid(row = 2, column = 3, padx = 1, pady = 1)


# The fourth row will comprise of the buttons '1', '2', '3' and 'Addition (+)'
one = Button(btns_frame, text = "1", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(1)).grid(row = 3, column = 0, padx = 1, pady = 1)
two = Button(btns_frame, text = "2", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(2)).grid(row = 3, column = 1, padx = 1, pady = 1)
three = Button(btns_frame, text = "3", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(3)).grid(row = 3, column = 2, padx = 1, pady = 1)
plus = Button(btns_frame, text = "+", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_click("+")).grid(row = 3, column = 3, padx = 1, pady = 1)


# Finally, the fifth row will comprise of the buttons '0', 'Decimal (.)', and 'Equal To (=)'
zero = Button(btns_frame, text = "0", fg = "black", width = 21, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(0)).grid(row = 4, column = 0, columnspan = 2, padx = 1, pady = 1)
point = Button(btns_frame, text = ".", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_click(".")).grid(row = 4, column = 2, padx = 1, pady = 1)
equals = Button(btns_frame, text = "=", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_equal()).grid(row = 4, column = 3, padx = 1, pady = 1)


window.mainloop()

Conclusione

Congratulazioni per aver completato questo tutorial!

In base a quanto hai imparato, sei pronto per creare semplici app GUI. Devi imparare altri metodi per lo styling e l'interazione con gli oggetti in una GUI.

Un esercizio utile sarebbe provare a sviluppare applicazioni simili alla creazione di una calcolatrice: ti aiuterà a rafforzare la fiducia e a darti un'idea molto più completa di tutto ciò che è possibile con Tkinter.

C'è ancora molto da coprire e potresti voler esplorare il concetto di classi in Tkinter; per questo puoi fare riferimento a questa documentazione.

Sentiti libero di fare qualsiasi domanda relativa a questo tutorial nella sezione commenti qui sotto.