Скольжение изображений с помощью Bokeh Slider

Question

Я пытаюсь передать большое количество научных данных без проблем с помощью ползунков.

Я начинаю с Bokeh и не знаком с javascript. Я попытался настроить первый подход, чтобы иметь возможность скользить по двум изображениям, но я не могу заставить изображение обновляться.

Предположим, у меня есть 1.png и 2.png в моей папке.

from bokeh.io import vform 
from bokeh.models import CustomJS, ColumnDataSource, Slider 
from bokeh.plotting import Figure, output_file, show 

output_file('image.html') 

source = ColumnDataSource(data=dict(url=['1.png'])) 

p = Figure(x_range=(0,1), y_range=(0,1)) 

callbackimg = CustomJS(args=dict(source=source), code=""" 
    var data = source.get('data'); 
    var f = cb_obj.get('value') 
    old = data['url'][0] 
    data['url'][0]= old.replace("1","f") 
    source.trigger('change'); 
""") 

p.image_url('url',source=source, x=0, y=1,w=1,h=1) 
slider = Slider(start=1, end=2, value=1, step=1, title="image number",  callback=callbackimg) 

layout = vform(slider, p) 
show(layout) 

Я приспособил примеры из Bokeh Widget Doc для ползуна и working with images in bokeh.

Моя идея заключается в том, что слайдер через фрагмент callbackimg изменит источник, содержащий URL-адрес, то есть имя загружаемого изображения. Я подумал, что на данный момент простой доступ к строке в источнике и замена через текущее значение ползунка (так что он должен прыгать с 1.png на 2.png, когда ползунок переходит от 1 до 2) должен сделать трюк.

Однако ничего не меняется. Я подозреваю, что я делаю что-то неправильно в фрагменте Javascript.

Спасибо за любые отзывы

EDIT: Я редактировал код в соответствии с предложениями @bigreddot, но теперь бегунок показывает просто пустой рисунок при скольжении в положении «2». EDIT2: Решена проблема, в моем ответе ниже

Answer 1

Проблема заключается в следующем:

url = data['url'][0] 
url.replace("1","f") 

Метод replace возвращает новую строку (который вы сразу же отбрасывать), так что вы на самом деле не что-то менять в источнике данных столбца. Вам нужно что-то вроде:

old = data['url'][0] 
data['url'] = old.replace("1","f") 

Answer 2

@bigreddot ответ правильный, но вар е является числом, поэтому в замене, мне нужно написать f.toString (10). Код, который делает то, что я хочу:

from bokeh.io import vform 
from bokeh.models import CustomJS, ColumnDataSource, Slider 
from bokeh.plotting import Figure, output_file, show 

output_file('image.html') 

source = ColumnDataSource(data=dict(url=['1.png'])) 

p = Figure(x_range=(0,1), y_range=(0,1)) 

callbackimg = CustomJS(args=dict(source=source), code=""" 
    var data = source.get('data'); 
    var f = cb_obj.get('value') 
    old = data['url'][0] 
    data['url'][0]= old.replace("1",f.toString(10)) 
    source.trigger('change'); 
""") 

p.image_url('url',source=source, x=0, y=1,w=1,h=1) 
slider = Slider(start=1, end=2, value=1, step=1, title="image number",  callback=callbackimg) 

layout = vform(slider, p) 
show(layout)