Zoom or doom?

Vertical take-off

But back to my attempt to create a real-world Silverlight Deep Zoom application. This year in Beijing, shortly after the Olympics, the first World Mind Sports Games will be held consisting of Chess, Go, Draughts and, of course, Bridge events. Regular readers will know that I’m an IT guru to the World Bridge Federation on various projects, and this year being its 50th anniversary, I thought it might be fun to make 500-plus old photos from its archives into a Deep Zoom application to display on the website.

Being me, though, I couldn’t just stop at the basics, and I asked our design house (www.untitledmedia.co.uk) to create a “Steam Punk”-style interface for it with animated cogwheels and the rest. Let’s take a look at what’s actually involved in creating such a Silverlight application. Forget about learning curves, this is more like vertical take-off! Bear in mind that we’re using beta software that I can almost guarantee will crash at the most inconvenient times, so save and back up regularly, and preferably install the beta tools on a virtual machine so you don’t mess up your main development box.

First, you need to collect the images you want your users to zoom into. The higher resolution the better – TIFFs are supported, as well as BMPs and the usual JPG. Now download a copy of the free Deep Zoom Composer from www.pcpro.co.uk/links/168webapps3. The current version at the time of writing is 0.9, but this may have changed by the time you read this. The big advantage over the previous version is that it creates a Silverlight application with a lot of the mouse control code written for you, which will save a lot of work.

Open Deep Zoom Composer and select New Project. I suggest you locate your project on a local hard disk rather than a network drive, as this will be much quicker when the time comes to run the export routine. Now select Import, point the mouse to the folder containing the image collection, click OK and wait as the images are copied into the project folder.

Now comes the fun bit: go to Compose and drag each image onto the design workspace. You can be as creative as you like in resizing and overlapping the images. There’s a facility to auto-arrange to a grid, but this tends to make for boring layouts – after all, if you have such flexibility you really should use it. You can add tags to the images that can be accessed from code, but keywords stored in the metadata of your images will not be imported, which is a bit of a shame. Deep Zoom applications are most impressive with either very high-resolution images or lots of images, so the composition process can take some time. I set to work on my 500 images, and after two hours had only laid out half of them when the program crashed and I lost the lot! I know what I said about saving regularly; well, on this occasion I didn’t, and I paid the price…

After a stroll around the garden to reduce the blood pressure, I got back to it and eventually finished laying out the images, hit Export and selected Silverlight Application, then waited as the composer program did its stuff. At this point, your masterpiece is being chopped up into a set of tiles from which Deep Zoom will compose the zoomed-in views that a user sees – this can take some time, so be patient. The composer will also build a preview web page for you, so you can try out your application in a browser.