Hello everyone! Today we are going to make a Tkinter based GUI that will be an Application Form . We will ask some details by the user and then will be saving that with a default extension of .yaml, which can be changed at the time of saving the file. Let’s go ahead!
CONTENTS-
- Importing the libraries/modules
- The main window of our GUI
- Creating the button and the text box
- Setting the command after click
- Configuring the ‘Save As’ button
- Complete Python Code
1. Importing the libraries/modules
from tkinter import *
from tkinter import ttk
from tkinter.filedialog import asksaveasfile
You would be familiar with the first two imports. The third one ,asksaveasfile,is used to save the file in whatever format is entered by the user.
2. The main window of our GUI
After this, we will be creating the window of our GUI. First of all, we need to set the title of our window. We will also change the default icon of the tkinter with the official logo of IoTEDU. We are using ‘ttk’ to make our GUI look more appealing. This is how it’s done!
root=Tk()
root.geometry("600x400")
root.title('iot4beginners')
root.iconbitmap('logo.ico')
mainframe = ttk.Frame(root, padding="3 3 12 12")
mainframe.grid(column=0, row=0)
3. Creating the button and the text box
Since we are planning to make an application form, we need to make some text boxes with their labels. Using radio buttons we will disable the other boxes and only the selected button’s text box will have it’s state as normal. The .grid() function is used to set the location of that particular item in our GUI. After that, we will also make the ‘Save As’ button which would be at the end of the GUI.
ttk.Radiobutton(mainframe,variable=r,value=1,command=radCall).grid(row=1,column=1)
a=Entry(mainframe,width=21,textvariable=box_1)
a.grid(row=1,column=3)
ttk.Label(mainframe,text='Full Name').grid(row=1,column=2,sticky=W)
ttk.Button(mainframe, text="Save as",command=check).grid(row=8, column=3)
#creating the same for the other 6 fields
4. Setting the command after click
After setting all the labels and the buttons, we need to set the command after we click a radio button. Here, we will disable all the other text boxes which are not selected. By now, we could see the User interface (i.e. what user will see). This is how it will look like.
We have created the new function named radCall. By using the .get() function, we can get the value of the radio button which was selected. Then, with that value, we can focus the corresponding text box and will be grey out (DISABLE) the other text boxes.
def radCall():
select=r.get()
if select==1:
c = Entry(mainframe, width=21, textvariable=box_2, state=DISABLED).grid(row=2, column=3)
c = Entry(mainframe, width=21, textvariable=box_3, state=DISABLED).grid(row=3, column=3)
c = Entry(mainframe, width=21, textvariable=box_4, state=DISABLED).grid(row=4, column=3)
c = Entry(mainframe, width=21, textvariable=box_5, state=DISABLED).grid(row=5, column=3)
c = Entry(mainframe, width=21, textvariable=box_6, state=DISABLED).grid(row=6, column=3)
c = Entry(mainframe, width=21, textvariable=box_7, state=DISABLED).grid(row=7, column=3)
a = Entry(mainframe, width=21, textvariable=box_1)
a.grid(row=1, column=3)
a.focus()
After implementing the same logic for the rest buttons, we are now able to focus the selected box. I hope you are able to see the similar output.
5. Configuring the ‘Save As’ button
Now, we are heading towards saving the data entered by the user. We have created the new function named check(). As the user presses the Save As button, we will obtain the values using .get() function. We are then going to concatenate the data of each field with some strings. This will make the data more understandable.
def check():
val_1 = "Name: "+box_1.get()+"\n"
val_2 = "Age: "+box_2.get()+"\n"
val_3 = "Father\'s Name: "+box_3.get()+"\n"
val_4 = "Class/Semester: "+box_4.get()+"\n"
val_5 = "School/College: "+box_5.get()+"\n"
val_6 = "City: "+box_6.get()+"\n"
val_7 = "Pincode: "+box_7.get()
file = asksaveasfile(defaultextension='.yaml')
file.write(val_1)
file.write(val_2)
file.write(val_3)
file.write(val_4)
file.write(val_5)
file.write(val_6)
file.write(val_7)
Now, save the file with the desired name. The default extension will be .yaml, but it depends on you that how are you going to save the file due to the asksaveasfile package of tkinter.
6. Complete Python Code
I hope that you were able to accomplish this. Below is the full implemented python code for the same.
from tkinter import *
from tkinter import ttk
from tkinter.filedialog import asksaveasfile
root=Tk()
root.geometry("600x400")
root.title('iot4beginners')
root.iconbitmap('logo.ico')
mainframe = ttk.Frame(root, padding="3 3 12 12")
mainframe.grid(column=0, row=0)
box_1=StringVar() #name
box_2=StringVar() #age
box_3=StringVar() #father's name
box_4=StringVar() #class
box_5=StringVar() #school
box_6=StringVar() #city
box_7=StringVar() #pincode
r= IntVar()
def check():
val_1 = "Name: "+box_1.get()+"\n"
val_2 = "Age: "+box_2.get()+"\n"
val_3 = "Father\'s Name: "+box_3.get()+"\n"
val_4 = "Class/Semester: "+box_4.get()+"\n"
val_5 = "School/College: "+box_5.get()+"\n"
val_6 = "City: "+box_6.get()+"\n"
val_7 = "Pincode: "+box_7.get()
file = asksaveasfile(defaultextension='.yaml')
file.write(val_1)
file.write(val_2)
file.write(val_3)
file.write(val_4)
file.write(val_5)
file.write(val_6)
file.write(val_7)
def radCall():
select=r.get()
if select==1:
c = Entry(mainframe, width=21, textvariable=box_2, state=DISABLED).grid(row=2, column=3)
c = Entry(mainframe, width=21, textvariable=box_3, state=DISABLED).grid(row=3, column=3)
c = Entry(mainframe, width=21, textvariable=box_4, state=DISABLED).grid(row=4, column=3)
c = Entry(mainframe, width=21, textvariable=box_5, state=DISABLED).grid(row=5, column=3)
c = Entry(mainframe, width=21, textvariable=box_6, state=DISABLED).grid(row=6, column=3)
c = Entry(mainframe, width=21, textvariable=box_7, state=DISABLED).grid(row=7, column=3)
a = Entry(mainframe, width=21, textvariable=box_1)
a.grid(row=1, column=3)
a.focus()
if select==2:
c = Entry(mainframe, width=21, textvariable=box_1, state=DISABLED).grid(row=1, column=3)
c = Entry(mainframe, width=21, textvariable=box_3, state=DISABLED).grid(row=3, column=3)
c = Entry(mainframe, width=21, textvariable=box_4, state=DISABLED).grid(row=4, column=3)
c = Entry(mainframe, width=21, textvariable=box_5, state=DISABLED).grid(row=5, column=3)
c = Entry(mainframe, width=21, textvariable=box_6, state=DISABLED).grid(row=6, column=3)
c = Entry(mainframe, width=21, textvariable=box_7, state=DISABLED).grid(row=7, column=3)
b = Entry(mainframe, width=21, textvariable=box_2)
b.grid(row=2, column=3)
b.focus()
if select==3:
c = Entry(mainframe, width=21, textvariable=box_1, state=DISABLED).grid(row=1, column=3)
c = Entry(mainframe, width=21, textvariable=box_2, state=DISABLED).grid(row=2, column=3)
c = Entry(mainframe, width=21, textvariable=box_4, state=DISABLED).grid(row=4, column=3)
c = Entry(mainframe, width=21, textvariable=box_5, state=DISABLED).grid(row=5, column=3)
c = Entry(mainframe, width=21, textvariable=box_6, state=DISABLED).grid(row=6, column=3)
c = Entry(mainframe, width=21, textvariable=box_7, state=DISABLED).grid(row=7, column=3)
c_ = Entry(mainframe, width=21, textvariable=box_3)
c_.grid(row=3, column=3)
c_.focus()
if select==4:
c = Entry(mainframe, width=21, textvariable=box_1, state=DISABLED).grid(row=1, column=3)
c = Entry(mainframe, width=21, textvariable=box_2, state=DISABLED).grid(row=2, column=3)
c = Entry(mainframe, width=21, textvariable=box_3, state=DISABLED).grid(row=3, column=3)
c = Entry(mainframe, width=21, textvariable=box_5, state=DISABLED).grid(row=5, column=3)
c = Entry(mainframe, width=21, textvariable=box_6, state=DISABLED).grid(row=6, column=3)
c = Entry(mainframe, width=21, textvariable=box_7, state=DISABLED).grid(row=7, column=3)
d = Entry(mainframe, width=21, textvariable=box_4)
d.grid(row=4, column=3)
d.focus()
if select==5:
c = Entry(mainframe, width=21, textvariable=box_1, state=DISABLED).grid(row=1, column=3)
c = Entry(mainframe, width=21, textvariable=box_3, state=DISABLED).grid(row=3, column=3)
c = Entry(mainframe, width=21, textvariable=box_4, state=DISABLED).grid(row=4, column=3)
c = Entry(mainframe, width=21, textvariable=box_2, state=DISABLED).grid(row=2, column=3)
c = Entry(mainframe, width=21, textvariable=box_6, state=DISABLED).grid(row=6, column=3)
c = Entry(mainframe, width=21, textvariable=box_7, state=DISABLED).grid(row=7, column=3)
e = Entry(mainframe, width=21, textvariable=box_5)
e.grid(row=5, column=3)
e.focus()
if select==6:
c = Entry(mainframe, width=21, textvariable=box_1, state=DISABLED).grid(row=1, column=3)
c = Entry(mainframe, width=21, textvariable=box_3, state=DISABLED).grid(row=3, column=3)
c = Entry(mainframe, width=21, textvariable=box_4, state=DISABLED).grid(row=4, column=3)
c = Entry(mainframe, width=21, textvariable=box_5, state=DISABLED).grid(row=5, column=3)
c = Entry(mainframe, width=21, textvariable=box_2, state=DISABLED).grid(row=2, column=3)
c = Entry(mainframe, width=21, textvariable=box_7, state=DISABLED).grid(row=7, column=3)
f = Entry(mainframe, width=21, textvariable=box_6)
f.grid(row=6, column=3)
f.focus()
if select==7:
c = Entry(mainframe, width=21, textvariable=box_1, state=DISABLED).grid(row=1, column=3)
c = Entry(mainframe, width=21, textvariable=box_3, state=DISABLED).grid(row=3, column=3)
c = Entry(mainframe, width=21, textvariable=box_4, state=DISABLED).grid(row=4, column=3)
c = Entry(mainframe, width=21, textvariable=box_5, state=DISABLED).grid(row=5, column=3)
c = Entry(mainframe, width=21, textvariable=box_6, state=DISABLED).grid(row=6, column=3)
c = Entry(mainframe, width=21, textvariable=box_2, state=DISABLED).grid(row=2, column=3)
g = Entry(mainframe, width=21, textvariable=box_7)
g.grid(row=7, column=3)
g.focus()
ttk.Radiobutton(mainframe,variable=r,value=1,command=radCall).grid(row=1,column=1)
ttk.Radiobutton(mainframe,variable=r,value=2,command=radCall).grid(row=2,column=1)
ttk.Radiobutton(mainframe,variable=r,value=3,command=radCall).grid(row=3,column=1)
ttk.Radiobutton(mainframe,variable=r,value=4,command=radCall).grid(row=4,column=1)
ttk.Radiobutton(mainframe,variable=r,value=5,command=radCall).grid(row=5,column=1)
ttk.Radiobutton(mainframe,variable=r,value=6,command=radCall).grid(row=6,column=1)
ttk.Radiobutton(mainframe,variable=r,value=7,command=radCall).grid(row=7,column=1)
a=Entry(mainframe,width=21,textvariable=box_1)
a.grid(row=1,column=3)
ttk.Label(mainframe,text='Full Name').grid(row=1,column=2,sticky=W)
b=Entry(mainframe,width=21,textvariable=box_2)
b.grid(row=2,column=3)
ttk.Label(mainframe,text='Age').grid(row=2,column=2,sticky=W)
c=Entry(mainframe,width=21,textvariable=box_3)
c.grid(row=3,column=3)
ttk.Label(mainframe,text='Father\'s Name',).grid(row=3,column=2,sticky=W)
d=Entry(mainframe,width=21,textvariable=box_4)
d.grid(row=4,column=3)
ttk.Label(mainframe,text='Current Grade/Semester').grid(row=4,column=2,sticky=W)
e=Entry(mainframe,width=21,textvariable=box_5)
e.grid(row=5,column=3)
ttk.Label(mainframe,text='School/College').grid(row=5,column=2,sticky=W)
f=Entry(mainframe,width=21,textvariable=box_6)
f.grid(row=6,column=3)
ttk.Label(mainframe,text='Current Residential City').grid(row=6,column=2,sticky=W)
g=Entry(mainframe,width=21,textvariable=box_7)
g.grid(row=7,column=3)
ttk.Label(mainframe,text='Pincode').grid(row=7,column=2,sticky=W)
ttk.Button(mainframe, text="Save as",command=check).grid(row=8, column=3)
for child in mainframe.winfo_children(): child.grid_configure(padx=5, pady=5)
mainloop()
Comment if you face any problem. Also, refer the video for additional support. Happy Learning!