Bind for Clickable Images?

Panel
, ,
1

I’m brand new to Panel, trying to create clickable Images. (Like buttons, but prettier? :slight_smile: )

I tried the below but image clicks do nothing.

out_panel = pn.panel("Original")
button1 = pn.widgets.Button(name="Click me!")
button2 = pn.widgets.Button(name="No, me!")
LOGO = "https://assets.holoviz.org/panel/tutorials/matplotlib-logo.png"
img_pane = pn.pane.PNG(LOGO, width=200, height=200)
column = pn.Column(button1, button2, img_pane, out_panel)

def button1_click(event):
    out_panel.object = "Button 1 clicked"
def button2_click(event):
    out_panel.object = "Button 2 clicked"
def image_click(event):
    out_panel.object = "Image clicked"

pn.bind(button1_click, button1, watch=True)
pn.bind(button2_click, button2, watch=True)
pn.bind(image_click, img_pane, watch=True)

column

How do I bind to objects that don’t have the right parameter to watch (like Button’s ‘clicks’)? Or am I fundamentally misunderstanding something? Thanks!

2

I think you might want to use ReactiveHTML

https://panel.holoviz.org/explanation/components/reactive_html_components.html#a-basic-example

3

Neat! I made lots of progress, but not quite there:
edit: Got it! I need to bind to the PARAM, not the PANEL. I edited the below accordingly.

import param
import panel as pn
from panel.reactive import ReactiveHTML

pn.extension()

LOGO = "https://assets.holoviz.org/panel/tutorials/matplotlib-logo.png"

class ClickImage(ReactiveHTML):
    image_url = param.String()
    clicks = param.Integer(default=0)

    def __init__(self, **params):
        if "img" not in params:
            raise ValueError("An image must be provided.")
        self.image_url = params.pop("img", None)
        super().__init__(**params)

    _template = '<img id="slideshow_el" src="${image_url}" onclick="${_img_click}"></img>'

    def _img_click(self, event):
        self.clicks += 1
        print(f"Image clicked {self.clicks} times")

out_panel = pn.panel("Original")
button = pn.widgets.Button(name="Click me!")
click_img = ClickImage(img=LOGO)

def button_click(event):
    out_panel.object = "Button1 clicked"
def image_click(event):
    out_panel.object = "Image clicked"
pn.bind(button_click, button, watch=True)
pn.bind(image_click, click_img.param.clicks, watch=True)

pn.Column(button, click_img, out_panel)

THANKS!