Embedding DeepZoom in FaceBook

It turns out it’s pretty simple to embed a Silverlight control in a FaceBook page.  Here’s the result.  Visit http://apps.facebook.com/nauticalcharts/ to see DeepZoom live.

DeepZoom.Analyze

To help unravel the mysteries of how the Silverlight MultiScaleImage control works, I've created an analysis tool which displays each layer of the composite image individually.

Each level of a DeepZoom image consists of a sparse 2D array of separate JPEG images which are tiled together to create the composite image. Zooming in moves through the layers smoothly. Tiles are progressively downloaded as needed for display, and layers are blended using animation.

The lowest level is numbered zero. The highest level is equal to 1 + log2 of the largest image dimension. As you move from the highest level backwards, each level is 1/2 the width and 1/2 the height of the next level up the tree. This progression continues to layer zero which is a 1 x1 pixel image.

You can see the sparse nature of the array at level 12 of the image below. The tiles in the lower left corner are absent since they can be adequately represented by tiles at lower levels (lower zoom values).

Below is level 14 of the same image. Note the dimensions of 14,718 x 14,334 pixels, and that the level consumes 43MB. You can see this image in action at http://www.deepzoom.com/.

Usage: Open the info.xml file associated with the Deep Zoom image tree, and then use the scroll bar to select which level to view. Note that the file open operation runs on the UI thread, so there will be a short delay when opening huge image trees. The info box in the bottom right shows details such as dimensions and total kilobytes used at the selected level.

Clicking "Tile Presence" shows the whether the tile is used in the current level. In Silverlight 2.0 B1, the tile presence elements don't seem to be used consistently, and are missing entirely from some layers which do have image tile data. And the MeanSquareError and BitsPerPixel fields also seem to be currently unused.

Here's the download, an 10KB .zip file (I didn't realize WPF applications would be so tiny!)

• Requirements: DotNet 3.5.
• Download: DeepZoomAnalyze.zip (Last updated 2008.06.29 for Silverlight Beta 2 -
  Note: only compositions are presently working, collections fail silently.)

Deep Zoom: National Palace Museum -- Along the River During the Ch'ing-ming Festival

The National Palace Museum in Taiwan has a lovely Deep Zoom demonstration which uses animation, transparent overlays, and an image navigation bar.  The source image appears to be on the order of 16K pixels wide, but that's just a rough guess.

See it at http://learnet.npm.gov.tw/silverlight/

Deep Zoom: How Deep can we go?

To date, it looks like Randy George has done the most work to push the size limits of Deep Zoom images.  From his blog post:

After a few minutes the result is a tiff image of 86400×43200 of about 11Gb. Now it is time to use the Deep Zoom Composer (actually a decomposer) to process this into a MultiScaleImage info.bin
When I attempted an import of this 11Gb tiff into Deep Zoom Composer, the Mermaid.exe choked after a few minutes. I guess we aren’t ready for geospatial scale exactly yet. Note to self: do this with -o Tiff, since mermaids may not like GTiff.

He then successfully creates a 16Kx16K image:

The largest mosaic I was able to get Deep Zoom Composer to accept was 8×8 or 16000px x 16000px which is just 4000m x 4000m on the ground. Feeding this 143Mb mosaic through Composer resulted in a pyramid consists of 5344 jpg files at 82.3Mb. However, scaling to a 5000m x 5000m set of 100 tif, the 221Mb mosaic, failed on import to Deep Zoom Composer.

It's unclear whether the dimensional limits are related to 32-bit Vista's 3GB memory or some maximum pixel dimensions.  Does anybody know which?

Above is the actual DeepZoom result.

Project Silverlight - Deep Zoom Internals

Wilfred Pinto has a great blog on Silverlight and Deep Zoom including internal file formats for items.bin and layout.bin, and how to select subImages using Linq. Check it out at http://projectsilverlight.blogspot.com/.

Vertigo BigPicture sample code published

Vertigo's BigPicture sample code which was presumably used for the HardRock Memorabilia Site has just been published on CodePlex. 

We finally have a gold standard for mouse wheel control.

DeepZoom.com

To learn about Microsoft's new Silverlight 2.0 technology, I've set up an experimental website at www.deepzoom.com. 

Silverlight 2.0 is a cross-browser (IE/Firefox/Safari), cross-platform, and cross-device plug-in for delivering the next generation of .NET based media experiences and rich interactive applications for the Web.  Learn more at http://silverlight.net/.

DeepZoom is part of Silverlight 2.0 which lets you create zoomable images of relatively huge dimension (check out this link for 16kx16k USGS Urban Area imagery of Denver: http://www.cadmaps.com/gisblog/?p=32).  

In the example below, I've created a set of nautical charts covering all of Puget Sound.  Scrolling, panning, and zooming give an experience similar to Google Earth or Microsoft Virtual Earth.  Even though you're accessing a huge dataset, the tiles are broken into small chunks, giving quite reasonable performance when zooming and panning.

To access the site, you'll need to install the beta of Silverlight 2.0 (4MB download), and then press F5 to refresh the browser.