Introduction to Python GUI Design with ttkbootstrap and tkinter

As an embedded designer, your job involves creating efficient programs for seamless communication with various devices like data loggers, acquisition modules, and Serial port monitors. Python is the preferred language for embedded engineers due to its ease of use.

While Python’s tkinter is commonly used for GUIs, its appearance may seem outdated. Many opt for ttkbootstrap, a modern alternative that not only enhances GUIs visually but also simplifies development compared to other frameworks.

This tutorial helps Python novices quickly start using ttkbootstrap to create appealing interfaces.

Some prior Python experience is assumed.

Original Tutorial can be found here

• Introduction to Python GUI Design with ttkbootstrap and tkinter

What is ttkbootstrap Framework?

Tkinter serves as Python’s primary binding to the Tk GUI toolkit, providing a standardized interface for graphical user interfaces (GUIs) across Linux, Microsoft Windows, and macOS platforms. However, its GUI elements often appear outdated compared to other frameworks.By incorporating ttkbootstrap, developers can modernize their Tkinter applications with sleek themes inspired by Bootstrap.

Install ttkbootstrap on Windows

if ttkbootstrap not installed ,use PIP to install it using the below command.

pip install ttkbootstrap

Create a basic Window using ttkbooststrap

Here we will create a very basic window using ttkbooststrap (tkinter) and Python. Put the below code into your text editor,save it and run it.

import ttkbootstrap
root = ttkbootstrap.Window()
root.mainloop()

This will create a very basic window like the one below.

• You can control the size of the window using the root.geometry(‘widthxheight’) method.
• You can add a title to the Window using root.title(‘your title for the Window’) method.

Creating and Using Labels in tkinter/ttkbootstrap

import ttkbootstrap as ttkb
root = ttkb.Window(themename = 'litera')
root.geometry('400x400')                # widthxheight
My_Label = ttkb.Label(text = "Hello World")
My_Label.pack()
root.mainloop()

Here, a label widget is created using the Label class provided by ttkbootstrap. The text displayed on the label is set to “Hello World”.

My_Label.pack()

This line packs the label into the window. Packing is a way to organize widgets within a container in tkinter.

Here the Label is placed at the center ,since we are using .pack() method.

If you need precise and absolute placement you can use the .place() method as shown below.

My_Label = ttkb.Label(text = "Hello World")
My_Label.place(x=10,y=300)

Creating and Using Buttons in tkinter/ttkbootstrap

Button can be created using the following command.

button_1 = ttkb.Button(text = 'Click Me',command = button_1_handler)

To make the button do something we have to define a handler function and give its name to the command keyword argument.

def button_1_handler():
   print('You Clicked Me')

So when you click the button button_1_handler() will be called and the statements inside it will run.Here it will just print amethod to the command line.

Full code below.

#Python tkinter/ttkbootstrap code for Creating and Using Buttons 
import ttkbootstrap as ttkb
def button_1_handler():
   print('You Clicked Me')
   
root = ttkb.Window(themename = 'litera')
root.geometry('400x200')                # widthxheight
#create button 
button_1 = ttkb.Button(text = 'Click Me',command = button_1_handler)
button_1.place(x=20,y=20)
root.mainloop()

Output of running the code.

Creating and Using Drop Down Combo boxes in tkinter/ttkbootstrap

You can use the Combobox class in ttkbootstrap to create drop down comboxes.

At first we have to create a list of items that are used to populate the drop down menu.

options = ['1200','2400','4800','9600'] #create Dropdown options

then we create the Combobox and place it inside the window using the .pack() method. You can also use .place().

You have to pass your drop down items list to the the keyword argument values

#create Combobox
my_combo = ttkb.Combobox(values = options) # Pass options list to combobox
my_combo.pack(pady = 50)                   # pady = 50,place it 50 units from top

when the user selects an item from combobox, the combo box will generate the ‘<<ComboboxSelected>>’ virtual event. To handle this event ,we have to bind the combobox to a handler function.

my_combo.bind('<<ComboboxSelected>>',combobox_selected_handler) # bind the combobox

so when the user selects an item, combobox_selected_handler() function will be called and you can get the selected value using the my_combo.get() method.

def combobox_selected_handler(e):
    print(e)                                #prints the virtual event              
    print(f'You selected {my_combo.get()}') #my_combo.get() get the selected value

Full code below

#Python tkinter/ttkbootstrap code for Creating and Using Drop Down Combo boxes
import ttkbootstrap as ttkb
options = ['1200','2400','4800','9600'] #create Dropdown options
def combobox_selected_handler(e):
    print(e)
    print(f'You selected {my_combo.get()}')
    
root = ttkb.Window(themename = 'litera')
root.geometry('400x200')                # widthxheight
#create Combobox
my_combo = ttkb.Combobox(values = options)
my_combo.pack(pady =50)
my_combo.current(3)#set the default value on combobox
my_combo.bind('<<ComboboxSelected>>',combobox_selected_handler)#bind the combobox
root.mainloop()

Output of the code