Tuesday Tooling: Build Simple Web Apps with PyWebIO

by Les Pounder

I'm back from a hiatus and I've got a cracking Python project for you all!

So What Is It?

PyWebIO provides a series of imperative functions to obtain user input and output on the browser, turning the browser into a "rich text terminal", and can be used to build simple web applications or browser-based GUI applications without the need to have knowledge of HTML and JS. PyWebIO can also be easily integrated into existing Web services. PyWebIO is very suitable for quickly building applications that do not require complex UI.

Source: PyWebIO Github

So Why Should I Use This?

The humble web browser is everywhere and that means users can access your content anywhere. No custom tkinter interface, and no messy frameworks. Just generate some HTML and you have a basic user interface. The problem is that mixing HTML and Python can prove tricky for some. You can use Anvil to generate HTML user interfaces (I love Anvil, but it can be a little tricky to get going. Anvil is immensely powerful and well worth learning. Flask is also tricky and I've never truly got the hang of it.

PyWebIO is much simpler and starts a server directly on our machine.

I can see PyWebIO being a very useful alternative for educators and makers who want to get accessible data from their Python projects.

I'm thinking of Raspberry Pi projects such as...

  • Custom user interfaces for robots
  • Weather station
  • Citizen science data collection
  • Raspberry Pi camera controller

PyWebIO is Python, which means we can mix this code with our existing code to add a web app to our projects.

So How Do I Install PyWebIO?

PyWebIO is available via pip

Linux / Mac

pip3 install pywebio

Windows

pip install pywebio

So How Do I Use It?

  1. Open your favourite text editor and we'll start with a quick "Hello World"
  2. Start a server for the browser session.
from pywebio import start_server
  1. Import the input and output classes. We'll need these to capture user input and display it in the browser.
from pywebio.input import *
from pywebio.output import *
  1. Import the session for our web app.
from pywebio.session import *
  1. Import a persistent input to keep the user input. We can refresh the page and reuse the input field.
from pywebio.pin import *
  1. Create a function called main().
def main():
  1. Inside the function create a variable called name and use input to capture the user's name.
    name = input("What is your name?")
  1. Create a new variable, greetings which will store a personalised message to the user.
    greetings = 'Greetings',name,'!'
  1. Create a popup message to greet the user. Popup is a command in PyWebIO to generate those annoying website popups. But ours is actually nice!
    popup('Greetings', greetings)
  1. Create a notification that will visually alert the user. We can use emojiis in the alert, which is nice.
    toast('New message 🔔')
  1. Come out of the function to finally start the server and tell it to run our function and start on port 8080.
start_server(main, port=8080, debug=True)
  1. Save the code as webform.py and then run it from the terminal / IDE.
python webform.py
  1. Open a browser to 127.0.0.1:8080 and the form will appear!

Complete Demo Code Listing

from pywebio import start_server
from pywebio.input import *
from pywebio.output import *    
from pywebio.session import *
from pywebio.pin import *

def main():
    name = input("What is your name?")
    greetings = 'Greetings',name,'!'
    popup('Greetings', greetings)
    toast('New message 🔔')

start_server(main, port=8080, debug=True)

Taking It Further



We're not limited to just simple tasks like this, we have access to inputs such as

  • Drop down menus
  • Password fields
  • Checkbox
  • Single choice
  • Multi-line text input
  • File uploads

For Outputs

  • Text
  • Tables
  • Images
  • Markdown
  • Write to files

Take a look at the PyWebIO docs for more information.

Happy Hacking!