Solara•7mo ago

Run JS script

In my application I use solara as an iframe and sometimes I need to send information to the front. I need send info after clicking the buttons. I have several buttons after some of them work, it is necessary for an alert message or a base64 image to be sent to the front. My sending function looks like this:

def sendMessageToFront(msg):
    jsn = json.dumps(msg.value)

    custom_js = f"""
    window.parent.postMessage({{
        data: {jsn},
        type: "ipynb",
        key: "test"
    }}, '*');
    """
    solara.HTML(tag="script", unsafe_innerHTML=custom_js)

def sendMessageToFront(msg):
    jsn = json.dumps(msg.value)

    custom_js = f"""
    window.parent.postMessage({{
        data: {jsn},
        type: "ipynb",
        key: "test"
    }}, '*');
    """
    solara.HTML(tag="script", unsafe_innerHTML=custom_js)

And I don’t know how to properly integrate it into this scheme:

import solara

message_dict = solara.reactive({})

def on_click_1():
    ...
    message_dict.set({"alertMessage": "CLICK 1"})

def on_click_2():
    ...
    message_dict.set("imageLink": f'data:image/png;base64,{img_b64}')

@solara.component
def Page():
    solara.Button(label="CLICK 1", on_click=on_click_1)
    solara.Button(label="CLICK 2", on_click=on_click_2)

Page()

import solara

message_dict = solara.reactive({})

def on_click_1():
    ...
    message_dict.set({"alertMessage": "CLICK 1"})

def on_click_2():
    ...
    message_dict.set("imageLink": f'data:image/png;base64,{img_b64}')

@solara.component
def Page():
    solara.Button(label="CLICK 1", on_click=on_click_1)
    solara.Button(label="CLICK 2", on_click=on_click_2)

Page()

3 Replies

MaartenBreddels•7mo ago

Nice idea to use postMessage. Maybe this example helps, it's using vue, but it does not render anything: https://github.com/widgetti/solara/issues/641#issuecomment-2104622270

GitHub

Feature Request: Link Key bindings to buttons · Issue #641 · widget...

Would it be possible to make keys / key-bindings / correspond to button clicks. I.e. one button can be linked to Return, another to arrow-key, etc..

icecream4OP•7mo ago

Thanks for the advice. I tried to do it, but nothing works so far 🙂 Perhaps one of the problems is that I run everything through the jupyter notebook. And therefore the decorator cannot find the file "No such file or directory: '/tmp/ipykernel_12567/tofront.vue'". I entered the full address, no errors were displayed, but nothing was rendered at all

MaartenBreddels•6mo ago

Maybe you can share the code, from the information you gave me I cannot help you further

Gaming

Programming

Run JS script