Hosting WP7 Deep Zoom Content in Azure Blob Storage

One of the most awesome capabilities exposed in Windows Phone 7 is the ability to host Deep Zoom images within your application.  This is the same technology that powers such awesome Deep Zoom web experiences as the Hard Rock Memorabilia and Michael Jordan Jump Man 23 Mosaic web sites.

Here’s a few screenshots of the sample application I will walk you through in this blog post.  The secret to success is the use of the the Multi-Scale Image control:

     

The other secret to success is hosting your Deep Zoom content in Windows Azure Blob Storage – which provides a highly robust, scalable, and inexpensive way to serve-up your visually stunning experiences over the web.  For even greater performance on a world-wide basis, you can also leverage the Windows Azure Content Delivery Network (CDN) capabilities of Azure Blob storage for your data elements. 

My goal is to take you all the way from a cool hi-resolution photograph to a Windows Phone 7 application that can dynamically “Deep Zoom” in and out of the initial image in a Windows Phone 7 application. So, the steps will be as follows:

Cool Photo –> Deep Zoom Composer –> Azure Blob Storage –> Windows Phone 7 App – Deep Zoom Viewer 

With this framework and knowledge,, you will be able to host all kinds of valuable Deep Zoom imagery in Windows Azure Blob storage – and create mobile, web, and client applications to consume them.

Step 1 – download Deep Zoom Composer and Create Deep Zoom Images

First, get the Free Deep Zoom Composer Download.

Working with Deep Zoom composer is very easy and straightforward – there are basically (3) operations you can perform:

• Import – your favorite images or pictures.
• Compose – layout the image(s) on the screen in any pattern you wish
• Export – to create a folder containing the Deep Zoom Tile images that are used to render your scene.

Here you can see that I have imported an image and centered it on the canvas:

The next step is to EXPORT your Deep Zoom project images:

Select the “Custom” tab:

• Output Type: Silverlight Deep Zoom
• Export as a collection (multiple images)
• Set your folder location for the exported images

Now you can view the image folder and you should have the following files and folder structure:

 

Step 2 – Upload  Deep Zoom Content into Windows Azure Blob Storage

If you don’t already have a Windows Azure Account, you can sign-up for a Free 90-day Windows Azure Trial to get started.

Once you are in the Windows Azure Portal – you will want to select the option for “Hosted Services, Storage Accounts & CDN.  From there, select “Storage Accounts” and then you can right-click on your subscription and select “New Storage Account”:

Once you have created a new Storage Account, you will want to select the option to view the primary or secondary account key:

This keys will valuable for the next step where we will upload the Deep Zoom Images to Windows Azure – so please copy them to to your clipboard for later use.  You will also want to protect these keys – as they are the security mechanism to allow programs to   

Once you have provisioned Windows Azure Blob Storage, we will use a C# .NET console application to upload the Deep Zoom images files into Windows Azure.

I affectionately call this application “BlobBlasterParallel” - the program basically will move a folder and all subdirectories underneath and upload all the files into Windows Azure using the .NET Parallel libraries to maximize the efficiency of the application across all available CPU’s. 

All that is required is to modify the variables in the Program.cs file for the following information:

• Folder location for your Deep Zoom images (generated in Step 1).
• Your Windows Azure Blob Storage Account Name.
• Your Windows Azure Blob Account Name.
• Your Windows Azure Blob Account Key.

Here is the code snippet to modify:

 

Note the use of the Parallel.ForEach construct in the In the code snippet below that iterates over the files in a folder: 

 

Now compile and run the application from a command prompt. Note that this program will maximize your CPU’s and network connection to upload all of your Deep Zoom images and folders into Windows Azure as fast as possible – so be aware of network saturation issues you may cause for your home or work environment.

*Any on-line gamers in the household are particularly at risk for total p0wnage during this time.

You can download the all the code for the BlobBlasterParallel application at the bottom of this post.

We can use a tool such as the Azure Storage Explorer to view the content that has been uploaded to our Azure Blob Container. 

Here’s a view of our Blog container after we have uploaded all the Deep Zoom content that was generated in step 1:

 

Step 3 – Create a Windows Phone 7 Application to display Deep Zoom Images

Everything you need to get started building Windows Phone 7 applications (including the free tools) can be found at: https://create.msdn.com/en-US/

Once you have the Visual Studio tools for Windows Phone 7 installed, create a new Windows phone Application by selecting

File / New / Windows Phone Application - and then allowing Visual Studio to populate your solution.

Enable the Multi-Scale Image Control in the Toolbox

The multi-scale image control not visible by default in your toolbox - so all you have to do I right click on the toolbox and select “Add Items”:

 

Now you can drag and drop a Multi-Scale Image control from the toolbox and size it on the page like below (I named my Multi-Scale Image control “msi” for the next step :

 

 

Now, we can modify the page load event to set the Multi-Scale Image control source property to our Windows Azure Blob container:

Now, if we run our WP7 Deep Zoom project in debug, we will get the Deep Zoom Image displayed on our WP7 Emulator – directly from Windows Azure!

 

Of course, this is great – but our application still lacks the ability to respond to mouse events in order to zoom in or out.  To remedy this situation, I have taken the initial code base from Alex Yakhnin's blog post Deep Zoom on WP7 and modified it to work on Windows Phone 7 Mango.

And with that, we get a full-fidelity Deep Zoom experience on Windows Phone 7 – using Windows Azure Blob Storage to host our content!

 

So there you have it; Windows Azure hosting Deep Zoom image content in Blob Storage and a Windows Phone 7 application to display your super cool visual experiences!

All the source code for the above examples can be found here

Enjoy!