Tkinter – button output to GUI

Back to: Python Programming

---

Building on the previous two modules, we are going to make a GUI with a button that counts how many times it has been pressed and displays the value on the GUI above the button. We’ll be using an image as well – you can download this one:

1. We need to make a function that keeps count of the number of times a button is clicked.
2. We need to place an image file into our project folder and use PhotoImage to access it
3. We need to make a button to click that has an image on it and calls on the function
4. We need to output the value of count into a label.

from tkinter import *

# ~~ create the COUNT function ~~
count = 0

def clickme():
    global count
    count+=1
    count_label.config(text=count)

#~~ Create Window object and setup GUI Section ~~
window = Tk()                                     # <-- instantiate an instance of a window
window.geometry("1000x600")                       # <-- sets the window to 800 x 420 pixels
window.title("NSC - Software Development")        # <-- places a name in the header bar
window.config(background="#caa7e6")               # <-- changes the window background colour
#window.config(bg='lightblue')                    # <-- alternate syntax's for BG colour
#window.configure(bg='lightblue')

# ~~ Reference images used in the project ~~
nsc_icon = PhotoImage(file='norwood-logo-sq.png') # <-- converts the PNG file
window.iconphoto(True,nsc_icon)                   # <-- displays the converted PNG image

pointer_icon = PhotoImage(file='pointing-finger.png')
window.iconphoto(True,pointer_icon)

# ~~ create the main heading section (from module one) ~~
heading_label = Label(window,
              text="Norwood Secondary College",
              font=('Arial', 40, 'bold'),        # <-- the font face, font size and weight
              fg='#dedede',                      # <-- foreground colour (HEX or colour names)
              bg='#5c068c',                      # <-- background colour (HEX or colour names)
              relief=RAISED,                     # <-- border style (RAISED or SUNKEN)
              bd=10,                             # <-- border width (in pixels)
              padx=20,                           # <-- x padding (in px) adds space left/right
              pady=20,                           # <-- y padding (in px) adds space top/bottom
              image=nsc_icon,                    # <-- Adds an image to our label on to of text
              compound='bottom')                 # <-- moves the image top, bottom, left or right

# ~~ create the BUTTON that calls the count function ~~
count_button = Button(window,                    # <-- subsequent lines style the button
                text="Click me!",                # <-- text on the button
                font=('Arial', 40, 'bold'),      # <-- the fond face of text on the button
                bg='#ffb81c',                    # <-- the background colour of the button surface
                fg='#5c068c',                    # <-- the foreground colour of the button text
                activebackground='#ff6200',      # <-- the on-click background colour
                activeforeground='#fffb1f',      # <-- the on-click foreground colour
                command=clickme,                 # <-- performs call back of function
                image=pointer_icon,              # <-- Adds an image to our label on to of text
                compound='top')

# ~~ create the area to output the function count result ~~
count_label = Label(window,
              text=count,
              bg='#caa7e6',
              font=('Monospace',50))

# ~~ Display the MAIN elements of the program ~~
heading_label.pack()                             # <-- displays the heading section
count_label.pack()                               # <-- order matters - displays count value
count_button.pack()                              # <-- displays the button

window.mainloop()

---