Let’s create our first Web application in python using pyWebIO library.
I am creating a simple calculator that will accept two numbers as inputs and based on the selected operation (i.e., addition, subtraction, multiplication or division), it will display the output.
Let’s create a new file, to our existing project. Right click on the project -> select Add -> New Item


Specify the name of the file as calculator.py
Let’s define a function, called displayCalculator and I will be adding code to display the controls that are required to capture.
def displayCalculator():
data = input_group("Calculator",[
input("Enter the first Number", name='firstNum', type=NUMBER),
input("Enter the second Number", name='secondNum', type=NUMBER)])
action_val = actions(label="Select Operation",
buttons=[{'label': 'Addition', 'value': 'ADD'},
{'label':'Subtraction', 'value': 'SUB'},
{'label':'Multiplication', 'value': 'MUL'},
{'label':'Division', 'value': 'DIV'}])
I have defined a function called displayCalculator().
The first line of the function uses input_group method to display multiple controls at the same time.
This will display two input fields that will accept two numbers as like below.

The set of code creates two buttons, that is required to captured the operation type, i.e., addition, subtraction, multiplication or division.

Now, the screens are ready. We need to perform calculation. Let’s create another function to calculate.
Let’s create a new function named calculate that will accept three parameters i.e., first number, second number and the operation.
Calculate function should be like below.

def calculate(firstNum, secondNum, Operation):
if Operation == 'ADD':
put_markdown("<b>Addition</b> of {} and {} is {}".format(firstNum, secondNum, firstNum + secondNum))
elif Operation == 'SUB':
put_markdown("<b>Subtraction</b> of {} and {} is {}".format(firstNum, secondNum, firstNum - secondNum))
elif Operation == 'MUL':
put_markdown("<b>Multiplication</b> of {} and {} is {}".format(firstNum, secondNum, firstNum * secondNum))
elif Operation == 'DIV':
put_markdown("<b>Division</b> of {} and {} is {}".format(firstNum, secondNum, firstNum / secondNum))
I have used if condition to check what is the operation that is selected by user, and perform the required operation accordingly.
put_markdown will display the text in html format. If you see the code, I want to highlight the selected operation, hence, used <b></b> bold tag around the operation.
Empty braces ({}) will be replaced with the values mentioned using format method in the order it is mentioned.
Now, we have defined two functions, one to display the form and another one to calculate.
We need to call the calculate() function from displayCalculator() function and ensure that we are passing values for proper calculation.
Write this code inside displayClaculator() function.
calculate(data['firstNum'],data['secondNum'],action_val)
So, the entire code should look like below,
from pywebio.input import *
from pywebio.io_ctrl import *
from pywebio.output import *
def calculate(firstNum, secondNum, Operation):
if Operation == 'ADD':
put_markdown("<b>Addition</b> of {} and {} is {}".format(firstNum, secondNum, firstNum + secondNum))
elif Operation == 'SUB':
put_markdown("<b>Subtraction</b> of {} and {} is {}".format(firstNum, secondNum, firstNum - secondNum))
elif Operation == 'MUL':
put_markdown("<b>Multiplication</b> of {} and {} is {}".format(firstNum, secondNum, firstNum * secondNum))
elif Operation == 'DIV':
put_markdown("<b>Division</b> of {} and {} is {}".format(firstNum, secondNum, firstNum / secondNum))
def displayCalculator():
data = input_group("Calculator",[
input("Enter the first Number", name='firstNum', type=NUMBER),
input("Enter the second Number", name='secondNum', type=NUMBER)])
action_val = actions(label="Select Operation",
buttons=[{'label': 'Addition', 'value': 'ADD'},
{'label':'Subtraction', 'value': 'SUB'},
{'label':'Multiplication', 'value': 'MUL'},
{'label':'Division', 'value': 'DIV'}])
calculate(data['firstNum'],data['secondNum'],action_val)
if __name__ == '__main__':
displayCalculator()
After executing the code, you should see the output like below.

Enter two numbers that you want to calculate and click Submit.

Click on the operation that you need to perform.

I clicked Addition. Hence, below output.

Please try different operations and comment in case if you face any issue.


































