[IPOL discuss] Interactive image display with JQuery.iviewer

[Gabriele Facciolo]

These plugins are very nice.
It is also important to have a fallback behavior in case javascript is
disabled.
I've also been trying to assemble a javascript image inspector from
scratch,
with the objective to have almost no footprint on the html page

http://dev.ipol.im/~facciolo/jsExperiments/imageViewer/imageViewerDemo.html

It has no impact on the author since the images are as always
*<img src="kom02.png" id="im1" />
*
and in case javascript is not enabled the images remain unaltered
(hopefully).

To replace with this viewer all the static images in a page,
3 strategic lines are added at the end of the document.
*<script language="Javascript">
   window.onload = replaceAllImages();
</script>*
*
*
As you said, this is far from being a production solution.
However if we manage to maintain the pages intact in case javascript fails,
and don't require do write code within the page, then this type of plugins
could pass unperceived.


I've ended up using a canvas, to avoid the nasty bilinear interpolation
effects, and to enable some small image manipulation on the client side
(this way we could also show floating point
images<http://dev.ipol.im/~facciolo/jsExperiments/imageViewer/imageViewerDemoFloat_f.html>
).


Best,
Gabriele

On Sat, May 7, 2011 at 11:34 PM, Pascal Getreuer <getreuer at gmail.com> wrote:

> 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
> _______________________________________________
> discuss mailing list
> discuss at list.ipol.im
> http://tools.ipol.im/mailman/listinfo/discuss
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://tools.ipol.im/mailman/archive/discuss/attachments/20110508/98337280/attachment.htm>