How do I associate metadata with SubImage DeepZoom?
I am trying to sort a collection of DeepZoom sub-images based on arbitrary data associated with each image. Sub-images are loaded automatically using 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 strike me as the most obvious are fragile and don't scale well. Ideally, I would like to put the relevant data into the generated XML file, but I would lose this information on the next set of generated images.
Is there an established way to achieve this goal?
source to share
As you noticed, DeepZoomComposer supports an element <Tag></Tag>
that you can use in the Silverlight MultiScaleImage control ( filter by tag ).
You are also correct that you "lose" any information you add to the XML file when you edit in DeepZoomComposer and regenerate it (however, you won't lose it if you type in DeepZoomComposer).
To get around this problem, I wrote a small console application called TagUpdater - it basically works like this:
-
You put your metadata in images: the JPG file format supports many different fields, but now you can use Title, Keywords (tags), description and rating
-
You add your images to Microsoft DeepZoomComposer (don't have to parse them, as you probably want to sort them dynamically and not bother entering any metadata) and Export as usual
-
Call
TagUpdater.exe Metadata.xml
through the console (DeepZoomComposer will create a Metadata.xml file).
TagUpdater extracts metadata directly from your images and updates Metadata.xml
(see below). This is damaging to existing data <Tag>
, but otherwise the file can be used as before to provide metadata information for the DeepZoom collection in the 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 comes from images (not in the DeepZoomComposer tag field).
Here's an example - notice how the tags and description on the right are updated on hover over each image, and in the visible image are filtered when the tag is clicked.
Kirupa's source may be modified to use this additional 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;
Hopefully of some interest - TagUpdater itself is not the only way to achieve this. It's pretty simple: it just opens the Metadata.XML file, walks through the elements <Image>
to open <FileName>
, extract the metadata, add additional XML elements, and save the XML. By using the filename as a "key", you can retrieve additional information from the database (such as pricing information or more detailed descriptions) and expand the XML file as much as you like.
source to share