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 - compose modeDeep 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

image

(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.

image

(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.

image

(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.

Download

Feel free to download the current version and please give me feedback on this tool:

After Microsoft released the final version of Silverlight 2.0 last week I decided to update some of my samples I published before. Converting the Silverlight 2.0 Beta 2 based samples (physics attractor and the bending bezier curve) was straight forward without any problems. Instead the Silverlight 2.0 alpha based clock sample made some more work. That's why I decided to setup a new solution and start from scratch by rewriting the code behind files.

Feel free to download the source files:

Clock-2.0.zip

Zwei wundervolle Tage - .NET Open Space in Leipzig

Gerade sind wir (Alex und ich) wieder daheim angekommen und haben die letzten Kisten mit all den Resten der letzten beiden Tage irgendwo in unserer WG untergebracht. Lecker Kuchen von der Bäckerei Göbecke stehen auch noch in Hülle und Fülle auf dem Küchentisch. Neben dem vielen ausnahmslos positivem Feedback der Teilnehmer haben die Organisatoren Torsten, Stefan, Alex (und ich irgendwie) mit dauerhaftem Grinsen den Mediencampus Villa Ida in Leipzig verlassen. Es war ein anstrengendes jedoch sehr gewinnbringendes Wochenende - für alle.

logo

Ich selbst war anfangs skeptisch, ob wir, die Teilnehmer, es schaffen die Veranstaltung so zu gestalten und zu beleben wie vorgesehen. Also dass sich alle am Geschehen beteiligen, die Beiträge spontan durch die Teilnehmer erstellt werden und der .NET Open Space zu dem wurde, was er werden sollte.

Solch eine "Unkonferenz" wie sie hier organisiert wurde füllt für mich (und alle anderen) genau diese Lücken, die auf gewöhnlichen Konferenzen entstehen. Die fehlende Kommunikation mit und unter den Teilnehmern wurde auf dem .NET Open Space durch das zugrunde liegende Konzept ausgebügelt.

Ein dickes Dankeschön an alle Teilnehmer, Sponsoren und vor allem den helfenden Händen (Antje, Jule, Katrin, Steffi, Susi, Maik der Hausmeister, Matthias und Yvonne), die dieses Ereignis ermöglicht haben. Ich hoffe wir sehen uns alle spätestens nächstes Jahr wieder - zum .NET Open Space 2009.

3x Thumbs up. Ein echt cooles Wochenende.

Geschafft!

Unsere WG-Katze

Lustig, wie sie sich mal wieder zwischen mir und meiner Tastatur platziert, um dem Mauszeiger auf meinen Monitoren zu folgen. Und da soll man arbeiten.

Handling the BezierSegment as path in Silverlight

This small sample will show you the possibilities of Silverlights (and WPFs) BezierSegment class. To draw a bezier curve you have to encapsulate the BezierSegment as part of a Path element as shown in the following lines of code:

1 <Path x:Name="Curve" Stroke="#FFFFFFFF" StrokeThickness="2"> 2 <Path.Data> 3 <PathGeometry> 4 <PathGeometry.Figures> 5 <PathFigureCollection> 6 <PathFigure x:Name="Figure" StartPoint="27,56"> 7 <PathFigure.Segments> 8 <PathSegmentCollection> 9 <BezierSegment x:Name="Bezier" Point1="227,156" Point2="267,36" Point3="380,30" /> 10 </PathSegmentCollection> 11 </PathFigure.Segments> 12 </PathFigure> 13 </PathFigureCollection> 14 </PathGeometry.Figures> 15 </PathGeometry> 16 </Path.Data> 17 </Path> 18

The curve itself is rendered using four points: the StartPoint attribute of the PathFigure element and the three points Point1, Point2 and Point3 of the BezierSegment. Try to play around with this sample and feel free to have a look into the sources.

Get Microsoft Silverlight