python - 如何使 ipywidgets 图像可点击？

Question

我想在 jupyter notebook 中创建一个 Image 实例来响应点击事件——我们该怎么做？我还希望能够识别被点击的图像。使用按钮很简单，但使用图像则不然。

Answer 1

在玩过这个之后，到目前为止我唯一能做到的方法是使用一些javascript ...在python代码中，我有类似的东西：

from ipywidgets import Image
from IPython.display import display, Javascript
im = Image(value=open(filename, 'rb').read())
im.add_class('the_image_class')

def on_image_click():
    #do something....
    return 

#Now, I wrote some javascript(jQuery) code like this...
js = ''' $(".the_image_class").on("click", function(e){
             var kernel = IPython.notebook.kernel;
             kernel.execute("on_image_click()");
          });'''

#then, run the javascript...
display(Javascript(js))

这有点错过了完全在python中使用小部件的意义......有没有更好的方法将python函数绑定到小部件事件，而不需要javascript？

Answer 2

%%javascript
let kernel = IPython.notebook.kernel;
kernel.execute("on_image_click()");

或者

甚至可以从 python 中取回打印的数据

%%javascript
let callback = {
        iopub: {
            // have a look at data on console for its structure
            output: (data) => {console.log(data)}}
        }
};
let kernel = IPython.notebook.kernel;
kernel.execute("on_image_click()", callback);

Answer 3

我发现其他响应是 hacks（在页面上注入 JavaScript 不是一个好习惯，它可能在 JupyterLab 中不起作用）。

你可以看看ipyevents：https ://github.com/mwcraig/ipyevents

它允许您向任何小部件添加事件侦听器，它由 core-ipywidgets 维护者开发。

Answer 4

我没有直接回答这个问题，但我在解决类似问题时偶然发现了这个问题，也许我的解决方案对某人有用。我想在点击时在 jupyter 笔记本单元格中循环图像。实际上，我可以接受任何交互，例如按钮，甚至重新运行单元格。我的目标是最少的代码，因为这是一个演示文稿，我不想用 30 行 javascript 来打扰我的观众，只是为了循环一些图像。所以这是在 Shift+Enter 上循环浏览图像的解决方案。

# Import and set a counter in one cell
from IPython.display import Markdown; slide = 0

# Loop images in a different cell
if not os.path.isfile('img{}.jpg'.format(slide)): slide = 0
slide +=1; Markdown("""<img src="img{}.jpg" style="height:100px">""".format(slide-1))