Bokeh：在图片中找到小部件

Question

在图片中，显示了我当前的网站。顶部是散景生成的图形。在其下面是一个滑块。在图中，这是红线，它是散景范围。使用上述滑块，我可以在图中移动跨度。滑块下方是左侧的图片，右侧是输入字段，它们使用以下代码实现：

#Generates a widget that holds the picture of the mill
mill_image = Div(   text="""
                         <img src="/static/images/milling_plant.png" 
                          alt="div_image" 
                          width="700">""", 
                          width=700, 
                          height=150)

#Generates a widget that holds the entry field
text_clas_speed = TextInput(value="0", 
                           title=_("classifier speed"),
                           width=100)

输入字段被滥用，因为它不会获得输入，但会显示一个值。显示的值是图中红色跨度突出显示的值。移动滑块时，它会动态变化。所有这些都很好。

现在问我一个问题：我想做的是将输入字段放在图片中的某个位置。我正在考虑使用坐标设置其位置。目前，我正在使用以下代码来表示立场。

output = column(
           p, #Graph
           time_slider, #Slider
           row(
             mill_image, #Picture
             text_clas_speed, #Input field that displays the value
             widgetbox(checkbox_group), #Some checkboxes not visable in the screenshot
           ) 
         )

结果是，此结构中可能没有text_clas_speed，它带有mill_image。目前，我不知道如何完成这项工作。非常感谢您的帮助。

Answer 1

Bokeh的内置布局系统没有重叠元素的任何概念或功能，因此不可能将图像的控制与纯Bokeh重叠。您将需要创建一个Jinja HTML模板，以某种方式以重叠的方式放置div，然后使用Bokeh的embed API将单个组件放置在模板中。