Embedded Files
Introduction
Python is one of the popular programming language that is used for almost all use cases, be it for creating apps, scripting, or machine learning. One of the main reasons for the popularity of python is the availability of modules that add extra functionalities. There is a module for all your need and they helps to build great applications quickly.
In this blog we are going to create a web app using python and pywebio module. Our aim is not to create a complex application but to make you families with pywebio modules and functionalities
What is Pywebio?
PyWebIO provides a diverse set of imperative functions to obtain user input and output content 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. Using PyWebIO, developers can write applications just like writing terminal scripts (interaction based on input and print function), without the need to have knowledge of HTML and JS. PyWebIO is ideal for quickly building interactive applications that don’t require a complicated user interface.
(Website: https://www.pyweb.io/)
Create a simple password generator with python and pywebio
Requirement
Python
Pywebio module
Controls needed in GUI of our application
Button : To submit the request to create password
Check box: To choose options
Slider: To set the password length
progress bar: To indicate the progress of the operation
Labels: To add text to our application window.
Image: To add images to GUI.
Lets see how our GUI will look after we set the following controls.
Let's start the Project
Firstly lets import required modules
import random
from flask import Flask
from pywebio import *
from pywebio.output import *
from pywebio.input import *
import time
from pywebio.platform.flask import webio_view
from pywebio.session import run_js, set_env
Controls and how to define them
Button
put_buttons(['Copy', 'Home', 'About'], onclick=btn_click)
Command Summary: This command will add 3 buttons name Copy,Home,About. onclick will invoke a function that wil perform the required task. In this case it will call function name btn_click().It will also automatically pass an argument which contain the text of the button. In this instance it is (btn_val)
For example:
def btn_click(btn_val):
if btn_val == 'Home':
# Your logic here
elif btn_val == "About":
#Your logic here
]
)
2. Check box
x = checkbox('Customize your password', options=['Uppercase', 'Lowercase', 'Numbers', 'Symbols']),
Command summary: This command add following check box : Uppercase,Lowercase,Numbers,Symbols.
x is a variable that holds the text of the check box. If all options are checked then all 4 text will be present in the variable x.
3. Slider
val=slider(label='Choose Password length', name=None, value=0, min_value=8, max_value=35, step=1, validate=None,required=True)
Command summary: This command create a slider that holds integer values.
label : Holds the text that shows above the slider
name: Name of the control (optional)
min_value: To set start value of slider
max_value: To set max value of slider
required=True: To force user to set a value.
4. Progress bar
put_processbar('bar')
for i in range(1, 3):
set_processbar('bar', i / 2)
time.sleep(0.2)
put_text("")
Command summary: This command adds a progress bar with animation. It is useful to to show the loading time of application.
for (i in range (1,3) : # This indicated that our progress bar is divided in to 3 parts : 1 to 3
time.sleep(0.2) : This indicated that after each part it should wait for 0.2 seconds and then move forward
put_text(""): If you want to show any text you can add it here.
5. Labels
labels are used to add text in our user interface.
put_text("Add text here")
Command summary: This command add text to GUI.
You can also use HTML which will allow to add emojis and special fonts using the below command
put_html(r"""<h1 align="center"><strong>Your text here</strong></h1>""")
#This add the same text but you have an option to add HTML formatting
6. Image
This command help to add images to our application GUI
img = open('logo.png', 'rb').read() # upload an image
put_image(img, width='100px') # add it to UI
width is used to set width of the image.
Conclusion
Pywebio is a great module for those who want to create web apps but at the same time with limited to zero knowledge of HTML, JS or CSS. We can directly use our python code in the application and deploy it. One good thing about this module is its controls are modern and will not consume much resources.
There are several advanced controls and those can be found at : Pywebio documentation
Source code of Application: Click here
Watch Video
Google Sites
Report abuse