Sunday, February 27, 2011

Making your first Deep Zoom App

Deep Zoom is a manifestation of microsoft's open source technology for use in image viewing applications. This concept has revolutionized high resolution image viewing, specially on the internet where the loading time and size are important concerns. The silverlight deep zoom app provides a brilliant solution for this need, and yet it is extremely simple to create. Not only is it possible to view a lot of images on a single canvas, they can also be browsed and zoomed in / out in a seem-less manner.
Lets take up a hands on exercise. You would need to install the Deep Zoom Composer, which can be downloaded from here.
1. Start the Deep Zoom Composer and make a new project


2. As the project opens, you will see 3 tabs on the top panel.
a.) Import. b) Compose. and c.) Export.

The Import tab is meant for importing all the images to be put in the app into the project. The Compose tab is where you can make your deep zoom layout in an editor. Finally the export settings of the app are managed in the Export tab.


3. Use the 'Add Image' button to add images into the project.
Once all the images are added, we can proceed to Compose tab.


The Compose tab provides you with an editor where you can drag your images from the panel below and resize them according to your needs.

4. We generally begin with adding an image and then zoom it before we add the images which will appear after the user zooms in.



Use the Zoom tool to zoom in the base image to appropriate extent.
5. Now add another image at the desired place. Here we zoom an image of a galaxy and place the picture of earth inside it.




6. You can place as many images as you want at different places on the base image and size them to your wish.

7. It is also possible to place another deep zoom image inside a deep zoom. Here we place an image of a man inside the image of earth.

8. Once you are done with putting images. Goto the Export tab.
A lot of options are available for the output. You can either go for a single image output or create a silverlight deep zoom app or even go for a seadragon ajax app.


We can click Preview to see the output or Export the project.
Lets see what we just made.



Notice that the 'Forward - Back' buttons and the Zoom In - Zoom Out button are auto generated.

As I scroll into the pic, I come across the picture of the earth. Lets zoom into the suez canal on the junction between africa and middle east to see what lies there.
Woah !! That is one disgusting funny man.
This is just a very simple example of what you can create with a deep zoom app. There are immense possiblities and a lot can be created easily with this tool. You just have to put in creativity and a little skill. I hope you liked it.
Links :

No comments: