Improved Collection Support in Deep Zoom Composer
July 14th, 2009 | View Comments
A couple of days ago, we released another version of Deep Zoom Composer. One of the major changes we made revolved around dealing with large collections of images, and this was something that Deep Zoom Composer never handled particularly well in the past.
Some Background
As you may know, Deep Zoom Composer allows you to import your images, arrange them in whatever fashion you like, and even add some cool interactions and navigation. My fellow Expression Blend colleague, office mate, and co-conspirator on Deep Zoom Composer, Janete Perez, wrote extensively about those features in her series of posts here, here, and also here.
Manually composing your layout is great for a moderate number of images, but once you cross into hundreds if not thousands of images, the workflow does not scale. Manually arranging that many images will not be fun, and it probably isn’t even what you want to really do.
When you are dealing with large quantities of images, more than likely, what you want to do is have your Silverlight application take care of arranging and positioning your content at runtime instead such as what this example highlights. This on-the-fly positioning and arranging is what most of the popular Deep Zoom examples such as Hard Rock Cafe do as well.
Deep Zoom Composer, with our recent release, now plays two roles. The first role is the one it always played. It still allows you to import your images, arrange them on the artboard, and export them:
The second role is something that is new. You still import your images. That has not changed. What is new is that you no longer have to compose your images. You can just import your images, skip the compose step altogether, and go straight to exporting:
This means that you can safely import hundreds (if not more!) images and seamlessly export them.
Using the New Features
Once you have imported your images, go straight to your Export view:
From the Export view, click on the Custom tab to go to see our more advanced Export options. Make sure you are exporting a Silverlight Deep Zoom output, give your project a name, and ensure the Export as a collection option is selected by default if it hasn’t already been selected for you.
The next step is crucial. You need to pick a project template that supports rearranging on the fly inside your browser. Currently, the only template that does that is the Tag Browser. Click on the drop-down that says Default and select the Tag Browser entry:
Your Custom tab’s various options and selections should look like the following:
Hit the Export tab to generate the Deep Zoom image tiles and associate them with the Tag Browser template that you selected. After a few moments your Export Completed dialog will appear:
Click on the Preview in Browser button to launch your browser and to see how everything looks. You will see that the images you imported automatically appear in a grid:
Notice that the Tag browser actually allows you to filter by tags. Wouldn’t it be cool if Deep Zoom Composer allowed you to do all of this as well…?
Tagging your Images
Programmatically laying your images out is cool, but being able to filter what images you see based on the tag is even cooler. To be able to do this, you will have to venture into your Compose view. In the Compose View, you will see all of your currently imported images laid out horizontally at the bottom of your screen along with a list of the properties on each image you can view or set:
You can select one or multiples images from this list and add the Tag that you want in the Properties panel you see on the bottom-right:
When working with lots of images, though, the tiny panel you are viewing all of your images may not be very helpful. You can maximize this panel by clicking on the up-arrow found on the top-right corner of the panel itself:
Once you click on that button, notice that your entire Compose view is nothing more than your list of imported images and the properties you can view or set on them:
This maximized view optimizes Deep Zoom Composer for doing nothing but pure Collection exporting with the option of tagging your images.
If you export again, using the same selections that you had before, notice that the Tag Browser now displays any tags you may have displayed with the option of clicking on a tag and viewing only the images associated with that tag:
Hopefully you find this feature as much fun to use as it was for us to implement it. You can always use Deep Zoom Composer to manually arrange and position your images, but if want to not deal with that and have your images arranged and positioned on the fly, you can now do that as well.
As you can tell, this post got pretty long, and there are a few more features that I will describe in a future posting. To give you a heads-up, the templates you see when exporting as a Collection, such as Tag Browser, are extensible. You can add your own custom templates and have it be something you can select directly from within Deep Zoom Composer.
Stay tuned to learn more about that.
Cheers!
Kirupa 
July 15th, 2009 at 6:37 am
How are you supporting multiple tags? Spaces? Commas, Semi-colons? and can one escape the seperator letter \”?
July 15th, 2009 at 12:00 pm
Hi Dr. G – that depends entirely on the template you are using. You can separate them using whatever character you want. I am not sure what approach Tag Browser is using.
Proper tagging support isn’t something we will have time for in this version of Deep Zoom Composer, so our current approach is to store all tags on an image as a single string. You can see that by opening metadata.xml in Notepad and seeing that we only have one Tag node despite having multiple delimited tags.
Cheers!
Kirupa
July 17th, 2009 at 9:51 am
Hi Kirupa – Could you say a bit more about what you mean by large collections of images? Would the new version be able to handle potentially thousands of images (as in the FractLOL)?
Thank you!,
Rob
July 17th, 2009 at 10:54 am
Hi Rob – while the most I’ve tried actually on the composition surface is around 500, we’ve made significant improvements in memory usage where it may be possible for 1000 images.
We are able to support 1000 images when you simply import them and use them outside of the Compose tab as shown in this post.
BTW – I am a huge fan of LOLCats and your implementation in particular
Cheers!
Kirupa
July 19th, 2009 at 1:23 am
[...] the previous post, I started talking about some of the collection-related improvements we made in Deep Zoom Composer. [...]
November 26th, 2010 at 2:02 am
nice blog
November 30th, 2010 at 8:17 am
I realy like this innovative angle that you have on the subject. I wasnt thinking on this at the time I started searching for tips. Your ideas were totally simple to understand. Im glad to find that there’s an person here that obviously understands precise what its is talking about.
December 5th, 2010 at 3:24 am
Thanks, thats quite useful to know! I must admit to being a bit useless in the kitchen, but I’m trying my best to learn. Admitting is the first step to recovery right!!? I promised to cook something for my wife this weekend for the first time – very exciting! I found some simple recipe at this site, seems to be designed exactly for people like me, which is perfect! Anyway, thanks, I’ll be sure to bookmark this site to read more later.
February 23rd, 2011 at 7:08 am
In the previous section, I explained how to add your own custom template with just an HTML and XAP file. There will be cases where what you want to use involves source files. For example, you may create a generic template that does something really cool with the various metadata files we generate. The actual look of the application is something that you would want a more technically/design savvy end-user to modify instead.
March 8th, 2011 at 10:22 am
Wonderful learn, I simply handed this onto a colleague who was doing some research on that. And he actually purchased me lunch because I discovered it for him smile So let me rephrase that: Thanks for lunch! Anyway, in my language, there should not much good source like this.
March 9th, 2011 at 2:59 am
Please inform me it labored proper? I dont need to sumit it again if i shouldn’t have to! Both the weblog glitced out or i’m an fool, the second possibility doesnt surprise me lol. thanks for an excellent weblog! Anyway, in my language, there aren’t a lot good source like this.
March 9th, 2011 at 1:23 am
Great goods from you, man. I have understand your stuff previous to and you are just too wonderful. I actually like what you have acquired here, certainly like what you are saying and the way in which you say it. You make it enjoyable and you still take care of to keep it smart. I cant wait to read far more from you. This is really a great site.
May 3rd, 2011 at 8:19 am
Hi, i learn your text link blog often and that i personal an text link identical one and i was text link simply questioning if you get numerous spam comments? If that’s the case how do you forestall it, any plugin or something you may recommend? text link I am getting so much lately it is text link driving me mad so any help is very a lot appreciated. text link Anyway, in my language, there will not be a lot good supply like this.
May 8th, 2011 at 4:17 pm
Nice post. I study one thing more challenging on completely different blogs everyday. It would at all times be stimulating to learn content material from different writers and apply a little bit one thing from their store. I’d desire to use some with the content on my weblog whether you don’t mind. Natually I’ll provide you with a link on your net blog. Thanks for sharing.
May 11th, 2011 at 6:34 pm
Fantastic article. I have been wanting to fully understand this subject matter and be able to teach some others. I think you have great ideas here having proven results. My own question is: Is there a strategy to really get your tips here in the form of an ebook? Do you have a ebook written on this theme? The reason why I’m asking is that I don’t possess constant access to the net. Therefore, a book would really help me to get consultation even when there’s no access to the internet.
July 17th, 2011 at 12:29 am
Good Afternoon, great topic I have just liked your facebook
July 22nd, 2011 at 10:26 pm
Thank you for sharing superb informations. Your website is very cool. I am impressed by the details that you have on this site. It reveals how nicely you perceive this subject. Bookmarked this web page, will come back for more articles. You, my friend, ROCK! I found simply the info I already searched everywhere and just couldn’t come across. What a perfect web-site.
August 14th, 2011 at 3:41 am
Proper tagging support isn’t something we will have time for in this version of Deep Zoom Composer, so our current approach is to store all tags on an image as a single string.
September 6th, 2011 at 8:40 am
There are several attentiongrabbing cutoff appointments on this page nonetheless I am not sure basically look at these people coronary heart to help soul. There may be a few quality nevertheless I will get keep judgment right until My spouse and i explore this additionally. Fine posting , with thanks and we need more! Added to FeedBurner while very well
September 11th, 2011 at 1:03 am
I agree with your kirupaBlog – If it isn’t broken, take it apart and fix it! » Blog Archive » Improved Collection Support in Deep Zoom Composer, superb post.
September 30th, 2011 at 9:51 am
This is really attention-grabbing, You are an excessively skilled blogger. I have joined your feed and sit up for in search of more of your great post. Additionally, I have shared your web site in my social networks
October 8th, 2011 at 1:20 am
Wow! This blog is cool! Hey, when you have the new era caps chance, check my blog out and tell me what you think! Its a company i am starting and i want an new era hats opinion. If you like what you see, please follow me!
http://www.toplacosteshoes.com
October 27th, 2011 at 6:40 am
Good job. I think it is really important post. Thank for posting the important topics.