File size: 2,474 Bytes
d95db82 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
'''
title: component
'''
import simplestart as ss
ss.md("### ss.component Custom Component")
ss.md("You can customize components using HTML, JS, and CSS, implemented through an iframe.")
ss.space()
ss.md('''
#### 🔅 Example
''')
ss.space()
def testme(state, value):
mytext.text = "Data received from the frontend UI: " + value["value"]
# By default, the <iframe> width is 300 pixels and the height is 150 pixels.
ss.text("Enter content in the text box and press Enter.")
myplugin = ss.component(path = f"components/index.html", onData = testme) ###style="border:none")
def postdata():
data = {"my_input_value":"text from python"}
myplugin.postMessage(data)
mytext = ss.text("Data received from the frontend UI: ")
ss.markdown("---")
ss.space()
ss.text("Click the button to send data to the frontend UI.")
ss.button("post data", onclick=postdata)
ss.space()
ss.write("Python Side Code")
ss.md('''
```python
import simplestart as ss
def testme(state, value):
mytext.text = "Data received from the frontend UI: " + value["value"]
ss.text("Enter content in the text box and press Enter.")
myplugin = ss.component(path = f"components/index.html", onData = testme)
def postdata():
data = {"my_input_value":"text from python"}
myplugin.postMessage(data)
mytext = ss.text("Data received from the frontend UI: ")
ss.markdown("---")
ss.space()
ss.text("Click the button to send data to the frontend UI.")
ss.button("post data", onclick=postdata)
```
''')
ss.write("Plugin/HTML/JS Side Code")
ss.md('''
```html
<html>
<head>
<script src="pybridge.js"></script>
</head>
<body style="height:100px">
<input id="myinput" value="" autocomplete="off" placeholder="Enter content and press Enter" />
</body>
<script>
var myInput = document.getElementById("myinput");
myInput.addEventListener("change", function() {
//// Send message to the Python side
sendDataToPython({
value: myInput.value,
});
})
//Receive messages from the Python side
window.addEventListener("message", onDataFromPython);
function onDataFromPython(event) {
var data = event.data.arg;
if (event.data.type !== "ss:render") return;
myInput.value = data.my_input_value; // Access values sent from Python here!
}
// If system height setting fails, you can manually set the height
//setFrameHeight(200);
</script>
</html>
```
''') |