KIRUPA.CHINNATHAMBI

In the previous post, I started talking about some of the collection-related improvements we made in Deep Zoom Composer. The crux of that post was describing how you can defer to the Silverlight application the task of arranging and positioning your images.

Deep Zoom Composer ships with one basic template, based on my earlier Tag Browser, that handles simple arrangement of like-sized images during runtime. Of course, there are many more things that you may want to do beyond just having items be arranged in a grid. You may want to arrange them circularly. You may even choose to go scattershot like one of the layouts you have in DeepZoomPix:

Beyond just the layout of the images, you have access to several pieces of metadata in the scene.xml and metadata.xml files!

Essentially, there are a lot of things that you can do that our default templates simply do not expose in Deep Zoom Composer (DZC). To help solve that problem, we made the process of selecting a template from within DZC extensible:

While we currently ship with three templates, you can easily add your own. This post will describe briefly the two types of templates you can add.

Template Without Source Files/Project
To simply provide your own template, all you need is an HTML file named test.html and the corresponding XAP that is used to display your Deep Zoom images. Your Deep Zoom Images will be in GeneratedImages/dzc_output.xml relative to your XAP.

Note: The test.html file needs to have the appropriate tags to actually display the XAP file.

Once you have your HTML file and XAP file, you will have to find the Deep Zoom Composer installation directory. By default, that is found under Program Files/Microsoft Expression/Deep Zoom Composer. Once there, find the folder named Export Templates. You will see three folders whose name matches the name of the templates you see in the above screenshot:

In this location, add a new folder whose name will be what you want to have showing up inside the templates drop-down in DZC. I am going to name my folder Kirupa’s Template:

Once I have created this folder, I simply paste my HTML file named test.html and corresponding XAP file into it.

After doing all of this, if I restart Deep Zoom Composer, switch to the Custom tab under Export, and expand the templates drop-down menu, notice that Kirupa’s Template now appears:

When you export with your chosen template, your HTML file and XAP will be copied along with the GeneratedImages folder that contains the various XML files and Deep Zoom image tiles:

If you find yourself stuck, you can always look at how the Tag Browser and Default templates inside your Export Templates are laid out.

Template With Source Files/Project
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.

For those cases, an HTML file and XAP file are grossly inadequate. What you need to be able to provide is both the HTML file and XAP along with the source files associated with it. To add your custom template that includes source files, the steps are a little similar to the general XAP + HTML case. What is different is what DZC expects in terms of folder names and project locations.

Note: For reference, look at how the project under Deep Zoom Classic + Source are laid out.

Inside your Export Templates folder, create a folder whose name is what you want your template to be known as.

Next, create a new Silverlight project using Expression Blend 3 named DeepZoomProject, this solution and folder structure is created for you. When you build your application, you will basically see the following structure:

If you compare this directory with what you see in your Deep Zoom Classic + Source folder, you will see that almost everything is identical:

The only thing that is missing in what you created in Blend and what DZC expects is a GeneratedImages folder in your ClientBin directory living alongside your XAP. You can add this folder easily using Blend 3 by right-clicking on the ClientBin folder and selecting Add New Folder:

All that is left after you add your new folder is to rename it to GeneratedImages to make DZC happy:

Once you have your project done, just copy and paste your DeepZoomProject Solution file, the DeepZoomProject folder, and the DeepZoomProjectSite folder into the folder you created under DZC’s Export Templates directory. The folder you paste your source files into must contain the word Source as part of its name. For example, my folder is called Kirupa’s Template + Source:

Conclusion
This post wraps up my coverage of the new Export-related features we now have inside Deep Zoom Composer. Hopefully this post and the previous post help you create the really nice Deep Zoom collections and visuals that you had always wanted to do easily.

Cheers!
Kirupa