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

Community Support
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