javascript - 使用带有 Pythonic 回调的 Bokeh Slider 滑动图像

Question

灵感来自 this Bokeh gallery 上的示例，我尝试实现一个 slider 来滑过大量收集的数据(本质上是生物数据的延时)。我没有在 slider 上使用自定义 javascript 回调，而是尝试使用小部件。我不知道这是否可行。找到我的最小工作示例。它正确显示了 slider 和图像，但更新似乎并没有发生。

##Creating the 15 different pictures
#Want to make 15 different pictures of a certain field function evaluated on a grid of img_size_x x img_size_y
import numpy as np
img_size_x,img_size_y = (512,512)
variations=15

#Make the field
xx,yy=np.meshgrid( np.arange(img_size_x),np.arange(img_size_y))

#Broadcast the field into as many copies as there are variations to make use of the ufuncs
xx= np.tile(xx,variations).reshape(variations,img_size_x,img_size_y)
yy= np.asarray(map(np.transpose,np.tile(yy.T,variations).reshape(variations,img_size_x,img_size_y)))

varied_parameter=np.linspace(.01,0.5,variations) #frequencies of a sin/cos function, for example
varied_parameter=np.repeat(varied_parameter,img_size_x*img_size_y).reshape(variations,img_size_x,img_size_y) #broadcast

matrix_images=np.cos(varied_parameter*xx)+np.sin(varied_parameter*yy) # field function evaluated for diff frequencies.

##Creation of the Bokeh interface to slide through these pictures
from bokeh.plotting import figure, show, output_file, output_notebook
from bokeh.models import ColumnDataSource
from bokeh.layouts import row, widgetbox
from bokeh.models.widgets import Slider
import bokeh.palettes as pal
output_notebook()

data=matrix_images[0] #starting value for the column data source
source = ColumnDataSource(dict(image=[data])) #the figure.image function takes a vector of matrices
image_sl = Slider(title="Image number", value=0, start=0, end=variations-1, step=1) #slider to go through the images
def update_img(attrname, old, new):
    curr_value = image_sl.value
    x=matrix_images[int(curr_value)] #make sure index is int to select image number 'curr_value'
    source.data = dict(image=[x])

image_sl.on_change('value', update_img) #give slider its callback function
inputs = widgetbox(image_sl) #wrap the slider into a display object


p = figure(x_range=(0, 10), y_range=(0, 10))
# must give a vector of image data for image parameter
p.image('image', source=source,x=0, y=0, dw=10, dh=10, palette=pal.Greys256)

show(row([p,image_sl]) ) # open a browser

Answer 1

您尝试使用的更新类型仅适用于 Bokeh Server。当 output_notebook 或 output_file 与 show 一起使用时，生成的输出是带有嵌入 JavaScript 的 HTML，可呈现实际绘图。这意味着这些图应该被视为在浏览器中运行的独立文件。这意味着这些图无法直接访问或运行任何 Python 代码。

Bokeh 为您提供了几种在 Python 中为绘图编写回调的方法。第一种是使用 Bokeh Server。你可以阅读它here .由于您已经编写了与 Bokeh Server 一起使用的回调，因此以这种方式工作非常容易。我注释掉了这些导致错误的行。

xx= np.tile(xx,variations).reshape(...
yy= np.asarray(map(np.transpose, ...

然后为 curdoc 添加导入 from bokeh.io import curdoc 并将 show(row([p,image_ls])) 替换为 curdoc()。 add_root(行([p,image_ls]))。从那里可以使用 $ bokeh serve --show name_of_your_file.py 运行示例。

如果您想要在笔记本或独立文件中运行的东西。您还可以选择使用 PyScript 回调。此回调看起来像 python，它与您的 Python 代码写在同一个文件中。但是，它将被解释为一种称为 PyScript 的语言，以将您的“Python 代码”编译为 JavaAcript。同样，这将无法访问您的 python 运行时环境。可以将 Bokeh 对象传递给这些回调，但仅此而已。这可能不适合您的用例，因为您的回调需要访问 matrix_images。您可以阅读更多here .我建议阅读有关添加交互的整个部分，它有很多关于如何使用 CustomJS 回调的好例子。

另一种选择是使用 Jupyter Notebook Widgets。不过，此解决方案仅适用于您的笔记本电脑。您可以阅读有关此方法的信息 here .