demo: update

demos/bmi.py

@@ -15,9 +15,27 @@ from pywebio.session import set_env
 def main():
     set_env(title="BMI Calculation")
 
-    put_markdown("""计算 [`BMI指数`](https://baike.baidu.com/item/%E4%BD%93%E8%B4%A8%E6%8C%87%E6%95%B0/1455733) 的简单应用，源代码[链接](https://github.com/wang0618/PyWebIO/blob/master/demos/bmi.py)""", lstrip=True)
-
-    info = input_group('请输入', [
+    put_markdown("""# 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)
+
+    info = input_group('计算BMI：', [
         input("请输入你的身高(cm)", name="height", type=FLOAT),
         input("请输入你的体重(kg)", name="weight", type=FLOAT),
     ])

demos/chat_room.py

@@ -13,7 +13,7 @@ import asyncio
 from pywebio import start_server, run_async
 from pywebio.input import *
 from pywebio.output import *
-from pywebio.session import defer_call, set_env
+from pywebio.session import defer_call, set_env, run_js
 
 # 最大消息记录保存
 MAX_MESSAGES_CNT = 10 ** 4
@@ -22,7 +22,7 @@ chat_msgs = []  # 聊天记录 (name, msg)
 online_users = set()  # 在线用户
 
 
-async def refresh_msg(my_name):
+async def refresh_msg(my_name, msg_box):
     """刷新聊天消息"""
     global chat_msgs
     last_idx = len(chat_msgs)
@@ -30,7 +30,8 @@ async def refresh_msg(my_name):
         await asyncio.sleep(0.5)
         for m in chat_msgs[last_idx:]:
             if m[0] != my_name:  # 仅刷新其他人的新信息
-                put_markdown('`%s`: %s' % m)
+                msg_box.append(put_markdown('`%s`: %s' % m))
+                run_js('$("#pywebio-scope-msg-container>div").animate({ scrollTop: $("#pywebio-scope-msg-container>div").prop("scrollHeight")}, 1000)')  # hack: to scroll bottom
 
         # 清理聊天记录
         if len(chat_msgs) > MAX_MESSAGES_CNT:
@@ -44,22 +45,24 @@ async def main():
 
     set_env(title="PyWebIO Chat Room")
 
-    put_markdown("""欢迎来到聊天室，你可以和当前所有在线的人聊天\n
-    本应用使用不到80行代码实现，源代码[链接](https://github.com/wang0618/PyWebIO/blob/master/demos/chat_room.py)""", lstrip=True)
+    put_markdown("##PyWebIO聊天室\n欢迎来到聊天室，你可以和当前所有在线的人聊天。"
+    "本应用使用不到80行代码实现，源代码[链接](https://github.com/wang0618/PyWebIO/blob/master/dev/chat_room.py)", lstrip=True)
 
-    nickname = await input("请输入你的昵称", required=True,
-                           validate=lambda n: '昵称已被使用' if n in online_users or n == '📢' else None)
+    msg_box = output()
+    with use_scope('msg-container'):
+        style(put_scrollable(msg_box, max_height=300), 'height:300px')
+    nickname = await input("请输入你的昵称", required=True, validate=lambda n: '昵称已被使用' if n in online_users or n == '📢' else None)
 
     online_users.add(nickname)
     chat_msgs.append(('📢', '`%s`加入聊天室. 当前在线人数 %s' % (nickname, len(online_users))))
-    put_markdown('`📢`: `%s`加入聊天室. 当前在线人数 %s' % (nickname, len(online_users)))
+    msg_box.append(put_markdown('`📢`: `%s`加入聊天室. 当前在线人数 %s' % (nickname, len(online_users))))
 
     @defer_call
     def on_close():
         online_users.remove(nickname)
         chat_msgs.append(('📢', '`%s`退出聊天室. 当前在线人数 %s' % (nickname, len(online_users))))
 
-    refresh_task = run_async(refresh_msg(nickname))
+    refresh_task = run_async(refresh_msg(nickname, msg_box))
 
     while True:
         data = await input_group('发送消息', [
@@ -69,11 +72,12 @@ async def main():
         if data is None:
             break
 
-        put_markdown('`%s`: %s' % (nickname, data['msg']))
+        msg_box.append(put_markdown('`%s`: %s' % (nickname, data['msg'])))
+        run_js('$("#pywebio-scope-msg-container>div").animate({ scrollTop: $("#pywebio-scope-msg-container>div").prop("scrollHeight")}, 1000)')  # hack: to scroll bottom
         chat_msgs.append((nickname, data['msg']))
 
     refresh_task.close()
-    put_text("你已经退出聊天室")
+    toast("你已经退出聊天室")
 
 
 if __name__ == '__main__':

demos/input_usage.py

@@ -12,11 +12,11 @@ from pywebio.session import set_env
 
 
 def main():
-    set_env(title="PyWebIO输入演示")
+    set_env(title="PyWebIO输入演示", auto_scroll_bottom=True)
 
     put_markdown("""# PyWebIO 输入演示
     
-    在[这里](https://github.com/wang0618/PyWebIO/blob/master/demos/input_usage.py)可以获取本Demo的源码。
+    在[这里](https://github.com/wang0618/PyWebIO/blob/dev/demos/input_usage.py)可以获取本Demo的源码。
     
     本Demo仅提供了PyWebIO输入模块的部分功能的演示，完整特性请参阅[用户指南](https://pywebio.readthedocs.io/)。
     

demos/output_usage.py

@@ -36,7 +36,7 @@ async def main():
 
     put_markdown("""# PyWebIO 输出演示
     
-    在[这里](https://github.com/wang0618/PyWebIO/blob/master/demos/output_usage.py)可以获取本Demo的源码。
+    在[这里](https://github.com/wang0618/PyWebIO/blob/dev/demos/output_usage.py)可以获取本Demo的源码。
     
     本Demo仅提供了PyWebIO输出模块的部分功能的演示，完整特性请参阅[用户指南](https://pywebio.readthedocs.io/)。