javascript - 尝试使用 CustomJS 加载新图像时 Bokeh 查找临时文件

Question

我是 Bokeh 的新手，正在使用 CustomJS 来定义回调。我编写了一段代码来根据其他 slider 的值对 slider 进行更改。我现在想要更改当 slider 之一的值发生变化时显示的图像。但是，当我运行此回调时，图像不会显示，并且在 Bokeh 图的控制台中，我看到 Bokeh 正在临时文件中查找某些文件。

p = figure(title = 'foo', tools = 'pan, save, wheel_zoom,reset,crosshair', x_range = [0,10], y_range = [0,10])


slider1 = Slider(start=0, end=15, value=4,step=.1, title="Delta P")
slider2 = Slider(start=1400, end = 1800, value=1500, step = 10, title = "Mass Flow")

newdelta = 4
newflow = 1500
newCV = CV(4+newdelta, 4, 1.3,225.41, 0.9, newflow, 27.3,968) # CV is a function within my code elsewhere

source = ColumnDataSource(data=dict(url=['C:\\Users\\XXX\\test_sample.jpg'])) 

slider3 = Slider(start=-100, end = 2000, value=newCV, step = 1, title = "CV")
slider3.callback = CustomJS(args=dict(slider3=slider3, source=source), code="""


                                if (slider3.value < 0){
                                    source.data.url= "C:\\\\Users\\\\XXX\\\\new_sample.jpg";
                                    console.log(source.data['url']);
                                };
                                source.change.emit();

                                """)                          


p.image_url('url', source=source, x=2, y=8, w=6, h=6)


slider1.callback = CustomJS(args=dict(slider1=slider1,slider2=slider2,slider3=slider3), code="""
                            slider3.value= slider1.value + slider2.value;


                            """)

slider2.callback = CustomJS(args=dict(slider1=slider1,slider2=slider2,slider3=slider3), code="""
                            slider3.value= slider1.value + slider2.value;

                            """)

show(row(column(slider1, slider2,slider3),p))

我在 python 中没有收到任何错误，但是当运行代码并且我将 slider3 值更改为小于 0 时，控制台将 source.data.url 值更改为新图像，但图像未加载。这是错误:

C:1 GET file:///C:/Users/XXX/AppData/Local/Temp/C net::ERR_FILE_NOT_FOUND
Image (async)
e @ bokeh-1.0.4.min.js:31
t._set_data @ bokeh-1.0.4.min.js:31
t.set_data @ bokeh-1.0.4.min.js:31
t.set_data @ bokeh-1.0.4.min.js:31
(anonymous) @ bokeh-1.0.4.min.js:31
t.emit @ bokeh-1.0.4.min.js:31
e.emit @ bokeh-1.0.4.min.js:31
c._setv @ bokeh-1.0.4.min.js:31
c.setv @ bokeh-1.0.4.min.js:31
set @ bokeh-1.0.4.min.js:31
t.compute_indices @ bokeh-1.0.4.min.js:31
(anonymous) @ bokeh-1.0.4.min.js:31
t.emit @ bokeh-1.0.4.min.js:31
e.emit @ bokeh-1.0.4.min.js:31
eval @ VM29:10
t.execute @ bokeh-1.0.4.min.js:31
t @ bokeh-widgets-1.0.4.min.js:31
(anonymous) @ bokeh-1.0.4.min.js:31
t._slide @ bokeh-widgets-1.0.4.min.js:31
(anonymous) @ bokeh-widgets-1.0.4.min.js:31
(anonymous) @ bokeh-widgets-1.0.4.min.js:32
(anonymous) @ bokeh-widgets-1.0.4.min.js:32
R @ bokeh-widgets-1.0.4.min.js:32
(anonymous) @ bokeh-widgets-1.0.4.min.js:32
T @ bokeh-widgets-1.0.4.min.js:32
O @ bokeh-widgets-1.0.4.min.js:32
e @ bokeh-widgets-1.0.4.min.js:32

有人可以帮助我了解出了什么问题以及如何纠正吗？

Answer 1

您无法直接从网页访问本地文件。

解决方案一:使用bokehserve，将图像数据直接放入数据源中。您必须使用 p.image_rgba 而不是 p.image_url。

示例:

import numpy as np
from PIL import Image
from bokeh.layouts import column
from bokeh.models import Button, ColumnDataSource
from bokeh.plotting import figure, curdoc


def read_image_to_array(path):
    im = Image.open(path).convert('RGBA').transpose(Image.FLIP_TOP_BOTTOM)
    return np.asarray(im).view(np.uint32)


ds = ColumnDataSource(data=dict(image=[], x=[], y=[], dw=[], dh=[]))

p = figure()
p.image_rgba(image='image', x='x', y='y', dw='dw', dh='dw', source=ds)
b = Button(label='Set Image')


def set_image():
    path = '...'
    img = read_image_to_array(path)
    dh, dw, _ = img.shape
    ds.data = dict(image=[img], x=[0], y=[0], dw=[dw], dh=[dh])


b.on_click(set_image)

curdoc().add_root(column(p, b))

解决方案 2:使用 Web 服务器(甚至 python -m http.server 就足够了)并将所有 URL 配置为可通过该 Web 服务器使用。