Interaction of two widget

I would like to make two bokeh widgets talk to one another. I have a dropdown menu and a colorpicker. The aim is to show the color picker in a color according to my selection in the dropdown menu. I would like to get it to work in a jupyter notebook. I think I need to use CustomJS to handle a js event, but I am pretty sure I did it wrong. My aim is basically to update to push the selection in the dropdown menu into a variable “active_series” which I use to show the color.

Apoologies if this is a question answered many times, but I did not find an answer which worked for me.

Many thanks for your replies in advance

import bokeh
from bokeh import events
from bokeh.io import show, output_notebook, push_notebook
from bokeh.models.widgets import ColorPicker,Select


n_series=10
series_colours=bokeh.palettes.Category10_10


active_series='Series 1'
series={}
for i_series in range(n_series):
    series['Series {:d}'.format(i_series+1)]=i_series

callback = CustomJS(args=dict(active_series=active_series), code="""
    var active_series = cb_obj.value
    active_series.change.emit();
""")    
    
select = Select(title="Series",value=active_series, options=list(series.keys()), callback=callback2, width=200)
colorpicker = ColorPicker(color=series_colours[series[select.value]],title='Colour', width=50)

select.js_on_change('value', callback)
show(row(select, colorpicker))
'''

I’m not 100% sure what you mean exactly.
You want to change the colorpicker when selecting a different option in select?
Do you also want the communication vice versa?

For the first case it seems that the colorpicker does not like color names, but only hex codes. Therefore I’m using a dict for mapping the colors to the desired hex code.

This runs for me:

import bokeh
from bokeh import events
from bokeh.io import show, output_notebook, push_notebook
from bokeh.models.widgets import ColorPicker,Select
from bokeh.models import CustomJS
from bokeh.layouts import row

select_JS_callback = """
    colorpicker.color = color_map[cb_obj.value];
    console.log(colorpicker.color)
    colorpicker.change.emit();
"""

option_list = ["black", "blue", "green"]
color_map = dict(black="#000000", blue="#2725b8", green="#23c44e")

select = Select(title="Series",value="black", options=option_list, width=200)
colorpicker = ColorPicker(title='Colour', width=50, name="mycolpicker")
colorpicker.color="green"
select.callback = CustomJS(args=dict(colorpicker=colorpicker, color_map=color_map), code=select_JS_callback)

show(row(select, colorpicker))

Hi d-que!

I made a few changes to your code based on what it sounds like you’re looking for. As I understand it, the entity you’re actually looking to update is the colorpicker, so the colorpicker should be inside the CustomJS code.

Try this out and see if it’s close to what you want.

import bokeh
from bokeh.io import show
from bokeh.models.widgets import ColorPicker,Select
from bokeh.models import CustomJS
from bokeh.layouts import row

n_series = 10
series_colours = bokeh.palettes.Category10_10

active_series = 'Series 1'
series = {}
for i_series in range(n_series):
    series['Series {:d}'.format(i_series+1)]=i_series

colorpicker = ColorPicker(color=series_colours[0], title='Colour', width=50)

callback = CustomJS(args=dict(series=series, series_colours=series_colours, colorpicker=colorpicker), code="""
    var active_series = cb_obj.value;
    colorpicker.color = series_colours[series[active_series]];
""")

select = Select(title="Series", value=active_series, options=list(series.keys()), callback=callback, width=200)

select.js_on_change('value', callback)
show(row(select, colorpicker))

Hi Matthias,

Many thanks for the reply. Your example works for me as well - that is already great. It would be good, if I can save the color selected in the colorpicker into the dictionary. I need them to colour regions of a simple line plot and it would be perfect, if can hand over the selected option/series to my plot and a python event I run there.

I tried to break the problem down to the first insurmountable problem and then see it from there.

Cheers,
Daniel

Hi carolyn,

Thanks for your reply as well. Works well!