Deep Zoom Collections Example
Up until now, all of the Deep Zoom samples we’ve shown in this blog were of single high-resolutions images. This is the case where you arrange all of your images on the artboard, and during export, flatten everything into a large image before breaking them up into the various tiles. This is actually the default behavior of the Deep Zoom Composer and is done transparently in the background while you export. Single high-resolution images are great, but if you wanted to do more with your images such as programmatically move individual images around or filter your images (similar to the Hard Rock Cafe Memorabilia site), the single high-resolution image is not ideal. That is where the Collections feature of Deep Zoom comes in.
With collections, instead of flattening your entire composition into one image before generating your image tree, you actually generate an image tree for each image in your project. This is almost like generating a single high-resolution image for each image you use. The details are not that important. What is important is that this allows you to control each image individually while still retaining the layered zooming and fading effects that Deep Zoom is really known for.
Instead of just describing collections using text, below you’ll find an example that showcases these features instead:
Click on the Randomize Images button to arrange your initial layout into a grid. Keep clicking on Randomize Images to continue randomly swapping your images while still staying within this grid.
If you are curious to see how the above example was created, below I’ve posted a sample project (make sure you have the Silverlight 2 Tools Beta 1 installed) that contains everything you will need:
 |
Download Sample |
As you can see, this is really cool, and best of all, you already have everything at your fingertips to create collections using the Deep Zoom Composer itself. In a Deep Zoom Composer project, from the Export workspace, check the “Create Collection” checkbox, and your output is properly adjusted for collections:
The source files provided earlier contain both the C# Silverlight 2 project as well as the Web Site project where your images are stored. Take a look at the Page.xaml file to see the extra Grid/Column info I added for our MultiScaleimage to ensure our Collections will display initially, and if you are curious to know how the rearranging animation was done, take a gander at the Page.xaml.cs as well.
In case I never explicitly mentioned it, feel free to reuse and modify any of the source files I’ve posted into your own (hopefully cooler!) examples.
Cheers!
- Kirupa (Expression Blend)
- Lutz Gerhard (Live Labs)
Comments
Anonymous
March 22, 2008
The comment has been removedAnonymous
March 22, 2008
The comment has been removedAnonymous
March 23, 2008
Thanks! Now I can finish my project...Anonymous
March 23, 2008
Awesome guys. I have updated my little sample integrating this and the keyboard events. I do like the mouse click / mouse shift click to zoom in and out. So the next question is how do we add metadata or link to a database record for the images so we can filter / sort and show additional information? http://www.soulsolutions.com.au/Blog/tabid/73/EntryID/410/Default.aspx John.Anonymous
March 23, 2008
John - great suggestion. We'll look into that for our next example...using metadata to sort your collections :) Cheers! KirupaAnonymous
March 24, 2008
Michael Sync on User Control Inheritance, Expression Team provides DeepZoom collection example, PeteAnonymous
March 24, 2008
@Kirupa: I second that: I want metadata!Anonymous
March 25, 2008
Hi, I've got some question about performance...I spent the weekend making a collection of images...11,000 to be exact (only took about 12 hours of processing)...we used the built in vista photo tagging and made them searchable (using LINQ, since there is no dataset support in silverlight)... There were a number of issues I had with the performance, I'm wondering if you have any suggestions...
- The directories that are created have a lot of files/folders (1,100,000 files, 100,000+ folders, 6+ gigs)....they take a lot of time to move around (vista sp1, perhaps due to ntfs?) Is there a way to group them in one file (cab/zip, or some other file that is easy to move around?)
- We tried to do similar effects as the hardrock demo (translate/opacity animations)...is there a way to do this on 10,000+ images in a performant way? Right now we're moving them all to a place off screen and fading at the same time (ie -100,-100)...the storyboard doesn't animate smoothly, it ends up being a little jerky (does deepzoom use hardware acceleration?)
- If once we have a lot of 0% opacity images at -100,-100 we then scroll to that location, the interface becomes very slow/jerky (is there a way to set visibility for the images after the opacity is 0%?)
- The program loads quickly and runs well (scrolling/zooming, above issues not withstanding)...but closing IE becomes a big issue (we're seeing 300+megs of ram usage, and closing IE causes problems).... All that said, this stuff is great! We're looking forward to being able to do alot of great things with it!
Anonymous
March 25, 2008
The comment has been removedAnonymous
March 25, 2008
Nice... The other cool thing would be to arrange the images in a grid where the height of all images in a row is the same but can change across rows, much like the Hard Rock site. I have an algorithm for this on my site, http://projectsilverlight.blogspot.com, and will try to put up some sample code snippets soon (unless you guys beat me to it!)Anonymous
March 25, 2008
I noticed that the animation code adds the storyboard to the resources but never really cleans up after it. It could be done in the Storyboard.Completed event - msi.Resources.Remove(sender). Would it be more efficient to create a single storyboard for all the images by adding the animation of each image as a child to the storyboard? I noticed that you were creating a separate storyboard for each image and hence was wondering if there is any performance/resource implications by taking the alternate approach. I understand that this is just sample code but thought that I would point this out in case there are folks applying this logic as is to a large number of images. Wilfred http://projectsilverlight.blogspot.comAnonymous
March 25, 2008
The comment has been removedAnonymous
March 25, 2008
George, Let us know when it's up on a server. I would love to see if my laptop can render the images!Anonymous
March 26, 2008
Wow George, that's awesome :) How did you actually compile those images? Don't tell me you used that pesky Composer....Anonymous
March 26, 2008
The comment has been removedAnonymous
March 26, 2008
Nice find, George. Thanks for sharing! I just tried the 'Use Compression' feature and the only thing it does is reduce the size of the items.bin file. Can't imagine how this would improve performance...Anonymous
March 26, 2008
Karupa, thank you very much for filling my request for this example. This is exactly what I needed to move forward. This looks eerily like the new egg site... Nice. I third the request for linq'ed metadata, and I agree that filtering should be included with an added bonus of removing images from the collection (i.e. filtering result sets with deep zoom images based off of linq metadata). I think that would tackle all of these questions, and shouldn't be hard to do. Thanks again Seadragon team!!! AaronEAnonymous
March 26, 2008
George - I contacted a few colleagues about your question, so they may be able to help you out further :) Aaron - I'll add to my list of next things to tackle.Anonymous
March 28, 2008
A week has passed, no metadata still? Are we expected to use the ZOrder property to store id's?Anonymous
March 28, 2008
You could always parse the SceneGraph XML file that gets exported, add the metadata node and text, and use LINQ to parse this info on an as needed basis. That's not the most ideal way of doing it, but it should get you started :PAnonymous
March 29, 2008
@Kirupa: Problem: How do I "link" with the scenegraph? I mean, when a single MultiScaleSubImage is clicked, how do I "identify" it? I do need some kind of ID, right?Anonymous
March 29, 2008
Basic problem here is that there is absolutely NO documentation for the MultiscaleImage Control. Or am I missing something?Anonymous
March 29, 2008
I have rewritten the code sample into VB version http://impressionsoft.blogspot.com/2008/03/silverlight-deepzoom-part-2.htmlAnonymous
March 31, 2008
Bug in MultiScaleImage? Couple of issues:
- Getting in and out of full screen mode is problematic. The MultiScaleImage control retains the size of the full screen mode even after it comes out of full screen. Is this a bug or am I doing something wrong? I can elaborate if required. An example of this can be found here: http://projectsilverlight.blogspot.com/2008/03/dissecting-hard-rock-memorabilia-and_31.html
- Setting the Source property of the MultiScaleImage control programatically works fine the first time. Subsequent setting of this property renders the image but the collection is not accessible. If you look at SubImages.Count you will notice that it still retains the subimages count of the old source. I am trying to figure out if I am doing something wrong or if this is the way the current MultiScaleImage behaves. An answer would be much appreciated.
Anonymous
March 31, 2008
yuvipanda, It seems like the best way to store metadata information for each image is to have an alternate data structure (could be xml as well) and link the 2 (ie. the alternate data structure and the mutiscaleimage.subimages) using the SubImages index. The starting point for the alternate data structure could be the SceneGraph XML file, as Kirupa mentioned. I am planning to put up a filter sample soon, but in the meantime, if you want to find out which image is clicked, you can check out my post: http://projectsilverlight.blogspot.com/2008/03/dissecting-hard-rock-memorabilia-and_8725.html. The code snippet provided there will return an index into MultiScaleImage.SubImages which could be used to index into the alternate data structure as well.Anonymous
April 01, 2008
@Wilfred Pinto: Thanks! Never thought of that :)Anonymous
April 01, 2008
Deep Zoom with filter feature (using Linq) is now available at http://projectsilverlight.blogspot.com/2008/04/dissecting-hard-rock-memorabilia-and.htmlAnonymous
April 17, 2008
My most favorite SeaDragon demo is now available via Silverlight DeepZoom. The demo features a “fake”Anonymous
April 17, 2008
My most favorite SeaDragon demo is now available via Silverlight DeepZoom. The demo features a “fake”Anonymous
April 21, 2008
If you want to learn what is Silverlight , WPF , Photosynth, Popfly, DeepZoom (SeaDragon) Why to go andAnonymous
April 28, 2008
thanks for the link for the exampleAnonymous
June 22, 2008
Will you be updating this example to beta 2?Anonymous
August 28, 2008
I'm very interested to see this work in Beta 2 as well. I downloaded the source and tinkered with it a bit, but unfortunately I'm not familiar enough with Silverlight to fix all of the errors that it has. It would be monumentally helpful if you could update this example! :)Anonymous
August 28, 2008
Zazie - I can try to have it updated soon and have it posted here. Many of the ideas in this have been extended and used here: http://blog.kirupa.com/?p=212 The above example does work in Beta 2, and I have provided the source files for you or anyone to see and modify. :)Anonymous
January 19, 2009
Deep zoom composer is really cool!Anonymous
February 26, 2010
don't upload file that doesn't work...it's uselessAnonymous
February 26, 2010
Kam - this example is something I'll need to update in the future, but you can see a working example + source code here: http://blog.kirupa.com/?p=212 Cheers, Kirupa =)