ImageSearch - an Adaptive Image Slider

[greg]

This is an example of a Flash-like component that takes a group of images, arranges them in a row, and uses a slider gadget below it to scroll the images horizontally.

(This version was re-created on Jan 13 09 with build 1440. See below for more recent)

The slider below the images can be clicked anywhere - the images will scroll to that point with acceleration and deceleration. That is, you don't need to grab a point on the slider and drag it.

In fact you can click in the area under the visible slider because the gadget extends below and above, allowing for less accuracy when clicking on the slider.

Also the slider has a tolerance so you can exactly get to the left or right end if you click within 10% of the left or right slide of the slider.

The images downloaded from the web and are specified by a table of URLs, generated by the same Yahoo search component yahoosearch.tox. Type any words in the text field and press GO!

Each set of images it finds are scaled to the same height when displayed in the horizontal scroll bar. If you click on one, it selects that image (unscaled) as the first output of the animalbar.tox component.

The scaled images' aspect ratio are all their original aspect ratio. So the total width of all the images plus the space between images varies from one image set to another. The scroll bar adjusts to the varying total width.

You can go into the animalbar component and see which parameters are easy to change. The whole component procedurally adjusts.

When you click on an image, it runs a script (look inside the button). It is set up to simply take the name of the image and put it in a DAT in a gadget that displays its the name at the bottom of the screen.

Also when you rollover it cross-fades (using a Filter CHOP) to scaled imge with a red border. Then when you click on it, it crossfades further (using a Switch TOP) to a whitened version of the image.

[greg]

This version works with TouchDesigner 077 Build 8940 and later.

It's cleaner, uses Substitute DATs, and now strips off the blank area at the right of the strip.

See its training video at
http://www.derivative.ca/wiki/index.php?title=Image_Search_Vid.

imagesearch.8940.jpg (45.92 KiB) Viewed 1643 times

[greg]

If you run this .toe file, and start another default TouchDesigner process on the same computer, and create a Touch In TOP, it will be reading the image selected from ImageSearch.

This works because ImageSearch contains a Touch Out TOP connected to the selected image.

[greg]

The latest version of this is in the TouchDesigner 077 Palette under Techniques, named ImageScanner. It uses searches of Flickr.

[rodberry]

I missed your earlier addition...

If you run this .toe file, and start another default TouchDesigner process on the same computer, and create a Touch In TOP, it will be reading the image selected from ImageSearch.

This works because ImageSearch contains a Touch Out TOP connected to the selected image.

Do you recommend that as a way of not stopping the timeline while it process the web get thing? Is the timeline-halting problem too hard to get around inside one instance of Touch?

cheers,

rod.