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

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

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

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

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

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
[email protected]
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
[email protected] and [email protected]

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

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

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.

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.

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

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.

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.

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

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

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

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.

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.

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.

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
[email protected]
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
[email protected] and [email protected]

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

https://gist.github.com/2897174

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

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?

Rebased.

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.

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.

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
[email protected]
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
[email protected] and [email protected]

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

On Fri, Jun 8, 2012 at 11:16 AM, Min RK
[email protected]
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
[email protected] and [email protected]

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

Opening a saved notebook with figures.

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
[email protected]
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
[email protected] and [email protected]

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

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
[email protected]
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
[email protected] and [email protected]

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 [[email protected]] 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
[email protected]
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
[email protected] and [email protected]

---

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

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
[email protected]
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 [[email protected]] 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
[email protected]
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
[email protected] and [email protected]

---

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
[email protected] and [email protected]

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.