Bokeh JS Image_url

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.

Thanks a lot.

g.image_url({url: "Airplane Horizontal.png",x:10,y:100,w:1, h:450, anchor:"center_center"})
g.circle({field: "x"}, {field: "y"}, {source: gSource, color:'blue', size:15})

g.image_url({url: "Airplane Horizontal.png",x:{field:"x"},y:{field:"y"},source:gSource, w:10, h:10, anchor:"center_center"})

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))

Ah thank you, this helped

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.