A Deep Zoom Blog : deep zoom

Showing Photosynth Collections in Silverlight (2-D)

lutzg — Wed, 03 Sep 2008 23:13:00 GMT

If you haven’t already, check out Photosynth, the latest release from Livelabs showing off this fantastic technology that stitches images together in 3-D space and lets you navigate your vacation photos. It's better seen than described in words, so don't hesitate to blow off a few minutes looking at the great Synths that have already come in from all over the world.

Well, the wonderful thing about Photosynth and Deep Zoom is that we share the same file format. A collection created in Photosynth can be opened in Deep Zoom and the items in the collection can be arranged to a developer’s liking.

Click below to see the application that lets you view any photosynth collection you may have found and liked, but don’t have a chance to look at because you are using a Mac (like me at home) or because you don’t have a supported browser.

How does one open a Photosynth collection?

Well, search for your favorite Photosynth, right click the link and copy it, or copy the URL from the address bar, and paste it into the viewer. The viewer does the rest to open the collection and lay it out on a 2-D grid.

Some details on the Photosynth format

All this little application really does is analyze the URL to a collection and pull out the right pieces to reconstruct the URL to the actual collection.

Let’s take the following example:

http://photosynth.net/view.aspx?cid=ffa4cce7-d8ec-44f8-9eac-ab28b838cdcb

Is the URL to a photosynth of a collection. The resulting URL to the collection (according to fiddler) is:

http://mslabs-100.vo.llnwd.net/d4/photosynth/M6/collections/ff/a4/cc/ffa4cce7-d8ec-44f8-9eac-ab28b838cdcb.dzc

Note that Photosynth uses the extension “.dzc” (Deep Zoom Collection) for collections, and “.dzi” (Deep Zoom Image) for images.

So what do you need to do to get to the collection given the URL to the Synth? Well, first, you extract the collection GUID (ffa4cce7-d8ec-44f8-9eac-ab28b838cdcb).

Next, you need to construct the path to the collection from the GUID. The first part can always be the same:

http://mslabs-100.vo.llnwd.net/

Next, there is a “d”, followed by a number. This number can’t be derived from the GUID, it’s different for every synth. So I need to try numbers between 2 and 8 to see where the collection is.

The next bit (/photosynth/M6/collections/) is always the same. The next bit (/ff/a4/cc/) is simply the first six digits of the GUID. Then add the GUID, “.dzc” and you are done!

Note on layouts

One thing to note is that Photosynth does not put layout information into the collection XML file. This layout information is normally used by Deep Zoom to place images in a collection on screen in the right spots (Deep Zoom Composer for example fills in the layout information).

So if you attempt to open a Photosynth collection without laying the images out yourself, you will be in a world of hurt - the default behavior for deep zoom when layout information is missing is to layout all the images in a collection fitting to the container deep zoom is in. And since that can be hundreds of images, it can be pretty slow.

Synchronizing Images with the Deep Zoom content

lutzg — Tue, 19 Aug 2008 23:46:00 GMT

A very common request I have been getting is some sample that shows how you can synchronize content with Deep Zoom.

Click on the image below to start the app. Zoom in to see the various places I've lived.

Download the source here.

So how is this done? Really there are two main concept I show in the app:

Synchronizing other content with Deep Zoom

When you set ViewportOrigin or ViewportWidth (or use the ZoomAboutPoint helper), deep zoom simply kicks off an animation to the new location. This animation happens entirely under the hood and is transparent to the developer. That's very nice for the dead simple zooming application, since the developer doesn't have to worry about making pretty animations when zooming and panning. Pretty animations are built in.

However, this behavior does cause a problem if you want to make other things in Silverlight move along with zooming and panning of the Deep Zoom image.

So what's the trick? Everytime a user pans or zooms, this application sets of a 0-length-storyboard that tracks what Deep Zoom is doing, and adjust size and position for the pins. The 0-length-storyboard does its thing for 1500 ms, which is exactly the amount of time Deep Zoom allocates for each animation.

Using powerlaw scaling

Another nifty little feature that was put into this application is powerlaw scaling. The size of the pins only grows at a fraction of the rate of the rest of the map. This needs to be done, since if the size of the pins is kept constant, our eyes fall victim to an optical illusion: when zooming in, the pins would look like they are shrinking, and when zooming out, the appear to be growing.
Power-law scaling makes this visual effect much less noticeable.

Zooming with constraints

lutzg — Wed, 06 Aug 2008 08:23:00 GMT

My first blog post will be a small but useful little tip. One of the things that's not built into deep zoom is the ability to specify at which level to stop zooming out, and at which level to stop zooming in.

Check out the following example (which I will use in future blog posts for more examples). Please note that there is a bug in the mousehandler here where the browser still captures the wheel (not just the app), something I intend to fix in a future post.

Launch in a separate window

This example is a very deep sparse image - it is a collection of vacation pictures I took while I was in Europe last summer. I laid them out nicely for a pleasant browsing experience.

One of the issues with simply checking the zoom level and resetting it when the zoom level passes a certain point is that Deep Zoom uses its own animations for zooming to a certain level. So simply checking the current zoom level when a user flicks the mouse wheel and ensuring that a certain level of zoom isn't passed doesn't do the trick - at the time you set the new zoom level, Deep Zoom only initiates the animation, but the current zoom level will not have changed. You need to instead anticipate what the zoom level will be after you zoom, and make sure to adjust the target zoom rate appropriately.

The way this is done here is to keep track of my own zoom level, check how deep I've zoomed in or how far I've zoomed out at any given time.

Another thing that's been done here is to open the XML file for the image, and check for the extents of the image and not let the user zoom any further than 2x the maximum resolution of the image. This was done using the LINQ library in Silverlight. Note that you also have to take into account the namespace in the Deep Zoom image XML file, which is something for which I haven't seen any examples on the web, but it's part of the project below:

Zooming with Constraints Sample

Note: I didn't include the image in the sample because it's too big (167 megs). When you build and run the app, you won't see the content, though the concepts are all there.