GUI Designing On Raspberry Pi Using Tkinter And Python

After the completion of this blog series you will be able to design a GUI app for Raspberry and will be able to control GPIO pins and can design your own GUI app. 

Before starting the journey of GUI designing on Raspberry Pi, you should understand all the basic things, and as this tutorial is the first tutorial in the series, we are just learning some basic things like how to create frames, labels, entry fields.

What Is Tkinter And How To Use It On Raspberry Pi To Design A GUI App On Raspberry Pi? 

How to write a simple greeting GUI app using Tkinter GUI App Python Module? 

The below mentioned code is of the greeting app. You can copy the following code and run it on any python IDE that you prefer.

As you are getting started, I know that the following Python GUI code has lots of new things for you, but don't worry. I will clear all your doubts ahead of this blog.

from tkinter import ttk 
import tkinter as app 
 
app_main_window = app.Tk() 
 
 
def greet(): 
print(f"Hello {submit_label_Entry_text.get()}!!") 
 
 
submit_button_text = app.StringVar() 
submit_label_Entry_text = app.StringVar() 
submit_button_text.set("Submit") 
s = ttk.Style() 
s.configure('.', background='gray') 
main_frame = ttk.Frame(app_main_window, 
style='main_frame.TFrame', 
height=100, 
width=50, 
cursor='question_arrow', 
relief='sunken') 
main_frame.pack(fill='x') 
hi_label = ttk.Label(main_frame, 
text='Enter Your Name: ' 
) 
submit_button = ttk.Button( 
main_frame, 
text='Submit Button', 
style='submit_button.TButton', 
textvariable=submit_button_text, 
width=25, 
command=greet 
) 
 
user_entry = ttk.Entry(main_frame, textvariable=submit_label_Entry_text) 
 
hi_label.grid(row=0, column=0) 
user_entry.grid(row=0, column=1) 
submit_button.grid(row=2, columnspan=3, pady=5) 
 
app_main_window.mainloop()

Import tkinter as app 

from tkinter import ttk

What Is The Difference Between tk And ttk? 

Frame Creation Using ttk.Frame in Tkinter GUI App

Ttk.Frame(parent,options**) 

Ttk.Frame is a widget where we can put buttons, entry fields. It is like a container where we can put other widgets like button, child frames, labels and more. 

Various Options Available For ttk.Frame In Tkinter GUI App

Tinker has a lot of options available that we can use to customize the frame. Below are the options available for ttk.frame 

from tkinter import ttk 
import tkinter as app 
 
app_main_window = app.Tk() 
s = ttk.Style() 
s.configure('.', background='orange') 
main_frame = ttk.Frame(app_main_window,  
                      style='main_frame.TFrame', 
                       height=100,  
                      width=50,  
                      cursor= 'question_arrow',  
                      relief='sunken') 
main_frame.pack(side='left') 
 
 
app_main_window.mainloop() 

Styling In ttk.Frame 

s = ttk.Style() 
s.configure('.', background='orange') 

In the line above the code we are setting the background of the frame to orange.

Adjusting The Height And Width Of The Frame Using The Height And Width Options Of ttk.Frame 

Cursor Option Of ttk.Frame 

Relief Option Of ttk.Frame

How To Add Button Widget in Tkinter GUI App

from tkinter import ttk 
import tkinter as app 
 
app_main_window = app.Tk() 
Submit_button_text = app.StringVar() 
Submit_button_text.set("Submit") 
s = ttk.Style() 
s.configure('.', background='orange') 
submit_button = ttk.Button( 
    app_main_window, 
    text='Submit Button', 
    style= 'submit_button.TButton', 
    textvariable = Submit_button_text, 
    width=20, 
    command= lambda : Submit_button_text.set('ok') 
) 
submit_button.pack() 
 
app_main_window.mainloop() 

List of options in ttk.Button 

Text option in ttk.Button 

Textvariable option in ttk.Button 

Submit_button_text = app.StringVar() 

Submit_button_text.set(‘Submit’) 

TTK.Label In Tkinter GUI App

from tkinter import ttk 
import tkinter as app 
 
app_main_window = app.Tk() 
label_text = app.StringVar() 
label_text.set("This is text variable Text") 
s = ttk.Style() 
s.configure('.', background='orange') 
submit_button = ttk.Label( 
app_main_window, 
style= 'submit_button.TLabel', 
textvariable = label_text, 
width=25 
) 
submit_button.pack() 
 
app_main_window.mainloop() 

Available options for ttk.Label

The options available for the label are common and we have already discussed them in the first phase of this blog.

The list of options available for ttk.Lable is as follows:

      1. Text - we can do this option for naming labels

      2. TextVariable If we want to rename Lable in our program's runtime, we can use this option.

      3. Style - If we want to add a style, we can use this option.

Conclusion Of GUI Designing On Raspberry Pi Using Tkinter And Python

So, this was about the basic widgets we often use in the design of the Tinker GUI app. I hope you have enjoyed the tutorial and hope it helps in your project somewhere. In our next blog, we will learn how Geometry Manager works.

Tags : GUI , Raspberry pi , Tkinter , TTK , ttk.Button , TTK.Frame , ttk.Label