Question

我想在一个jupyter笔记本中创建一个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笔记本单元中循环显示图像。实际上，我可以接受按钮之类的任何交互，甚至可以重新运行单元格。我的目标是编写最少的代码，因为这只是演示文稿，我不想用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维护者开发的。

如何制作和ipywidget图像可点击？

4 个答案: