Tkinter based GUI- Application form

by Apr 22, 2020Python Tkinter Examples

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-

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.

Application form

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.

Required 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!

Creating a multiplication Skill in Alexa using python

Written By Anmol Punetha

Hey, I am Anmol. I am a tech blogger and an electronics engineering student at the same time. As you're reading my blog, you are getting a generous amount of information in simpler words. Hope it's of use. Thank you for visiting. Keep reading!

RELATED POSTS

Look and Feel Customization on Python Tkinter

In this tutorial, you will learn about how to customize the look and feel of a python GUI created using tkinter. This is third part of tkinter tutorial course. To begin with, we will look at how to create message boxes. Contents: Creating MessageboxesCreate...

Layout Management using Python Tkinter

Layout Management using Python Tkinter

In this tutorial, you will be learning “How to layout your GUI using Python”. The following are the topics that will be covered in this article. Python Tkinter Label FramesTkinter Geometry MatrixCreating menu barsCreating tabbed widgets 1. Python Tkinter Label Frames:...

VIDEOS – FOLLOW US ON YOUTUBE

EXPLORE OUR IOT PROJECTS

IoT Smart Gardening System – ESP8266, MQTT, Adafruit IO

Gardening is always a very calming pastime. However, our gardens' plants may not always receive the care they require due to our active lifestyles. What if we could remotely keep an eye on their health and provide them with the attention they require? In this article,...

How to Simulate IoT projects using Cisco Packet Tracer

In this tutorial, let's learn how to simulate the IoT project using the Cisco packet tracer. As an example, we shall build a simple Home Automation project to control and monitor devices. Introduction Firstly, let's quickly look at the overview of the software. Packet...

All you need to know about integrating NodeMCU with Ubidots over MQTT

In this tutorial, let's discuss Integrating NodeMCU and Ubidots IoT platform. As an illustration, we shall interface the DHT11 sensor to monitor temperature and Humidity. Additionally, an led bulb is controlled using the dashboard. Besides, the implementation will be...

All you need to know about integrating NodeMCU with Ubidots over Https

In this tutorial, let's discuss Integrating NodeMCU and Ubidots IoT platform. As an illustration, we shall interface the DHT11 sensor to monitor temperature and Humidity. Additionally, an led bulb is controlled using the dashboard. Besides, the implementation will be...

How to design a Wireless Blind Stick using nRF24L01 Module?

Introduction Let's learn to design a low-cost wireless blind stick using the nRF24L01 transceiver module. So the complete project is divided into the transmitter part and receiver part. Thus, the Transmitter part consists of an Arduino Nano microcontroller, ultrasonic...

Sending Temperature data to ThingSpeak Cloud and Visualize

In this article, we are going to learn “How to send temperature data to ThingSpeak Cloud?”. We can then visualize the temperature data uploaded to ThingSpeak Cloud anywhere in the world. But "What is ThingSpeak?” ThingSpeak is an open-source IoT platform that allows...

Amaze your friend with latest tricks of Raspberry Pi and Firebase

Introduction to our Raspberry Pi and Firebase trick Let me introduce you to the latest trick of Raspberry Pi and Firebase we'll be using to fool them. It begins with a small circuit to connect a temperature sensor and an Infrared sensor with Raspberry Pi. The circuit...

How to implement Machine Learning on IoT based Data?

Introduction The industrial scope for the convergence of the Internet of Things(IoT) and Machine learning(ML) is wide and informative. IoT renders an enormous amount of data from various sensors. On the other hand, ML opens up insight hidden in the acquired data....

Smart Display Board based on IoT and Google Firebase

Introduction In this tutorial, we are going to build a Smart Display Board based on IoT and Google Firebase by using NodeMCU8266 (or you can even use NodeMCU32) and LCD. Generally, in shops, hotels, offices, railway stations, notice/ display boards are used. They are...

Smart Gardening System – GO GREEN Project

Automation of farm activities can transform agricultural domain from being manual into a dynamic field to yield higher production with less human intervention. The project Green is developed to manage farms using modern information and communication technologies....