How to use CustomJSHover to format the default 32bit RGBA tooltip value

Community Support
1

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!

2

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.

3

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 :wink:

4

@jmm that is described in the docs page I linked:

The variable value will contain the untransformed value.

5

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])
1 Like