In this tutorial, we are going to build a simple GUI calculator, which usually does calculations, addition, multiplication, division, etc, in a user-friendly way. The output image of the calculator we are going to build is shown below.
So, let's start our step-by-step tutorial. If you are not step by step learning type of person, we got you. You can view the full source code form here.
Import Library
Python comes with an inbuilt library for GUI, which is Tkinter and you don't have to worry about installation because it comes already installed with Python.
from tkinter import *Setting Up Engine
root = Tk()
root.title("Calculator")Placing Icon
root.iconbitmap('images/calculator.ico')calculator.ico is the name of the icon image. You can find any icon images for the app icon. If you want to download the image, you can just search calculator ico images and you will find many of them easily. Just download them, copy them into your working directory, and be ready to go.
Telling the Calculator what to do after Clicking Buttons
def clicked(num):
current = e.get()
e.delete(0,END)
e.insert(0,current + str(num))
Here we defined a function named clicked and we told that function to get the clicked number and join that number with the previous number. For example: if we have to add 4 to 50, we will need to type 5 and 0, which is basically two digits number. So the first line of this code gets the current number which is 5 and e.insert code gets 0 and joins them to make 50.
Come on, you can understand this. If not, then just copy. It's common for programmers.
Expression Functions
Expression functions are similar to each other. We just declare the math type here, i.e. addition or subtraction or other and we will do the math later on another function.
Addition
def addition():
first_num = e.get()
global f_num
global math
math = "addition"
f_num = int(first_num)
e.delete(0,END)
Subtraction
def substraction():
first_num = e.get()
global f_num
global math
math = "substraction"
f_num = int(first_num)
e.delete(0,END)Multiplication
def multiplication():
first_num = e.get()
global f_num
global math
math = "multiplication"
f_num = int(first_num)
e.delete(0,END)
Division
def division():
first_num = e.get()
global f_num
global math
math = "division"
f_num = int(first_num)
e.delete(0,END)Clear
def clear():
e.delete(0,END)Do you remember the C button on the calculator, yes it is that button...
Executing Results
Every calculator prints out the result after inserting numbers and expressions. This equals function outputs the result according to the math we have sent.
def equals():
second_num = e.get()
e.delete(0,END)
if math == "addition":
e.insert(0,f_num + int(second_num))
elif math == "substraction":
e.insert(0,f_num - int(second_num))
elif math == "division":
e.insert(0,f_num / int(second_num))
elif math == "multiplication":
e.insert(0,f_num * int(second_num))
Congrats to us, we have made a calculator engine. Now it's time to give a Graphics and Look at the calculator. Let's start.
Let's declare two variables first so that we can use them later,
x = 30
y = 30Creating Input Space
Every calculator has a display bar on its top. Let's create that here.
e = Entry(root,width=50,borderwidth = 4,fg="white",bg="purple")
e.grid(row=0,columnspan = 5,pady=5)Creating Buttons
The calculator should have 10 digits. For each digit, we need to declare a separate variable.
one = Button(root, text="1",padx=x,pady=y,bg="brown",fg="white",command=lambda: clicked(1))
two = Button(root, text="2",padx=x,pady=y,bg="brown",fg="white",command=lambda:clicked(2))
three = Button(root, text="3",padx=x,pady=y,bg="brown",fg="white",command=lambda:clicked(3))
four = Button(root, text="4",padx=x,pady=y,bg="brown",fg="white",command=lambda:clicked(4))
five = Button(root, text="5",padx=x,pady=y,bg="brown",fg="white",command=lambda:clicked(5))
six = Button(root, text="6",padx=x,pady=y,bg="brown",fg="white",command=lambda:clicked(6))
seven = Button(root, text="7",padx=x,pady=y,bg="brown",fg="white",command=lambda:clicked(7))
eight = Button(root, text="8",padx=x,pady=y,bg="brown",fg="white",command=lambda:clicked(8))
nine = Button(root, text="9",padx=x,pady=y,bg="brown",fg="white",command=lambda:clicked(9))
zero = Button(root, text="0",padx=x,pady=y,bg="brown",fg="white",command=lambda:clicked(0))
Let's understand syntax. Here Button() is a Tkinter function to declare buttons. The root is our engine where we want to create buttons. text is a button name, padx and pady are width and height separation from text, bg is the button background, fg is the text color and command is the work of the button.
Similarly, let's create buttons for expression syntaxes.
add = Button(root, text="+",padx=x,pady=y,bg="orange",fg="white",command=addition)
substract = Button(root, text="-",padx=x,pady=y,bg="orange",fg="white",command=substraction)
divide = Button(root, text="/",padx=x,pady=y,bg="orange",fg="white",command=division)
multiply = Button(root, text="*",padx=x,pady=y,bg="orange",fg="white",command=multiplication)
equal = Button(root, text="=",padx=x,pady=y,bg="blue",fg="white",command=equals)
clear = Button(root,text="C",padx=x , pady=y,bg="red",fg="white",command = clear)
Placing Buttons
We have successfully created every button on the calculator. All that remains is placing them in an appropriate order. Let's do this. For this, we will use button_name.grid function.
one.grid(row=3,column=0)
two.grid(row=3,column=1)
three.grid(row=3,column=2)
four.grid(row=2,column=0)
five.grid(row=2,column=1)
six.grid(row=2,column=2)
seven.grid(row=1,column=0)
eight.grid(row=1,column=1)
nine.grid(row=1,column=2)
zero.grid(row=4,column=0)
add.grid(row=4,column=1)
substract.grid(row=4,column=2)
divide.grid(row=2,column=4)
multiply.grid(row=3,column=4)
equal.grid(row=4,column=4)
clear.grid(row=1,column=4)While griding buttons we need to take care of rows and columns. We have 4 columns and 4 rows in our calculator. while one of the rows is already occupied by the display bar of the calculator. According to button placement, we give them row and column positions. Remember, counting for rows and columns starts from zero.
Finishing
root.mainloop()This code indicates the end of the Tkinter program. Now our calculator is ready to execute.
Congratulations, you have successfully learned to make a Python GUI calculator. Not its time to give it a try. Now you can practice building your own calculator by watching every step. We have posted all codes together into one below. So that you can try copying and pasting to give it a fast try.
Full Souce Code
from tkinter import *
root = Tk()
root.title("Calculator")
root.iconbitmap('images/calculator.ico')
def clicked(num):
current = e.get()
e.delete(0,END)
e.insert(0,current + str(num))
def addition():
first_num = e.get()
global f_num
global math
math = "addition"
f_num = int(first_num)
e.delete(0,END)
def substraction():
first_num = e.get()
global f_num
global math
math = "substraction"
f_num = int(first_num)
e.delete(0,END)
try:
def multiplication():
first_num = e.get()
global f_num
global math
math = "multiplication"
f_num = int(first_num)
e.delete(0,END)
except ValueError:
e.insert(root,text="Error!")
def division():
first_num = e.get()
global f_num
global math
math = "division"
f_num = int(first_num)
e.delete(0,END)
def clear():
e.delete(0,END)
def equals():
second_num = e.get()
e.delete(0,END)
if math == "addition":
e.insert(0,f_num + int(second_num))
elif math == "substraction":
e.insert(0,f_num - int(second_num))
elif math == "division":
e.insert(0,f_num / int(second_num))
elif math == "multiplication":
e.insert(0,f_num * int(second_num))
e = Entry(root,width=50,borderwidth = 4,fg="white",bg="purple")
e.grid(row=0,columnspan = 5,pady=5)
x = 30
y = 30
one = Button(root, text="1",padx=x,pady=y,bg="brown",fg="white",command=lambda: clicked(1))
two = Button(root, text="2",padx=x,pady=y,bg="brown",fg="white",command=lambda:clicked(2))
three = Button(root, text="3",padx=x,pady=y,bg="brown",fg="white",command=lambda:clicked(3))
four = Button(root, text="4",padx=x,pady=y,bg="brown",fg="white",command=lambda:clicked(4))
five = Button(root, text="5",padx=x,pady=y,bg="brown",fg="white",command=lambda:clicked(5))
six = Button(root, text="6",padx=x,pady=y,bg="brown",fg="white",command=lambda:clicked(6))
seven = Button(root, text="7",padx=x,pady=y,bg="brown",fg="white",command=lambda:clicked(7))
eight = Button(root, text="8",padx=x,pady=y,bg="brown",fg="white",command=lambda:clicked(8))
nine = Button(root, text="9",padx=x,pady=y,bg="brown",fg="white",command=lambda:clicked(9))
zero = Button(root, text="0",padx=x,pady=y,bg="brown",fg="white",command=lambda:clicked(0))
add = Button(root, text="+",padx=x,pady=y,bg="orange",fg="white",command=addition)
substract = Button(root, text="-",padx=x,pady=y,bg="orange",fg="white",command=substraction)
divide = Button(root, text="/",padx=x,pady=y,bg="orange",fg="white",command=division)
multiply = Button(root, text="*",padx=x,pady=y,bg="orange",fg="white",command=multiplication)
equal = Button(root, text="=",padx=x,pady=y,bg="blue",fg="white",command=equals)
clear = Button(root,text="C",padx=x , pady=y,bg="red",fg="white",command = clear)
#placing buttons
one.grid(row=3,column=0)
two.grid(row=3,column=1)
three.grid(row=3,column=2)
four.grid(row=2,column=0)
five.grid(row=2,column=1)
six.grid(row=2,column=2)
seven.grid(row=1,column=0)
eight.grid(row=1,column=1)
nine.grid(row=1,column=2)
zero.grid(row=4,column=0)
add.grid(row=4,column=1)
substract.grid(row=4,column=2)
divide.grid(row=2,column=4)
multiply.grid(row=3,column=4)
equal.grid(row=4,column=4)
clear.grid(row=1,column=4)
root.mainloop()