---
slideOptions:
theme: white
---

# Chapter 18 - Basic GUI Programming using `tkinter` (I)

###### tags: `GUI Programming`

---

## Window

To create GUI in Python, we need to use the `tkinter` module. The first stemp is to create a window. You can try the following Python codes.

import tkinter
root = tkinter.Tk()     # Create the window
root.mainloop()         # Display the window

The following windows shoule be displayed.


In line 2, `root= = tkinter.Tk()` creates the window **object** and the object is called `root`. The window cannot be display by just creating the object. Hence, we need to use `mainloop()` command in line 3 to dispaly the window.

### Title and size
We can use `title()` to set the title of the window, and use `geometry()` to set the size of the window, as shown below.

import tkinter
root = tkinter.Tk()             # Create the window
root.title("The first window")  # Name the title 
root.geometry("800x600")        # Configurate the size in pixel
root.mainloop()                 # Display the window


Notice that the size of the above window has width 800px and height 600px.

Besides `geometry()`, we can set the minimum size by `minsize()` and set the maximum size by `maxsize()`.

Also, if we want to fix the size (no resizable), we can use `resizable()`, by controlling the resiability of `x` (horizontal) and `y` (vertical).

root.resizable(False, False)

## Adding Labels

Labels can be added by using the `Label()` command, and then place it on a specific position by using `place()`.

import tkinter
root = tkinter.Tk()             # Create the window
root.title("The first label")   # Name the title
root.geometry("800x600")        # Configurate the size in pixel
label = tkinter.Label(root, text="LabelText", font=("System", 24))
label.place(x=200, y=100)       # Place label on window
root.mainloop()                 # Display the window

The above code will show the following window.


For `font` in `Label()`, we can find the list of font in the computer by `print(tkinter.font.families)`.

The position `(0,0)` of `place()` is the top left hand corner of the window.

## Adding Buttons

Buttons can be added by `Button()`, and then place it by `place()`.

import tkinter
root = tkinter.Tk()             # Create the window
root.title("The first button")  # Name the title
root.geometry("800x600")        # Configurate the size in pixel
button = tkinter.Button(root, text="ButtonText", font=("Times New Roman", 24))
button.place(x=200, y=100)      # Place label on window
root.mainloop()                 # Display the window

The above code shows the following window.


## Configuring Button Click Event

We need to program the actions after clicking the button. Python uses *functions to define the event of clicking button*. Please modify the program as follow.

import tkinter

def click_btn():
    button["text"] = "Clicked"

root = tkinter.Tk()             # Create the window
root.title("The first button")  # Name the title
root.geometry("800x600")        # Configurate the size in pixel
button = tkinter.Button(root, text="ButtonText",
                       font=("Times New Roman", 24),
                       command=click_btn)
button.place(x=200, y=100)       # Place label on window
root.mainloop()                  # Display the window

The `command` attribute in Line 11 refering the click button action to the `click_btn` function.

By clicking the button, the text of the button should be changed.


## Using Canvas (畫布)

The canvas can be created by `Canvas()` command, and then use `pack()` or `place()` command. Please input the following program.

import tkinter
root = tkinter.Tk()             # Create the window
root.title("The first canvas")  # Name the title
canvas = tkinter.Canvas(root, width=400, height=600, bg="skyblue")
canvas.pack()                   # Pack canvas on window
root.mainloop()                 # Display the window

If `pack()` command is used, the size of the window will resize with the canvas. If just a canvas is needed for the window, we can omit the `root.geometry()` command.


The background colour can be adjusted by assigning the colour words (`"red"`, `"green"`, `"blue"`, `"yellow"`, `"black"`, `"white"`, etc) or using [RGB hex code](https://www.rapidtables.com/web/color/RGB_Color.html).

### Display Pictures in Canvas

To displace a picture in canvas, `PhotoImage()` command can be used to load graphics, and then use `create_image()` to draw the graphic. Please input the following program. Place [`iroha.png`](https://hackmd.io/_uploads/HkTNhX2Pn.png) inside the folder of the python program.

import tkinter
root = tkinter.Tk()             # Create the window
root.title("The first picture")  # Name the title
canvas = tkinter.Canvas(root, width=400, height=600)
canvas.pack()                   # Pack canvas on window
gazou = tkinter.PhotoImage(file="iroha.png")
canvas.create_image(200,300,image=gazou)
root.mainloop()                 # Display the window

After the program is run, the picture is shown on the canvas.


The `PhotoImage()` command in line 6 assign the graphic with `file=filename`, and then assign the graphics into the variable `gazou`.

In line 7, the attribute of `create_image()` command draw the picture with x-axis, y-axis and `image=picture_variable`. Notice that *the x-axis and y-axis of `create_image()` command is the centre of the picture.* For example, `create_image(0,0,image=gazou)` will place the picture on the top left hand corner, and part of the picture will be cut.

## Lunck Draw Game

The objective of the program is to draw after clicking a button. Before programming, the [`miko.png`](https://hackmd.io/_uploads/Sy9hAQ2v3.png) should be put inside the folder of the python program.

### Step 1: Display the picture

Please input and run the following program.

import tkinter
root = tkinter.Tk()
root.title("Drawing Game")
root.resizable(False, False)
canvas = tkinter.Canvas(root, width=800, height=600)
canvas.pack()
gazou = tkinter.PhotoImage(file="miko.png")
canvas.create_image(400, 300, image=gazou)
root.mainloop()

The following window will be shown after the program is run.


### Step 2: Add GUI components

Please input the following program to place a label and a button.

import tkinter
root = tkinter.Tk()
root.title("Drawing Game")
root.resizable(False, False)

# Pack the canvas
canvas = tkinter.Canvas(root, width=800, height=600)
canvas.pack()

# Display the image on canvas
gazou = tkinter.PhotoImage(file="miko.png")
canvas.create_image(400, 300, image=gazou)

# Place a label
label = tkinter.Label(root, text="???", 
                      font=("Times New Roman", 120),
                      bg="white")
label.place(x=380, y=60)

# Place a button
button = tkinter.Button(root, text="Draw",
                        font=("Times New Roman", 36),
                        fg="skyblue")
button.place(x=360, y=400)

root.mainloop()

The following window will be shown after the program is run.


### Step 3: Button click event

After the button is clicked, the result of the draw would be displayed on the label. The label can be updated by `update()` command.

import tkinter
import random

def click_btn():
    label["text"] = random.choice(["***", "**", "*", "NO"])
    label.update

root = tkinter.Tk()
root.title("Drawing Game")
root.resizable(False, False)

# Pack the canvas
canvas = tkinter.Canvas(root, width=800, height=600)
canvas.pack()

# Display the image on canvas
gazou = tkinter.PhotoImage(file="miko.png")
canvas.create_image(400, 300, image=gazou)

# Place a label
label = tkinter.Label(root, text="???",
                      font=("Times New Roman", 120),
                      bg="white")
label.place(x=380, y=60)

# Place a button
button = tkinter.Button(root, text="Draw",
                        font=("Times New Roman", 36),
                        fg="skyblue",
                        command=click_btn)
button.place(x=360, y=400)

root.mainloop()

After the program is run, the following window would be shown.


## Reference

https://docs.python.org/3/library/tk.html
https://tkdocs.com/pyref/
[`iroha.png`](https://hackmd.io/_uploads/HkTNhX2Pn.png)
[`miko.png`](https://hackmd.io/_uploads/Sy9hAQ2v3.png)