These plugins are very nice. <div><div><div>
It is also important to have a fallback behavior in case javascript is disabled. </div><div>I've also been trying to assemble a javascript image inspector from scratch, </div><div>with the objective to have almost no footprint on the html page</div>
<div><div><br></div><div><div><a href="http://dev.ipol.im/~facciolo/jsExperiments/imageViewer/imageViewerDemo.html" target="_blank">http://dev.ipol.im/~facciolo/jsExperiments/imageViewer/imageViewerDemo.html</a></div>
</div><div><br></div><div>It has no impact on the author since the images are as always </div><div><span style="font-family:Times;font-size:medium"><em><img src="kom02.png" id="im1" /><br>
</em></span></div><div>and in case javascript is not enabled the images remain unaltered (hopefully).</div><div></div></div><div><br></div><div><div>To replace with this viewer all the static images in a page, </div>
<div>3 strategic lines are added at the end of the document. </div><div><span style="font-family:Times;font-size:medium"><em><script language="Javascript"><br>
window.onload = replaceAllImages();<br></script></em></span></div></div><div><font face="Times" size="3"><i><br></i></font></div><div>As you said, this is far from being a production solution. </div>
<div>However if we manage to maintain the pages intact in case javascript fails, </div><div>and don't require do write code within the page, then this type of plugins could pass unperceived.</div><div><br></div><div>
<br>
</div><div><div>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 <a href="http://dev.ipol.im/~facciolo/jsExperiments/imageViewer/imageViewerDemoFloat_f.html">show floating point images</a>).</div>
</div><div><br></div><div><br></div><div><div class="gmail_quote">Best, </div><div class="gmail_quote">Gabriele</div><div class="gmail_quote"><br></div><div class="gmail_quote">On Sat, May 7, 2011 at 11:34 PM, Pascal Getreuer <span dir="ltr"><<a href="mailto:getreuer@gmail.com" target="_blank">getreuer@gmail.com</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">Dear all,<br>
<br>
Most IPOL demos display several images on the results page, for<br>
example, an input image, a mosaicked image, and a demosaicked image.<br>
We currently use a CSS-base method where hovering the mouse over a<br>
menu allows the user to switch between the different images. While<br>
this method works well for simple cases, there are situations where<br>
more interactive control would be valuable.<br>
<br>
It would be great if the user could interactively zoom in on the<br>
images. We already use code in the demosaicking demos to zoom the<br>
results by a factor adapted so that the result fits within the window,<br>
however, this zooming is fixed---the user is stuck with the zoom level<br>
that we choose. Ideally, the user should be able to choose the zoom<br>
level interactively. Most browsers are able to zoom the size of the<br>
page contents, which provides some interactive control, but it is far<br>
from ideal. Zooming makes not only the image big, but everything else<br>
on the page too. So zooming by 8x to see a tiny image feature makes<br>
the menu so large that it becomes unusable.<br>
<br>
I found that there are quite a few existing viewers, a survey of 25<br>
different viewers is given at<br>
<br>
<a href="http://www.tripwiremagazine.com/2010/05/25-excellent-jquery-image-zoom-plugins-creating-stunning-image-effects.html" target="_blank">http://www.tripwiremagazine.com/2010/05/25-excellent-jquery-image-zoom-plugins-creating-stunning-image-effects.html</a><br>
<br>
After testing several of these, I found that "iviewer"<br>
<a href="https://github.com/can3p/iviewer" target="_blank">https://github.com/can3p/iviewer</a> has a nice minimalist interface in a<br>
manner close to what we would want. The viewer allows you to zoom in<br>
and out with the mouse wheel and to pan the image by clicking and<br>
dragging. I made some minor changes to iviewer so that it can be used<br>
to view multiple images. There are two examples on my website:<br>
<br>
Example of viewing demosaicking results<br>
<a href="http://www.math.ucla.edu/~getreuer/viewer/example1.html" target="_blank">http://www.math.ucla.edu/~getreuer/viewer/example1.html</a><br>
<br>
Example of viewing interpolation results<br>
<a href="http://www.math.ucla.edu/~getreuer/viewer/example2.html" target="_blank">http://www.math.ucla.edu/~getreuer/viewer/example2.html</a><br>
<br>
The demosaicking example shows how it is valuable to be able to zoom<br>
in on the image, because most of the differences between different<br>
demosaicking methods are at the pixel level. The interpolation<br>
example shows three images (the input, the interpolation, and<br>
estimated contours) that have three different resolutions. The input<br>
image is 113x121, the factor-6 interpolated image is 678x726, and the<br>
estimated contours are rendered at a higher resolution 1017x1089 to<br>
show nice fine lines.<br>
<br>
This viewer does have some minor bugs: flicker problems and sometimes<br>
forgetting the view position. This is more to be an example of what<br>
we could do with a JavaScript-based viewer rather than something that<br>
I would recommend at this stage for production use.<br>
<br>
Opening the door to JavaScript gives us more flexibility in how to<br>
display the results. Beyond panning and zooming, here are some other<br>
possibilities:<br>
* Rather than displaying a single image at a time, the user could<br>
select two images to be displayed side-by-side.<br>
* JavaScript allows for other ways to organize multiple result<br>
images, which may be more convenient than our current menu approach<br>
(when there are many result images, the menu becomes very tall).<br>
* JavaScript could also allow more natural control in demos like<br>
blm_color_dimensional_filtering, where the result is a 3D scatter<br>
plot:<br>
<a href="http://www.ipol.im/pub/demo/blm_color_dimensional_filtering/" target="_blank">http://www.ipol.im/pub/demo/blm_color_dimensional_filtering/</a><br>
<br>
I am a JavaScript newbie, so I don't know how much further I can go<br>
without help. I would greatly appreciate any advice on how to fix<br>
iviewer or pointing me to another viewer that suits our needs. If<br>
anyone else is experimenting with interactive JavaScript ideas, it<br>
would be interesting to discuss---please share!<br>
<br>
Best,<br>
Pascal<br>
_______________________________________________<br>
discuss mailing list<br>
<a href="mailto:discuss@list.ipol.im" target="_blank">discuss@list.ipol.im</a><br>
<a href="http://tools.ipol.im/mailman/listinfo/discuss" target="_blank">http://tools.ipol.im/mailman/listinfo/discuss</a><br>
</blockquote></div><br></div></div></div>