Panorama viewer with Silverlight and DeepZoom

With Silverlight and the DeepZoom Composer it is very easy to create a pano viewer that lets one zoom, drag, and pan the panorama. With a few clicks in the DeepZoom Composer the pano viewer is up and running in a matter of minutes. In this article I'll show you how get a pano viewer up and running.

For this article, you'll need the Silverlight Tools for VS 2008 and the DeepZoom Composer. You can find the links for the downloads at http://silverlight.net/GetStarted/. Once you have these downloaded go ahead and install them. You'll also need a panoramic image also.

First I want to write about how I shot the panorama. The pano is of Belmont track on Long Island. It is a 43 image pano. Exposure was kept constant - 1/250 sec and f16. Each frame was shot in portrait orientation  with a Nikon D300 and Sigma 24-60mm f2.8 lens. Images were taken in RAW and converted to JPG using Adobe Camera RAW 5.2 and then stitched in PTGUI. I have found PTGUI to be easiest and most accurate stitching program. In contrast I also tried it with Photoshop CS4 which could not stitch the frames and I found Autopano Pro not user friendly. DeepZoom Composer can do pano stitching but I have not tried it on my images.

Fire up DeepZoom Composer. Create a new project - assign the project a name and a location where you can find the outputted code and files.

In the Import screen on the right hand side is the button "Add Image". Click it and browse to your pano. Go to the Compose screen and drag the image onto the design surface. Since we're dealign with only one image, you can click the Fit To Screen button on the bottom toolbar to align the image.

Go to the Export screen - you're now ready to let DeepZoom generate the code and image slices. Go to the Custom tab on the right. Under Output Type select Silverlight Deep Zoom. Assign a name in the Name field. This will result in the exported code and files being located in <ProjectName>/ExportedData/<Name>. Select Export as Composition and adjust the JPEG quality. When you're ready, hit Export.

Once its exported a new window will appear with the option to view the pano viewer in an html page in the browser. You can drag in all directions and zoom in via the wheel. The toolbar has an option to go full screen.

If you want to put the viewer live on a remote server you'll need to upload the the contents of the ClientBin folder found at <ProjectName>/ExportedData/<Name>/DeepZoomProjectWeb as well as uploading the System.Web.Silverlight dll. The *.xap file in the ClientBin folder folder is basically the compiled Silverlight application package. If you're curious about the contents of the xap package rename the extension to *.zip and open it with a program such as WinRar or other zip utility. If you move around the Silverlight .js and xap package be sure to update the relevant paths in DeepZoomProjectTestPage.html.

Deepzoom Composer has made it very easy to create a fully functional draggable and zoomable pano viewer in just a few minutes. I hope you found the article informative and useful.

You can view the live demo here.