Silverlight 2.0 and facebook

I decided to figure out how easy it would be to embed DeepZoom within facebook as an application.  After wasting most of the day learning to configure IIS7 applications for debugging and downloading and installing toolkits and starter kits, I finally figured out that all this rigmarole is unnecessary if you don’t need to access the facebook API and just want to embed your Silverlight app.

If you have a working Silverlight 2.0 application working within an .aspx page and you want to embed it into facebook, all you really need to do is add a few lines to your web.config file and then set up the facebook application to reference your existing web site.

The lines to be added to web.config are:

<appSettings>
      <add key="APIKey" value="GetThisFromTheFacebookAppConfigPage"/>
      <add key="Secret" value="GetThisFromTheFacebookAppConfigPage"/>
      <add key="Callback" value=”http://www.deepzoom.com/default.aspx”/>
      <add key="Suffix" value="MyIFrameApp"/>
      <add key="TemplateID1" value="20889707566"/>
      <add key="TemplateID2" value="20889902566"/>
</appSettings>

(I have no idea what the last 3 lines do either.)

The facebook app needs to be setup with using an IFrame and needs to have the Callback URL and Canvas URL set according to the instructions here.

If you want to go to the next step and actually access the facebook API, then you’ll need to follow the lengthy instructions at:

Facebook application development in ASP.NET

How to Build Facebook Applications with Silverlight 2 RTW – Part 1 of 2

How to Build Facebook Applications with Silverlight 2 RTW – Part 2 of 2

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.

Moving to Silverlight 2.0 Beta 2 from Silverlight 2.0 Beta 1

Always a willing masochist guinea pig to help uncover the latest round of Microsoft bugs and features, I upgraded to Silverlight Beta 2 the day it became available.  Here is a link to the files you need to install.  I uninstalled Beta 1 components first but others reported no problems upgrading over the Beta 1 bits.

Below is a running list of what needed to be updated on www.deepzoom.com, and here's the official change list.

Updating www.deepzoom.com to B2

1. Switch to the B2 mime type in your .aspx or .htm file.  Below, the "silverlight-2-b1" has changed to "silverlight-2-b2", and don't forget to change the Installer URL to "LinkID=115261" so your clients will download B2 instead of B1.

      1: <div style="height: 100%; width: 100%;">

      2:     <object type="application/x-silverlight-2-b2" width="100%" height="100%">

      3:         <param name="source" value="ClientBin/DeepZoom.FullScreen.xap" />

      4:         <param name="onerror" value="onSilverlightError" />

      5:         <param name="background" value="white" />

      6:         <div id="no-sl" class="install-badge">

      7:             <img alt="Puget Sound" src="images/SeattleArea.gif" />

      8:             <a href="http://go.microsoft.com/fwlink/?LinkID=115261" 

      9:                 style="position: absolute;

     10:                 text-decoration: none; left: 260px; top: 150px;">

     11:                 <img alt="Get Microsoft Silverlight" 

     12:                     src="http://go.microsoft.com/fwlink/?LinkId=108181"

     13:                     style="border-style: solid; padding: 10px; 

     14:                     background: white;" /></a>

     15:         </div>

     16:     </object>

     17: </div>

2. Toss out all your B1 Deep Zoom content and create it anew in Deep Zoom Composer B2.  I had problems opening old Composer projects, so I don't know if upgrades are supposed to be supported.  The image metadata is now stored as XML file instead of binary, and the per layer detail from the old format seems to be gone completely.  Here's a sample of the new format:

      1: <?xml version="1.0" encoding="UTF-8" ?> 

      2: <Image TileSize="256" Overlap="1" Format="png" 

      3:     xmlns="http://schemas.microsoft.com/deepzoom/2008">

      4:     <Size Width="14718" Height="14334" /> 

      5:     <DisplayRects>

      6:         <DisplayRect MinLevel="0" MaxLevel="14">

      7:             <Rect X="0" Y="0" Width="14718" Height="14334" /> 

      8:         </DisplayRect>

      9:     </DisplayRects>

     10: </Image>

   This also breaks my Deep Zoom analyzer program, DeepZoomAnalyze.exe, and I'll be working on an update for this problem.
3. Setting the source for a MultiZoomImage has changed.  Note that DeepZoomImageTileSource is in System.Windows.Media.dll, so add a reference to it:
   using System.Windows.Media;

      1: msi.Source = new DeepZoomImageTileSource(new System.Uri("images/info.dzi"));

      2: // Or

      3: msi.Source = new YourMultiScaleTileSourceOverride();

   Notice that you can now provide your own Tile source provider, which opens up a slew of new possibilities for the use of MultiScaleImage.
4. Tooltips have changed completely.  Throw away your code and start over.
5. Update silverlight.js.

And that's about it.  Except for regenerating all of the content, it took about two hours to figure out the changes.  None of the mouse or scroll or zoom logic needed to change which was a great relief.

Deep Zoom Composer Problems and Feature Requests

1. Uploading a 78MB Tiff file which worked fine in Beta 1 fails to load in Beta 2.  The file opens fine in Photoshop and Paint so I don't think it's a corruption issue.  No error is given at the completion of a long import, but the resulting image is 1x1 pixels.
2. Importing to Deep Zoom Composer has become painfully slow.
3. Feature request:  Provide an option when bringing images onto the composer canvas to not scale the images to some random default value.  I need to have the relative scale of multiple images preserved, but it looks like Composer finds the largest image dimension for all images, and then scales all subsequent images to this value.  While this might be the generally desired behavior, there's another large class of applications in which autoscaling is the wrong choice.
4. Feature request:  Let me assign a transparency value to an image so I can align images which overlap others.

VS2008 problems

1. For a while, every time I touched a XAML page in VS2008, it reported an exception but then completed my request anyway.  But this problem seems to have disappeared after a restart or two, this seems to have gone away.

DG.TV Jose Fajardo on DeepZoom Awesomeness

Jose Fajardo has a DeepZoom demonstration posted by Delicate Genius which ponders the question, “What if every web image is DeepZoomable?” 

Dive on into “DeepZoom Awesomeness”:

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.