Johnowhitaker
Johnowhitaker
Explore posts from servers
SSolara
Created by Johnowhitaker on 4/26/2024 in #general
Does anyone know how I might interact
Fantastic post, came for the content stayed for the satisfying confetti 😄
9 replies
SSolara
Created by Johnowhitaker on 4/26/2024 in #general
Does anyone know how I might interact
Many thanks @MaartenBreddels
9 replies
SSolara
Created by Johnowhitaker on 4/26/2024 in #general
Does anyone know how I might interact
import solara
import anywidget
import traitlets

class CounterWidget(anywidget.AnyWidget):
# Widget front-end JavaScript code
_esm = """
function render({ model, el }) {
let button = document.createElement("button");
button.innerHTML = `count is ${model.get("value")}`;
button.addEventListener("click", () => {
model.set("value", model.get("value") + 1);
model.save_changes();
});
model.on("change:value", () => {
button.innerHTML = `count is ${model.get("value")}`;
});
el.appendChild(button);
}
export default { render };
"""
# Stateful property that can be accessed by JavaScript & Python
value = traitlets.Int(0).tag(sync=True)

@solara.component
def Page():
count = solara.use_reactive(0)
counter = CounterWidget.element(value=count.value, on_value=count.set)
solara.Markdown(f"### Counter Widget count: {count.value}")
solara.Button("Reset counter", on_click=lambda: count.set(0))
import solara
import anywidget
import traitlets

class CounterWidget(anywidget.AnyWidget):
# Widget front-end JavaScript code
_esm = """
function render({ model, el }) {
let button = document.createElement("button");
button.innerHTML = `count is ${model.get("value")}`;
button.addEventListener("click", () => {
model.set("value", model.get("value") + 1);
model.save_changes();
});
model.on("change:value", () => {
button.innerHTML = `count is ${model.get("value")}`;
});
el.appendChild(button);
}
export default { render };
"""
# Stateful property that can be accessed by JavaScript & Python
value = traitlets.Int(0).tag(sync=True)

@solara.component
def Page():
count = solara.use_reactive(0)
counter = CounterWidget.element(value=count.value, on_value=count.set)
solara.Markdown(f"### Counter Widget count: {count.value}")
solara.Button("Reset counter", on_click=lambda: count.set(0))
^^ If anyone wants the solution
9 replies
SSolara
Created by Johnowhitaker on 4/26/2024 in #general
Does anyone know how I might interact
Yes that works
9 replies
SSolara
Created by Johnowhitaker on 4/26/2024 in #general
Does anyone know how I might interact
text_1 = solara.reactive("This is a global reactive variable")
count = solara.reactive(0)

class CounterWidget(anywidget.AnyWidget):
# Widget front-end JavaScript code
_esm = """
function render({ model, el }) {
let button = document.createElement("button");
button.innerHTML = `count is ${model.get("value")}`;
button.addEventListener("click", () => {
model.set("value", model.get("value") + 1);
model.save_changes();
});
model.on("change:value", () => {
button.innerHTML = `count is ${model.get("value")}`;
});
el.appendChild(button);
}
export default { render };
"""
# Stateful property that can be accessed by JavaScript & Python
value = traitlets.Int(0).tag(sync=True)

def __init__(self):
super().__init__()
self.value = count.value

@traitlets.observe("value")
def _on_value_change(self, change):
count.set(int(change["new"]))

@solara.component
def Page():
counter = CounterWidget.element()
solara.Markdown(f"### Counter Widget count: {count.value}")
solara.Button("Reset counter", on_click=lambda: count.set(0))
text_1 = solara.reactive("This is a global reactive variable")
count = solara.reactive(0)

class CounterWidget(anywidget.AnyWidget):
# Widget front-end JavaScript code
_esm = """
function render({ model, el }) {
let button = document.createElement("button");
button.innerHTML = `count is ${model.get("value")}`;
button.addEventListener("click", () => {
model.set("value", model.get("value") + 1);
model.save_changes();
});
model.on("change:value", () => {
button.innerHTML = `count is ${model.get("value")}`;
});
el.appendChild(button);
}
export default { render };
"""
# Stateful property that can be accessed by JavaScript & Python
value = traitlets.Int(0).tag(sync=True)

def __init__(self):
super().__init__()
self.value = count.value

@traitlets.observe("value")
def _on_value_change(self, change):
count.set(int(change["new"]))

@solara.component
def Page():
counter = CounterWidget.element()
solara.Markdown(f"### Counter Widget count: {count.value}")
solara.Button("Reset counter", on_click=lambda: count.set(0))
This is what I had which sort of worked (ckicking the custom widget updated the markdown, but resetting the reactive variable count didn't reset the custom widget. Just seen your message, will try
9 replies
SSolara
Created by Johnowhitaker on 4/26/2024 in #general
Does anyone know how I might interact
Ah I see one mistake I was making was using counter = CounterWidget().element() not counter = CounterWidget.element()
9 replies
SSolara
Created by Johnowhitaker on 4/9/2024 in #questions-issues
OAuth example fails
No description
5 replies