SeaDragon View WebPart – Innovation at its Best

This project is now its own Codeplex project

Remember Microsoft Live Labs? They used to be a bunch of innovative guys down at Microsoft. Their team got dismantled a few years ago, but before it happened, they managed to release a bunch of interesting innovations. You probably recall project PhotoSynth, which provided a way for users to stich images together and recreate a 3d environment. Another very interesting project they managed to release was called SeaDragon, which allows users to do Deep Zooming on a particular image. The original version of the tool was using Silverlight (remember that name?). However, a side project to make it web based was initiated about 2 years ago. The project is called Seadragon AJAX

(http://gallery.expression.microsoft.com/SeadragonAjax ).

Even though there hasn’t been much work on the project for quite a long time, I decided I’d give it a go, and see how well I could integrate it with SharePoint. For those not familiar with the concept of Deep Zooming, it basically is the process of blowing up an image into several smaller pieces, and improving the display Quality of each of the pieces. The outcome of this process is an XML file associated with a bunch of folder name 0 to X each containing a matrix of smaller images. You can read more on the concept of Deep Zooming at http://msdn.microsoft.com/en-us/library/cc645050%28VS.95%29.aspx .Microsoft provides a little tool called Deep Zoom Composer which is a spin-off of the Expression suite, and which allows you to create the deep zoom files associated with an image.

My idea was to create a wrapper inside of a SharePoint WebPart that would allow users to display a Deep Zoom image. The deep zoom images could be hosted anywhere on the web, but in my case I decided to upload them directly inside of a SharePoint document library. My web part exposes 3 persistent properties: the url to the deep zoom xml file, the width of the wrapper, and its height. Now, the Seadragon AJAX project is all Javascript based, so what about accessibility? Simple enough, my web part has been made smart enough so that if javascript is disable on the client’s PC, then a static version of the image without the deep zoom ability should be provided.

 

You can see a demo of the describe web part on my blog at:

http://nikcharlebois.com/Pages/Demo-seadragon.aspx .

Please note that the version is using does not fallback to a static image when javascript is disabled. I have another version of this web part that is accessible, all you have to do is let javascript write the required Div tags for the SeadragonViewer, and provide the static image alternative via a <noscript> tag. I’ve also uploaded the Source code for the webpart. You can find it at:

http://www.ignitesoft.ca/Blogs/Nik/Documents/Source%20Code/SeaDragonViewer.zip

 

Enjoy

Creating Pinned Sites Jump Lists for SharePoint 2010

This idea came to me after attending the HTML 5 Boot camp in Ottawa back in April 2011. The boot camp introduced me to a new concept in Internet Explorer 9, called Pinned Sites. Basically, this feature allows web developers to build web sites that can interact with the Desktop when users pin the site to their taskbar. Sites can be pinned in Windows 7 and Windows Server 2008 R2 by dragging the site’s tab from internet explorer down onto the taskbar. You can read more about pinned site on the following MSDN site:

http://msdn.microsoft.com/en-us/library/gg131029(v=vs.85).aspx

Controlling the behavior of the pinned sites is really easy to do from any html page. However it gets a little trickier when doing from inside of SharePoint. For example, one needs to modify the Master Page’s <head> section to be able to specify a custom color for the Navigation buttons (back and forward arrows). Note however, that if you site is using a custom Favorite Icon (favicon.ico, normally located at http://<server>/_layouts/images/favicon.ico), the navigation button will adjust their colors to match the icon’s.

Back in early June, while chatting with Todd Klindt (@ToddKlindt) during one of his “world-famous” Netcasts, he asked the chat room if anybody had any suggestions on how he could make his blog more attractive and user friendly. One of my suggestions to him was to leverage the pinned site’s features of IE. Todd had a couple of key blog posts he wanted to promote, so Jump Lists inside of a Pinned Site would work perfectly.

I then decided to venture on my own, and developed a very simple sandboxed web part that would allow non-developers folks, like Todd, to easily leverage some of the Pinned Site functionality. The web part allows users to specify a Category for their Jump List, and to enter up to 5 items in it. The following Blog post describes how to deploy and use the custom web part. Since my web part is Sandboxed, you can simply upload it in the Site Collection’s Solution Gallery and have it activated from there.

By activating the solution on your site, you will automatically get a new web part named “Pinned Site Generator”.

Simply drag and drop it onto the page you want users to pin to their desktop. Once the web part is placed on a page, go edit its properties. Under the Miscellaneous header, you will find 11 custom properties that you can fill in. The very first one is the Category Name. This is a required field if you want your jumplist to be visible at all from your pinned site. This value will show up as the heading to your list. Logical values for this field could be anything like “Articles, Sections, News, etc”. The other fields are paired together, and they include a place to specify the name of the item, and the url it will point to. If we take back the example stated above, where Todd is looking to promote specific Blog articles, then the name of the item could be “Loopback Check”, and the url value would point to Todd’s blog post at: http://toddklindt.com/loopback .

Assuming the values entered above, here is what the final result of the pinned site’s jumplist will look like:

The solution (.wsp) is available to download from my company’s Office 365 site at the following location:

http://www.ignitesoft.ca/Documents/PinnedSiteGenerator.wsp

Now, I’m sure you guys will agree with me, the value added by creating pinned sites isn’t that great, but you can be sure that the next version of IE will continue to build and improve on this front. So please, don’t be pinless, and start creating dynamic Pinned SharePoint sites.