I am new to bokeh, I have been taking a look to the suggestion given at compute image bounds correctly by bryevdv · Pull Request #8773 · bokeh/bokeh · GitHub
regarding using CustomJSHover
to format the default 32bit RGBA value and show it as a tuple containing (R, G, B, A), but unfortunately I have not been able to find how can I get the 32bit RGBA int value within javascript. The example provided in the docs shows how to access x and y from javascript using special_vars.x and special_vars.y but it does not mention how to access the default 32bit RGBA from javascript. Could you please give me some suggestions?..Thanks!
Hi @jmm the RGBA value is in the ColumnDataSource, so it is accessed using the same @colum_name
syntax as anything else. In the PR you can see this line:
p = figure(tooltips=[("x", "$x"), ("y", "$y"), ("value", "@image")])
where the RGBA value is extracted from the "image"
column of the data source. The raw value is a 32-bit RGBA int so if you wanted to display individual channels you could use a CustomJSHover
to transform the value before it is displayed.
Hi @Bryan, thank you very much for your kind reply. What I have tried so far is what you mentioned in the last sentence : " The raw value is a 32-bit RGBA int so if you wanted to display individual channels you could use a CustomJSHover
". The difficulty that I am having is precisely how to access such 32-bit RGBA within javascript. Here is the example code provided in the docs:
lat_custom = CustomJSHover(code="""
var projections = require(“core/util/projections”);
var x = special_vars.x
var y = special_vars.y
var coords = projections.wgs84_mercator.inverse([x, y])
return “” + coords[1]
“”")
p.add_tools(HoverTool(
tooltips=[( ‘lat’,’@y{custom}’ )],
formatters=dict(y=lat_custom)
))
Here it is showed how to access the variable x from javascript using var x = special_vars.x.
What is the name of the javascript variable that I should access in order to get access to the raw
32-bit RGBA int value?
Thank you very much for all your help
@jmm that is described in the docs page I linked:
The variable
value
will contain the untransformed value.
Thank you very much for all your patience and help @Bryan!. I managed to do it ;).
The problem was that, given my bokeh beginner status, I misunderstood the CustomJSHover documentation.
In case someone runs into this question, here it is a complete example combining CustomJSHover and hvplot.
import numpy as np
import xarray as xr
import hvplot.xarray
from bokeh.models import CustomJSHover, HoverTool, CrosshairTool
from skimage import data
image = data.astronaut()
da = xr.DataArray(
image,
dims=['y', 'x', 'channel'],
coords={
'y': np.arange(image.shape[0]),
'x': np.arange(image.shape[1]),
'channel': [0,1,2]
}
)
image_formatter = CustomJSHover(
code="""
var rgba_bin = (value).toString(2);
var A = parseInt(rgba_bin.slice(0,8), 2);
var B = parseInt(rgba_bin.slice(8,16), 2);
var G = parseInt(rgba_bin.slice(16,24), 2);
var R = parseInt(rgba_bin.slice(24,32), 2);
return "" + [R,G,B,A];
"""
)
hover = HoverTool(
tooltips=[
('x', '$x{int}'),
('y', '$y{int}'),
('RGBA','@image{custom}')
]
)
hover.formatters = {
'image': image_formatter
}
crosshair = CrosshairTool(line_color='red')
da.hvplot.rgb(x='x', y='y', bands='channel', flip_yaxis=True, aspect='equal', tools=[hover, crosshair])