Deep Zoom Composer – Filtering by Tag Sample

One of my side projects on the Expression Blend team is working on Deep Zoom Composerour most recent release is the ability to tag your images. You can select an image (or a group of images) and specify several tags that you want associated with your selection. The earlier link describes that process in slightly more detail. (DZC), a small application for allowing you to create Deep Zoom content. A cool feature we released in

To summarize our tagging functionality, when you export, DZC generates a file called Metadata.xml and places it in your GeneratedImages folder along with all of your image tiles and dzc_output.xml file.This Metadata.xml file contains information on each image, its X and Y position, the Tag values, and the ZOrder.

Because of time constraints, though, we didn’t do anything inside DZC besides exporting this XML file. There was no way for you to associate your metadata with each image and do some interesting things without writing code.

To help you use this Metadata functionality, I wrote a small Silverlight 2 app that I am calling the Deep Zoom Tag Browser:

You can see a demo of it working by clicking the above screenshot or clicking here. In case you are not familiar with Deep Zoom, you can use your mouse to pan the images around, the mouse wheel to zoom in/out, or if you do not have access to a mouse wheel, Click and Shift+Click will allow you to zoom in and out as well.

Using The Tag Browser with your own Deep Zoom Composer Projects If you would like to use this functionality inside your own projects, it is pretty easy. First, download and extract the source files for my Deep Zoom Tag Browser by clicking the download link below:

---

Download Tag Browser Source (Visual Studio 2008)

---

Once you have downloaded and extracted the files, open the solution in Visual Studio 2008 (make sure you have the Silverlight Tools installed). You will see two projects inside it – a Silverlight 2 project and a Web Site project. Expand your Web Site project until you reach your ClientBin folder:

Inside your ClientBin folder, create a new folder called GeneratedImages. Make sure you a Windows Explorer instance showing you the the XML files and image tile folders generated by Deep Zoom Composer:

Select all of these files and folders and drag/drop them into your GeneratedImages folder in Visual Studio. This will take a good minute or two since there are many files that need to be copied over. You will see a handy progress dialog informing you of the progress:

Once all of the files have been imported into your GeneratedImages folder, you should see confirmation of that in your Solution Explorer:

Now comes the easy part. Press F6 to build your project. You should not be seeing any errors! Right click on DeepZoomMetadataTestPage.html in your Web Site project and select View in Browser:

Once you have done that, a web server instance will be fired up and your browser will display your new images and metadata files associated with it.

A major limitation in the current version is that if you have multiple tags separated by commas, the application doesn’t break them up and allow you to filter by them. It associated all tags with an image as one entity. That means, your images can only have one tag associated with them.

Don’t worry – I will fix that shortly.

Posted by kirupa