GUI Programming in Python2
Hi everyone! This is Sindy. Welcome back to my blog. How did everyone like my first blog? Previously I talked about the concept of Python and Tkinter, I also introduced some useful GUI components. I hope everyone enjoyed reading my first blog. In this second blog post, I’m going to continue introducing a few more interesting GUI widgets in the Tkinter library. Also, there is a simple project we can create to practice what we have learned so far. The project is about creating an images combiner program. I’m going to attach a demonstration video and the source code with comments at the end of the post. Again, I’m a new learner for Python so if you find any inaccurate information, please don’t hesitate correcting me. It will help me improve!
Before I start, I’d like to mention two points!
1) From the feedback of the first blog post, I decided to add an image including the entire code of the program so you can test to run it from your side. I am using Visual Studio Code as my preferred IDE (https://code.visualstudio.com/) for all work on this post. You can use any IDE of your preference.
2) On the left side of the images, you can see the code line number. I will explain code based on the line number. Since there are many repeated sections in each program, I’m will not explain every single line since we all have experience with Java at SAIT and many of the concepts are similar. The code explanation will be focused on GUI components. If you are unsure about basic Python syntax such as defining variables or functions, please feel free to leave a comment. I am very willing to answer you.
Widgets
As I introduced on the first blog post, Tkinter provides many GUI elements which users interact with. They are defined by a class and are commonly called widgets in Python. I’m going to introduce 6 more useful widgets.
1) Checkbutton
The Checkbutton widget is used to display a number of options as checkboxes. You’re probably familiar with Checkboxes from second semester Web development, these are identical to those. We have used them many times. Checkboxes allow a user to select multiple options at a time. Also, you can set certain options to be pre- checked as a default.
Syntax: Checkbutton (master, option=value, …)
- master: the master is the parent window. Our main window name is “root”; therefore, we pass in root as our “master.”
- option: The options are representing varying attributes of the Checkboxes. These are some of the attributes that I have used to define the Checkboxes being created.
Line 8 — The “variable” option (variable=chkvar) is to track the current state of the Checkbutton. Normally this variable is an IntVar, where 0 means cleared and 1 means set.
Line 9 — .select() sets the default value as selected. So, the Checkbutton is already checked.
Line 10 — .deselect() sets the default value as deselected. So, the Checkbutton is not checked.
Line 17 — def: def is used to “define” a method in python. Btncmd is the name of the method. After the colon any code that is indented under the definition will be defined for the Btncmd method.
This is the result of the above code. The first check button is used with .select(), the second one is used with .deselect(). So, when you run the program, you will see the result in the image.
2) Radiobutton
The Radiobutton widget is used to display a group of options as radio buttons. Users can select only one option at a time, giving them a choice among those options.
Syntax: Radiobutton (master, option=value, …)
Line 10 — The “value” (value=1) option is a control variable to set a value of each radio button to distinguish which button is selected. The data type for “value” can be an Integer or a String. The radio buttons that are pre-selected are “Cheese Burger” and “coke” as the defaults. When you try to print this value in the terminal (line 33, 34), you can see each value print “1” and “coke” respectively.
Line 22 — The “variable” (variable=burger_var/drink_var )option is a control variable to group different radio buttons. A user can only select one of the radio buttons sharing a same variable. The data type for “variable” can be an Integer or a String.
This is the result of the above code. Once you click the “Order” button, it will print the burger_var value and the drink_var value in the terminal. The burger_var value will be “1” and the drink_var value will be “coke”. You can see the difference between an IntVar and StringVar.
3) Combo Box
The Combobox widget is a combination of a Listbox widget and an entry field widget. It provides a list of options to select in a drop-down form. Once a user clicks the drop-down arrow, it opens the list. You can also decide how many options to be shown when the list is open.
Syntax: ttk.Combobox (master, option=value, …)
Line 1 — The Combobox widget is in the ttk module in Tkinter so we need to import this module to use that widget. As you import the module, you can set the name of the module to use in your code by adding as [name you’d like to use]. It’s common to set it as ttk.
Line 8 — The values = [] is creating an array of Strings called “values”. Compared to Java syntax (String[] values = {“Day: 1”, “Day: 2”, etc}), you can see it is much simpler and easier to dynamically create our list of values in one line.
Line 9 —The height (height=5) option is to determine how many options will be shown while the drop-down list is open.
Line 8 — Also, str(i) for i in range(1, 32) is the syntax of a “for loop” in Python. What a surprise! Here, str(i) is a Python function to change the integer value “i” into a String. The value of “i” is from 1 to 31. In python, the start number is included in the “i” value but not the end number. The loop goes until the end number — 1).
Line 11 — With the function .set(), you can set a title of the drop-down list. This is not an option that users can select. So, once you open the drop-down list, this title won’t be included in the list.
Line 13 — It is important to set the state of the Combo box as readonly. If not, users can change the value of options. Once you execute the program, you can try to edit the option on the first combo box and the second combo box. You won’t be able to edit it on the second one.
Line 14 — You can also set a default selected value with the function .current(index).
This is the result of the above code. Once you click the down arrow of the drop-down list or on the list, you will be able to see the options of the list. The first Combo box height is 5 so you will see 5 items, out of 31 items and it creates a scroll bar on the right automatically. The second Combo box’s height is 10 so you will see 10 items at a time with a scroll bar on the right as well.
4) Progress Bar
The Progress bar widget is to show the progress of a running task so users can be reassured that program is running while they are waiting for a certain response. The Progress bar widget is also in ttk module in Tkinter so we need to import this module to use the widget.
Syntax: ttk.Progressbar (master, option=value, …)
Line 9 — Create a DoubleVar object and assign it to a variable called p_var2
10 — The maximum (maximum=100) is a maximum value of the indicator. The default value is 100. length (length=150) is the width of the progress bar. Variable (variable=p_var2) is to link a control variable to the widget so that you can set the current value of the indicator.
Line 13…19 — Adding functionality to the button. This is setting an “i” value to the p_var2 variable then updating it to the widget. The variable of the progress bar will change it continuously so the indicator will move gradually and eventually it will stop once the “i” value reaches 100 which is the maximum value of the progress bar widget.
This is the result of the above code. Once you click the Start button, you will be able to see the progress bar moving from 0 to 100 according to the p_var2 value. You can also check the p_var2 value in the terminal due to line 19 (print(p_var2.get()).
5) Messagebox
The messagebox module is used to display message boxes. It provides a number of functions that you can use to display a pre-defined message. The Message box widget is in the messagebox module in Tkinter so we need to import this module to use the widget.
Syntax: messagebox.Message (master, option=value, …)
Important: In the code below, I will introduce what kind of Messages are in the messagebox module.
Line 10 — showinfo(“title”, “message”) this method is used to show an informational message.
Line 13-showwarning(“title”, “message”) this method is used to show a warning message.
Line 16 — showerror(“title”, “message”) this method is used to show an error message.
Line 19 — askokcancel(“title”, “message”) this method is used to prompt a user about a decision. The response from users would be ‘ok’ or ‘cancel’.
Line 22 — askretrycancel(“title”, “message”) this method is used to ask a user if they would like to retry in response to an action. The response from users would be ‘retry’ or ‘cancel’.
Line 29 — askyesno(“title”, “message”) this method is used to ask a yes or no question. The response from users would be ‘yes or ‘no’.
Line 32 — askyesnocancel(title=None, “message”) this method is used to ask a yes, no or cancel question message. The response from users would be ‘yes’ or ‘no’ or ‘cancel’.
This is the result of the above code. You can click each button and check the difference of each message that is presented.
This is the result of each button in the program. According to each method, you can easily understand the general function of that method by its name. The name of buttons are provided in the function declaration (e.g. askyesnocancel method provides three buttons, ‘Yes’, ‘No’, and ‘Cancel’).
6) Frame
Finally, this is the last widget I’d like to introduce. The Frame widget is used as a container widget to group other widgets and to organize them effectively. This widget helps positioning other widgets in a rectangular area.
Syntax: Frame (master, option=value, …)
Line 11 — relief is a border shape of the frame. The default value is “FLAT”. The “flat” choice means the frame will blend in with the frame surroundings. There are also other standard relief types you can try such as ‘RAISED’, ‘SUNKEN’, ‘GROOVE’, and ‘RIDGE’. Setting the relief=“solid”, the border is a darker black color and the frame sticks out a bit. The “Bd” option (you can also say “borderwidth”) is to set the width of the frame’s border. The default is 0 which means no border.
This is the result of the above code. You can check the positions of each elements according to the side (side=“top”) option. The first frame is located on the left and the second frame is located on the right. They both are expanded on every side as the fill (fill=“both”) option was set “both”.
Congratulations! From the first blog and this blog, we mastered 14 commonly used widgets in Tkinter. Now, it’s time to practice what we have learned so far with a real challenge. 😊
Project: Images combiner program
Let’s try to work on a small project! This project is to create a program to combine multiple images vertically. This means that the images you choose will line up vertically one on top of the other and make one image file. In the video, I will demonstrate the completed program and I will explain how the required functionalities will work together to create this awesome little piece of software.
Below is a project scenario along with some requirements so you can try to create your own program before watching the demo video. Good luck!
Now, let’s create the program together. This is a demo video for the project so we can write the code together. I also added the code for the program in my Github. You can go to the link after the videos and download it and run the program.
This is the end of the second blog post. I hope my studying process was helpful for you. For the next blog post, we will tackle Web scraping in Python, together. Thank you for visiting my blog and learning TKinter with me!
References
https://www.geeksforgeeks.org/combobox-widget-in-tkinter-python/
https://www.educba.com/tkinter-combobox/
https://www.tutorialspoint.com/python/python_gui_programming.htm
https://www.w3schools.com/python/ref_func_str.asp
https://anzeljg.github.io/rin2/book2/2405/docs/tkinter/ttk-Progressbar.html
https://docs.python.org/3/library/tkinter.messagebox.html
https://www.pythontutorial.net/tkinter/tkinter-progressbar/
https://anzeljg.github.io/rin2/book2/2405/docs/tkinter/relief.html