Example of 2D way of showing RTI results in Web

[hembo]

I played around with HTML5 and made a simple image fader to switch in between images.

 

Check it out (just click on the image to change):

http://www.arheovisi...0/infrared-rti/

 

Hembo

[cdschroer]

That's cool. Could be used to fade back and forth for still images of different rending modes too (like default and specular enhancement)

 

Can you post how others might do this?

 

Also on the IR RTI, we have been doing some of that for about 18 months now, and it is very promising. We are using a modified Canon digital rebel which lets us get up to about 1100nm depending on the filters we use. Probably a whole separate discussion on IR is needed, but we totally agree that RTI with IR can show interesting stuff that you don't see in the visible.

 

Carla

[hembo]

You just define images you want to fade in and out, so you can have as many as you need. But yes, it just shows still images.

Here is and example of the code:

 

<style>
#rotating-item-wrapper {
position: relative;
width: 611px;
height: 411px;
}
.rotating-item {
display: none;
position: absolute;
top:0;
}
</style>
<script>

// Code based on http://trendmedia.com/code/jquery-infinite-rotator/
// Modified by Hembo Pagi
// Released under the GPL license
// http://www.opensource.org/licenses/gpl-license.php
// **********************************************************************
jQuery(function($) {
   $(window).load(function() {
       //initial fade-in time (in milliseconds)
       var initialFadeIn = 1500;
       //interval between items (in milliseconds)
       var itemInterval = 3000;
       //cross-fade time (in milliseconds)
       var fadeTime = 1500; 
       //count number of items
       var numberOfItems = $('.rotating-item').length;
       //set current item
       var currentItem = 0;
       //show first item
       $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);
       $(".rotating-item").click(function() {
           $('.rotating-item').eq(currentItem).fadeOut(fadeTime);
           if(currentItem == numberOfItems -1){
               currentItem = 0;
           } else {
               currentItem++;
           }
           $('.rotating-item').eq(currentItem).fadeIn(fadeTime);
       });
   });
});
</script>
<div id="rotating-item-wrapper">
   <img src="normal.jpg" alt="" class="rotating-item" width="611" height="411" />
   <img src="ir-spec.jpg" alt="" class="rotating-item" width="611" height="411" />
</div>

 

You can separate the CSS and JS into separate file of course. And it relies on jQuery framework.

[Mike]

Thanks for posting this code. I'll try to adapt it with our next project and see how it goes.

[Graeme]

We have started to use this as the default way of showing RTIs on the ACRG blog thanks to Hembo: http://acrg.soton.ac.uk/tag/rti-example/

[cduffy]

This is a really great way to show examples of RTI datasets. We have just started a Collection Care blog at the British Library (http://britishlibrary.typepad.co.uk/collectioncare/) and I would be keen to include RTI results in a similar way to the RTI viewer WordPress wrapper plugin. Our blog runs on Typepad rather than Wordpress though... is there a way to convert the plugin for Typepad users with the code above?