Update: You can read about the latest changes in the DeepZoom Composer here.
Introduction
First let’s see what stands behind the name SeaDragon. This is a project of SeaDragon Software, which are a part of the Microsoft Live Labs. Its main purpose is to make the browsing of a large amount of visual information, regardless of the device, smoother and independent from the bandwidth of the network. You can read more about it here. So what’s the DeepZoom Composer? It allows us to use some of the SeaDragon technology in Silverlight. To get started first download the DeepZoom Composer.
The DeepZoom Composer
We will use the composer to set up our image, or a composition of images, so it can be used later by the MultiScaleImage control. But first let’s see what the DeepZoom Composer does with the images. Basically it partitions them in pieces and in the meantime it also creates smaller copies of the image. The smallest piece has dimensions 512 pixels. The example below explains it:
You can see that the image is sliced in pieces with size 512x512 pixels from the top to the bottom. Our image has height of 768 pixels so when we slice a part of it, what’s left are pieces with sizes 512x256 pixels. After that the DeepZoom Composer reduces the image 2 times. Because now its size is not bigger than 512x512 pixels the image is not partitioned. The Composer continues reducing the size with x2 step till it reaches dimensions smaller than 1x1 pixels. So when the image and its smaller copies are bigger than 512x512 pixels they are sliced into pieces, when the size of the copies or the image is smaller than 512x512 they are saved as a whole image.
Creating a project
Now let’s create a project and walk through the steps needed to prepare our image(s) for usage. Open the DeepZoom Composer and choose from the File menu “New Project”. Write a name for the project and choose where it will be saved. You are now in the Import workspace. Here you can import the picture you’ll use with the DeepZoom Composer. Note: Each picture can be used only once, so if you want to use a picture more than once, import it several times. To remove a picture just right click on it and chose “Remove from project”.
The next step is to compose our DeepZoom image. We go to the Compose workspace, drag our background and place it on the scene. After that we fit it to the window and zoom deep in it. Now we can place the other pictures. The idea here is to have relatively small copies of the images on the main screen in order to see them in details after using a zoom. Note: To zoom out hold Alt and click.
Though the images we have “hanged” on the wall look pretty small, they will preserve their quality, and later using the MultiScaleImage control we will be able to see them in details. The images you have already used will be transparent and you won’t be able to use them again. To remove a picture form the scene choose the “Selection” tool, right click on the image and “Remove from composition”. You can also use the tools at the bottom to align the images.
In this screen you can see also the tabs on the right. The one is “All Images” and the other is “Layer View”. In the first tab you can select and drag images into the scene. In the second you can view the images that are already on the scene and change their Z-index using the Up and Down arrows and their visibility - by clicking on the eye.
Now we are ready to go to the Export Workspace. Here you are able to see a preview of your composition and the settings for the export.
Enter a name for your composition and if you want you can choose a path for the export. The checkbox “Create Collection” indicates whether the images will be kept separate from one another in a collection or not. In the next article we will see how we can use this in the MultiScaleImage Control.
After exporting our composition we can see the output folder. We are interested in the subdirectory in it. It contains an xml file, info.bin file and numbered directories. The Bin file contains information about the images and their tiles, if they’re partitioned, and about their relation to the main image. In the directories you can find our composition. You can also see that when the copy in the directory is bigger than 512x512 pixels it’s sliced in pieces. Note that there aren’t copies of every image we’ve used; there are copies only of the composition.
Benefits
One of the benefits of the DeepZoom Composer is that when a MultiScaleImage control manages the composition, it doesn’t download the whole high resolution image. It shows a copy that fits to the current zoom level. When it’s zoomed in depth only the tile that is needed is downloaded. Thus it improves the downloading time and allows really big and high quality images to be browsed on the web, no matter what the network bandwidth is.
Another benefit that you’ll notice when we implement our composition in the MultiScaleImage control is that the transition between the tiles when we zoom or pan is very smooth and that again makes this high quality, big sized visual information to look very light and easy accessible for the user on the Web.
Conclusion
In this article we took a look at the DeepZoom Composer application. We examined its key features and made a complete project. In the next article I’ll show you how to use the created composition with MultiScaleImage control, in order to create an Image that we can zoom and pan very smoothly and easy using Silverlight.
Useful Links
· SeaDragon Software
· DeepZoom Composer Download
· DeepZoom Composer User Guide