How to enable a zoom tool on a panel image?

Panel
,
1

Hi, and thanks as always for the support.

I have created an image in my UX from a file stored on disk, i.e.

import panel as pn
pn.extension()

tempfile = '../_temp/my.png'
pn.Column(
    pn.pane.image.Image(tempfile)
).servable()

This works very nicely and displays my image.

I want the image to be displayed with a zoom tool (like you have in Bokeh) - it is a large PNG image and I want to zoom in and out. Is there a way to enable a zoom tool in panel?

If not in “pure” panel, should I be looking for this functionality in “pure” Bokeh, Holoviews, or hvplot? Or a combination? Can you point me in the right direction?

Thank you

2

AFAIK you can’t zoom into Panel images, but you can use holoviews: pn.pane.HoloViews(hv.Image())

1 Like
3

Perhaps you can use some stylesheets= to achieve it like

4

@ahuang11 Thank you. I got it to work (I am completely new to holoviews; sorry for the newbie questions).

For the benefit of anybody else, here is a solution:

import holoviews as hv
import panel as pn
pn.extension()

tempfile = '../_temp/my.png'
im = hv.RGB.load_image(tempfile)

pn.Column(
    pn.pane.HoloViews(im),
).servable()

Thanks again.

1 Like