diff --git a/pages/.DS_Store b/pages/.DS_Store deleted file mode 100644 index 9586d535ef253a6067c407d202b66992300045ff..0000000000000000000000000000000000000000 Binary files a/pages/.DS_Store and /dev/null differ diff --git a/pages/002 Form Component/demo_button.py b/pages/002 Form Component/demo_button.py deleted file mode 100644 index 9c0c771ad1a3bad979b329eb4536977369799dd6..0000000000000000000000000000000000000000 --- a/pages/002 Form Component/demo_button.py +++ /dev/null @@ -1,149 +0,0 @@ -### Button -import simplestart as ss - -ss.md(''' -## ss.button -''') -ss.md(''' -[Online Help](https://www.simplestart.cc/doc_form/ss-button.html) -''') -ss.space() -ss.md(''' -#### ๐Ÿ”… Example -''') - - -def testme(): - #ss.openpage("002 Form Component/demo_button", lang="zh") - #ss.openpage("main", lang="zh") - ss.send_message("change_locale", {"locale":"zh"}); - -ss.button("testme", onclick = testme) - -#Custom Function -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"] = '' - - -#Basic Usage -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("Test") - - ss.write("---") - ss.radio(["default", "outlined", "flat", "text", "plain"], "default", inline = True, onchange=onradiochange) - - ss.write("---") - ss.radio([(1, "Icon(Prepend)"), (2, "Icon(Append)"), (3, "No Icon")], 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("Reset", onclick=reset) - - -ss.space("mt-8") - -ss.write("#### ๐Ÿ”Ž Code") - -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 - Function Call - ss.button(label, type, color, size, icon, onclick) -::: -''') - -def onPageLoad(): - ss.session["buttonstyle"] = "" - ss.session["iconstr"] = "" - ss.session["style"] = "" - ss.session["style_str"] = "" - diff --git a/pages/002 Form Component/demo_checkbox.py b/pages/002 Form Component/demo_checkbox.py deleted file mode 100644 index 3b55d4652785cf3a1cfe5f5eee429d40e0575882..0000000000000000000000000000000000000000 --- a/pages/002 Form Component/demo_checkbox.py +++ /dev/null @@ -1,77 +0,0 @@ -### Checkbox -import simplestart as ss - -ss.write("### ss.checkbox") - -def onchange(event): - ss.session["checked_value"] = event.value - - -ss.md(''' ---- -#### ๐Ÿ”… Example 1 -''') - -ss.md("onchange: @checked_value") - -ss.checkbox("checkme", onchange = onchange) -ss.checkbox("initially checked", checked = True, onchange = onchange) - - -ss.write(''' ---- -#### ๐Ÿ”Ž Code -''') - -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(''' ---- -#### ๐Ÿ”… Example 2 -Get the status of the checkbox -''') - -mycheck = ss.checkbox("check me", onchange = onchange) - -def myclick(): - ss.message(mycheck.value) - -ss.button("Get Status", onclick = myclick) - -ss.space() -ss.write(''' ---- -#### ๐Ÿ”Ž Code -''') - - -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"] = "" \ No newline at end of file diff --git a/pages/002 Form Component/demo_dialog.py b/pages/002 Form Component/demo_dialog.py deleted file mode 100644 index fcdffa7b5bcba322ea38c309c3a598fcd9890586..0000000000000000000000000000000000000000 --- a/pages/002 Form Component/demo_dialog.py +++ /dev/null @@ -1,78 +0,0 @@ -### Dialog -import simplestart as ss - -ss.md("## ss.dialog") - -ss.space() - -ss.md(''' ---- -#### ๐Ÿ”… Example -''') - -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("Dialog Title", 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("Dialog Options") - ss.checkbox("Fullscreen", onchange=mycheck) - -ss.space() -ss.write(''' ---- -#### ๐Ÿ”Ž Code -''') - -ss.md(''' -```python -import simplestart as ss - -def myclose(event): - ss.message("dialog close with result " + event.value) - -dialog = ss.dialog(title="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"] = "" - - diff --git a/pages/002 Form Component/demo_expander.py b/pages/002 Form Component/demo_expander.py deleted file mode 100644 index 5af8f9986a7b0d6f79f3a8814b3cc083858c27c7..0000000000000000000000000000000000000000 --- a/pages/002 Form Component/demo_expander.py +++ /dev/null @@ -1,29 +0,0 @@ -### Expander -import streamsync as ss - -ss.md("## ss.expander") - -ss.md(''' -#### ๐Ÿ”… Example -''') - -with ss.expander("About 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(''' ---- -#### ๐Ÿ”Ž Code -''') - -ss.md(''' -```python -import simplestart as ss - -with ss.expander("About 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!") - -``` -''') \ No newline at end of file diff --git a/pages/002 Form Component/demo_menu.py b/pages/002 Form Component/demo_menu.py deleted file mode 100644 index 0d2544ede3c03f5e6828539edf2f30ca068fb47f..0000000000000000000000000000000000000000 --- a/pages/002 Form Component/demo_menu.py +++ /dev/null @@ -1,100 +0,0 @@ -### Menu -import streamsync as ss - -ss.md("## ss.menu") - -ss.md(''' -#### ๐Ÿ”… Example -''') - -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) - - -ss.space() -ss.write(''' ---- -#### ๐Ÿ”Ž Code -''') - -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) - -``` -''') \ No newline at end of file diff --git a/pages/002 Form Component/demo_radio.py b/pages/002 Form Component/demo_radio.py deleted file mode 100644 index 620b8c32a43ffc789c9c03cbff9d86e324ab6c6b..0000000000000000000000000000000000000000 --- a/pages/002 Form Component/demo_radio.py +++ /dev/null @@ -1,94 +0,0 @@ -### Radio -import simplestart as ss - -ss.md("## ss.radio") - -ss.space() - -ss.md(''' -#### ๐Ÿ”… Example -''') - -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++", '#### C++'), - ("Javascript", '#### Javascript'), - ("Python", '#### Python') - ] -ss.radio(options, inline = True, label = "### my radio2", index = 0, iconColor = "blue", onchange = onchange) - - - -ss.write("---") -ss.write("#### ๐Ÿ”Ž Code") - -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++", '#### C++'), - ("Javascript", '#### Javascript'), - ("Python", '#### Python') - ] -ss.radio(options, inline = True, label = "### my radio2", index = 0, iconColor = "blue", onchange = onchange) - -def onPageLoad(): - ss.session["options_value"] = "" - -''') - - -ss.space() -ss.md(''' ---- -#### ๐Ÿ”… Example - Get State Value -''') - -def myclick1(): - ss.message(myradio.value) - -ss.button("Get State Value", onclick=myclick1) - -def myclick2(): - ss.message(myradio.index) - -ss.button("Get State Index", onclick=myclick2) - -ss.write("---") -ss.write("#### ๐Ÿ”Ž Code Snippet") - -ss.md(''' -```python -#... -def myclick1(): - ss.message(myradio.value) - -ss.button("Get State Value", onclick=myclick1) - -def myclick2(): - ss.message(myradio.index) - -ss.button("Get State Index", onclick=myclick2) -''') - - -def onPageLoad(): - ss.session["options_value"] = "" \ No newline at end of file diff --git a/pages/002 Form Component/demo_selectbox.py b/pages/002 Form Component/demo_selectbox.py deleted file mode 100644 index bfcaf9039cb1b091d2eaf053d3ff50dabe88d3f3..0000000000000000000000000000000000000000 --- a/pages/002 Form Component/demo_selectbox.py +++ /dev/null @@ -1,78 +0,0 @@ -### Selectbox -import simplestart as ss - -ss.md("## ss.selectbox") - -ss.space() -ss.md(''' -#### ๐Ÿ”… Example 1 -Create a selectbox with a title and 3 options on the page. -''') -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("#### ๐Ÿ”Ž Code") - -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(''' -#### ๐Ÿ”… Example 2 -Get the current option of the selectbox. In addition to obtaining the user's selected option information through the event's index and value in the selectbox's onchange event, you can also get the user's selection information via the selectbox variable. -''') -ss.space() - -def onclick1(): - ss.message(select1.value) - -ss.button("Current Option Value", onclick=onclick1) - -def onclick2(): - ss.message(select1.index) - -ss.button("Current Option Index", onclick=onclick2) - -ss.space() - -ss.write("#### ๐Ÿ”Ž Code Snippet") - - -ss.md(""" -```python - -#... - -def onclick1(): - ss.message(select1.value) - -ss.button("Current Option Value", onclick = onclick1) - -def onclick2(): - ss.message(select1.index) - -ss.button("Current Option Index", onclick = onclick2) - -``` -""") \ No newline at end of file diff --git a/pages/002 Form Component/demo_slider.py b/pages/002 Form Component/demo_slider.py deleted file mode 100644 index 2dfe92ae4e6945c8b6fb6dc5516c78ec4c83302d..0000000000000000000000000000000000000000 --- a/pages/002 Form Component/demo_slider.py +++ /dev/null @@ -1,35 +0,0 @@ -### Slider -import simplestart as ss - -ss.md("## ss.slider") - -ss.space() - -ss.md(''' -#### ๐Ÿ”… Example -''') - -ss.md("### Please drag the slider to change the value") - -info = ss.text("number") - -def onchange(event): - info.text = event.value - -ss.slider("my slider", value=500, min=0, max=1000, onchange=onchange, style="width:50%") - -ss.space() - -ss.write("#### ๐Ÿ”Ž Code") - -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) -''') diff --git a/pages/002 Form Component/demo_textarea.py b/pages/002 Form Component/demo_textarea.py deleted file mode 100644 index 7707d711adad4354334ac1c0a8ef7e151904b784..0000000000000000000000000000000000000000 --- a/pages/002 Form Component/demo_textarea.py +++ /dev/null @@ -1,45 +0,0 @@ -### Textarea -import streamsync as ss - -ss.md("## ss.textarea") - -ss.space() -ss.md("#### ๐Ÿ”… Example") - -ss.md("---") - -# Basic usage -# test = ss.text_input("hello, world", type="textarea") -mytext = ss.textarea("hello, world") - -ss.write("---") -ss.write("#### ๐Ÿ”Ž Code") - -ss.md(''' -```python -import simplestart as ss - -mytext = ss.textarea("hello, world") - -''') - -ss.space() -ss.md("#### ๐Ÿ”… Get the text value of the textarea") -ss.md("---") - -def myclick(): - ss.message(mytext.value) - -ss.button("Get Text", onclick=myclick) - -ss.write("---") -ss.write("#### ๐Ÿ”Ž Code Snippet") - -ss.md(''' -```python -#... -def myclick(): - ss.message(mytext.value) - -ss.button("Get Text", onclick=myclick) -''') diff --git a/pages/002 Form Component/demo_textinput.py b/pages/002 Form Component/demo_textinput.py deleted file mode 100644 index 71e63f9a09c31c7716fc7b6c8536195ef376a96a..0000000000000000000000000000000000000000 --- a/pages/002 Form Component/demo_textinput.py +++ /dev/null @@ -1,65 +0,0 @@ -### Text_input -import streamsync as ss - - -ss.md("## ss.text_input") - -ss.space() -ss.md("#### ๐Ÿ”… Example") - -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='#### Change the input style', \ - value="solo", onchange = myevent, eventTag="sel1") - - ss.selectbox(["text","time", "date", "week", "month", "password", "color"], label='#### Change the input type', \ - onchange = myevent, eventTag="sel2") - - ss.write('#### Get Input Value') - ss.button("Get Text Value", onclick=myevent, eventTag="but1") - - - -ss.write("---") -ss.write("#### ๐Ÿ”Ž Code") - -ss.md(''' -```python -import simplestart as ss - -myinput = ss.text_input("Hello SimpleStart", clearable=True) - -#Or -#ss.text_input("hello", type="text", variant = "filled") - -''') \ No newline at end of file diff --git a/pages/002 Form Component/demo_upload.py b/pages/002 Form Component/demo_upload.py deleted file mode 100644 index a2be3c17d32bead73526d5e86dd435afe3ce950d..0000000000000000000000000000000000000000 --- a/pages/002 Form Component/demo_upload.py +++ /dev/null @@ -1,40 +0,0 @@ -### File Upload -import streamsync as ss -import pandas as pd - -ss.md("## ss.upload File Upload") - - -ss.space() -ss.md("#### ๐Ÿ”… Example - Upload Image") -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("#### ๐Ÿ”Ž Code") - -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() - -''') \ No newline at end of file diff --git a/pages/003 Content Display/demo_audio.py b/pages/003 Content Display/demo_audio.py deleted file mode 100644 index fa2ff6948116fef87519f06a2d678b9a39a47069..0000000000000000000000000000000000000000 --- a/pages/003 Content Display/demo_audio.py +++ /dev/null @@ -1,39 +0,0 @@ -### Audio Playback -import streamsync as ss - -ss.md("## ss.audio") - - -ss.space() -ss.md(''' -#### ๐Ÿ”… Example -''') - -ss.space() - -audiosrc = "media/test.wav" -player = ss.audio(audiosrc) - - -ss.space("mt-8") - -ss.write(''' ---- -#### ๐Ÿ”Ž Code -''') - -ss.md(''' -```python -import simplestart as ss - -audiosrc = "media/davide_quatela--breathing_barcelona.mp3" -player = ss.audio(audiosrc) -``` -''') - - -ss.md(''' -::: tip -ss.audio supports audio formats including wav, mp3, etc. -::: -''') \ No newline at end of file diff --git a/pages/003 Content Display/demo_html.py b/pages/003 Content Display/demo_html.py deleted file mode 100644 index 8b4a046e020bf75e73259389051843ccdef61a22..0000000000000000000000000000000000000000 --- a/pages/003 Content Display/demo_html.py +++ /dev/null @@ -1,49 +0,0 @@ -### Html Hypertext -import streamsync as ss - - -ss.md("## ss.html") - -ss.space("") - -ss.md(''' -#### ๐Ÿ”… Example -''') - - -ss.md("### html") - -ss.html(f""" -

This is a piece of rich text content, which contains bold and italic text.

- -
this is red
-""") - -ss.space("mt-8") - -ss.write(''' ---- -#### ๐Ÿ”Ž Code -''') - -ss.md(''' -```python -import simplestart as ss - -ss.html(f""" -

This is a piece of rich text content, which contains bold and italic text.

- -
this is red
-""") -``` -''') \ No newline at end of file diff --git a/pages/003 Content Display/demo_image.py b/pages/003 Content Display/demo_image.py deleted file mode 100644 index 3e6e07739b22ea33aa516d172dff1e3bc7bc82d8..0000000000000000000000000000000000000000 --- a/pages/003 Content Display/demo_image.py +++ /dev/null @@ -1,92 +0,0 @@ -### Image -import simplestart as ss - -import cv2 -from PIL import Image -import os - -ss.md("## ss.image") - -ss.md(''' -#### ๐Ÿ”… Example -''') - -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(''' -#### ๐Ÿ”Ž Code -''') - -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\"" diff --git a/pages/003 Content Display/demo_markdown.py b/pages/003 Content Display/demo_markdown.py deleted file mode 100644 index 9af2e28f2550e7040382e0c7b3987a1fc4492c14..0000000000000000000000000000000000000000 --- a/pages/003 Content Display/demo_markdown.py +++ /dev/null @@ -1,57 +0,0 @@ -### Markdown -import simplestart as ss - -ss.md("## ss.markdown") - -ss.space() - -ss.md(''' -#### ๐Ÿ”… Example -''') - -ss.space() - -ss.markdown("- 19^th^") -ss.markdown("# Heading 1") -ss.markdown("## Heading 2") -ss.markdown("### Heading 3") - -#Horizontal Divider -ss.markdown("---") - -ss.markdown(''' -- list item1 -- list item2 -- list item3 -''') - -ss.markdown(":smile:") - - - -ss.space("mt-8") - -ss.write(''' ---- -#### ๐Ÿ”Ž Code -''') - -ss.md(''' -```python -import simplestart as ss - -ss.markdown("# Heading 1") -ss.markdown("## Heading 2") -ss.markdown("### Heading 3") - -#Horizontal Divider -ss.markdown("---") - -ss.markdown(\''' -- list item1 -- list item2 -- list item3 -\''') - -``` -''') \ No newline at end of file diff --git a/pages/003 Content Display/demo_message.py b/pages/003 Content Display/demo_message.py deleted file mode 100644 index cca0b54c197027cb716fa1ea31ee274e83b757ee..0000000000000000000000000000000000000000 --- a/pages/003 Content Display/demo_message.py +++ /dev/null @@ -1,37 +0,0 @@ -### Message -import simplestart as ss - -ss.md("## ss.message Popup Message") - -ss.space() - - -ss.md(''' -#### ๐Ÿ”… Example -''') -ss.space() - - -def showmsg(): - ss.message("Hello, world") - -showmsg() -ss.button("message", onclick=showmsg) - - -ss.space("mt-8") - -ss.write(''' ---- -#### ๐Ÿ”Ž Code -''') - -ss.md(''' -```python -import simplestart as ss - -def showmsg(): - ss.message("Hello, the world") - -``` -''') \ No newline at end of file diff --git a/pages/003 Content Display/demo_sqlite.py b/pages/003 Content Display/demo_sqlite.py deleted file mode 100644 index 7923ba7495c3044056b4f6aaa12cf5aac6d4264d..0000000000000000000000000000000000000000 --- a/pages/003 Content Display/demo_sqlite.py +++ /dev/null @@ -1,39 +0,0 @@ -### Sqlite Database -import simplestart as ss - -ss.md("## ss.sqlite Database") - -ss.space() -ss.md(''' -Provides simple operations for the SQLite database. -''') - -ss.space() -ss.md(''' -#### ๐Ÿ”… Example -''') - -ss.md(''' -::: tip -This example reads the Iris dataset from the SQLite database and displays it in a CSV table format. -For SQLite management, simplestart offers a built-in tool for simple create, read, update, and delete operations. -::: -''') - -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("#### Code") - -ss.md(''' -```python -import simplestart as ss - -sql = ss.sqlite("./data/ss_data.db") -data = sql.pd_query("select * from HousingData") -ss.write(data) -``` -''') diff --git a/pages/003 Content Display/demo_table.py b/pages/003 Content Display/demo_table.py deleted file mode 100644 index d3c28544a133628b5f38db4ff5d3d6964a49e945..0000000000000000000000000000000000000000 --- a/pages/003 Content Display/demo_table.py +++ /dev/null @@ -1,249 +0,0 @@ -### Table -import simplestart as ss -import pandas as pd - -ss.md("## ss.table Table Data") - -ss.md("Display data in table format.") - -ss.space() - -ss.md(''' -#### ๐Ÿ”… Example -''') - -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"] - - -# Create a dataset with three columns -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("Index", onchange = onchange_index) - ss.space() - ss.checkbox("Border", onchange = onchange_border) - ss.space() - ss.checkbox("Sort", onchange = onchange_sortable) - ss.space() - ss.checkbox("Select", onchange = onchange_selectable) - ss.space() - ss.checkbox("Search", onchange = onchange_searchable) - ss.space() - ss.checkbox("Edit", onchange = onchange_editable) - -ss.space("mt-8") - -ss.write(''' ---- -#### ๐Ÿ”Ž Code -''') - -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(''' ---- -#### ๐Ÿ”… Example - Custom column. -''') - - -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 = ''' - -''' - -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("Each column can be customized for display.") - -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 = \''' - - - -\''' - -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"] = '' \ No newline at end of file diff --git a/pages/003 Content Display/demo_text.py b/pages/003 Content Display/demo_text.py deleted file mode 100644 index 7548324151a4bcfa9ff54cd296ee4ae7f1c1da01..0000000000000000000000000000000000000000 --- a/pages/003 Content Display/demo_text.py +++ /dev/null @@ -1,35 +0,0 @@ -### Text -import streamsync as ss - -ss.md("## ss.text Text") -ss.md("Supports the style parameter.") - - -ss.space() -ss.space() -ss.md(''' -#### ๐Ÿ”… Example -''') - -ss.md("---") - -#Basic usage -test = ss.text("hello, world") - -#Change color -ss.text("This is a red string", style="color:red") - -ss.space() -ss.write("#### ๐Ÿ”Ž Code") - -ss.md(''' -```python -import simplestart as ss - -#Basic usage -test = ss.text("hello, world") - -#Change color -ss.text("This is a red string", style="color:red") -``` -''') \ No newline at end of file diff --git a/pages/003 Content Display/demo_video.py b/pages/003 Content Display/demo_video.py deleted file mode 100644 index a84a2d5f73cde92b1dfb5439a7816beceb92fad1..0000000000000000000000000000000000000000 --- a/pages/003 Content Display/demo_video.py +++ /dev/null @@ -1,36 +0,0 @@ -### Video Playback -import streamsync as ss - -ss.md("## ss.video Video Playback") - -ss.md("Supports playing videos in formats like mp4.") - -ss.md(''' -#### ๐Ÿ”… Example -''') - -src = "https://media.w3.org/2010/05/sintel/trailer.mp4" - -player = ss.video(src, style="width:50%") - -ss.text("Source: https://media.w3.org/2010/05/sintel/trailer.mp4", style="color:gray") - -ss.space("mt-8") - -ss.write(''' ---- -#### ๐Ÿ”Ž Code -''') - -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") - -#Change video source -#player.src = "..." -``` -''') diff --git a/pages/003 Content Display/demo_write.py b/pages/003 Content Display/demo_write.py deleted file mode 100644 index 83a4cbb19f7936f7b2bbb69d9bfebd6afbd3986c..0000000000000000000000000000000000000000 --- a/pages/003 Content Display/demo_write.py +++ /dev/null @@ -1,78 +0,0 @@ -### Write - -import streamsync as ss -import pandas as pd - -ss.md("## ss.write Output Data") - -ss.md("ss.write is similar to print; it can output text, lists, and other types, making testing and output easy.") - -ss.space() - -ss.md(''' -#### ๐Ÿ”… Example -''') - - -ss.md("#### 1. Output Text") -ss.write("This is a text") - -ss.md(''' -```python -ss.write("This is a text") -``` -''') - -ss.md("#### 2. Output Multiple Variables") -a = "aaa" -b = "bbb" -ss.write(a, ",", b) - -ss.md(''' -```python -a = "aaa" -b = "bbb" -ss.write(a, ",", b) -``` -''') - -ss.md("#### 3. Output List") -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. Output Table") -# ๅˆ›ๅปบๆ•ฐๆฎ -data = {'name': ['Alice', 'Bob', 'Charlie', 'David'], - 'age': [25, 30, 35, 40], - 'city': ['New York', 'Paris', 'London', 'Sydney']} - -# Convert data to DataFrame format -df = pd.DataFrame(data) -ss.write(df) - -ss.md(''' -```python -# Create data -data = {'name': ['Alice', 'Bob', 'Charlie', 'David'], - 'age': [25, 30, 35, 40], - 'city': ['New York', 'Paris', 'London', 'Sydney']} - -# Convert data to DataFrame format -df = pd.DataFrame(data) -ss.write(df) -``` -''') \ No newline at end of file diff --git a/pages/004 Chart Data/demo_bokeh.py b/pages/004 Chart Data/demo_bokeh.py deleted file mode 100644 index 0a5c942f38a05fe1d24207721dd5bd6676707e78..0000000000000000000000000000000000000000 --- a/pages/004 Chart Data/demo_bokeh.py +++ /dev/null @@ -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 - -# Load the Iris dataset -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'}) - - -# Create the data source and figure object -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'] -)) - -# Create a Bokeh scatter plot -p = figure(title="Iris Dataset Scatter Plot", x_axis_label='Sepal Length (cm)', y_axis_label='Sepal Width (cm)', - tools="pan,wheel_zoom,box_zoom,reset,hover,save", width=800) - -# Set different colors based on species -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' - -# Embed the Bokeh figure into SimpleStart -html = file_html(p, CDN, "Iris Dataset Scatter Plot") - -#ui -ss.md(''' -## simplestart Chart Demo - Bokeh -''') - -ss.space() -ss.md(''' -#### ๐Ÿ”… Example -An interactive scatter plot of the Iris data using Bokeh -''') - -ss.space() -ss.htmlview(html, border = False) - -ss.space() -ss.write("#### ๐Ÿ”Ž Code") - -def viewcode(): - ss.session["viewcode"] = 1 - -ss.session["viewcode"] = 0 -ss.button("View Code", 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 - -# Load the Iris dataset -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'}) - - -# Create the data source and figure object -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'] -)) - -# Create a Bokeh scatter plot -p = figure(title="Iris Dataset Scatter Plot", x_axis_label='Sepal Length (cm)', y_axis_label='Sepal Width (cm)', - tools="pan,wheel_zoom,box_zoom,reset,hover,save", width=800) - -# Set different colors based on species -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' - -# Embed the Bokeh figure into SimpleStart -html = file_html(p, CDN, "Iris Dataset Scatter Plot") - -#ui -ss.htmlview(html, border = False) -''' - -with ss.when(conditioner): - ss.md(code) \ No newline at end of file diff --git a/pages/004 Chart Data/demo_pyplot.py b/pages/004 Chart Data/demo_pyplot.py deleted file mode 100644 index c989cde2d58eb9a8b9cc772338fb2e44e07ec962..0000000000000000000000000000000000000000 --- a/pages/004 Chart Data/demo_pyplot.py +++ /dev/null @@ -1,130 +0,0 @@ -import streamsync as ss - -import seaborn as sns -import matplotlib as mpl -import matplotlib.pyplot as plt - - -#ไธ‹่ฝฝไธไบ†๏ผŒๆ‰€ไปฅๅŠ ไธ€ไธชๅ‚ๆ•ฐdata_home -data_home = "./data/seaborn" - -ss.md(''' -## ss.pyplot Drawing -''') - - -ss.space() -ss.md(''' -#### ๐Ÿ”… Example -''') - -ss.write("#### 1. Draw a Line Plot") - -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. Draw a Scatter Plot") - -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. Draw a Bar Plot") - -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. Draw a Histogram") -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("#### ๐Ÿ”Ž Code") -ss.write("---") - -def viewcode(): - ss.session["viewcode"] = 1 - -ss.button("View Code", 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 -import matplotlib.pyplot as plt - - -data_home = "./data/seaborn" - - -ss.write("#### 1. Draw a Line Plot") - -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. Draw a Scatter Plot") - -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. Draw a Bar Plot") - -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. Draw a Histogram") -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") -``` - ''') - diff --git a/pages/005 Layout Related/demo_columns.py b/pages/005 Layout Related/demo_columns.py deleted file mode 100644 index b8147c1f66a89f335f66eac60aac179090e1e381..0000000000000000000000000000000000000000 --- a/pages/005 Layout Related/demo_columns.py +++ /dev/null @@ -1,100 +0,0 @@ -### Columns Layout -import streamsync as ss - -ss.md("## ss.columns Columns Layout") - -ss.space() -ss.md("#### ๐Ÿ”… Example") - -ss.space() - -ss.md("### Average Spacing") - -def onchange1(event): - #cols_ex1.design = True - cols_ex1_id = cols1[0].id - - 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("#### ๐Ÿ”Ž Code") -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("### Proportional Spacing") - - -def onchange2(event): - #cols_ex1.design = True - cols_ex2_id = cols2[0].id - - 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("#### ๐Ÿ”Ž Code") -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"] = '' \ No newline at end of file diff --git a/pages/005 Layout Related/demo_row.py b/pages/005 Layout Related/demo_row.py deleted file mode 100644 index da6e39914ef1ca54be80c550de298866f3fe1d81..0000000000000000000000000000000000000000 --- a/pages/005 Layout Related/demo_row.py +++ /dev/null @@ -1,102 +0,0 @@ -### Row Layout - -import streamsync as ss - -ss.md("## ss.row Row Layout") - -ss.space() -ss.md("#### ๐Ÿ”… Example") -ss.write("Use ss.row to constrain two buttons to display on the same line, while using ss.spacer to adjust the layout of the buttons.") - -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("#### ๐Ÿ”Ž Code") - -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 adds spacing, while ss.spacer is used to fill gaps to modify the layout. -::: -''') \ No newline at end of file diff --git a/pages/005 Layout Related/demo_section.py b/pages/005 Layout Related/demo_section.py deleted file mode 100644 index 0953231287338776dd351aeacfa24dfdcbd7bf9b..0000000000000000000000000000000000000000 --- a/pages/005 Layout Related/demo_section.py +++ /dev/null @@ -1,81 +0,0 @@ -### Section -import simplestart as ss - -ss.md("## ss.section Container") - -ss.md("The section parent container can hold other components and supports the style parameter.") - - -ss.space() -ss.md(''' -#### ๐Ÿ”… Example -''') - -#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("#### ๐Ÿ”Ž Code") - -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 - In addition to adding components using the with syntax, you can also directly add components within the container using section.text(), section.button(), etc. -::: -''') \ No newline at end of file diff --git a/pages/005 Layout Related/demo_sidebar.py b/pages/005 Layout Related/demo_sidebar.py deleted file mode 100644 index cd897e1257e25f7a8bbfcf79cce05ff401b32e61..0000000000000000000000000000000000000000 --- a/pages/005 Layout Related/demo_sidebar.py +++ /dev/null @@ -1,53 +0,0 @@ -### Sidebar -import simplestart as ss - -ss.md("## ss.sidebar") - -ss.md("Display various components in the sidebar on the left side of the screen, such as data controls and some settings.") - -ss.md(''' -#### ๐Ÿ”… Example -''') - - -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("#### ๐Ÿ”Ž Code") - -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) - -``` -''') \ No newline at end of file diff --git a/pages/005 Layout Related/demo_style.py b/pages/005 Layout Related/demo_style.py deleted file mode 100644 index fa231897c2eafc193bc457e2447805d561cc6ae1..0000000000000000000000000000000000000000 --- a/pages/005 Layout Related/demo_style.py +++ /dev/null @@ -1,64 +0,0 @@ -### Style -import simplestart as ss - -ss.md("## ss.style Style Settings") - -ss.space() -ss.md("#### ๐Ÿ”… Example") -ss.write("nject CSS styles into the HTML document.") - -ss.html(''' -
this is a sample1
-
this is a sample2
-''') - - -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("#### ๐Ÿ”Ž Code") - - -ss.space() - - -ss.md(''' -```python -import simplestart as ss - -ss.html(\''' -
this is a sample1
-
this is a sample2
-\''') - -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; - } -\''') -''') diff --git a/pages/005 Layout Related/demo_tabs.py b/pages/005 Layout Related/demo_tabs.py deleted file mode 100644 index a59d63f31178a5a498d29e660e086195abc6d722..0000000000000000000000000000000000000000 --- a/pages/005 Layout Related/demo_tabs.py +++ /dev/null @@ -1,35 +0,0 @@ -### Tabs -import simplestart as ss - -ss.md("## ss.tabs") - -ss.space("mt-16") -ss.md("#### ๐Ÿ”… Example") - -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("#### ๐Ÿ”Ž Code") - -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") -''') diff --git a/pages/006 Advanced Usage/demo_component.py b/pages/006 Advanced Usage/demo_component.py deleted file mode 100644 index 6d308e79c6e6705c62545ecd1e17948d497723f7..0000000000000000000000000000000000000000 --- a/pages/006 Advanced Usage/demo_component.py +++ /dev/null @@ -1,101 +0,0 @@ -### ss.component -import simplestart as ss - -ss.md("### ss.component Custom Component") -ss.md("You can customize components using HTML, JS, and CSS, implemented through an iframe.") - -ss.space() -ss.md(''' -#### ๐Ÿ”… Example -''') -ss.space() - -def testme(state, value): - mytext.text = "Data received from the frontend UI: " + value["value"] - -# By default, the