Introduction to DeepZoom Silverlight 3

Years ago I came across DeepZoom in a Microsoft Teched Conference that was held in South Africa in Durban. After the conference I wrote an article on the subject. But when it was released it was a wow technology but it was still lacking something. I waited for Silverlight 3 to be released and new DeepZoom came into the picture again, and I was so impressed with the product now. I have demonstrated this in the old article and I must say I wasn’t impressed as am now. In July 2009 DeepZoom was released and I was ready to try it again and I was not disappointed at all.

Using the code

We are going to DeepZoom and Visual Studio 2008 to demonstrate these examples

Start

DeepZoom is not shipped with Visual Studio, but you need to download it for free in Microsoft website (http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=457b17b7-52bf-4bda-87a3-fa8a4673f8bf ). After you have downloaded DeepZoom install it and start working on it. Open DeepZoom and the first time you open it you will have a project less template, but because I have used it before I will have some project listed as depicted here

In your case, create a new Project and you will be presented with the following dialog box

Select the location of your project and give your project a name as depicted above. After you click ok you will be taken to black work space. At the top you will notice there are steps that you need to follow.

The First one says “Import” now this means you have to import your images and the next one says “Compose”, in this step you compose your DeepZoom application as we will do it later. And the last part is the Export. This will be the final Silverlight project that DeepZoom will create. First I have photos of a house that I will demonstrate with. On the right corner of your DeepZoom, you will notice that there is a Button that says “Add Image” as depicted below

Click the Add image and browse to the images, please note that you don’t need to add them one by one, you can multiselect and all the images will be added. After all the images you want for your project, the images will be added on your right hand pane as depicted below

On the above Steps, Click on the Compose Step and you will be taken to an empty working area but the images will appear on the bottom. In this step we place images where we want them to appear. Drag the images and drop them into the black working area as depicted below

Now I have my house plan, but I want hide images in that plan and when someone wants to view my house images, he can click on it and it will show the house. My house plan image will be adjusted so that it can fit the page and the working area as depicted below. 

Each Label in the house plan will be associated with the mage that will represent that room. Drag the image that show the living room and decrease the size with the image handles so that it can no longer be visible as depicted below

Leave it so that the user will be able to see it and click on it, do the same to other labels and when done you will have something like this

As you can see I have a bathroom that is not labelled but I have places an image for it, the kitchen has an image; the entrance has its image and the living room. Now our Silverlight composition is done. Click on the last step the “Export” and you will be presented by the following

Change the “Custom” tab and you will be presented with the following

Choose the options as I have and give our Silverlight application that will be created by DeepZoom a name as I did above. When done click the “Export” button to create a Silverlight Project. A progress bar will appear and when it is done exporting, four options will appear as depicted below

To test your nice work, click on the “Preview in Browser” option and you will see something like this

Let us start in at the entrance, as you can see there is a small image, click on it once and a zoom “+” sign will appear and if you click it again it will make the image outgrow the house plan. If you want to go back to the main plan image, you have to select the home shortcut on your left top corner of your page on the toolbar depicted below.

The Previous DeepZoom did not have this capability. You had to click many times to see the image clearly and this time I will be capable of showing off my house with only few clicks. When done testing your application close DeepZoom and go to your project directory because DeepZoom will have created a Silverlight Project for you. The discussion of the Project Files that has been created for visual studio is beyond the scope of this article.

Conclusion

In my future article I will demonstrate on how to add this nice feature into your asp.net application.

Thank you for visiting DotnetFunda
Vuyiswa Maseko

 

If you like this article, subscribe to our RSS Feed. You can also subscribe via email to our Interview Questions, Codes and Forums section.