I would like to use a gradient color style for fill for a patch
glyph. Based on search results here on discourse it seems one should try CanvasTexture
. I have managed to get the gradient fillStyle
to work with JS code. However, the problem is the manual part of getting the screen units that I need to use in order to define the location and size (height) of the texture canvas. For me it is important that the gradient is not repeated in the y-direction, hence it covers the whole height of the patch
glyph.
So my question: is it possible to get screen units of the patch glyph coordinates?
If I change my app to bokeh serve
setup, is it then possible to get the coordinates in screen units?
Thanks, any help appreciated.
(BTW: I have made one solution of gradient color fill using 40 thin patches
, but I would like to see if the CanvasTexture
could be a viable alternative.)
System: bokeh 2.4.3, macOS, python 3.9, FireFox 101.0.1.
from bokeh.io import show, save
from bokeh.plotting import figure
from bokeh.models import CanvasTexture
gradient_code = """
const bk_plot = Bokeh.documents[0].get_model_by_name('plot');
console.log(bk_plot.x_range.start); // null (plot not drawn yet?)
console.log(bk_plot.x_range.end); // null (plot not drawn yet?)
console.log('inner_width: ' + bk_plot.inner_width.toString()); // 0
console.log('inner_height: ' + bk_plot.inner_height.toString()); // 0
// can I get any data vs screen units from the patch glyph model?
const bk_patch = Bokeh.documents[0].get_model_by_name('patch');
console.log(bk_patch.glyph.properties.y);
//console.log(ctx);
// height of patch and y0 is in px units and based on my monitor
// they correlate of course to the min and max of patch y coordinates
// how do I get from patch data units to screen units?
const height = 500; // measured on my monitor
const y0 = 53; // measured on my monitor
const y1 = height+y0;
ctx.canvas.width = 100;
ctx.canvas.height = y1;
const grad = ctx.createLinearGradient(20, y0, 20, y1);
ctx.globalAlpha = 0.8;
grad.addColorStop(0, "black");
grad.addColorStop(1, "yellow");
ctx.fillStyle = grad;
ctx.fillRect(0, y0, 100, y1);
"""
gradient = CanvasTexture(
code = gradient_code,
repetition = "repeat_x"
)
p = figure(
title = "CanvasTexture",
toolbar_location = None, tools = "",
y_axis_location = "right", name = "plot"
)
r = p.patch(
x = [2, 3, 5, 6, 6, 5, 4, 2],
y = [10, 5, 9, 13, 15, 18, 19, 14],
fill_color = None,
fill_alpha = 0.5,
line_color="grey",
hatch_pattern = "image",
hatch_scale=34,
hatch_color = "grey",
hatch_weight = 0.5,
hatch_alpha = 0.5,
hatch_extra = {"image": gradient},
name = 'patch'
)
save(p)