Can I put input in a scope just like output?

[liaoshian]

For example, I'd like to have a grid display structure with inputs in the left column and outputs in the right column, but currently there's no scope parameter in input or input_group.

[wang0618]

The pin module is what you need. See https://pywebio.readthedocs.io/en/latest/pin.html

[wang0618]

The BMI demo for grid input layout is here:

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


def calculate(weight, height):
    BMI = weight / (height / 100) ** 2

    top_status = [(14.9, 'Severely underweight'), (18.4, 'Underweight'),
                  (22.9, 'Normal'), (27.5, 'Overweight'),
                  (40.0, 'Moderately obese'), (float('inf'), 'Severely obese')]

    for top, status in top_status:
        if BMI <= top:
            return BMI, status


def main():
    put_markdown("### BMI calculator")

    result = output()
    put_row([
        put_column([
            put_input("height", placeholder="Your Height(cm)：", type=FLOAT),
            put_input("weight", placeholder="Your Weight(kg)：", type=FLOAT),
            put_buttons(
                ['Submit'],
                onclick=lambda _: result.reset('Your BMI: %.1f, category: %s' % calculate(pin.weight, pin.height))
            )
        ]),
        result
    ])

    hold()


if __name__ == '__main__':
    import pywebio

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

[liaoshian]

I updated the original BMI demo based on your version, added a Reset button, some data validation (the pin.put_input doesn't support validate), and also appendable results.

import pywebio
import pywebio.pin

def t(eng, chinese):
    """return English or Chinese text according to the user's browser language"""
    return chinese if 'zh' in pywebio.session.info.user_language else eng

def main():
    """BMI Calculation
    Simple application for calculating Body Mass Index.
    计算BMI指数的简单应用
    """
    pywebio.session.get_current_session()
    pywebio.session.set_env(title=t('BMI Calculator', 'BMI计算器'))
    pywebio.session.run_js("$('head link[rel=icon]').attr('href', image_url)",
        image_url="https://www.python.org/static/favicon.ico")

    pywebio.output.put_markdown(t("""# Body Mass Index

    [Body mass index](https://en.wikipedia.org/wiki/Body_mass_index) (BMI) is a measure of body fat based on height and weight that applies to adult men and women.

    BMI Categories:

    | Category             | BMI           |
    | -------------------- | ------------- |
    | Severely underweight | BMI<14.9      |
    | Underweight          | 14.9≤BMI<18.4 |
    | Normal               | 18.4≤BMI<22.9 |
    | Overweight           | 22.9≤BMI<27.5 |
    | Moderately obese     | 27.5≤BMI<40   |
    | Severely obese       | BMI≥40        |

    ## BMI calculation
    The source code of this application is [here](https://github.com/wang0618/PyWebIO/blob/dev/demos/bmi.py)
    """, """# BMI指数
    [`BMI指数`](https://baike.baidu.com/item/%E4%BD%93%E8%B4%A8%E6%8C%87%E6%95%B0/1455733)（Body Mass Index，BMI），是用体重千克数除以身高米数的平方得出的数字，是国际上常用的衡量人体胖瘦程度以及是否健康的一个标准。

    成年人的BMI值处于以下阶段

    | 体形分类 | BMI值范围 |
    | ------ | -------- |
    | 极瘦    | BMI<14.9    |
    | 偏瘦    | 14.9≤BMI<18.4     |
    | 正常    | 18.4≤BMI<22.9     |
    | 过重    |  22.9≤BMI<27.5  |
    | 肥胖    |  27.5≤BMI<40  |
    | 非常肥胖 |     BMI≥40      |

    ## BMI指数计算器
    本程序的源代码[链接](https://github.com/wang0618/PyWebIO/blob/dev/demos/bmi.py)

    """), strip_indent=4)

    def check_form(height, weight):  # input group validation: return (input name, error msg) when validation fail
        no_error = True
        if height is None:
            result.append(pywebio.output.put_markdown(t(f'Height is empty!',
                f'身高未输！')))
            no_error = False
        elif height<50:
            result.append(pywebio.output.put_markdown(t(f'Height: `{height}cm` too short!',
                f'身高: `{height}厘米` 太矮！')))
            no_error = False
        elif height>200:
            result.append(pywebio.output.put_markdown(t(f'Height: `{height}cm` too tall!',
                f'身高: `{height}厘米` 太高！')))
            no_error = False
        if weight is None:
            result.append(pywebio.output.put_markdown(t(f'Weight is empty!',
                f'体重未输！')))
            no_error = False
        elif weight<10:
            result.append(pywebio.output.put_markdown(t(f'Weight: `{weight}kg` too light!',
                f'体重: `{weight}公斤` 太轻！')))
            no_error = False
        elif weight>100:
            result.append(pywebio.output.put_markdown(t(f'Weight: `{weight}kg` too heavy!',
                f'体重: `{weight}公斤` 太重！')))
            no_error = False
        return no_error

    def calc_bmi(height, weight):
        if not check_form(height, weight):
            return
        BMI = weight / (height / 100) ** 2

        top_status = [
            (14.9, t('Severely underweight', '极瘦')),
            (18.4, t('Underweight', '偏瘦')),
            (22.9, t('Normal', '正常')),
            (27.5, t('Overweight', '过重')),
            (40.0, t('Moderately obese', '肥胖')),
            (float('inf'), t('Severely obese', '非常肥胖'))
        ]

        for top, status in top_status:
            if BMI <= top:
                result.append(pywebio.output.put_markdown(t(f'Height: `{height:.0f}cm`, weight: `{weight:.0f}kg`, BMI: `{BMI:.1f}`, category: `{status}`',
                    f'身高：`{height:.0f}厘米`，体重：`{weight:.0f}公斤`，BMI: `{BMI:.1f}`，身体状态: `{status}`')))
                return

    def clear_form():
        pywebio.pin.pin_update('height', value='')
        pywebio.pin.pin_update('weight', value='')
        # result.reset('')

    result = pywebio.output.output()
    pywebio.output.put_row([
        pywebio.output.put_column([
            pywebio.pin.put_input(label=t("Your Height (cm):", "你的身高（厘米）："),
                name="height", type='float'),
            pywebio.pin.put_input(label=t("Your Weight (kg):", "你的体重（公斤）："),
                name="weight", type='float'),
            pywebio.output.put_buttons([{'label': t('Submit', '提交'), 'value': 'submit', 'color': 'primary'},
                    {'label': t('Reset', '重置'), 'value': 'reset', 'color': 'warning'}],
                onclick=[lambda: calc_bmi(pywebio.pin.pin.height, pywebio.pin.pin.weight),
                    lambda: clear_form()])
        ]),
        None,
        result
    ])

    pywebio.session.hold()

if __name__ == '__main__':
    pywebio.start_server(main, port=8080, auto_open_browser=True)

There are still issues that I can't solve:

1. I'd like to use style to make the Submit and Reset buttons the same width, but it won't work (style only works on the outer div tag instead of on each button).
2. Instead of update output in the main function, I had to update output inside the calc_bmi and check_form callbacks, which is not very pythonic even though it works.
3. auto_open_browser=True doesn't work.
4. remote_access=True will raise an Exception: AttributeError: module 'os' has no attribute 'fork' on Windows.

[wang0618]

1. You can use run_js("#('head').append('<style>...</style>')") to add custom style.
2. you can use functools.partial to pass ouput as parameter of calc_bmi() and clear_form(). See http://pywebio-demos.demo.wangweimin.site/doc_demo?app=demo-put-buttons-a8edc
3. auto_open_browser use python webbrowser module to open web browser, you can check if the module work ok by python -m webbrowser -t "http://www.python.org"
4. This issue is fixed in latest dev version. Use pip3 install -U https://code.aliyun.com/wang0618/pywebio/repository/archive.zip to install it.

[liaoshian]

Thanks a lot,

1. works with: pywebio.session.run_js("$('head').append('<style>button {min-width: 6em}</style>')")
2. not quite clear how, I actually want the calc_bmi to return BMI and status only, instead of directly setting the result output outside the main function (which means I can put the calc_bmi outside the main function). I understand I can use functools.partial to send the value of the button to my callback, but unless I combine calc_bmi and check_form into one callback, it doesn't help.
3. the webbrowser module does work, only it doesn't work in start_server, instead the following code works:

if __name__ == '__main__':
    port = 8080
    webbrowser.open(f'http://localhost:{port}/')
    pywebio.start_server(main, port=port, auto_open_browser=True)

4. remote_access=True now works, but I didn't know it means I need to pay $3.5 per month per domain. At least I don't need remote_access to be able to visit my page from my phone using local network.

[wang0618]

2. I thought at first you don't want to use result as nonlocal variable, now I think what you mean is that you want to separate computational code from UI updates. Here is my code:

import pywebio
import pywebio.pin


def check_form(height, weight):  # return error msg string or None
    error_msg = None
    if height is None:
        error_msg = f'Height is empty!'
    elif height < 50:
        error_msg = f'Height: `{height}cm` too short!'
    elif height > 200:
        error_msg = f'Height: `{height}cm` too tall!'
    if weight is None:
        error_msg = f'Weight is empty!'
    elif weight < 10:
        error_msg = f'Weight: `{weight}kg` too light!'
    elif weight > 100:
        error_msg = f'Weight: `{weight}kg` too heavy!'

    return error_msg


def calc_bmi(height, weight):  # return (status, BMI value)
    BMI = weight / (height / 100) ** 2

    top_status = [
        (14.9, 'Severely underweight'),
        (18.4, 'Underweight'),
        (22.9, 'Normal'),
        (27.5, 'Overweight'),
        (40.0, 'Moderately obese'),
        (float('inf'), 'Severely obese')
    ]

    for top, status in top_status:
        if BMI <= top:
            return status, BMI


def main():
    """BMI Calculation
    Simple application for calculating Body Mass Index.
    """
    pywebio.session.get_current_session()
    pywebio.session.set_env(title='BMI Calculator')
    pywebio.session.run_js("""
    $('head link[rel=icon]').attr('href', image_url);
    $('head').append('<style>button {min-width: 6em}</style>')
    """, image_url="https://www.python.org/static/favicon.ico")

    pywebio.output.put_markdown("""# Body Mass Index

    [Body mass index](https://en.wikipedia.org/wiki/Body_mass_index) (BMI) is a measure of body fat based on height and weight that applies to adult men and women.

    BMI Categories:

    | Category             | BMI           |
    | -------------------- | ------------- |
    | Severely underweight | BMI<14.9      |
    | Underweight          | 14.9≤BMI<18.4 |
    | Normal               | 18.4≤BMI<22.9 |
    | Overweight           | 22.9≤BMI<27.5 |
    | Moderately obese     | 27.5≤BMI<40   |
    | Severely obese       | BMI≥40        |

    ## BMI calculation
    The source code of this application is [here](https://github.com/wang0618/PyWebIO/blob/dev/demos/bmi.py)
    """, strip_indent=4)

    def clear_form():
        pywebio.pin.pin_update('height', value='')
        pywebio.pin.pin_update('weight', value='')

    result = pywebio.output.output()

    def show_bmi(height, weight):
        error_msg = check_form(height, weight)
        if error_msg:
            result.append(pywebio.output.put_markdown(error_msg))
            return

        status, BMI = calc_bmi(height, weight)
        result.append(pywebio.output.put_markdown(
            f'Height: `{height:.0f}cm`, weight: `{weight:.0f}kg`, BMI: `{BMI:.1f}`, category: `{status}`'
        ))

    pywebio.output.put_row([
        pywebio.output.put_column([
            pywebio.pin.put_input(label="Your Height (cm):", name="height", type='float'),
            pywebio.pin.put_input(label="Your Weight (kg):", name="weight", type='float'),
            pywebio.output.put_buttons([
                {'label': 'Submit', 'value': 'submit', 'color': 'primary'},
                {'label': 'Reset', 'value': 'reset', 'color': 'warning'}
            ], onclick=[
                lambda: show_bmi(pywebio.pin.pin.height, pywebio.pin.pin.weight),
                lambda: clear_form()
            ])
        ]),
        None,
        pywebio.output.put_scrollable(content=result, height=200, keep_bottom=True)
    ])

    pywebio.session.hold()


if __name__ == '__main__':
    pywebio.start_server(main, port=8080, auto_open_browser=True, debug=True)

3. I will work on this issue later.
4. The remote access service is provide by localhost.run, and you need a subscription if you want to use a custom domain for your remote access address. However, if you use the default remote access address, it's free.

[liaoshian]

Wonderful, now it's perfect for me.
The remote access service does work if I use the random default address.
My next plan is to write a small math problem solving game for my 6 year old son, let's see how it goes and I'll post my problems here if any.