Hugging Face's logo

Spaces:
test2023h5
/
Demo_SimpleStart_Usage
Running

App Files Community
test2023h5 commited on
Commit
7798609
·
verified ·
1 Parent(s): a8a3d9c

Upload 44 files

Browse files
Files changed (44) hide show
  1. pages/Advanced_Usage/demo_chat.py +33 -0
  2. pages/Advanced_Usage/demo_component.py +104 -0
  3. pages/Advanced_Usage/demo_loadvue.py +134 -0
  4. pages/Advanced_Usage/demo_onload.py +49 -0
  5. pages/Advanced_Usage/demo_session.py +134 -0
  6. pages/Advanced_Usage/demo_template.py +160 -0
  7. pages/Advanced_Usage/demo_when.py +104 -0
  8. pages/Advanced_Usage/folder.yaml +2 -0
  9. pages/Chart_Data/demo_bokeh.py +132 -0
  10. pages/Chart_Data/demo_pyplot.py +134 -0
  11. pages/Chart_Data/folder.yaml +2 -0
  12. pages/Content_Display/demo_audio.py +76 -0
  13. pages/Content_Display/demo_html.py +52 -0
  14. pages/Content_Display/demo_image.py +103 -0
  15. pages/Content_Display/demo_markdown.py +65 -0
  16. pages/Content_Display/demo_message.py +41 -0
  17. pages/Content_Display/demo_sqlite.py.txt +42 -0
  18. pages/Content_Display/demo_table.py +214 -0
  19. pages/Content_Display/demo_text.py +38 -0
  20. pages/Content_Display/demo_video.py +39 -0
  21. pages/Content_Display/demo_write.py +80 -0
  22. pages/Content_Display/folder.yaml +2 -0
  23. pages/Form_Component/demo_button.py +133 -0
  24. pages/Form_Component/demo_checkbox.py +80 -0
  25. pages/Form_Component/demo_dialog.py +148 -0
  26. pages/Form_Component/demo_expander.py +32 -0
  27. pages/Form_Component/demo_input.py +69 -0
  28. pages/Form_Component/demo_menu.py +103 -0
  29. pages/Form_Component/demo_radio.py +104 -0
  30. pages/Form_Component/demo_selectbox.py +81 -0
  31. pages/Form_Component/demo_slider.py +42 -0
  32. pages/Form_Component/demo_textarea.py +51 -0
  33. pages/Form_Component/demo_upload.py +45 -0
  34. pages/Form_Component/folder.yaml +2 -0
  35. pages/Layout_Related/demo_columns.py +103 -0
  36. pages/Layout_Related/demo_row.py +104 -0
  37. pages/Layout_Related/demo_section.py +84 -0
  38. pages/Layout_Related/demo_sidebar.py +58 -0
  39. pages/Layout_Related/demo_style.py +67 -0
  40. pages/Layout_Related/demo_tabs.py +38 -0
  41. pages/Layout_Related/folder.yaml +2 -0
  42. pages/system/bak/config.yaml +15 -0
  43. pages/system/layout/myfooter.py +11 -0
  44. pages/system/layout/myheader.py +22 -0
pages/Advanced_Usage/demo_chat.py ADDED
@@ -0,0 +1,33 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: ollama chat demo
3
+ '''
4
+
5
+ import simplestart as ss
6
+ import ollama
7
+
8
+ ss.md("## ss.chat")
9
+
10
+ setting = {
11
+ "ollama_base_url": "http://localhost:11434",
12
+ "model": "qwen:0.5b",
13
+ "stream":False
14
+ }
15
+
16
+ def mychange(event):
17
+ setting.update({
18
+ "model":mysel.value,
19
+ "stream":mycheck.value,
20
+ })
21
+
22
+
23
+ with ss.sidebar():
24
+ ss.md("#### Models and Parameters")
25
+ ss.space()
26
+ models = ss.ollama.get_models()
27
+
28
+ mysel = ss.selectbox(models, index = 5, label = "Choose ollama models", onchange = mychange)
29
+
30
+ mycheck = ss.checkbox("Streaming Output", onchange = mychange)
31
+
32
+
33
+ mychat = ss.ollama.chat(demo = False, setting = setting)
pages/Advanced_Usage/demo_component.py ADDED
@@ -0,0 +1,104 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: component
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md("### ss.component Custom Component")
8
+ ss.md("You can customize components using HTML, JS, and CSS, implemented through an iframe.")
9
+
10
+ ss.space()
11
+ ss.md('''
12
+ #### 🔅 Example
13
+ ''')
14
+ ss.space()
15
+
16
+ def testme(state, value):
17
+ mytext.text = "Data received from the frontend UI: " + value["value"]
18
+
19
+ # By default, the <iframe> width is 300 pixels and the height is 150 pixels.
20
+ ss.text("Enter content in the text box and press Enter.")
21
+
22
+ myplugin = ss.component(path = f"components/index.html", onData = testme) ###style="border:none")
23
+
24
+ def postdata():
25
+ data = {"my_input_value":"text from python"}
26
+ myplugin.postMessage(data)
27
+
28
+ mytext = ss.text("Data received from the frontend UI: ")
29
+
30
+ ss.markdown("---")
31
+ ss.space()
32
+ ss.text("Click the button to send data to the frontend UI.")
33
+ ss.button("post data", onclick=postdata)
34
+
35
+ ss.space()
36
+
37
+ ss.write("Python Side Code")
38
+
39
+ ss.md('''
40
+ ```python
41
+ import simplestart as ss
42
+
43
+ def testme(state, value):
44
+ mytext.text = "Data received from the frontend UI: " + value["value"]
45
+
46
+ ss.text("Enter content in the text box and press Enter.")
47
+ myplugin = ss.component(path = f"components/index.html", onData = testme)
48
+
49
+ def postdata():
50
+ data = {"my_input_value":"text from python"}
51
+ myplugin.postMessage(data)
52
+
53
+ mytext = ss.text("Data received from the frontend UI: ")
54
+
55
+ ss.markdown("---")
56
+
57
+ ss.space()
58
+ ss.text("Click the button to send data to the frontend UI.")
59
+ ss.button("post data", onclick=postdata)
60
+
61
+ ```
62
+ ''')
63
+
64
+ ss.write("Plugin/HTML/JS Side Code")
65
+
66
+ ss.md('''
67
+ ```html
68
+ <html>
69
+
70
+ <head>
71
+ <script src="pybridge.js"></script>
72
+ </head>
73
+
74
+ <body style="height:100px">
75
+ <input id="myinput" value="" autocomplete="off" placeholder="Enter content and press Enter" />
76
+ </body>
77
+
78
+ <script>
79
+ var myInput = document.getElementById("myinput");
80
+
81
+ myInput.addEventListener("change", function() {
82
+ //// Send message to the Python side
83
+ sendDataToPython({
84
+ value: myInput.value,
85
+ });
86
+ })
87
+
88
+ //Receive messages from the Python side
89
+ window.addEventListener("message", onDataFromPython);
90
+
91
+ function onDataFromPython(event) {
92
+ var data = event.data.arg;
93
+ if (event.data.type !== "ss:render") return;
94
+ myInput.value = data.my_input_value; // Access values sent from Python here!
95
+ }
96
+
97
+ // If system height setting fails, you can manually set the height
98
+ //setFrameHeight(200);
99
+ </script>
100
+
101
+ </html>
102
+
103
+ ```
104
+ ''')
pages/Advanced_Usage/demo_loadvue.py ADDED
@@ -0,0 +1,134 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: loadvue
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md("## ss.loadvue Load Vue SFC")
8
+
9
+ ss.space()
10
+ ss.md("In SimpleStart, you can load custom Vue Single File Components using ss.loadvue, enabling property and data interaction.")
11
+
12
+ ss.space()
13
+
14
+ ss.space()
15
+ ss.md('''
16
+ #### 🔅 Example
17
+
18
+ In this example, we define a simple frontend component that includes an "ontest" event. When the user clicks the "handle on server" button,
19
+ the Python side's ontest event handler will process it and receive data passed from the frontend component. Meanwhile, when the "Modify Data"
20
+ button on the Python side is clicked, the frontend component will respond by changing the displayed content.
21
+ ''')
22
+
23
+ ss.space("mt-8")
24
+ ss.md("---")
25
+ ss.space("mt-8")
26
+
27
+ tagid = 0
28
+ tags = ["Python", "Java", "Javascript"]
29
+ data = {"count":0, "language":"C++"}
30
+ global myvue
31
+
32
+ #trigger event on server from client side
33
+ def ontest(event):
34
+ ss.message(event.value)
35
+
36
+ #change data in client component on server side
37
+ def changedata(event):
38
+ global tagid
39
+ myvue.data["language"] = tags[tagid]
40
+ myvue.update()
41
+
42
+ tagid = (tagid+1) % 3
43
+
44
+ ss.text("Python Side")
45
+ ss.button("Modify Data", onclick=changedata)
46
+
47
+ ss.space()
48
+ sec = ss.section()
49
+
50
+ def onPageLoad():
51
+ global myvue
52
+ #load code from file
53
+ with sec:
54
+ ss.text("Component Side")
55
+ myvue = ss.loadvue(path = "components/mycomponent.vue", data = data, handlers = {"ontest":ontest})
56
+
57
+
58
+ ss.space()
59
+ ss.write("Python Side Code")
60
+
61
+ ss.md('''
62
+ ```python
63
+ import simplestart as ss
64
+
65
+ tagid = 0
66
+ global myvue
67
+
68
+ tags = ["Python", "Java", "Javascript"]
69
+ data = {"count":0, "language":"C++"}
70
+
71
+
72
+ #trigger event on server from client side
73
+ def ontest(state, value):
74
+ ss.message(value)
75
+
76
+ #change data in client component on server side
77
+ def changedata(state, value=None):
78
+ global tagid
79
+ myvue.data["language"] = tags[tagid]
80
+ tagid = (tagid+1) % 3
81
+
82
+ ss.text("Python Side")
83
+ ss.button("Modify Data", onclick=changedata)
84
+
85
+
86
+ def onPageLoad():
87
+ global myvue
88
+ #load code from file
89
+ myvue = ss.loadvue(path = "components/mycomponent.vue", data = data, handlers = {"ontest":ontest})
90
+ ```
91
+ ''')
92
+
93
+
94
+ ss.space()
95
+ ss.write("Vue JS Code")
96
+
97
+ ss.md('''
98
+ ```js
99
+ <template>
100
+ <div class="my-component">
101
+ <h1>{{title}}: {{ data.language }}</h1>
102
+ <v-btn @click="testme">handle on server</v-btn>
103
+ </div>
104
+ </template>
105
+
106
+ <script>
107
+ module.exports = {
108
+ name: 'MyComponent',
109
+
110
+ data() {
111
+ return {
112
+ title:"computer",
113
+ }
114
+ },
115
+
116
+ methods: {
117
+ testme(){
118
+ this.streamsync.forwardData(this, eventname="ontest", "12345")
119
+ }
120
+ }
121
+ }
122
+ </script>
123
+
124
+ <style>
125
+ .my-component {
126
+ width:50%;
127
+ background-color: #f0f0f0;
128
+ padding: 20px;
129
+ margin:10px 0;
130
+ }
131
+ </style>
132
+
133
+ ```
134
+ ''')
pages/Advanced_Usage/demo_onload.py ADDED
@@ -0,0 +1,49 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: onPageEnter
3
+ '''
4
+
5
+ import simplestart as ss
6
+ from datetime import datetime
7
+
8
+ ss.md("## onPageEnter Page Load Event")
9
+
10
+ ss.md('''
11
+ ---
12
+ #### 🔅 Example
13
+ ''')
14
+
15
+ ss.md("Every time you enter this page, the onPageEnter event function will be called, and a message will pop up above.")
16
+
17
+
18
+ ss.space()
19
+
20
+ mytext = ss.text("Current Time @currentime")
21
+
22
+ def onPageEnter():
23
+ #ss.write("test")
24
+ ss.message("page enter event")
25
+
26
+
27
+ # Get current time
28
+ now = datetime.now()
29
+ # Format time as a string
30
+ time_str = now.strftime('%Y-%m-%d %H:%M:%S')
31
+ ss.session["currentime"] = time_str
32
+
33
+
34
+ ss.space()
35
+
36
+ ss.write('''
37
+ ---
38
+ #### 🔎 Code
39
+ ''')
40
+
41
+ ss.md('''
42
+ ```python
43
+ import simplestart as ss
44
+
45
+ def onPageEnter():
46
+ ss.message("page enter event")
47
+
48
+ ```
49
+ ''')
pages/Advanced_Usage/demo_session.py ADDED
@@ -0,0 +1,134 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: session
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md("## ss.session - reactive session variables")
8
+ ss.md("By modifying the session variable, the view can be automatically re-rendered")
9
+
10
+ ss.space()
11
+
12
+ ss.md('''
13
+ ---
14
+ #### 🔅 Example 1 - Basic
15
+ ''')
16
+
17
+
18
+ #in this page
19
+ ss.session["count"] = 100
20
+
21
+ mytext = ss.text("The couns is @count")
22
+
23
+
24
+ def change_count():
25
+ ss.session.count += 1
26
+
27
+ ss.button("Add Count", onclick=change_count)
28
+
29
+ ss.write('''
30
+ ---
31
+ #### 🔎 Code
32
+ ''')
33
+
34
+ ss.md('''
35
+ ```python
36
+ import simplestart as ss
37
+
38
+ ss.session["count"] = 100
39
+
40
+ mytext = ss.text("The couns is @count")
41
+
42
+
43
+ def change_count():
44
+ ss.session.count += 1
45
+
46
+ ss.button("Add Count", onclick=change_count)
47
+
48
+ ```
49
+ ''')
50
+
51
+ ss.space()
52
+
53
+ ss.md('''
54
+ ---
55
+ #### 🔅 Example 2 - Dict
56
+ ''')
57
+
58
+ student = {
59
+ "name":"Sam",
60
+ "age":18,
61
+ "gender":"Male",
62
+ "favorite": "Sport, movie"
63
+ }
64
+
65
+ ss.session.data = student
66
+
67
+ ss.markdown('''
68
+ ### Student Info
69
+ **Name:** @data.name
70
+ **Age:** @data.age
71
+ **Gender:** @data.gender
72
+ **Favorite:** @data.favorite
73
+ ''')
74
+
75
+ def change_student(event):
76
+ student = {
77
+ "name":"Jane",
78
+ "age":17,
79
+ "gender":"Female",
80
+ "favorite": "Music, painting"
81
+ }
82
+ ss.session.data = student
83
+
84
+ def change_info(event):
85
+ ss.session.data["name"] = "Sally"
86
+
87
+ ss.button("Change Student", onclick = change_student)
88
+ ss.button("Change Info", onclick = change_info)
89
+
90
+ ss.write('''
91
+ ---
92
+ #### 🔎 Code
93
+ ''')
94
+
95
+ ss.md('''
96
+ ```python
97
+ import simplestart as ss
98
+
99
+ student = {
100
+ "name":"Sam",
101
+ "age":18,
102
+ "gender":"Male",
103
+ "favorite": "Sport, movie"
104
+ }
105
+
106
+ ss.session.data = student
107
+
108
+ ss.markdown(\'''
109
+ ### Student Info
110
+ **Name:** \@data.name
111
+ **Age:** \@data.age
112
+ **Gender:** \@data.gender
113
+ **Favorite:** \@data.favorite
114
+ \''')
115
+
116
+ def change_student(event):
117
+ student = {
118
+ "name":"Jane",
119
+ "age":17,
120
+ "gender":"Female",
121
+ "image":"",
122
+ "favorite": "Music, painting"
123
+ }
124
+ ss.session.data = student
125
+
126
+ def change_info(event):
127
+ ss.session.data["name"] = "Sally"
128
+
129
+ ss.button("Change Student", onclick = change_student)
130
+ ss.button("Change Info", onclick = change_info)
131
+
132
+ ```
133
+ ''')
134
+
pages/Advanced_Usage/demo_template.py ADDED
@@ -0,0 +1,160 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: template
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md("## ss.template Load VUE Template")
8
+
9
+ ss.space("mt-8")
10
+ ss.md('''
11
+ In SimpleStart, you can define simple Vue components using ss.template to achieve property and data interaction.
12
+
13
+ #### Function
14
+ ss.template(src, path, data, handlers)
15
+
16
+ ##### Function Description
17
+
18
+ | Parameter | Description |
19
+ | --- | --- |
20
+ | src | Component script in string format |
21
+ | path | Path to the original code of the external component file |
22
+ | data | Data used for interaction between frontend components and the Python backend |
23
+ | handlers | Events defined in the frontend component, implemented on the Python side |
24
+
25
+ ''')
26
+
27
+ ss.space("mt-8")
28
+
29
+
30
+ template = '''
31
+ <v-card
32
+ class="mx-auto text-white"
33
+ color="#26c6da"
34
+ max-width="400"
35
+ prepend-icon="mdi-twitter"
36
+ title="Twitter"
37
+ >
38
+ <template v-slot:prepend>
39
+ <v-icon size="x-large"></v-icon>
40
+ </template>
41
+
42
+ <v-card-text class="text-h6 py-2">
43
+ "SimpleStart is a easy way to build webpage and visualize data."
44
+ </v-card-text>
45
+
46
+ <v-card-actions>
47
+ <v-list-item class="w-100">
48
+ <template v-slot:prepend>
49
+ <v-avatar
50
+ color="grey-darken-3"
51
+ 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"
52
+ ></v-avatar>
53
+ </template>
54
+
55
+ <v-list-item-title>Evan You</v-list-item-title>
56
+
57
+ <v-list-item-subtitle>Data Science Engineer</v-list-item-subtitle>
58
+
59
+ <template v-slot:append>
60
+ <div class="justify-self-end">
61
+ <v-icon class="me-1" icon="mdi-heart" \@click="onserver('myclick')"></v-icon>
62
+ <span class="subheading me-2">{{data.vote}}</span>
63
+ <span class="me-1">·</span>
64
+ <v-icon class="me-1" icon="mdi-share-variant"></v-icon>
65
+ <span class="subheading">45</span>
66
+ </div>
67
+ </template>
68
+ </v-list-item>
69
+ </v-card-actions>
70
+ </v-card>
71
+ '''
72
+
73
+ def myclick(event):
74
+ mycard.vote = mycard.vote + 1
75
+
76
+ data = {"vote":256}
77
+ mycard = ss.template(template, data = data, handlers = {"myclick":myclick})
78
+
79
+ def increment(event):
80
+ mycard.vote = mycard.vote + 1
81
+ #mycard.style = "color:red"
82
+
83
+ ss.space()
84
+ ss.button("Thumb Up", onclick=increment)
85
+
86
+ ss.space("mt-8")
87
+
88
+ ss.write('''
89
+ ---
90
+ #### Python Side Code
91
+ ''')
92
+
93
+ ss.md('''
94
+ ```python
95
+ import simplestart as ss
96
+
97
+ template = \'''
98
+ <v-card
99
+ class="mx-auto text-white"
100
+ color="#26c6da"
101
+ max-width="400"
102
+ prepend-icon="mdi-twitter"
103
+ title="Twitter"
104
+ >
105
+ <template v-slot:prepend>
106
+ <v-icon size="x-large"></v-icon>
107
+ </template>
108
+
109
+ <v-card-text class="text-h6 py-2">
110
+ "SimpleStart is a easy way to build webpage and visualize data."
111
+ </v-card-text>
112
+
113
+ <v-card-actions>
114
+ <v-list-item class="w-100">
115
+ <template v-slot:prepend>
116
+ <v-avatar
117
+ color="grey-darken-3"
118
+ 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"
119
+ ></v-avatar>
120
+ </template>
121
+
122
+ <v-list-item-title>Evan You</v-list-item-title>
123
+
124
+ <v-list-item-subtitle>Data Science Engineer</v-list-item-subtitle>
125
+
126
+ <template v-slot:append>
127
+ <div class="justify-self-end">
128
+ <v-icon class="me-1" icon="mdi-heart" \@click="onserver('myclick')"></v-icon>
129
+ <span class="subheading me-2">{{data.vote}}</span>
130
+ <span class="me-1">·</span>
131
+ <v-icon class="me-1" icon="mdi-share-variant"></v-icon>
132
+ <span class="subheading">45</span>
133
+ </div>
134
+ </template>
135
+ </v-list-item>
136
+ </v-card-actions>
137
+ </v-card>
138
+ \'''
139
+
140
+ def myclick(event):
141
+ mycard.vote = mycard.vote + 1
142
+
143
+ data = {"vote":256}
144
+ mycard = ss.template(template, data = data, handlers = {"myclick":myclick})
145
+
146
+ def increment(event):
147
+ mycard.vote = mycard.vote + 1
148
+ #mycard.style = "color:red"
149
+
150
+ ss.space()
151
+ ss.button("Thumb Up", onclick=increment)
152
+ ```
153
+ ''')
154
+
155
+
156
+ ss.space("mt-8")
157
+
158
+ def onPageEnter():
159
+ ss.session["counter"] = 0
160
+
pages/Advanced_Usage/demo_when.py ADDED
@@ -0,0 +1,104 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: when
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md('''
8
+ ## ss.when onditional Statements
9
+ ''')
10
+
11
+ ss.space()
12
+ ss.md('''
13
+ #### 🔅 Example
14
+ ''')
15
+
16
+ #api
17
+ def increment(event):
18
+ ss.session["counter"] += 1
19
+
20
+ def decrement(event):
21
+ ss.session["counter"] -= 1
22
+
23
+
24
+ #conditional func
25
+ def conditioner(event):
26
+ #print("event", event)
27
+ if event["flag"] == 1:
28
+ if ss.session["counter"] >= 5:
29
+ return True
30
+ else:
31
+ return False
32
+ elif event["flag"] == 2:
33
+ return (ss.session["viewcode"] == 1)
34
+
35
+
36
+ # State initialisation
37
+ ss.session["counter"] = 0
38
+ ss.session["viewcode"] = 0
39
+
40
+ #ui
41
+ ss.text("The count is @counter.")
42
+
43
+ ss.button("Increment", onclick=increment)
44
+ ss.button("Decrement", onclick=decrement)
45
+
46
+ ss.write("New content will appear below when the counter is greater than 5.")
47
+
48
+ with ss.when(conditioner, flag = 1): # Conditional rendering
49
+ ss.text("Well done on reaching 5 👋🌷🍾")
50
+
51
+ ss.write("When the counter is less than 5, the new content will be hidden.")
52
+
53
+
54
+ ss.space()
55
+
56
+ ss.write("#### 🔎 Code")
57
+ ss.write("---")
58
+
59
+ def viewcode():
60
+ ss.session["viewcode"] = 1
61
+
62
+ ss.button("View Code", size="small", onclick = viewcode)
63
+
64
+ with ss.when(conditioner, flag = 2):
65
+ ss.md('''
66
+ ```python
67
+ import simplestart as ss
68
+
69
+ #api
70
+ def increment(event):
71
+ ss.session["counter"] += 1
72
+
73
+ def decrement(event):
74
+ ss.session["counter"] -= 1
75
+
76
+
77
+ #conditional func
78
+ def conditioner(event):
79
+ return (ss.session["counter"] >= 5)
80
+
81
+ # State initialisation
82
+ ss.session["counter"] = 0
83
+ ss.session["viewcode"] = 0
84
+
85
+ #ui
86
+ ss.text("The count is @counter.")
87
+
88
+ ss.button("Increment", onclick=increment)
89
+ ss.button("Decrement", onclick=decrement)
90
+
91
+ ss.write("New content will appear below when the counter is greater than 5.")
92
+
93
+ with ss.when(conditioner, flag = 1): # Conditional rendering
94
+ ss.text("Well done on reaching 5 👋🌷🍾")
95
+
96
+ ss.write("When the counter is less than 5, the new content will be hidden.")
97
+ ```
98
+ ''')
99
+
100
+ ss.md('''
101
+ ::: tip
102
+ The code view above is also implemented using ss.when.
103
+ :::
104
+ ''')
pages/Advanced_Usage/folder.yaml ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ alias: Advantage Usage
2
+ order_name: "005"
pages/Chart_Data/demo_bokeh.py ADDED
@@ -0,0 +1,132 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: chart bokeh
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ from bokeh.plotting import figure
8
+ from bokeh.models import ColumnDataSource
9
+ from bokeh.resources import CDN
10
+ from bokeh.embed import file_html
11
+ from sklearn.datasets import load_iris
12
+ import pandas as pd
13
+
14
+ # Load the Iris dataset
15
+ iris = load_iris()
16
+ df = pd.DataFrame(data=iris.data, columns=iris.feature_names)
17
+ df['species'] = iris.target
18
+ df['species'] = df['species'].map({0: 'setosa', 1: 'versicolor', 2: 'virginica'})
19
+
20
+
21
+ # Create the data source and figure object
22
+ source = ColumnDataSource(data=dict(
23
+ sepal_length=df['sepal length (cm)'],
24
+ sepal_width=df['sepal width (cm)'],
25
+ petal_length=df['petal length (cm)'],
26
+ petal_width=df['petal width (cm)'],
27
+ species=df['species']
28
+ ))
29
+
30
+ # Create a Bokeh scatter plot
31
+ p = figure(title="Iris Dataset Scatter Plot", x_axis_label='Sepal Length (cm)', y_axis_label='Sepal Width (cm)',
32
+ tools="pan,wheel_zoom,box_zoom,reset,hover,save", width=800)
33
+
34
+ # Set different colors based on species
35
+ colors = {'setosa': 'blue', 'versicolor': 'green', 'virginica': 'red'}
36
+
37
+ for species, color in colors.items():
38
+ df_species = df[df['species'] == species]
39
+ source_species = ColumnDataSource(data=dict(
40
+ sepal_length=df_species['sepal length (cm)'],
41
+ sepal_width=df_species['sepal width (cm)']
42
+ ))
43
+ p.scatter('sepal_length', 'sepal_width', source=source_species, legend_label=species, color=color,
44
+ size=10, alpha=0.5)
45
+
46
+ p.legend.title = 'Species'
47
+ p.legend.location = 'top_left'
48
+
49
+ # Embed the Bokeh figure into SimpleStart
50
+ html = file_html(p, CDN, "Iris Dataset Scatter Plot")
51
+
52
+ #ui
53
+ ss.md('''
54
+ ## simplestart Chart Demo - Bokeh
55
+ ''')
56
+
57
+ ss.space()
58
+ ss.md('''
59
+ #### 🔅 Example
60
+ An interactive scatter plot of the Iris data using Bokeh
61
+ ''')
62
+
63
+ ss.space()
64
+ ss.htmlview(html, border = False)
65
+
66
+ ss.space()
67
+ ss.write("#### 🔎 Code")
68
+
69
+ def viewcode():
70
+ ss.session["viewcode"] = 1
71
+
72
+ ss.session["viewcode"] = 0
73
+ ss.button("View Code", size="small", onclick = viewcode)
74
+
75
+ def conditioner(event):
76
+ return (ss.session["viewcode"] == 1)
77
+
78
+ code = '''
79
+ ```python
80
+ import simplestart as ss
81
+
82
+ from bokeh.plotting import figure
83
+ from bokeh.models import ColumnDataSource
84
+ from bokeh.resources import CDN
85
+ from bokeh.embed import file_html
86
+ from sklearn.datasets import load_iris
87
+ import pandas as pd
88
+
89
+ # Load the Iris dataset
90
+ iris = load_iris()
91
+ df = pd.DataFrame(data=iris.data, columns=iris.feature_names)
92
+ df['species'] = iris.target
93
+ df['species'] = df['species'].map({0: 'setosa', 1: 'versicolor', 2: 'virginica'})
94
+
95
+
96
+ # Create the data source and figure object
97
+ source = ColumnDataSource(data=dict(
98
+ sepal_length=df['sepal length (cm)'],
99
+ sepal_width=df['sepal width (cm)'],
100
+ petal_length=df['petal length (cm)'],
101
+ petal_width=df['petal width (cm)'],
102
+ species=df['species']
103
+ ))
104
+
105
+ # Create a Bokeh scatter plot
106
+ p = figure(title="Iris Dataset Scatter Plot", x_axis_label='Sepal Length (cm)', y_axis_label='Sepal Width (cm)',
107
+ tools="pan,wheel_zoom,box_zoom,reset,hover,save", width=800)
108
+
109
+ # Set different colors based on species
110
+ colors = {'setosa': 'blue', 'versicolor': 'green', 'virginica': 'red'}
111
+
112
+ for species, color in colors.items():
113
+ df_species = df[df['species'] == species]
114
+ source_species = ColumnDataSource(data=dict(
115
+ sepal_length=df_species['sepal length (cm)'],
116
+ sepal_width=df_species['sepal width (cm)']
117
+ ))
118
+ p.scatter('sepal_length', 'sepal_width', source=source_species, legend_label=species, color=color,
119
+ size=10, alpha=0.5)
120
+
121
+ p.legend.title = 'Species'
122
+ p.legend.location = 'top_left'
123
+
124
+ # Embed the Bokeh figure into SimpleStart
125
+ html = file_html(p, CDN, "Iris Dataset Scatter Plot")
126
+
127
+ #ui
128
+ ss.htmlview(html, border = False)
129
+ '''
130
+
131
+ with ss.when(conditioner):
132
+ ss.md(code)
pages/Chart_Data/demo_pyplot.py ADDED
@@ -0,0 +1,134 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: chart pyplot
3
+ '''
4
+
5
+ import streamsync as ss
6
+
7
+ import seaborn as sns
8
+ import matplotlib as mpl
9
+ import matplotlib.pyplot as plt
10
+
11
+
12
+ #下载不了，所以加一个参数data_home
13
+ data_home = "./data/seaborn"
14
+
15
+ ss.md('''
16
+ ## ss.pyplot Drawing
17
+ ''')
18
+
19
+
20
+ ss.space()
21
+ ss.md('''
22
+ #### 🔅 Example
23
+ ''')
24
+
25
+ ss.write("#### 1. Draw a Line Plot")
26
+
27
+ sns.set_style("whitegrid")
28
+ titanic = sns.load_dataset("titanic", data_home=data_home)
29
+ sns.lineplot(x="age", y="fare", hue="sex", data=titanic)
30
+ plt.show()
31
+
32
+ fig = plt.gcf()
33
+ ss.pyplot(fig, style="border:1px solid gray; width:600px")
34
+
35
+ ss.write("#### 2. Draw a Scatter Plot")
36
+
37
+ sns.set_style("whitegrid")
38
+ tips = sns.load_dataset("tips", data_home=data_home)
39
+ sns.scatterplot(x="total_bill", y="tip", data=tips)
40
+ plt.show()
41
+
42
+ fig = plt.gcf()
43
+ ss.pyplot(fig, style="border:1px solid gray; width:600px")
44
+
45
+ ss.write("#### 3. Draw a Bar Plot")
46
+
47
+ sns.set_style("whitegrid")
48
+ titanic = sns.load_dataset("titanic",data_home=data_home)
49
+ sns.barplot(x="class", y="survived", data=titanic)
50
+ plt.show()
51
+
52
+ fig = plt.gcf()
53
+ ss.pyplot(fig, style="border:1px solid gray; width:600px")
54
+
55
+
56
+ ss.write("#### 4. Draw a Histogram")
57
+ sns.set_style("whitegrid")
58
+ titanic = sns.load_dataset("titanic",data_home=data_home)
59
+ sns.histplot(x="age", data=titanic)
60
+ plt.show()
61
+
62
+ fig = plt.gcf()
63
+ ss.pyplot(fig, style="border:1px solid gray; width:600px")
64
+
65
+
66
+ ss.space()
67
+
68
+ ss.write("#### 🔎 Code")
69
+ ss.write("---")
70
+
71
+ def viewcode():
72
+ ss.session["viewcode"] = 1
73
+
74
+ ss.button("View Code", size="small", onclick = viewcode)
75
+
76
+
77
+ def conditioner(event):
78
+ return ss.session["viewcode"] == 1
79
+
80
+ with ss.when(conditioner):
81
+ ss.md('''
82
+ ```python
83
+ import streamsync as ss
84
+
85
+ import seaborn as sns
86
+ import matplotlib as mpl
87
+ import matplotlib.pyplot as plt
88
+
89
+
90
+ data_home = "./data/seaborn"
91
+
92
+
93
+ ss.write("#### 1. Draw a Line Plot")
94
+
95
+ sns.set_style("whitegrid")
96
+ titanic = sns.load_dataset("titanic", data_home=data_home)
97
+ sns.lineplot(x="age", y="fare", hue="sex", data=titanic)
98
+ plt.show()
99
+
100
+ fig = plt.gcf()
101
+ ss.pyplot(fig, style="border:1px solid gray; width:600px")
102
+
103
+ ss.write("#### 2. Draw a Scatter Plot")
104
+
105
+ sns.set_style("whitegrid")
106
+ tips = sns.load_dataset("tips", data_home=data_home)
107
+ sns.scatterplot(x="total_bill", y="tip", data=tips)
108
+ plt.show()
109
+
110
+ fig = plt.gcf()
111
+ ss.pyplot(fig, style="border:1px solid gray; width:600px")
112
+
113
+ ss.write("#### 3. Draw a Bar Plot")
114
+
115
+ sns.set_style("whitegrid")
116
+ titanic = sns.load_dataset("titanic",data_home=data_home)
117
+ sns.barplot(x="class", y="survived", data=titanic)
118
+ plt.show()
119
+
120
+ fig = plt.gcf()
121
+ ss.pyplot(fig, style="border:1px solid gray; width:600px")
122
+
123
+
124
+ ss.write("#### 4. Draw a Histogram")
125
+ sns.set_style("whitegrid")
126
+ titanic = sns.load_dataset("titanic",data_home=data_home)
127
+ sns.histplot(x="age", data=titanic)
128
+ plt.show()
129
+
130
+ fig = plt.gcf()
131
+ ss.pyplot(fig, style="border:1px solid gray; width:600px")
132
+ ```
133
+ ''')
134
+
pages/Chart_Data/folder.yaml ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ alias: Chart Data
2
+ order_name: "003"
pages/Content_Display/demo_audio.py ADDED
@@ -0,0 +1,76 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Audio Playback
3
+ '''
4
+
5
+ import streamsync as ss
6
+
7
+ ss.md("## ss.audio")
8
+
9
+
10
+ ss.space()
11
+ ss.md('''
12
+ #### 🔅 Example
13
+ ''')
14
+
15
+ ss.space()
16
+
17
+ audiosrc = "media/test.wav"
18
+ player = ss.audio(audiosrc)
19
+
20
+
21
+ ss.space("mt-8")
22
+
23
+ ss.write('''
24
+ ---
25
+ #### 🔎 Code
26
+ ''')
27
+
28
+ ss.md('''
29
+ ```python
30
+ import simplestart as ss
31
+
32
+ audiosrc = "media/davide_quatela--breathing_barcelona.mp3"
33
+ player = ss.audio(audiosrc)
34
+ ```
35
+ ''')
36
+
37
+ def playaudio(event):
38
+ if event.tag == "play":
39
+ player.play()
40
+ elif event.tag == "pause":
41
+ player.pause()
42
+ elif event.tag == "change":
43
+ player.src = "media/davide_quatela--breathing_barcelona.mp3"
44
+ elif event.tag == "seek":
45
+ player.seek(3)
46
+
47
+ ss.button("play", onclick = playaudio, eventTag = "play")
48
+ ss.button("pause", onclick = playaudio, eventTag = "pause")
49
+ ss.button("change source", onclick = playaudio, eventTag = "change")
50
+ ss.button("seek", onclick = playaudio, eventTag = "seek")
51
+
52
+ ss.md('''
53
+ ```python
54
+ def playaudio(event):
55
+ if event.tag == "play":
56
+ player.play()
57
+ elif event.tag == "pause":
58
+ player.pause()
59
+ elif event.tag == "change":
60
+ player.src = "media/davide_quatela--breathing_barcelona.mp3"
61
+ elif event.tag == "seek":
62
+ player.seek(3)
63
+
64
+ ss.button("play", onclick = playaudio, eventTag = "play")
65
+ ss.button("pause", onclick = playaudio, eventTag = "pause")
66
+ ss.button("change source", onclick = playaudio, eventTag = "change")
67
+ ss.button("seek", onclick = playaudio, eventTag = "seek")
68
+ ```
69
+ ''')
70
+
71
+ ss.md('''
72
+ ::: tip
73
+ ss.audio supports audio formats including wav, mp3, etc.
74
+ :::
75
+ ''')
76
+
pages/Content_Display/demo_html.py ADDED
@@ -0,0 +1,52 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Html Hypertext
3
+ '''
4
+
5
+ import streamsync as ss
6
+
7
+
8
+ ss.md("## ss.html")
9
+
10
+ ss.space("")
11
+
12
+ ss.md('''
13
+ #### 🔅 Example
14
+ ''')
15
+
16
+
17
+ ss.md("### html")
18
+
19
+ ss.html(f"""
20
+ <p>This is a piece of rich text content, which contains <strong>bold</strong> and <em>italic</em> text.</p>
21
+ <style>
22
+ .testclass{{
23
+ color:red;
24
+ font-weight:bold;
25
+ }}
26
+ </style>
27
+ <div class="testclass">this is red</div>
28
+ """)
29
+
30
+ ss.space("mt-8")
31
+
32
+ ss.write('''
33
+ ---
34
+ #### 🔎 Code
35
+ ''')
36
+
37
+ ss.md('''
38
+ ```python
39
+ import simplestart as ss
40
+
41
+ ss.html(f"""
42
+ <p>This is a piece of rich text content, which contains <strong>bold</strong> and <em>italic</em> text.</p>
43
+ <style>
44
+ .testclass{{
45
+ color:red;
46
+ font-weight:bold;
47
+ }}
48
+ </style>
49
+ <div class="testclass">this is red</div>
50
+ """)
51
+ ```
52
+ ''')
pages/Content_Display/demo_image.py ADDED
@@ -0,0 +1,103 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Image
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ import cv2
8
+ from PIL import Image
9
+ import os
10
+
11
+ ss.md("## ss.image")
12
+
13
+ ss.md('''
14
+ #### 🔅 Example
15
+ ''')
16
+
17
+ ss.space()
18
+
19
+ img = "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
20
+
21
+ cols = ss.columns([60,"flex:40"], border=True)
22
+ with cols[0]:
23
+ mytext = ss.text("This is image")
24
+ ss.space()
25
+ myimg = ss.image(img, fit="contain", width=300, height=300)
26
+ ss.text("Image fit mode: @fit_str")
27
+
28
+ def onradiochange(event):
29
+ #ss.message(event.value)
30
+
31
+ ss.session["fit_str"] = event.value
32
+ myimg.fit = event.value
33
+
34
+
35
+ def onradiochange2(event):
36
+ value = event.value
37
+ index = event.index
38
+
39
+ source = ["Http", "PIL", "OpenCV", "Local"]
40
+ ss.session["source_str"] = source[index]
41
+
42
+
43
+ if index == 0:
44
+ img = "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
45
+ ss.session["image_path"] = "\"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\""
46
+ myimg.image = img
47
+ if index == 1:
48
+ image = Image.open('./media/image/dalao.jpeg')
49
+ ss.session["image_path"] = "Image.open('./media/image/dalao.jpeg')"
50
+ myimg["image"] = image
51
+ if index == 2:
52
+ img = cv2.imread('./media/image/cat.jpeg',cv2.IMREAD_COLOR)
53
+ ss.session["image_path"] = "cv2.imread('./media/image/cat.jpeg',cv2.IMREAD_COLOR)"
54
+ myimg.image = img
55
+ if index == 3:
56
+ file_path = './media/image/dog.jpeg'
57
+ ss.session["image_path"] = "\"./media/image/dog.jpeg\""
58
+ myimg.image = file_path
59
+
60
+ def sel_change(event):
61
+ myimg.border = "border" in event.value
62
+
63
+ if "title" in event.value:
64
+ myimg.title = "Title of image"
65
+ else:
66
+ myimg.title = ""
67
+
68
+ if "elevation" in event.value:
69
+ myimg.elevation = 12
70
+ else:
71
+ myimg.elevation = 0
72
+
73
+ with cols[1]:
74
+ ss.text("Image fit mode")
75
+ ss.radio(["fill", "contain", "cover", "none", "scale-down"], index = 1, inline = True, onchange=onradiochange)
76
+ ss.space()
77
+ ss.text("Image source")
78
+ ss.radio(["Http image","PIL image", "OpenCV image", "Local image"], index = 0, inline = True, onchange=onradiochange2)
79
+
80
+ ss.md("---")
81
+ ss.selectbox(["border", "title", "elevation"], label = "Others", multiple = True, onchange = sel_change)
82
+
83
+ ss.space()
84
+
85
+ ss.write('''
86
+ #### 🔎 Code
87
+ ''')
88
+
89
+ ss.md('''
90
+ ```python
91
+ import simplestart as ss
92
+ import cv2
93
+ from PIL import Image
94
+
95
+ img = @image_path
96
+ ss.image(img, fit="@fit_str")
97
+ ```
98
+ ''')
99
+
100
+ def onPageLoad():
101
+ ss.session["fit_str"] = "contain"
102
+ ss.session["source_str"] = "Http"
103
+ ss.session["image_path"] = "\"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\""
pages/Content_Display/demo_markdown.py ADDED
@@ -0,0 +1,65 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Markdown
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md("## ss.markdown")
8
+
9
+ ss.space()
10
+
11
+ ss.md('''
12
+ #### 🔅 Example
13
+ ''')
14
+
15
+ ss.space()
16
+
17
+ test = ss.markdown("- 19^th^")
18
+ ss.markdown("# Heading 1")
19
+ ss.markdown("## Heading 2")
20
+ ss.markdown("### Heading 3")
21
+
22
+ #Horizontal Divider
23
+ ss.markdown("---")
24
+
25
+ ss.markdown('''
26
+ - list item1
27
+ - list item2
28
+ - list item3
29
+ ''')
30
+
31
+ ss.markdown("#### text with color", color = "#409eff")
32
+ ss.markdown(":smile:")
33
+
34
+
35
+
36
+
37
+ ss.space("mt-8")
38
+
39
+ ss.write('''
40
+ ---
41
+ #### 🔎 Code
42
+ ''')
43
+
44
+ ss.md('''
45
+ ```python
46
+ import simplestart as ss
47
+
48
+ ss.markdown("# Heading 1")
49
+ ss.markdown("## Heading 2")
50
+ ss.markdown("### Heading 3")
51
+
52
+ #Horizontal Divider
53
+ ss.markdown("---")
54
+
55
+ ss.markdown(\'''
56
+ - list item1
57
+ - list item2
58
+ - list item3
59
+ \''')
60
+
61
+ ss.markdown("#### text with color", color = "#409eff")
62
+ ss.markdown(":smile:")
63
+
64
+ ```
65
+ ''')
pages/Content_Display/demo_message.py ADDED
@@ -0,0 +1,41 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Message
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md("## ss.message Popup Message")
8
+
9
+ ss.space()
10
+
11
+
12
+ ss.md('''
13
+ #### 🔅 Example
14
+ ''')
15
+ ss.space()
16
+
17
+
18
+ def showmsg():
19
+ ss.message("Hello, world")
20
+
21
+ showmsg()
22
+ ss.button("message", onclick=showmsg)
23
+
24
+
25
+ ss.space("mt-8")
26
+
27
+ ss.write('''
28
+ ---
29
+ #### 🔎 Code
30
+ ''')
31
+
32
+ ss.md('''
33
+ ```python
34
+ import simplestart as ss
35
+
36
+ def showmsg():
37
+ ss.message("Hello, the world")
38
+
39
+ ```
40
+ ''')
41
+
pages/Content_Display/demo_sqlite.py.txt ADDED
@@ -0,0 +1,42 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Sqlite Database
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md("## ss.sqlite Database")
8
+
9
+ ss.space()
10
+ ss.md('''
11
+ Provides simple operations for the SQLite database.
12
+ ''')
13
+
14
+ ss.space()
15
+ ss.md('''
16
+ #### 🔅 Example
17
+ ''')
18
+
19
+ ss.md('''
20
+ ::: tip
21
+ This example reads the Iris dataset from the SQLite database and displays it in a CSV table format.
22
+ For SQLite management, simplestart offers a built-in tool for simple create, read, update, and delete operations.
23
+ :::
24
+ ''')
25
+
26
+ sql = ss.sqlite("./data/ss_data.db")
27
+ df = sql.pd_query("select * from iris")
28
+
29
+ mytable = ss.table(df, editable = True)###, handlers={"current-change":current_change, "selection-change":selection_change})
30
+
31
+ ss.space()
32
+ ss.write("#### Code")
33
+
34
+ ss.md('''
35
+ ```python
36
+ import simplestart as ss
37
+
38
+ sql = ss.sqlite("./data/ss_data.db")
39
+ data = sql.pd_query("select * from HousingData")
40
+ ss.write(data)
41
+ ```
42
+ ''')
pages/Content_Display/demo_table.py ADDED
@@ -0,0 +1,214 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Table
3
+ '''
4
+
5
+ import simplestart as ss
6
+ import pandas as pd
7
+
8
+ ss.md("## ss.table Table Data")
9
+
10
+ ss.md("Display data in table format.")
11
+
12
+ ss.space()
13
+
14
+ ss.md('''
15
+ #### 🔅 Example
16
+ ''')
17
+
18
+ def onchange_index(event):
19
+ value = event.value
20
+ mytable.props.index = value
21
+
22
+
23
+ def onchange_border(event):
24
+ value = event.value
25
+ mytable.props.border = value
26
+
27
+
28
+
29
+ def onchange_sortable(event):
30
+ value = event.value
31
+ mytable.props.sortable = value
32
+
33
+ def onchange_searchable(event):
34
+ value = event.value
35
+ mytable.props.searchable = value
36
+
37
+ def onchange_selectable(event):
38
+ value = event.value
39
+ mytable.props.selectable = value
40
+
41
+ def onchange_editable(event):
42
+ value = event.value
43
+ mytable.props.editable = value
44
+
45
+ def current_change(state, value):
46
+ ss.session["row_selected"] = value["index"]
47
+
48
+ def selection_change(state, value):
49
+ ss.session["selection_change"] = value["selected"]
50
+
51
+
52
+ # Create a dataset with three columns
53
+ data = {'name': ['👧🏻 Alice', '👦🏻 Bob', '👦🏻 Charlie'],
54
+ 'age': [25, 30, 35],
55
+ 'city': ['New York', 'San Francisco', 'Los Angeles'],
56
+ 'health':[90,80,60]
57
+ }
58
+
59
+ df = pd.DataFrame(data)
60
+
61
+ def rowclicked(event):
62
+ #ss.message("row clicked")
63
+ #ss.write("event", event)
64
+ ss.session["itemname"] = event.value["name"]
65
+
66
+
67
+ cols = ss.columns([70,"flex:30; border-left:1px solid lightgray"], design=True, style="border:1px solid lightgray")
68
+ with cols[0]:
69
+ mytable = ss.table(df, handlers={"click:row": rowclicked})
70
+ ss.md("#### Events")
71
+ ss.write("Row clicked: @itemname")
72
+
73
+
74
+ with cols[1]:
75
+ ss.text("setting")
76
+ ss.checkbox("Index", onchange = onchange_index)
77
+ ss.space()
78
+ ss.checkbox("Border", onchange = onchange_border)
79
+ ss.space()
80
+ ss.checkbox("Sort", onchange = onchange_sortable)
81
+ ss.space()
82
+ ss.checkbox("Select", onchange = onchange_selectable)
83
+ ss.space()
84
+ ss.checkbox("Search", onchange = onchange_searchable)
85
+ ss.space()
86
+ ss.checkbox("Edit", onchange = onchange_editable)
87
+
88
+ ss.space("mt-8")
89
+
90
+ ss.write('''
91
+ ---
92
+ #### 🔎 Code
93
+ ''')
94
+
95
+ ss.md('''
96
+ ```python
97
+ import simplestart as ss
98
+
99
+ def current_change(state, value):
100
+ ss.session["row_selected"] = value["index"]
101
+
102
+ def selection_change(state, value):
103
+ ss.session["selection_change"] = value["selected"]
104
+
105
+ data = {'name': ['Alice', 'Bob', 'Charlie'],
106
+ 'age': [25, 30, 35],
107
+ 'city': ['New York', 'San Francisco', 'Los Angeles'],
108
+ 'health':[90,80,60]}
109
+ df = pd.DataFrame(data)
110
+
111
+ ss.table(df, handlers={\"current-change\":current_change, \"selection-change\":selection_change})
112
+ ss.md(\"#### Events\")
113
+ ss.write(\"Row selected: \")
114
+ ss.write(\"Selection changed: \")
115
+
116
+ def onPageLoad():
117
+ ss.session["row_selected"] = ''
118
+ ss.session["selection_change"] = ''
119
+
120
+ ```
121
+ ''')
122
+
123
+
124
+ ss.md('''
125
+ ---
126
+ #### 🔅 Example - Custom column.
127
+ ''')
128
+
129
+
130
+ data = {'name': ['👧🏻 Alice', '👦🏻 Bob', '👦🏻 Charlie'],
131
+ 'age': [25, 30, 35],
132
+ 'city': [':sunny: New York', ':cloud: San Francisco', ':sunny: Los Angeles'],
133
+ 'health':[90,80,60]
134
+ }
135
+
136
+ df = pd.DataFrame(data)
137
+
138
+ cols = ss.columns([70,"flex:30; border-left:1px solid lightgray"], design=True, style="border:1px solid lightgray")
139
+
140
+
141
+ jscode = '''
142
+ //console.log(test)
143
+ if(item.col == "city")
144
+ return md(item.value);
145
+ else{
146
+ var rating = item.value/20
147
+ return '<el-rate :model-value="' + rating + '" disabled />'
148
+ }
149
+ return res;/// "<el-tag>" + item.value + "</el-tag>";
150
+ '''
151
+
152
+ #mytable_ex = ss.table(df, custom_columns = ["city"], custom_columns_template = vuestr)
153
+ with cols[0]:
154
+ mytable_ex = ss.table(df, custom_fields = ["city", "health"], cell_render = jscode, border = True)
155
+ with cols[1]:
156
+ ss.write("Each column can be customized for display.")
157
+
158
+ ss.space("mt-8")
159
+
160
+ ss.write('''
161
+ ---
162
+ #### 🔎 代码
163
+ ''')
164
+
165
+ ss.md('''
166
+ ```python
167
+ import simplestart as ss
168
+
169
+ data = {'name': ['👧🏻 Alice', '👦🏻 Bob', '👦🏻 Charlie'],
170
+ 'age': [25, 30, 35],
171
+ 'city': [':sunny: New York', ':cloud: San Francisco', ':sunny: Los Angeles'],
172
+ 'health':[90,80,60]
173
+ }
174
+ df = pd.DataFrame(data)
175
+
176
+ vuestr = \'''
177
+ <template>
178
+ <v-row>
179
+ <v-rating
180
+ v-model="rating" density="compact" color="orange" half-increments></v-rating>
181
+ <v-chip variant="text">{{item.value}}</v-chip>
182
+ </v-row>
183
+ </template>
184
+
185
+ <script>
186
+
187
+ module.exports = {
188
+ props:["item"],
189
+
190
+ data () {
191
+ return {
192
+ rating: 3
193
+ }
194
+ },
195
+ methods: {
196
+ //todo
197
+ },
198
+ mounted: function () {
199
+ this.rating = this.item.value/20
200
+ },
201
+ }
202
+ </script>
203
+ \'''
204
+
205
+ ss.table(df, custom_columns = ["city"], vue_columns = ["health"], vue_code = vuecode)
206
+ ```
207
+ ''')
208
+
209
+ def onPageLoad():
210
+ ss.session["show_border"] = ''
211
+ ss.session["selectable"] = ''
212
+ ss.session["sortable"] = ''
213
+ ss.session["row_selected"] = ''
214
+ ss.session["selection_change"] = ''
pages/Content_Display/demo_text.py ADDED
@@ -0,0 +1,38 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Text
3
+ '''
4
+
5
+ import streamsync as ss
6
+
7
+ ss.md("## ss.text Text")
8
+ ss.md("Supports the style parameter.")
9
+
10
+
11
+ ss.space()
12
+ ss.space()
13
+ ss.md('''
14
+ #### 🔅 Example
15
+ ''')
16
+
17
+ ss.md("---")
18
+
19
+ #Basic usage
20
+ test = ss.text("hello, world")
21
+
22
+ #Change color
23
+ ss.text("This is a red string", style="color:red")
24
+
25
+ ss.space()
26
+ ss.write("#### 🔎 Code")
27
+
28
+ ss.md('''
29
+ ```python
30
+ import simplestart as ss
31
+
32
+ #Basic usage
33
+ test = ss.text("hello, world")
34
+
35
+ #Change color
36
+ ss.text("This is a red string", style="color:red")
37
+ ```
38
+ ''')
pages/Content_Display/demo_video.py ADDED
@@ -0,0 +1,39 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Video Playback
3
+ '''
4
+
5
+ import streamsync as ss
6
+
7
+ ss.md("## ss.video Video Playback")
8
+
9
+ ss.md("Supports playing videos in formats like mp4.")
10
+
11
+ ss.md('''
12
+ #### 🔅 Example
13
+ ''')
14
+
15
+ src = "https://media.w3.org/2010/05/sintel/trailer.mp4"
16
+
17
+ player = ss.video(src, style="width:50%")
18
+
19
+ ss.text("Source: https://media.w3.org/2010/05/sintel/trailer.mp4", style="color:gray")
20
+
21
+ ss.space("mt-8")
22
+
23
+ ss.write('''
24
+ ---
25
+ #### 🔎 Code
26
+ ''')
27
+
28
+ ss.md('''
29
+ ```python
30
+ import simplestart as ss
31
+
32
+ src = "https://media.w3.org/2010/05/sintel/trailer.mp4"
33
+
34
+ player = ss.video(src, style="width:100%; max-width:640px")
35
+
36
+ #Change video source
37
+ #player.src = "..."
38
+ ```
39
+ ''')
pages/Content_Display/demo_write.py ADDED
@@ -0,0 +1,80 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Write
3
+ '''
4
+
5
+ import streamsync as ss
6
+ import pandas as pd
7
+
8
+ ss.md("## ss.write Output Data")
9
+
10
+ ss.md("ss.write is similar to print; it can output text, lists, and other types, making testing and output easy.")
11
+
12
+ ss.space()
13
+
14
+ ss.md('''
15
+ #### 🔅 Example
16
+ ''')
17
+
18
+
19
+ ss.md("#### 1. Output Text")
20
+ ss.write("This is a text")
21
+
22
+ ss.md('''
23
+ ```python
24
+ ss.write("This is a text")
25
+ ```
26
+ ''')
27
+
28
+ ss.md("#### 2. Output Multiple Variables")
29
+ a = "aaa"
30
+ b = "bbb"
31
+ ss.write(a, ",", b)
32
+
33
+ ss.md('''
34
+ ```python
35
+ a = "aaa"
36
+ b = "bbb"
37
+ ss.write(a, ",", b)
38
+ ```
39
+ ''')
40
+
41
+ ss.md("#### 3. Output List")
42
+ data = ["aaa", "bbb", "ccc"]
43
+ ss.write(data)
44
+
45
+ data = {"aaa":1, "bbb":2, "ccc":3}
46
+ ss.write(data)
47
+
48
+ ss.md('''
49
+ ```python
50
+ data = ["aaa", "bbb", "ccc"]
51
+ ss.write(data)
52
+
53
+ data = {"aaa":1, "bbb":2, "ccc":3}
54
+ ss.write(data)
55
+ ```
56
+ ''')
57
+
58
+
59
+ ss.md("#### 4. Output Table")
60
+ # 创建数据
61
+ data = {'name': ['Alice', 'Bob', 'Charlie', 'David'],
62
+ 'age': [25, 30, 35, 40],
63
+ 'city': ['New York', 'Paris', 'London', 'Sydney']}
64
+
65
+ # Convert data to DataFrame format
66
+ df = pd.DataFrame(data)
67
+ ss.write(df)
68
+
69
+ ss.md('''
70
+ ```python
71
+ # Create data
72
+ data = {'name': ['Alice', 'Bob', 'Charlie', 'David'],
73
+ 'age': [25, 30, 35, 40],
74
+ 'city': ['New York', 'Paris', 'London', 'Sydney']}
75
+
76
+ # Convert data to DataFrame format
77
+ df = pd.DataFrame(data)
78
+ ss.write(df)
79
+ ```
80
+ ''')
pages/Content_Display/folder.yaml ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ alias: Content Display
2
+ order_name: "002"
pages/Form_Component/demo_button.py ADDED
@@ -0,0 +1,133 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Button
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md('''
8
+ ## ss.button
9
+ ''')
10
+ ss.md('''
11
+ [Online Help](https://www.simplestart.cc/doc_form/ss-button.html)
12
+ ''')
13
+ ss.space()
14
+ ss.md('''
15
+ #### 🔅 Example
16
+ ''')
17
+
18
+ #Custom Function
19
+ def myclick():
20
+ mytext.text = "You clicked "
21
+
22
+ def reset():
23
+ mytext.text = "This is button"
24
+
25
+ but1.type = ""
26
+ but1.icon = ""
27
+ but1.endIcon = ""
28
+ but1.iconColor = "mediumseagreen"
29
+ but1.style = "background-color:initial;color:initial"
30
+
31
+ ss.session["iconstr"] = ''
32
+ ss.session["style_str"] = ''
33
+ ss.session["style"] = ''
34
+
35
+
36
+ #Basic Usage
37
+ cols = ss.columns([40,"flex:60"], design=True)
38
+ with cols[0]:
39
+ mytext = ss.text("This is button")
40
+ but1 = ss.button("Click it", onclick=myclick)
41
+
42
+ def onradiochange(event):
43
+ value = event.value
44
+ if value == "default":
45
+ but1.type = ""
46
+ ss.session["buttonstyle"] = ""
47
+ elif value == "outlined":
48
+ but1.type = "outlined"
49
+ ss.session["buttonstyle"] = 'type = "outlined\",'
50
+ elif value == "flat":
51
+ but1.type = "tonal"
52
+ ss.session["buttonstyle"] = 'type = "flat\",'
53
+ elif value == "text":
54
+ but1.type = "text"
55
+ ss.session["buttonstyle"] = 'type = "text\",'
56
+ elif value == "plain":
57
+ but1.type = "plain"
58
+ ss.session["buttonstyle"] = 'type = "plain\",'
59
+
60
+ def onradiochange2(event):
61
+ index = event.index
62
+
63
+ if index == 0:
64
+ but1.icon = "mdi-account-circle"
65
+ but1.endIcon = ""
66
+ ss.session["iconstr"] = ' icon="mdi-account-circle",'
67
+ elif index == 1:
68
+ but1.icon = ""
69
+ but1.endIcon = "mdi-alert"
70
+ ss.session["iconstr"] = ' endIcon="mdi-alert",'
71
+ else:
72
+ but1.icon = ""
73
+ but1.endIcon = ""
74
+ ss.session["iconstr"] = ''
75
+
76
+
77
+ def changeColor(bkcolor):
78
+ but1.style = f"background-color:{bkcolor}; color:white"
79
+ but1.iconColor = "white"
80
+
81
+ ss.session["style_str"] = f'style="background-color:{bkcolor}, color:white"'
82
+ ss.session["style"] = 'style=style,'
83
+
84
+ def change_disabled(event):
85
+ but1.disabled = event.value
86
+
87
+ with cols[1]:
88
+ ss.text("Button properties")
89
+
90
+ ss.write("---")
91
+ ss.radio(["default", "outlined", "flat", "text", "plain"], "default", inline = True, onchange=onradiochange)
92
+
93
+ ss.write("---")
94
+ ss.radio(["Icon(Prepend)", "Icon(Append)", "No Icon"], inline = True, onchange=onradiochange2)
95
+
96
+ ss.checkbox("disabled", onchange = change_disabled)
97
+
98
+ ss.write("---")
99
+ ss.button("", type = "flat", size = "small", style="background-color:#409eff", onclick=lambda:changeColor('#409eff'))
100
+ ss.button("", type = "flat", size = "small", style="background-color:#67c23a", onclick=lambda:changeColor('#67c23a'))
101
+ ss.button("", type = "flat", size = "small", style="background-color:#e6a23c", onclick=lambda:changeColor('#e6a23c'))
102
+ ss.button("", type = "flat", size = "small", style="background-color:#f56c6c", onclick=lambda:changeColor('#f56c6c'))
103
+ ss.button("", type = "flat", size = "small", style="background-color:#909399", onclick=lambda:changeColor('#909399'))
104
+
105
+
106
+ ss.space()
107
+ ss.button("Reset", onclick=reset)
108
+
109
+
110
+ ss.space("mt-8")
111
+
112
+ ss.write("#### 🔎 Code")
113
+
114
+ ss.md('''
115
+ ```python
116
+ import simplestart as ss
117
+
118
+ def clickme():
119
+ mytext.text = "You clicked"
120
+
121
+ mytext = ss.text("This is button")
122
+ @style_str
123
+ ss.button("Click it", @buttonstyle @iconstr @style onclick=clickme)
124
+ ```
125
+ ''')
126
+
127
+
128
+ def onPageLoad():
129
+ ss.session["buttonstyle"] = ""
130
+ ss.session["iconstr"] = ""
131
+ ss.session["style"] = ""
132
+ ss.session["style_str"] = ""
133
+
pages/Form_Component/demo_checkbox.py ADDED
@@ -0,0 +1,80 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ """
2
+ title: Checkbox
3
+ """
4
+
5
+ import simplestart as ss
6
+
7
+ ss.write("### ss.checkbox")
8
+
9
+ def onchange(event):
10
+ ss.session["checked_value"] = event.value
11
+
12
+
13
+ ss.md('''
14
+ ---
15
+ #### 🔅 Example 1
16
+ ''')
17
+
18
+ ss.md("onchange: @checked_value")
19
+
20
+ ss.checkbox("checkme", onchange = onchange)
21
+ ss.checkbox("initially checked", checked = True, onchange = onchange)
22
+
23
+
24
+ ss.write('''
25
+ ---
26
+ #### 🔎 Code
27
+ ''')
28
+
29
+ ss.md('''
30
+ ```python
31
+ import simplestart as ss
32
+
33
+ def onchange(state, value):
34
+ state["checked_value"] = value
35
+
36
+ #ui
37
+ ss.md("onchange: @checked_value")
38
+
39
+ ss.checkbox("checkme", onchange = onchange)
40
+ ss.checkbox("initially checked", checked = True, onchange = onchange)
41
+
42
+
43
+ ''')
44
+
45
+ ss.space()
46
+ ss.md('''
47
+ ---
48
+ #### 🔅 Example 2
49
+ Get the status of the checkbox
50
+ ''')
51
+
52
+ mycheck = ss.checkbox("check me", onchange = onchange)
53
+
54
+ def myclick():
55
+ ss.message(mycheck.value)
56
+
57
+ ss.button("Get Status", onclick = myclick)
58
+
59
+ ss.space()
60
+ ss.write('''
61
+ ---
62
+ #### 🔎 Code
63
+ ''')
64
+
65
+
66
+ ss.md('''
67
+ ```python
68
+ import simplestart as ss
69
+
70
+ mycheck = ss.checkbox("check me", onchange = onchange)
71
+
72
+ def myclick():
73
+ ss.message(mycheck.value)
74
+
75
+ ss.button("获取状态", onclick = myclick)
76
+
77
+ ''')
78
+
79
+ def onPageLoad():
80
+ ss.session["checked_value"] = ""
pages/Form_Component/demo_dialog.py ADDED
@@ -0,0 +1,148 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Dialog
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md("## ss.dialog")
8
+
9
+ ss.space()
10
+
11
+ ss.md('''
12
+ ---
13
+ #### 🔅 Example
14
+ ''')
15
+
16
+ def testme():
17
+ ss.message("testme")
18
+
19
+ def showit():
20
+ if ss.session["str_fullscreen"] != "":
21
+ dialog.show(fullscreen = True)
22
+ else:
23
+ dialog.show()
24
+
25
+ def myclose(event):
26
+ ss.message("dialog close with result " + event.value)
27
+
28
+ dialog = ss.dialog("Dialog Title", onclose=myclose)
29
+ with dialog:
30
+ ss.text("SimpleStart dialog demostration")
31
+ ss.md("---")
32
+ ss.button("testme", onclick=testme)
33
+ ss.md(":smile:")
34
+
35
+ cols = ss.columns([60,"flex:40; border-left:1px solid lightgray"], border=True, style="border:1px solid lightgray")
36
+ with cols[0]:
37
+ mytext = ss.text("This is dialog")
38
+ ss.button("show dialog", onclick=showit)
39
+
40
+ def mycheck(event):
41
+ if event.value == True:
42
+ ss.session["str_fullscreen"] = "fullscreen = True"
43
+ #dialog.show(fullscreen = True)
44
+ else:
45
+ ss.session["str_fullscreen"] = ""
46
+
47
+ with cols[1]:
48
+ ss.text("Dialog Options")
49
+ ss.checkbox("Fullscreen", onchange=mycheck)
50
+
51
+ ss.space()
52
+ ss.write('''
53
+ ---
54
+ #### 🔎 Code
55
+ ''')
56
+
57
+ ss.md('''
58
+ ```python
59
+ import simplestart as ss
60
+
61
+ def myclose(event):
62
+ ss.message("dialog close with result " + event.value)
63
+
64
+ dialog = ss.dialog(title="Dialog Title", onclose=myclose)
65
+ with dialog:
66
+ ss.text("Opening from the bottom")
67
+ ss.md("---")
68
+ ss.button("testme", onclick=testme)
69
+ ss.md(":smile:")
70
+
71
+ def showit():
72
+ dialog.show(@str_fullscreen)
73
+
74
+ ss.button("show dialog", onclick=showit)
75
+ ```
76
+ ''')
77
+
78
+ def onPageEnter():
79
+ ss.session["str_fullscreen"] = ""
80
+
81
+
82
+ ss.write("---")
83
+ ss.write("Other dialogs")
84
+
85
+ ss.md("## ss.alert show alert dialog")
86
+
87
+ def show_alert():
88
+ ss.alert("Title", "The file will not be saved")
89
+ ss.button("alert", onclick=show_alert)
90
+
91
+ ss.md('''
92
+ ```python
93
+ import simplestart as ss
94
+
95
+ def show_alert():
96
+ ss.alert("Title", "The file will not be saved")
97
+
98
+ ss.button("alert", onclick=show_alert)
99
+ ```
100
+ ''')
101
+
102
+ ss.md("## ss.confirm show confirm dialog")
103
+
104
+ def onconfirm(event):
105
+ ss.message(event.value)
106
+
107
+ def show_confirm():
108
+ ss.confirm("Title", "Are you sure? ", onconfirm)
109
+
110
+ ss.button("confirm", onclick=show_confirm)
111
+
112
+ ss.md('''
113
+ ```python
114
+ import simplestart as ss
115
+
116
+ def onconfirm(event):
117
+ ss.message(event.value)
118
+
119
+ def show_confirm():
120
+ ss.confirm("Title", "Are you sure? ", onconfirm)
121
+
122
+ ss.button("confirm", onclick=show_confirm)
123
+ ```
124
+ ''')
125
+
126
+
127
+ ss.md("## ss.prompt show prompt dialog")
128
+
129
+ def myclose(event):
130
+ ss.message(event.value)
131
+
132
+ def show_prompt():
133
+ ss.prompt("title", "please input the value", onclose = myclose)
134
+
135
+ ss.button("prompt", onclick=show_prompt)
136
+
137
+ ss.md('''
138
+ ```python
139
+ import simplestart as ss
140
+
141
+ def myclose(event):
142
+ ss.message(event.value)
143
+
144
+ def show_prompt():
145
+ ss.prompt("title", "please input the value", onclose = myclose)
146
+ ss.button("prompt", onclick=show_prompt)
147
+ ```
148
+ ''')
pages/Form_Component/demo_expander.py ADDED
@@ -0,0 +1,32 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Expander
3
+ '''
4
+
5
+ import streamsync as ss
6
+
7
+ ss.md("## ss.expander")
8
+
9
+ ss.md('''
10
+ #### 🔅 Example
11
+ ''')
12
+
13
+ with ss.expander("About SimpleStart", expanded=True):
14
+ ss.text("Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! \
15
+ Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!", style="padding:10px")
16
+
17
+ ss.space()
18
+ ss.write('''
19
+ ---
20
+ #### 🔎 Code
21
+ ''')
22
+
23
+ ss.md('''
24
+ ```python
25
+ import simplestart as ss
26
+
27
+ with ss.expander("About SimpleStart"):
28
+ ss.text("Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! \
29
+ Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!")
30
+
31
+ ```
32
+ ''')
pages/Form_Component/demo_input.py ADDED
@@ -0,0 +1,69 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Input
3
+ '''
4
+
5
+ import streamsync as ss
6
+
7
+ ss.md("## ss.input")
8
+
9
+ ss.space()
10
+ ss.md("#### 🔅 Example")
11
+
12
+ ss.md("---")
13
+ ss.space()
14
+
15
+ def onchange(state, value):
16
+ ss.message(f"onchange, {value}")
17
+
18
+ def onclear(state, value):
19
+ ss.message("onclear event happend")
20
+
21
+ def onblur(state, value):
22
+ print("onblur")
23
+ ss.message(f"onblur, {value}")
24
+
25
+ def testme():
26
+ ss.message(myinput.value)
27
+
28
+ #ui
29
+ cols = ss.columns([60,40], border = True)
30
+ with cols[0]:
31
+ myinput = ss.text_input("Hello SimpleStart", clearable=True, width=300)
32
+
33
+
34
+ def myevent(event):
35
+ if event.tag == "sel1":
36
+ myinput.variant = event.value
37
+ elif event.tag == "sel2":
38
+ myinput.type = event.value
39
+ elif event.tag == "but1":
40
+ ss.message(myinput.value)
41
+
42
+
43
+ with cols[1]:
44
+ ss.selectbox(["filled","outlined","underlined", "solo", "solo-filled", "solo-inverted"], label='#### Change the input style', \
45
+ value="solo", onchange = myevent, eventTag="sel1")
46
+
47
+ ss.selectbox(["text","time", "date", "week", "month", "password", "color"], label='#### Change the input type', \
48
+ onchange = myevent, eventTag="sel2")
49
+
50
+ ss.write('#### Get Input Value', color="#66656a")
51
+ ss.button("Get Text Value", onclick=myevent, eventTag="but1")
52
+
53
+
54
+
55
+ ss.write("---")
56
+ ss.write("#### 🔎 Code")
57
+
58
+ ss.md('''
59
+ ```python
60
+ import simplestart as ss
61
+
62
+ myinput = ss.input("Hello SimpleStart", clearable=True, width = 300)
63
+
64
+ #Or
65
+ #ss.text_input("hello", type="text", variant = "filled")
66
+
67
+ ''')
68
+
69
+
pages/Form_Component/demo_menu.py ADDED
@@ -0,0 +1,103 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Menu
3
+ '''
4
+
5
+ import streamsync as ss
6
+
7
+ ss.md("## ss.menu")
8
+
9
+ ss.md('''
10
+ #### 🔅 Example
11
+ ''')
12
+
13
+ data = [
14
+ {'index': '1', 'title': 'Processing Center', 'icon':'mdi-home'},
15
+ {'type': 'spacer'}, #add spacer
16
+ {
17
+ 'index': '2',
18
+ 'title': 'Workspace',
19
+ 'icon' : 'mdi-plus',
20
+ 'subItems': [
21
+ {'index': '2-1', 'title': 'item one'},
22
+ {'index': '2-2', 'title': 'item two'},
23
+ {'index': '2-3', 'title': 'item three'},
24
+ {
25
+ 'index': '2-4',
26
+ 'title': 'item four',
27
+ 'subItems': [
28
+ {'index': '2-4-1', 'title': 'item one'},
29
+ {'index': '2-4-2', 'title': 'item two'},
30
+ {'index': '2-4-3', 'title': 'item three'},
31
+ ],
32
+ },
33
+ ],
34
+ },
35
+ {'index': '3', 'title': 'Info', 'disabled': True, 'icon':'mdi-cancel'},
36
+ {'index': '4', 'title': 'Orders', 'icon':'mdi-wrench'},
37
+ ]
38
+
39
+ def menu_select(event):
40
+ print("menu1")
41
+ ss.message(event.data["keyPath"])
42
+
43
+
44
+ ss.md("### Horiontal Menu")
45
+ ss.menu(data, direction = "horizontal", onselect = menu_select)
46
+
47
+ ss.space()
48
+ ss.md("### Vertical Menu")
49
+
50
+ ss.menu(data, direction = "vertical", dark = True, onselect = menu_select)
51
+
52
+
53
+ ss.space()
54
+ ss.write('''
55
+ ---
56
+ #### 🔎 Code
57
+ ''')
58
+
59
+ ss.md('''
60
+ ```python
61
+ import simplestart as ss
62
+
63
+ data = [
64
+ {'index': '1', 'title': 'Processing Center', 'icon':'mdi-home'},
65
+ {'type': 'spacer'}, #add spacer
66
+ {
67
+ 'index': '2',
68
+ 'title': 'Workspace',
69
+ 'icon' : 'mdi-plus',
70
+ 'subItems': [
71
+ {'index': '2-1', 'title': 'item one'},
72
+ {'index': '2-2', 'title': 'item two'},
73
+ {'index': '2-3', 'title': 'item three'},
74
+ {
75
+ 'index': '2-4',
76
+ 'title': 'item four',
77
+ 'subItems': [
78
+ {'index': '2-4-1', 'title': 'item one'},
79
+ {'index': '2-4-2', 'title': 'item two'},
80
+ {'index': '2-4-3', 'title': 'item three'},
81
+ ],
82
+ },
83
+ ],
84
+ },
85
+ {'index': '3', 'title': 'Info', 'disabled': True, 'icon':'mdi-cancel'},
86
+ {'index': '4', 'title': 'Orders', 'icon':'mdi-wrench'},
87
+ ]
88
+
89
+ def menu_select(event):
90
+ print("menu1")
91
+ ss.message(event.data["keyPath"])
92
+
93
+
94
+ ss.md("### Horiontal Menu")
95
+ ss.menu(data, direction = "horizontal", onselect = menu_select)
96
+
97
+ ss.space()
98
+ ss.md("### Vertical Menu")
99
+
100
+ ss.menu(data, direction = "vertical", dark = True, onselect = menu_select)
101
+
102
+ ```
103
+ ''')
pages/Form_Component/demo_radio.py ADDED
@@ -0,0 +1,104 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Radio
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md("## ss.radio")
8
+
9
+ ss.space()
10
+
11
+ ss.md('''
12
+ #### 🔅 Example
13
+ ''')
14
+
15
+ def onchange(event):
16
+ ss.session["options_value"] = event.value
17
+ ss.session["options_index"] = event.index
18
+
19
+ ss.md("onchange: value:@options_value, index:@options_index")
20
+
21
+ options = ["Option 1", "Option 2", "Option 3"]
22
+ myradio = ss.radio(options, label = "### my radio1", index = 0, onchange = onchange)
23
+
24
+ '''
25
+ options = [("C++", '#### <span style="color:blue">C++</span>'),
26
+ ("Javascript", '#### <span style="color:green">Javascript</span>'),
27
+ ("Python", '#### <span style="color:red">Python</span>')
28
+ ]
29
+ '''
30
+ options = [{'name':'#### <span style="color:blue">C++</span>', 'value':'C++'},
31
+ {'name':'#### <span style="color:green">Javascript</span>', 'value':'Javascript'},
32
+ {'name':'#### <span style="color:red">Python</span>', 'value':"Python"}
33
+ ]
34
+
35
+ ss.radio(options, inline = True, label = "### my radio2", index = 0, iconColor = "blue", onchange = onchange)
36
+
37
+
38
+
39
+ ss.write("---")
40
+ ss.write("#### 🔎 Code")
41
+
42
+ ss.md('''
43
+ ```python
44
+ import simplestart as ss
45
+
46
+ def onchange(event):
47
+ ss.session["options_value"] = event.value
48
+ ss.session["options_index"] = event.index
49
+
50
+ ss.md("onchange: value:\@options_value, index:\@options_index")
51
+
52
+ options = ["Option 1", "Option 2", "Option 3"]
53
+ myradio = ss.radio(options, label = "### my radio1", index = 0, onchange = onchange)
54
+
55
+
56
+ options = [{'name':'#### <span style="color:blue">C++</span>', 'value':'C++'},
57
+ {'name':'#### <span style="color:green">Javascript</span>', 'value':'Javascript'},
58
+ {'name':'#### <span style="color:red">Python</span>', 'value':"Python"}
59
+ ]
60
+
61
+ ss.radio(options, inline = True, label = "### my radio2", index = 0, iconColor = "blue", onchange = onchange)
62
+
63
+ def onPageLoad():
64
+ ss.session["options_value"] = ""
65
+
66
+ ''')
67
+
68
+
69
+ ss.space()
70
+ ss.md('''
71
+ ---
72
+ #### 🔅 Example - Get State Value
73
+ ''')
74
+
75
+ def myclick1():
76
+ ss.message(myradio.value)
77
+
78
+ ss.button("Get State Value", onclick=myclick1)
79
+
80
+ def myclick2():
81
+ ss.message(myradio.index)
82
+
83
+ ss.button("Get State Index", onclick=myclick2)
84
+
85
+ ss.write("---")
86
+ ss.write("#### 🔎 Code Snippet")
87
+
88
+ ss.md('''
89
+ ```python
90
+ #...
91
+ def myclick1():
92
+ ss.message(myradio.value)
93
+
94
+ ss.button("Get State Value", onclick=myclick1)
95
+
96
+ def myclick2():
97
+ ss.message(myradio.index)
98
+
99
+ ss.button("Get State Index", onclick=myclick2)
100
+ ''')
101
+
102
+
103
+ def onPageLoad():
104
+ ss.session["options_value"] = ""
pages/Form_Component/demo_selectbox.py ADDED
@@ -0,0 +1,81 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Selectbox
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md("## ss.selectbox")
8
+
9
+ ss.space()
10
+ ss.md('''
11
+ #### 🔅 Example 1
12
+ Create a selectbox with a title and 3 options on the page.
13
+ ''')
14
+ ss.space()
15
+
16
+ options = ["option1","option2", "option3"]
17
+
18
+ def selchange(event):
19
+ ss.message(f"You select {event.value}, index of {event.index}")
20
+
21
+ select1 = ss.selectbox(options, index = 0, title = "### Please select", onchange = selchange)
22
+
23
+
24
+
25
+ ss.write("#### 🔎 Code")
26
+
27
+ ss.md("""
28
+ ```python
29
+ import simplestart as ss
30
+
31
+ options = ["option1","option2", "option3"]
32
+
33
+ def selchange(event):
34
+ ss.session["select_value"] = event.value
35
+ ss.session["select_index"] = select1.index
36
+
37
+ ss.write("info value: index:")
38
+ select1 = ss.selectbox(options, value="option1", onchange = selchange)
39
+
40
+
41
+ ```
42
+ """)
43
+
44
+ ss.md('''
45
+ #### 🔅 Example 2
46
+ 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.
47
+ ''')
48
+ ss.space()
49
+
50
+ def onclick1():
51
+ ss.message(select1.value)
52
+
53
+ ss.button("Current Option Value", onclick=onclick1)
54
+
55
+ def onclick2():
56
+ ss.message(select1.index)
57
+
58
+ ss.button("Current Option Index", onclick=onclick2)
59
+
60
+ ss.space()
61
+
62
+ ss.write("#### 🔎 Code Snippet")
63
+
64
+
65
+ ss.md("""
66
+ ```python
67
+
68
+ #...
69
+
70
+ def onclick1():
71
+ ss.message(select1.value)
72
+
73
+ ss.button("Current Option Value", onclick = onclick1)
74
+
75
+ def onclick2():
76
+ ss.message(select1.index)
77
+
78
+ ss.button("Current Option Index", onclick = onclick2)
79
+
80
+ ```
81
+ """)
pages/Form_Component/demo_slider.py ADDED
@@ -0,0 +1,42 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Slider
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md("## ss.slider")
8
+
9
+ ss.space()
10
+
11
+ ss.md('''
12
+ #### 🔅 Example
13
+ ''')
14
+
15
+ ss.md("### Please drag the slider to change the value")
16
+
17
+ info = ss.text("500")
18
+
19
+ def onchange(event):
20
+ info.text = str(event.value)
21
+
22
+ sld = ss.slider("<b>my slider</b>", value = 500, min = 0, max = 1000, onchange = onchange, style="width:50%")
23
+
24
+ ss.space()
25
+
26
+ ss.write("#### 🔎 Code")
27
+
28
+ ss.md('''
29
+ ```python
30
+ import simplestart as ss
31
+
32
+ info = ss.text("500")
33
+
34
+ def onchange(state, value):
35
+ info.text = value
36
+
37
+ ss.slider(500, 0, 1000, onchange=onchange)
38
+
39
+ #sld.min = 200
40
+ #sld.step = 5
41
+ ''')
42
+
pages/Form_Component/demo_textarea.py ADDED
@@ -0,0 +1,51 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Textarea
3
+ '''
4
+
5
+ import streamsync as ss
6
+
7
+ ss.md("## ss.textarea")
8
+
9
+ ss.space()
10
+ ss.md("#### 🔅 Example")
11
+
12
+ ss.md("---")
13
+
14
+ # Basic usage
15
+ # test = ss.text_input("hello, world", type="textarea")
16
+ mytext = ss.textarea("hello, world")
17
+
18
+ ss.write("---")
19
+ ss.write("#### 🔎 Code")
20
+
21
+ ss.md('''
22
+ ```python
23
+ import simplestart as ss
24
+
25
+ mytext = ss.textarea("hello, world")
26
+
27
+ ''')
28
+
29
+ ss.space()
30
+ ss.md("#### 🔅 Get the text value of the textarea")
31
+ ss.md("---")
32
+
33
+ def myclick():
34
+ ss.message(mytext.value)
35
+
36
+ ss.button("Get Text", onclick=myclick)
37
+
38
+ ss.write("---")
39
+ ss.write("#### 🔎 Code Snippet")
40
+
41
+ ss.md('''
42
+ ```python
43
+ #...
44
+ def myclick():
45
+ ss.message(mytext.value)
46
+
47
+ ss.button("Get Text", onclick=myclick)
48
+ ''')
49
+
50
+ mytext.width = 500
51
+ mytext.variant = "filled"
pages/Form_Component/demo_upload.py ADDED
@@ -0,0 +1,45 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Upload
3
+ '''
4
+
5
+ import streamsync as ss
6
+ import pandas as pd
7
+
8
+ ss.md("## ss.upload File Upload")
9
+
10
+
11
+ ss.space()
12
+ ss.md("#### 🔅 Example - Upload Image")
13
+ ss.space()
14
+
15
+
16
+ def onsucess(event):
17
+ filename = event.value
18
+ path = f'{ss.baseinfo["package_path"]}/uploads/{filename}'
19
+
20
+ ss.write("debug", path)
21
+ myimage.image = path
22
+
23
+ ss.upload("Upload Image ...", accept="image/png, image/jpeg, image/bmp", icon="mdi-camera", onsucess = onsucess)
24
+
25
+ myimage = ss.image(width=300)
26
+
27
+ ss.space()
28
+ ss.write("---")
29
+ ss.write("#### 🔎 Code")
30
+
31
+ ss.md('''
32
+ ```python
33
+ import simplestart as ss
34
+
35
+ def onsucess(event):
36
+ filename = event.value
37
+ path = f'{ss.baseinfo["package_path"]}/uploads/{filename}'
38
+
39
+ myimage.image = path
40
+
41
+ ss.upload(label = "Upload Image ...", accept="image/png, image/jpeg, image/bmp", icon="mdi-camera", onsucess = onsucess)
42
+
43
+ myimage = ss.image()
44
+
45
+ ''')
pages/Form_Component/folder.yaml ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ alias: Form Component
2
+ order_name: "001"
pages/Layout_Related/demo_columns.py ADDED
@@ -0,0 +1,103 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Columns Layout
3
+ '''
4
+
5
+ import streamsync as ss
6
+
7
+ ss.md("## ss.columns Columns Layout")
8
+
9
+ ss.space()
10
+ ss.md("#### 🔅 Example")
11
+
12
+ ss.space()
13
+
14
+ ss.md("### Average Spacing")
15
+
16
+ def onchange1(event):
17
+ #cols_ex1.design = True
18
+ cols_ex1_id = cols1[0].id
19
+
20
+ if event.value == True:
21
+ ss.getcm().components[cols_ex1_id]["content"]["options"]["border"] = True
22
+ ss.session["cols1_design"] = ', border = True'
23
+ else:
24
+ ss.getcm().components[cols_ex1_id]["content"]["options"]["border"] = False
25
+ ss.session["cols1_design"] = ''
26
+ ss.update_cm(cols_ex1_id)
27
+
28
+ ss.checkbox("border", checked = True, onchange = onchange1)
29
+
30
+ cols1 = ss.columns(2, border=True)
31
+
32
+ with cols1[0]:
33
+ ss.text("First of two columns")
34
+
35
+ with cols1[1]:
36
+ ss.text("Second of two columns")
37
+
38
+
39
+ ss.space()
40
+ ss.write("---")
41
+ ss.write("#### 🔎 Code")
42
+ ss.md('''
43
+ ```python
44
+ import simplestart as ss
45
+
46
+ cols1 = ss.columns(2, border = True)
47
+
48
+ with cols1[0]:
49
+ ss.text("First of two columns")
50
+
51
+ with cols1[1]:
52
+ ss.text("Second of two columns")
53
+ ```
54
+ ''')
55
+
56
+ ss.space()
57
+
58
+ ss.md("### Proportional Spacing")
59
+
60
+
61
+ def onchange2(event):
62
+ #cols_ex1.design = True
63
+ cols_ex2_id = cols2[0].id
64
+
65
+ if event.value == True:
66
+ ss.getcm().components[cols_ex2_id]["content"]["options"]["border"] = True
67
+ ss.session["cols2_design"] = ', border = True'
68
+ else:
69
+ ss.getcm().components[cols_ex2_id]["content"]["options"]["border"] = False
70
+ ss.session["cols2_design"] = ''
71
+ ss.update_cm(cols_ex2_id)
72
+
73
+
74
+ ss.checkbox("border", checked = True, onchange = onchange2)
75
+
76
+ cols2 = ss.columns([4,6], border = True)
77
+
78
+ with cols2[0]:
79
+ ss.text("First of two columns")
80
+ with cols2[1]:
81
+ ss.text("Second of two columns")
82
+
83
+
84
+ ss.space()
85
+ ss.write("---")
86
+ ss.write("#### 🔎 Code")
87
+ ss.md('''
88
+ ```python
89
+ import simplestart as ss
90
+
91
+ cols1 = ss.columns([4,6], border = True)
92
+
93
+ with cols1[0]:
94
+ ss.text("First of two columns")
95
+
96
+ with cols1[1]:
97
+ ss.text("Second of two columns")
98
+ ```
99
+ ''')
100
+
101
+ def onPageLoad():
102
+ ss.session["cols1_design"] = ''
103
+ ss.session["cols2_design"] = ''
pages/Layout_Related/demo_row.py ADDED
@@ -0,0 +1,104 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Row Layout
3
+ '''
4
+
5
+ import streamsync as ss
6
+
7
+ ss.md("## ss.row Row Layout")
8
+
9
+ ss.space()
10
+ ss.md("#### 🔅 Example")
11
+ 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.")
12
+
13
+ ss.space()
14
+
15
+ def onchange1():
16
+ pass
17
+
18
+
19
+ #ui
20
+
21
+ style = "background:#d3d3d354; padding:5px;"
22
+
23
+ ss.space()
24
+ ss.write("#### 1. Normal")
25
+ ss.space()
26
+ with ss.row(style=style):
27
+ ss.button("button1")
28
+ ss.button("button2")
29
+
30
+ ss.space()
31
+ ss.write("#### 2. Center")
32
+ ss.space()
33
+ with ss.row(style=style):
34
+ ss.spacer()
35
+ ss.button("button1")
36
+ ss.button("button2")
37
+ ss.spacer()
38
+
39
+ ss.space()
40
+ ss.write("#### 3. Right align")
41
+ ss.space()
42
+ with ss.row(style=style):
43
+ ss.spacer()
44
+ ss.button("button1")
45
+ ss.button("button2")
46
+
47
+ ss.space()
48
+ ss.write("#### 4. Right respectively")
49
+ ss.space()
50
+ with ss.row(style=style):
51
+ ss.spacer()
52
+ ss.button("button1")
53
+ ss.spacer()
54
+ ss.button("button2")
55
+
56
+
57
+ ss.space("mt-16")
58
+ ss.write("#### 🔎 Code")
59
+
60
+ ss.md('''
61
+ ```python
62
+ import simplestart as ss
63
+
64
+ style = "background:#d3d3d354; padding:5px;"
65
+ ss.space()
66
+ ss.write("#### 1. Normal")
67
+ ss.space()
68
+ with ss.row(style=style):
69
+ ss.button("button1")
70
+ ss.button("button2")
71
+
72
+ ss.space()
73
+ ss.write("#### 2. Center")
74
+ ss.space()
75
+ with ss.row(style=style):
76
+ ss.spacer()
77
+ ss.button("button1")
78
+ ss.button("button2")
79
+ ss.spacer()
80
+
81
+ ss.space()
82
+ ss.write("#### 3. Right align")
83
+ ss.space()
84
+ with ss.row(style=style):
85
+ ss.spacer()
86
+ ss.button("button1")
87
+ ss.button("button2")
88
+
89
+ ss.space()
90
+ ss.write("#### 4. Right respectively")
91
+ ss.space()
92
+ with ss.row(style=style):
93
+ ss.spacer()
94
+ ss.button("button1")
95
+ ss.spacer()
96
+ ss.button("button2")
97
+
98
+ ''')
99
+
100
+ ss.md('''
101
+ ::: tip
102
+ ss.space adds spacing, while ss.spacer is used to fill gaps to modify the layout.
103
+ :::
104
+ ''')
pages/Layout_Related/demo_section.py ADDED
@@ -0,0 +1,84 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Section
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md("## ss.section Container")
8
+
9
+ ss.md("The section parent container can hold other components and supports the style parameter.")
10
+
11
+
12
+ ss.space()
13
+ ss.md('''
14
+ #### 🔅 Example
15
+ ''')
16
+
17
+ #api
18
+ def clear():
19
+ section.empty()
20
+
21
+ def write_something():
22
+ section.text("Hello, I am inside section 2")
23
+
24
+ #ui
25
+ with ss.section("Section1", shadow = 10, border = True, rounded=True, width = "50%", height=300):
26
+ ss.text("This is inside the section 1")
27
+
28
+
29
+ ss.space()
30
+
31
+ section = ss.section()
32
+ section.text("This is inside the section 2")
33
+
34
+ ss.space("mt-4 mb-4")
35
+ ss.text("outside the section")
36
+
37
+
38
+ ss.md("---")
39
+
40
+ ss.button("clear", onclick=clear)
41
+
42
+ ss.button("add something", onclick=write_something)
43
+
44
+ ss.space()
45
+
46
+ ss.write("#### 🔎 Code")
47
+
48
+ ss.md("""
49
+ ```python
50
+ import simplestart as ss
51
+
52
+ #api
53
+ def clear():
54
+ section.empty()
55
+
56
+ def write_something():
57
+ section.text("Hello, I am inside section 2")
58
+
59
+ #ui
60
+ with ss.section(title = "Section1", shadow = 10, border = True, rounded=True, width = "50%", height=300):
61
+ ss.text("This is inside the section 1")
62
+
63
+
64
+ ss.space()
65
+
66
+ section = ss.section()
67
+ section.text("This is inside the section 2")
68
+
69
+ ss.space()
70
+ ss.text("outside the section")
71
+
72
+ ss.md("---")
73
+
74
+ ss.button("clear", onclick=clear)
75
+ ss.button("add something", onclick=write_something)
76
+
77
+ ```
78
+ """)
79
+
80
+ ss.md('''
81
+ ::: tip
82
+ In addition to adding components using the with syntax, you can also directly add components within the container using section.text(), section.button(), etc.
83
+ :::
84
+ ''')
pages/Layout_Related/demo_sidebar.py ADDED
@@ -0,0 +1,58 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Sidebar
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md("## ss.sidebar")
8
+
9
+ ss.md("Display various components in the sidebar on the left side of the screen, such as data controls and some settings.")
10
+
11
+ ss.md('''
12
+ #### 🔅 Example
13
+ ''')
14
+
15
+
16
+ sidebar = ss.sidebar()
17
+
18
+ with sidebar:
19
+ ss.write("### Sidebar")
20
+ ss.button("click")
21
+ ss.selectbox(["one", "two", "three"])
22
+
23
+
24
+
25
+ def testme(state, value):
26
+ with sidebar:
27
+ ss.text("text in sidebar")
28
+
29
+
30
+ ss.button("test", onclick = testme)
31
+
32
+
33
+ ss.space()
34
+
35
+ ss.write("#### 🔎 Code")
36
+
37
+ ss.md('''
38
+ ```python
39
+ import simplestart as ss
40
+
41
+ sidebar = ss.sidebar()
42
+
43
+ with sidebar:
44
+ ss.button("click")
45
+ ss.selectbox(["one", "two", "three"])
46
+
47
+
48
+ def testme(state, value):
49
+ with sidebar:
50
+ ss.text("text in sidebar")
51
+ #or
52
+ #sidebar.text("text in sidebar")
53
+
54
+
55
+ ss.button("test", onclick = testme)
56
+
57
+ ```
58
+ ''')
pages/Layout_Related/demo_style.py ADDED
@@ -0,0 +1,67 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Style
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md("## ss.style Style Settings")
8
+
9
+ ss.space()
10
+ ss.md("#### 🔅 Example")
11
+ ss.write("nject CSS styles into the HTML document.")
12
+
13
+ ss.html('''
14
+ <div class="test1">this is a sample1</div>
15
+ <div class="test2">this is a sample2</div>
16
+ ''')
17
+
18
+
19
+ ss.style('''
20
+ .test1{
21
+ background-color:lightgray;
22
+ padding:5px;
23
+ width:150px;
24
+ margin-bottom:10px;
25
+ border:1px solid lightblue
26
+ }
27
+ .test2{
28
+ color:red;
29
+ border:1px solid lightgreen;
30
+ padding:5px;
31
+ width:150px;
32
+ }
33
+ ''')
34
+
35
+ ss.space()
36
+
37
+ ss.write("#### 🔎 Code")
38
+
39
+
40
+ ss.space()
41
+
42
+
43
+ ss.md('''
44
+ ```python
45
+ import simplestart as ss
46
+
47
+ ss.html(\'''
48
+ <div class="test1">this is a sample1</div>
49
+ <div class="test2">this is a sample2</div>
50
+ \''')
51
+
52
+ ss.style(\'''
53
+ .test1{
54
+ background-color:lightgray;
55
+ padding:5px;
56
+ width:150px;
57
+ margin-bottom:10px;
58
+ border:1px solid lightblue
59
+ }
60
+ .test2{
61
+ color:red;
62
+ border:1px solid lightgreen;
63
+ padding:5px;
64
+ width:150px;
65
+ }
66
+ \''')
67
+ ''')
pages/Layout_Related/demo_tabs.py ADDED
@@ -0,0 +1,38 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Tabs
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md("## ss.tabs")
8
+
9
+ ss.space("mt-16")
10
+ ss.md("#### 🔅 Example")
11
+
12
+ tabtitles = ["tab1", "tab2", "tab3"]
13
+ tabs = ss.tabs(tabtitles)
14
+
15
+ with tabs[0]:
16
+ ss.text("this is tab 1")
17
+ with tabs[1]:
18
+ ss.text("this is tab 2")
19
+ with tabs[2]:
20
+ ss.text("this is tab 3")
21
+
22
+ ss.space()
23
+ ss.write("#### 🔎 Code")
24
+
25
+ ss.md('''
26
+ ```python
27
+ import simplestart as ss
28
+
29
+ tabtitles = ["tab1", "tab2", "tab3"]
30
+ tabs = ss.tabs(tabtitles)
31
+
32
+ with tabs[0]:
33
+ ss.text("this is tab 1")
34
+ with tabs[1]:
35
+ ss.text("this is tab 2")
36
+ with tabs[2]:
37
+ ss.text("this is tab 3")
38
+ ''')
pages/Layout_Related/folder.yaml ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ alias: Layout Related
2
+ order_name: "004"
pages/system/bak/config.yaml ADDED
@@ -0,0 +1,15 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ title: "SimpleStart Demo"
2
+
3
+ show_sidebar: true
4
+ wide_screen_mode : true
5
+
6
+ show_header: True
7
+ app_bar_height: 59 ##default is 64
8
+
9
+ show_footer: False
10
+
11
+ locales:
12
+ - code: ""
13
+ name: "English"
14
+ - code: "zh"
15
+ name: "Chinese 中文"
pages/system/layout/myfooter.py ADDED
@@ -0,0 +1,11 @@
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import simplestart as ss
2
+
3
+
4
+ def test(event):
5
+ ss.message(123)
6
+
7
+ with ss.row():
8
+ ss.spacer()
9
+ ss.write("hi, footer")
10
+ ss.button("test", onclick = test)
11
+ ss.spacer()
pages/system/layout/myheader.py ADDED
@@ -0,0 +1,22 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import simplestart as ss
2
+
3
+
4
+ data = [
5
+ {"index":"mnu_dcmxlx", "title":"Functions"},
6
+ {"index":"mnu_dcxzlx", "title":"Help"}
7
+ ]
8
+
9
+
10
+ def myselect(event):
11
+ ss.message(event.data["keyPath"])
12
+
13
+
14
+ style = '''
15
+ background:lightblue;
16
+ '''
17
+
18
+ mc = ss.col(align = "end", outline = False, height=59) #要和config.yaml中的app_bar_height 一致
19
+
20
+ #mc.write("### my header")
21
+ with mc:
22
+ ss.menu(data, direction = "horizontal", dark = True, onselect = myselect)