Ipywidget

Download this notebook from GitHub (right-click to download).


import numpy as np
import panel as pn
import ipywidgets as ipw

pn.extension()

The IPyWidget pane renders any ipywidgets model both in the notebook and in a deployed server. This makes it possible to leverage this growing ecosystem directly from within Panel simply by wrapping the component in a Pane or Panel.

Parameters:

For layout and styling related parameters see the customization user guide.

  • object (object): The ipywidget object being displayed

Display

  • default_layout (pn.layout.Panel, default=Row): Layout to wrap the plot and widgets in


The panel function will automatically convert any ipywidgets object into a displayable panel, while keeping all of its interactive features:

date   = ipw.DatePicker(description='Date')
slider = ipw.FloatSlider(description='Float')
play   = ipw.Play()

layout = ipw.HBox(children=[date, slider, play])

pn.panel(layout)

Interactivity and callbacks

Any ipywidget with a value parameter can also be used in a pn.depends decorated callback, e.g. here we declare a function that depends on the value of a FloatSlider:

slider = ipw.IntSlider(description='Slider', min=-5, max=5)

@pn.depends(slider)
def cb(value):
    return 'The slider value is ' + (
        'negative' if value < 0 else 'nonnegative'
    )

pn.Row(slider, cb)

If instead you want to write a callback yourself you can also use the traitlets observe method as you would usually. To read more about this see the Widget Events section of the ipywidgets documentation.

caption = ipw.Label(value='The slider value is nonnegative')
slider = ipw.IntSlider(min=-5, max=5, value=1, description='Slider')

def handle_slider_change(change):
    caption.value = 'The slider value is ' + (
        'negative' if change.new < 0 else 'nonnegative'
    )

slider.observe(handle_slider_change, names='value')

pn.Row(slider, caption)

External widget libraries

The IPyWidget panel is also not restricted to simple widgets, ipywidget libraries such as ipyvolume and ipyleaflet are also supported.

import ipyvolume as ipv
x, y, z, u, v = ipv.examples.klein_bottle(draw=False)
fig = ipv.figure()
m = ipv.plot_mesh(x, y, z, wireframe=False)
ipv.squarelim()

pn.panel(fig)
from ipyleaflet import Map, VideoOverlay

m = Map(center=(25, -115), zoom=4)

video = VideoOverlay(
    url="https://www.mapbox.com/bites/00188/patricia_nasa.webm",
    bounds=((13, -130), (32, -100))
)

m.add_layer(video);

pn.panel(m)

Limitations

The ipywidgets support has some limitations because it is integrating two very distinct ecosystems. In particular it is not yet possible to set up JS-linking between a Panel and an ipywidget object or support for embedding. These limitations are not fundamental technical limitations and may be solved in future.

This web page was generated from a Jupyter notebook and not all interactivity will work on this website. Right click to download and run locally for full Python-backed interactivity.

Download this notebook from GitHub (right-click to download).