Introductie tot GUI met Tkinter in Python

Widgets

Widgets lijken qua opzet op elements in HTML. Je vindt verschillende soorten widgets voor verschillende soorten elementen in Tkinter. Het zijn standaard GUI-elementen en bieden de gebruiker bedieningselementen zoals knoppen, tekst, menu's en tekstvakken.

Laten we al deze widgets in Tkinter begrijpen, samen met een voorbeeld (Bron).

• Button: De Button-widget heeft een eigenschap voor aan/uit. Wanneer een gebruiker op de knop klikt, wordt er in Tkinter een event getriggerd.

  Syntax: button_widget = tk.Button(widget, option=placeholder) waarbij widget het argument is voor het oudervenster/de ouderframe, terwijl option een placeholder is die verschillende waarden kan hebben zoals voor- en achtergrondkleur, lettertype, command (voor functieverwijzing), afbeelding, hoogte en breedte van de knop.

• Canvas: Canvas wordt gebruikt om vormen te tekenen in je GUI en ondersteunt verschillende tekenmethoden.

  Syntax: canvas_widget = tk.Canvas(widget, option=placeholder) waarbij widget de parameter is voor het oudervenster/de ouderframe, terwijl option een placeholder is die verschillende waarden kan hebben zoals randbreedte, achtergrondkleur, hoogte en breedte van de widget.

• Checkbutton: Checkbutton registreert aan-uit of waar-onwaar status. Je kunt meer dan één optie tegelijk selecteren en hem ook uitgevinkt laten.

  Syntax: checkbutton_widget = tk.CheckButton(widget, option=placeholder) waarbij widget de parameter is voor het oudervenster/de ouderframe, terwijl option een placeholder is die verschillende waarden kan hebben zoals titel, tekst, achtergrond- en voorgrondkleur wanneer de widget onder de cursor staat, lettertype, afbeelding, enz.

• Entry: Entry-widget wordt gebruikt om invoervelden te maken of om invoertekst van de gebruiker binnen de GUI op te halen.

  Syntax: entry_widget = tk.Entry(widget, option=placeholder) waarbij widget de parameter is voor het oudervenster/de ouderframe, terwijl option een placeholder is die verschillende waarden kan hebben zoals randbreedte, achtergrondkleur, breedte en hoogte van de knop, enz.

• Frame: Frame wordt in Tkinter gebruikt als container voor het groeperen en goed organiseren van widgets.

  Syntax: frame_widget = tk.Frame(widget, option=placeholder) waarbij widget de parameter is voor het oudervenster/de ouderframe, terwijl option een placeholder is die verschillende waarden kan hebben zoals randbreedte, hoogte en breedte van de widget, highlightcolor (kleur wanneer de widget focus heeft).

• Label: Label wordt gebruikt om enkelregelige widgets zoals tekst, afbeeldingen, enz. te maken.

  Syntax: label_widget = tk.Label(widget, option=placeholder) waarbij widget de parameter is voor het oudervenster/de ouderframe, terwijl option een placeholder is die verschillende waarden kan hebben zoals het lettertype van een knop, achtergrondkleur, afbeelding, breedte en hoogte van de knop.

Je vindt de volledige lijst met widgets in de officiële Python-documentatie.

Geometriebeheer

Alle widgets in Tkinter hebben bepaalde geometrische afmetingen. Met deze geometrische metingen kun je de widgets organiseren in de ouderframes of het gebied van de ouderwidget.

Een van de geometry management-klassen, namelijk pack(), is hierboven al behandeld.

Voor dit doel biedt Tkinter je drie belangrijkste geometry managers:

• pack(): Organiseert de widgets blokgewijs en neemt de volledige beschikbare breedte in. Het is een conventionele methode om widgets in het venster te tonen.
  
  
• grid(): Organiseert de widgets in een tabelachtige structuur. Je leert er later in deze tutorial meer in detail over.
  
  
• place(): Hiermee plaats je widgets op een specifieke positie zoals opgegeven door de gebruiker in de ouderwidget.

Lay-out en widgets organiseren

In dit deel van de tutorial ga je zowel geometry als widgets gebruiken en zien we de magie van Tkinter.

Om de lay-out in het window te rangschikken, gebruik je een Frame-widgetklasse. Laten we een eenvoudig programma maken om te zien hoe Frame werkt.

• Je definieert twee frames - top en bottom - met behulp van de pack-klasse. De Frame-klasse helpt om een verdeling in het venster te maken. In feite wordt één venster als het ware twee keer gerepliceerd als top en bottom in de vorm van een Frame.

• Tot slot maak je vier knoppen in het venster, twee voor elk frame. Je kunt je knoppen naar wens benoemen en kleuren als parameter.

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

Laten we de bovenstaande code uitvoeren en de output bekijken.

Grid

Net als een Frame is een grid een andere manier om widgets te organiseren. Het gebruikt het matrixconcept van rijen en kolommen. Laten we een analogie trekken tussen de grid-klasse en het rij-kolomidee met behulp van onderstaand diagram.

Grid neemt primair twee parameters: row en column. Zoals in de bovenstaande afbeelding: stel je voor dat 00 overeenkomt met de eerste knop en 01 met de tweede. En om twee knoppen naast elkaar te plaatsen, neemt grid de parameters row en column respectievelijk als 00 en 01.

Laten we checkbutton gebruiken om te begrijpen hoe de grid-klasse werkt. Je definieert twee checkbuttons en specificeert wat tekst voor beide knoppen. De status van de checkbuttons wordt bepaald door de onvalue en offvalue, terwijl de huidige status van de checkbutton wordt bijgehouden door IntVar(), die in een aparte variabele wordt opgeslagen. Wanneer de offvalue=1 en de onvalue=0 is de desbetreffende checkbutton aangevinkt.

Wat betreft de grid-klasse geef je de parameter row door, die de knop in de eerste rij plaatst als row=0 en in de tweede rij als 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()

Laten we deze code uitvoeren en de output bekijken.

Laten we nog een voorbeeld nemen om grid te begrijpen. In dit voorbeeld geef je ook een column door als parameter, samen met de 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()

Laten we naar de output van de bovenstaande code kijken!

Geweldig toch? Hoe simpel dit was, en het lijkt identiek aan iets dat met HTML is geschreven.

Binding- of command-functies

Binding- of command-functies zijn functies die worden aangeroepen wanneer een event plaatsvindt of wordt getriggerd.

Laten we een voorbeeld nemen om binding-functies te begrijpen.

Je definieert een knop die, wanneer erop wordt geklikt, een functie aanroept genaamd DataCamp_Tutorial. Vervolgens maakt de functie DataCamp_Tutorial een nieuw label met de tekst 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()

Laten we de code uitvoeren en de output bekijken.

Naast het aanroepen van binding-functies met een muisklik, kunnen events ook worden aangeroepen met mouse-move, mouse-over, klikken, scrollen, enz.

Laten we nu kijken naar de functie bind, die je dezelfde functionaliteit biedt als hierboven.

Muisklik-event via de bind-methode

De Bind-methode biedt een zeer eenvoudige manier om muisklik-events te implementeren. Laten we kijken naar de drie vooraf gedefinieerde functies die je meteen kunt gebruiken met de bind-methode.

Klik-events zijn er in drie soorten: leftClick, middleClick en rightClick.

• <Button-1> als parameter van de bind-methode is het event voor links-klikken, dus wanneer je op de linkerknop klikt, roept de bind-methode de functie aan die als tweede parameter is opgegeven.
  
  
• <Button-2> voor middenklik
  
  
• <Button-3> voor rechtsklik

Nu leer je hoe je een specifieke functie aanroept op basis van het event dat plaatsvindt.

• Voer het volgende programma uit en klik op de linker-, middelste of rechterknop om een specifieke functie aan te roepen.
  
  
• Die functie maakt een nieuw label met de opgegeven tekst.

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

Bron

Laten we de bovenstaande code uitvoeren.

Alertvensters

Je kunt in Tkinter alertvensters maken met de methode messagebox. Je kunt ook vragen stellen met de methode messasgebox.

Hier maak je een eenvoudig alertvenster en ook een vraag. Voor het genereren van een alert gebruik je de messagebox-functie showinfo. Voor het stellen van een vraag gebruik je de methode askquestion en op basis van het antwoord op de vraag toon je een Label in de 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()

Laten we de bovenstaande code snel uitvoeren en de output bekijken.

Afbeeldingen renderen

Als je tot hier kon volgen, dan is het toevoegen van afbeeldingen en iconen aan de GUI een fluitje van een cent. Alles wat je hoeft te doen is de methode PhotoImage van Tkinter gebruiken en het file_path als parameter doorgeven.

Dus, zonder verder oponthoud, schrijven we snel code om een afbeelding op de GUI weer te geven.

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

Goed gedaan als je tot hier hebt meegekeken!

Als bonus maak je een Calculator met alle kennis die je tot nu toe hebt opgedaan. Laten we deze tutorial dus op een fantastische noot afsluiten.

Een rekenmachine maken met Tkinter

Elke GUI-app bestaat uit twee stappen.

• Een gebruikersinterface maken
  
  
• Functionaliteit toevoegen aan de GUI

Laten we beginnen met het maken van de rekenmachine. Het grootste deel van de code spreekt voor zich en sommige regels zijn van commentaar voorzien met uitleg.

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

Conclusie

Gefeliciteerd met het afronden van deze tutorial!

Op basis van wat je hier hebt geleerd, ben je klaar om eenvoudige GUI-apps te maken. Je moet nog meer methoden leren voor styling en interactie met de objecten in een GUI.

Een nuttige oefening is om toepassingen te ontwikkelen zoals het maken van een rekenmachine. Dat helpt je zelfvertrouwen te vergroten en geeft je een veel holistischer beeld van wat er allemaal mogelijk is met Tkinter.

Er is nog veel te behandelen, en je wilt misschien het concept van classes in Tkinter verkennen. Raadpleeg hiervoor deze documentatie.

Voel je vrij om vragen over deze tutorial te stellen in de reacties hieronder.