How to use pywebview framework in python

Preface

pywebview is a library of python, similar to the flask framework, which is also a software package used to build web pages. Its feature is that it does not use more html and js languages, and can use more python languages to complete the creation of web pages and listen to elements of the library. Simple use is enough to read the examples, but it is not detailed enough:/

1. Install pywebview

First, make sure it is installedpywebview，You can install it through the following command:

pip install pywebview

2. Simple use

A simple creation interface and some basic operations will not be described here, nor is it nutritious. The official examples have been given, and only some examples are posted here:

A sample interface;

import webview

if __name__ == '__main__':
    # Create a standard webview window
    window = webview.create_window('Simple browser', '/hello')
    ()

A homemade interface:

import webview

html = """
  <html>
    <head></head>
    <body>
      <h2>Links</h2>

      <p><a href=''>Regular links</a> are opened in the application window.</p>
      <p><a href='' target='_blank'>target='_blank' links</a> are opened in an external browser.</p>

    </body>
  </html>
"""

if __name__ == '__main__':
    window = webview.create_window('Link types', html=html)
    ()

The external interface is called:

import webview

if __name__ == '__main__':
    window = webview.create_window(title='Webview App', url="/?type=chat&chatID=251739240281759747/", confirm_close=True,
                                   zoomable=True, vibrancy=True, width=1275, height=745)
    (user_agent='Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36 Edg/125.0.0.0',
                  debug=True)

So from these examples, there are two main types of pywebview, which can be homemade web page html parameters, or external links of url.

3. Advanced use

It is mainly about the selection of dom elements to choose: buttons, etc., about bind functions

import random
import webview

rectangles = []

def random_color():
    red = (0, 255)
    green = (0, 255)
    blue = (0, 255)

    return f'rgb({red}, {green}, {blue})'

def bind(window):
    def toggle_disabled():
        disabled = None if len(rectangles) > 0 else True
        remove_button.attributes = { 'disabled': disabled }
        empty_button.attributes = { 'disabled': disabled }
        move_button.attributes = { 'disabled': disabled }

    def create_rectangle(_):
        color = random_color()
        rectangle = .create_element(f'<div class="rectangle" style="background-color: {color};"></div>', rectangle_container)
        (rectangle)
        toggle_disabled()

    def remove_rectangle(_):
        if len(rectangles) > 0:
            ().remove()
        toggle_disabled()

    def move_rectangle(_):
        if len(rectangle_container.children) > 0:
            rectangle_container.children[-1].move(circle_container)

    def empty_container(_):
        rectangle_container.empty()
        ()
        toggle_disabled()

    def change_color(_):
        ['background-color'] = random_color()

    def toggle_class(_):
        ('circle')

    rectangle_container = .get_element('#rectangles')
    circle_container = .get_element('#circles')
    circle = .get_element('#circle')

    toggle_button = .get_element('#toggle-button')
    toggle_class_button = .get_element('#toggle-class-button')
    duplicate_button = .get_element('#duplicate-button')
    remove_button = .get_element('#remove-button')
    move_button = .get_element('#move-button')
    empty_button = .get_element('#empty-button')
    add_button = .get_element('#add-button')
    color_button = .get_element('#color-button')

    toggle_button. += lambda e: ()
    duplicate_button. += lambda e: ()
    toggle_class_button. += toggle_class
    remove_button. += remove_rectangle
    move_button. += move_rectangle
    empty_button. += empty_container
    add_button. += create_rectangle
    color_button. += change_color

if __name__ == '__main__':
    window = webview.create_window(
        'DOM Manipulations Example', html='''
            <html>
                <head>
                <style>
                    button {
                        font-size: 100%;
                        padding: 0.5rem;
                        margin: 0.3rem;
                        text-transform: uppercase;
                    }

                    .rectangle {
                        width: 100px;
                        height: 100px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin: 0.5rem;
                        border-radius: 5px;
                        background-color: red;
                    }

                    .circle {
                        border-radius: 50px;
                        background-color: red;
                    }

                    .circle:hover {
                        background-color: green;
                    }

                    .container {
                        display: flex;
                        flex-wrap: wrap;
                    }
                </style>
                </head>
                <body>
                    <button >Toggle circle</button>
                    <button >Toggle class</button>
                    <button >Change color</button>
                    <button >Duplicate circle</button>
                    <button >Add rectangle</button>
                    <button  disabled>Remove rectangle</button>
                    <button  disabled>Move rectangle</button>
                    <button  disabled>Remove all</button>
                    <div  style="display: flex; flex-wrap: wrap;">
                        <div  class="rectangle circle"></div>
                    </div>

                    <div  class="container"></div>
                </body>
            </html>
        '''
    )
    (bind, window)

And use event to listen to events such as buttons

And it supports dynamically generated elements:

with open(file_path, 'r', encoding='utf-8') as file:
    for line in file:
        count += 1
        .create_element(
            f"<input id='word{count}' writingsuggestions='true' type='text' class='editable-textbox'>111</input>"
        )
        temp = .get_element(f'#word{count}')
        line = ('\n')
         = line

Summarize

This is the article about the usage method of pywebview framework in python. For more related content of python pywebview framework, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!