Applet: Thumbnail Creator and Carousel Viewer

In this tutorial, we construct a useful applet, or receptor "system", with the following features:

• drag and drop multiple image files onto the surface
• Create thumbnail images to optimize drawing performance
• Optionally save the thumbnail images
• View the thumbnails in a carousel viewer
• View the original image in the image viewer

Let's begin.  First, place the receptors that we are going to use for our system onto the surface.  The easiest way to do this is by selecting the four receptors that we want to use in the "Receptor Choose" pane:

Let's arrange these receptors and enable showing the semantic types (or "protocols") being communicated between receptors:

We note something interesting here: The Thumbnail Creator receptor emits a ThumbnailImage semantic type, but it also receives an ImageFilename from the ThumbnailViewer, which, as you can see in the diagram, it also emits and is received by the Image Viewer. 

This represents a problem because we do not want to re-generate a thumbnail whenever we click on an image in the viewer to see that image in its original size.

One solution is to encapsulate the Thumbnail Creator receptor in a membrane and make the membrane permeable only to outbound ThumbnailImage semantic types.  We can do this by first encapsulating the Thumbnail Creator:

Next, by double-clicking in the free space (not the receptor) of the membrane, a configuration dialog comes up and we can select the out-bound ThumbnailImage protocol:

W now have the desired connectivity:

Note that we are simultaneously writing out the thumbnail images as well as viewing them.  Now, when we drop a group of images inside the membrane, the Thumbnail Viewer presents a carousel of images on the HOPE surface:

We can perform the following actions:

• Placing the mouse pointer inside the Thumbnail Viewer receptor, we can use the mouse wheel to rotate the carousel.
  
• Double-clicking on the image at the bottom of the carousel (the active image) we can view the original image in the Image Viewer.
  

In conclusion, note how with four receptors, we have created an interactive "system" of behavior.  We can enable/disable receptors to control the behavior -- for example, by disabling the Thumbnail Viewer, we can use the system to simply write out thumbnail versions of images we drag & drop into the membrane containing the Thumbnail Creator receptor.  We can disable thumbnail writing and use the system exclusively as a viewer.  By adding multiple viewers, we can selectively enable them to view several images side-by-side.

Also note that the Thumbnail Creator can be configured for the size of the thumbnail - this feature is useful for creating small images for say, the viewer, or larger images, say with a maximum width or height of 1024 pixels, suitable for emailing, scaled down from original images of widths greater than 3000 pixels. 

Overall, we've created a useful receptor system.

"Applications tend to be static and monolithic.  HOPE provides an adaptive, configurable surface for computational "systems" enabling dynamic interactions within and between systems.

Next: Weather Service - Today's Weather Applet