No HTML, CSS, or JavaScript Required: Creating Web Apps with PyWebIO

Ref. analytics vidya

PyWebIO is a Python library that makes it easy to build interactive web applications using Python code. With PyWebIO, you can create web applications without having to learn HTML, CSS, or JavaScript.

PyWebIO provides a range of input and output functions that allow you to build web applications with text input, file uploads, charts, and dialogues.

In this tutorial, we’ll show you how to get started with PyWebIO and build a simple calculator application. We’ll also explore some of the other input and output functions that PyWebIO provides.

Installation

Before we can use PyWebIO, we need to install it. You can install PyWebIO using pip:

pip install pywebio

Building a Calculator Application

from pywebio.input import *
from pywebio.output import *

def calculator():
    a = input("Enter the first number", type=FLOAT)
    b = input("Enter the second number", type=FLOAT)

    operation = radio("Select an operation", options=['+', '-', '*', '/'])

    if operation == '+':
        result = a + b
    elif operation == '-':
        result = a - b
    elif operation == '*':
        result = a * b
    elif operation == '/':
        result = a / b

    put_text("Result: ", result)

if __name__ == '__main__':
    start_server(calculator, port=8080)

Here, we import the input and output modules from PyWebIO. We develop a calculator function that invites the user to enter two integers and pick an operation. We then conduct the desired operation and output the result using the put text function.

Lastly, we start the PyWebIO server and pass in the calculator function as the application to be served. The port option defines the port number that the server should listen on.

When you execute this script, PyWebIO will launch a web server on port 8080. You may use the calculator by browsing to http://localhost:8080/ in your web browser.

File Uploads

You can allow users to upload files using the file_upload function. Here’s an example:

from pywebio.input import *
from pywebio.output import *

def file_uploader():
    files = file_upload("Upload your files", accept="*")

    for file in files.values():
        put_text("File name: %s" % file['filename'])
        put_text("File size: %d bytes" % file['size'])

if __name__ == '__main__':
    start_server(file_uploader, port=8080)

In this example, we construct a file uploader function that enables users to upload files. The file upload function shows a file upload window and returns a dictionary of files that the user submitted. We then loop through the dictionary of files and report the name and size of each file using the put text method.

Charts

You can create charts using the put_plot function. Here’s an example:

from pywebio.input import *
from pywebio.output import *
from pywebio import plot

def plotter():
    x = input("Enter x values", type=FLOAT, rows=3)
    y = input("Enter y values", type=FLOAT, rows=3)
    p1 = plot.plot(x, y, '.', markersize=10, title='Scatter Plot')
    p2 = plot.plot(x, y, '-', linewidth=2, title='Line Plot')
    put_plot([p1, p2])

if __name__ == '__main__':
    start_server(plotter, port=8080)

Dialogues

You can display dialogs using the `popup` function. Here’s an example:

from pywebio.input import *
from pywebio.output import *

def dialog():
    name = input("What is your name?")

    popup("Welcome", [
        put_text("Hello, %s!" % name),
        put_buttons(["Goodbye"])
    ])

if __name__ == '__main__':
    start_server(dialog, port=8080)

In this example, we define a dialog function that prompts the user for their name and then displays a welcome dialog using the popup function. The dialog contains a greeting message and a “Goodbye” button that the user can click to dismiss the dialog.

Finally

PyWebIO is a robust framework for constructing interactive web applications in Python. Using PyWebIO, you can construct web apps without having to master HTML, CSS, or JavaScript. PyWebIO offers a set of input and output routines that enable you to develop online applications with text input, file uploads, charts, and dialogs. In this article, we’ve showed you how to get started with PyWebIO and develop a basic calculator application. We’ve also studied some of the additional input and output functions that PyWebIO supports.

Thanks for reading!

Wait for for a second. You should get my articles in your inbox. Subscribe here. or Follow me on LinkedIn