Crossfading + Viewpoint Preservation for switching between DZIs

  • 1
  • Idea
  • Updated 11 years ago
  • Under Consideration
What is occurring, everybody?

I was just now thinking that it would be very cool to be able to crossfade between two DZIs. The use case that I was thinking of is where you have two or more identically sized images and switching between them would not reset your viewer's coordinates (if you are zoomed in 43%, centred 64% of the way across the image and 14% from the top, you load the new DZI at those same coord.s). Specifically, I am thinking of NASA's Blue Marble Next Generation topographic and bathymetric composites.

They have 36 months available for view and it would be very interesting to be able to fade between one month and another to see how the same month in two different years compare or how things change from one month to the next but there is currently no continuity. There is, of course, the option of downloading their lower resolution composites and viewing them as a slideshow via a photo program of your choice, but it is not remotely the same as being able to flip between any two months non-linearly at the highest available resolution.

(They offer 5400 x 2700, 21600 x 10800, and 8 tiles that add up to 86400 x 43200 [if you compile them yourself] versions in both jpg and png formats.)

Also, it would be nice if Seadragon could buffer up the tiles for the current view before fading the new image into visibility. As fast as Seadragon is, limited or no caching hurts the value of flipping between two images.

I'm not necessarily thinking that this is a must for, but rather Seadragon embeds for the web in general.

What do you think? Is this a feature that you would value or do you think it's too much of an edge case? What other uses do you see this having besides flipping back and forth between different months of satellite imagery?
Photo of Nathanael Lawrence

Nathanael Lawrence

  • 795 Posts
  • 55 Reply Likes
  • turning it all over...

Posted 11 years ago

  • 1
Photo of Bill Crow

Bill Crow, Seadragon Group Manager

  • 100 Posts
  • 38 Reply Likes
This is straightforward to implement using (Seadragon-powered) Silverlight Deep Zoom. Multiple images can be encoded as a collection of Deep Zoom Images (DZI's.) This is known as a Deep Zoom Collection (DZC).

Silverlight Deep Zoom is designed to manage collections of images that can be smoothly and independently animated, including the ability to seamlessly fade in and out.

Seadragon Ajax offers only a subset of the capabilities provided by Silverlight Deep Zoom. Most notably, Seadragon Ajax ony handles single images (DZI's) not image collections (DZC's.)

Bill Crow
Seadragon Group Manager
Microsoft Live Labs
Photo of Nathanael Lawrence

Nathanael Lawrence

  • 795 Posts
  • 55 Reply Likes
Thanks, Bill. I guess I haven't explored collections enough to have come across the ability to fade between two images on cue.

Are you aware of anyone who has implemented something like this? (not necessarily with maps) I'm familiar with layering images in collections to create compositions and the dynamic album type scenario that Hard Rock Café uses but haven't seen anyone using collections to perform in-place image swapping.

It just seems like even without collection support in Seadragon Ajax, the Seajax gallery on the front page of as well as the original Seadragon page are 99% of the way to what I'm thinking of. There would still only be essentially one image in the viewer at a time, other than the fade itself. I just assumed that the current view of the current image could be captured and held as a proxy while the tiles from the new image were loaded to fade to. Not possible?

In the mean time, should I be looking for options inside Deep Zoom Composer or looking for someone who knows what they're doing inside of Visual Studio to manipulate a standard DZC?
Photo of Aseem Kishore

Aseem Kishore, Former Employee

  • 702 Posts
  • 124 Reply Likes
Nathanael, this is a great idea. You can do this today with Seadragon Ajax except for the buffering part. That can indeed make a big difference in experience, so suggestion noted!

To remember the current viewport, just use the Viewport's getCenter() and getZoom() methods. After you switch images, start at those spots immediately by calling panTo() and zoomTo() with those values (specifying true for the immediately flag).