Interactive static images bokeh

Question

I know, I can display images with Div in bokeh as per this example:

How to display static images in Bokeh using Div

But would it be possible to alter the image shown based on some input. So for example, I have three pictures in an images folder and a dropdown select menu with bokeh. Would it be possible to alter the Div based on whatever the user has selected?

I am deploying this with bokeh server not just static html.

I now have this:

def maphandler(attr, old, new):

    div.text = new

div = Div(text="<img src='images/map2016.png'>")
menu = [("2016", "<img src='images/map2016.png'>"),
        ("2017", "<img src='images/map2017.png'>"),
        ("2018", "<img src='images/map2018.png'>")]
map_dropdown = Dropdown(name='Select Year:', menu=menu)
map_dropdown.on_change('value', maphandler)
map_row = row(map_dropdown, div)
layout = layout(map_row)

With my folder structure looking like this:

/bokeh_server
   /images
      map2016.png
      map2017.png
      map2018.png
    main.py

This should work right? Yet when I run the server the image doesn't show up.

syntonym syntonym · Accepted Answer · 2018-06-23T15:58:43

Because you are deploying with the bokeh server you can use the python handlers as described in the documentation about widgets.

div = Div(text="<img src='myapp/static/images/myimg.jpg'>")

menu = [("Img 1", "<img src='myapp/static/images/myimg.jpg'>"), 
        ("Img 2", "<img src='myapp/static/images/myimg2.jpg'>")]

def handler(attr, old, new):
    div.text = new

dropdown = DropDown(labels="Images", menu=menu)
dropdown.on_change("value", handler)

Interactive static images bokeh

1 Answers