The team blog of the Expression Blend and Design
Yesterday, we released another update to Deep Zoom Composer, and you can download it for free from the following location:
In case you are not familiar with this app, Deep Zoom Composer (DZC) allows you take images, arrange them on a design surface, and export them for use with the Deep Zoom technology found in Silverlight 2. You can see a really impressive demo at Hard Rock Cafe’s Memoribilia site where they use Deep Zoom to show you a lot of high-resolution imagery. You can create something similar using your own images with DZC.
This update sports a lot of cool features besides just supporting the Silverlight 2 Beta 2 changes, so for the rest of this post, let’s take a look at these new features.
XML Support One of the big changes we made was replacing the old BIN file formats with an XML-based file format instead (dzc_output.xml):
EDIT: Picture updated on June 9th to refer to correct XML file.
This means that your MultiScaleImage control will no longer work when you set its Source property to a BIN file. It has to be the new XML-based file, but don’t worry, Deep Zoom Composer takes care of those details for you. The project template we export provides all of the hooks necessary for you to have a working Silverlight 2 Beta 2 application without you doing anything extra.
Thanks to Avi Dunn, Lutz Gerhard, Dan Cory, and Radoslav Nickolov of the Live Labs team for making these changes to both the encoder as well as the MultiScaleImage control.
Image Importing Changes, Quality Settings, Transparent PNG Support In previous versions, when you imported an image, we flattened everything down to a JPEG whose quality was 95. While that seems like a pretty good tradeoff, it does not help when you are importing a transparent PNG or a lossless format where quality really matters. In this version, we respect whatever file format your input image is in. If it is a JPEG or PNG, we encode it as a JPEG or PNG on the design surface. If it is some other lossless format, we pick the appropriate lossless format for you.
When exporting, you can now pick between JPEG or PNG, and if you picked JPEG, you have the ability to adjust the image quality:
We are not providing support for image formats beyond PNG and JPEG because we are only supporting the image types Silverlight 2 currently supports.
Undo and Redo You now have the ability to Undo and Redo any action you perform on the artboard:
Use the Edit menu or the standard Ctrl + Z and Ctrl + Y key combinations for performing Undo and Redo respectively.
Simplified Auto-Grid Arrangement To quickly help you arrange your images on the artboard, we introduced some cool snapping and guideline functionality in our previous version. Now, if you want to bypass manual arrangement altogether, you can arrange your images into a grid! Simply select multiple images, right click, and select Arrange into a Grid from the Arrange menu:
This will allow you to constrain your arrangement by either rows or columns:
All that said, the big takeaway is that you now have a very quick and easy way of arranging all of your images into a grid:
While the above example only shows same-sized images being arranged, you can work with images of varying sizes as well.
Support for Tagging When working with collections, having a way to filter your images would be useful. Many of you were modifying your SparseImageSceneGraph XML file by adding extra nodes to represent metadata. To help with this, we are now providing tagging functionality within the UI itself:
Select an image or a group of images, and set the tags you want on them. When you export, we now output an XML file called Metadata that contains your image details, its zorder, as well as any tags you set on it:
This file closely mimics your SparseImageSceneGraph, so you can use Silverlight 2’s support for LINQ to quickly parse the XML data and associate tags with the appropriate images. We will provide an example of how to do that in a future post.
Final Remarks We hope you like these new changes, and if you have any cool features or ideas on what you would like to see in the next version of the app, let us know by commenting below.
Cheers! Celso, Christian, Janete, Kirupa
I totally get how it works through ur explanation at http://blog.kirupa.com/?p=212 , but thats not really what i get out of it. I did try tagging my small image placed on a large image... and the zoom was smooth, but the tag display from metadata.xml is something i'm not clear about. It seems to me we need to code the reading and displaying of these tags.. so I'm working on that..
any cues to help me would be great.
thanks for the posts.
Suru - I think you are mixing up the various output XML files we generate.
If you are referring to reading anything out of metadata.xml, then my blog post outlines what you need to know to read it.
If you are trying to read any other information such as the tooltip, inline navigation, area, etc., then metadata.xml will not help you. There is another XML file we generate called scene.xml, and that conains everything you need.
Scene.xml is the XAML file (saved with the .xml extension) that defines what the player looks like, and inside this XML file, we embed the various metadata as part of the player itself. This is done to ensure the player is self-contained inside a single XAP without any references to an external XML file.
may be ... but i was taking my cues from here : http://msdn.microsoft.com/en-us/magazine/dd943052.aspx
and that code also does everything i want, so i felt it was only metadata that needs to be downloaded and read to display my tags/descriptions of the image. and thats what the code claims to do.. m i wrong?
I am not sure where the additional fields he is referring to are coming from. Metadata.xml only contains:
What he may be doing is adding his own nodes to metadata.xml after Deep Zoom Composer exports them. That is a valid way of adding more filters than just what the Tag value provides :)
:) still thats not my answer yet..
simply adding data/descriptions to the <tag> in metadata.xml is not displaying it on the browser. the same link has code for the purpose,
i.e. downloading and reading xml..(i do not really know if there another way to achieve it) altogether, I'm still not able to get it working ..
thanks for holding patience with me with all my Qs :)
I seek 1 more advise from you.. about the visibility limit feature in this new version of DZC.. i was unable to find anything about it on google too.
Is there any way I can get some guidance on how those parameters can be set..
I would be a great help.
Hello again Suru. This is a brand new feature that others haven't really done programmatically or manually in earlier versions of DZC.
In a nutshell, this feature allows for something known as semantic zooming. For example, you can have two images overlaid on top of each other. By default in Deep Zoom, only the top-most image would appear.
What you can do with the Visbility features is toggle at which zoom ranges the images would be visible or invisible. This means you can say that initially the bottom image would be visible, but once you start to zoom in, the top image will be visible instead.
The easiest way to currently use this feature is to right-click on an image, and from the menu that appears, go to Set Visibility Limits | Set as Minimum or Set as Maximum.
If you set something as the Maximum, your image will be visible at only that zoom level and higher, and if you set something as the Minimum, your image will be visible at that zoom level and lower.
There are some bug fixes we made to better handle image tiles at certain zoom factors, so you may see some ghosting of tiles.
thats a good feature m sure..
if i set a visibility limit as minimum for one of the images...on trying to export the option to export as collection grays out?.. :( is it supposed to be so..?
and I'm not sure what are parameters to be put in the min/max fields of visibility limits..
for eg. I put the visibility limit for min as 1, what will this mean..
say if i have to make an image visible only at the lowest zoom level or even set this max zoom level... please tell me how is it done.
looks to me the user guide does not mention this feature yet ..
I'm sorry but I'm facing a lot of issues while using DZC.. i dont know if they are bugs. It works fine with one png image that has transparent background, but i add another such image ..it is invisible on the board or even later.. only the outline is identified.. what could be the issue here?
also I tried adding about 5 more images on the board with different visibility limits for them.. the output was almost zero. there was no action at all on my webpage on exporting.
Im using version 0.9.000.9 and I am having a lot of issues with it. It crashed on a regular basis. In composing mode the tile level control on the right is miss-behaving a lot. It keeps cycling through each tile.
I just down loaded it yesterday, and I have a giant painting and some high res images that i am tying to fit onto it by combining the High Res with a portion of the background. They appear to be lined up and matching when in Compose, but when i Export it, the edges are off. Any suggestions?
jacqi - when you mention the edges are off, can you provide an approximate value for the offset in pixels?
how to zoom canvas using expression blend?
Is there any sample code that creates Metadata.XML,Scene.XML and SparseImageSceneGraph.XML programmatically? I am able to create the image collection using deepzoom API along with Output.XMl but need help to come up with relevant other XML files.