如何使ipywidgets中的图像可点击？

Question

我希望在jupyter笔记本中创建一个图像实例以响应点击事件 - 我们该如何做？我还想能够识别被点击的图像。使用按钮很容易实现，但是使用图像却不行。

- Dror Hilman

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？

- Dror Hilman

---

它似乎不起作用，add_class方法是什么？你能指向文档吗？ - SML

请查看以下代码：https://github.com/jupyter-widgets/ipywidgets/blob/5170757c4e9b93731ac840640ebf5dd499f6d47c/ipywidgets/widgets/domwidget.py#L30 - Dror Hilman

Answer 2

我认为其他的回答都是hack等级（在页面上注入JavaScript不是一个好的实践，而且在JupyterLab中可能无法工作）。

您可以查看ipyevents: https://github.com/mwcraig/ipyevents 它允许您为任何小部件添加事件监听器，并由核心ipywidgets维护者开发。

- Martin Renou

Answer 3

%%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);

- Lujun Weng

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))

- Paloha