Hugging Face's logo

Spaces:
test2023h5
/
Demo_SimpleStart_Usage
Running

App Files Community
test2023h5 commited on
Commit
936e0a7
·
verified ·
1 Parent(s): 93eb805

Upload 50 files

Browse files
This view is limited to 50 files because it contains too many changes.   See raw diff
Files changed (50) hide show
  1. .gitattributes +1 -0
  2. app.py +28 -1
  3. components/index.html +40 -0
  4. components/mycell.vue +27 -0
  5. components/mycomponent.vue +33 -0
  6. components/pybridge.js +40 -0
  7. components/readme.txt +2 -0
  8. components/test.html +3 -0
  9. media/davide_quatela--breathing_barcelona.mp3 +3 -0
  10. media/image/cat.jpeg +0 -0
  11. media/image/dalao.jpeg +0 -0
  12. media/image/dog.jpeg +0 -0
  13. media/image/owl.jpeg +0 -0
  14. media/image/ss_sidebar.png +0 -0
  15. media/image/wx_2dcode.jpeg +0 -0
  16. media/test.wav +0 -0
  17. pages/.DS_Store +0 -0
  18. pages/002 Form Component/demo_button.py +142 -0
  19. pages/002 Form Component/demo_checkbox.py +77 -0
  20. pages/002 Form Component/demo_dialog.py +78 -0
  21. pages/002 Form Component/demo_expander.py +29 -0
  22. pages/002 Form Component/demo_radio.py +94 -0
  23. pages/002 Form Component/demo_selectbox.py +78 -0
  24. pages/002 Form Component/demo_slider.py +35 -0
  25. pages/002 Form Component/demo_textarea.py +45 -0
  26. pages/002 Form Component/demo_textinput.py +65 -0
  27. pages/002 Form Component/demo_upload.py +40 -0
  28. pages/003 Content Display/demo_audio.py +39 -0
  29. pages/003 Content Display/demo_html.py +49 -0
  30. pages/003 Content Display/demo_image.py +92 -0
  31. pages/003 Content Display/demo_markdown.py +57 -0
  32. pages/003 Content Display/demo_message.py +37 -0
  33. pages/003 Content Display/demo_sqlite.py +39 -0
  34. pages/003 Content Display/demo_table.py +249 -0
  35. pages/003 Content Display/demo_text.py +35 -0
  36. pages/003 Content Display/demo_video.py +36 -0
  37. pages/003 Content Display/demo_write.py +78 -0
  38. pages/004 Chart Data/demo_bokeh.py +128 -0
  39. pages/004 Chart Data/demo_pyplot.py +130 -0
  40. pages/005 Layout Related/demo_columns.py +100 -0
  41. pages/005 Layout Related/demo_row.py +102 -0
  42. pages/005 Layout Related/demo_section.py +81 -0
  43. pages/005 Layout Related/demo_sidebar.py +53 -0
  44. pages/005 Layout Related/demo_style.py +64 -0
  45. pages/005 Layout Related/demo_tabs.py +35 -0
  46. pages/006 Advanced Usage/demo_component.py +101 -0
  47. pages/006 Advanced Usage/demo_loadvue.py +131 -0
  48. pages/006 Advanced Usage/demo_onload.py +46 -0
  49. pages/006 Advanced Usage/demo_session.py +21 -0
  50. pages/006 Advanced Usage/demo_template.py +158 -0
.gitattributes CHANGED
@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
33
  *.zip filter=lfs diff=lfs merge=lfs -text
34
  *.zst filter=lfs diff=lfs merge=lfs -text
35
  *tfevents* filter=lfs diff=lfs merge=lfs -text
 
 
33
  *.zip filter=lfs diff=lfs merge=lfs -text
34
  *.zst filter=lfs diff=lfs merge=lfs -text
35
  *tfevents* filter=lfs diff=lfs merge=lfs -text
36
+ media/davide_quatela--breathing_barcelona.mp3 filter=lfs diff=lfs merge=lfs -text
app.py CHANGED
@@ -1,3 +1,30 @@
1
  import simplestart as ss
2
 
3
- ss.write("hi")
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  import simplestart as ss
2
 
3
+ ss.md("## SimpleStart Introduction")
4
+
5
+ ss.space()
6
+ ss.md('''
7
+ ### A Python Web Development Tool Without Frontend Programming
8
+ 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.
9
+ ''')
10
+
11
+ ss.space()
12
+
13
+ ss.md('''
14
+ ### Offers a Rich Set of Components
15
+ 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.
16
+ ''')
17
+
18
+ ss.space()
19
+
20
+ ss.md('''
21
+ ### Provides Data Visualization Support
22
+ 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.
23
+ ''')
24
+
25
+ ss.space()
26
+ ss.md("---")
27
+ ss.write("For installation and usage information, please visit")
28
+ ss.md('''
29
+ [Online Help](http://www.simplestart.cc)
30
+ ''')
components/index.html ADDED
@@ -0,0 +1,40 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!--
2
+ this example on "Code snippet: create Components without any frontend tooling (no React, Babel, Webpack, etc)"
3
+ is copied from streamlit and modified, you can find it at
4
+ https://discuss.streamlit.io/t/code-snippet-create-components-without-any-frontend-tooling-no-react-babel-webpack-etc/13064
5
+ -->
6
+
7
+ <html>
8
+
9
+ <head>
10
+ <script src="pybridge.js"></script>
11
+ </head>
12
+
13
+ <body style="height:100px">
14
+ <input id="myinput" value="" autocomplete="off" placeholder="Enter text and press enter" />
15
+ </body>
16
+
17
+ <script>
18
+ var myInput = document.getElementById("myinput");
19
+
20
+ myInput.addEventListener("change", function() {
21
+ ////将消息发送给Python端
22
+ sendDataToPython({
23
+ value: myInput.value,
24
+ });
25
+ })
26
+
27
+ //接受来自Python端的消息消息
28
+ window.addEventListener("message", onDataFromPython);
29
+
30
+ function onDataFromPython(event) {
31
+ var data = event.data.arg;
32
+ if (event.data.type !== "pypost") return;
33
+ myInput.value = data.my_input_value; // Access values sent from Python here!
34
+ }
35
+
36
+ //如果系统设置失败，可以手工设置高度
37
+ //setFrameHeight(200);
38
+ </script>
39
+
40
+ </html>
components/mycell.vue ADDED
@@ -0,0 +1,27 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <template>
2
+ <!--<el-tag>{{item.value}}</el-tag>-->
3
+ <v-row>
4
+ <v-rating
5
+ v-model="rating" density="compact" color="orange" half-increments></v-rating>
6
+ <v-chip variant="text">{{item.value}}</v-chip>
7
+ </v-row>
8
+ </template>
9
+
10
+ <script>
11
+
12
+ module.exports = {
13
+ props:["item"],
14
+
15
+ data () {
16
+ return {
17
+ rating: 3
18
+ }
19
+ },
20
+ methods: {
21
+ //todo
22
+ },
23
+ mounted: function () {
24
+ this.rating = this.item.value/20
25
+ },
26
+ }
27
+ </script>
components/mycomponent.vue ADDED
@@ -0,0 +1,33 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <template>
2
+ <div class="my-component">
3
+ <h1>{{title}}: {{ data.language }}</h1>
4
+ <el-button @click="testme">handle on server</el-button>
5
+ </div>
6
+ </template>
7
+
8
+ <script>
9
+ module.exports = {
10
+ name: 'MyComponent',
11
+
12
+ data() {
13
+ return {
14
+ title:"computer",
15
+ }
16
+ },
17
+
18
+ methods: {
19
+ testme(){
20
+ this.streamsync.forwardData(this, eventname="ontest", "12345")
21
+ }
22
+ }
23
+ }
24
+ </script>
25
+
26
+ <style>
27
+ .my-component {
28
+ width:50%;
29
+ background-color: #f0f0f0;
30
+ padding: 20px;
31
+ margin:10px 0;
32
+ }
33
+ </style>
components/pybridge.js ADDED
@@ -0,0 +1,40 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // ----------------------------------------------------
2
+ // Just copy/paste these functions as-is:
3
+ // 获取 URL 参数
4
+ const urlParams = new URLSearchParams(window.location.search);
5
+
6
+ // 获取指定参数的值
7
+ const componentId = urlParams.get('componentId');
8
+
9
+ function init() {
10
+ sendMessageToStreamlitClient("componentReady", {msg: "ready"});
11
+ }
12
+
13
+ function sendMessageToStreamlitClient(type, data) {
14
+ var outData = Object.assign({
15
+ componentId:componentId,
16
+ isSSMessage: true,
17
+ _type: type,
18
+ }, data);
19
+ window.parent.postMessage(outData, "*");
20
+ }
21
+
22
+ // The `data` argument can be any JSON-serializable value.
23
+ function sendDataToPython(data) {
24
+ sendMessageToStreamlitClient("setComponentValue", data);
25
+ }
26
+
27
+ // Hook things up!
28
+ //window.addEventListener("message", onDataFromPython);
29
+ init();
30
+
31
+ function setFrameHeight(height) {
32
+ sendMessageToStreamlitClient("setFrameHeight", {height: height});
33
+ }
34
+
35
+ // Hack to autoset the iframe height.
36
+ window.addEventListener("load", function() {
37
+ window.setTimeout(function() {
38
+ setFrameHeight(document.documentElement.clientHeight)
39
+ }, 0);
40
+ });
components/readme.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ Code snippet: create Components without any frontend tooling (no React, Babel, Webpack, etc)
2
+ https://discuss.streamlit.io/t/code-snippet-create-components-without-any-frontend-tooling-no-react-babel-webpack-etc/13064/1
components/test.html ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ <html>
2
+ hello, world
3
+ </html>
media/davide_quatela--breathing_barcelona.mp3 ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ version https://git-lfs.github.com/spec/v1
2
+ oid sha256:ee0eb2f02a7fa8a54cd3f7b263700d16d14b4fd68a4706664c8e1cf975dc6498
3
+ size 3437337
media/image/cat.jpeg ADDED
media/image/dalao.jpeg ADDED
media/image/dog.jpeg ADDED
media/image/owl.jpeg ADDED
media/image/ss_sidebar.png ADDED
media/image/wx_2dcode.jpeg ADDED
media/test.wav ADDED
Binary file (110 kB). View file
 
pages/.DS_Store ADDED
Binary file (8.2 kB). View file
 
pages/002 Form Component/demo_button.py ADDED
@@ -0,0 +1,142 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ### Button
2
+ import streamsync as ss
3
+
4
+
5
+ ss.md('''
6
+ ## ss.button
7
+ ''')
8
+ ss.md('''
9
+ [Online Help](http://www.simplestart.cc)
10
+ ''')
11
+ ss.space()
12
+ ss.md('''
13
+ #### 🔅 Example
14
+ ''')
15
+
16
+ #Custom Function
17
+ def myclick():
18
+ mytext.text = "You clicked "
19
+
20
+ def reset():
21
+ mytext.text = "This is button"
22
+ but1.type = ""
23
+ ss.getcm().components[but1.id]["content"]["options"]["icon"] = ""
24
+ ss.getcm().components[but1.id]["content"]["options"]["endicon"] = ""
25
+ ss.getcm().components[but1.id]["content"]["options"]["icon_color"] = "mediumseagreen"
26
+ ss.getcm().components[but1.id]["content"]["options"]["style"] = "background-color:initial;color:initial"
27
+ ss.session["iconstr"] = ''
28
+ ss.session["style_str"] = ''
29
+ ss.session["style"] = ''
30
+
31
+
32
+ #Basic Usage
33
+ cols = ss.columns([40,"flex:60"], design=True)
34
+ with cols[0]:
35
+ mytext = ss.text("This is button")
36
+ but1 = ss.button("Click it", icon = "mdi-account-circle", onclick=myclick)
37
+
38
+ def onradiochange(event):
39
+ value = event.value
40
+ if value == "default":
41
+ but1.type = ""
42
+ ss.session["buttonstyle"] = ""
43
+ elif value == "outlined":
44
+ but1.type = "outlined"
45
+ ss.session["buttonstyle"] = 'type = "outlined\",'
46
+ elif value == "flat":
47
+ but1.type = "tonal"
48
+ ss.session["buttonstyle"] = 'type = "flat\",'
49
+ elif value == "text":
50
+ but1.type = "text"
51
+ ss.session["buttonstyle"] = 'type = "text\",'
52
+ elif value == "plain":
53
+ but1.type = "plain"
54
+ ss.session["buttonstyle"] = 'type = "plain\",'
55
+
56
+ def oncheckbox_change(state, value):
57
+ if value == True:
58
+ ss.getcm().components[but1.id]["content"]["options"]["icon"] = "aim"
59
+ ss.session["iconstr"] = ' icon="search",'
60
+ else:
61
+ ss.getcm().components[but1.id]["content"]["options"]["icon"] = ""
62
+ ss.session["iconstr"] = ''
63
+ but1.update()
64
+
65
+ def onradiochange2(event):
66
+ index = event.index
67
+
68
+ if index == 0:
69
+ ss.getcm().components[but1.id]["content"]["options"]["icon"] = "mdi-account-circle"
70
+ ss.getcm().components[but1.id]["content"]["options"]["endIcon"] = ""
71
+ ss.session["iconstr"] = ' icon="mdi-account-circle",'
72
+ elif index == 1:
73
+ ss.getcm().components[but1.id]["content"]["options"]["icon"] = ""
74
+ ss.getcm().components[but1.id]["content"]["options"]["endIcon"] = "mdi-alert"
75
+ ss.session["iconstr"] = ' endIcon="mdi-alert",'
76
+ else:
77
+ ss.getcm().components[but1.id]["content"]["options"]["icon"] = ""
78
+ ss.getcm().components[but1.id]["content"]["options"]["endIcon"] = ""
79
+ ss.session["iconstr"] = ''
80
+ but1.update()
81
+
82
+
83
+ def changeColor(bkcolor):
84
+ ss.getcm().components[but1.id]["content"]["options"]["style"] = f"background-color:{bkcolor}; color:white"
85
+ ss.getcm().components[but1.id]["content"]["options"]["icon_color"] = "white"
86
+ ss.session["style_str"] = f'style="background-color:{bkcolor}, color:white"'
87
+ ss.session["style"] = 'style=style,'
88
+ but1.update()
89
+
90
+
91
+ with cols[1]:
92
+ ss.text("Test")
93
+
94
+ ss.write("---")
95
+ ss.radio(["default", "outlined", "flat", "text", "plain"], "default", inline = True, onchange=onradiochange)
96
+
97
+ ss.write("---")
98
+ ss.radio([(1, "Icon(Prepend)"), (2, "Icon(Append)"), (3, "No Icon")], inline = True, onchange=onradiochange2)
99
+
100
+
101
+ ss.write("---")
102
+ ss.button("", type = "flat", size = "small", style="background-color:#409eff", onclick=lambda:changeColor('#409eff'))
103
+ ss.button("", type = "flat", size = "small", style="background-color:#67c23a", onclick=lambda:changeColor('#67c23a'))
104
+ ss.button("", type = "flat", size = "small", style="background-color:#e6a23c", onclick=lambda:changeColor('#e6a23c'))
105
+ ss.button("", type = "flat", size = "small", style="background-color:#f56c6c", onclick=lambda:changeColor('#f56c6c'))
106
+ ss.button("", type = "flat", size = "small", style="background-color:#909399", onclick=lambda:changeColor('#909399'))
107
+
108
+
109
+ ss.space()
110
+ ss.button("Reset", onclick=reset)
111
+
112
+
113
+ ss.space("mt-8")
114
+
115
+ ss.write("#### 🔎 Code")
116
+
117
+ ss.md('''
118
+ ```python
119
+ import simplestart as ss
120
+
121
+ def clickme():
122
+ mytext.text = "You clicked"
123
+
124
+ mytext = ss.text("This is button")
125
+ @style_str
126
+ ss.button("Click it", @buttonstyle @iconstr @style onclick=clickme)
127
+ ```
128
+ ''')
129
+
130
+ ss.md('''
131
+ ::: tip
132
+ Function Call
133
+ ss.button(label, type, color, size, icon, onclick)
134
+ :::
135
+ ''')
136
+
137
+ def onPageLoad():
138
+ ss.session["buttonstyle"] = ""
139
+ ss.session["iconstr"] = ""
140
+ ss.session["style"] = ""
141
+ ss.session["style_str"] = ""
142
+
pages/002 Form Component/demo_checkbox.py ADDED
@@ -0,0 +1,77 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ### Checkbox
2
+ import simplestart as ss
3
+
4
+ ss.write("### ss.checkbox")
5
+
6
+ def onchange(event):
7
+ ss.session["checked_value"] = event.value
8
+
9
+
10
+ ss.md('''
11
+ ---
12
+ #### 🔅 Example 1
13
+ ''')
14
+
15
+ ss.md("onchange: @checked_value")
16
+
17
+ ss.checkbox("checkme", onchange = onchange)
18
+ ss.checkbox("initially checked", checked = True, onchange = onchange)
19
+
20
+
21
+ ss.write('''
22
+ ---
23
+ #### 🔎 Code
24
+ ''')
25
+
26
+ ss.md('''
27
+ ```python
28
+ import simplestart as ss
29
+
30
+ def onchange(state, value):
31
+ state["checked_value"] = value
32
+
33
+ #ui
34
+ ss.md("onchange: @checked_value")
35
+
36
+ ss.checkbox("checkme", onchange = onchange)
37
+ ss.checkbox("initially checked", checked = True, onchange = onchange)
38
+
39
+
40
+ ''')
41
+
42
+ ss.space()
43
+ ss.md('''
44
+ ---
45
+ #### 🔅 Example 2
46
+ Get the status of the checkbox
47
+ ''')
48
+
49
+ mycheck = ss.checkbox("check me", onchange = onchange)
50
+
51
+ def myclick():
52
+ ss.message(mycheck.value)
53
+
54
+ ss.button("Get Status", onclick = myclick)
55
+
56
+ ss.space()
57
+ ss.write('''
58
+ ---
59
+ #### 🔎 Code
60
+ ''')
61
+
62
+
63
+ ss.md('''
64
+ ```python
65
+ import simplestart as ss
66
+
67
+ mycheck = ss.checkbox("check me", onchange = onchange)
68
+
69
+ def myclick():
70
+ ss.message(mycheck.value)
71
+
72
+ ss.button("获取状态", onclick = myclick)
73
+
74
+ ''')
75
+
76
+ def onPageLoad():
77
+ ss.session["checked_value"] = ""
pages/002 Form Component/demo_dialog.py ADDED
@@ -0,0 +1,78 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ### Dialog
2
+ import simplestart as ss
3
+
4
+ ss.md("## ss.dialog")
5
+
6
+ ss.space()
7
+
8
+ ss.md('''
9
+ ---
10
+ #### 🔅 Example
11
+ ''')
12
+
13
+ def testme():
14
+ ss.message("testme")
15
+
16
+ def showit():
17
+ if ss.session["str_fullscreen"] != "":
18
+ dialog.show(fullscreen = True)
19
+ else:
20
+ dialog.show()
21
+
22
+ def myclose(event):
23
+ ss.message("dialog close with result " + event.value)
24
+
25
+ dialog = ss.dialog("Dialog Title", onclose=myclose)
26
+ with dialog:
27
+ ss.text("SimpleStart dialog demostration")
28
+ ss.md("---")
29
+ ss.button("testme", onclick=testme)
30
+ ss.md(":smile:")
31
+
32
+ cols = ss.columns([60,"flex:40; border-left:1px solid lightgray"], border=True, style="border:1px solid lightgray")
33
+ with cols[0]:
34
+ mytext = ss.text("This is dialog")
35
+ ss.button("show dialog", onclick=showit)
36
+
37
+ def mycheck(event):
38
+ if event.value == True:
39
+ ss.session["str_fullscreen"] = "fullscreen = True"
40
+ #dialog.show(fullscreen = True)
41
+ else:
42
+ ss.session["str_fullscreen"] = ""
43
+
44
+ with cols[1]:
45
+ ss.text("Dialog Options")
46
+ ss.checkbox("Fullscreen", onchange=mycheck)
47
+
48
+ ss.space()
49
+ ss.write('''
50
+ ---
51
+ #### 🔎 Code
52
+ ''')
53
+
54
+ ss.md('''
55
+ ```python
56
+ import simplestart as ss
57
+
58
+ def myclose(event):
59
+ ss.message("dialog close with result " + event.value)
60
+
61
+ dialog = ss.dialog(title="Dialog Title", onclose=myclose)
62
+ with dialog:
63
+ ss.text("Opening from the bottom")
64
+ ss.md("---")
65
+ ss.button("testme", onclick=testme)
66
+ ss.md(":smile:")
67
+
68
+ def showit():
69
+ dialog.show(@str_fullscreen)
70
+
71
+ ss.button("show dialog", onclick=showit)
72
+ ```
73
+ ''')
74
+
75
+ def onPageEnter():
76
+ ss.session["str_fullscreen"] = ""
77
+
78
+
pages/002 Form Component/demo_expander.py ADDED
@@ -0,0 +1,29 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ### Expander
2
+ import streamsync as ss
3
+
4
+ ss.md("## ss.expander")
5
+
6
+ ss.md('''
7
+ #### 🔅 Example
8
+ ''')
9
+
10
+ with ss.expander("About SimpleStart", expanded=True):
11
+ ss.text("Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! \
12
+ Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!", style="padding:10px")
13
+
14
+ ss.space()
15
+ ss.write('''
16
+ ---
17
+ #### 🔎 Code
18
+ ''')
19
+
20
+ ss.md('''
21
+ ```python
22
+ import simplestart as ss
23
+
24
+ with ss.expander("About SimpleStart"):
25
+ ss.text("Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! \
26
+ Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!")
27
+
28
+ ```
29
+ ''')
pages/002 Form Component/demo_radio.py ADDED
@@ -0,0 +1,94 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ### Radio
2
+ import simplestart as ss
3
+
4
+ ss.md("## ss.radio")
5
+
6
+ ss.space()
7
+
8
+ ss.md('''
9
+ #### 🔅 Example
10
+ ''')
11
+
12
+ def onchange(event):
13
+ ss.session["options_value"] = event.value
14
+ ss.session["options_index"] = event.index
15
+
16
+ ss.md("onchange: value:@options_value, index:@options_index")
17
+
18
+ options = ["Option 1", "Option 2", "Option 3"]
19
+ myradio = ss.radio(options, label = "### my radio1", index = 0, onchange = onchange)
20
+
21
+
22
+ options = [("C++", '#### <span style="color:blue">C++</span>'),
23
+ ("Javascript", '#### <span style="color:green">Javascript</span>'),
24
+ ("Python", '#### <span style="color:red">Python</span>')
25
+ ]
26
+ ss.radio(options, inline = True, label = "### my radio2", index = 0, iconColor = "blue", onchange = onchange)
27
+
28
+
29
+
30
+ ss.write("---")
31
+ ss.write("#### 🔎 Code")
32
+
33
+ ss.md('''
34
+ ```python
35
+ import simplestart as ss
36
+
37
+ def onchange(event):
38
+ ss.session["options_value"] = event.value
39
+ ss.session["options_index"] = event.index
40
+
41
+ ss.md("onchange: value:\@options_value, index:\@options_index")
42
+
43
+ options = ["Option 1", "Option 2", "Option 3"]
44
+ myradio = ss.radio(options, label = "### my radio1", index = 0, onchange = onchange)
45
+
46
+
47
+ options = [("C++", '#### <span style="color:blue">C++</span>'),
48
+ ("Javascript", '#### <span style="color:green">Javascript</span>'),
49
+ ("Python", '#### <span style="color:red">Python</span>')
50
+ ]
51
+ ss.radio(options, inline = True, label = "### my radio2", index = 0, iconColor = "blue", onchange = onchange)
52
+
53
+ def onPageLoad():
54
+ ss.session["options_value"] = ""
55
+
56
+ ''')
57
+
58
+
59
+ ss.space()
60
+ ss.md('''
61
+ ---
62
+ #### 🔅 Example - Get State Value
63
+ ''')
64
+
65
+ def myclick1():
66
+ ss.message(myradio.value)
67
+
68
+ ss.button("Get State Value", onclick=myclick1)
69
+
70
+ def myclick2():
71
+ ss.message(myradio.index)
72
+
73
+ ss.button("Get State Index", onclick=myclick2)
74
+
75
+ ss.write("---")
76
+ ss.write("#### 🔎 Code Snippet")
77
+
78
+ ss.md('''
79
+ ```python
80
+ #...
81
+ def myclick1():
82
+ ss.message(myradio.value)
83
+
84
+ ss.button("Get State Value", onclick=myclick1)
85
+
86
+ def myclick2():
87
+ ss.message(myradio.index)
88
+
89
+ ss.button("Get State Index", onclick=myclick2)
90
+ ''')
91
+
92
+
93
+ def onPageLoad():
94
+ ss.session["options_value"] = ""
pages/002 Form Component/demo_selectbox.py ADDED
@@ -0,0 +1,78 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ### Selectbox
2
+ import simplestart as ss
3
+
4
+ ss.md("## ss.selectbox")
5
+
6
+ ss.space()
7
+ ss.md('''
8
+ #### 🔅 Example 1
9
+ Create a selectbox with a title and 3 options on the page.
10
+ ''')
11
+ ss.space()
12
+
13
+ options = ["option1","option2", "option3"]
14
+
15
+ def selchange(event):
16
+ ss.message(f"You select {event.value}, index of {event.index}")
17
+
18
+ select1 = ss.selectbox(options, index=0, title = "### Please select", onchange = selchange)
19
+
20
+
21
+
22
+ ss.write("#### 🔎 Code")
23
+
24
+ ss.md("""
25
+ ```python
26
+ import simplestart as ss
27
+
28
+ options = ["option1","option2", "option3"]
29
+
30
+ def selchange(event):
31
+ ss.session["select_value"] = event.value
32
+ ss.session["select_index"] = select1.index
33
+
34
+ ss.write("info value: index:")
35
+ select1 = ss.selectbox(options, value="option1", onchange = selchange)
36
+
37
+
38
+ ```
39
+ """)
40
+
41
+ ss.md('''
42
+ #### 🔅 Example 2
43
+ 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.
44
+ ''')
45
+ ss.space()
46
+
47
+ def onclick1():
48
+ ss.message(select1.value)
49
+
50
+ ss.button("Current Option Value", onclick=onclick1)
51
+
52
+ def onclick2():
53
+ ss.message(select1.index)
54
+
55
+ ss.button("Current Option Index", onclick=onclick2)
56
+
57
+ ss.space()
58
+
59
+ ss.write("#### 🔎 Code Snippet")
60
+
61
+
62
+ ss.md("""
63
+ ```python
64
+
65
+ #...
66
+
67
+ def onclick1():
68
+ ss.message(select1.value)
69
+
70
+ ss.button("Current Option Value", onclick = onclick1)
71
+
72
+ def onclick2():
73
+ ss.message(select1.index)
74
+
75
+ ss.button("Current Option Index", onclick = onclick2)
76
+
77
+ ```
78
+ """)
pages/002 Form Component/demo_slider.py ADDED
@@ -0,0 +1,35 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ### Slider
2
+ import simplestart as ss
3
+
4
+ ss.md("## ss.slider")
5
+
6
+ ss.space()
7
+
8
+ ss.md('''
9
+ #### 🔅 Example
10
+ ''')
11
+
12
+ ss.md("### Please drag the slider to change the value")
13
+
14
+ info = ss.text("number")
15
+
16
+ def onchange(event):
17
+ info.text = event.value
18
+
19
+ ss.slider("<b>my slider</b>", value=500, min=0, max=1000, onchange=onchange, style="width:50%")
20
+
21
+ ss.space()
22
+
23
+ ss.write("#### 🔎 Code")
24
+
25
+ ss.md('''
26
+ ```python
27
+ import simplestart as ss
28
+
29
+ info = ss.text("number")
30
+
31
+ def onchange(state, value):
32
+ info.text = value
33
+
34
+ ss.slider(500, 0, 1000, onchange=onchange)
35
+ ''')
pages/002 Form Component/demo_textarea.py ADDED
@@ -0,0 +1,45 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ### Textarea
2
+ import streamsync as ss
3
+
4
+ ss.md("## ss.textarea")
5
+
6
+ ss.space()
7
+ ss.md("#### 🔅 Example")
8
+
9
+ ss.md("---")
10
+
11
+ # Basic usage
12
+ # test = ss.text_input("hello, world", type="textarea")
13
+ mytext = ss.textarea("hello, world")
14
+
15
+ ss.write("---")
16
+ ss.write("#### 🔎 Code")
17
+
18
+ ss.md('''
19
+ ```python
20
+ import simplestart as ss
21
+
22
+ mytext = ss.textarea("hello, world")
23
+
24
+ ''')
25
+
26
+ ss.space()
27
+ ss.md("#### 🔅 Get the text value of the textarea")
28
+ ss.md("---")
29
+
30
+ def myclick():
31
+ ss.message(mytext.value)
32
+
33
+ ss.button("Get Text", onclick=myclick)
34
+
35
+ ss.write("---")
36
+ ss.write("#### 🔎 Code Snippet")
37
+
38
+ ss.md('''
39
+ ```python
40
+ #...
41
+ def myclick():
42
+ ss.message(mytext.value)
43
+
44
+ ss.button("Get Text", onclick=myclick)
45
+ ''')
pages/002 Form Component/demo_textinput.py ADDED
@@ -0,0 +1,65 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ### Text_input
2
+ import streamsync as ss
3
+
4
+
5
+ ss.md("## ss.text_input")
6
+
7
+ ss.space()
8
+ ss.md("#### 🔅 Example")
9
+
10
+ ss.md("---")
11
+ ss.space()
12
+
13
+ def onchange(state, value):
14
+ ss.message(f"onchange, {value}")
15
+
16
+ def onclear(state, value):
17
+ ss.message("onclear event happend")
18
+
19
+ def onblur(state, value):
20
+ print("onblur")
21
+ ss.message(f"onblur, {value}")
22
+
23
+ def testme():
24
+ ss.message(myinput.value)
25
+
26
+ #ui
27
+ cols = ss.columns([50,50], border = True)
28
+ with cols[0]:
29
+ myinput = ss.text_input("Hello SimpleStart", clearable=True)
30
+
31
+
32
+ def myevent(event):
33
+ if event.tag == "sel1":
34
+ myinput.variant = event.value
35
+ elif event.tag == "sel2":
36
+ myinput.type = event.value
37
+ elif event.tag == "but1":
38
+ ss.message(myinput.value)
39
+
40
+
41
+ with cols[1]:
42
+ ss.selectbox(["filled","outlined","underlined", "solo", "solo-filled", "solo-inverted"], label='#### <span style = "color:green">Change the input style</span>', \
43
+ value="solo", onchange = myevent, eventTag="sel1")
44
+
45
+ ss.selectbox(["text","time", "date", "week", "month", "password", "color"], label='#### <span style = "color:green">Change the input type</span>', \
46
+ onchange = myevent, eventTag="sel2")
47
+
48
+ ss.write('#### <span style="color:green">Get Input Value</span>')
49
+ ss.button("Get Text Value", onclick=myevent, eventTag="but1")
50
+
51
+
52
+
53
+ ss.write("---")
54
+ ss.write("#### 🔎 Code")
55
+
56
+ ss.md('''
57
+ ```python
58
+ import simplestart as ss
59
+
60
+ myinput = ss.text_input("Hello SimpleStart", clearable=True)
61
+
62
+ #Or
63
+ #ss.text_input("hello", type="text", variant = "filled")
64
+
65
+ ''')
pages/002 Form Component/demo_upload.py ADDED
@@ -0,0 +1,40 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ### File Upload
2
+ import streamsync as ss
3
+ import pandas as pd
4
+
5
+ ss.md("## ss.upload File Upload")
6
+
7
+
8
+ ss.space()
9
+ ss.md("#### 🔅 Example - Upload Image")
10
+ ss.space()
11
+
12
+
13
+ def onsucess(event):
14
+ filename = event.value
15
+ path = f'{ss.baseinfo["package_path"]}/uploads/{filename}'
16
+ myimage.image = path
17
+
18
+ ss.upload("Upload Image ...", accept="image/png, image/jpeg, image/bmp", icon="mdi-camera", onsucess = onsucess)
19
+
20
+ myimage = ss.image()
21
+
22
+ ss.space()
23
+ ss.write("---")
24
+ ss.write("#### 🔎 Code")
25
+
26
+ ss.md('''
27
+ ```python
28
+ import simplestart as ss
29
+
30
+ def onsucess(event):
31
+ filename = event.value
32
+ path = f'{ss.baseinfo["package_path"]}/uploads/{filename}'
33
+
34
+ myimage.image = path
35
+
36
+ ss.upload(label = "Upload Image ...", accept="image/png, image/jpeg, image/bmp", icon="mdi-camera", onsucess = onsucess)
37
+
38
+ myimage = ss.image()
39
+
40
+ ''')
pages/003 Content Display/demo_audio.py ADDED
@@ -0,0 +1,39 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ### Audio Playback
2
+ import streamsync as ss
3
+
4
+ ss.md("## ss.audio")
5
+
6
+
7
+ ss.space()
8
+ ss.md('''
9
+ #### 🔅 Example
10
+ ''')
11
+
12
+ ss.space()
13
+
14
+ audiosrc = "media/test.wav"
15
+ player = ss.audio(audiosrc)
16
+
17
+
18
+ ss.space("mt-8")
19
+
20
+ ss.write('''
21
+ ---
22
+ #### 🔎 Code
23
+ ''')
24
+
25
+ ss.md('''
26
+ ```python
27
+ import simplestart as ss
28
+
29
+ audiosrc = "media/davide_quatela--breathing_barcelona.mp3"
30
+ player = ss.audio(audiosrc)
31
+ ```
32
+ ''')
33
+
34
+
35
+ ss.md('''
36
+ ::: tip
37
+ ss.audio supports audio formats including wav, mp3, etc.
38
+ :::
39
+ ''')
pages/003 Content Display/demo_html.py ADDED
@@ -0,0 +1,49 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ### Html Hypertext
2
+ import streamsync as ss
3
+
4
+
5
+ ss.md("## ss.html")
6
+
7
+ ss.space("")
8
+
9
+ ss.md('''
10
+ #### 🔅 Example
11
+ ''')
12
+
13
+
14
+ ss.md("### html")
15
+
16
+ ss.html(f"""
17
+ <p>This is a piece of rich text content, which contains <strong>bold</strong> and <em>italic</em> text.</p>
18
+ <style>
19
+ .testclass{{
20
+ color:red;
21
+ font-weight:bold;
22
+ }}
23
+ </style>
24
+ <div class="testclass">this is red</div>
25
+ """)
26
+
27
+ ss.space("mt-8")
28
+
29
+ ss.write('''
30
+ ---
31
+ #### 🔎 Code
32
+ ''')
33
+
34
+ ss.md('''
35
+ ```python
36
+ import simplestart as ss
37
+
38
+ ss.html(f"""
39
+ <p>This is a piece of rich text content, which contains <strong>bold</strong> and <em>italic</em> text.</p>
40
+ <style>
41
+ .testclass{{
42
+ color:red;
43
+ font-weight:bold;
44
+ }}
45
+ </style>
46
+ <div class="testclass">this is red</div>
47
+ """)
48
+ ```
49
+ ''')
pages/003 Content Display/demo_image.py ADDED
@@ -0,0 +1,92 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ### Image
2
+ import simplestart as ss
3
+
4
+ import cv2
5
+ from PIL import Image
6
+ import os
7
+
8
+ ss.md("## ss.image")
9
+
10
+ ss.md('''
11
+ #### 🔅 Example
12
+ ''')
13
+
14
+ ss.space()
15
+
16
+ style = "width:200px;height:200px;margin:10px"
17
+ img = "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
18
+
19
+ cols = ss.columns([60,"flex:40"], border=True)
20
+ with cols[0]:
21
+ mytext = ss.text("This is image")
22
+ ss.space()
23
+ myimg = ss.image(img, style=style, fit="contain")
24
+ ss.text("Image fit mode: fill")
25
+
26
+ def onradiochange(event):
27
+ #ss.message(event.value)
28
+ ss.session["fit_str"] = event.value
29
+ ss.getcm().components[myimg.id]["content"]["options"]["fit"] = event.value
30
+ myimg.update()
31
+
32
+ def onradiochange2(event):
33
+ value = event.value
34
+ index = event.index
35
+
36
+
37
+ source = ["Http", "PIL", "OpenCV", "Local"]
38
+ ss.session["source_str"] = source[index]
39
+
40
+
41
+ if index == 0:
42
+ img = "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
43
+ ss.session["image_path"] = "\"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\""
44
+ myimg.image = img
45
+ if index == 1:
46
+ image = Image.open('./media/image/dalao.jpeg')
47
+ ss.session["image_path"] = "Image.open('./media/image/dalao.jpeg')"
48
+ myimg.image = image
49
+ if index == 2:
50
+ img = cv2.imread('./media/image/cat.jpeg',cv2.IMREAD_COLOR)
51
+ ss.session["image_path"] = "cv2.imread('./media/image/cat.jpeg',cv2.IMREAD_COLOR)"
52
+ myimg.image = img
53
+ if index == 3:
54
+ file_path = './media/image/dog.jpeg'
55
+ ss.session["image_path"] = "'./media/image/dog.jpeg'"
56
+ myimg.image = file_path
57
+
58
+ myimg.update()
59
+
60
+
61
+ with cols[1]:
62
+ ss.text("image fit mode")
63
+ ss.radio(["fill", "contain", "cover", "none", "scale-down"], index = 1, inline = True, onchange=onradiochange)
64
+ ss.space()
65
+ ss.text("image source")
66
+ ss.radio(["Http image","PIL image", "OpenCV image", "Local image"], index = 0, inline = True, onchange=onradiochange2)
67
+
68
+ ss.space()
69
+
70
+ ss.write('''
71
+ #### 🔎 Code
72
+ ''')
73
+
74
+ ss.md('''
75
+ ```python
76
+ import simplestart as ss
77
+ import cv2
78
+ from PIL import Image
79
+
80
+ style = "width:100px; height:100px; margin:10px"
81
+ img = "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
82
+ ss.image(img, style=style, fit="fill")
83
+ ```
84
+ ''')
85
+
86
+
87
+
88
+ def onPageLoad():
89
+ ss.session["info"] = "x"
90
+ ss.session["fit_str"] = "fill"
91
+ ss.session["source_str"] = "Http"
92
+ ss.session["image_path"] = "\"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\""
pages/003 Content Display/demo_markdown.py ADDED
@@ -0,0 +1,57 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ### Markdown
2
+ import simplestart as ss
3
+
4
+ ss.md("## ss.markdown")
5
+
6
+ ss.space()
7
+
8
+ ss.md('''
9
+ #### 🔅 Example
10
+ ''')
11
+
12
+ ss.space()
13
+
14
+ ss.markdown("- 19^th^")
15
+ ss.markdown("# Heading 1")
16
+ ss.markdown("## Heading 2")
17
+ ss.markdown("### Heading 3")
18
+
19
+ #Horizontal Divider
20
+ ss.markdown("---")
21
+
22
+ ss.markdown('''
23
+ - list item1
24
+ - list item2
25
+ - list item3
26
+ ''')
27
+
28
+ ss.markdown(":smile:")
29
+
30
+
31
+
32
+ ss.space("mt-8")
33
+
34
+ ss.write('''
35
+ ---
36
+ #### 🔎 Code
37
+ ''')
38
+
39
+ ss.md('''
40
+ ```python
41
+ import simplestart as ss
42
+
43
+ ss.markdown("# Heading 1")
44
+ ss.markdown("## Heading 2")
45
+ ss.markdown("### Heading 3")
46
+
47
+ #Horizontal Divider
48
+ ss.markdown("---")
49
+
50
+ ss.markdown(\'''
51
+ - list item1
52
+ - list item2
53
+ - list item3
54
+ \''')
55
+
56
+ ```
57
+ ''')
pages/003 Content Display/demo_message.py ADDED
@@ -0,0 +1,37 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ### Message
2
+ import simplestart as ss
3
+
4
+ ss.md("## ss.message Popup Message")
5
+
6
+ ss.space()
7
+
8
+
9
+ ss.md('''
10
+ #### 🔅 Example
11
+ ''')
12
+ ss.space()
13
+
14
+
15
+ def showmsg():
16
+ ss.message("Hello, world")
17
+
18
+ showmsg()
19
+ ss.button("message", onclick=showmsg)
20
+
21
+
22
+ ss.space("mt-8")
23
+
24
+ ss.write('''
25
+ ---
26
+ #### 🔎 Code
27
+ ''')
28
+
29
+ ss.md('''
30
+ ```python
31
+ import simplestart as ss
32
+
33
+ def showmsg():
34
+ ss.message("Hello, the world")
35
+
36
+ ```
37
+ ''')
pages/003 Content Display/demo_sqlite.py ADDED
@@ -0,0 +1,39 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ### Sqlite Database
2
+ import simplestart as ss
3
+
4
+ ss.md("## ss.sqlite Database")
5
+
6
+ ss.space()
7
+ ss.md('''
8
+ Provides simple operations for the SQLite database.
9
+ ''')
10
+
11
+ ss.space()
12
+ ss.md('''
13
+ #### 🔅 Example
14
+ ''')
15
+
16
+ ss.md('''
17
+ ::: tip
18
+ This example reads the Iris dataset from the SQLite database and displays it in a CSV table format.
19
+ For SQLite management, simplestart offers a built-in tool for simple create, read, update, and delete operations.
20
+ :::
21
+ ''')
22
+
23
+ sql = ss.sqlite("./data/ss_data.db")
24
+ df = sql.pd_query("select * from iris")
25
+
26
+ mytable = ss.table(df, editable = True)###, handlers={"current-change":current_change, "selection-change":selection_change})
27
+
28
+ ss.space()
29
+ ss.write("#### Code")
30
+
31
+ ss.md('''
32
+ ```python
33
+ import simplestart as ss
34
+
35
+ sql = ss.sqlite("./data/ss_data.db")
36
+ data = sql.pd_query("select * from HousingData")
37
+ ss.write(data)
38
+ ```
39
+ ''')
pages/003 Content Display/demo_table.py ADDED
@@ -0,0 +1,249 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ### Table
2
+ import simplestart as ss
3
+ import pandas as pd
4
+
5
+ ss.md("## ss.table Table Data")
6
+
7
+ ss.md("Display data in table format.")
8
+
9
+ ss.space()
10
+
11
+ ss.md('''
12
+ #### 🔅 Example
13
+ ''')
14
+
15
+ def onchange_index(event):
16
+ value = event.value
17
+
18
+ if value == True:
19
+ ss.getcm().components[mytable.id]["content"]["index"] = True
20
+ ss.session["showIndex"] = ', index = True'
21
+ else:
22
+ ss.getcm().components[mytable.id]["content"]["index"] = False
23
+ ss.session["showIndex"] = ''
24
+ mytable.update()
25
+
26
+ def onchange_border(event):
27
+ value = event.value
28
+
29
+ if value == True:
30
+ ss.getcm().components[mytable.id]["content"]["border"] = True
31
+ ss.session["showBorder"] = ', border = True'
32
+ else:
33
+ ss.getcm().components[mytable.id]["content"]["border"] = False
34
+ ss.session["showBorder"] = ''
35
+ mytable.update()
36
+
37
+
38
+ def onchange_sortable(event):
39
+ value = event.value
40
+
41
+ if value == True:
42
+ ss.getcm().components[mytable.id]["content"]["sortable"] = True
43
+ ss.session["sortable"] = ', sortable = True'
44
+ else:
45
+ ss.getcm().components[mytable.id]["content"]["sortable"] = False
46
+ ss.session["sortable"] = ''
47
+ mytable.update()
48
+
49
+ def onchange_searchable(event):
50
+ value = event.value
51
+
52
+ if value == True:
53
+ ss.getcm().components[mytable.id]["content"]["searchable"] = True
54
+ ss.session["searchable"] = ', searchable = True'
55
+ else:
56
+ ss.getcm().components[mytable.id]["content"]["searchable"] = False
57
+ ss.session["searchable"] = ''
58
+ mytable.update()
59
+
60
+
61
+ def onchange_selectable(event):
62
+ value = event.value
63
+
64
+ if value == True:
65
+ ss.getcm().components[mytable.id]["content"]["selectable"] = True
66
+ ss.session["selectable"] = ', selectable = True'
67
+ else:
68
+ ss.getcm().components[mytable.id]["content"]["selectable"] = False
69
+ ss.session["selectable"] = ''
70
+ mytable.update()
71
+
72
+ def onchange_editable(event):
73
+ value = event.value
74
+
75
+ if value == True:
76
+ ss.getcm().components[mytable.id]["content"]["editable"] = True
77
+ ss.session["editable"] = ', editable = True'
78
+ else:
79
+ ss.getcm().components[mytable.id]["content"]["editable"] = False
80
+ ss.session["editable"] = ''
81
+ mytable.update()
82
+
83
+
84
+ def current_change(state, value):
85
+ ss.session["row_selected"] = value["index"]
86
+
87
+ def selection_change(state, value):
88
+ ss.session["selection_change"] = value["selected"]
89
+
90
+
91
+ # Create a dataset with three columns
92
+ data = {'name': ['👧🏻 Alice', '👦🏻 Bob', '👦🏻 Charlie'],
93
+ 'age': [25, 30, 35],
94
+ 'city': ['New York', 'San Francisco', 'Los Angeles'],
95
+ 'health':[90,80,90]
96
+ }
97
+
98
+ df = pd.DataFrame(data)
99
+
100
+ def rowclicked(event):
101
+ #ss.message("row clicked")
102
+ #ss.write("event", event)
103
+ ss.session["itemname"] = event.value["name"]
104
+
105
+
106
+ cols = ss.columns([70,"flex:30; border-left:1px solid lightgray"], design=True, style="border:1px solid lightgray")
107
+ with cols[0]:
108
+ mytable = ss.table(df, handlers={"click:row": rowclicked})
109
+ ss.md("#### Events")
110
+ ss.write("Row clicked: @itemname")
111
+
112
+
113
+ with cols[1]:
114
+ ss.text("setting")
115
+ ss.checkbox("Index", onchange = onchange_index)
116
+ ss.space()
117
+ ss.checkbox("Border", onchange = onchange_border)
118
+ ss.space()
119
+ ss.checkbox("Sort", onchange = onchange_sortable)
120
+ ss.space()
121
+ ss.checkbox("Select", onchange = onchange_selectable)
122
+ ss.space()
123
+ ss.checkbox("Search", onchange = onchange_searchable)
124
+ ss.space()
125
+ ss.checkbox("Edit", onchange = onchange_editable)
126
+
127
+ ss.space("mt-8")
128
+
129
+ ss.write('''
130
+ ---
131
+ #### 🔎 Code
132
+ ''')
133
+
134
+ ss.md('''
135
+ ```python
136
+ import simplestart as ss
137
+
138
+ def current_change(state, value):
139
+ ss.session["row_selected"] = value["index"]
140
+
141
+ def selection_change(state, value):
142
+ ss.session["selection_change"] = value["selected"]
143
+
144
+ data = {'name': ['Alice', 'Bob', 'Charlie'],
145
+ 'age': [25, 30, 35],
146
+ 'city': ['New York', 'San Francisco', 'Los Angeles']}
147
+ df = pd.DataFrame(data)
148
+
149
+ ss.table(df, handlers={\"current-change\":current_change, \"selection-change\":selection_change})
150
+ ss.md(\"#### Events\")
151
+ ss.write(\"Row selected: \")
152
+ ss.write(\"Selection changed: \")
153
+
154
+ def onPageLoad():
155
+ ss.session["row_selected"] = ''
156
+ ss.session["selection_change"] = ''
157
+
158
+ ```
159
+ ''')
160
+
161
+
162
+ ss.md('''
163
+ ---
164
+ #### 🔅 Example - Custom column.
165
+ ''')
166
+
167
+
168
+ data = {'name': ['👧🏻 Alice', '👦🏻 Bob', '👦🏻 Charlie'],
169
+ 'age': [25, 30, 35],
170
+ 'city': [':sunny: New York', ':cloud: San Francisco', ':sunny: Los Angeles'],
171
+ 'health':[90,80,90]
172
+ }
173
+
174
+ df = pd.DataFrame(data)
175
+
176
+ cols = ss.columns([70,"flex:30; border-left:1px solid lightgray"], design=True, style="border:1px solid lightgray")
177
+
178
+
179
+ vuecode = '''
180
+ <template>
181
+ <v-clip>123</v-clip>
182
+ </template>
183
+ '''
184
+
185
+ vuecode = "../components/mycell.vue"
186
+
187
+ #mytable_ex = ss.table(df, custom_columns = ["city"], custom_columns_template = vuestr)
188
+ with cols[0]:
189
+ mytable_ex = ss.table(df, custom_columns = ["city"], vue_columns = ["health"], vue_code = vuecode)
190
+ with cols[1]:
191
+ ss.write("Each column can be customized for display.")
192
+
193
+ ss.space("mt-8")
194
+
195
+ ss.write('''
196
+ ---
197
+ #### 🔎 代码
198
+ ''')
199
+
200
+ ss.md('''
201
+ ```python
202
+ import simplestart as ss
203
+
204
+ data = {'name': ['👧🏻 Alice', '👦🏻 Bob', '👦🏻 Charlie'],
205
+ 'age': [25, 30, 35],
206
+ 'city': [':sunny: New York', ':cloud: San Francisco', ':sunny: Los Angeles'],
207
+ 'health':[90,80,90]
208
+ }
209
+ df = pd.DataFrame(data)
210
+
211
+ vuestr = \'''
212
+ <template>
213
+ <v-row>
214
+ <v-rating
215
+ v-model="rating" density="compact" color="orange" half-increments></v-rating>
216
+ <v-chip variant="text">{{item.value}}</v-chip>
217
+ </v-row>
218
+ </template>
219
+
220
+ <script>
221
+
222
+ module.exports = {
223
+ props:["item"],
224
+
225
+ data () {
226
+ return {
227
+ rating: 3
228
+ }
229
+ },
230
+ methods: {
231
+ //todo
232
+ },
233
+ mounted: function () {
234
+ this.rating = this.item.value/20
235
+ },
236
+ }
237
+ </script>
238
+ \'''
239
+
240
+ ss.table(df, custom_columns = ["city"], vue_columns = ["health"], vue_code = vuecode)
241
+ ```
242
+ ''')
243
+
244
+ def onPageLoad():
245
+ ss.session["show_border"] = ''
246
+ ss.session["selectable"] = ''
247
+ ss.session["sortable"] = ''
248
+ ss.session["row_selected"] = ''
249
+ ss.session["selection_change"] = ''
pages/003 Content Display/demo_text.py ADDED
@@ -0,0 +1,35 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ### Text
2
+ import streamsync as ss
3
+
4
+ ss.md("## ss.text Text")
5
+ ss.md("Supports the style parameter.")
6
+
7
+
8
+ ss.space()
9
+ ss.space()
10
+ ss.md('''
11
+ #### 🔅 Example
12
+ ''')
13
+
14
+ ss.md("---")
15
+
16
+ #Basic usage
17
+ test = ss.text("hello, world")
18
+
19
+ #Change color
20
+ ss.text("This is a red string", style="color:red")
21
+
22
+ ss.space()
23
+ ss.write("#### 🔎 Code")
24
+
25
+ ss.md('''
26
+ ```python
27
+ import simplestart as ss
28
+
29
+ #Basic usage
30
+ test = ss.text("hello, world")
31
+
32
+ #Change color
33
+ ss.text("This is a red string", style="color:red")
34
+ ```
35
+ ''')
pages/003 Content Display/demo_video.py ADDED
@@ -0,0 +1,36 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ### Video Playback
2
+ import streamsync as ss
3
+
4
+ ss.md("## ss.video Video Playback")
5
+
6
+ ss.md("Supports playing videos in formats like mp4.")
7
+
8
+ ss.md('''
9
+ #### 🔅 Example
10
+ ''')
11
+
12
+ src = "https://media.w3.org/2010/05/sintel/trailer.mp4"
13
+
14
+ player = ss.video(src, style="width:50%")
15
+
16
+ ss.text("Source: https://media.w3.org/2010/05/sintel/trailer.mp4", style="color:gray")
17
+
18
+ ss.space("mt-8")
19
+
20
+ ss.write('''
21
+ ---
22
+ #### 🔎 Code
23
+ ''')
24
+
25
+ ss.md('''
26
+ ```python
27
+ import simplestart as ss
28
+
29
+ src = "https://media.w3.org/2010/05/sintel/trailer.mp4"
30
+
31
+ player = ss.video(src, style="width:100%; max-width:640px")
32
+
33
+ #Change video source
34
+ #player.src = "..."
35
+ ```
36
+ ''')
pages/003 Content Display/demo_write.py ADDED
@@ -0,0 +1,78 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ### Write
2
+
3
+ import streamsync as ss
4
+ import pandas as pd
5
+
6
+ ss.md("## ss.write Output Data")
7
+
8
+ ss.md("ss.write is similar to print; it can output text, lists, and other types, making testing and output easy.")
9
+
10
+ ss.space()
11
+
12
+ ss.md('''
13
+ #### 🔅 Example
14
+ ''')
15
+
16
+
17
+ ss.md("#### 1. Output Text")
18
+ ss.write("This is a text")
19
+
20
+ ss.md('''
21
+ ```python
22
+ ss.write("This is a text")
23
+ ```
24
+ ''')
25
+
26
+ ss.md("#### 2. Output Multiple Variables")
27
+ a = "aaa"
28
+ b = "bbb"
29
+ ss.write(a, ",", b)
30
+
31
+ ss.md('''
32
+ ```python
33
+ a = "aaa"
34
+ b = "bbb"
35
+ ss.write(a, ",", b)
36
+ ```
37
+ ''')
38
+
39
+ ss.md("#### 3. Output List")
40
+ data = ["aaa", "bbb", "ccc"]
41
+ ss.write(data)
42
+
43
+ data = {"aaa":1, "bbb":2, "ccc":3}
44
+ ss.write(data)
45
+
46
+ ss.md('''
47
+ ```python
48
+ data = ["aaa", "bbb", "ccc"]
49
+ ss.write(data)
50
+
51
+ data = {"aaa":1, "bbb":2, "ccc":3}
52
+ ss.write(data)
53
+ ```
54
+ ''')
55
+
56
+
57
+ ss.md("#### 4. Output Table")
58
+ # 创建数据
59
+ data = {'name': ['Alice', 'Bob', 'Charlie', 'David'],
60
+ 'age': [25, 30, 35, 40],
61
+ 'city': ['New York', 'Paris', 'London', 'Sydney']}
62
+
63
+ # Convert data to DataFrame format
64
+ df = pd.DataFrame(data)
65
+ ss.write(df)
66
+
67
+ ss.md('''
68
+ ```python
69
+ # Create data
70
+ data = {'name': ['Alice', 'Bob', 'Charlie', 'David'],
71
+ 'age': [25, 30, 35, 40],
72
+ 'city': ['New York', 'Paris', 'London', 'Sydney']}
73
+
74
+ # Convert data to DataFrame format
75
+ df = pd.DataFrame(data)
76
+ ss.write(df)
77
+ ```
78
+ ''')
pages/004 Chart Data/demo_bokeh.py ADDED
@@ -0,0 +1,128 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import simplestart as ss
2
+
3
+ from bokeh.plotting import figure
4
+ from bokeh.models import ColumnDataSource
5
+ from bokeh.resources import CDN
6
+ from bokeh.embed import file_html
7
+ from sklearn.datasets import load_iris
8
+ import pandas as pd
9
+
10
+ # Load the Iris dataset
11
+ iris = load_iris()
12
+ df = pd.DataFrame(data=iris.data, columns=iris.feature_names)
13
+ df['species'] = iris.target
14
+ df['species'] = df['species'].map({0: 'setosa', 1: 'versicolor', 2: 'virginica'})
15
+
16
+
17
+ # Create the data source and figure object
18
+ source = ColumnDataSource(data=dict(
19
+ sepal_length=df['sepal length (cm)'],
20
+ sepal_width=df['sepal width (cm)'],
21
+ petal_length=df['petal length (cm)'],
22
+ petal_width=df['petal width (cm)'],
23
+ species=df['species']
24
+ ))
25
+
26
+ # Create a Bokeh scatter plot
27
+ p = figure(title="Iris Dataset Scatter Plot", x_axis_label='Sepal Length (cm)', y_axis_label='Sepal Width (cm)',
28
+ tools="pan,wheel_zoom,box_zoom,reset,hover,save", width=800)
29
+
30
+ # Set different colors based on species
31
+ colors = {'setosa': 'blue', 'versicolor': 'green', 'virginica': 'red'}
32
+
33
+ for species, color in colors.items():
34
+ df_species = df[df['species'] == species]
35
+ source_species = ColumnDataSource(data=dict(
36
+ sepal_length=df_species['sepal length (cm)'],
37
+ sepal_width=df_species['sepal width (cm)']
38
+ ))
39
+ p.scatter('sepal_length', 'sepal_width', source=source_species, legend_label=species, color=color,
40
+ size=10, alpha=0.5)
41
+
42
+ p.legend.title = 'Species'
43
+ p.legend.location = 'top_left'
44
+
45
+ # Embed the Bokeh figure into SimpleStart
46
+ html = file_html(p, CDN, "Iris Dataset Scatter Plot")
47
+
48
+ #ui
49
+ ss.md('''
50
+ ## simplestart Chart Demo - Bokeh
51
+ ''')
52
+
53
+ ss.space()
54
+ ss.md('''
55
+ #### 🔅 Example
56
+ An interactive scatter plot of the Iris data using Bokeh
57
+ ''')
58
+
59
+ ss.space()
60
+ ss.htmlview(html, border = False)
61
+
62
+ ss.space()
63
+ ss.write("#### 🔎 Code")
64
+
65
+ def viewcode():
66
+ ss.session["viewcode"] = 1
67
+
68
+ ss.session["viewcode"] = 0
69
+ ss.button("View Code", size="small", onclick = viewcode)
70
+
71
+ def conditioner(event):
72
+ return (ss.session["viewcode"] == 1)
73
+
74
+ code = '''
75
+ ```python
76
+ import simplestart as ss
77
+
78
+ from bokeh.plotting import figure
79
+ from bokeh.models import ColumnDataSource
80
+ from bokeh.resources import CDN
81
+ from bokeh.embed import file_html
82
+ from sklearn.datasets import load_iris
83
+ import pandas as pd
84
+
85
+ # Load the Iris dataset
86
+ iris = load_iris()
87
+ df = pd.DataFrame(data=iris.data, columns=iris.feature_names)
88
+ df['species'] = iris.target
89
+ df['species'] = df['species'].map({0: 'setosa', 1: 'versicolor', 2: 'virginica'})
90
+
91
+
92
+ # Create the data source and figure object
93
+ source = ColumnDataSource(data=dict(
94
+ sepal_length=df['sepal length (cm)'],
95
+ sepal_width=df['sepal width (cm)'],
96
+ petal_length=df['petal length (cm)'],
97
+ petal_width=df['petal width (cm)'],
98
+ species=df['species']
99
+ ))
100
+
101
+ # Create a Bokeh scatter plot
102
+ p = figure(title="Iris Dataset Scatter Plot", x_axis_label='Sepal Length (cm)', y_axis_label='Sepal Width (cm)',
103
+ tools="pan,wheel_zoom,box_zoom,reset,hover,save", width=800)
104
+
105
+ # Set different colors based on species
106
+ colors = {'setosa': 'blue', 'versicolor': 'green', 'virginica': 'red'}
107
+
108
+ for species, color in colors.items():
109
+ df_species = df[df['species'] == species]
110
+ source_species = ColumnDataSource(data=dict(
111
+ sepal_length=df_species['sepal length (cm)'],
112
+ sepal_width=df_species['sepal width (cm)']
113
+ ))
114
+ p.scatter('sepal_length', 'sepal_width', source=source_species, legend_label=species, color=color,
115
+ size=10, alpha=0.5)
116
+
117
+ p.legend.title = 'Species'
118
+ p.legend.location = 'top_left'
119
+
120
+ # Embed the Bokeh figure into SimpleStart
121
+ html = file_html(p, CDN, "Iris Dataset Scatter Plot")
122
+
123
+ #ui
124
+ ss.htmlview(html, border = False)
125
+ '''
126
+
127
+ with ss.when(conditioner):
128
+ ss.md(code)
pages/004 Chart Data/demo_pyplot.py ADDED
@@ -0,0 +1,130 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import streamsync as ss
2
+
3
+ import seaborn as sns
4
+ import matplotlib as mpl
5
+ import matplotlib.pyplot as plt
6
+
7
+
8
+ #下载不了，所以加一个参数data_home
9
+ data_home = "./data/seaborn"
10
+
11
+ ss.md('''
12
+ ## ss.pyplot Drawing
13
+ ''')
14
+
15
+
16
+ ss.space()
17
+ ss.md('''
18
+ #### 🔅 Example
19
+ ''')
20
+
21
+ ss.write("#### 1. Draw a Line Plot")
22
+
23
+ sns.set_style("whitegrid")
24
+ titanic = sns.load_dataset("titanic", data_home=data_home)
25
+ sns.lineplot(x="age", y="fare", hue="sex", data=titanic)
26
+ plt.show()
27
+
28
+ fig = plt.gcf()
29
+ ss.pyplot(fig, style="border:1px solid gray; width:600px")
30
+
31
+ ss.write("#### 2. Draw a Scatter Plot")
32
+
33
+ sns.set_style("whitegrid")
34
+ tips = sns.load_dataset("tips", data_home=data_home)
35
+ sns.scatterplot(x="total_bill", y="tip", data=tips)
36
+ plt.show()
37
+
38
+ fig = plt.gcf()
39
+ ss.pyplot(fig, style="border:1px solid gray; width:600px")
40
+
41
+ ss.write("#### 3. Draw a Bar Plot")
42
+
43
+ sns.set_style("whitegrid")
44
+ titanic = sns.load_dataset("titanic",data_home=data_home)
45
+ sns.barplot(x="class", y="survived", data=titanic)
46
+ plt.show()
47
+
48
+ fig = plt.gcf()
49
+ ss.pyplot(fig, style="border:1px solid gray; width:600px")
50
+
51
+
52
+ ss.write("#### 4. Draw a Histogram")
53
+ sns.set_style("whitegrid")
54
+ titanic = sns.load_dataset("titanic",data_home=data_home)
55
+ sns.histplot(x="age", data=titanic)
56
+ plt.show()
57
+
58
+ fig = plt.gcf()
59
+ ss.pyplot(fig, style="border:1px solid gray; width:600px")
60
+
61
+
62
+ ss.space()
63
+
64
+ ss.write("#### 🔎 Code")
65
+ ss.write("---")
66
+
67
+ def viewcode():
68
+ ss.session["viewcode"] = 1
69
+
70
+ ss.button("View Code", size="small", onclick = viewcode)
71
+
72
+
73
+ def conditioner(event):
74
+ return ss.session["viewcode"] == 1
75
+
76
+ with ss.when(conditioner):
77
+ ss.md('''
78
+ ```python
79
+ import streamsync as ss
80
+
81
+ import seaborn as sns
82
+ import matplotlib as mpl
83
+ import matplotlib.pyplot as plt
84
+
85
+
86
+ data_home = "./data/seaborn"
87
+
88
+
89
+ ss.write("#### 1. Draw a Line Plot")
90
+
91
+ sns.set_style("whitegrid")
92
+ titanic = sns.load_dataset("titanic", data_home=data_home)
93
+ sns.lineplot(x="age", y="fare", hue="sex", data=titanic)
94
+ plt.show()
95
+
96
+ fig = plt.gcf()
97
+ ss.pyplot(fig, style="border:1px solid gray; width:600px")
98
+
99
+ ss.write("#### 2. Draw a Scatter Plot")
100
+
101
+ sns.set_style("whitegrid")
102
+ tips = sns.load_dataset("tips", data_home=data_home)
103
+ sns.scatterplot(x="total_bill", y="tip", data=tips)
104
+ plt.show()
105
+
106
+ fig = plt.gcf()
107
+ ss.pyplot(fig, style="border:1px solid gray; width:600px")
108
+
109
+ ss.write("#### 3. Draw a Bar Plot")
110
+
111
+ sns.set_style("whitegrid")
112
+ titanic = sns.load_dataset("titanic",data_home=data_home)
113
+ sns.barplot(x="class", y="survived", data=titanic)
114
+ plt.show()
115
+
116
+ fig = plt.gcf()
117
+ ss.pyplot(fig, style="border:1px solid gray; width:600px")
118
+
119
+
120
+ ss.write("#### 4. Draw a Histogram")
121
+ sns.set_style("whitegrid")
122
+ titanic = sns.load_dataset("titanic",data_home=data_home)
123
+ sns.histplot(x="age", data=titanic)
124
+ plt.show()
125
+
126
+ fig = plt.gcf()
127
+ ss.pyplot(fig, style="border:1px solid gray; width:600px")
128
+ ```
129
+ ''')
130
+
pages/005 Layout Related/demo_columns.py ADDED
@@ -0,0 +1,100 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ### Columns Layout
2
+ import streamsync as ss
3
+
4
+ ss.md("## ss.columns Columns Layout")
5
+
6
+ ss.space()
7
+ ss.md("#### 🔅 Example")
8
+
9
+ ss.space()
10
+
11
+ ss.md("### Average Spacing")
12
+
13
+ def onchange1(event):
14
+ #cols_ex1.design = True
15
+ cols_ex1_id = cols1[0].id
16
+
17
+ if event.value == True:
18
+ ss.getcm().components[cols_ex1_id]["content"]["options"]["border"] = True
19
+ ss.session["cols1_design"] = ', border = True'
20
+ else:
21
+ ss.getcm().components[cols_ex1_id]["content"]["options"]["border"] = False
22
+ ss.session["cols1_design"] = ''
23
+ ss.update_cm(cols_ex1_id)
24
+
25
+ ss.checkbox("border", checked = True, onchange = onchange1)
26
+
27
+ cols1 = ss.columns(2, border=True)
28
+
29
+ with cols1[0]:
30
+ ss.text("First of two columns")
31
+
32
+ with cols1[1]:
33
+ ss.text("Second of two columns")
34
+
35
+
36
+ ss.space()
37
+ ss.write("---")
38
+ ss.write("#### 🔎 Code")
39
+ ss.md('''
40
+ ```python
41
+ import simplestart as ss
42
+
43
+ cols1 = ss.columns(2, border = True)
44
+
45
+ with cols1[0]:
46
+ ss.text("First of two columns")
47
+
48
+ with cols1[1]:
49
+ ss.text("Second of two columns")
50
+ ```
51
+ ''')
52
+
53
+ ss.space()
54
+
55
+ ss.md("### Proportional Spacing")
56
+
57
+
58
+ def onchange2(event):
59
+ #cols_ex1.design = True
60
+ cols_ex2_id = cols2[0].id
61
+
62
+ if event.value == True:
63
+ ss.getcm().components[cols_ex2_id]["content"]["options"]["border"] = True
64
+ ss.session["cols2_design"] = ', border = True'
65
+ else:
66
+ ss.getcm().components[cols_ex2_id]["content"]["options"]["border"] = False
67
+ ss.session["cols2_design"] = ''
68
+ ss.update_cm(cols_ex2_id)
69
+
70
+
71
+ ss.checkbox("border", checked = True, onchange = onchange2)
72
+
73
+ cols2 = ss.columns([4,6], border = True)
74
+
75
+ with cols2[0]:
76
+ ss.text("First of two columns")
77
+ with cols2[1]:
78
+ ss.text("Second of two columns")
79
+
80
+
81
+ ss.space()
82
+ ss.write("---")
83
+ ss.write("#### 🔎 Code")
84
+ ss.md('''
85
+ ```python
86
+ import simplestart as ss
87
+
88
+ cols1 = ss.columns([4,6], border = True)
89
+
90
+ with cols1[0]:
91
+ ss.text("First of two columns")
92
+
93
+ with cols1[1]:
94
+ ss.text("Second of two columns")
95
+ ```
96
+ ''')
97
+
98
+ def onPageLoad():
99
+ ss.session["cols1_design"] = ''
100
+ ss.session["cols2_design"] = ''
pages/005 Layout Related/demo_row.py ADDED
@@ -0,0 +1,102 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ### Row Layout
2
+
3
+ import streamsync as ss
4
+
5
+ ss.md("## ss.row Row Layout")
6
+
7
+ ss.space()
8
+ ss.md("#### 🔅 Example")
9
+ 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.")
10
+
11
+ ss.space()
12
+
13
+ def onchange1():
14
+ pass
15
+
16
+
17
+ #ui
18
+
19
+ style = "background:#d3d3d354; padding:5px;"
20
+
21
+ ss.space()
22
+ ss.write("#### 1. Normal")
23
+ ss.space()
24
+ with ss.row(style=style):
25
+ ss.button("button1")
26
+ ss.button("button2")
27
+
28
+ ss.space()
29
+ ss.write("#### 2. Center")
30
+ ss.space()
31
+ with ss.row(style=style):
32
+ ss.spacer()
33
+ ss.button("button1")
34
+ ss.button("button2")
35
+ ss.spacer()
36
+
37
+ ss.space()
38
+ ss.write("#### 3. Right align")
39
+ ss.space()
40
+ with ss.row(style=style):
41
+ ss.spacer()
42
+ ss.button("button1")
43
+ ss.button("button2")
44
+
45
+ ss.space()
46
+ ss.write("#### 4. Right respectively")
47
+ ss.space()
48
+ with ss.row(style=style):
49
+ ss.spacer()
50
+ ss.button("button1")
51
+ ss.spacer()
52
+ ss.button("button2")
53
+
54
+
55
+ ss.space("mt-16")
56
+ ss.write("#### 🔎 Code")
57
+
58
+ ss.md('''
59
+ ```python
60
+ import simplestart as ss
61
+
62
+ style = "background:#d3d3d354; padding:5px;"
63
+ ss.space()
64
+ ss.write("#### 1. Normal")
65
+ ss.space()
66
+ with ss.row(style=style):
67
+ ss.button("button1")
68
+ ss.button("button2")
69
+
70
+ ss.space()
71
+ ss.write("#### 2. Center")
72
+ ss.space()
73
+ with ss.row(style=style):
74
+ ss.spacer()
75
+ ss.button("button1")
76
+ ss.button("button2")
77
+ ss.spacer()
78
+
79
+ ss.space()
80
+ ss.write("#### 3. Right align")
81
+ ss.space()
82
+ with ss.row(style=style):
83
+ ss.spacer()
84
+ ss.button("button1")
85
+ ss.button("button2")
86
+
87
+ ss.space()
88
+ ss.write("#### 4. Right respectively")
89
+ ss.space()
90
+ with ss.row(style=style):
91
+ ss.spacer()
92
+ ss.button("button1")
93
+ ss.spacer()
94
+ ss.button("button2")
95
+
96
+ ''')
97
+
98
+ ss.md('''
99
+ ::: tip
100
+ ss.space adds spacing, while ss.spacer is used to fill gaps to modify the layout.
101
+ :::
102
+ ''')
pages/005 Layout Related/demo_section.py ADDED
@@ -0,0 +1,81 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ### Section
2
+ import simplestart as ss
3
+
4
+ ss.md("## ss.section Container")
5
+
6
+ ss.md("The section parent container can hold other components and supports the style parameter.")
7
+
8
+
9
+ ss.space()
10
+ ss.md('''
11
+ #### 🔅 Example
12
+ ''')
13
+
14
+ #api
15
+ def clear():
16
+ section.empty()
17
+
18
+ def write_something():
19
+ section.text("Hello, I am inside section 2")
20
+
21
+ #ui
22
+ with ss.section("Section1", shadow = 10, border = True, rounded=True, width = "50%", height=300):
23
+ ss.text("This is inside the section 1")
24
+
25
+
26
+ ss.space()
27
+
28
+ section = ss.section()
29
+ section.text("This is inside the section 2")
30
+
31
+ ss.space("mt-4 mb-4")
32
+ ss.text("outside the section")
33
+
34
+
35
+ ss.md("---")
36
+
37
+ ss.button("clear", onclick=clear)
38
+
39
+ ss.button("add something", onclick=write_something)
40
+
41
+ ss.space()
42
+
43
+ ss.write("#### 🔎 Code")
44
+
45
+ ss.md("""
46
+ ```python
47
+ import simplestart as ss
48
+
49
+ #api
50
+ def clear():
51
+ section.empty()
52
+
53
+ def write_something():
54
+ section.text("Hello, I am inside section 2")
55
+
56
+ #ui
57
+ with ss.section(title = "Section1", shadow = 10, border = True, rounded=True, width = "50%", height=300):
58
+ ss.text("This is inside the section 1")
59
+
60
+
61
+ ss.space()
62
+
63
+ section = ss.section()
64
+ section.text("This is inside the section 2")
65
+
66
+ ss.space()
67
+ ss.text("outside the section")
68
+
69
+ ss.md("---")
70
+
71
+ ss.button("clear", onclick=clear)
72
+ ss.button("add something", onclick=write_something)
73
+
74
+ ```
75
+ """)
76
+
77
+ ss.md('''
78
+ ::: tip
79
+ In addition to adding components using the with syntax, you can also directly add components within the container using section.text(), section.button(), etc.
80
+ :::
81
+ ''')
pages/005 Layout Related/demo_sidebar.py ADDED
@@ -0,0 +1,53 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ### Sidebar
2
+ import simplestart as ss
3
+
4
+ ss.md("## ss.sidebar")
5
+
6
+ ss.md("Display various components in the sidebar on the left side of the screen, such as data controls and some settings.")
7
+
8
+ ss.md('''
9
+ #### 🔅 Example
10
+ ''')
11
+
12
+
13
+ sidebar = ss.sidebar()
14
+
15
+ with sidebar:
16
+ ss.button("click")
17
+ ss.selectbox(["one", "two", "three"])
18
+
19
+
20
+ def testme(state, value):
21
+ with sidebar:
22
+ ss.text("text in sidebar")
23
+
24
+
25
+ ss.button("test", onclick = testme)
26
+
27
+
28
+ ss.space()
29
+
30
+ ss.write("#### 🔎 Code")
31
+
32
+ ss.md('''
33
+ ```python
34
+ import simplestart as ss
35
+
36
+ sidebar = ss.sidebar()
37
+
38
+ with sidebar:
39
+ ss.button("click")
40
+ ss.selectbox(["one", "two", "three"])
41
+
42
+
43
+ def testme(state, value):
44
+ with sidebar:
45
+ ss.text("text in sidebar")
46
+ #or
47
+ #sidebar.text("text in sidebar")
48
+
49
+
50
+ ss.button("test", onclick = testme)
51
+
52
+ ```
53
+ ''')
pages/005 Layout Related/demo_style.py ADDED
@@ -0,0 +1,64 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ### Style
2
+ import simplestart as ss
3
+
4
+ ss.md("## ss.style Style Settings")
5
+
6
+ ss.space()
7
+ ss.md("#### 🔅 Example")
8
+ ss.write("nject CSS styles into the HTML document.")
9
+
10
+ ss.html('''
11
+ <div class="test1">this is a sample1</div>
12
+ <div class="test2">this is a sample2</div>
13
+ ''')
14
+
15
+
16
+ ss.style('''
17
+ .test1{
18
+ background-color:lightgray;
19
+ padding:5px;
20
+ width:150px;
21
+ margin-bottom:10px;
22
+ border:1px solid lightblue
23
+ }
24
+ .test2{
25
+ color:red;
26
+ border:1px solid lightgreen;
27
+ padding:5px;
28
+ width:150px;
29
+ }
30
+ ''')
31
+
32
+ ss.space()
33
+
34
+ ss.write("#### 🔎 Code")
35
+
36
+
37
+ ss.space()
38
+
39
+
40
+ ss.md('''
41
+ ```python
42
+ import simplestart as ss
43
+
44
+ ss.html(\'''
45
+ <div class="test1">this is a sample1</div>
46
+ <div class="test2">this is a sample2</div>
47
+ \''')
48
+
49
+ ss.style(\'''
50
+ .test1{
51
+ background-color:lightgray;
52
+ padding:5px;
53
+ width:150px;
54
+ margin-bottom:10px;
55
+ border:1px solid lightblue
56
+ }
57
+ .test2{
58
+ color:red;
59
+ border:1px solid lightgreen;
60
+ padding:5px;
61
+ width:150px;
62
+ }
63
+ \''')
64
+ ''')
pages/005 Layout Related/demo_tabs.py ADDED
@@ -0,0 +1,35 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ### Tabs
2
+ import simplestart as ss
3
+
4
+ ss.md("## ss.tabs")
5
+
6
+ ss.space("mt-16")
7
+ ss.md("#### 🔅 Example")
8
+
9
+ tabtitles = ["tab1", "tab2", "tab3"]
10
+ tabs = ss.tabs(tabtitles)
11
+
12
+ with tabs[0]:
13
+ ss.text("this is tab 1")
14
+ with tabs[1]:
15
+ ss.text("this is tab 2")
16
+ with tabs[2]:
17
+ ss.text("this is tab 3")
18
+
19
+ ss.space()
20
+ ss.write("#### 🔎 Code")
21
+
22
+ ss.md('''
23
+ ```python
24
+ import simplestart as ss
25
+
26
+ tabtitles = ["tab1", "tab2", "tab3"]
27
+ tabs = ss.tabs(tabtitles)
28
+
29
+ with tabs[0]:
30
+ ss.text("this is tab 1")
31
+ with tabs[1]:
32
+ ss.text("this is tab 2")
33
+ with tabs[2]:
34
+ ss.text("this is tab 3")
35
+ ''')
pages/006 Advanced Usage/demo_component.py ADDED
@@ -0,0 +1,101 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ### ss.component
2
+ import simplestream as ss
3
+
4
+ ss.md("### ss.component Custom Component")
5
+ ss.md("You can customize components using HTML, JS, and CSS, implemented through an iframe.")
6
+
7
+ ss.space()
8
+ ss.md('''
9
+ #### 🔅 Example
10
+ ''')
11
+ ss.space()
12
+
13
+ def testme(state, value):
14
+ mytext.text = "Data received from the frontend UI: " + value["value"]
15
+
16
+ # By default, the <iframe> width is 300 pixels and the height is 150 pixels.
17
+ ss.text("Enter content in the text box and press Enter.")
18
+
19
+ myplugin = ss.component(path = f"components/index.html", onData = testme) ###style="border:none")
20
+
21
+ def postdata():
22
+ data = {"my_input_value":"text from python"}
23
+ myplugin.postMessage(data)
24
+
25
+ mytext = ss.text("Data received from the frontend UI: ")
26
+
27
+ ss.markdown("---")
28
+ ss.space()
29
+ ss.text("Click the button to send data to the frontend UI.")
30
+ ss.button("post data", onclick=postdata)
31
+
32
+ ss.space()
33
+
34
+ ss.write("Python Side Code")
35
+
36
+ ss.md('''
37
+ ```python
38
+ import simplestart as ss
39
+
40
+ def testme(state, value):
41
+ mytext.text = "Data received from the frontend UI: " + value["value"]
42
+
43
+ ss.text("Enter content in the text box and press Enter.")
44
+ myplugin = ss.component(path = f"components/index.html", onData = testme)
45
+
46
+ def postdata():
47
+ data = {"my_input_value":"text from python"}
48
+ myplugin.postMessage(data)
49
+
50
+ mytext = ss.text("Data received from the frontend UI: ")
51
+
52
+ ss.markdown("---")
53
+
54
+ ss.space()
55
+ ss.text("Click the button to send data to the frontend UI.")
56
+ ss.button("post data", onclick=postdata)
57
+
58
+ ```
59
+ ''')
60
+
61
+ ss.write("Plugin/HTML/JS Side Code")
62
+
63
+ ss.md('''
64
+ ```html
65
+ <html>
66
+
67
+ <head>
68
+ <script src="pybridge.js"></script>
69
+ </head>
70
+
71
+ <body style="height:100px">
72
+ <input id="myinput" value="" autocomplete="off" placeholder="Enter content and press Enter" />
73
+ </body>
74
+
75
+ <script>
76
+ var myInput = document.getElementById("myinput");
77
+
78
+ myInput.addEventListener("change", function() {
79
+ //// Send message to the Python side
80
+ sendDataToPython({
81
+ value: myInput.value,
82
+ });
83
+ })
84
+
85
+ //Receive messages from the Python side
86
+ window.addEventListener("message", onDataFromPython);
87
+
88
+ function onDataFromPython(event) {
89
+ var data = event.data.arg;
90
+ if (event.data.type !== "ss:render") return;
91
+ myInput.value = data.my_input_value; // Access values sent from Python here!
92
+ }
93
+
94
+ // If system height setting fails, you can manually set the height
95
+ //setFrameHeight(200);
96
+ </script>
97
+
98
+ </html>
99
+
100
+ ```
101
+ ''')
pages/006 Advanced Usage/demo_loadvue.py ADDED
@@ -0,0 +1,131 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ### ss.loadvue
2
+ import simplestart as ss
3
+
4
+ ss.md("## ss.loadvue Load Vue SFC")
5
+
6
+ ss.space()
7
+ ss.md("In SimpleStart, you can load custom Vue Single File Components using ss.loadvue, enabling property and data interaction.")
8
+
9
+ ss.space()
10
+
11
+ ss.space()
12
+ ss.md('''
13
+ #### 🔅 Example
14
+
15
+ In this example, we define a simple frontend component that includes an "ontest" event. When the user clicks the "handle on server" button,
16
+ the Python side's ontest event handler will process it and receive data passed from the frontend component. Meanwhile, when the "Modify Data"
17
+ button on the Python side is clicked, the frontend component will respond by changing the displayed content.
18
+ ''')
19
+
20
+ ss.space("mt-8")
21
+ ss.md("---")
22
+ ss.space("mt-8")
23
+
24
+ tagid = 0
25
+ tags = ["Python", "Java", "Javascript"]
26
+ data = {"count":0, "language":"C++"}
27
+ global myvue
28
+
29
+ #trigger event on server from client side
30
+ def ontest(event):
31
+ ss.message(event.value)
32
+
33
+ #change data in client component on server side
34
+ def changedata(event):
35
+ global tagid
36
+ myvue.data["language"] = tags[tagid]
37
+ myvue.update()
38
+
39
+ tagid = (tagid+1) % 3
40
+
41
+ ss.text("Python Side")
42
+ ss.button("Modify Data", onclick=changedata)
43
+
44
+ ss.space()
45
+ sec = ss.section()
46
+
47
+ def onPageLoad():
48
+ global myvue
49
+ #load code from file
50
+ with sec:
51
+ ss.text("Component Side")
52
+ myvue = ss.loadvue(path = "components/mycomponent.vue", data = data, handlers = {"ontest":ontest})
53
+
54
+
55
+ ss.space()
56
+ ss.write("Python Side Code")
57
+
58
+ ss.md('''
59
+ ```python
60
+ import simplestart as ss
61
+
62
+ tagid = 0
63
+ global myvue
64
+
65
+ tags = ["Python", "Java", "Javascript"]
66
+ data = {"count":0, "language":"C++"}
67
+
68
+
69
+ #trigger event on server from client side
70
+ def ontest(state, value):
71
+ ss.message(value)
72
+
73
+ #change data in client component on server side
74
+ def changedata(state, value=None):
75
+ global tagid
76
+ myvue.data["language"] = tags[tagid]
77
+ tagid = (tagid+1) % 3
78
+
79
+ ss.text("Python Side")
80
+ ss.button("Modify Data", onclick=changedata)
81
+
82
+
83
+ def onPageLoad():
84
+ global myvue
85
+ #load code from file
86
+ myvue = ss.loadvue(path = "components/mycomponent.vue", data = data, handlers = {"ontest":ontest})
87
+ ```
88
+ ''')
89
+
90
+
91
+ ss.space()
92
+ ss.write("Vue JS Code")
93
+
94
+ ss.md('''
95
+ ```js
96
+ <template>
97
+ <div class="my-component">
98
+ <h1>{{title}}: {{ data.language }}</h1>
99
+ <v-btn @click="testme">handle on server</v-btn>
100
+ </div>
101
+ </template>
102
+
103
+ <script>
104
+ module.exports = {
105
+ name: 'MyComponent',
106
+
107
+ data() {
108
+ return {
109
+ title:"computer",
110
+ }
111
+ },
112
+
113
+ methods: {
114
+ testme(){
115
+ this.streamsync.forwardData(this, eventname="ontest", "12345")
116
+ }
117
+ }
118
+ }
119
+ </script>
120
+
121
+ <style>
122
+ .my-component {
123
+ width:50%;
124
+ background-color: #f0f0f0;
125
+ padding: 20px;
126
+ margin:10px 0;
127
+ }
128
+ </style>
129
+
130
+ ```
131
+ ''')
pages/006 Advanced Usage/demo_onload.py ADDED
@@ -0,0 +1,46 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ### ss.onPageEnter
2
+ import simplestart as ss
3
+ from datetime import datetime
4
+
5
+ ss.md("## onPageEnter Page Load Event")
6
+
7
+ ss.md('''
8
+ ---
9
+ #### 🔅 Example
10
+ ''')
11
+
12
+ ss.md("Every time you enter this page, the onPageEnter event function will be called, and a message will pop up above.")
13
+
14
+
15
+ ss.space()
16
+
17
+ mytext = ss.text("Current Time @currentime")
18
+
19
+ def onPageEnter():
20
+ #ss.write("test")
21
+ ss.message("page enter event")
22
+
23
+
24
+ # Get current time
25
+ now = datetime.now()
26
+ # Format time as a string
27
+ time_str = now.strftime('%Y-%m-%d %H:%M:%S')
28
+ ss.session["currentime"] = time_str
29
+
30
+
31
+ ss.space()
32
+
33
+ ss.write('''
34
+ ---
35
+ #### 🔎 Code
36
+ ''')
37
+
38
+ ss.md('''
39
+ ```python
40
+ import simplestart as ss
41
+
42
+ def onPageEnter():
43
+ ss.message("page enter event")
44
+
45
+ ```
46
+ ''')
pages/006 Advanced Usage/demo_session.py ADDED
@@ -0,0 +1,21 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ### ss.session
2
+ import simplestart as ss
3
+
4
+ ss.md("## ss.session Session Variables")
5
+
6
+ ss.space()
7
+
8
+
9
+ #in this page
10
+ ss.session["count"] = 100
11
+
12
+ mytext = ss.text("The couns is @count")
13
+
14
+
15
+ def change_count():
16
+ ss.session.count += 1
17
+
18
+ ss.button("Add Count", onclick=change_count)
19
+
20
+ def onPageEnter():
21
+ ss.session.count = 100
pages/006 Advanced Usage/demo_template.py ADDED
@@ -0,0 +1,158 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ### ss.template
2
+
3
+ import simplestart as ss
4
+
5
+ ss.md("## ss.template Load VUE Template")
6
+
7
+ ss.space("mt-8")
8
+ ss.md('''
9
+ In SimpleStart, you can define simple Vue components using ss.template to achieve property and data interaction.
10
+
11
+ #### Function
12
+ ss.template(src, path, data, handlers)
13
+
14
+ ##### Function Description
15
+
16
+ | Parameter | Description |
17
+ | --- | --- |
18
+ | src | Component script in string format |
19
+ | path | Path to the original code of the external component file |
20
+ | data | Data used for interaction between frontend components and the Python backend |
21
+ | handlers | Events defined in the frontend component, implemented on the Python side |
22
+
23
+ ''')
24
+
25
+ ss.space("mt-8")
26
+
27
+
28
+ template = '''
29
+ <v-card
30
+ class="mx-auto text-white"
31
+ color="#26c6da"
32
+ max-width="400"
33
+ prepend-icon="mdi-twitter"
34
+ title="Twitter"
35
+ >
36
+ <template v-slot:prepend>
37
+ <v-icon size="x-large"></v-icon>
38
+ </template>
39
+
40
+ <v-card-text class="text-h6 py-2">
41
+ "SimpleStart is a easy way to build webpage and visualize data."
42
+ </v-card-text>
43
+
44
+ <v-card-actions>
45
+ <v-list-item class="w-100">
46
+ <template v-slot:prepend>
47
+ <v-avatar
48
+ color="grey-darken-3"
49
+ image="https://avataaars.io/?avatarStyle=Transparent&topType=ShortHairShortCurly&accessoriesType=Prescription02&hairColor=Black&facialHairType=Blank&clotheType=Hoodie&clotheColor=White&eyeType=Default&eyebrowType=DefaultNatural&mouthType=Default&skinColor=Light"
50
+ ></v-avatar>
51
+ </template>
52
+
53
+ <v-list-item-title>Evan You</v-list-item-title>
54
+
55
+ <v-list-item-subtitle>Data Science Engineer</v-list-item-subtitle>
56
+
57
+ <template v-slot:append>
58
+ <div class="justify-self-end">
59
+ <v-icon class="me-1" icon="mdi-heart" \@click="onserver('myclick')"></v-icon>
60
+ <span class="subheading me-2">{{data.vote}}</span>
61
+ <span class="me-1">·</span>
62
+ <v-icon class="me-1" icon="mdi-share-variant"></v-icon>
63
+ <span class="subheading">45</span>
64
+ </div>
65
+ </template>
66
+ </v-list-item>
67
+ </v-card-actions>
68
+ </v-card>
69
+ '''
70
+
71
+ def myclick(event):
72
+ mycard.vote = mycard.vote + 1
73
+
74
+ data = {"vote":256}
75
+ mycard = ss.template(template, data = data, handlers = {"myclick":myclick})
76
+
77
+ def increment(event):
78
+ mycard.vote = mycard.vote + 1
79
+ #mycard.style = "color:red"
80
+
81
+ ss.space()
82
+ ss.button("Thumb Up", onclick=increment)
83
+
84
+ ss.space("mt-8")
85
+
86
+ ss.write('''
87
+ ---
88
+ #### Python Side Code
89
+ ''')
90
+
91
+ ss.md('''
92
+ ```python
93
+ import simplestart as ss
94
+
95
+ template = \'''
96
+ <v-card
97
+ class="mx-auto text-white"
98
+ color="#26c6da"
99
+ max-width="400"
100
+ prepend-icon="mdi-twitter"
101
+ title="Twitter"
102
+ >
103
+ <template v-slot:prepend>
104
+ <v-icon size="x-large"></v-icon>
105
+ </template>
106
+
107
+ <v-card-text class="text-h6 py-2">
108
+ "SimpleStart is a easy way to build webpage and visualize data."
109
+ </v-card-text>
110
+
111
+ <v-card-actions>
112
+ <v-list-item class="w-100">
113
+ <template v-slot:prepend>
114
+ <v-avatar
115
+ color="grey-darken-3"
116
+ image="https://avataaars.io/?avatarStyle=Transparent&topType=ShortHairShortCurly&accessoriesType=Prescription02&hairColor=Black&facialHairType=Blank&clotheType=Hoodie&clotheColor=White&eyeType=Default&eyebrowType=DefaultNatural&mouthType=Default&skinColor=Light"
117
+ ></v-avatar>
118
+ </template>
119
+
120
+ <v-list-item-title>Evan You</v-list-item-title>
121
+
122
+ <v-list-item-subtitle>Data Science Engineer</v-list-item-subtitle>
123
+
124
+ <template v-slot:append>
125
+ <div class="justify-self-end">
126
+ <v-icon class="me-1" icon="mdi-heart" \@click="onserver('myclick')"></v-icon>
127
+ <span class="subheading me-2">{{data.vote}}</span>
128
+ <span class="me-1">·</span>
129
+ <v-icon class="me-1" icon="mdi-share-variant"></v-icon>
130
+ <span class="subheading">45</span>
131
+ </div>
132
+ </template>
133
+ </v-list-item>
134
+ </v-card-actions>
135
+ </v-card>
136
+ \'''
137
+
138
+ def myclick(event):
139
+ mycard.vote = mycard.vote + 1
140
+
141
+ data = {"vote":256}
142
+ mycard = ss.template(template, data = data, handlers = {"myclick":myclick})
143
+
144
+ def increment(event):
145
+ mycard.vote = mycard.vote + 1
146
+ #mycard.style = "color:red"
147
+
148
+ ss.space()
149
+ ss.button("Thumb Up", onclick=increment)
150
+ ```
151
+ ''')
152
+
153
+
154
+ ss.space("mt-8")
155
+
156
+ def onPageEnter():
157
+ ss.session["counter"] = 0
158
+