The CodePlex Corner: Seadragon Viewer Web Part

The link to the Project is

The CodePlex project that I want to look at for this column is something that was originally created by Microsoft Live Labs. It goes by the name of Seadragon and is a facility that allows a user to perform a “Deep Zoom” on an image. Don’t worry if that is an unfamiliar term, we’ll explore the concept shortly. Whilst Seadragon was initially a Silverlight project, a separate work stream produced a web based version known as Seadragon Ajax. Ultimately the team disbanded and the project fell into abandon. This year a SharePoint Seadragon Viewer web part emerged, which has been developed by Nikolas Charlebois-Laprade.

A short explanation of Deep Zooming is that it is a technology designed to allow efficient viewing and transmission of images. It consequently works very well with high resolution images. This is achieved this by breaking up an image into several smaller pieces. Essentially a pyramid of smaller and lower resolution images is created from the original item. The starting image is lowest in the pyramid. When zooming in for sections, you’ll be zooming into one of the tiles from these tile sets, moving between sets as required.

Believe it or not, it’s something that you’ve probably seen before. If you’re not convinced, take a look at the architecture design pages for SharePoint 2013. See that zooming ability? That’s what the Seadragon Viewer does. It makes large and typically unwieldy images much easier to interact with.

When we look at how this works within SharePoint, making the web part work can be broken down into two specific areas: –

  1. Pre-SharePoint work section: the creation of images and their properties with the Deep Zoom Composer
  2. SharePoint Configuration: The installation of the web part and how to use Deep Zoom images with the web part

It’s outside the scope of this review article to explain all of this in great detail but I am writing a tutorial on this, which I’ll post shortly.

Link to product review

There are currently no product reviews on SharePoint Reviews for Seadragon Ajax. I may add one eventually but as this is only a basic web part and not a fully-fledged solution I think it would be unfair to add one so soon. I’d file this under Content Management à Content Organisation

“End User – Developer” scale

On first glance this is just a standard web part deployment and installation. There is however, a fair amount of work to be done to prepare images for Deep Zooming. For that reason, I’m rating this squarely between the administrator / developer spokes.

Potential pitfalls / problems

This is a web part that makes you work a little to get the most out of it. As Seadragon and Deep Zooming were never developed with SharePoint in mind, getting the two married together can be an awkward process. I can see two potential pitfalls: –

  1. Learning to use the Deep Zoom Image Composer
  2. Setting up the XML and file structure within a Document Library

Using the Deep Zoom Composer

: This was originally created as part of the Microsoft Expression Suite but was offered for free rather than being part of the (at the time) paid offering. Installing it is straight forward enough and exporting the image is a three step process. You’ll just have to remember to output the files as Seadragon Ajax.

Linking it all to the web part

: The web part works by communicating with the XML file that is output from the Deep Zoom Viewer. This will involve renaming the output XML file and the image directory so that they have the same name. Not a technically challenging step but an easy one to overlook.

This is a project that I liked reviewing and it’s one that I’ll definitely get some use out of in various SharePoint projects. Seadragon is a technology that, when bolted in SharePoint is surprisingly industry agnostic. It’ll have a use anywhere that a high resolution image can serve a purpose. Being able to surface this within SharePoint sites seamlessly

The links below are my reference list: –

  1. CodePlex Seadragon Viewer Web Part
  2. Nik’s Blog Entry on the SeaDragon WebPart
  3. Expression Gallery SeaDragon Ajax
  4. SharePoint 2013 Architecture diagrams
  5. Deep Zoom Silverlight Developer Info
  6. MSDN Blog: Deep Zoom Primer (Jamie Rodriquez)
  7. Download link to the Deep Zoom Composer

3 thoughts on “The CodePlex Corner: Seadragon Viewer Web Part

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s