Spaces:
Sleeping
Sleeping
alonsosilva
commited on
Commit
•
57d25c6
1
Parent(s):
bf9b28e
Add slider
Browse files
LICENSE
ADDED
@@ -0,0 +1,21 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
MIT License
|
2 |
+
|
3 |
+
Copyright (c) 2024 Alonso Silva Allende
|
4 |
+
|
5 |
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6 |
+
of this software and associated documentation files (the "Software"), to deal
|
7 |
+
in the Software without restriction, including without limitation the rights
|
8 |
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9 |
+
copies of the Software, and to permit persons to whom the Software is
|
10 |
+
furnished to do so, subject to the following conditions:
|
11 |
+
|
12 |
+
The above copyright notice and this permission notice shall be included in all
|
13 |
+
copies or substantial portions of the Software.
|
14 |
+
|
15 |
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16 |
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17 |
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18 |
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19 |
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20 |
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
21 |
+
SOFTWARE.
|
app.py
CHANGED
@@ -5,39 +5,38 @@ import ipywidgets as widgets
|
|
5 |
|
6 |
class CounterWidget(anywidget.AnyWidget):
|
7 |
_esm = """
|
8 |
-
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
19 |
-
|
20 |
-
|
21 |
-
|
22 |
-
|
23 |
-
|
24 |
-
|
25 |
"""
|
26 |
-
_css
|
27 |
-
|
28 |
-
|
29 |
-
padding:10px 50px;
|
30 |
-
}
|
31 |
-
.counter-btn:hover {
|
32 |
-
background-color:green;
|
33 |
-
}
|
34 |
"""
|
35 |
-
|
36 |
|
|
|
37 |
@solara.component
|
38 |
def Page():
|
39 |
with solara.Column(style={"padding":"30px"}):
|
40 |
solara.Markdown("#Anywidget+Solara")
|
41 |
-
|
42 |
-
|
|
|
|
|
|
|
43 |
Page()
|
|
|
5 |
|
6 |
class CounterWidget(anywidget.AnyWidget):
|
7 |
_esm = """
|
8 |
+
import confetti from "https://esm.sh/[email protected]"
|
9 |
+
function render({ model, el }) {
|
10 |
+
let getCount = () => model.get("count");
|
11 |
+
let button = document.createElement("button");
|
12 |
+
button.classList.add("counter-button");
|
13 |
+
button.innerHTML = `count is ${getCount()}`;
|
14 |
+
button.addEventListener("click", () => {
|
15 |
+
model.set("count", getCount() + 1);
|
16 |
+
model.save_changes();
|
17 |
+
});
|
18 |
+
model.on("change:count", () => {
|
19 |
+
button.innerHTML = `count is ${getCount()}`;
|
20 |
+
confetti({ angle: getCount() });
|
21 |
+
});
|
22 |
+
el.appendChild(button);
|
23 |
+
}
|
24 |
+
export default { render };
|
25 |
"""
|
26 |
+
_css="""
|
27 |
+
.counter-button { background:blue; padding:10px 50px;}
|
28 |
+
.counter-button:hover { background-color:green; }
|
|
|
|
|
|
|
|
|
|
|
29 |
"""
|
30 |
+
count = traitlets.Int(0).tag(sync=True)
|
31 |
|
32 |
+
counter = solara.reactive(0)
|
33 |
@solara.component
|
34 |
def Page():
|
35 |
with solara.Column(style={"padding":"30px"}):
|
36 |
solara.Markdown("#Anywidget+Solara")
|
37 |
+
counterwidget = CounterWidget.element(count=counter.value, on_count=counter.set)
|
38 |
+
counterwidget
|
39 |
+
slider = widgets.IntSlider.element(min=-180, max=180, value=counter.value, on_value=counter.set)
|
40 |
+
slider
|
41 |
+
solara.Markdown(f"## Counter value is {counter.value}")
|
42 |
Page()
|