python-PyWebIO 输出 (自学中)

目录

output 基本输出

组合输出

output - 输出域Scope

use_scope()

 clear()

 use_scope装饰器+clear()

scope 嵌套

内容输出

put_text 输入文本

put_markdown 输出Markdown

put_link 输出链接到其他网页或PyWebIO App的超链接

put_processbar 输出进度条

put_table 输出表格

span 设置内容跨单元格

put_buttons 输出按钮，并绑定点击事件

put_image 输出图片

put_file 文件下载

put_tabs 横向标签栏

put_collapse 输出可折叠的内容

put_scrollable 固定高度内容输出区域，内容超出则显示滚动条

put_row 行布局输出内容

 put_grid 网格布局输出内容

style 样式

---

output 基本输出

from pywebio.output import *

# Text Output
put_text("Hello world!")

# Table Output
put_table([
    ['Commodity', 'Price'],
    ['Apple', '5.5'],
    ['Banana', '7'],
])

# Image Output
put_image('https://www.python.org/static/img/python-logo.png')

# Markdown Output
put_markdown('~~Strikethrough~~')

# File Output, download file
put_file('hello_word.txt', b'hello word!')

# Show a PopUp
popup('popup title', 'popup text content')
# Show a notification message
toast('New message 🔔')

组合输出

函数名以 put_ 开始的输出函数，可以与一些输出函数组合使用，作为最终输出的一部分：put_table()支持以 put_xxx() 调用作为单元格内容:

put_table([
    ['Type', 'Content'],
    ['html', put_html('X<sup>2</sup>')],
    ['text', '<hr/>'],  # equal to ['text', put_text('<hr/>')]
    ['buttons', put_buttons(['A', 'B'], onclick=put_text)], 
    ['markdown', put_markdown('`Awesome PyWebIO!`')],
    ['file', put_file('hello.text', b'hello world')],
    ['table', put_table([['A', 'B'], ['C', 'D']])]
])

output - 输出域Scope

use_scope()

#可以使用 use_scope() 开启并进入一个新的输出域，或进入一个已经存在的输出域:
with use_scope('scope1'):  # 创建并进入scope 'scope1'
    put_text('text1 in scope1')  # 输出内容到 scope1
put_text('text in parent scope of scope1')  # 输出内容到 ROOT scope
with use_scope('scope1'):  # 进入之前创建的scope 'scope1'
    put_text('text2 in scope1')  # 输出内容到 scope1

 clear()

#use_scope() 使用 clear 参数将scope中原有的内容清空:
with use_scope('scope2'): # 创建并进入scope 'scope2'
    put_text('create scope2')  # 输出内容到 scope2
put_text('text in parent scope of scope2') # 输出内容到 ROOT scope
with use_scope('scope2', clear=True):  # 进入之前的"scope2",清除之前的内容
    put_text('I have replace content of scope2!!')  # 重新输出内容到scope2

 use_scope装饰器+clear()

import time 
from datetime import datetime
@use_scope('time', clear=True)
def show_time():
    put_text(datetime.now())
while True:         
   show_time()   
   time.sleep(3)
#第一次调用 show_time 时，将会创建 time 输出域并在其中输出当前时间，之后每次调用 show_time() ，输出域都会被新的内容覆盖

scope 嵌套

下面代码的布局如下：

# PyWebIO应用只有一个 ROOT scope。
with use_scope('A'):
    put_text('Text in scope A')
    with use_scope('B'):
        put_text('Text in scope B')
with use_scope('C'):
    put_text('Text in scope C')
put_html("""<style>                                         
#pywebio-scope-A {border: 1px solid red;}                   
#pywebio-scope-B {border: 1px solid blue;margin:2px}        
#pywebio-scope-C {border: 1px solid green;margin-top:2px}   
</style>""")                                                
put_text()                                                  
put_buttons([('Put text to %s' % i, i) for i in ('A', 'B', 'C')], lambda s: put_text(s, scope=s)).show()

1、初始运行结果：

 2、单击'Put text to A'

 3、再单击'Put text to B'

 4、最后单击两次'Put text to C'

#重新建A+B \ C \ D , 3个scope。
with use_scope('A'):
    put_text('Text in scope A')
    with use_scope('B'):
        put_text('Text in scope B')
with use_scope('C'):
    put_text('Text in scope C')
with use_scope('D'):
    put_text('Text in scope D')   
put_html("""<style>                                         
#pywebio-scope-A {border: 1px solid red;}                   
#pywebio-scope-B {border: 1px solid blue;margin:2px}        
#pywebio-scope-C {border: 1px solid green;margin-top:502px}   
#pywebio-scope-D {border: 1px solid orange;margin-top:502px}
</style>""").show()
#可对'C'分别进行测试滚动
scroll_to(scope='C',position='top')
scroll_to(scope='C',position='middle')
scroll_to(scope='C',position='bottom')

内容输出

put_text 输入文本

pywebio.output.put_text(*texts, sep=' ', inline=False, scope=None, position=- 1)

参数

• texts – 要输出的内容。类型可以为任意对象，对非字符串对象会应用 str() 函数作为输出值。
• sep (str) – 输出分隔符
• inline (bool) – 将文本作为行内元素(连续输出的文本显示在相同的段落中)。默认每次输出的文本都作为一个独立的段落
• scope (str) – 内容输出的目标scope，若scope不存在，则不进行任何输出操作。可以直接指定目标Scope名，或者使用int通过索引Scope栈来确定Scope
• position (int) – 在scope中输出的位置

#sep
put_text('我是谁','我在哪','我在干嘛',sep='-',inline=True).show()
#inline 当两个put_text连续使用true时，才会显示同一行
put_text("小鲁班",inline=False).show()
put_text("小背包",inline=True).show()
put_text("小火箭",inline=True).show()
put_text("哒哒哒",inline=False).show()
put_text("嘟嘟嘟",inline=True).show()
put_text("hehehe",inline=False).show()
#position 按索引插入位置。

 put_markdown 输出Markdown

pywebio.output.put_markdown(mdcontent, lstrip=True, options=None, \
                    sanitize=True, scope=None, position=- 1,
                     **kwargs)

参数

• mdcontent (str) – Markdown文本
• lstrip (bool) – 是否自动移除 mdcontent 每一行的前导空白锁进
• sanitize (bool) – 是否使用 DOMPurify 对内容进行过滤来防止XSS攻击。

# It is ugly without strip_indent or lstrip
put_markdown(r""" # H1
This is H1 first content.
dd""").show()
# Using lstrip to get beautiful indent
put_markdown(r""" # H2
    This is H2 second content.
    dd""", lstrip=True).show()
put_markdown(r""" # H2
    This is H2 second content.
    dd""").show()
# Using strip_indent to get beautiful indent
put_markdown(r""" # H3
    This is H3 third content.
    dd""", strip_indent=4).show()
put_markdown(r""" # H3
    This is H3 third content.
    dd""").show()

put_link 输出链接到其他网页或PyWebIO App的超链接

pywebio.output.put_link(name, url=None, app=None, new_window=False,\
                     scope=None, position=- 1)

 参数

• name (str) – 链接名称
• url (str) – 链接到的页面地址
• app (str) – 链接到的PyWebIO应用名。参见 Server模式
• new_window (bool) – 是否在新窗口打开链接
• scope, position (int) – 与 put_text 函数的同名参数含义一致
  url 和 app 参数必须指定一个但不可以同时指定

put_link("你再百度一下试试？","https://www.baidu.com/",new_window=True).show()

put_processbar 输出进度条

pywebio.output.put_processbar(name, init=0, label=None, auto_close=False, \
                scope=None, position=- 1)

参数

• name (str) – 进度条名称，为进度条的唯一标识
• init (float) – 进度条初始值. 进度条的值在 0 ~ 1 之间
• label (str) – 进度条显示的标签. 默认为当前进度的百分比
• auto_close (bool) – 是否在进度完成后关闭进度条

put_processbar(name="process",init=0.35,label="我就是个进度条：").show()

import time
put_processbar('bar');
for i in range(1, 11):
    set_processbar('bar', i / 10)
    time.sleep(0.1)
#结果大家自行测试。

put_table 输出表格

pywebio.output.put_table(tdata, header=None, scope=None, position=- 1)

参数

• tdata (list) – 表格数据。列表项可以为 list 或者 dict , 单元格的内容可以为字符串或 put_xxx 类型的输出函数。 数组项可以使用 span() 函数来设定单元格跨度。
• header (list) –表头。当 tdata 的列表项为 list 类型时，若省略 header 参数，则使用 tdata 的第一项作为表头。表头项可以使用 span() 函数来设定单元格跨度。

当 tdata 为字典列表时，使用 header 指定表头顺序，不可省略。此时， header 格式可以为 <字典键>列表 或者 (<显示文本>, <字典键>) 列表。

# 'Name' cell across 2 rows, 'Address' cell across 2 columns
put_table([
    [span('Name',row=2), span('Address', col=2)],
    ['City', 'Country'],
    ['Wang', 'Beijing', 'China'],
    ['Liu', 'New York', 'America'],
])

# Use `put_xxx()` in `put_table()`
put_table([
    ['Type', 'Content'],
    ['html', put_html('X<sup>2</sup>')],
    ['text', '<hr/>'],
    ['buttons', put_buttons(['A', 'B'], onclick=put_text)], 
    ['markdown', put_markdown('`Awesome PyWebIO!`')],
    ['file', put_file('hello.text', b'hello world')],
    ['table', put_table([['A', 'B'], ['C', 'D']])]
])

 

# Set table header
put_table([
    ['Wang', 'M', 'China'],
    ['Liu', 'W', 'America'],
], header=['Name', 'Gender', 'Address'])

# When ``tdata`` is list of dict
put_table([
    {"Course":"OS", "Score": "80"},
    {"Course":"DB", "Score": "93"},
], header=["Course", "Score"])  # or header=[(put_markdown("*Course*"), "Course"), (put_markdown("*Score*") ,"Score")]

 span 设置内容跨单元格

pywebio.output.span(content, row=1, col=1)

 用于在 put_table() 和 put_grid() 中设置内容跨单元格

参数

• content – 单元格内容。可以为字符串或 put_xxx() 调用。
• row (int) – 竖直方向跨度, 即：跨行的数目
• col (int) – 水平方向跨度, 即：跨列的数目

put_table([
    ['C'],
    [span('E', col=2)],  # 'E' across 2 columns
], header=[span('A', row=2), 'B']).show()  # 'A' across 2 rows

put_grid([
    [put_text('A'), put_text('B')],
    [span(put_text('A'), col=2)],  # 'A' across 2 columns
]).show()

 put_buttons 输出按钮，并绑定点击事件

pywebio.output.put_button(label, onclick, color=None, small=None,\
                link_style=False, outline=False, disabled=False,
                scope=None, position=- 1)

参数

• label (str) - Button label
• onclick (callable/list) - 按钮点击回调函数. onclick 可以是函数或者函数组成的列表.
  onclick 为函数时， 签名为 onclick(btn_value). btn_value 为被点击的按钮的 value 值
  onclick 为列表时，列表内函数的签名为 func(). 此时，回调函数与 buttons 一一对应
  Tip: 可以使用 functools.partial 来在 onclick 中保存更多上下文信息.
• small (bool) – 是否使用小号按钮，默认为False
• link_style (bool) – 是否将按钮显示为链接样式，默认为False
• outline (bool) – 是否将按钮显示为镂空样式，默认为False
• group (bool) – 是否将按钮合并在一起，默认为False
• color (str) – 按钮颜色。可选值为 primary 、secondary 、 success 、 danger 、 warning 、 info 、 light 、 dark .
• disabled (bool) – Whether the button is disabled
• scope, position (int) – 与 put_text 函数的同名参数含义一致

put_buttons([ 
    dict(label=i, value="I'm "+i, color=i) 
    for i in ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'] 
], onclick=put_text).show()

put_buttons([{'label':'success', 'value':"I'm success", 'color':"success"},
             {'label':'danger', 'value':"I'm danger", 'color':"danger"}], onclick=put_text).show()
# small
put_text("----------small-----------")
put_buttons([{'label':'success', 'value':"I'm success", 'color':"success"},
             {'label':'danger', 'value':"I'm danger", 'color':"danger"}], onclick=put_text,small=True).show()
#link_style
put_text("----------link_style-----------")
put_buttons([{'label':'success', 'value':"I'm success", 'color':"success"},
             {'label':'danger', 'value':"I'm danger", 'color':"danger"}], onclick=put_text,link_style=True).show()
#outline
put_text("----------outline-----------")
put_buttons([{'label':'success', 'value':"I'm success", 'color':"success"},
             {'label':'danger', 'value':"I'm danger", 'color':"danger"}], onclick=put_text,outline=True).show()
#group
put_text("----------group-----------")
put_buttons([{'label':'success', 'value':"I'm success", 'color':"success"},
             {'label':'danger', 'value':"I'm danger", 'color':"danger"}], onclick=put_text,group=True).show()

from functools import partial
def row_action(choice, id):
    put_text("You click %s button with id: %s" % (choice, id))
put_buttons(['edit', 'delete'], onclick=partial(row_action, id=1)).show()
#依次点击"edit","delete"

def edit():
    put_text("You click edit button")
def delete():
    put_text("You click delete button")
put_buttons(['edit', 'delete'], onclick=[edit, delete]).show()
#依次点击"edit","delete"

put_image 输出图片

pywebio.output.put_image(src, format=None, title='', width=None, height=None, \
                    scope=None, position=- 1)

参数

src – 图片内容. 可以为: 字符串类型的URL, bytes-like object 表示的图片二进制内容, PIL.Image.Image 实例
title (str) – 图片描述
width (str) – 图像的宽度，可以是CSS像素(数字px)或者百分比(数字%)
height (str) – 图像的高度，可以是CSS像素(数字px)或者百分比(数字%)。可以只指定 width 和 height 中的一个值，浏览器会根据原始图像进行缩放。
format (str) – 图片格式，非必须。如 png , jpeg , gif 等, 仅在 src 为非URL时有效
scope, position (int) – 与 put_text 函数的同名参数含义一致

#读取本地图片
from pywebio import STATIC_PATH
img = open( 'testPic.jpg', 'rb').read() 
put_image(img, width='50px').show()

#读取网络图片
put_image('https://www.python.org/static/img/python-logo.png').show()

put_file 文件下载

pywebio.output.put_file(name, content, label=None, scope=None, position=- 1)

在浏览器上的显示为一个以文件名为名的链接，点击链接后浏览器自动下载文件。

参数

• name (str) – 下载保存为的文件名
• content – 文件内容. 类型为 bytes-like object
• label (str) – 下载链接的显示文本，默认和文件名相同
• scope, position (int) – 与 put_text 函数的同名参数含义一致

content = open('TXT测试文件.txt', 'rb').read()   
put_file('hello-world.txt', content, 'download me').show()

put_tabs 横向标签栏

pywebio.output.put_tabs(tabs, scope=None, position=- 1)

参数

• tabs (list) – 标签列表，列表项为一个 dict: {"title": "Title", "content": ...} ，其中 content 表示标签内容，可以为字符串、 put_xxx() 调用或由它们组成的列表。
• scope, position (int) – 与 put_text 函数的同名参数含义一致

put_tabs([
    {'title': 'Text', 'content': 'Hello world'},
    {'title': 'Markdown', 'content': put_markdown('~~Strikethrough~~')},
    {'title': 'More content', 'content': [
        put_table([
            ['Commodity', 'Price'],
            ['Apple', '5.5'],
            ['Banana', '7'],
        ]),
        put_link('pywebio', 'https://github.com/wang0618/PyWebIO')
    ]},
]).show()
#3个标签里面都有内容

put_collapse 输出可折叠的内容

pywebio.output.put_collapse(title, content=[], open=False, scope=None, position=- 1)

 参数

• title (str) – 内容标题
• content (list/str/put_xxx()) – 内容可以为字符串或 put_xxx 类输出函数的返回值，或者由它们组成的列表。
• open (bool) – 是否默认展开折叠内容。默认不展开内容
• scope, position (int) – 与 put_text 函数的同名参数含义一致

put_collapse('Collapse title', [
    'text',
    put_markdown('~~Strikethrough~~'),
    put_table([
        ['Commodity', 'Price'],
        ['Apple', '5.5'],
    ])
], open=True).show()

put_scrollable 固定高度内容输出区域，内容超出则显示滚动条

pywebio.output.put_scrollable(content=[], height=400, \
                keep_bottom=False, border=True, scope=None, \
                position=- 1, **kwargs)

参数

• content (list/str/put_xxx()) – 内容可以为字符串或 put_xxx 类输出函数的返回值，或者由它们组成的列表。
• height (int/tuple) – 区域的高度（像素），内容超出此高度则使用滚动条。可以传入 (min_height, max_height) 来表示高度的范围，比如 (100, 200) 表示区域高度最小100像素、最高200像素。若不想限制高度，则传入 None
• keep_bottom (bool) – Whether to keep the content area scrolled to the bottom when updated.
• border (bool) – 是否显示边框
• scope, position (int) – 与 put_text 函数的同名参数含义一致

put_row 行布局输出内容

# Two code blocks of equal width, separated by 10 pixels
put_row([put_code('A'), None, put_code('B')]).show()

# The width ratio of the left and right code blocks is 2:3, which is equivalent to size='2fr 10px 3fr'
put_row([put_code('A'), None, put_code('B')], size='40% 10px 60%').show()

 

 put_grid 网格布局输出内容

pywebio.output.put_grid(content, cell_width='auto', cell_height='auto',\
            cell_widths=None, cell_heights=None, direction='row', \
            scope=None, position=- 1)

参数

• content – 输出内容. put_xxx() / None 组成的二维数组, None 表示空白. 数组项可以使用 span() 函数设置元素在网格的跨度.
• cell_width (str) – 网格元素的宽度.
• cell_height (str) – 网格元素的高度.
• cell_widths (str) – 网格每一列的宽度. 宽度值用空格分隔. 不可以和 cell_width 参数同时使用.
• cell_heights (str) – 网格每一行的高度. 高度值用空格分隔. 不可以和 cell_height 参数同时使用.
• direction (str) - 排列方向. 为 'row' 或 'column' .
  • 'row' 时表示，content中的每一个子数组代表网格的一行;
  • 'column' 时表示，content中的每一个子数组代表网格的一列.
• scope, position (int) – 与 put_text 函数的同名参数含义一致

cell_width,cell_height,cell_widths,cell_heights 参数中的宽度/高度值格式参考 put_row()函数的 size 参数注释.

put_grid([
    [put_text('A'), put_text('B'), put_text('C')],
    [None, span(put_text('D'), col=2, row=1)],
    [put_text('E'), put_text('F'), put_text('G')],
], cell_width='100px', cell_height='100px').show()

style 样式

put_text('hello').style('color: red; font-size: 20px').show()

 

# in combined output
put_row([
    put_text('hello').style('color: red'),
    put_markdown('markdown')
]).style('margin-top: 20px').show()

对应的代码已上传至github：GitHub - wujianming604/learn-PyWebIO: pywebio 自学中