Advanced GUI interface with Python
Almost every software that we use on the computer screen is a GUI interface of some sort. Most GUI applications provide a platform for friendly interaction with the software product. Notepad and the common calculator found in most windows systems are some simple examples of a GUI interface made accessible to all users.
Most programming languages allow us to develop a user interface through which a human-computer interaction can take place, including Python. With the help of Python and its different types of libraries available for GUI development, such as Tkinter, Kivy, PyQt5, and other similar tools, programmers can easily develop GUI interfaces.
All these development tools provide a straightforward starting point for constructing almost any type of interface for performing numerous tasks. For interested viewers, I recommend checking out one of my previous articles on the seven best tools for developing UI graphics with starter codes to get started for each of the mentioned libraries.
7 Best UI Graphics Tools For Python Developers With Starter Codes
However, most of these interfaces look a little bland in terms of their design structure. For more aesthetically impressive and modern-looking design layouts, it is better to use a more oriented and advanced GUI interface to make the overall look of the software developed more engaging and appealing.
In this article, we will focus on developing a slightly more modern development environment that has a better user interface with an overall design improvement for accessing and utilizing its features. For viewers interested in similar projects, I recommend checking out one of my previous articles on developing a calendar to track significant dates with Python Programming.
Develop Your Own Calendar To Track Important Dates with Python
Modern GUI interface to load images:
In this project, we will construct a modern-looking GUI development interface with a button for loading images randomly from the working directory. We will utilize the custom tkinter library as our primary UI development user interface to create the workflow, including the button, labels, images, and other objects necessary for the project.
The following package can be installed with a simple pip command as shown below. The custom tkinter library is available on the Python Package Index website, which you can check out from the link here.
pip install customtkinter
Once you have installed the above library, we can proceed to the next step of importing the required libraries for developing the interface. It is important to note that it is also a good idea to also install the tkinter library if you haven't already installed it, as these two libraries are interchangeably usable for specific tasks.
Importing the necessary libraries:
In the first step, we will import all the essential libraries that we will utilize for constructing our advanced GUI interface. We will make use of the custom tkinter library that we recently installed via the pip command. We can also utilize the tkinter library simultaneously with the custom tkinter module, as some of the functions are derivative of each other.
Finally, we will import the Pillow library, which is one of the best libraries in Python for handling different types of tasks related to images. We will import the ImageTk and Image classes for the Pillow library, which will enable us to handle tasks inside the GUI interface. Below is the code block for all the required library module imports.
# Importing the custom tkinter library for constructing the advanced GUI interface
import customtkinter
import tkinter
from PIL import ImageTk, ImageSetting the themes and creating the background interface:
Once we finish importing all the necessary libraries, the next essential step is to set the appearance and the theme modes for the development interface. For appearance, the custom tkinter library offers options, such as dark and light modes, whereas it allows blue, dark blue, and green as the options for the default color theme.
Once we set the appearance and default color themes, we can define the custom tkinter function as the root object to complete our functions. We will also set the geometry of the interface where we will perform our desired operations. Note that the dimensions can vary for specific purposes, and the size of the images used might have to be adjusted to perform the required task.
# Setting the appearence and theme of the GUI window
customtkinter.set_appearance_mode("dark")
customtkinter.set_default_color_theme("blue")
# Setting the dimensions and defining the custom tkinter function
app = customtkinter.CTk()
app.geometry("1280x720")Creating the button function:
In the next step, we will code a function that will enable us to display our image within the graphic window (either the entire screen or the respective frame). The photo image function in the ImageTk class allows us to display the desired image. We also use a custom Tkinter library where the images are displayed within. The code snippet for programming the same is provided below.
# Creating the function for displaying our image
def button_function():
img = ImageTk.PhotoImage(Image.open("Trees.jfif"))
label = customtkinter.CTkLabel(master = frame, image = img, text="")
label.pack()
print("button pressed")Creating the frame and interfacing the button:
In the final step of this section, we will create a frame in which the image will be displayed. We will pack the frame within the working graphic window. Once we have created the frame for displaying the image with the click of a button, we will create the actual button that will operate on the previously defined functionality. We will provide a central alignment to the button and pack the function. Finally, we will loop the working root function for the process. The code for the snippet is provided below.
# Creating the frame
frame = customtkinter.CTkFrame(master = app)
frame.pack(pady = 20, padx = 60, fill = "both", expand = True)
# # Use CTkButton for displaying the image
button = customtkinter.CTkButton(master=frame, text="Display Image", command=button_function)
button.place(relx=0.5, rely=0.8, anchor=tkinter.CENTER)
button.pack()
app.mainloop()Once you have completed coding the project, you can run the Python application. We notice a graphic window with a frame and a "Display Image" button within the frame. Once you click the following button, the image will be displayed within the frame. The working screenshot of the following project is provided below.
The complexity of this project is barely noticeable. It can be developed in a few lines of code with the correct libraries. However, the next section will cover a slightly more advanced version of this project, where we will implement an additional layer of functionality to make the project more creative.
Advanced improvement to load multiple images:
In this section, we will cover a slightly more advanced variation of the above project where we will display a randomized image each time we display the image and clear it. We will utilize the random library, which will enable us to interpret a random selection of an image each time the image is cleared with the "Delete Image" button and when the "Display Image" button is clicked right after. I have used the three images in this article for the generation of images. I have saved these three images as "Trees.jfif", "Maps.jfif", and "Books.jfif" in the working project directory.
The other additional function we are defining is the clear frame function, which will delete all the previous widgets assembled in the frame. For this reason, we will place the "Delete Image" and "Display Image" buttons outside the frame in the graphic window. The remaining process is the same for displaying the buttons in the graphical window and running the software. The code block for the entire project is provided below for ease of access to the developers.
# Importing the custom tkinter library for constructing the advanced GUI interface
import customtkinter
import tkinter
from PIL import ImageTk, Image
import random
# Setting the appearence and theme of the GUI window
customtkinter.set_appearance_mode("dark")
customtkinter.set_default_color_theme("blue")
# Setting the dimensions and defining the custom tkinter function
app = customtkinter.CTk()
app.geometry("1200x800")
# Creating the function for displaying our image
def button_function():
image_list = ["Trees.jfif", "Maps.jfif", "Books.jfif"]
selected_Image = random.choice(image_list)
print(selected_Image)
img = ImageTk.PhotoImage(Image.open(selected_Image))
label = customtkinter.CTkLabel(master = frame, image = img, text="")
label.pack()
print("button pressed")
def clear_frame():
for widgets in frame.winfo_children():
widgets.destroy()
# Creating the frame
frame = customtkinter.CTkFrame(master = app)
frame.pack(pady = 20, padx = 60, fill = "both", expand = True)
# # Use CTkButton for displaying the image
button = customtkinter.CTkButton(master=app, text="Display Image", command=button_function)
button.place(relx=0.5, rely=0.8, anchor=tkinter.CENTER)
button.pack()
# # Use CTkButton instead of tkinter Button
button = customtkinter.CTkButton(master=app, text="Delete Image", command=clear_frame)
button.place(relx=0.5, rely=0.6, anchor=tkinter.CENTER)
button.pack()
app.mainloop()For interested readers and developer enthusiasts, there are further additional improvements can be made to the above project as well. We can combine the display image and delete image button into a single entity as to avoid the pressing of two buttons each time an image needs to be displayed. A lot more unique features can also be made to the project by improvising the code and adding more necessary elements.
Conclusion:
"The next big thing is the one that makes the last big thing usable." — Blake Ross
Graphics and Graphic User Interfaces play a critical role in most software development projects. It is essential to have a more modern approach to emerging trends allowing us to create and develop innovative and creative working interfaces. Better human-computer interaction is guaranteed through a high-quality graphics interface.
In this article, we learned how to use custom tkinter to develop a more modern and advanced GUI interface with Python programming. We constructed our project to firstly display an image within the frame of the graphic window once the button is clicked. In the upcoming section, we covered a slight more sophisticated approach to the project for generating random images upon the click of the button.
I highly recommend trying out more advanced modifications and building multiple projects to get more familiar with the different functions and classes available in the custom tkinter library. If you want to get notified about my articles as soon as they go up, check out the following link to subscribe for email recommendations. If you wish to support other authors and me, then subscribe to the below link.
If you have any queries related to the various points stated in this article, then feel free to let me know in the comments below. I will try to get back to you with a response as soon as possible.
Check out some of my other articles in relation to the topic covered in this piece that you might also enjoy reading!
Develop Your Own Spelling Check Toolkit with Python
Beginners Guide to Streamlit for Deploying your Data Science Projects
Thank you all for sticking on till the end. I hope all of you enjoyed reading the article. Wish you all a wonderful day!
