What’s new in Deep Zoom Composer!


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 (45)

  1. Yesterday, we released another update to Deep Zoom Composer, and you can download it for free from the

  2. Yesterday, we released another update to Deep Zoom Composer, and you can download it for free from the

  3. James says:

    These changes are good — the PNG support especially!  Nice work!

    For my company, one of the key aspects of Silverlight 2 that excites us is the ability to create new, rich UIs in such a way that they can integrate with existing J2EE-based back-end services and our existing Solaris-based server infrastructure.  Unfortunately, there does not appear to be an easy way to build deep zoom collections in this setup.

    One thing I’d really like to see is a set of APIs to programmatically create deep zoom collections (both .NET and Java would be nice).  I know there is the SparseImageTool.exe file, but I have a need in which I need to dynamically generate deep zoom collections at runtime.  The kicker is that it must be done from a J2EE-based application running on Solaris…so obviously any solution that relies on Windows-based executable, or having the .NET CLR won’t work.  As an alternative, are there any functional specifications available so that I can build a Java component to get to the same end result?

  4. Mike says:

    I have the same request as James. Can you provide any info on that?

  5. Eric says:

    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!

  6. During the opening keynote at TechEd Orlando last Tuesday, Soma announced the availability of Silverlight

  7. Kirupa (MS) says:

    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 πŸ™‚

  8. I updated a few of my most recent samples to work with the Beta 2 version of Silverlight 2. You can find

  9. VBandi says:

    XML formátum – ez igazából a nem a Composerben új, hanem a DeepZoom-ban – a lényeg

  10. SoulSolutions says:

    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.

  11. jaybo says:

    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:

    1. Are the directory names (dzc_output_files, …) hardwired and will they ever change?

  12. DanCory says:

    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

  13. Kirupa (MS) says:

    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.

    πŸ™‚

  14. Maxime says:

    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

  15. Kirupa (MS) says:

    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

  16. Michael says:

    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.  πŸ™‚

  17. Kirupa (MS) says:

    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 πŸ™‚

  18. Today we covered Deep Zoom, based on Seadragon technology, which allows the users of our Silverlight

  19. Steve says:

    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?

  20. A pochi giorni dalla presentazione ufficiale del plug-in Silverlight 2 vi segnalo la disponibilità online

  21. A pochi giorni dalla presentazione ufficiale del plug-in Silverlight 2 vi segnalo la disponibilità online

  22. kigho says:

    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 .

  23. Hi Kirupa,

    What would be nice is the ability to add more images to a pre-existing collection without regenerating all the tiles! ImageTool.exe works well to incrementally update the dzc_output_images folder so how about a ThumbnailsTool.exe command-line app to generate the dzc_output_files folder given the SparseImageSceneGraph.xml file as input?

    I was thinking of doing it myself but why bother! You guys have the code and it’s just a matter of repackaging it into another command line executable.

    Thanks

    Wilfred Pinto

    http://projectsilverlight.blogspot.com

  24. Orendain says:

    Just picked up Deep Zoom today and got hooked.  I downloaded and installed all the needed stuff.  I made a mistake looking at the old DeepZoom tutorial but kinda figured there must be something new when the Window with 4 options popped up after hitting the "Export" button.  I was happy to see my little test work on the Browser (Preview in Browser) but when I tried the "Edit in Expression Blend" option, I got an error message: Invalid Arguments X The command-in line arguments are not valid: The project "…..DeepZoomOutpot.sln" could not be found."  I thought you stated, "…provides all of the hooks necessary for you to have a working Silverlight 2 Beta 2 application without you doing anything extra."  I promise you I tried to understand how to resolve it.  I tried to look at the other Deep Zoom examples (Kirupa’s MetaData and that Martin Tirion’s Presentation Tool)but being more of a designer with very little knowledge of coding I’m running in to road blocks.  Can you help?  Am I being stupid for using Blend 2.5?  

  25. Hugues says:

    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

  26. Kirupa (MS) says:

    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

  27. Jeyaseelan says:

    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

  28. Sylvain Cachia & Eric Carroll says:

    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

  29. suru83 says:

    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.

  30. Kirupa (MS) says:

    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 πŸ™‚

  31. suru83 says:

    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.

  32. Kirupa (MS) says:

    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.

  33. suru83 says:

    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?

  34. Kirupa (MS) says:

    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

  35. suru83 says:

    πŸ™‚ 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 ..

  36. suru83 says:

    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.

  37. Kirupa (MS) says:

    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 πŸ™‚

  38. Suru83 says:

    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..

  39. Suru83 says:

    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 ..

  40. suru83 says:

    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.

  41. KHappe says:

    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.

  42. jacqi says:

    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?

  43. Kirupa (MS) says:

    jacqi – when you mention the edges are off, can you provide an approximate value for the offset in pixels?

  44. vimal says:

    how to zoom canvas using expression blend?

  45. Mukesh says:

    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.