Change the transparency of an image interactively

Community Support
1

Hi,

How can I change the transparency of an image interactively using slider ?

regards

2

@ahmettemiz88

Here is one way to do so, which links the global-alpha (i.e. transparency) of a bokeh Image glyph with the slider’s value through a JavaScript property-link callback.

The original bokeh image example here was modified to include a slider and a js_link callback illustrate.

https://docs.bokeh.org/en/latest/docs/gallery/image.html

#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
"""
import numpy as np

from bokeh.plotting import figure, output_file, show

from bokeh.models import Slider
from bokeh.layouts import column

N = 500
x = np.linspace(0, 10, N)
y = np.linspace(0, 10, N)
xx, yy = np.meshgrid(x, y)
d = np.sin(xx)*np.cos(yy)

p = figure(tooltips=[("x", "$x"), ("y", "$y"), ("value", "@image")])
p.x_range.range_padding = p.y_range.range_padding = 0

# must give a vector of image data for image parameter
im = p.image(image=[d], x=0, y=0, dw=10, dh=10, palette="Spectral11", level="image")
p.grid.grid_line_width = 0.5

sl = Slider(start=0.0, end=1.0, step=0.01, value=1.0, title='Image Transparency')
sl.js_link('value', im.glyph, 'global_alpha')

output_file("image.html", title="image.py example")

show(column(sl,p))
2 Likes
3

Thank you for your complete solution.
regards