Python Visual (GUI) Calculator
Python Calculator with Tkinter
This tutorial teaches you how to create and execute a visual (GUI) calculator with Python.
The code within this page involves some understanding of the Tkinter Python module (more here).
The code encompasses basic Python coding and Tkinter fundamentals.
If you are not familiar with Python coding, please check these tutorials first.
Let’s start.
We use Python version 3.10+ and PyCharm (IDE).
Plan
This calculator contains 3 main sections:
- Functions
- Main configuration
- Visual graphics and structuring
The calculator can calculate multiple numbers. It allows the usage of the standard arithmetic operations addition (+), subtraction (-), multiplication (*), and division (/). In addition, the calculator provides the following functions: modulo (%), floor division (//), and exponents (x^y).
Functions
This part of the calculator deals with functioning.
Tkinter is a built-in Python library. Therefore, it does not require external installation.
First, import the module in order to use it. There are 4 parts within this section, 1 expression initialisation and 3 main functions.
The expression refers to the empty entry box. In other words, where the numbers and signs appear. The click() function sets the expression by updating it with the specific clicked button. Furthermore, the click_equal() function defines the equal sign button operation, which tries to calculate the expression. Finally, the clear() function defines the clear button operation. This empties (deletes) the expression entry box.
from tkinter import *
exp = ""
def click(n):
global exp
exp = exp + str(n)
input_text.set(exp)
def click_equal():
try:
global exp
total = str(eval(exp))
input_text.set(total)
exp = ""
except:
input_text.set("There is an error!")
exp = ""
def clear():
global exp
exp = ""
input_text.set("")
Main configuration
In the second part, the main configuration begins.
First, we test for script execution. Then, we set and configure the main application window.
if __name__ == "__main__":
calc = Tk()
calc.configure(bg="silver")
calc.geometry("290x400")
calc.title("Calculator")
input_text = StringVar()
Visual graphics and structuring
The final third part, structures the calculator’s visuals. In other words, its the entry box and buttons.
This section is quite straightforward. Most of it is copying and pasting buttons and configuring their appearance and grid position.
Finally, the mainloop() is defined to handle the program’s events.
input = Entry(calc, textvariable=input_text, font="Ariel 25", width=16)
input.grid(columnspan=4, pady=20, ipadx=0, ipady=12)
num1 = Button(calc, text="1", fg="black", bg="dim gray", command=lambda: click(1), height=3, width=9)
num1.grid(row=1, column=0)
num2 = Button(calc, text="2", fg="black", bg="dim gray", command=lambda: click(2), height=3, width=9)
num2.grid(row=1, column=1)
num3 = Button(calc, text="3", fg="black", bg="dim gray", command=lambda: click(3), height=3, width=9)
num3.grid(row=1, column=2)
divide = Button(calc, text="/", fg="black", bg="dim gray", command=lambda: click("/"), height=3, width=9)
divide.grid(row=1, column=3)
num4 = Button(calc, text="4", fg="black", bg="dim gray", command=lambda: click(4), height=3, width=9)
num4.grid(row=2, column=0)
num5 = Button(calc, text="5", fg="black", bg="dim gray", command=lambda: click(5), height=3, width=9)
num5.grid(row=2, column=1)
num6 = Button(calc, text="6", fg="black", bg="dim gray", command=lambda: click(6), height=3, width=9)
num6.grid(row=2, column=2)
multiply = Button(calc, text="*", fg="black", bg="dim gray", command=lambda: click("*"), height=3, width=9)
multiply.grid(row=2, column=3)
num7 = Button(calc, text="7", fg="black", bg="dim gray", command=lambda: click(7), height=3, width=9)
num7.grid(row=3, column=0)
num8 = Button(calc, text="8", fg="black", bg="dim gray", command=lambda: click(8), height=3, width=9)
num8.grid(row=3, column=1)
num9 = Button(calc, text="9", fg="black", bg="dim gray", command=lambda: click(9), height=3, width=9)
num9.grid(row=3, column=2)
minus = Button(calc, text="-", fg="black", bg="dim gray", command=lambda: click("-"), height=3, width=9)
minus.grid(row=3, column=3)
num0 = Button(calc, text="0", fg="black", bg="dim gray", command=lambda: click(0), height=3, width=9)
num0.grid(row=4, column=0)
dot = Button(calc, text=".", fg="black", bg="dim gray", command=lambda: click("."), height=3, width=9)
dot.grid(row=4, column=1)
equal = Button(calc, text="=", fg="black", bg="dim gray", command=click_equal, height=3, width=9)
equal.grid(row=4, column=2)
plus = Button(calc, text="+", fg="black", bg="dim gray", command=lambda: click("+"), height=3, width=9)
plus.grid(row=4, column=3)
power = Button(calc, text="x^y", fg="black", bg="dim gray", command=lambda: click("**"), height=3, width=9)
power.grid(row=5, column=0)
floor = Button(calc, text="//", fg="black", bg="dim gray", command=lambda: click("//"), height=3, width=9)
floor.grid(row=5, column=1)
modulo = Button(calc, text="%", fg="black", bg="dim gray", command=lambda: click("%"), height=3, width=9)
modulo.grid(row=5, column=2)
clear = Button(calc, text="Clear", fg="black", bg="dim gray", command=clear, height=3, width=9)
clear.grid(row=5, column=3)
calc.mainloop()
Example
Below is an example of the execution of the calculator.
Full code of GUI Calculator
Below is the full Python code of the visual calculator.
from tkinter import *
exp = ""
def click(n):
global exp
exp = exp + str(n)
input_text.set(exp)
def click_equal():
try:
global exp
total = str(eval(exp))
input_text.set(total)
exp = ""
except:
input_text.set("There is an error!")
exp = ""
def clear():
global exp
exp = ""
input_text.set("")
if __name__ == "__main__":
calc = Tk()
calc.configure(bg="silver")
calc.geometry("290x400")
calc.title("Calculator")
input_text = StringVar()
input = Entry(calc, textvariable=input_text, font="Ariel 25", width=16)
input.grid(columnspan=4, pady=20, ipadx=0, ipady=12)
num1 = Button(calc, text="1", fg="black", bg="dim gray", command=lambda: click(1), height=3, width=9)
num1.grid(row=1, column=0)
num2 = Button(calc, text="2", fg="black", bg="dim gray", command=lambda: click(2), height=3, width=9)
num2.grid(row=1, column=1)
num3 = Button(calc, text="3", fg="black", bg="dim gray", command=lambda: click(3), height=3, width=9)
num3.grid(row=1, column=2)
divide = Button(calc, text="/", fg="black", bg="dim gray", command=lambda: click("/"), height=3, width=9)
divide.grid(row=1, column=3)
num4 = Button(calc, text="4", fg="black", bg="dim gray", command=lambda: click(4), height=3, width=9)
num4.grid(row=2, column=0)
num5 = Button(calc, text="5", fg="black", bg="dim gray", command=lambda: click(5), height=3, width=9)
num5.grid(row=2, column=1)
num6 = Button(calc, text="6", fg="black", bg="dim gray", command=lambda: click(6), height=3, width=9)
num6.grid(row=2, column=2)
multiply = Button(calc, text="*", fg="black", bg="dim gray", command=lambda: click("*"), height=3, width=9)
multiply.grid(row=2, column=3)
num7 = Button(calc, text="7", fg="black", bg="dim gray", command=lambda: click(7), height=3, width=9)
num7.grid(row=3, column=0)
num8 = Button(calc, text="8", fg="black", bg="dim gray", command=lambda: click(8), height=3, width=9)
num8.grid(row=3, column=1)
num9 = Button(calc, text="9", fg="black", bg="dim gray", command=lambda: click(9), height=3, width=9)
num9.grid(row=3, column=2)
minus = Button(calc, text="-", fg="black", bg="dim gray", command=lambda: click("-"), height=3, width=9)
minus.grid(row=3, column=3)
num0 = Button(calc, text="0", fg="black", bg="dim gray", command=lambda: click(0), height=3, width=9)
num0.grid(row=4, column=0)
dot = Button(calc, text=".", fg="black", bg="dim gray", command=lambda: click("."), height=3, width=9)
dot.grid(row=4, column=1)
equal = Button(calc, text="=", fg="black", bg="dim gray", command=click_equal, height=3, width=9)
equal.grid(row=4, column=2)
plus = Button(calc, text="+", fg="black", bg="dim gray", command=lambda: click("+"), height=3, width=9)
plus.grid(row=4, column=3)
power = Button(calc, text="x^y", fg="black", bg="dim gray", command=lambda: click("**"), height=3, width=9)
power.grid(row=5, column=0)
floor = Button(calc, text="//", fg="black", bg="dim gray", command=lambda: click("//"), height=3, width=9)
floor.grid(row=5, column=1)
modulo = Button(calc, text="%", fg="black", bg="dim gray", command=lambda: click("%"), height=3, width=9)
modulo.grid(row=5, column=2)
clear = Button(calc, text="Clear", fg="black", bg="dim gray", command=clear, height=3, width=9)
clear.grid(row=5, column=3)
calc.mainloop()
