For a long time I was looking for an elegant way to present my tons of pictures to friends and visitors of my blog. I played around with Silverlight to implement my own picture viewer, but wasn't happy with all my attempts. Last week I gave Deep Zoom a chance and now think that I found the right solution for my problem. You may have seen those fancy samples about the Deep Zoom technology like the Hard Rock Memorabilia. If you just don't know what Deep Zoom is I can recommend this presentation of Blaise Aguera y Arcas at TED.
Deep Zoom Composer is a nice and handy tool to generate the tile patterns for each zoom level of a big image collection and to build up the so called sparse image scene graph with visual support. This graph contains the layout information (origin and scaling) of each image that is part of a Deep Zoom scene. Running the export process (3rd and last step) an XML file named SparseImageSceneGraph.xml will be produced. This is the source for the sparse image generation process that will create the tiles tree containing all the small image assets and an Deep Zoom Collection XML file (dzc_output.xml). The dzc_output.xml file in turn can be interpreted by a Silverlight application using the MultiScaleImage element to get access to all image tiles in the tree structure. That's the way Deep Zoom Composer works.
The problem and its solution
This process has a small problem for me. Looking at the large amount of pictures I've shoot since 2001 (around 30.000) it would be a hassle to manually arrange those (collection by collection) using the Deep Zoom Composer, where you have to drag & drop and scale each image on the surface. Okay there is the "Arrange in a Grid" feature that (in my opinion) does not result in a very eye-catching layout. That's why I came to the conclusion of writing a small .NET console application that will manage this issue for me in an automatic way. SparseImageSceneGenerator was born.
Compared to the process of Deep Zoom Composer this tool will help you to automate the composing process to generate the SparseImageSceneGraph.xml. The command line application only needs at least two arguments: a path to the location of your images and an output path to the resulting SparseImageSceneGraph.xml file. SparseImageSceneGenerator reads and analysis the properties of all images to create a nearly square shaped layout for all images. Before going into detail here is the result:
How it works in detail
(1) After reading all properties (size and metadata) of all pictures the sum and the square root of this sum for all aspect ratios will be calculated.
(2) The square root now limits the width of a rectangle where each image will be aligned row by row (including a cell padding between each image). In the figure above the sum of the aspect ratios of the two portrait images results in 1.333 (plus padding). The 3rd landscape image (AR = 1.5) does not fit into the row, because it will overflow the limit of 1.87 (plus padding). So it wraps to the next row. This generated grid now contains the final layout of all images.
(3) In a final step we have to adjust each rows width to be 1.0. This means scaling the width and origin of each image and row. That's it.
As you can see in the above sample the result is not a perfect square. It depends on the number of images. The more, the better (as you can see in the sample above). In addition SparseImageSceneGenerator supports the SparseImageTool that is part of the DZC installation to merge smoothly into the whole generation process. SparseImageTool is the command line version of the export process of DZC to create the final result based on the SparseImageSceneGraph.xml. The result is (as we know from the DZC export process) the dzc_output.xml file and the tree of tiles.
Feel free to download the current version and please give me feedback on this tool: