Delete locales

locales/zh/.ipynb_checkpoints/app-checkpoint.py

@@ -1,43 +0,0 @@
-'''
-title: SimpleStart 简介
-'''
-
-import simplestart as ss
-
-ss.md("# SimpleStart 介绍", color="#3451b2")
-
-
-ss.space()
-ss.md('''
-### 无需前端编程的 Python 网页开发工具
-SimpleStart 是一款无需前端网页编程的工具，所有开发工作都通过 Python 在后台完成。即使不精通 HTML、CSS、JavaScript、Ajax 等知识，也能轻松开发网页应用。
-
-''')
-
-ss.space()
-
-ss.md('''
-### 提供丰富的组件
-SimpleStart 提供包括文本、按钮、列表、表格、音频、视频等在内的多种网页开发所需组件，支持容器和布局，同时允许用户自定义组件。
-
-''')
-
-ss.space()
-
-ss.md('''
-### 提供数据可视化支持
-SimpleStart 通过图像、表格、Plot 图表和 SQLite 数据库等方式实现数据可视化。它支持静态和交互式图表的显示，并提供数据的显示和编辑功能。
-''')
-
-ss.space()
-ss.md("---")
-ss.write("关于安装使用等，请访问")
-ss.md('''
-[在线帮助](http://www.simplestart.cc)
-''')
-
-def locale():
-    ss.send_message("change_locale", {"locale":""});
-    
-
-ss.button("English", onclick = locale)

locales/zh/.ipynb_checkpoints/config-checkpoint.yaml

@@ -1,16 +0,0 @@
-title: "SimpleStart 演示"
-
-show_sidebar: true
-wide_screen_mode : true
-
-show_header: False
-app_bar_height: 59 ##default is 64
-
-show_footer: false
-
-
-locales:
-  - code: ""
-    name: "English"
-  - code: "zh"
-    name: "Chinese 中文"

locales/zh/app.py

@@ -1,43 +0,0 @@
-'''
-title: SimpleStart 简介
-'''
-
-import simplestart as ss
-
-ss.md("# SimpleStart 介绍", color="#3451b2")
-
-
-ss.space()
-ss.md('''
-### 无需前端编程的 Python 网页开发工具
-SimpleStart 是一款无需前端网页编程的工具，所有开发工作都通过 Python 在后台完成。即使不精通 HTML、CSS、JavaScript、Ajax 等知识，也能轻松开发网页应用。
-
-''')
-
-ss.space()
-
-ss.md('''
-### 提供丰富的组件
-SimpleStart 提供包括文本、按钮、列表、表格、音频、视频等在内的多种网页开发所需组件，支持容器和布局，同时允许用户自定义组件。
-
-''')
-
-ss.space()
-
-ss.md('''
-### 提供数据可视化支持
-SimpleStart 通过图像、表格、Plot 图表和 SQLite 数据库等方式实现数据可视化。它支持静态和交互式图表的显示，并提供数据的显示和编辑功能。
-''')
-
-ss.space()
-ss.md("---")
-ss.write("关于安装使用等，请访问")
-ss.md('''
-[在线帮助](http://www.simplestart.cc)
-''')
-
-def locale():
-    ss.send_message("change_locale", {"locale":""});
-    
-
-ss.button("English", onclick = locale)

locales/zh/config.yaml

@@ -1,16 +0,0 @@
-title: "SimpleStart 演示"
-
-show_sidebar: true
-wide_screen_mode : true
-
-show_header: False
-app_bar_height: 59 ##default is 64
-
-show_footer: false
-
-
-locales:
-  - code: ""
-    name: "English"
-  - code: "zh"
-    name: "Chinese 中文"

locales/zh/pages/002 Form Component/demo_button.py

@@ -1,141 +0,0 @@
-### Button 按钮
-import simplestart as ss
-
-ss.md('''
-## ss.button 按钮
-''')
-ss.md('''
-[在线帮助](https://www.simplestart.cc/zh/doc_form/ss-button.html)
-''')
-ss.space()
-ss.md('''
-#### 🔅 示例
-''')
-
-#自定义函数
-def myclick():
-    mytext.text = "You clicked "
-    
-def reset():
-    mytext.text = "This is button"
-    but1.type = ""
-    ss.getcm().components[but1.id]["content"]["options"]["icon"] = ""
-    ss.getcm().components[but1.id]["content"]["options"]["endicon"] = ""
-    ss.getcm().components[but1.id]["content"]["options"]["icon_color"] = "mediumseagreen"
-    ss.getcm().components[but1.id]["content"]["options"]["style"] = "background-color:initial;color:initial"
-    ss.session["iconstr"] = ''
-    ss.session["style_str"] = ''
-    ss.session["style"] = ''
-
-    
-#基本用法
-cols = ss.columns([40,"flex:60"], design=True)
-with cols[0]:
-    mytext = ss.text("This is button")
-    but1 = ss.button("Click it", icon = "mdi-account-circle", onclick=myclick)
-
-def onradiochange(event):
-    value = event.value
-    if value == "default":
-        but1.type = ""
-        ss.session["buttonstyle"] = ""
-    elif value == "outlined":
-        but1.type = "outlined"
-        ss.session["buttonstyle"] = 'type = "outlined\",'
-    elif value == "flat":
-        but1.type = "tonal"
-        ss.session["buttonstyle"] = 'type = "flat\",'
-    elif value == "text":
-        but1.type = "text"
-        ss.session["buttonstyle"] = 'type = "text\",'
-    elif value == "plain":
-        but1.type = "plain"
-        ss.session["buttonstyle"] = 'type = "plain\",'
-
-def oncheckbox_change(state, value):
-    if value == True:
-        ss.getcm().components[but1.id]["content"]["options"]["icon"] = "aim"
-        ss.session["iconstr"] = ' icon="search",'
-    else:
-        ss.getcm().components[but1.id]["content"]["options"]["icon"] = ""
-        ss.session["iconstr"] = ''
-    but1.update()
-
-def onradiochange2(event):
-    index = event.index
-
-    if index == 0:
-        ss.getcm().components[but1.id]["content"]["options"]["icon"] = "mdi-account-circle"
-        ss.getcm().components[but1.id]["content"]["options"]["endIcon"] = ""
-        ss.session["iconstr"] = ' icon="mdi-account-circle",'
-    elif index == 1:
-        ss.getcm().components[but1.id]["content"]["options"]["icon"] = ""
-        ss.getcm().components[but1.id]["content"]["options"]["endIcon"] = "mdi-alert"
-        ss.session["iconstr"] = ' endIcon="mdi-alert",'
-    else:
-        ss.getcm().components[but1.id]["content"]["options"]["icon"] = ""
-        ss.getcm().components[but1.id]["content"]["options"]["endIcon"] = ""
-        ss.session["iconstr"] = ''
-    but1.update()
-
-    
-def changeColor(bkcolor):
-    ss.getcm().components[but1.id]["content"]["options"]["style"] = f"background-color:{bkcolor}; color:white"
-    ss.getcm().components[but1.id]["content"]["options"]["icon_color"] = "white"
-    ss.session["style_str"] = f'style="background-color:{bkcolor}, color:white"'
-    ss.session["style"] = 'style=style,'
-    but1.update()
-
-
-with cols[1]:
-    ss.text("测试")
-
-    ss.write("---")
-    ss.radio(["default", "outlined", "flat", "text", "plain"], "default", inline = True, onchange=onradiochange)
-
-    ss.write("---")
-    ss.radio([(1, "图标(前)"), (2, "图标(后)"), (3, "图标按钮")], inline = True, onchange=onradiochange2)
-    
-    
-    ss.write("---")
-    ss.button("", type = "flat", size = "small", style="background-color:#409eff", onclick=lambda:changeColor('#409eff'))
-    ss.button("", type = "flat", size = "small", style="background-color:#67c23a", onclick=lambda:changeColor('#67c23a'))
-    ss.button("", type = "flat", size = "small", style="background-color:#e6a23c", onclick=lambda:changeColor('#e6a23c'))
-    ss.button("", type = "flat", size = "small", style="background-color:#f56c6c", onclick=lambda:changeColor('#f56c6c'))
-    ss.button("", type = "flat", size = "small", style="background-color:#909399", onclick=lambda:changeColor('#909399'))
-    
-    
-    ss.space()
-    ss.button("重置", onclick=reset)
-
-
-ss.space("mt-8")
-
-ss.write("#### 🔎 代码")
-
-ss.md('''
-```python
-import simplestart as ss
-
-def clickme():
-    mytext.text = "You clicked"
-    
-mytext = ss.text("This is button")
-@style_str
-ss.button("Click it", @buttonstyle @iconstr @style onclick=clickme)
-```
-''')
-
-ss.md('''
-::: tip
-  函数调用
-  ss.button(label, type, color, size, icon, onclick)   
-:::
-''')
-
-def onPageLoad():
-    ss.session["buttonstyle"] = ""
-    ss.session["iconstr"] = ""
-    ss.session["style"] = ""
-    ss.session["style_str"] = ""
-    

locales/zh/pages/002 Form Component/demo_checkbox.py

@@ -1,76 +0,0 @@
-### Checkbox 多选框
-import simplestart as ss
-
-ss.write("### ss.checkbox")
-
-def onchange(event):
-    ss.session["checked_value"] = event.value
-
-
-ss.md('''
----
-#### 🔅 示例1
-''')
-
-ss.md("onchange: @checked_value")
-
-ss.checkbox("checkme", onchange = onchange)
-ss.checkbox("initially checked", checked = True, onchange = onchange)
-
-
-ss.write('''
----
-#### 🔎 代码
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-def onchange(state, value):
-    state["checked_value"] = value
-
-#ui
-ss.md("onchange: @checked_value")
-
-ss.checkbox("checkme", onchange = onchange)
-ss.checkbox("initially checked", checked = True, onchange = onchange)
-
-
-''')
-
-ss.space()
-ss.md('''
----
-#### 🔅 示例2
-获取 checkbox 的状态
-''')
-
-mycheck = ss.checkbox("check me", onchange = onchange)
-
-def myclick():
-    ss.message(mycheck.value)
-
-ss.button("获取状态", onclick = myclick)
-
-ss.space()
-ss.write('''
----
-#### 🔎 代码
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-mycheck = ss.checkbox("check me", onchange = onchange)
-
-def myclick():
-    ss.message(mycheck.value)
-
-ss.button("获取状态", onclick = myclick)
-
-''')
-
-def onPageLoad():
-    ss.session["checked_value"] = ""

locales/zh/pages/002 Form Component/demo_dialog.py

@@ -1,78 +0,0 @@
-### Dialog 对话框
-import simplestart as ss
-
-ss.md("## ss.dialog 对话框")
-
-ss.space()
-
-ss.md('''
----
-#### 🔅 示例
-''')
-
-def testme():
-    ss.message("testme")
-    
-def showit():
-    if ss.session["str_fullscreen"] != "":
-        dialog.show(fullscreen = True)
-    else:
-        dialog.show()
-    
-def myclose(event):
-    ss.message("dialog close with result " + event.value)
-    
-dialog = ss.dialog("对话框标题",  onclose=myclose)
-with dialog:
-    ss.text("SimpleStart dialog demostration")
-    ss.md("---")
-    ss.button("testme", onclick=testme)
-    ss.md(":smile:")
-        
-cols = ss.columns([60,"flex:40; border-left:1px solid lightgray"], border=True, style="border:1px solid lightgray")
-with cols[0]:
-    mytext = ss.text("This is dialog")
-    ss.button("show dialog", onclick=showit)
-    
-def mycheck(event):
-    if event.value == True:
-        ss.session["str_fullscreen"] = "fullscreen = True"
-        #dialog.show(fullscreen = True)
-    else:
-        ss.session["str_fullscreen"] = ""
-
-with cols[1]:
-    ss.text("对话框选项")
-    ss.checkbox("全屏", onchange=mycheck)
-
-ss.space()
-ss.write('''
----
-#### 🔎 代码
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-def myclose(event):
-    ss.message("dialog close with result " + event.value)
-    
-dialog = ss.dialog(title="对话框标题", onclose=myclose)
-with dialog:
-    ss.text("Opening from the bottom")
-    ss.md("---")
-    ss.button("testme", onclick=testme)
-    ss.md(":smile:")
-    
-def showit():
-    dialog.show(@str_fullscreen)
-    
-ss.button("show dialog", onclick=showit)
-```
-''')
-
-def onPageEnter():
-    ss.session["str_fullscreen"] = ""
-    
-    

locales/zh/pages/002 Form Component/demo_expander.py

@@ -1,30 +0,0 @@
-### Expander 下拉展开控件
-import streamsync as ss
-
-ss.md("## ss.expander 下拉展开")
-
-
-ss.md('''
-#### 🔅 示例
-''')
-
-with ss.expander("关于SimpleStart", expanded = True):
-    ss.text("Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! \
-    Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!", style="padding:10px")
-
-
-ss.space()
-ss.write('''
----
-#### 🔎 代码
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-with ss.expander("关于SimpleStart"):
-    ss.text("Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! \
-    Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!")
-```
-''')

locales/zh/pages/002 Form Component/demo_menu.py

@@ -1,100 +0,0 @@
-### Menu 菜单
-import streamsync as ss
-
-ss.md("## ss.menu")
-
-ss.md('''
-#### 🔅 示例
-''')
-
-data = [
-    {'index': '1', 'title': 'Processing Center', 'icon':'mdi-home'},
-    {'type': 'spacer'}, #add spacer
-    {
-        'index': '2',
-        'title': 'Workspace',
-        'icon' : 'mdi-plus',
-        'subItems': [
-            {'index': '2-1', 'title': 'item one'},
-            {'index': '2-2', 'title': 'item two'},
-            {'index': '2-3', 'title': 'item three'},
-            {
-                'index': '2-4',
-                'title': 'item four',
-                'subItems': [
-                    {'index': '2-4-1', 'title': 'item one'},
-                    {'index': '2-4-2', 'title': 'item two'},
-                    {'index': '2-4-3', 'title': 'item three'},
-                ],
-            },
-        ],
-    },
-    {'index': '3', 'title': 'Info', 'disabled': True, 'icon':'mdi-cancel'},
-    {'index': '4', 'title': 'Orders', 'icon':'mdi-wrench'},
-]
-
-def menu_select(event):
-    print("menu1")
-    ss.message(event.data["keyPath"])
-
-    
-ss.md("### 顶栏菜单")
-ss.menu(data, direction = "horizontal", onselect = menu_select)
-
-ss.space()
-ss.md("### 侧栏菜单")
-
-ss.menu(data, direction = "vertical", dark = True, onselect = menu_select)
-
-
-ss.space()
-ss.write('''
----
-#### 🔎 代码
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-data = [
-    {'index': '1', 'title': 'Processing Center', 'icon':'mdi-home'},
-    {'type': 'spacer'}, #add spacer
-    {
-        'index': '2',
-        'title': 'Workspace',
-        'icon' : 'mdi-plus',
-        'subItems': [
-            {'index': '2-1', 'title': 'item one'},
-            {'index': '2-2', 'title': 'item two'},
-            {'index': '2-3', 'title': 'item three'},
-            {
-                'index': '2-4',
-                'title': 'item four',
-                'subItems': [
-                    {'index': '2-4-1', 'title': 'item one'},
-                    {'index': '2-4-2', 'title': 'item two'},
-                    {'index': '2-4-3', 'title': 'item three'},
-                ],
-            },
-        ],
-    },
-    {'index': '3', 'title': 'Info', 'disabled': True, 'icon':'mdi-cancel'},
-    {'index': '4', 'title': 'Orders', 'icon':'mdi-wrench'},
-]
-
-def menu_select(event):
-    print("menu1")
-    ss.message(event.data["keyPath"])
-
-    
-ss.md("### Horiontal Menu")
-ss.menu(data, direction = "horizontal", onselect = menu_select)
-
-ss.space()
-ss.md("### Vertical Menu")
-
-ss.menu(data, direction = "vertical", dark = True, onselect = menu_select)
-
-```
-''')

locales/zh/pages/002 Form Component/demo_radio.py

@@ -1,93 +0,0 @@
-### Radio 单选框
-import simplestart as ss
-
-ss.md("## ss.radio 单选框")
-
-ss.space()
-
-ss.md('''
-#### 🔅 示例
-''')
-
-def onchange(event):
-    ss.session["options_value"] = event.value
-    ss.session["options_index"] = event.index
-    
-ss.md("onchange: value:@options_value, index:@options_index")
-
-options = ["Option 1", "Option 2", "Option 3"]
-myradio = ss.radio(options, label = "### my radio1", index = 0, onchange = onchange)
-
-
-options = [("C++", '#### <span style="color:blue">C++</span>'), 
-           ("Javascript", '#### <span style="color:green">Javascript</span>'), 
-           ("Python", '#### <span style="color:red">Python</span>')
-          ]
-ss.radio(options, inline = True, label = "### my radio2", index = 0, iconColor = "blue", onchange = onchange)
-
-
-
-ss.write("---")
-ss.write("#### 🔎 代码")
-
-ss.md('''
-```python
-import simplestart as ss
-
-def onchange(event):
-    ss.session["options_value"] = event.value
-    ss.session["options_index"] = event.index
-    
-ss.md("onchange: value:\@options_value, index:\@options_index")
-
-options = ["Option 1", "Option 2", "Option 3"]
-myradio = ss.radio(options, label = "### my radio1", index = 0, onchange = onchange)
-
-
-options = [("C++", '#### <span style="color:blue">C++</span>'), 
-           ("Javascript", '#### <span style="color:green">Javascript</span>'), 
-           ("Python", '#### <span style="color:red">Python</span>')
-          ]
-ss.radio(options, inline = True, label = "### my radio2", index = 0, iconColor = "blue", onchange = onchange)
-
-def onPageLoad():
-    ss.session["options_value"] = ""
-
-''')
-
-
-ss.space()
-ss.md('''
----
-#### 🔅 示例 - 获取状态值
-''')
-
-def myclick1():
-    ss.message(myradio.value)
-
-ss.button("获取状态值", onclick = myclick1)
-
-def myclick2():
-    ss.message(myradio.index)
-
-ss.button("获取状态值索引", onclick = myclick2)
-
-ss.write("---")
-ss.write("#### 🔎 代码段")
-
-ss.md('''
-```python
-#...
-def myclick1():
-    ss.message(myradio.value)
-
-ss.button("获取状态值", onclick = myclick1)
-
-def myclick2():
-    ss.message(myradio.index)
-
-ss.button("获取状态值索引", onclick = myclick2)
-''')
-
-def onPageLoad():
-    ss.session["options_value"] = ""

locales/zh/pages/002 Form Component/demo_selectbox.py

@@ -1,77 +0,0 @@
-### Selectbox 选择器
-import simplestart as ss
-
-ss.md("## ss.selectbox 选择器")
-
-ss.space()
-ss.md('''
-#### 🔅 示例1
-在页面上创建一个带标题的，有3个选项的selectbox.
-''')
-ss.space()
-
-options = ["option1","option2", "option3"]
-
-def selchange(event):
-    ss.message(f"You select {event.value}, index of {event.index}")
-
-select1 = ss.selectbox(options, index=0, title = "### Please select", onchange = selchange)
-
-
-
-ss.write("#### 🔎 代码")
-
-ss.md("""
-```python
-import simplestart as ss
-
-options = ["option1","option2", "option3"]
-
-def selchange(event):
-    ss.session["select_value"] = event.value
-    ss.session["select_index"] = select1.index
-
-ss.write("info value:  index:")
-select1 = ss.selectbox(options, value="option1", onchange = selchange)
-
-
-```
-""")
-
-ss.md('''
-#### 🔅 示例2
-获取selectbox当前的选项. 除了在selectbox的onchange事件里，通过event的index和value获取用户的选项信息外，还可以通过selectbox的变量获取用户的选择信息。
-''')
-ss.space()
-
-def onclick1():
-    ss.message(select1.value)
-    
-ss.button("当前选项值", onclick = onclick1)
-
-def onclick2():
-    ss.message(select1.index)
-    
-ss.button("当前选项索引", onclick = onclick2)
-
-ss.space()
-
-ss.write("#### 🔎 代码段")
-
-ss.md("""
-```python
-
-#...
-
-def onclick1():
-    ss.message(select1.value)
-    
-ss.button("当前选项值", onclick = onclick1)
-
-def onclick2():
-    ss.message(select1.index)
-    
-ss.button("当前选项索引", onclick = onclick2)
-
-```
-""")

locales/zh/pages/002 Form Component/demo_slider.py

@@ -1,35 +0,0 @@
-### Slider 滑块
-import simplestart as ss
-
-ss.md("## ss.slider 滑块")
-
-ss.space()
-
-ss.md('''
-#### 🔅 示例 
-''')
-
-ss.md("### Please drag the slider to change the value")
-
-info = ss.text("number")
-
-def onchange(event):
-    info.text = event.value
-
-ss.slider("<b>my slider</b>", value = 500, min = 0, max = 1000, onchange = onchange, style="width:50%")
-
-ss.space()
-
-ss.write("#### 🔎 代码")
-
-ss.md('''
-```python
-import simplestart as ss
-
-info = ss.text("number")
-
-def onchange(state, value):
-    info.text = value
-
-ss.slider(500, 0, 1000, onchange = onchange)
-''')

locales/zh/pages/002 Form Component/demo_textarea.py

@@ -1,46 +0,0 @@
-### Textarea 文本域
-import streamsync as ss
-
-ss.md("## ss.textarea 文本域")
-
-
-ss.space()
-ss.md("#### 🔅 示例")
-
-ss.md("---")
-
-#基本用法
-#test = ss.text_input("hello, world", type="textarea")
-mytext = ss.textarea("hello, world")
-
-ss.write("---")
-ss.write("#### 🔎 代码")
-
-ss.md('''
-```python
-import simplestart as ss
-
-mytext = ss.textarea("hello, world")
-
-''')
-
-ss.space()
-ss.md("#### 🔅 获取文本域的文本值")
-ss.md("---")
-
-def myclick():
-    ss.message(mytext.value)
-    
-ss.button("获取文本", onclick = myclick)
-
-ss.write("---")
-ss.write("#### 🔎 代码段")
-
-ss.md('''
-```python
-#...
-def myclick():
-    ss.message(mytext.value)
-    
-ss.button("获取文本", onclick = myclick)
-''')

locales/zh/pages/002 Form Component/demo_textinput.py

@@ -1,64 +0,0 @@
-### Text_input 文本
-import streamsync as ss
-
-
-ss.md("## ss.text_input 文本")
-
-ss.space()
-ss.md("#### 🔅 示例")
-
-ss.md("---")
-ss.space()
-
-def onchange(state, value):
-    ss.message(f"onchange, {value}")
-
-def onclear(state, value):
-    ss.message("onclear event happend")
-
-def onblur(state, value):
-    print("onblur")
-    ss.message(f"onblur, {value}")
-    
-def testme():
-    ss.message(myinput.value)
-    
-#ui
-cols = ss.columns([50,50], border = True)
-with cols[0]:
-    myinput = ss.text_input("Hello SimpleStart", clearable=True)
-
-
-def myevent(event):
-    if event.tag == "sel1":
-        myinput.variant = event.value
-    elif event.tag == "sel2":
-        myinput.type = event.value
-    elif event.tag == "but1":
-        ss.message(myinput.value)
-    
-
-with cols[1]:
-    ss.selectbox(["filled","outlined","underlined", "solo", "solo-filled", "solo-inverted"], label='#### <span style = "color:green">Change the input style</span>', \
-                value="solo", onchange = myevent, eventTag="sel1")
-    
-    ss.selectbox(["text","time", "date", "week", "month", "password",  "color"], label='#### <span style = "color:green">Change the input type</span>', \
-                onchange = myevent, eventTag="sel2")
- 
-    ss.write('#### <span style = "color:green">获取input值</span>')
-    ss.button("获取文本值", onclick=myevent, eventTag="but1")
-
-
-ss.write("---")
-ss.write("#### 🔎 代码")
-
-ss.md('''
-```python
-import simplestart as ss
-
-myinput = ss.text_input("Hello SimpleStart", clearable=True)
-
-#或者
-#ss.text_input("hello", type="text", variant = "filled")
-
-''')

locales/zh/pages/002 Form Component/demo_upload.py

@@ -1,42 +0,0 @@
-### Upload 文件上传
-import streamsync as ss
-import pandas as pd
-
-ss.write("备注：python-multipart需要安装包加入")
-
-ss.md("## ss.upload 文件上传")
-
-
-ss.space()
-ss.md("#### 🔅 示例 - 上传图片")
-ss.space()
-
-
-def onsucess(event):
-    filename = event.value
-    path = f'{ss.baseinfo["package_path"]}/uploads/{filename}'
-    myimage.image = path
-    
-ss.upload("Upload Image ...", accept="image/png, image/jpeg, image/bmp", icon="mdi-camera", onsucess = onsucess)
-
-myimage = ss.image()
-
-ss.space()
-ss.write("---")
-ss.write("#### 🔎 代码")
-
-ss.md('''
-```python
-import simplestart as ss
-
-def onsucess(event):
-    filename = event.value
-    path = f'{ss.baseinfo["package_path"]}/uploads/{filename}'
-
-    myimage.image = path
-    
-ss.upload(label = "Upload Image ...", accept="image/png, image/jpeg, image/bmp", icon="mdi-camera", onsucess = onsucess)
-
-myimage = ss.image()
-
-''')

locales/zh/pages/002 Form Component/folder.json

@@ -1 +0,0 @@
-{"alias":"表单组件"}

locales/zh/pages/003 Content Display/demo_audio.py

@@ -1,39 +0,0 @@
-### Audio 音频播放
-import streamsync as ss
-
-ss.md("## ss.audio 音频播放")
-
-
-ss.space()
-ss.md('''
-#### 🔅 示例
-''')
-
-ss.space()
-
-audiosrc = "media/test.wav"
-player = ss.audio(audiosrc)
-
-
-ss.space("mt-8")
-
-ss.write('''
----
-#### 🔎 代码
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-audiosrc = "media/davide_quatela--breathing_barcelona.mp3"
-player = ss.audio(audiosrc)
-```
-''')
-
-
-ss.md('''
-::: tip
-ss.audio 支持音频格式包括 wav, mp3 等
-:::
-''')

locales/zh/pages/003 Content Display/demo_html.py

@@ -1,49 +0,0 @@
-### Html 超文本
-import streamsync as ss
-
-
-ss.md("## ss.html 超文本")
-
-ss.space("")
-
-ss.md('''
-#### 🔅 示例
-''')
-
-
-ss.md("### html")
-
-ss.html(f"""
-    <p>This is a piece of rich text content, which contains <strong>bold</strong> and <em>italic</em> text.</p>
-    <style>
-    .testclass{{
-        color:red;
-        font-weight:bold;
-    }}
-    </style>
-    <div class="testclass">this is red</div>
-""")
-
-ss.space("mt-8")
-
-ss.write('''
----
-#### 🔎 代码
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-ss.html(f"""
-    <p>This is a piece of rich text content, which contains <strong>bold</strong> and <em>italic</em> text.</p>
-    <style>
-    .testclass{{
-        color:red;
-        font-weight:bold;
-    }}
-    </style>
-    <div class="testclass">this is red</div>
-""")
-```
-''')

locales/zh/pages/003 Content Display/demo_image.py

@@ -1,92 +0,0 @@
-### Image 图像
-import simplestart as ss
-
-import cv2
-from PIL import Image
-import os
-
-ss.md("## ss.image 图像")
-
-ss.md('''
-#### 🔅 示例
-''')
-
-ss.space()
-
-style = "width:200px;height:200px;margin:10px"
-img = "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
-
-cols = ss.columns([60,"flex:40"], border=True)
-with cols[0]:
-    mytext = ss.text("This is image")
-    ss.space()
-    myimg = ss.image(img, style=style, fit="contain")
-    ss.text("Image fit mode: fill")
-    
-def onradiochange(event):
-    #ss.message(event.value)
-    ss.session["fit_str"] = event.value
-    ss.getcm().components[myimg.id]["content"]["options"]["fit"] = event.value
-    myimg.update()
-
-def onradiochange2(event):
-    value = event.value
-    index = event.index
-
-
-    source = ["Http", "PIL", "OpenCV", "Local"]
-    ss.session["source_str"] = source[index]
-
-    
-    if index == 0:
-        img = "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
-        ss.session["image_path"] = "\"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\""
-        myimg.image = img
-    if index == 1:
-        image = Image.open('./media/image/dalao.jpeg')
-        ss.session["image_path"] = "Image.open('./media/image/dalao.jpeg')"
-        myimg.image = image
-    if index == 2:
-        img = cv2.imread('./media/image/cat.jpeg',cv2.IMREAD_COLOR)
-        ss.session["image_path"] = "cv2.imread('./media/image/cat.jpeg',cv2.IMREAD_COLOR)"
-        myimg.image = img  
-    if index == 3:
-        file_path = './media/image/dog.jpeg'
-        ss.session["image_path"] = "'./media/image/dog.jpeg'"
-        myimg.image = file_path
-        
-    myimg.update()
-
-    
-with cols[1]:
-    ss.text("image fit mode")
-    ss.radio(["fill", "contain", "cover", "none", "scale-down"], index = 1, inline = True, onchange=onradiochange)
-    ss.space()
-    ss.text("image source")
-    ss.radio(["Http image","PIL image", "OpenCV image", "Local image"], index = 0, inline = True, onchange=onradiochange2)
-    
-ss.space()
-
-ss.write('''
-#### 🔎 代码
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-import cv2
-from PIL import Image
-
-style = "width:100px; height:100px; margin:10px"
-img = "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
-ss.image(img, style=style, fit="fill")
-```
-''')
-
-
-
-def onPageLoad():
-    ss.session["info"] = "x"
-    ss.session["fit_str"] = "fill"
-    ss.session["source_str"] = "Http"
-    ss.session["image_path"] = "\"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\""

locales/zh/pages/003 Content Display/demo_markdown.py

@@ -1,57 +0,0 @@
-### Markdown 文本
-import simplestart as ss
-
-ss.md("## ss.markdown md文本")
-
-ss.space()
-
-ss.md('''
-#### 🔅 示例 
-''')
-
-ss.space()
-
-ss.markdown("- 19^th^")
-ss.markdown("# 一级标题")
-ss.markdown("## 二级标题")
-ss.markdown("### 三级标题")
-
-#水平分割线
-ss.markdown("---")
-
-ss.markdown('''
-- list item1
-- list item2
-- list item3
-''')
-
-ss.markdown(":smile:")
-
-
-
-ss.space("mt-8")
-
-ss.write('''
----
-#### 🔎 代码
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-ss.markdown("# 一级标题")
-ss.markdown("## 二级标题")
-ss.markdown("### 三级标题")
-
-#水平分割线
-ss.markdown("---")
-
-ss.markdown(\'''
-- list item1
-- list item2
-- list item3
-\''')
-
-```
-''')

locales/zh/pages/003 Content Display/demo_message.py

@@ -1,37 +0,0 @@
-### Message 消息提示
-import simplestart as ss
-
-ss.md("## ss.message 弹出消息")
-
-ss.space()
-
-
-ss.md('''
-#### 🔅 示例 
-''')
-ss.space()
-
-
-def showmsg():
-    ss.message("Hello, world")
-
-showmsg()
-ss.button("message", onclick=showmsg)
-
-
-ss.space("mt-8")
-
-ss.write('''
----
-#### 🔎 代码
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-def showmsg():
-    ss.message("Hello, the world")
-
-```
-''')

locales/zh/pages/003 Content Display/demo_sqlite.py

@@ -1,39 +0,0 @@
-### Sqlite 数据库
-import simplestart as ss
-
-ss.md("## ss.sqlite 数据库")
-
-ss.space()
-ss.md('''
-提供 sqlite 数据库的简单操作
-''')
-
-ss.space()
-ss.md('''
-#### 🔅 示例
-''')
-
-ss.md('''
-::: tip
-  这个例子从sqlite数据库里读取鸢尾花数据集，并以csv表格的方式展示。
-  关于sqlite的管理，simplestart提供了一简单的内置工具，可以进行简单的增、删、改操作。
-:::
-''')
-
-sql = ss.sqlite("./data/ss_data.db")
-df = sql.pd_query("select * from iris")
-
-mytable = ss.table(df, editable = True)###, handlers={"current-change":current_change, "selection-change":selection_change})
-
-ss.space()
-ss.write("#### 代码")
-
-ss.md('''
-```python
-import simplestart as ss
-
-sql = ss.sqlite("./data/ss_data.db")
-data = sql.pd_query("select * from HousingData")
-ss.write(data)
-```
-''')

locales/zh/pages/003 Content Display/demo_table.py

@@ -1,252 +0,0 @@
-### Table 表格
-import simplestart as ss
-import pandas as pd
-
-ss.md("## ss.table 表格数据")
-
-ss.md("以表格方式显示数据")
-
-ss.space()
-
-ss.md('''
-#### 🔅 示例
-''') 
-
-'''
-这里mytable.update会引起前端重新获取getcontent, 包括数据。真实情况不是这样，用户只能在初始时改变参数，所以不会造成频繁获取数据
-'''
-def onchange_index(event):
-    value = event.value
-
-    if value == True:
-        ss.getcm().components[mytable.id]["content"]["index"] = True
-        ss.session["showIndex"] = ', index = True'
-    else:
-        ss.getcm().components[mytable.id]["content"]["index"] = False
-        ss.session["showIndex"] = ''
-    mytable.update()
-    
-def onchange_border(event):
-    value = event.value
-
-    if value == True:
-        ss.getcm().components[mytable.id]["content"]["border"] = True
-        ss.session["showBorder"] = ', border = True'
-    else:
-        ss.getcm().components[mytable.id]["content"]["border"] = False
-        ss.session["showBorder"] = ''
-    mytable.update()
-
-
-def onchange_sortable(event):
-    value = event.value
-
-    if value == True:
-        ss.getcm().components[mytable.id]["content"]["sortable"] = True
-        ss.session["sortable"] = ', sortable = True'
-    else:
-        ss.getcm().components[mytable.id]["content"]["sortable"] = False
-        ss.session["sortable"] = ''
-    mytable.update()
-    
-def onchange_searchable(event):
-    value = event.value
-
-    if value == True:
-        ss.getcm().components[mytable.id]["content"]["searchable"] = True
-        ss.session["searchable"] = ', searchable = True'
-    else:
-        ss.getcm().components[mytable.id]["content"]["searchable"] = False
-        ss.session["searchable"] = ''
-    mytable.update()
-
-
-def onchange_selectable(event):
-    value = event.value
-
-    if value == True:
-        ss.getcm().components[mytable.id]["content"]["selectable"] = True
-        ss.session["selectable"] = ', selectable = True'
-    else:
-        ss.getcm().components[mytable.id]["content"]["selectable"] = False
-        ss.session["selectable"] = ''  
-    mytable.update()
-    
-def onchange_editable(event):
-    value = event.value
-
-    if value == True:
-        ss.getcm().components[mytable.id]["content"]["editable"] = True
-        ss.session["editable"] = ', editable = True'
-    else:
-        ss.getcm().components[mytable.id]["content"]["editable"] = False
-        ss.session["editable"] = ''  
-    mytable.update()
-
-     
-def current_change(state, value):
-    ss.session["row_selected"] = value["index"]
-    
-def selection_change(state, value):
-    ss.session["selection_change"] = value["selected"]
-        
-        
-# 创建一个包含三列的数据集
-data = {'name': ['👧🏻 Alice', '👦🏻 Bob', '👦🏻 Charlie'],
-        'age': [25, 30, 35],
-        'city': ['New York', 'San Francisco', 'Los Angeles'],
-        'health':[90,80,90]
-       }
-
-df = pd.DataFrame(data)
-
-def rowclicked(event):
-    #ss.message("row clicked")
-    #ss.write("event", event)
-    ss.session["itemname"] = event.value["name"]
-    
-
-cols = ss.columns([70,"flex:30; border-left:1px solid lightgray"], design=True, style="border:1px solid lightgray")
-with cols[0]:
-    mytable = ss.table(df, handlers={"click:row": rowclicked})
-    ss.md("#### Events")
-    ss.write("Row clicked: @itemname")
-
-
-with cols[1]:
-    ss.text("setting")    
-    ss.checkbox("索引", onchange = onchange_index) 
-    ss.space()
-    ss.checkbox("边框", onchange = onchange_border) 
-    ss.space()
-    ss.checkbox("排序", onchange = onchange_sortable)
-    ss.space()
-    ss.checkbox("选择", onchange = onchange_selectable)
-    ss.space()
-    ss.checkbox("搜索", onchange = onchange_searchable)
-    ss.space()
-    ss.checkbox("编辑", onchange = onchange_editable)
-    
-ss.space("mt-8")
-
-ss.write('''
----
-#### 🔎 代码
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-def current_change(state, value):
-    ss.session["row_selected"] = value["index"]
-    
-def selection_change(state, value):
-    ss.session["selection_change"] = value["selected"]
-
-data = {'name': ['Alice', 'Bob', 'Charlie'],
-        'age': [25, 30, 35],
-        'city': ['New York', 'San Francisco', 'Los Angeles']}
-df = pd.DataFrame(data)
-
-ss.table(df, handlers={\"current-change\":current_change, \"selection-change\":selection_change})
-ss.md(\"#### Events\")
-ss.write(\"Row selected: \")
-ss.write(\"Selection changed: \")
-    
-def onPageLoad():
-    ss.session["row_selected"] = ''
-    ss.session["selection_change"] = ''
-    
-```
-''')
-
-
-ss.md('''
----
-#### 🔅 示例 - 自定义列
-''')
-
-
-data = {'name': ['👧🏻 Alice', '👦🏻 Bob', '👦🏻 Charlie'],
-        'age': [25, 30, 35],
-        'city': [':sunny: New York', ':cloud: San Francisco', ':sunny: Los Angeles'],
-        'health':[90,80,90]
-       }
-
-df = pd.DataFrame(data)
-
-cols = ss.columns([70,"flex:30; border-left:1px solid lightgray"], design=True, style="border:1px solid lightgray")
-
-
-vuecode = '''
-<template>
-<v-clip>123</v-clip>
-</template>
-'''
-
-vuecode = "../components/mycell.vue"
-
-#mytable_ex = ss.table(df, custom_columns = ["city"], custom_columns_template = vuestr)
-with cols[0]:
-    mytable_ex = ss.table(df, custom_columns = ["city"], vue_columns = ["health"], vue_code = vuecode)
-with cols[1]:
-    ss.write("每一列可以定制显示")
-    
-ss.space("mt-8")
-
-ss.write('''
----
-#### 🔎 代码
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-data = {'name': ['👧🏻 Alice', '👦🏻 Bob', '👦🏻 Charlie'],
-        'age': [25, 30, 35],
-        'city': [':sunny: New York', ':cloud: San Francisco', ':sunny: Los Angeles'],
-        'health':[90,80,90]
-        }
-df = pd.DataFrame(data)
-
-vuestr = \'''
-<template>
-    <v-row>
-    <v-rating
-      v-model="rating" density="compact" color="orange" half-increments></v-rating>
-    <v-chip variant="text">{{item.value}}</v-chip>
-        </v-row>
-</template>
-
-<script>
-
-module.exports = {
-    props:["item"],
-    
-    data () {
-        return {
-            rating: 3
-        }
-    },
-    methods: {
-        //todo
-    },
-    mounted: function () {
-        this.rating = this.item.value/20
-    },
-}
-</script>
-\'''
-
-ss.table(df, custom_columns = ["city"], vue_columns = ["health"], vue_code = vuecode)
-```
-''')
-
-def onPageLoad():
-    ss.session["show_border"] = ''
-    ss.session["selectable"] = ''
-    ss.session["sortable"] = ''
-    ss.session["row_selected"] = ''
-    ss.session["selection_change"] = ''

locales/zh/pages/003 Content Display/demo_text.py

@@ -1,35 +0,0 @@
-### Text 文本
-import streamsync as ss
-
-ss.md("## ss.text 文本")
-ss.md("支持style参数")
-
-
-ss.space()
-ss.space()
-ss.md('''
-#### 🔅 示例
-''')
-
-ss.md("---")
-
-#基本用法
-test = ss.text("hello, world")
-
-#改变颜色
-ss.text("This is a red string", style="color:red")
-
-ss.space()
-ss.write("#### 🔎 代码")
-
-ss.md('''
-```python
-import simplestart as ss
-
-#基本用法
-test = ss.text("hello, world")
-
-#改变颜色
-ss.text("This is a red string", style="color:red")
-```
-''')

locales/zh/pages/003 Content Display/demo_video.py

@@ -1,36 +0,0 @@
-### Video 视频播放
-import streamsync as ss
-
-ss.md("## ss.video 视频播放")
-
-ss.md("支持播放mp4等格式的视频")
-
-ss.md('''
-#### 🔅 示例
-''')
-
-src = "https://media.w3.org/2010/05/sintel/trailer.mp4"
-
-player = ss.video(src, style="width:50%")
-
-ss.text("来源: https://media.w3.org/2010/05/sintel/trailer.mp4", style="color:gray")
-
-ss.space("mt-8")
-
-ss.write('''
----
-#### 🔎 代码
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-src = "https://media.w3.org/2010/05/sintel/trailer.mp4"
-
-player = ss.video(src, style="width:100%; max-width:640px")
-    
-#修改视频地址
-#player.src = "..."
-```
-''')

locales/zh/pages/003 Content Display/demo_write.py

@@ -1,78 +0,0 @@
-### Write 输出数据
-
-import streamsync as ss
-import pandas as pd
-
-ss.md("## ss.write 输出")
-
-ss.md("ss.write 类似于print，可以输出文本，列表和其它类型，方便测试和输出")
-
-ss.space()
-
-ss.md('''
-#### 🔅 示例
-''')
-
-
-ss.md("#### 1. 输出文本")
-ss.write("This is a text")
-
-ss.md('''
-```python
-ss.write("This is a text")
-```
-''')
-
-ss.md("#### 2. 输出多个变量")
-a = "aaa"
-b = "bbb"
-ss.write(a, ",", b)
-
-ss.md('''
-```python
-a = "aaa"
-b = "bbb"
-ss.write(a, ",", b)
-```
-''')
-
-ss.md("#### 3. 输出列表")
-data = ["aaa", "bbb", "ccc"]
-ss.write(data)
-
-data = {"aaa":1, "bbb":2, "ccc":3}
-ss.write(data)
-
-ss.md('''
-```python
-data = ["aaa", "bbb", "ccc"]
-ss.write(data)
-
-data = {"aaa":1, "bbb":2, "ccc":3}
-ss.write(data)
-```
-''')
-
-
-ss.md("#### 4. 输出表格")
-# 创建数据
-data = {'name': ['Alice', 'Bob', 'Charlie', 'David'],
-        'age': [25, 30, 35, 40],
-        'city': ['New York', 'Paris', 'London', 'Sydney']}
-
-# 将数据转换为 DataFrame 格式
-df = pd.DataFrame(data)
-ss.write(df)
-
-ss.md('''
-```python
-# 创建数据
-data = {'name': ['Alice', 'Bob', 'Charlie', 'David'],
-        'age': [25, 30, 35, 40],
-        'city': ['New York', 'Paris', 'London', 'Sydney']}
-
-# 将数据转换为 DataFrame 格式
-df = pd.DataFrame(data)
-ss.write(df)
-```
-''')

locales/zh/pages/003 Content Display/folder.json

@@ -1 +0,0 @@
-{"alias":"数据展示"}

locales/zh/pages/004 Chart Data/demo_bokeh.py

@@ -1,128 +0,0 @@
-import simplestart as ss
-
-from bokeh.plotting import figure
-from bokeh.models import ColumnDataSource
-from bokeh.resources import CDN
-from bokeh.embed import file_html
-from sklearn.datasets import load_iris
-import pandas as pd
-
-# 加载 Iris 数据集
-iris = load_iris()
-df = pd.DataFrame(data=iris.data, columns=iris.feature_names)
-df['species'] = iris.target
-df['species'] = df['species'].map({0: 'setosa', 1: 'versicolor', 2: 'virginica'})
-
-
-# 创建图形数据源和图形对象
-source = ColumnDataSource(data=dict(
-    sepal_length=df['sepal length (cm)'],
-    sepal_width=df['sepal width (cm)'],
-    petal_length=df['petal length (cm)'],
-    petal_width=df['petal width (cm)'],
-    species=df['species']
-))
-
-# 创建 Bokeh 图表
-p = figure(title="Iris 数据集散点图", x_axis_label='花萼长度 (cm)', y_axis_label='花萼宽度 (cm)',
-           tools="pan,wheel_zoom,box_zoom,reset,hover,save", width = 800)
-
-# 根据种类设置不同颜色
-colors = {'setosa': 'blue', 'versicolor': 'green', 'virginica': 'red'}
-
-for species, color in colors.items():
-    df_species = df[df['species'] == species]
-    source_species = ColumnDataSource(data=dict(
-        sepal_length=df_species['sepal length (cm)'],
-        sepal_width=df_species['sepal width (cm)']
-    ))
-    p.scatter('sepal_length', 'sepal_width', source=source_species, legend_label=species, color=color,
-              size=10, alpha=0.5)
-
-p.legend.title = 'Species'
-p.legend.location = 'top_left'
-
-# 将 Bokeh 图形嵌入到 Streamlit
-html = file_html(p, CDN, "Iris 数据集散点图")
-
-#ui
-ss.md('''
-## simplestart 图表演示 - bokeh
-''')
-
-ss.space()
-ss.md('''
-#### 🔅 示例
-利用bokeh展示Iris数据的交互式散点图
-''')
-
-ss.space()
-ss.htmlview(html, border = False)
-
-ss.space()
-ss.write("#### 🔎 代码")
-
-def viewcode():
-    ss.session["viewcode"] = 1
-
-ss.session["viewcode"] = 0
-ss.button("查看", size="small", onclick = viewcode)
-
-def conditioner(event):
-    return (ss.session["viewcode"] == 1)
-
-code = '''
-```python
-import simplestart as ss
-
-from bokeh.plotting import figure
-from bokeh.models import ColumnDataSource
-from bokeh.resources import CDN
-from bokeh.embed import file_html
-from sklearn.datasets import load_iris
-import pandas as pd
-
-# 加载 Iris 数据集
-iris = load_iris()
-df = pd.DataFrame(data=iris.data, columns=iris.feature_names)
-df['species'] = iris.target
-df['species'] = df['species'].map({0: 'setosa', 1: 'versicolor', 2: 'virginica'})
-
-
-# 创建图形数据源和图形对象
-source = ColumnDataSource(data=dict(
-    sepal_length=df['sepal length (cm)'],
-    sepal_width=df['sepal width (cm)'],
-    petal_length=df['petal length (cm)'],
-    petal_width=df['petal width (cm)'],
-    species=df['species']
-))
-
-# 创建 Bokeh 图表
-p = figure(title="Iris 数据集散点图", x_axis_label='花萼长度 (cm)', y_axis_label='花萼宽度 (cm)',
-           tools="pan,wheel_zoom,box_zoom,reset,hover,save", width = 800)
-
-# 根据种类设置不同颜色
-colors = {'setosa': 'blue', 'versicolor': 'green', 'virginica': 'red'}
-
-for species, color in colors.items():
-    df_species = df[df['species'] == species]
-    source_species = ColumnDataSource(data=dict(
-        sepal_length=df_species['sepal length (cm)'],
-        sepal_width=df_species['sepal width (cm)']
-    ))
-    p.scatter('sepal_length', 'sepal_width', source=source_species, legend_label=species, color=color,
-              size=10, alpha=0.5)
-
-p.legend.title = 'Species'
-p.legend.location = 'top_left'
-
-# 将 Bokeh 图形嵌入到 Streamlit
-html = file_html(p, CDN, "Iris 数据集散点图")
-
-#ui
-ss.htmlview(html, border = False)
-'''
-
-with ss.when(conditioner):
-    ss.md(code)

locales/zh/pages/004 Chart Data/demo_pyplot.py

@@ -1,133 +0,0 @@
-import streamsync as ss
-
-import seaborn as sns
-import matplotlib as mpl
-#mpl.use("Agg") #很重要，否则在ss中会崩溃
-import matplotlib.pyplot as plt
-
-
-#下载不了，所以加一个参数data_home
-data_home = "./data/seaborn"
-
-ss.md('''
-## ss.pyplot 绘图
-''')
-
-
-ss.space()
-ss.md('''
-#### 🔅 示例
-''')
-
-ss.write("#### 1. 画折线图")
-
-sns.set_style("whitegrid")
-titanic = sns.load_dataset("titanic", data_home=data_home)
-sns.lineplot(x="age", y="fare", hue="sex", data=titanic)
-plt.show()
-
-fig = plt.gcf()
-ss.pyplot(fig, style="border:1px solid gray; width:600px")
-
-ss.write("#### 2. 画散点图")
-
-sns.set_style("whitegrid")
-tips = sns.load_dataset("tips", data_home=data_home)
-sns.scatterplot(x="total_bill", y="tip", data=tips)
-plt.show()
-
-fig = plt.gcf()
-ss.pyplot(fig, style="border:1px solid gray; width:600px")
-
-ss.write("#### 3. 画条形图")
-
-sns.set_style("whitegrid")
-titanic = sns.load_dataset("titanic",data_home=data_home)
-sns.barplot(x="class", y="survived", data=titanic)
-plt.show()
-
-fig = plt.gcf()
-ss.pyplot(fig, style="border:1px solid gray; width:600px")
-
-
-ss.write("#### 4. 画直方图")
-sns.set_style("whitegrid")
-titanic = sns.load_dataset("titanic",data_home=data_home)
-sns.histplot(x="age", data=titanic)
-plt.show()
-
-fig = plt.gcf()
-ss.pyplot(fig, style="border:1px solid gray; width:600px")
-
-
-ss.space()
-
-ss.write("#### 🔎 代码")
-ss.write("---")
-
-def viewcode():
-    ss.session["viewcode"] = 1
-
-ss.button("查看", size="small", onclick = viewcode)
-
-
-def conditioner(event):
-    return ss.session["viewcode"] == 1
-
-with ss.when(conditioner):
-    ss.md('''
-```python
-import streamsync as ss
-
-import seaborn as sns
-import matplotlib as mpl
-mpl.use("Agg") #很重要，否则在ss中会崩溃
-import matplotlib.pyplot as plt
-
-
-#下载不了，所以加一个参数data_home
-data_home = "./data/seaborn"
-
-
-ss.write("#### 1. 画折线图")
-
-sns.set_style("whitegrid")
-titanic = sns.load_dataset("titanic", data_home=data_home)
-sns.lineplot(x="age", y="fare", hue="sex", data=titanic)
-plt.show()
-
-fig = plt.gcf()
-ss.pyplot(fig, style="border:1px solid gray; width:600px")
-
-ss.write("#### 2. 画散点图")
-
-sns.set_style("whitegrid")
-tips = sns.load_dataset("tips", data_home=data_home)
-sns.scatterplot(x="total_bill", y="tip", data=tips)
-plt.show()
-
-fig = plt.gcf()
-ss.pyplot(fig, style="border:1px solid gray; width:600px")
-
-ss.write("#### 3. 画条形图")
-
-sns.set_style("whitegrid")
-titanic = sns.load_dataset("titanic",data_home=data_home)
-sns.barplot(x="class", y="survived", data=titanic)
-plt.show()
-
-fig = plt.gcf()
-ss.pyplot(fig, style="border:1px solid gray; width:600px")
-
-
-ss.write("#### 4. 画直方图")
-sns.set_style("whitegrid")
-titanic = sns.load_dataset("titanic",data_home=data_home)
-sns.histplot(x="age", data=titanic)
-plt.show()
-
-fig = plt.gcf()
-ss.pyplot(fig, style="border:1px solid gray; width:600px")
-```
-    ''')
-    

locales/zh/pages/004 Chart Data/folder.json

@@ -1 +0,0 @@
-{"alias":"图表数据"}

locales/zh/pages/005 Layout Related/demo_columns.py

@@ -1,100 +0,0 @@
-### Columns 列布局
-import streamsync as ss
-
-ss.md("## ss.columns 列布局")
-
-ss.space()
-ss.md("#### 🔅 示例")
-
-ss.space()
-
-ss.md("### 平均间距")
-
-def onchange1(event):
-    #cols_ex1.design = True
-    cols_ex1_id = cols1[0].id #通过cols_ex1不能直接得到
-
-    if event.value == True:
-        ss.getcm().components[cols_ex1_id]["content"]["options"]["border"] = True
-        ss.session["cols1_design"] = ', border = True'
-    else:
-        ss.getcm().components[cols_ex1_id]["content"]["options"]["border"] = False
-        ss.session["cols1_design"] = ''
-    ss.update_cm(cols_ex1_id)
-      
-ss.checkbox("border", checked = True, onchange = onchange1)
-
-cols1 = ss.columns(2, border=True)
-
-with cols1[0]:
-    ss.text("First of two columns")
-
-with cols1[1]:
-    ss.text("Second of two columns")
-
-
-ss.space()
-ss.write("---")
-ss.write("#### 🔎 代码")
-ss.md('''
-```python
-import simplestart as ss
-
-cols1 = ss.columns(2, border = True)
-
-with cols1[0]:
-    ss.text("First of two columns")
-    
-with cols1[1]:
-    ss.text("Second of two columns")
-```
-''')
-    
-ss.space()
-
-
-ss.md("### 按比例间距")
-
-def onchange2(event):
-    #cols_ex1.design = True
-    cols_ex2_id = cols2[0].id #通过cols_ex1不能直接得到
-
-    if event.value == True:
-        ss.getcm().components[cols_ex2_id]["content"]["options"]["border"] = True
-        ss.session["cols2_design"] = ', border = True'
-    else:
-        ss.getcm().components[cols_ex2_id]["content"]["options"]["border"] = False
-        ss.session["cols2_design"] = ''
-    ss.update_cm(cols_ex2_id)
-        
-
-ss.checkbox("border", checked = True, onchange = onchange2)
-
-cols2 = ss.columns([4,6], border = True)
-
-with cols2[0]:
-    ss.text("First of two columns")
-with cols2[1]:
-    ss.text("Second of two columns")
-
-    
-ss.space()
-ss.write("---")
-ss.write("#### 🔎 代码")
-ss.md('''
-```python
-import simplestart as ss
-
-cols1 = ss.columns([4,6], border = True)
-
-with cols1[0]:
-    ss.text("First of two columns")
-    
-with cols1[1]:
-    ss.text("Second of two columns")
-```
-''')
-
-def onPageLoad():
-    ss.session["cols1_design"] = ''
-    ss.session["cols2_design"] = ''

locales/zh/pages/005 Layout Related/demo_row.py

@@ -1,102 +0,0 @@
-### Row 行布局
-
-import streamsync as ss
-
-ss.md("## ss.row 行布局")
-
-ss.space()
-ss.md("#### 🔅 示例")
-ss.write("通过 ss.row 将两个按钮限制在一行内显示，同时利用ss.spacer 改变按钮的布局")
-
-ss.space()
-
-def onchange1():
-    pass
-    
-
-#ui
-
-style = "background:#d3d3d354; padding:5px;"
-
-ss.space()
-ss.write("#### 1. Normal")
-ss.space()
-with ss.row(style=style):
-    ss.button("button1")
-    ss.button("button2")
-
-ss.space()
-ss.write("#### 2. Center")
-ss.space()
-with ss.row(style=style):
-    ss.spacer()
-    ss.button("button1")
-    ss.button("button2")
-    ss.spacer()
-    
-ss.space()
-ss.write("#### 3. Right align")
-ss.space()
-with ss.row(style=style):
-    ss.spacer()
-    ss.button("button1")
-    ss.button("button2")
-    
-ss.space()
-ss.write("#### 4. Right respectively")
-ss.space()
-with ss.row(style=style):
-    ss.spacer()
-    ss.button("button1")
-    ss.spacer()
-    ss.button("button2")
-    
-    
-ss.space("mt-16")
-ss.write("#### 🔎 代码")
-
-ss.md('''
-```python
-import simplestart as ss
-
-style = "background:#d3d3d354; padding:5px;"
-ss.space()
-ss.write("#### 1. Normal")
-ss.space()
-with ss.row(style=style):
-    ss.button("button1")
-    ss.button("button2")
-
-ss.space()
-ss.write("#### 2. Center")
-ss.space()
-with ss.row(style=style):
-    ss.spacer()
-    ss.button("button1")
-    ss.button("button2")
-    ss.spacer()
-    
-ss.space()
-ss.write("#### 3. Right align")
-ss.space()
-with ss.row(style=style):
-    ss.spacer()
-    ss.button("button1")
-    ss.button("button2")
-    
-ss.space()
-ss.write("#### 4. Right respectively")
-ss.space()
-with ss.row(style=style):
-    ss.spacer()
-    ss.button("button1")
-    ss.spacer()
-    ss.button("button2")
-
-''')
-
-ss.md('''
-::: tip
-  ss.space 表示增加间距, ss.spacer 是用来填补间距达到修改布局的作用
-:::
-''')

locales/zh/pages/005 Layout Related/demo_section.py

@@ -1,81 +0,0 @@
-### Section 一般容器
-import simplestart as ss
-
-ss.md("## ss.section 容器")
-
-ss.md("section 父容器, 可以装载其它组件, 支持style参数")
-
-
-ss.space()
-ss.md('''
-#### 🔅 示例
-''')
-
-#api
-def clear():
-    section.empty()
-    
-def write_something():
-    section.text("Hello, I am inside section 2")
-
-#ui
-with ss.section("Section1", shadow = 10, border = True, rounded=True, width = "50%", height=300):
-    ss.text("This is inside the section 1")
-    
-
-ss.space()    
-
-section = ss.section()
-section.text("This is inside the section 2")
-
-ss.space("mt-4 mb-4")   
-ss.text("outside the section")
-
-
-ss.md("---")
-
-ss.button("clear", onclick=clear)
-
-ss.button("add something", onclick=write_something)
-
-ss.space()
-
-ss.write("#### 🔎 代码")
-
-ss.md("""
-```python
-import simplestart as ss
-
-#api
-def clear():
-    section.empty()
-    
-def write_something():
-    section.text("Hello, I am inside section 2")
-
-#ui
-with ss.section(title = "Section1", shadow = 10, border = True, rounded=True, width = "50%", height=300):
-    ss.text("This is inside the section 1")
-    
-
-ss.space()    
-
-section = ss.section()
-section.text("This is inside the section 2")
-
-ss.space()   
-ss.text("outside the section")
-
-ss.md("---")
-
-ss.button("clear", onclick=clear)
-ss.button("add something", onclick=write_something)
-
-```
-""")
-
-ss.md('''
-::: tip
-  除了可以通过 with 语法添加组件，也可以直接通过section.text(), section.button()等方式添加容器内的组件
-:::
-''')

locales/zh/pages/005 Layout Related/demo_sidebar.py

@@ -1,53 +0,0 @@
-### Sidebar 侧边栏
-import simplestart as ss
-
-ss.md("## ss.sidebar 侧边栏")
-
-ss.md("在屏幕左侧的侧边栏内显示各种组件，例如可以放置数据控制和一些设置。")
-
-ss.md('''
-#### 🔅 示例
-''')
-
-
-sidebar = ss.sidebar()
-
-with sidebar:
-    ss.button("click")
-    ss.selectbox(["one", "two", "three"])
-        
-
-def testme(state, value):
-    with sidebar:
-        ss.text("text in sidebar")
-
-    
-ss.button("test", onclick = testme)
-
-
-ss.space()
-
-ss.write("#### 🔎 代码")
-
-ss.md('''
-```python
-import simplestart as ss
-
-sidebar = ss.sidebar()
-
-with sidebar:
-    ss.button("click")
-    ss.selectbox(["one", "two", "three"])
-        
-
-def testme(state, value):
-    with sidebar:
-        ss.text("text in sidebar")
-    #or
-    #sidebar.text("text in sidebar")
-
-    
-ss.button("test", onclick = testme)
-
-```
-''')

locales/zh/pages/005 Layout Related/demo_style.py

@@ -1,68 +0,0 @@
-### Style 样式设置
-import simplestart as ss
-
-ss.md("## ss.style 样式设置")
-
-ss.space()
-ss.md("#### 🔅 示例")
-ss.write("向 HTML 文档中注入 CSS 样式")
-
-ss.html('''
-    <div class="test1">this is a sample1</div>
-    <div class="test2">this is a sample2</div>
-''')
-
-
-ss.style('''
-    .test1{
-        background-color:lightgray;
-        padding:5px;
-        width:150px;
-        margin-bottom:10px;
-        border:1px solid lightblue
-    }
-    .test2{
-        color:red;
-        border:1px solid lightgreen;
-        padding:5px;
-        width:150px;
-    }
-''')
-
-ss.space()
-
-ss.write("#### 🔎 代码")
-
-
-ss.space()
-
-ss.write('''
----
-#### 代码
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-ss.html(\'''
-    <div class="test1">this is a sample1</div>
-    <div class="test2">this is a sample2</div>
-\''')
-
-ss.style(\'''
-    .test1{
-        background-color:lightgray;
-        padding:5px;
-        width:150px;
-        margin-bottom:10px;
-        border:1px solid lightblue
-    }
-    .test2{
-        color:red;
-        border:1px solid lightgreen;
-        padding:5px;
-        width:150px;
-    }
-\''')
-''')

locales/zh/pages/005 Layout Related/demo_tabs.py

@@ -1,35 +0,0 @@
-### Tabs 标签页
-import simplestart as ss
-
-ss.md("## ss.tabs 标签页")
-
-ss.space("mt-16")
-ss.md("#### 🔅 示例")
-
-tabtitles = ["tab1", "tab2", "tab3"]
-tabs = ss.tabs(tabtitles)
-
-with tabs[0]:
-    ss.text("this is tab 1")
-with tabs[1]:
-    ss.text("this is tab 2")
-with tabs[2]:
-    ss.text("this is tab 3")
-    
-ss.space()
-ss.write("#### 🔎 代码")
-
-ss.md('''
-```python
-import simplestart as ss
-
-tabtitles = ["tab1", "tab2", "tab3"]
-tabs = ss.tabs(tabtitles)
-
-with tabs[0]:
-    ss.text("this is tab 1")
-with tabs[1]:
-    ss.text("this is tab 2")
-with tabs[2]:
-    ss.text("this is tab 3")
-''')

locales/zh/pages/005 Layout Related/folder.json

@@ -1 +0,0 @@
-{"alias":"布局相关"}

locales/zh/pages/006 Advanced Usage/demo_component.py

@@ -1,101 +0,0 @@
-### ss.component 自定义组件
-import simplestart as ss
-
-ss.md("### ss.component")
-ss.md("可以通过html,js, css自定义组件，通过iframe实现")
-
-ss.space()
-ss.md('''
-#### 🔅 示例
-''')
-ss.space()
-
-def testme(state, value):
-    mytext.text = "接收到的前端UI的数据: " + value["value"]
-    
-#默认情况下，<iframe> 的宽度为 300 像素，高度为 150 像素。
-ss.text("在文本框中输入内容并按回车")
-
-myplugin = ss.component(path = f"components/index.html", onData = testme) ###style="border:none")
-
-def postdata():
-    data = {"my_input_value":"text from python"}
-    myplugin.postMessage(data)
-
-mytext = ss.text("接收到的前端UI的数据: ")
-
-ss.markdown("---")
-ss.space()
-ss.text("点击按钮，传递数据到UI前端")
-ss.button("post data", onclick=postdata)
-
-ss.space()
-
-ss.write("Python端代码")
-
-ss.md('''
-```python
-import simplestart as ss
-
-def testme(state, value):
-    mytext.text = "接收到的前端UI的数据: " + value["value"]
-    
-ss.text("在文本框中输入内容并按回车")
-myplugin = ss.component(path = f"components/index.html", onData = testme)
-
-def postdata():
-    data = {"my_input_value":"text from python"}
-    myplugin.postMessage(data)
-
-mytext = ss.text("接收到的前端UI的数据: ")
-
-ss.markdown("---")
-
-ss.space()
-ss.text("点击按钮，传递数据到UI前端")
-ss.button("post data", onclick=postdata)
-
-```
-''')
-
-ss.write("Plugin/html/js端代码")
-
-ss.md('''
-```html
-<html>
-    
-<head>
-    <script src="pybridge.js"></script>
-</head>
-    
-<body style="height:100px">
-    <input id="myinput" value="" autocomplete="off" placeholder="输入内容，并按回车" />
-</body>
-    
-<script>
-    var myInput = document.getElementById("myinput");
-
-    myInput.addEventListener("change", function() {
-        ////将消息发送给Python端
-        sendDataToPython({
-            value: myInput.value,
-        });
-    })
-    
-    //接受来自Python端的消息消息
-    window.addEventListener("message", onDataFromPython);
-    
-    function onDataFromPython(event) {
-        var data = event.data.arg;
-        if (event.data.type !== "ss:render") return;
-            myInput.value = data.my_input_value;  // Access values sent from Python here!
-    }
-    
-    //如果系统设置失败，可以手工设置高度
-    //setFrameHeight(200);
-</script>
-
-</html>
-
-```
-''')

locales/zh/pages/006 Advanced Usage/demo_loadvue.py

@@ -1,132 +0,0 @@
-### ss.loadvue 加载VUE SFC
-import simplestart as ss
-
-ss.md("## ss.loadvue 加载VUE SFC")
-
-ss.space()
-ss.md("在SimpleStart中，可以通过ss.loadvue加载自定义的vue单文件组件，实现属性和数据交互。")
-
-ss.space()
-
-ss.space()
-ss.md('''
-#### 🔅 示例
-
-在这里例子中，我们定义一个简单的前端组件，组件里定义了一个"ontest"事件，当用户点击"handle on server"按钮时，
-Python端的ontest事件处理函数会处理，并且接受前端组件传递的数据。同时，当点击Python端的 "修改数据"
-按钮时，前端组件会响应改变显示内容。
-
-''')
-
-ss.space("mt-8")
-ss.md("---")
-ss.space("mt-8")
-
-tagid = 0
-tags = ["Python", "Java", "Javascript"]
-data = {"count":0, "language":"C++"}
-global myvue
-
-#trigger event on server from client side
-def ontest(event):
-    ss.message(event.value)
-
-#change data in client component on server side
-def changedata(event):
-    global tagid
-    myvue.data["language"] = tags[tagid]
-    myvue.update()
-    
-    tagid = (tagid+1) % 3
-    
-ss.text("Python 端")
-ss.button("修改数据", onclick=changedata)
-
-ss.space()
-sec = ss.section()
-
-def onPageLoad():
-    global myvue
-    #load code from file
-    with sec:
-        ss.text("组件端")
-        myvue = ss.loadvue(path = "components/mycomponent.vue", data = data, handlers = {"ontest":ontest})
-    
-    
-ss.space()
-ss.write("Python端 代码")
-
-ss.md('''
-```python
-import simplestart as ss
-
-tagid = 0
-global myvue
-
-tags = ["Python", "Java", "Javascript"]
-data = {"count":0, "language":"C++"}
-
-
-#trigger event on server from client side
-def ontest(state, value):
-    ss.message(value)
-
-#change data in client component on server side
-def changedata(state, value=None):
-    global tagid
-    myvue.data["language"] = tags[tagid]
-    tagid = (tagid+1) % 3
-    
-ss.text("Python 端")
-ss.button("修改数据", onclick=changedata)
-
-
-def onPageLoad():
-    global myvue
-    #load code from file
-    myvue = ss.loadvue(path = "components/mycomponent.vue", data = data, handlers = {"ontest":ontest})
-```
-''')
-
-
-ss.space()
-ss.write("Vue JS代码")
-
-ss.md('''
-```js
-<template>
-  <div class="my-component">
-    <h1>{{title}}: {{ data.language }}</h1>
-    <v-btn @click="testme">handle on server</v-btn>
-  </div>
-</template>
-
-<script>
-module.exports = {
-    name: 'MyComponent',
-
-    data() {
-        return {
-            title:"computer",
-        }
-    },
-
-    methods: {
-        testme(){
-            this.streamsync.forwardData(this, eventname="ontest", "12345")
-        }
-    }
-}
-</script>
-
-<style>
-.my-component {
-    width:50%;
-    background-color: #f0f0f0;
-    padding: 20px;
-    margin:10px 0;
-}
-</style>
-
-```
-''')

locales/zh/pages/006 Advanced Usage/demo_onload.py

@@ -1,46 +0,0 @@
-### ss.onPageEnter 页面加载事件
-import simplestart as ss
-from datetime import datetime
-
-ss.md("## onPageEnter 页面加载事件")
-
-ss.md('''
----
-#### 🔅 示例
-''')
-
-ss.md("每次进入这个页面的时候，onPageEnter事件函数会被调用, 上方会弹出一个message")
-
-ss.space()
-
-mytext = ss.text("当前时间@currentime")
-
-def onPageEnter():
-    #ss.write("test")
-    ss.message("page enter event") ##不知道为什么不起作用
-    
-    #mytext.update_cm() ###这个很重要，否则@test不会响应
-
-    # 获取当前时间
-    now = datetime.now()
-    # 格式化时间为字符串
-    time_str = now.strftime('%Y-%m-%d %H:%M:%S')    
-    ss.session["currentime"] = time_str
-
-
-ss.space()
-
-ss.write('''
----
-#### 🔎 代码
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-def onPageEnter():
-    ss.message("page enter event")
-
-```
-''')

locales/zh/pages/006 Advanced Usage/demo_session.py

@@ -1,22 +0,0 @@
-### ss.session 页面会话变量
-import simplestart as ss
-
-ss.md("## ss.session session变量")
-
-ss.space()
-
-
-#in this page
-ss.session["count"] = 100
-
-mytext = ss.text("The couns is @count")
-
-
-def change_count():
-    ss.session.count += 1
-
-ss.button("Add Count", onclick=change_count)
-
-def xonPageEnter():
-    ss.session.count = 100
-    #mytext.update_cm() ###对于包括@的组件，需要在这里设置，否则不变化显示值

locales/zh/pages/006 Advanced Usage/demo_template.py

@@ -1,133 +0,0 @@
-### ss.template 加载VUE模版
-
-import simplestart as ss
-
-
-ss.md("## ss.template 加载VUE模版")
-
-ss.space("mt-8")
-ss.md('''
-在SimpleStart中，可以通过ss.template定义简单的vue组件, 实现属性和数据交互。
-
-#### 函数
-ss.template(src, path, data, handlers)
-      
-##### 函数说明
-
-| 参数 | 说明 |
-| --- | --- | 
-| src | 字符串形式的组件脚本 |
-| path | 外部文件的组件的原代码路径 |
-| data | 用于实现前端组件和Python端的交互数据 |
-| handlers | 在Python端实现前端组件定义的事件 |
-      
-''')
-
-ss.space("mt-8")
-
-ss.md('''
----
-#### 示例1
-在这里例子中，我们定义一个简单的前端组件，组件里定义了一个"myclick"事件，当用户点击"Click me"按钮时，
-Python端的myclick事件处理函数会处理，并且接受前端组件传递的数据。同时，当点击Python端的 "增加数字"
-按钮时，通过state变量改变前端的数值。
-
-''')
-
-    
-template = '''
-  <v-card
-    class="mx-auto text-white"
-    color="#26c6da"
-    max-width="400"
-    prepend-icon="mdi-twitter"
-    title="Twitter"
-  >
-    <template v-slot:prepend>
-      <v-icon size="x-large"></v-icon>
-    </template>
-
-    <v-card-text class="text-h6 py-2">
-      "SimpleStart is a easy way to build webpage and visualize data."
-    </v-card-text>
-
-    <v-card-actions>
-      <v-list-item class="w-100">
-        <template v-slot:prepend>
-          <v-avatar
-            color="grey-darken-3"
-            image="https://avataaars.io/?avatarStyle=Transparent&topType=ShortHairShortCurly&accessoriesType=Prescription02&hairColor=Black&facialHairType=Blank&clotheType=Hoodie&clotheColor=White&eyeType=Default&eyebrowType=DefaultNatural&mouthType=Default&skinColor=Light"
-          ></v-avatar>
-        </template>
-
-        <v-list-item-title>Evan You</v-list-item-title>
-
-        <v-list-item-subtitle>Data Science Engineer</v-list-item-subtitle>
-
-        <template v-slot:append>
-          <div class="justify-self-end">
-            <v-icon class="me-1" icon="mdi-heart" \@click="onserver('myclick')"></v-icon>
-            <span class="subheading me-2">{{data.vote}}</span>
-            <span class="me-1">·</span>
-            <v-icon class="me-1" icon="mdi-share-variant"></v-icon>
-            <span class="subheading">45</span>
-          </div>
-        </template>
-      </v-list-item>
-    </v-card-actions>
-  </v-card>
-'''
-
-def myclick(event):
-    mycard.vote  = mycard.vote + 1
-    
-data = {"vote":256}
-mycard = ss.template(template, data = data, handlers = {"myclick":myclick})
-
-def increment(event):
-    mycard.vote  = mycard.vote + 1
-    #mycard.style = "color:red"
-
-ss.space()
-ss.button("Thumb Up", onclick=increment)
-
-ss.space("mt-8")
-
-ss.write('''
----
-#### 代码
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-def myclick(event):
-    mycard.vote  = mycard.vote + 1
-    
-data = {"vote":256}
-mycard = ss.template(template, data = data, handlers = {"myclick":myclick})
-
-def increment(event):
-    mycard.vote  = mycard.vote + 1
-    #mycard.style = "color:red"
-
-ss.space()
-ss.button("Thumb Up", onclick=increment)
-```
-''')
-
-ss.space("mt-8")
-
-
-ss.md('''
-::: tip
-  组件内对于data的变化如果需要传递到后端，需要显示地调用syncdata或者onserver事件。
-  如上面例子中的 onchange="syncdata", 就是当用户改变了颜色后，将data的值传到python后端。
-:::
-''')
-
-def onPageEnter():
-    ss.session["counter"] = 0
-    ss.session["xxxx"] = 1
-    

locales/zh/pages/006 Advanced Usage/demo_when.py

@@ -1,101 +0,0 @@
-### ss.when 条件语句
-import simplestart as ss
-
-ss.md('''
-## ss.when 条件语句
-''')
-
-ss.space()
-ss.md('''
-#### 🔅 示例
-''')
-
-#api
-def increment(event):
-    ss.session["counter"] += 1
-    
-def decrement(event):
-    ss.session["counter"] -= 1
-
-    
-#conditional func
-def conditioner(event):
-    #print("event", event)
-    if event["flag"] == 1:
-        if ss.session["counter"] >= 5:
-            return True
-        else:
-            return False
-    elif event["flag"] == 2:
-        return (ss.session["viewcode"] == 1)
-        
-
-# State initialisation
-ss.session["counter"] = 0
-ss.session["viewcode"] = 0
-
-#ui
-ss.text("The count is @counter.")
-
-ss.button("Increment", onclick=increment)
-ss.button("Decrement", onclick=decrement)
-
-ss.write("当counter大于5时，下面将出现新的内容")
-
-with ss.when(conditioner, flag = 1): # Conditional rendering
-    ss.text("Well done on reaching 5 👋🌷🍾")
-    
-ss.write("当counter小于5时，新的内容会隐藏")
-
-
-ss.space()
-
-ss.write("#### 🔎 代码")
-ss.write("---")
-
-def viewcode():
-    ss.session["viewcode"] = 1
-
-ss.button("查看", size="small", onclick = viewcode)
-
-with ss.when(conditioner, flag = 2):
-    ss.md('''
-```python
-import simplestart as ss
-
-#api
-def increment(event):
-    ss.session["counter"] += 1
-    
-def decrement(event):
-    ss.session["counter"] -= 1
-
-    
-#conditional func
-def conditioner(event):
-    return (ss.session["counter"] >= 5)
-        
-# State initialisation
-ss.session["counter"] = 0
-ss.session["viewcode"] = 0
-
-#ui
-ss.text("The count is @counter.")
-
-ss.button("Increment", onclick=increment)
-ss.button("Decrement", onclick=decrement)
-
-ss.write("当counter大于5时，下面将出现新的内容")
-
-with ss.when(conditioner, flag = 1): # Conditional rendering
-    ss.text("Well done on reaching 5 👋🌷🍾")
-    
-ss.write("当counter小于5时，新的内容会隐藏")
-```
-    ''')
-
-ss.md('''
-::: tip
-  上面的代码查看也是用ss.when实现的
-:::
-''')

locales/zh/pages/006 Advanced Usage/folder.json

@@ -1 +0,0 @@
-{"alias":"高级用法"}

locales/zh/pages/Advanced_Usage/demo_chat.py

@@ -1,33 +0,0 @@
-'''
-title: ollama 对话演示
-'''
-
-import simplestart as ss
-import ollama
-
-ss.md("## ss.chat")
-
-setting = {
-    "ollama_base_url": "http://localhost:11434",
-    "model": "qwen:0.5b",
-    "stream":False
-}
-
-def mychange(event):
-    setting.update({
-        "model":mysel.value, 
-        "stream":mycheck.value,
-    })
-    
-
-with ss.sidebar():
-    ss.md("#### 模型和参数")
-    ss.space()
-    models = ss.ollama.get_models()
-    
-    mysel = ss.selectbox(models, index = 5, label = "选择ollama模型", onchange = mychange)
-
-    mycheck = ss.checkbox("流模式输出", onchange = mychange)
-
-
-mychat = ss.ollama.chat(demo = False, setting = setting)

locales/zh/pages/Advanced_Usage/demo_component.py

@@ -1,104 +0,0 @@
-'''
-title: ss.component 自定义组件
-'''
-
-import simplestart as ss
-
-ss.md("### ss.component")
-ss.md("可以通过html,js, css自定义组件，通过iframe实现")
-
-ss.space()
-ss.md('''
-#### 🔅 示例
-''')
-ss.space()
-
-def testme(state, value):
-    mytext.text = "接收到的前端UI的数据: " + value["value"]
-    
-#默认情况下，<iframe> 的宽度为 300 像素，高度为 150 像素。
-ss.text("在文本框中输入内容并按回车")
-
-myplugin = ss.component(path = f"components/index.html", onData = testme) ###style="border:none")
-
-def postdata():
-    data = {"my_input_value":"text from python"}
-    myplugin.postMessage(data)
-
-mytext = ss.text("接收到的前端UI的数据: ")
-
-ss.markdown("---")
-ss.space()
-ss.text("点击按钮，传递数据到UI前端")
-ss.button("post data", onclick=postdata)
-
-ss.space()
-
-ss.write("Python端代码")
-
-ss.md('''
-```python
-import simplestart as ss
-
-def testme(state, value):
-    mytext.text = "接收到的前端UI的数据: " + value["value"]
-    
-ss.text("在文本框中输入内容并按回车")
-myplugin = ss.component(path = f"components/index.html", onData = testme)
-
-def postdata():
-    data = {"my_input_value":"text from python"}
-    myplugin.postMessage(data)
-
-mytext = ss.text("接收到的前端UI的数据: ")
-
-ss.markdown("---")
-
-ss.space()
-ss.text("点击按钮，传递数据到UI前端")
-ss.button("post data", onclick=postdata)
-
-```
-''')
-
-ss.write("Plugin/html/js端代码")
-
-ss.md('''
-```html
-<html>
-    
-<head>
-    <script src="pybridge.js"></script>
-</head>
-    
-<body style="height:100px">
-    <input id="myinput" value="" autocomplete="off" placeholder="输入内容，并按回车" />
-</body>
-    
-<script>
-    var myInput = document.getElementById("myinput");
-
-    myInput.addEventListener("change", function() {
-        ////将消息发送给Python端
-        sendDataToPython({
-            value: myInput.value,
-        });
-    })
-    
-    //接受来自Python端的消息消息
-    window.addEventListener("message", onDataFromPython);
-    
-    function onDataFromPython(event) {
-        var data = event.data.arg;
-        if (event.data.type !== "ss:render") return;
-            myInput.value = data.my_input_value;  // Access values sent from Python here!
-    }
-    
-    //如果系统设置失败，可以手工设置高度
-    //setFrameHeight(200);
-</script>
-
-</html>
-
-```
-''')

locales/zh/pages/Advanced_Usage/demo_loadvue.py

@@ -1,135 +0,0 @@
-'''
-title: ss.loadvue 加载VUE SFC
-'''
-
-import simplestart as ss
-
-ss.md("## ss.loadvue 加载VUE SFC")
-
-ss.space()
-ss.md("在SimpleStart中，可以通过ss.loadvue加载自定义的vue单文件组件，实现属性和数据交互。")
-
-ss.space()
-
-ss.space()
-ss.md('''
-#### 🔅 示例
-
-在这里例子中，我们定义一个简单的前端组件，组件里定义了一个"ontest"事件，当用户点击"handle on server"按钮时，
-Python端的ontest事件处理函数会处理，并且接受前端组件传递的数据。同时，当点击Python端的 "修改数据"
-按钮时，前端组件会响应改变显示内容。
-
-''')
-
-ss.space("mt-8")
-ss.md("---")
-ss.space("mt-8")
-
-tagid = 0
-tags = ["Python", "Java", "Javascript"]
-data = {"count":0, "language":"C++"}
-global myvue
-
-#trigger event on server from client side
-def ontest(event):
-    ss.message(event.value)
-
-#change data in client component on server side
-def changedata(event):
-    global tagid
-    myvue.data["language"] = tags[tagid]
-    myvue.update()
-    
-    tagid = (tagid+1) % 3
-    
-ss.text("Python 端")
-ss.button("修改数据", onclick=changedata)
-
-ss.space()
-sec = ss.section()
-
-def onPageLoad():
-    global myvue
-    #load code from file
-    with sec:
-        ss.text("组件端")
-        myvue = ss.loadvue(path = "components/mycomponent.vue", data = data, handlers = {"ontest":ontest})
-    
-    
-ss.space()
-ss.write("Python端 代码")
-
-ss.md('''
-```python
-import simplestart as ss
-
-tagid = 0
-global myvue
-
-tags = ["Python", "Java", "Javascript"]
-data = {"count":0, "language":"C++"}
-
-
-#trigger event on server from client side
-def ontest(state, value):
-    ss.message(value)
-
-#change data in client component on server side
-def changedata(state, value=None):
-    global tagid
-    myvue.data["language"] = tags[tagid]
-    tagid = (tagid+1) % 3
-    
-ss.text("Python 端")
-ss.button("修改数据", onclick=changedata)
-
-
-def onPageLoad():
-    global myvue
-    #load code from file
-    myvue = ss.loadvue(path = "components/mycomponent.vue", data = data, handlers = {"ontest":ontest})
-```
-''')
-
-
-ss.space()
-ss.write("Vue JS代码")
-
-ss.md('''
-```js
-<template>
-  <div class="my-component">
-    <h1>{{title}}: {{ data.language }}</h1>
-    <v-btn @click="testme">handle on server</v-btn>
-  </div>
-</template>
-
-<script>
-module.exports = {
-    name: 'MyComponent',
-
-    data() {
-        return {
-            title:"computer",
-        }
-    },
-
-    methods: {
-        testme(){
-            this.streamsync.forwardData(this, eventname="ontest", "12345")
-        }
-    }
-}
-</script>
-
-<style>
-.my-component {
-    width:50%;
-    background-color: #f0f0f0;
-    padding: 20px;
-    margin:10px 0;
-}
-</style>
-
-```
-''')

locales/zh/pages/Advanced_Usage/demo_onload.py

@@ -1,49 +0,0 @@
-'''
-title: ss.onPageEnter 页面加载事件
-'''
-
-import simplestart as ss
-from datetime import datetime
-
-ss.md("## onPageEnter 页面加载事件")
-
-ss.md('''
----
-#### 🔅 示例
-''')
-
-ss.md("每次进入这个页面的时候，onPageEnter事件函数会被调用, 上方会弹出一个message")
-
-ss.space()
-
-mytext = ss.text("当前时间@currentime")
-
-def onPageEnter():
-    #ss.write("test")
-    ss.message("page enter event") ##不知道为什么不起作用
-    
-    #mytext.update_cm() ###这个很重要，否则@test不会响应
-
-    # 获取当前时间
-    now = datetime.now()
-    # 格式化时间为字符串
-    time_str = now.strftime('%Y-%m-%d %H:%M:%S')    
-    ss.session["currentime"] = time_str
-
-
-ss.space()
-
-ss.write('''
----
-#### 🔎 代码
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-def onPageEnter():
-    ss.message("page enter event")
-
-```
-''')