Question

I’m trying to sort through a collection of DeepZoom sub-images based on arbitrary data associated with each image. The sub-images get loaded automagically through an XML file generated by DeepZoom Composer. I don’t see a clear way to associate arbitrary data with a DeepZoom sub-image.

The solutions that seem most obvious to me are brittle and don’t scale well. Ideally, I’d like to put the relevant data in the generated XML file, but I’d lose that information on the next set of generated images.

Is there a well-established way of accomplishing this goal?

Answer 1

As you’ve noticed DeepZoomComposer supports a <Tag></Tag> element which you can use in your Silverlight MultiScaleImage control (filtering by tag example).

You are also right that you would ‘lose’ any information you add to the XML file when you edit in DeepZoomComposer and re-generate (however you don’t lose it if you typed into DeepZoomComposer).

To get around this problem, I’ve written a little console application called TagUpdater — basically it works like this:

1. You put your metadata IN THE IMAGES: JPG file format supports lots of different fields, but for now let’s use Title, Keywords (tags), Description and Rating

2. You add your images to Microsoft’s DeepZoomComposer (don’t necessarily bother laying them out, since you will probably want to sort them dynamically; and don’t bother entering any metadata) and Export as normal

3. Call TagUpdater.exe Metadata.xml via the console (DeepZoomComposer will have generated the Metadata.xml file).

TagUpdater extracts the metadata direct from your images and updates Metadata.xml (see below). It is destructive to the existing <Tag> data, but otherwise the file can be used as-before to provide metadata information for a DeepZoom collection in a MultiScaleImage control.

<Image> <FileName>C:\Documents and Settings\xxxxxx\My Documents\Expression\Deep Zoom Composer Projects\Bhutan\source images\page01.jpg</FileName>  <x>0</x>  <y>0</y>  <Width>0.241254523522316</Width>  <Height>0.27256162721473</Height>  <ZOrder>1</ZOrder>  <Tag>Bhutan,Mask</Tag>  <Description>Land of the Thunder Dragon</Description>  <Title>Bhutan 2008</Title>  <Rating>3</Rating>  </Image> 

You can keep adding images/regenerating because the metadata is coming from the images (not the DeepZoomComposer tag box).

Here’s an example – notice how the tags and description on the right are updated as you hover over each image, as well as the visible images being filtered based on clicking a tag.

Kirupa’s source can be modified to use this extra data…

string tagString = g.Element('Tag').Value; // get new elements as well string descriptionString = g.Element('Description').Value; string titleString = g.Element('Title').Value;  string ratingString = g.Element('Rating').Value;  

Hope that’s of some interest – TagUpdater itself isn’t the only way to accomplish this. It’s pretty simple: it just opens the Metadata.XML file, loops through the <Image> elements to open the <FileName>, extract the metadata, add the additional XML elements and save the XML. Using the filename as a ‘key’ you could get additional information from a database (eg. a price or more description data) and expand the XML file as much as you want.