[Skip to Content]

How can I put my Deep Zoom Image in Azure?

It has been a while now that Windows Azure got released and I have been exploring it for quite sometime too. Recently I had this burning desire to try Azure Blob storage and was going through some thoughts and then I decided- Would it not be great if I can compose a Deep Zoom image and deploy it in Azure Blob storage and access it from my Silverlight application.

Since I went through a bit of digging myself in doing this, I thought I would just show this in a few short and simple steps for other people to try.

I assume readers have some experience with Deep Zoom Composer tool, Silverlight and Azure.

Following diagram shows the workflow for creating this simple application.

                       image

Steps to put your Deep Zoom Image into Azure Blob storage:

  1. Create your Deep Zoom Image using Deep Zoom composer

    There is a tool called Deep Zoom Composer available from Microsoft (http://www.microsoft.com/downloads/details.aspx?familyid=457b17b7-52bf-4bda-87a3-fa8a4673f8bf),  which can be used to generate this Deep Zoom image.  A step by step guide to generate a Deep Zoom image using this tool is here.

    When you create your Deep Zoom image , it produces image tiles for different zoom levels and meta data XML file. The folder and the file we are interested in are the following

    •   Dzc_output_files folder
    •   Dzc_output.xml
  2. Create Public Container in Blob storage

    You can use CloudBerry tool (http://www.cloudberrylab.com/default.aspx?page=explorer-azure) to create the container in your Blob storage account. After creating the container, you will need to make this container public which can be done by writing a small console application and the following code will assist you in achieving this.

    public static void SetContainerPermissions(String containerName)
    {
         // This code sets up a handler to update CloudStorageAccount instances when their corresponding
        // configuration settings change in the service configuration file.
         CloudStorageAccount.SetConfigurationSettingPublisher((configName, configSetter) =>
         {
                // Provide the configSetter with the initial value
                configSetter(configName);
    
         });
    
         CloudStorageAccount cloudStorageAccount =
    
         CloudStorageAccount.FromConfigurationSetting("DataConnectionString");
    
         CloudBlobClient cloudBlobClient = cloudStorageAccount.CreateCloudBlobClient();
    
         CloudBlobContainer cloudBlobContainer = new CloudBlobContainer(containerName, cloudBlobClient);
         BlobContainerPermissions blobContainerPermissions = new BlobContainerPermissions();
         blobContainerPermissions.PublicAccess = BlobContainerPublicAccessType.Container;
         cloudBlobContainer.SetPermissions(blobContainerPermissions);     
    }
  3. Upload your Deep Zoom Image to your Blob container

    Once you have your Blob container ready then you can upload you Deep Zoom image created in Step 1. Now copy the following with all the contents within the folder to the Blob container, which can be done using CloudBerry as well.    

    •   Dzc_output_files folder
    •   Dzc_output.xml
  4. Create a Silverlight application hosting a Multiscale image control

This step is quite straight forward, create a Silverlight application which host a Multiscale image control and point the source property of it to your Azure Deep Zoom image XML file in Blob storage and voila when you run this application it will display your Deep Zoom Image from Blob storage.

You will need to replace ‘storageaccountname’ and ‘container’ with your respective account name and the container you have created.

 

<MultiScaleImage
    Source='http://{storageaccountname}.blob.core.windows.net/{container}/dzc_output.xml'
    x:Name="BlobDeepZoomImage"/>

This was a very short and simple introduction of how you can build your Deep Zoom Image and deploy to Blob storage. This just shows the potential of Azure and what great applications can be build using it.

Comments

comments powered by Disqus