The team blog of the Expression Blend and Design
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:
Your browser does not support inline frames or is currently configured not to display inline frames.
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:
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.
- Kirupa (Expression Blend)
- Lutz Gerhard (Live Labs)
Up until now, all of the Deep Zoom samples we’ve shown in this blog were of single high-resolutions
Thanks! Now I can finish my project...
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?
John - great suggestion. We'll look into that for our next example...using metadata to sort your collections :)
Michael Sync on User Control Inheritance, Expression Team provides DeepZoom collection example, Pete
@Kirupa: I second that: I want metadata!
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...
1. 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?)
2. 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?)
3. 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%?)
4. 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!
I agree, the MultiScaleImage control is very cool, but there does seem to be some limiting aspects of it. It would be great for the SL2 release to expose Add/Remove methods on the subimage collection so that we don't have to work with all images at once and use opacity tricks. This should improve the perf issues as well. It would also be wonderful to have an AutoArrange property that could work similarly to a stack panel (maybe 3 options: static/horizontal/vertical). Oooh and databinding support! I know I'm dreaming... ;)
Oh, and one other thing I've noticed: when a MSI control is resized larger at runtime the appropriate events are fired, but not when it is resized smaller. Is this on purpose or a bug?
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!)
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.
I am using 1 storyboard with 11,000 photos and not getting good results...all the DoubleAnimation and PointAnimation objects are being created, added to the storyboard and targeted before they are used (ie in ImageOpenSucceeded)...then are reused each time, although the first time it is run it shows bad results anyways (so not an issue with lots of items getting added to the graph)...extending the duration of the animation results in similar choppy results...I have an ati x1650
The 11,000 pointanimations/double animations seems to be the problem...is there anyway to create one of each and apply it to a group of items (it won't look as cool as the hardrock demo since they will all move as a group, rather than individually)...
Totally agree about being able to make subgroups (aka views) and then "auto-arrange"...very useful for collections...
Also, not sure if everyone has taken a look at the command line tools (sparseimagetool)...I found it almost by accident when I was trying to figure out how to not manually have to make my collections :-)
It also appears that zipping 1,100,000 files is going to take about 4 hours....but I'm looking forward to getting this on a server with some upstream bandwidth :-)
Also wondering if there is a way to "add" new images to a collection....from the perspective that it took 12 hours to generate mine from 11,000 images....if I add a new image do I have to regenerate all 11,000 images, will the bin file be in sync still?
George, Let us know when it's up on a server. I would love to see if my laptop can render the images!
Wow George, that's awesome :) How did you actually compile those images? Don't tell me you used that pesky Composer....
The command line tool (sparseimagetool.exe) is included with the composer...you can run it from the command line and get information on how to use it...I just created a sparseimagescenegraph.xml file (if you need help on how to make this file, open the ones that are created by the composer) and told it to export to an sdc file (if the extension is wrong it doesn't seem to export)...
If you run it as follows you get a nice little interface with options on how to export:
I'm still trying to figure out what some of the command line options do....some more information about what the compression feature does and the single file vs. exploded does would be nice. (I wonder if that would fix my 1.1 million file problem)...something to try out...