Suggestions for embedding interactive image in a widget?

[Matt Craig]

Hi,

I'm wondering what options there are for including an interactive image in a jupyter widget.

I know about the notebook backend in matplotlib and how to use that for basic interactivity, but my understanding is that displays in the output area of a cell, not as part of the widget. I can make widgets interact with the figure in the notebook backend so this works except for control over where the image appears.

I've looked a bit into bqplot (doesn't display images?) and mpld3 (plots look nice, not so sure about widget interface) as alternatives...before I go much deeper I thought I'd check here for suggestions.

Thanks,

Matt Craig

[Nicholas Bollweg]

When you say image, you mean a literal photograph or something, not graph image? Sounds like any of those things would build plot images. How do you want to interact with said image?

You can use an ipywidgets.HTML, and set its value to an "<img>"... If the image is not dereferenceable, you can use a data uri.

Another approach is to use ipywidgets.interact, in which you would return a ipython.display.Image, which will handle the data uri stuff for you (might even work above, have tried it).

Bokeh can also embed images, with figure().image, but you may have to do some thinking about how they fit in the scales, etc. The ipywidget interaction requires a bit of work to get right, especially bidirectional, but you will get nice tools for pan and zoom, which might be worth it.

[Matt Craig]

Hi,

You are correct about what I meant by image -- an array of pixels (astronomical images).

There are three kinds of interaction I'm hoping for, two of which I know how to do:

1) Pan/zoom: bokeh, mpld3, matplotlib notebook all do this.

2) ipywidget allows you to make settings that update the way the image looks (e.g. overlays a catalog of stars): relatively easy, just need to re-issue the plot command and/or change plot object properties. Ought to work with any plotting package you can use in a notebook.

and one I don't in a way I'm completely happy with:

3) Get coordinates of mouse click from a click on the image.

I can do this with maplotlib notebook, but I don't think it is possible to embed that in a widget currently...and if I'm totally honest I'm not wild about their styling. mpld3 pan.zoom is smoother and more intuitive.

I haven't done a deep dive into bokeh looking at how to get events out. 

I'll be at a conference this week with some of the people who developed mpld3, so hoping to either figure out how to get mouse information out from that or how to add image display into bqplot (uses D3 on the javascript side, presents as an ipywidget on the python side).

Thanks,

Matt

--
You received this message because you are subscribed to a topic in the Google Groups "Project Jupyter" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jupyter/g7GWoIT7CuE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jupyter+u...@googlegroups.com.
To post to this group, send email to jup...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jupyter/204952ea-05ef-4179-bfc1-b425c8efe954%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[alex day]

Hi Matt,

I am wondering if you found a solution to  get coordinates of mouse click from a click on the image in a widget. If so I would like to hear it!

Thanks,

Alex

[Fernando Perez]

On Wed, May 4, 2016 at 12:51 AM, alex day <daya...@gmail.com> wrote:

Hi Matt,

I am wondering if you found a solution to  get coordinates of mouse click from a click on the image in a widget. If so I would like to hear it!

You can do it with matplotlib, but for now the cleanest way to get output on the page is via a widget:

```

%pylab notebook

import ipywidgets as widgets

from datetime import datetime

fig, ax = plt.subplots()

ax.plot(np.random.rand(10))

w = widgets.HTML("Event information appears here when you click on the figure")

def onclick(event):

    w.value = 'button=%d, x=%d, y=%d, xdata=%f, ydata=%f'%(

              event.button, event.x, event.y, event.xdata, event.ydata)

cid = fig.canvas.mpl_connect('button_press_event', onclick)

display(w)

``` 

This limitation has been lifted today in matplotlib:

https://github.com/jupyter/notebook/issues/244

so if you run off mpl master, a simple print() call would also work.

[Matt Craig]

I am wondering if you found a solution to  get coordinates of mouse click from a click on the image in a widget. If so I would like to hear it!

With the image in a widget, no,  though I can send you an example notebook that has interaction between a matplotlib plot and a widget. In the short run, I'll try ginga to display the image because I know i can embed it in a notebook (and think I can embed it in a widget if I put it in an HTML widget)...not sure how astronomy-focused ginga is (well, I know it is astronomy-focused, I just don't know if it is exclusively astronomy).

Matt

PS Sorry for the long delay...end of the semester crunch just finished.

On Wednesday, May 4, 2016 at 2:52:00 AM UTC-5, alex day wrote:

Hi Matt,

Thanks,

Alex

[Patrick Hoebeke]

Hello,

Interesting discussion. I am the same issue but trying to have an interactive matplotlib in a HTML widget...
Does anyone have an idea how to embed an interactive matplotlib figure into a HTML ipywidget ?
I thought it would be rather easy, as we just need to grab the HTML that is displayed in the notebook and use it in the widget but I coul not find something like fig.to_html()
Any idea ?

Patrick

[Sylvain Corlay]

Hi Patrick,

The matplotlib widget is part of the next version of matplotlib. It should then be possible to integrate it into ipywidgets layouts.

Sylvain

--
You received this message because you are subscribed to the Google Groups "Project Jupyter" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jupyter+u...@googlegroups.com.

To post to this group, send email to jup...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/jupyter/b3494ef5-c00c-4c82-b883-0f1e3ac6193a%40googlegroups.com.