如何使 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

我没有直接回答这个问题，但我在解决类似问题时偶然发现了这个问题，也许我的解决方案对某人有用。我想在点击时在 jupyter notebook 单元格中循环图像。实际上，我可以接受任何交互，例如按钮，甚至可以重新运行单元格。我的目标是代码量最少，因为这是为了演示，我不想用 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))

Answer 4

我发现其他回复都是黑客攻击（在页面上注入 JavaScript 不是一个好的做法，它可能在 JupyterLab 中不起作用）。

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

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

如何使 ipywidgets 图像可点击？

How to make an ipywidgets Image clickable?

python

jupyter

jupyter-notebook

ipywidgets