Realtime Thumbnails of Flex UIComponents

Here's an experiment that I have been toying with lately... I took the concepts from an older blog posting on Bitmap objects and applied it to an actual usable interface. It's not the prettiest application in the world, but its still pretty darn cool (in my opinion)... hence it is an "experiment". This example shows how to generate thumbnails of instantiated UIComponent objects in real time. So, every time that the UIComponent is updated, so is its thumbnail.

The thumbnail generation for this example uses the same function from my previous post:

private function getUIComponentBitmapData( target : UIComponent ) : BitmapData
{
     var bd : BitmapData = new BitmapData( target.width, target.height );
     var m : Matrix = new Matrix();
     bd.draw( target, m );
     return bd;
}

Basically, I created 4 different panel objects and 4 different states. In each state, one of the panels is "maximized" to fill the content area. On the top of the application, I have a mx:TileList control that will hold my thumbnails. On creationComplete of the application, I create an ArrayCollection for the dataProvider of the mx:TileList. In that ArrayCollection, I put refferences to the instantiated components. In the itemRender for the mx:TileList, I use the references to the instantiated components to generate thumbnails of the components using the getUIComponentBitmapData function. I use a timer in the main application to dispatch an "updateImage" event ever 500 milliseconds, which notifies the itemRenderer to update the thumbnails.

The first panel (red background) contains a mx:TextBox control. As you type in the textbox, you can see the top left thumbnail being updated. No, you can't read it when it is that small, but you can see the changes happening. :)

The second panel (green background) contains a mx:DateChooser component. As you select dates, or mouseover dates, you can see the changes reflected in the thumbnail image.

The third panel (blue background) starts getting a lot more interesting. This example uses code based off of actionscript.com's drawing example to have a basic paintbrush application. As you draw on the canvas, you can see the thumbnail getting updated with your changes.

The fourth panel (purple background) uses an actionscript "FireFly" effect, based on an AS3 example that Keun Lee modified and showed to me. I limited the # of pixels being set, and the maximum size to increase performance in this example. You can see that the thumbnail gets updated with the firefly image.

Click on the "play" button below to view a FLV video of a demonstration of this in action:



Click on the "play" button above to view a FLV video of a demonstration of this in action:

• Launch Application
• View Source
• Download Source

If you are having any performance issues with this example, it is related to the 4th panel (FireFlys)... This is very processor intensive. Download the code, comment that out, and you should see a huge improvement. Feel free to contact me with any questions/comments at andrew.trice[ at ]cynergysystems.com

Now, you might be wondering where this would actually have any practical application... The first thing that comes to my mind is a charting dashboard. You could have thumbnails of various charts, changing in real-time, based on real data. If you want to drill into a chart, you select it, and view the full-sized version of the chart. The second thing that comes to mind is image editing... Lets say you were creating a RIA-based version of a photo/image editor. You could give thumbnail previews of multiple open images, or you could use the thumbnails to show mini-versions of layers of the composition. There have to be a ton of useful applications for this, which are just waiting to be discovered.

Note: This code technique will currently only work with instantiated components. Components that are null/uninitialized will throw exceptions, which I haven't looked into yet.