Share via

What’s new in Deep Zoom Composer!

  • Article

Yesterday, we released another update to Deep Zoom Composer, and you can download it for free from the following location:

dzcicon Download Deep Zoom Composer

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):

image

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:

imageFormatPNG

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:

undoRedo

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:

arrangeIntoGrid

This will allow you to constrain your arrangement by either rows or columns:

arrangeIntoGridWindow

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:

allOfMyImages

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:

taggingSupport

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:

metadataXML

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

Comments

  • Anonymous
    June 07, 2008
    Yesterday, we released another update to Deep Zoom Composer, and you can download it for free from the

  • Anonymous
    June 07, 2008
    Yesterday, we released another update to Deep Zoom Composer, and you can download it for free from the

  • Anonymous
    June 07, 2008
    The comment has been removed

  • Anonymous
    June 08, 2008
    I have the same request as James. Can you provide any info on that?

  • Anonymous
    June 08, 2008
    This version of Deep Zoom Composer seems to export even worse than the first version. Images are not even close to being displayed in the position as composed in Composer. Arranging into a grid makes the pictures display on top of each other. I hope a next version will be released soon!

  • Anonymous
    June 08, 2008
    During the opening keynote at TechEd Orlando last Tuesday, Soma announced the availability of Silverlight

  • Anonymous
    June 08, 2008
    Mike/James - I don't know what the plans are for that, but if I hear anything, I'll be sure to blog about it :) Eric - can you create a small repro and e-mail me your project files to kirupac[at]microsoft.com? Thanks, Kirupa :)

  • Anonymous
    June 08, 2008
    I updated a few of my most recent samples to work with the Beta 2 version of Silverlight 2. You can find

  • Anonymous
    June 08, 2008
    XML formátum - ez igazából a nem a Composerben új, hanem a DeepZoom-ban - a lényeg

  • Anonymous
    June 08, 2008
    Thanks to the new XML format for Deep Zoom I got a Virtual Earth example running. Pretty cool stuff: http://www.soulsolutions.com.au/Default.aspx?tabid=73&EntryID=468 Little video clip and source code. Wish there was a way to get the multiscaleimage to talk directly to the VE tiles. Is there any more information about this? John.

  • Anonymous
    June 09, 2008
    Composer feature requests:  

  1. Provide an option when bringing images onto the composer canvas to not autoscale the images to some random default value.  I need to have the relative scale of multiple images preserved, but it looks like Composer finds the largest image dimension for all images, and then scales all subsequent images to this value when importing onto the canvas.  While this might be the generally desired behavior, there's another large class of usage in which autoscaling is the wrong choice.
  2. Let me assign a transparency value to an image while working with it in composer so I can align images which overlap others.  This wouldn't affect the final output, but only when composing. Question:
  3. Are the directory names (dzc_output_files, ...) hardwired and will they ever change?

  • Anonymous
    June 09, 2008
    Mike/James - The Deep Zoom file format is public, so you can write your own tools that run on any platform to generate the files. See the spec at http://msdn.microsoft.com/en-us/library/cc645077(VS.95).aspx

  • Anonymous
    June 09, 2008
    jaybo - thanks a lot for the feedback! Those are both great suggestions. We will look into supporting Option 1 in our upcoming version, and Option 2 is a bit more complicated, so we may defer that to a later date. The directory names are hard coded, and the main reason is so that they can work with our precompiled XAP file. Since we don't actually compile and build the Silverlight project, we can't change to anything but the hard-coded name. :)

  • Anonymous
    June 15, 2008
    When I export my project, I haven't got any dzc_output_files folder or dzc xml. I only have 2 files in "GeneratedImages" : Metadata.xml and SparseImageSceneGraph.xml. What happened ? :s

  • Anonymous
    June 15, 2008
    What probably happened is that you tried to nest an image very deeply by zooming in a lot. There is a 2 billion virtualized pixel limit in the current version, so when you go beyond that level, the encoder stops working. We will be fixing this in the next version of Deep Zoom Composer where, as you are nearing that limit, you will find out on the design surface itself. Cheers! Kirupa

  • Anonymous
    June 17, 2008
    Is there a location where I can find out how to add a Full Screen button and maybe constrain the pan ability to the edge of the image collection? I can find all sorts of far more complex issues.  I'd be happy just with the full screen button.  :)

  • Anonymous
    June 18, 2008
    Michael - your timing could not have been better! I just wrote an article on getting full screen: http://www.kirupa.com/blend_silverlight/fullscreen.htm I will try to provide more examples addressing the things you mention in the future, so please do let us know of your more complex issues. Cheers! Kirupa :)

  • Anonymous
    June 20, 2008
    Today we covered Deep Zoom, based on Seadragon technology, which allows the users of our Silverlight

  • Anonymous
    June 21, 2008
    I have a need to programmatically add images to the image - ie. think of a map image - then I want to place images on top of it - ie. think of a 'rest stop' image showing where all rest stops are on a map. This is dynamically generated, reading from a datasource of the x,y locations of all rest stops. So - it must be done on the fly.  Each image will need to support clicking on the image to popup a window giving information on that rest stop.   I've done all this on a web page, but I want the deep zoom capability. How would I go about doing all this?

  • Anonymous
    June 22, 2008
    A pochi giorni dalla presentazione ufficiale del plug-in Silverlight 2 vi segnalo la disponibilità online

  • Anonymous
    June 22, 2008
    A pochi giorni dalla presentazione ufficiale del plug-in Silverlight 2 vi segnalo la disponibilità online

  • Anonymous
    June 30, 2008
    SparseImageTool Problem. Hi, I downloaded the beta 2 version of the deepzoom composer and I am trying to use its sparseimagetool.exe utility to generate an image pyramid. the scenegraph file I passed as parameter contains subimages with different ZOrders. The utility produces the .dzi file which I plug to an msi control in code-behind on startup of my web page. However, when I read the subimage.ZIndex property of  the sub images in the msi control, they are all 0. Question :

  1. How do I use the deepzoom composer to generate the .dzi file using the scenegraphfile I created ?
  2. Is there a current bug in the sparseimagetool.exe utility that accounts for this issue ? Thanks for keeping me updated .

  • Anonymous
    July 01, 2008
    The comment has been removed

  • Anonymous
    July 19, 2008
    The comment has been removed

  • Anonymous
    August 15, 2008
    I just downloaded Deep Zoom and started to play with it, great so far ! One issue when exporting is the size of the preview in the generated Html page. It is limited to an area of about 800 x 600. Is there a way to change that so the preview area is full screen ? I read in one article that it is because of the defalt template. can we edit that. hnizer@hotmail.com

  • Anonymous
    August 15, 2008
    Hughes - yes you can! You can open the project in Expression Blend 2.5 June 2008 Preview (http://blogs.msdn.com/expression/archive/2008/06/06/download-expression-blend-2-5-june-2008-preview-and-deep-zoom-composer.aspx) Our documentation for editing the default template is nonexistant (for now), so please feel free to e-mail me directly at kirupac.at.microsoft.com for further assistance. Thanks, Kirupa

  • Anonymous
    October 23, 2008
    When i Zoom  my image without silverlight so the image quality is going bad, does silverlight solve this problem? Does Deepzoom came with Silverligh Beta2.0

  • Anonymous
    November 21, 2008
    Hello, we noticed a bug in deepzoom composer. Here it is : when you change the project directory and try to open your dzprj file, DC updates the <sourcedirectory> and <TreeDirectory> and kills all your <ImageList>. Ugly isn't it? Thank you for all you can do to correct. Bye

  • Anonymous
    July 05, 2009
    Hi, I'm still confused how to get the image tags working in the new version of DZC. The zoom feature on a tagged image is excellent, but still can't figure out how do the tags I add to an image must actually appear when I click on the image.

  • Anonymous
    July 05, 2009
    Suru - the image tags set via the Tag property are not read by the default viewer. Only the Tag Browser template reads them, and you can see what it does (and how it works) here: http://blog.kirupa.com/?p=212 No version of DZC has ever read the image tag values by default, and the latest version only goes so far as providing you with a player that reads them. We are evaluating providing the source files for these templates as well (similar to what you had in the previous releases). Cheers! Kirupa :)

  • Anonymous
    July 05, 2009
    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.

  • Anonymous
    July 05, 2009
    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.

  • Anonymous
    July 05, 2009
    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?

  • Anonymous
    July 05, 2009
    I am not sure where the additional fields he is referring to are coming from. Metadata.xml only contains:  <Image>    <FileName>full path</FileName>    <x>0</x>    <y>0</y>    <Width>1</Width>    <Height>1</Height>    <ZOrder>1</ZOrder>    <Tag />  </Image> 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 :) Cheers! Kirupa

  • Anonymous
    July 05, 2009
    :) 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 ..

  • Anonymous
    July 06, 2009
    Hi, 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.

  • Anonymous
    July 06, 2009
    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. Cheers! Kirupa :)

  • Anonymous
    July 06, 2009
    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..

  • Anonymous
    July 06, 2009
    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 ..

  • Anonymous
    July 08, 2009
    Hi, 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.

  • Anonymous
    July 15, 2009
    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.

  • Anonymous
    July 15, 2009
    The comment has been removed

  • Anonymous
    July 15, 2009
    jacqi - when you mention the edges are off, can you provide an approximate value for the offset in pixels?

  • Anonymous
    April 09, 2010
    how to zoom canvas using expression blend?

  • Anonymous
    January 31, 2012
    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.