Create Digital Clock Using Tkinter

digital clock using tkinter python

A Graphical User Interface (GUI) is an interface that displays objects on screen that users can interact with. It is more user-friendly compared to a text-based command-line interface for it uses objects such as icons, buttons, cursors, and other graphical elements to represent actions. There are many GUI toolkits that can be use with Python such as wxPython and JPython but for this tutorial, we will be creating a GUI application using Tkinter.

Tkinter is the standard GUI library for Python. Tkinter provides a variety of common GUI elements or widgets such as buttons, text box, labels, frame, and many more that can be use to build an interface with. The following are widgets available in Tkinter [1]:

Containers: frame, label frame, top level, pane window.

Buttons: button, radio button, check button (checkbox), and menu button.

Text Widgets: label, message, text.

Entry Widgets: scale, scrollbar, list box, slider, spin box, entry (single line), option menu, text (multi line), and canvas (vector and pixel graphics).

In this tutorial, we will create a simple digital clock to get the hang of using Tkinter.

 

Getting Started

import tkinter as tk
import datetime

Since we are going to be creating a GUI application using Tkinter, we must import tkinter module and import datetime module to work with date and time.

But before jumping on further, it is good practice to plan out the design layout first which will act as a blueprint as you code. This way you already know where to put widgets on the GUI application and time will not be wasted in figuring out where to place them when coding.

digital clock design layout
 

Creating the Application Main Window

x = datetime.now()

window = tk.Tk()
window.title("Digital Clock")

canvas = tk.Canvas(window, height=200, width=500)
canvas.pack()

frame = tk.Canvas(window, bg='#696969')
frame.place(relx=0, rely=0, relheight=1, relwidth=1)

#insert code here

window.mainloop()

Line 1: datetime object containing current date and time. Note that we use .strftime() to create a string representing date and time in another format which we’ll see later on how to use

Line 3: creates the GUI application main window

Line 4: sets the window title to “Digital Clock”

Line 6: creates the canvas, setting the height and width to height = 200, width = 500

Line 7: packs the canvas into the window

Line 9: creates the frame setting the background color to #696969

Line 10: places the frame in a specific position in the parent widget

  • relheight, relwidth − Height and width as a float between 0.0 and 1.0, as a fraction of the height and width of the parent widget [2]
  • relx, rely − Horizontal and vertical offset as a float between 0.0 and 1.0, as a fraction of the height and width of the parent widget [2]

Line 14: mainloop() method executes when GUI application is run, waiting for events from user

 

Inserting Label Widget

#Displays the 24-hour clock 00:00 
clock = tk.Label(frame, fg="#8FBC8F", bg='#696969', font="Verdana 110", anchor="nw")
clock.place(relx=0.05, rely=0.15, relheight=0.6, relwidth=0.7)

#Displays the seconds in clock
second = tk.Label(frame, fg="#8FBC8F", bg='#696969', font="Verdana 30", anchor="nw")
second.place(relx=0.7, rely=0.55, relheight=0.3, relwidth=0.1)

#Label for month
month = tk.Label(frame, fg='#BDB76B', bg='#696969', text="MONTH", font="Verdana 15")
month.place(relx=0.790, rely=0.1, relheight=0.15, relwidth=0.2)

#Displays month name, short version (e.g. FEB)
b = tk.Label(frame, fg='#8FBC8F', bg='#696969', text=x.strftime("%b"), font="Verdana 25 bold")
b.place(relx=0.790, rely=0.230, relheight=0.15, relwidth=0.2)

#Label for date
date = tk.Label(frame, fg='#BDB76B', bg='#696969', text="DATE", font="Verdana 15")
date.place(relx=0.790, rely=0.380, relheight=0.15, relwidth=0.2)

#Displays day of month 
d = tk.Label(frame, fg='#8FBC8F', bg='#696969', text=x.strftime("%d"), font="Verdana 25 bold")
d.place(relx=0.790, rely=0.51, relheight=0.15, relwidth=0.2)

#Label for weekday
day = tk.Label(frame, fg='#BDB76B', bg='#696969', text="DAY", font="Verdana 15")
day.place(relx=0.790, rely=0.650, relheight=0.15, relwidth=0.2)

#Displays weekday, short version (e.g. Wed)
a = tk.Label(frame, fg='#8FBC8F', bg='#696969', text=x.strftime("%a"), font="Verdana 25 bold")
a.place(relx=0.790, rely=0.77, relheight=0.15, relwidth=0.2)

The Label widget on Tkinter is used to display a text or image on the screen. The label widget uses double buffering, so you can update the contents at any time, without annoying flicker [3].

Label(*master, **options)

*master refers to the parent widget. In our case our master is the frame.

**options refers to the widget options.

One of the widget options we have used is called text which displays the text in the label. If you notice on line 14, 22, and 30 our text contains x.strftime(%b), x.strftime(%d), and x.strftime(%a) which will display the month, day of month, and weekday respectively on our GUI application.

 

Adding Functions

def get_time():
    hour_min = time.strftime("%H:%M")
    clock.config(text=hour_min)
    clock.after(200, get_time)

'''
clock = tk.Label(frame, fg="#8FBC8F", bg='#696969', font="Verdana 110", anchor="nw")
clock.place(relx=0.05, rely=0.15, relheight=0.6, relwidth=0.7)
'''

get_time()


def get_second():
    sec = time.strftime("%S")
    second.config(text=sec)
    second.after(200, get_second)

'''
second = tk.Label(frame, fg="#8FBC8F", bg='#696969', font="Verdana 30", anchor="nw")
second.place(relx=0.7, rely=0.55, relheight=0.3, relwidth=0.1)
'''

get_second()

def get_time() and def get_second() function is used to display time and seconds on their respective labels.

 

Resources:

[1] Tkinter (Wikipedia)

[2] Python – Tkinter place() method

[3] The Tkinter Label Widget

1 Comment

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s