Johnowhitaker Comments - Answer Overflow

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

5 replies

Gaming

Programming