This project is read-only.

Adding a Deep Zoom Image to a SharePoint 2010 Site

Applies to

  • SharePoint 2010 (All Editions)

Scenario

You’ve got a large image that you want to distribute to some colleagues.  But the image size makes it unwieldy to distribute via email.  Instead, you’d like to provide an online capability where your users can interact with the image without losing image integrity.  An example of Deep Zoom technology in use can be seen on the SharePoint 2013 architecture diagrams.   This solution has a few components, namely: -

  • Seadragon Ajax Viewer Web Part (hosted on CodePlex)
  • Deep Zoom Image Composer
  • A large resolution image

Downloading and installing the web part

First we’ll begin by downloading and installing the web part.  We won’t worry too much about configuring it at the moment; all we’re concerned with is getting it onto your servers.  These steps should be done from one of your WFE Servers: -

  • Navigate to the Downloads page of the CodePlex project.  The SeaDragonViewer.wsp is the recommended download at the top of this page
  • Create a folder on your C drive called C:\Web Parts and download the WSP file to this directory
  • Open the SharePoint 2010 Management Shell via Start à All Programs à Microsoft SharePoint 2010 Products à SharePoint 2010 Management Shell.  Right-click on this and select the Run as Administrator
  •  
  • Once this has loaded.  Run these PowerShell Commands.  The first command installs the solution; the second command deploys it and makes it available for selection within your SharePoint installation.
    • Add-SPSolution “C:\Web Parts\SeaDragonViewer.wsp”
    • Install-SPSolution –Identity SeaDragonViewer.wsp –WebApplication http://YourSite –GACDeployment

Please note that the http://YourSite should be replaced with the URL of your own SharePoint Web Application.  Once these steps have been completed, you’ll have the web part ready and installed for use but no image to plug into it.  To prepare these, it’s necessary to step back from SharePoint for a moment and to use another Microsoft Tool; the Deep Zoom Composer

Creating DeepZoom Images for use within SharePoint

In this next set of steps we are going to obtain a high resolution image and use a special image utility to prepare this for use within SharePoint.  We will then manually tweak the output of the tool to make sure that it’s compatible with the web part that you downloaded and installed earlier.

  • On your desktop, create a folder called “Sea Dragon Images”
  • Next, in your browser of choice navigate to morguefile.com.  This is a free photo archive
  • In the search box, type in London and hit enter
  • Pick an image on the search results page and click on it.  You’ll get a properties box that describes the attributes of the file you’ve chosen
  • Click on the Download button on this attributes page.
  • This will prompt you to open the file, save it or to cancel the download.  Click on “Save” and save it to the Sea Dragon Images folder that you made earlier

At this point, you should now have a folder with one high resolution image contained with it.  To make use of this image we are going to install a piece of kit called the Deep Zoom Composer. This is a facility that takes high resolution images and then transforms them into the appropriate format.

  • Download the DeepZoom Composer from http://www.microsoft.com/en-us/download/details.aspx?id=24819
  • The download process is quick and painless.  Double click the exe and start the installation process.  Accept the terms and conditions and follow the wizard through to completion
  • Launch the Deep Zoom Composer from the start menu.  Start à All Programs à  Microsoft Expression à Deep Zoom Composer.  You’ll be greeted with this screen
  • Click on New Project 
  •  In the New Project Dialog Box that pops up, name the project “London” and save it to the Sea Dragon Images directory that you created earlier and click OK
  • With these settings in place, the dialog box will disappear and you’ll see a blank canvas.  This has also created a London directory within the Sea Dragon Images directory that you will be investigating later
  • Back on the  canvas, look at the top right of the Zoom Composer and you’ll see an “Add Image” button
  • Click on this and then navigate to the image that you downloaded earlier.  Select it and press Ok.  You’ll then see the image selected at the centre of the canvas and on the right hand side of the screen under a thumbnail strip
  • On the toolbar at the top of the page, click Compose
  • This will take you to the second stage of the composition process.  You will see a blank canvas again but this have the London image from the previous step loaded in the thumbnail strip at the bottom of the screen
  • Drag the London image from the thumbnail to the canvas. It is beneficial here to use the “Fit to Scree” command to make this easier.  Do this via
    • Edit à Fit to Screen
    • Keyboard Shortcut: Ctrl + O
  • Once this is done, you should have a screen that looks similar to the below
  • Click on the Export Tab
  •  
  • This will take you to a new export page where the various export settings can be inspected.  On the export settings on the right hand side of the screen select Seadragon Ajax from the Output type options.
  • Give your export a name and select the export location.  By default this will be a folder called “Export Data” within the project directory that was created when the project was initialised
  • Click Export once you are happy with the settings.  You’ll see these options at the end of export process
  • Click “Preview in Browser” to see how this will look in your SharePoint site
  • Once you’ve done inspecting your work in the browser, click on the View Image Folder.  You’ll see something similar to the image below.  The filepath will be  .../Exported Data/London/GeneratedImages

Let’s inspect these files before moving on.  Some changes will be needed to them shortly but it always helps to know what these are before altering them


File / Directory Name

Notes

Dzc_output_files

Directory containing the zoom images

Dzc_output.xml

XML file that dictates the zoom template size and format

Scene.xml

XML file containing the instructions and calculations for the images

SparseImageSceneGraph.xml

XML file that stipulates the zoom ratio, image path and background colours

The two items that we want to pay attention to here are the dzc_output_files directory and the dzc_output.xml.  These are the files that the Seadragon Viewer web part needs to talk to.  These next steps will show you how to combine your image output and the web part.

  • In the Generated Images directory generated by the Deep Zoom Composer rename the dzc_output_files directory and the dzc_output.xml to London. 
  • Once these files have been renamed upload the entire directory and the xml files to a SharePoint document library.  Right click the London.XML file and copy the shortcut
  • Back in your SharePoint environment, navigate to the root site of the web application that the web part was installed to
  • Access the Site Collection Features via Site Actions à Settings.  This will load a new screen
  • On this new screen, look for the Site Collection Administration heading and click on the Site Collection Features under it.  This will also load a new page
  • On this page, search for the SeaDragonViewer Feature1 and activate it.  This adds the web part to the web part gallery for all sites within this site collection
  • Now that the part is available, navigate to the page or site where the Seadragon viewer is to be added.  When selecting the web part it will be grouped under the Innovation category
  •  
  • Once the web part has been added, enter the configuration options (Edit Page à Edit Web Part) and look for the Miscellaneous section.  This will have three configuration options: -
    • XMLPath: This is where the URL for the renamed XML file needs to be placed
    • WPWidth: Setting for the Web Part Width
    • WPHeight: Setting for the Web Part Height
  • Paste the link of the XML file that you copied earlier into the XML Path field and press Apply / OK
  • You will now have a web part with a high resolution image that you can zoom into and pan around without any loss of quality.

That’s it.  You’re all done. There is more that you can do with the Deep Zoom Composer. And naturally SharePoint gives you plenty of ways to integrate this Web Part into your own solutions.

Last edited Nov 10, 2013 at 7:29 PM by S_Andrews, version 2