如何使 ipywidgets 图像可点击？答案

【问题标题】：How to make an ipywidgets Image clickable?如何使 ipywidgets 图像可点击？
【发布时间】：2017-06-19 08:03:30
【问题描述】：

我想在 jupyter 笔记本中创建一个 Image 实例来响应点击事件 - 我们该怎么做？我还希望能够识别被点击的图像。使用按钮而不是图像很容易做到这一点。

【问题讨论】：

标签： python jupyter-notebook jupyter ipywidgets

【解决方案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？

【讨论】：

好像不行，add_class方法是什么？你能指点文档吗
见：github.com/jupyter-widgets/ipywidgets/blob/…

【解决方案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);

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案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))

【讨论】：