Hello,
Is there a way to change the position of an Image URL after it has been created? For the following code, the first line works. It displays the image at a certain point on the graph. To this point, I have fully implemented a simple circle to do what I want, which is to move around the plot using a data source and all that.
I would like to combine the properties of both to move the image url around the plot.
Is there a way to do this? As you can see I tried merging the properties but that did not work.
See the following illustrative example, which uses a slider to move the x-coordinate of the image-url. Hopefully, this simple conceptual demo can be adapted to your requirement.
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
"""
from bokeh.models import ColumnDataSource, CustomJS, Slider
from bokeh.plotting import figure
from bokeh.layouts import column
from bokeh.io import show
url = "https://static.bokeh.org/logos/logo.png"
x_min, x_max = (0, 100)
y_min, y_max = (0, 100)
dx = dy = 10
source = ColumnDataSource(dict(
url = [url],
x = [x_min],
y = [y_min],
w = [dx],
h = [dy]))
p = figure(width=500, height=500, x_range=(x_min-dx, x_max+dx), y_range=(y_min-dy, y_max+dy))
r = p.image_url(x='x', y='y', w='w', h='h', source=source, anchor='center')
cb = CustomJS(args=dict(source=source), code="""
var data = source.data;
var f = cb_obj.value
var x = data['x']
var y = data['y']
x[0] = f
source.change.emit();
""")
sl = Slider(start=x_min, end=x_max, step=1, value=x_min, title='Position East')
sl.js_on_change('value', cb)
show(column(p,sl))