How to make GUI Calculator in Python?

The intention of the tutorial is not only to make the Calculator but also to understand the how GUI objects are created in Python.

At the end of this tutorial, I will share the complete code for Python calculator. You can copy-paste and use it.

If your intention is to learn the Python, just don’t copy the code. Follow this article step by step, you can write your own code. Trust me you will learn something amazing.

So let’s start.

For creating GUI, we are using PyQt4.QtGui package. It provides inbuilt functionality to create GUI objects like text area, button, labels…

If you don’t have PyQt4.QtGui package installed on your system, you can download and install with this simple command.

Note: While installing , please watch this link

sudo apt-get install python-qt4

Let’s start by considering the requirement to create calculator…

For our code to make the calculator, we need…

  • 2 text fields to take the user inputs
  • 4 buttons to perform four different arithmetic operations like add, subtract, divide and multiply
  • 1 label is to display the result

\"calculator\"

How to create these GUI objects in Python?

Code for Creating text field for user input

txtArea1 = QLineEdit(\"\", widget)
txtArea2 = QLineEdit(\"\", widget)

Code for Creating Clickable GUI buttons

btnAdd = QPushButton(\"Add\", widget)
btnSub = QPushButton(\"Subtract\", widget)
btnDiv = QPushButton(\"Divide\", widget)
btnMul = QPushButton(\"Multiply\", widget)

Python Code for Plotting GUI objects in Widget

There is one widget, inside which we are displaying all the GUI objects.

To display the objects in the widget, we have to position them using…

  • widget.resize()
  • widget.move()

All the GUI objects will be configured inside the init() function. It is the first function to be called.

Based on the button user clicks on, it will call the respective function.

For example, if the user clicks on the multiplication button, it calls multiplication()function. It reads the value from two text fields and performs the multiplication operation.

Reading User Input Values from Text Field:

The value in input text field is in the text format and you need to convert it into an integer before performing arithmetic operations.

This is a simple line of Python code we are using to convert text to an integer.

num1 = int(txtArea1.text())
num2 = int(txtArea2.text())

Performing Arithmetic Operation Based on User Input:

Perform the arithmetic operation on user input num1 and num2 is pretty easy.

Write a dedicated function for each of the arithmetic operation. These functions return the output to the caller.

Display Python Calculator Result:

Assign the output to the label object using label.setText().

label.setText(\"Output: \"+str(num1 * num2))

That’s it. If you take the other programming languages, it is not so much easy to create GUI, but the Python does it with ease.
Now here it is you are looking for…

Code for GUI Calculator in Python

Simply copy and save it in python file. Run it.

import sys
from PyQt4.QtGui import *
#from PyQt4 import QtGui
app = QApplication(sys.argv)
widget = QWidget()
label = QLabel(\"\", widget)
btnAdd = QPushButton(\"Add\", widget)
btnSub = QPushButton(\"Subtract\", widget)
btnDiv = QPushButton(\"Divide\", widget)
btnMul = QPushButton(\"Multiply\", widget)
#txtArea = QPlainTextEdit(\"Text To Edit\", widget)widget.resize
txtArea1 = QLineEdit(\"\", widget)
txtArea2 = QLineEdit(\"\", widget)
def init():
    widget.resize(300, 300)
    widget.move(300, 300)
    widget.setWindowTitle(\'Calculator\')
    widget.show()
    txtArea1.move(20,10)
    txtArea1.show()
    txtArea2.move(20,60)
    txtArea2.show()
    label.setText(\"\")
    label.move(20,110)
    label.show()
    btnAdd.setToolTip(\'Addition\')
    btnAdd.move(20,160)
    btnAdd.clicked.connect(addition)
    btnAdd.show()
    btnSub.setToolTip(\'Subtraction\')
    btnSub.move(110,160)
    btnSub.clicked.connect(subtraction)
    btnSub.show()
    btnDiv.setToolTip(\'Division\')
    btnDiv.move(20,210)
    btnDiv.clicked.connect(division)
    btnDiv.show()
    btnMul.setToolTip(\'Multiplication\')
    btnMul.move(110,210)
    btnMul.clicked.connect(multiplication)
    btnMul.show()
def addition():
    num1 = int(txtArea1.text())
    num2 = int(txtArea2.text())
    label.setFixedWidth(200)
    label.setText(\"Addition: \"+str(num1 + num2))
def subtraction():
    num1 = int(txtArea1.text())
    num2 = int(txtArea2.text())
    label.setFixedWidth(200)
    label.setText(\"Subtraction: \"+str(num1 - num2))
def multiplication():
    num1 = int(txtArea1.text())
    num2 = int(txtArea2.text())
    label.setFixedWidth(200)
    label.setText(\"Multiplication: \"+str(num1 * num2))
def division():
    num1 = int(txtArea1.text())
    num2 = int(txtArea2.text())
    label.setFixedWidth(200)
    label.setText(\"Division: \"+str(num1 / num2))
if __name__ == \"__main__\":
     init()
app.exec_()

You can modify the field in the code to understand and enhance the GUI for the calculator.

You can enhance this calculator by various ways…

  • Add numeric button so that you can get the values by clicking on the button instead of manually typing in the text area.
  • Add more arithmetic operation such as log, trigonometric function. Write a separate function for each operation and set one button for each operation.

Leave a Comment

Your email address will not be published. Required fields are marked *

Select Language »