Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Make svg, jpeg and png images resizable in notebook. #1832

Merged
merged 4 commits into from Jun 8, 2012

Conversation

Projects
None yet
6 participants
Owner

ellisonbg commented Jun 1, 2012

This addresses #1193. All images are now resizable in the notebook by dragging handle in the lower R corner of the image. I am having problems with svg images not working properly, but I don't know enough about svg to fix this this second. Wondering if any of the matplotlib devs could help on this.

Owner

minrk commented Jun 1, 2012

Do we really want to allow resizing raster images? Zooming looks pretty horrible.

Owner

fperez commented Jun 1, 2012

While I agree it's not perfect, I still think it's a useful capability: say giving a talk you may need to quickly resize an image so it fits on the projector...

Owner

minrk commented Jun 1, 2012

Fair point. I would at least add the autoHide: true option, so it isn't always drawing the resize handle on all your figures.

Owner

fperez commented Jun 1, 2012

And I think the svg issue does need to be fixed before we can merge this. It also doesn't work for me...

Owner

ellisonbg commented Jun 1, 2012

I agree that rezooming matplotlib figures with the default dpi looks
pretty bad. But there is no reason a user couldn't 1) have a nice
high-res image or 2) set matplotlib to generate higher res images.

On Fri, Jun 1, 2012 at 10:41 AM, Fernando Perez
reply@reply.github.com
wrote:

While I agree it's not perfect, I still think it's a useful capability: say giving a talk you may need to quickly resize an image so it fits on the projector...


Reply to this email directly or view it on GitHub:
#1832 (comment)

Brian E. Granger
Cal Poly State University, San Luis Obispo
bgranger@calpoly.edu and ellisonbg@gmail.com

Owner

minrk commented Jun 1, 2012

I agree that rezooming matplotlib figures with the default dpi looks
pretty bad. But there is no reason a user couldn't 1) have a nice
high-res image or 2) set matplotlib to generate higher res images.

In that case, you should set maxHeight/Width to the natural height/width. Aside from preventing ugliness, this lets gives a mechanism for restoring to 'no-zoom', which this currently lacks (and I think is critical).

Owner

ellisonbg commented Jun 1, 2012

I think I have fixed the svg problem and will push soon.

Owner

ellisonbg commented Jun 2, 2012

What a crazy pain. I thought I had the svg resizing working properly now in FF+Webkit, but that was an illusion. I have pushed it anyways. The reason is rather subtle:

  • Unlike <img> tags, <svg> tags cannot be directly made resizable. Thus we have to wrap it in a <svg> and do extra work to keep the <svg> and <div> sizes in sync. This means I have to find out the initial size of the <svg> and set the <div> to that size. For matplotlib generated svg, I can do that because they set the width and height attributes of the svg in points. I can read those and use them to set everything. The only thing that doesn't work for matplotlib generated svg it setting minHeight and minWidth. This doesn't work because they have to be in pixels, but there is no reliable way of getting those numbers.
  • One might think that you could simple use the width and height jQuery methods to get the initial size of the <svg> in pixels. In Chrome that works, but in FF they both return 0.

The current version works fine with svg tags that have their width and height attributes set (matplotlib does). But those attributes are not required, so the following fails

from IPython.core.display import SVG

SVG("""<svg>
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>""")

I see two options:

  1. We can try to figure out how to get the intial size of the <svg> in pixels.
  2. We can give up.
  3. We can simply make up default sizes if the <svg> tag doesn't have the attributes.
Owner

minrk commented Jun 2, 2012

That's rough. I think 3. is right out, because we don't want to be changing the sizes of SVGs from their natural defaults unnecessarily.

Owner

ellisonbg commented Jun 2, 2012

Yes, 3 is bad because we would have to guess at what the correct aspect ratio was - and we would most often be wrong.

Owner

Carreau commented Jun 2, 2012

Do you think we could add an option to set the curent matplotlib rc figwidth and figheight to the current size of the resized image, so that you could choose your size and rerun the plotting cell to have a nice image ?

Or maybe this would be better as a plotting function decorator.

Owner

takluyver commented Jun 2, 2012

Ultimately I'd like a matplotlib backend that will redraw the image
when I resize it. But I guess that's a bit further off.

Owner

ellisonbg commented Jun 7, 2012

The other option is that we could just remove this ability for SVG images for now.

Owner

fperez commented Jun 8, 2012

My vote would be for not having the svg resizing unless it can work well. I prefer not having a feature than having a half-broken one. It's a bummer that you've put so much effort into it without a satisfactory solution, but it just seems that life in the SVG garden is still not a very pleasant one...

Owner

ellisonbg commented Jun 8, 2012

OK, I will pull out the svg code and leave the logic there for png and jpeg.

mcelrath commented Jun 8, 2012

I just tried this in combination with my SVG patch #1881. The result is that figures are much larger than the browser window, because I cranked up the figure.figsize to prevent pixelation in the SVG file.

Perhaps instead we can use width: 100% and use your code to compute the appropriate height, as the SVG enforces a fixed aspect ratio. That makes everything look really nice.

Owner

ellisonbg commented Jun 8, 2012

Let's do the following. I am going to remove the svg code handling from this branch and why don't you add it to yours. It probably makes sense to do all of the svg stuff in one place. That way, this branch can be merged to get the resizable jpeg/png in place.

mcelrath commented Jun 8, 2012

Ok. I can't figure out how to get the width of the enclosing output area, to set the initial svg width/height. Any suggestions?

element.parent.offsetWidth etc don't seem to work.

Owner

ellisonbg commented Jun 8, 2012

This might be a bit subtle. But in general you should use the jQuery
method documented here:

http://api.jquery.com/category/css/

Probably width or innerWidth. But, the element you call these
methods on has to be on the page first. But what element are you
talking about? In my code I had put the <svg> in an extra <div>.
Are you doing the same thing. Also, I am not sure we want to make the
SVG images start out as full width. That would be really big and take
up a lot of vertical space. You might want to do some fraction of the
windows width or something.

On Fri, Jun 8, 2012 at 10:15 AM, Bob McElrath
reply@reply.github.com
wrote:

Ok.  I can't figure out how to get the width of the enclosing output area, to set the initial svg width/height.  Any suggestions?

element.parent.offsetWidth etc don't seem to work.


Reply to this email directly or view it on GitHub:
#1832 (comment)

Brian E. Granger
Cal Poly State University, San Luis Obispo
bgranger@calpoly.edu and ellisonbg@gmail.com

Owner

ellisonbg commented Jun 8, 2012

Here is the code I removed for resizing SVG in case we need it later:

https://gist.github.com/2897174

Owner

ellisonbg commented Jun 8, 2012

I think this is ready to merge now. The SVG work will be continued in #1881.

Owner

minrk commented Jun 8, 2012

The most important part of this UI for me for raster images is that there be an easy mechanism for restoring to zero-zoom. What do you have for that?

Owner

ellisonbg commented Jun 8, 2012

Rebased.

@ellisonbg ellisonbg added a commit that referenced this pull request Jun 8, 2012

@ellisonbg ellisonbg Merge pull request #1832 from ellisonbg/imageresize
Make svg, jpeg and png images resizable in notebook.
2097353

@ellisonbg ellisonbg merged commit 2097353 into ipython:master Jun 8, 2012

Owner

minrk commented Jun 8, 2012

This merge after rebase made invalid javascript syntax, rendering the notebook as a totally empty page. It was just a missing comma, so I fixed it in the online GitHub editor.

I see no mechanism for restoring zero zoom. Any ideas on that? 99%/101% raster images look quite a lot worse than 100%, so this seems pretty important.

Owner

minrk commented Jun 8, 2012

This appears to have caused an additional problem: some fraction of the time (seems ~10%), plots do not appear at all when loading from a file. I would guess this is due to resize() being called while the element is invisible, and thus starting with an initial height of 0.

Owner

ellisonbg commented Jun 8, 2012

Crap, sorry about the rebase problem Thanks for fixing it. I will
see if I can set the minHeight and maxHeight values appropriately.

On Fri, Jun 8, 2012 at 11:10 AM, Min RK
reply@reply.github.com
wrote:

This merge after rebase made invalid javascript syntax, rendering the notebook as a totally empty page.  It was just a missing comma, so I fixed it in the online GitHub editor.

I see no mechanism for restoring zero zoom.  Any ideas on that?  99%/101% raster images look quite a lot worse than 100%, so this seems pretty important.


Reply to this email directly or view it on GitHub:
#1832 (comment)

Brian E. Granger
Cal Poly State University, San Luis Obispo
bgranger@calpoly.edu and ellisonbg@gmail.com

Owner

ellisonbg commented Jun 8, 2012

Can you clarify what you mean by "loading from a file"?

On Fri, Jun 8, 2012 at 11:16 AM, Min RK
reply@reply.github.com
wrote:

This appears to have caused an additional problem:  some fraction of the time (seems ~10%), plots do not appear at all when loading from a file.  I would guess this is due to resize() being called while the element is invisible, and thus starting with an initial height of 0.


Reply to this email directly or view it on GitHub:
#1832 (comment)

Brian E. Granger
Cal Poly State University, San Luis Obispo
bgranger@calpoly.edu and ellisonbg@gmail.com

Owner

minrk commented Jun 8, 2012

Can you clarify what you mean by "loading from a file"?

Opening a saved notebook with figures.

Owner

ellisonbg commented Jun 8, 2012

Ah, crap I know what is going on. On load, we build the notebook
while it is invisible and then show the entire thing. I thought that
using the .load event would delay things until the images are
actually on the page, but I guess this is not working. I will look at
this.

On Fri, Jun 8, 2012 at 11:17 AM, Min RK
reply@reply.github.com
wrote:

Can you clarify what you mean by "loading from a file"?

Opening a saved notebook with figures.


Reply to this email directly or view it on GitHub:
#1832 (comment)

Brian E. Granger
Cal Poly State University, San Luis Obispo
bgranger@calpoly.edu and ellisonbg@gmail.com

mcelrath commented Jun 8, 2012

I just need some measurement (any measurement) upon which I can base the svg
size. I'd rather not rely on the window size, I really should use the cell's
size.

$(this).{parent()}^n.innerWidth() are all zero when append_svg is called.

Cheers, Bob McElrath

"The individual has always had to struggle to keep from being overwhelmed by
the tribe. If you try it, you will be lonely often, and sometimes frightened.
But no price is too high to pay for the privilege of owning yourself."
-- Friedrich Nietzsche

Owner

ellisonbg commented Jun 8, 2012

Ahh, this is because the call to append_svg is done before the
specific output subarea is on the page. I think you you will need to
go out one more parent to get the width of the outer most output area
container.

On Fri, Jun 8, 2012 at 11:23 AM, Bob McElrath
reply@reply.github.com
wrote:

I just need some measurement (any measurement) upon which I can base the svg
size.  I'd rather not rely on the window size, I really should use the cell's
size.

$(this).{parent()}^n.innerWidth() are all zero when append_svg is called.

Cheers, Bob McElrath

"The individual has always had to struggle to keep from being overwhelmed by
the tribe.  If you try it, you will be lonely often, and sometimes frightened.
But no price is too high to pay for the privilege of owning yourself."
   -- Friedrich Nietzsche


Reply to this email directly or view it on GitHub:
#1832 (comment)

Brian E. Granger
Cal Poly State University, San Luis Obispo
bgranger@calpoly.edu and ellisonbg@gmail.com

mcelrath commented Jun 8, 2012

I've tried up to 6 parents up, all are zero. I think this is the same problem
as just pointed out by Min for the png/jpegs.

Brian E. Granger [reply@reply.github.com] wrote:

Ahh, this is because the call to append_svg is done before the
specific output subarea is on the page. I think you you will need to
go out one more parent to get the width of the outer most output area
container.

On Fri, Jun 8, 2012 at 11:23 AM, Bob McElrath
reply@reply.github.com
wrote:

I just need some measurement (any measurement) upon which I can base the svg
size.  I'd rather not rely on the window size, I really should use the cell's
size.

$(this).{parent()}^n.innerWidth() are all zero when append_svg is called.

Cheers, Bob McElrath

"The individual has always had to struggle to keep from being overwhelmed by
the tribe.  If you try it, you will be lonely often, and sometimes frightened.
But no price is too high to pay for the privilege of owning yourself."
   -- Friedrich Nietzsche


Reply to this email directly or view it on GitHub:
#1832 (comment)

Brian E. Granger
Cal Poly State University, San Luis Obispo
bgranger@calpoly.edu and ellisonbg@gmail.com


Reply to this email directly or view it on GitHub:

#1832 (comment)

Cheers, Bob McElrath

"The individual has always had to struggle to keep from being overwhelmed by
the tribe. If you try it, you will be lonely often, and sometimes frightened.
But no price is too high to pay for the privilege of owning yourself."
-- Friedrich Nietzsche

Owner

ellisonbg commented Jun 8, 2012

Hmm, can you see what those parents actually are (console.log them).
I was running into similar things when working on the svg resizing,
but I thought it was particular to svg elements. I want to see if the
elements in question are actually on the page and rendered.

On Fri, Jun 8, 2012 at 11:31 AM, Bob McElrath
reply@reply.github.com
wrote:

I've tried up to 6 parents up, all are zero.  I think this is the same problem
as just pointed out by Min for the png/jpegs.

Brian E. Granger [reply@reply.github.com] wrote:

Ahh, this is because the call to append_svg is done before the
specific output subarea is on the page.  I think you you will need to
go out one more parent to get the width of the outer most output area
container.

On Fri, Jun 8, 2012 at 11:23 AM, Bob McElrath
reply@reply.github.com
wrote:

I just need some measurement (any measurement) upon which I can base the svg
size.  I'd rather not rely on the window size, I really should use the cell's
size.

$(this).{parent()}^n.innerWidth() are all zero when append_svg is called.

Cheers, Bob McElrath

"The individual has always had to struggle to keep from being overwhelmed by
the tribe.  If you try it, you will be lonely often, and sometimes frightened.
But no price is too high to pay for the privilege of owning yourself."
   -- Friedrich Nietzsche


Reply to this email directly or view it on GitHub:
#1832 (comment)

Brian E. Granger
Cal Poly State University, San Luis Obispo
bgranger@calpoly.edu and ellisonbg@gmail.com


Reply to this email directly or view it on GitHub:

#1832 (comment)

Cheers, Bob McElrath

"The individual has always had to struggle to keep from being overwhelmed by
the tribe.  If you try it, you will be lonely often, and sometimes frightened.
But no price is too high to pay for the privilege of owning yourself."
   -- Friedrich Nietzsche


Reply to this email directly or view it on GitHub:
#1832 (comment)

Brian E. Granger
Cal Poly State University, San Luis Obispo
bgranger@calpoly.edu and ellisonbg@gmail.com

mcelrath commented Jun 8, 2012

I moved the SVG resize code to my branch #1881, fixed some things, and added doubleclick-to-restore-size as requested by Min. You may want to copy that for png/jpeg too. I'm quite happy with the result.

@mattvonrocketstein mattvonrocketstein pushed a commit to mattvonrocketstein/ipython that referenced this pull request Nov 3, 2014

@ellisonbg ellisonbg Merge pull request #1832 from ellisonbg/imageresize
Make svg, jpeg and png images resizable in notebook.
c86581f
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment