[IPOL discuss] Interactive image display with JQuery.iviewer

[Pascal Getreuer]

Dear all,

Most IPOL demos display several images on the results page, for
example, an input image, a mosaicked image, and a demosaicked image.
We currently use a CSS-base method where hovering the mouse over a
menu allows the user to switch between the different images.  While
this method works well for simple cases, there are situations where
more interactive control would be valuable.

It would be great if the user could interactively zoom in on the
images.  We already use code in the demosaicking demos to zoom the
results by a factor adapted so that the result fits within the window,
however, this zooming is fixed---the user is stuck with the zoom level
that we choose.  Ideally, the user should be able to choose the zoom
level interactively.  Most browsers are able to zoom the size of the
page contents, which provides some interactive control, but it is far
from ideal.  Zooming makes not only the image big, but everything else
on the page too.  So zooming by 8x to see a tiny image feature makes
the menu so large that it becomes unusable.

I found that there are quite a few existing viewers, a survey of 25
different viewers is given at

   http://www.tripwiremagazine.com/2010/05/25-excellent-jquery-image-zoom-plugins-creating-stunning-image-effects.html

After testing several of these, I found that "iviewer"
https://github.com/can3p/iviewer has a nice minimalist interface in a
manner close to what we would want.  The viewer allows you to zoom in
and out with the mouse wheel and to pan the image by clicking and
dragging.  I made some minor changes to iviewer so that it can be used
to view multiple images.  There are two examples on my website:

   Example of viewing demosaicking results
   http://www.math.ucla.edu/~getreuer/viewer/example1.html

   Example of viewing interpolation results
   http://www.math.ucla.edu/~getreuer/viewer/example2.html

The demosaicking example shows how it is valuable to be able to zoom
in on the image, because most of the differences between different
demosaicking methods are at the pixel level.  The interpolation
example shows three images (the input, the interpolation, and
estimated contours) that have three different resolutions.  The input
image is 113x121, the factor-6 interpolated image is 678x726, and the
estimated contours are rendered at a higher resolution 1017x1089 to
show nice fine lines.

This viewer does have some minor bugs: flicker problems and sometimes
forgetting the view position.   This is more to be an example of what
we could do with a JavaScript-based viewer rather than something that
I would recommend at this stage for production use.

Opening the door to JavaScript gives us more flexibility in how to
display the results.  Beyond panning and zooming, here are some other
possibilities:
   * Rather than displaying a single image at a time, the user could
select two images to be displayed side-by-side.
   * JavaScript allows for other ways to organize multiple result
images, which may be more convenient than our current menu approach
(when there are many result images, the menu becomes very tall).
   * JavaScript could also allow more natural control in demos like
blm_color_dimensional_filtering, where the result is a 3D scatter
plot:
   http://www.ipol.im/pub/demo/blm_color_dimensional_filtering/

I am a JavaScript newbie, so I don't know how much further I can go
without help.  I would greatly appreciate any advice on how to fix
iviewer or pointing me to another viewer that suits our needs.  If
anyone else is experimenting with interactive JavaScript ideas, it
would be interesting to discuss---please share!

Best,
Pascal