For loop color picker add to html table? Possible?

Community Support
,
4

Hei,

I tried adding the color picker to the data_table in bokeh, added it to the html formatter. I am a little stuck. Colors show up as black. Not sure why. You think its possible to link it somehow? (see example below).

from bokeh.io import show
from bokeh.layouts import column, row
from bokeh.models import ColorPicker, Div, HTMLTemplateFormatter, ColumnDataSource, TableColumn, DataTable
from bokeh.io import curdoc
from bokeh.plotting import figure, output_file, show

output_file("dark_minimal.html")
#curdoc().theme = 'dark_minimal'

plot = figure(x_range=(0, 1), y_range=(0, 1), width=350, height=350)
systems = ['Zone-1', 'Zone-2', 'Zone-3']
values = [1, 2, 3]
colors = ['#18e7b9','#520084','#d2d200']

htmltext = Div(text = """
<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

</style>
</head>
<body>
<h2>Change color for respectives zones below:</h2>
</body>
</html>             
""", width = 400, height = 300, style={'font-size': '100%', 'color': 'black'})

template="""                
            <span class="bk bk-input-group"> 
            <input class="bk bk-input" type="color" value = <%= value %>> 
            </span>
            """

formatter =  HTMLTemplateFormatter(template=template)

def plotter(fig,systems, colors):
    plot_dict = {} #use this dictionary to store/organize stuff
    #basically going for this kind of structure: 
        # name/system as keys, each key holding another dictionary pointing to 'fig':thefigureitsplottedon, 'rend':thelinerenderer, and 'picker':itscorrespondingcolorpicker
    for name, color, val in zip(sorted(systems), colors, values):
        print(name, color, val)
        line = fig.line(x=(0,val + 1), y=(0,1), color=color, line_width=4, legend_label = name)
        picker = ColorPicker(title=name,color=color) #added color arg here to properly initialize
        picker.js_link('color', line.glyph, 'line_color')
        plot_dict[name] = {}
        plot_dict[name]['fig'] = fig
        plot_dict[name]['rend'] = line
        plot_dict[name]['picker'] = picker
    return plot_dict


source = ColumnDataSource(data = dict(
    systems=systems,
    values = values,
    colors = colors,
))

columns = [TableColumn(field="systems", title="System Number", width = 200),
           TableColumn(field='colors', title='color', formatter=formatter, width=500),
           #TableColumn(field='plotdict', title='color picker', formatter=formatter, width=500)           
          ]
data_table = DataTable(source=source,
                       columns=columns,
                       fit_columns=True,
                       selectable = True,
                       sortable = True,
                       width=400,height=400)
#show(data_table)
plot_dict =  plotter(plot,systems, colors)
#now just use plot dict to organize a layout/column
#lo = row(plot, column([htmltext]+ [plot_dict[k]['picker'] for k in plot_dict.keys()]))
lo = row(plot, column([data_table] + [plot_dict[k]['picker'] for k in plot_dict.keys()]))

show(lo)
1 Like