diff --git a/.gitattributes b/.gitattributes index a6344aac8c09253b3b630fb776ae94478aa0275b..4941a4e5f2e1b3edd5b123ba2d400272ec257445 100644 --- a/.gitattributes +++ b/.gitattributes @@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text *.zip filter=lfs diff=lfs merge=lfs -text *.zst filter=lfs diff=lfs merge=lfs -text *tfevents* filter=lfs diff=lfs merge=lfs -text +media/davide_quatela--breathing_barcelona.mp3 filter=lfs diff=lfs merge=lfs -text diff --git a/app.py b/app.py index 7ff7d8503fd479ca5c39d0cddbd2eb19ec867eb1..1ca088c264b9ce85073c5bf7e2a4de466db9c3c0 100644 --- a/app.py +++ b/app.py @@ -1,3 +1,30 @@ import simplestart as ss -ss.write("hi") \ No newline at end of file +ss.md("## SimpleStart Introduction") + +ss.space() +ss.md(''' +### A Python Web Development Tool Without Frontend Programming +SimpleStart is a tool that allows web development without the need for frontend coding. All development work is done in Python on the backend, enabling users to easily create web applications without needing to master HTML, CSS, JavaScript, Ajax, and other technologies. +''') + +ss.space() + +ss.md(''' +### Offers a Rich Set of Components +SimpleStart provides a variety of components needed for web development, including text, buttons, lists, tables, audio, and video. It supports containers and layouts while allowing users to customize components. +''') + +ss.space() + +ss.md(''' +### Provides Data Visualization Support +SimpleStart enables data visualization through images, tables, Plot charts, and SQLite databases. It supports both static and interactive charts and offers features for displaying and editing data. +''') + +ss.space() +ss.md("---") +ss.write("For installation and usage information, please visit") +ss.md(''' +[Online Help](http://www.simplestart.cc) +''') diff --git a/components/index.html b/components/index.html new file mode 100644 index 0000000000000000000000000000000000000000..2b2fe5f34c4fc7cdda7e622362ea404d9d85b5fb --- /dev/null +++ b/components/index.html @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/components/mycell.vue b/components/mycell.vue new file mode 100644 index 0000000000000000000000000000000000000000..f100af2953c6e9cdedddc7426066e7ae00fd9520 --- /dev/null +++ b/components/mycell.vue @@ -0,0 +1,27 @@ + + + \ No newline at end of file diff --git a/components/mycomponent.vue b/components/mycomponent.vue new file mode 100644 index 0000000000000000000000000000000000000000..bf8807437842dcd604c6b89abf53ab2154645a54 --- /dev/null +++ b/components/mycomponent.vue @@ -0,0 +1,33 @@ + + + + + diff --git a/components/pybridge.js b/components/pybridge.js new file mode 100644 index 0000000000000000000000000000000000000000..bb0243be5e0479a3a17f2c7350595f2681dab460 --- /dev/null +++ b/components/pybridge.js @@ -0,0 +1,40 @@ +// ---------------------------------------------------- +// Just copy/paste these functions as-is: +// 获取 URL 参数 +const urlParams = new URLSearchParams(window.location.search); + +// 获取指定参数的值 +const componentId = urlParams.get('componentId'); + +function init() { + sendMessageToStreamlitClient("componentReady", {msg: "ready"}); +} + +function sendMessageToStreamlitClient(type, data) { + var outData = Object.assign({ + componentId:componentId, + isSSMessage: true, + _type: type, + }, data); + window.parent.postMessage(outData, "*"); +} + +// The `data` argument can be any JSON-serializable value. +function sendDataToPython(data) { + sendMessageToStreamlitClient("setComponentValue", data); +} + +// Hook things up! +//window.addEventListener("message", onDataFromPython); +init(); + +function setFrameHeight(height) { + sendMessageToStreamlitClient("setFrameHeight", {height: height}); +} + +// Hack to autoset the iframe height. +window.addEventListener("load", function() { + window.setTimeout(function() { + setFrameHeight(document.documentElement.clientHeight) + }, 0); +}); \ No newline at end of file diff --git a/components/readme.txt b/components/readme.txt new file mode 100644 index 0000000000000000000000000000000000000000..eecae04dbecb961bf06393b5debc50018e0c252a --- /dev/null +++ b/components/readme.txt @@ -0,0 +1,2 @@ +Code snippet: create Components without any frontend tooling (no React, Babel, Webpack, etc) +https://discuss.streamlit.io/t/code-snippet-create-components-without-any-frontend-tooling-no-react-babel-webpack-etc/13064/1 \ No newline at end of file diff --git a/components/test.html b/components/test.html new file mode 100644 index 0000000000000000000000000000000000000000..d7aee1bfca3fc7b0408d6d53eceae780c7f06702 --- /dev/null +++ b/components/test.html @@ -0,0 +1,3 @@ + + hello, world + \ No newline at end of file diff --git a/media/davide_quatela--breathing_barcelona.mp3 b/media/davide_quatela--breathing_barcelona.mp3 new file mode 100644 index 0000000000000000000000000000000000000000..9a29196ee970c326886749e168957f318ad1c96c --- /dev/null +++ b/media/davide_quatela--breathing_barcelona.mp3 @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ee0eb2f02a7fa8a54cd3f7b263700d16d14b4fd68a4706664c8e1cf975dc6498 +size 3437337 diff --git a/media/image/cat.jpeg b/media/image/cat.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..996b6dbb258eab03f517c06f606b2aca6d6dcde7 Binary files /dev/null and b/media/image/cat.jpeg differ diff --git a/media/image/dalao.jpeg b/media/image/dalao.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..8051be8af409840930657a2b1ddb386010f643f8 Binary files /dev/null and b/media/image/dalao.jpeg differ diff --git a/media/image/dog.jpeg b/media/image/dog.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..ddf26085c43f82c2db411fe576d8f5ab758c40b0 Binary files /dev/null and b/media/image/dog.jpeg differ diff --git a/media/image/owl.jpeg b/media/image/owl.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..a68c6017266b3d46453a8822097fb13afd51c30f Binary files /dev/null and b/media/image/owl.jpeg differ diff --git a/media/image/ss_sidebar.png b/media/image/ss_sidebar.png new file mode 100644 index 0000000000000000000000000000000000000000..515e0e9e845241de4b496ebfdcfd741e59888e46 Binary files /dev/null and b/media/image/ss_sidebar.png differ diff --git a/media/image/wx_2dcode.jpeg b/media/image/wx_2dcode.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..4a52d583d028ef451fb2c52f8657c203fb7ca354 Binary files /dev/null and b/media/image/wx_2dcode.jpeg differ diff --git a/media/test.wav b/media/test.wav new file mode 100644 index 0000000000000000000000000000000000000000..0525ecaad1d618a6e8b6b44ee069d2064afe43a0 Binary files /dev/null and b/media/test.wav differ diff --git a/pages/.DS_Store b/pages/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..9586d535ef253a6067c407d202b66992300045ff Binary files /dev/null and b/pages/.DS_Store differ diff --git a/pages/002 Form Component/demo_button.py b/pages/002 Form Component/demo_button.py new file mode 100644 index 0000000000000000000000000000000000000000..550be1c3a493985102753c5c1dfc13e7555b9706 --- /dev/null +++ b/pages/002 Form Component/demo_button.py @@ -0,0 +1,142 @@ +### Button +import streamsync as ss + + +ss.md(''' +## ss.button +''') +ss.md(''' +[Online Help](http://www.simplestart.cc) +''') +ss.space() +ss.md(''' +#### 🔅 Example +''') + +#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 new file mode 100644 index 0000000000000000000000000000000000000000..3b55d4652785cf3a1cfe5f5eee429d40e0575882 --- /dev/null +++ b/pages/002 Form Component/demo_checkbox.py @@ -0,0 +1,77 @@ +### 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 new file mode 100644 index 0000000000000000000000000000000000000000..fcdffa7b5bcba322ea38c309c3a598fcd9890586 --- /dev/null +++ b/pages/002 Form Component/demo_dialog.py @@ -0,0 +1,78 @@ +### 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 new file mode 100644 index 0000000000000000000000000000000000000000..5af8f9986a7b0d6f79f3a8814b3cc083858c27c7 --- /dev/null +++ b/pages/002 Form Component/demo_expander.py @@ -0,0 +1,29 @@ +### 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_radio.py b/pages/002 Form Component/demo_radio.py new file mode 100644 index 0000000000000000000000000000000000000000..620b8c32a43ffc789c9c03cbff9d86e324ab6c6b --- /dev/null +++ b/pages/002 Form Component/demo_radio.py @@ -0,0 +1,94 @@ +### 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 new file mode 100644 index 0000000000000000000000000000000000000000..bfcaf9039cb1b091d2eaf053d3ff50dabe88d3f3 --- /dev/null +++ b/pages/002 Form Component/demo_selectbox.py @@ -0,0 +1,78 @@ +### 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 new file mode 100644 index 0000000000000000000000000000000000000000..2dfe92ae4e6945c8b6fb6dc5516c78ec4c83302d --- /dev/null +++ b/pages/002 Form Component/demo_slider.py @@ -0,0 +1,35 @@ +### 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 new file mode 100644 index 0000000000000000000000000000000000000000..7707d711adad4354334ac1c0a8ef7e151904b784 --- /dev/null +++ b/pages/002 Form Component/demo_textarea.py @@ -0,0 +1,45 @@ +### 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 new file mode 100644 index 0000000000000000000000000000000000000000..71e63f9a09c31c7716fc7b6c8536195ef376a96a --- /dev/null +++ b/pages/002 Form Component/demo_textinput.py @@ -0,0 +1,65 @@ +### 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 new file mode 100644 index 0000000000000000000000000000000000000000..a2be3c17d32bead73526d5e86dd435afe3ce950d --- /dev/null +++ b/pages/002 Form Component/demo_upload.py @@ -0,0 +1,40 @@ +### 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 new file mode 100644 index 0000000000000000000000000000000000000000..fa2ff6948116fef87519f06a2d678b9a39a47069 --- /dev/null +++ b/pages/003 Content Display/demo_audio.py @@ -0,0 +1,39 @@ +### 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 new file mode 100644 index 0000000000000000000000000000000000000000..8b4a046e020bf75e73259389051843ccdef61a22 --- /dev/null +++ b/pages/003 Content Display/demo_html.py @@ -0,0 +1,49 @@ +### 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 new file mode 100644 index 0000000000000000000000000000000000000000..3e6e07739b22ea33aa516d172dff1e3bc7bc82d8 --- /dev/null +++ b/pages/003 Content Display/demo_image.py @@ -0,0 +1,92 @@ +### 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 new file mode 100644 index 0000000000000000000000000000000000000000..9af2e28f2550e7040382e0c7b3987a1fc4492c14 --- /dev/null +++ b/pages/003 Content Display/demo_markdown.py @@ -0,0 +1,57 @@ +### 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 new file mode 100644 index 0000000000000000000000000000000000000000..cca0b54c197027cb716fa1ea31ee274e83b757ee --- /dev/null +++ b/pages/003 Content Display/demo_message.py @@ -0,0 +1,37 @@ +### 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 new file mode 100644 index 0000000000000000000000000000000000000000..7923ba7495c3044056b4f6aaa12cf5aac6d4264d --- /dev/null +++ b/pages/003 Content Display/demo_sqlite.py @@ -0,0 +1,39 @@ +### 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 new file mode 100644 index 0000000000000000000000000000000000000000..d3c28544a133628b5f38db4ff5d3d6964a49e945 --- /dev/null +++ b/pages/003 Content Display/demo_table.py @@ -0,0 +1,249 @@ +### 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 new file mode 100644 index 0000000000000000000000000000000000000000..7548324151a4bcfa9ff54cd296ee4ae7f1c1da01 --- /dev/null +++ b/pages/003 Content Display/demo_text.py @@ -0,0 +1,35 @@ +### 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 new file mode 100644 index 0000000000000000000000000000000000000000..a84a2d5f73cde92b1dfb5439a7816beceb92fad1 --- /dev/null +++ b/pages/003 Content Display/demo_video.py @@ -0,0 +1,36 @@ +### 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 new file mode 100644 index 0000000000000000000000000000000000000000..83a4cbb19f7936f7b2bbb69d9bfebd6afbd3986c --- /dev/null +++ b/pages/003 Content Display/demo_write.py @@ -0,0 +1,78 @@ +### 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 new file mode 100644 index 0000000000000000000000000000000000000000..0a5c942f38a05fe1d24207721dd5bd6676707e78 --- /dev/null +++ b/pages/004 Chart Data/demo_bokeh.py @@ -0,0 +1,128 @@ +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 new file mode 100644 index 0000000000000000000000000000000000000000..c989cde2d58eb9a8b9cc772338fb2e44e07ec962 --- /dev/null +++ b/pages/004 Chart Data/demo_pyplot.py @@ -0,0 +1,130 @@ +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 new file mode 100644 index 0000000000000000000000000000000000000000..b8147c1f66a89f335f66eac60aac179090e1e381 --- /dev/null +++ b/pages/005 Layout Related/demo_columns.py @@ -0,0 +1,100 @@ +### 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 new file mode 100644 index 0000000000000000000000000000000000000000..da6e39914ef1ca54be80c550de298866f3fe1d81 --- /dev/null +++ b/pages/005 Layout Related/demo_row.py @@ -0,0 +1,102 @@ +### 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 new file mode 100644 index 0000000000000000000000000000000000000000..0953231287338776dd351aeacfa24dfdcbd7bf9b --- /dev/null +++ b/pages/005 Layout Related/demo_section.py @@ -0,0 +1,81 @@ +### 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 new file mode 100644 index 0000000000000000000000000000000000000000..cd897e1257e25f7a8bbfcf79cce05ff401b32e61 --- /dev/null +++ b/pages/005 Layout Related/demo_sidebar.py @@ -0,0 +1,53 @@ +### 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 new file mode 100644 index 0000000000000000000000000000000000000000..fa231897c2eafc193bc457e2447805d561cc6ae1 --- /dev/null +++ b/pages/005 Layout Related/demo_style.py @@ -0,0 +1,64 @@ +### 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 new file mode 100644 index 0000000000000000000000000000000000000000..a59d63f31178a5a498d29e660e086195abc6d722 --- /dev/null +++ b/pages/005 Layout Related/demo_tabs.py @@ -0,0 +1,35 @@ +### 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 new file mode 100644 index 0000000000000000000000000000000000000000..f81ce51024e659607b901398e36a10233dd8a581 --- /dev/null +++ b/pages/006 Advanced Usage/demo_component.py @@ -0,0 +1,101 @@ +### ss.component +import simplestream 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