使用Bokeh Slider滑动图像 [英] Sliding through images with Bokeh Slider

问题描述

我试图在滑块的帮助下无缝地传达大量的科学数据。

I am trying to convey a large amount of scientific data seamlessly with the help of sliders.

我从Bokeh开始，并且几乎没有javascript的知识。我试图设置第一种方法，能够滑过两张图像，但我无法刷新图像。

I am beginning with Bokeh and have close to no knowledge in javascript. I tried to setup a first approach to be able to slide through two images, but I cannot get the image to refresh.

假设我有1.png和2.png在我的文件夹中。

Suppose I have 1.png and 2.png in my folder.

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 for the滑块和
处理散景图像。

I adapted examples from Bokeh Widget Doc for the slider and working with images in bokeh.

我的想法是，滑块通过callbackimg片段将修改包含url的源，即要加载的图像的名称。
我现在认为，只需要简单地访问源代码中的字符串，并通过滑块的当前值进行替换（因此当滑块从1开始时它应该从1.png跳到2.png 2）应该做的伎俩。

My idea is that the slider, through the callbackimg snippet, will modify the source which contains the url, i.e the name of the image to load. I thought, for now, that a simple access to the string in the source, and a replacement through the current value of the slider (so it should jump from 1.png to 2.png as the slider goes from 1 to 2) should do the trick.

然而，一切都没有改变。我怀疑我在Javascript片段中做错了。

However, nothing is changing. I suspect I am doing something wrong in the Javascript snippet.

感谢您的任何反馈

编辑：我编辑根据@bigreddot的建议编码，但现在滑块在位置'2'滑动时只显示一个空图。
EDIT2：解决了这个问题，在我的答案中

I edited the code according to the suggestions of @bigreddot, but now the slider shows simply an empty figure when sliding in position '2'. Solved the issue, in my answer below

推荐答案

问题是：

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

replace 方法返回 new string（您立即丢弃），因此您实际上并未更改列数据源中的任何内容。你需要这样的东西：

The replace method returns a new string (which you immediately discard), so you are not actually changing anything in the column data source. You need something like:

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

这篇关于使用Bokeh Slider滑动图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！