As i promised 2 days ago here's my post about how to display metadata of sub images in your Silverlight Deepzoom Application. I already typed this post yesterday but because of a stupid mistake i lost my post and now I have to type it again :( (but I think I'll make it a bit shorter)
To start building your Silverlight 2.0 deepzoom application download Deepzoom Composer from Microsoft here. This tool works quite easy. just add some images in the "import" mode then drag them on your screen in the "compose" mode and then export your deepzoom Project.
If you want to be able to identify the different sub images in your Multiscaleimage object check the "Create Collection" checkbox.
After exporting this will be the result:
Now to load up this collection of pictures into your own project take a look at this weblog, there is a really good explanation on which steps to take and after you did all those steps i'll explain how to show metada of the different subimages in the deepzoom application.
So if you are at this point you should have your own working deepzoom application and you want to add picture metadata to your project. If not go back to this weblog or try one of these.
The only way of identifying the different sub images in the big multiscaleimage is by the Z-Order of the different images. So how do you know which image has what Z-Order you ask? thats where the generated SparseImageSceneGraph.xml comes in which was generated by the Deepzoom Composer.
<SceneNode>
<FileName> P1000558.JPG</FileName>
<x>0,235460826165879</x>
<y>0,00108692916410255</y>
<Width>0,218281177677285</Width>
<Height>0,144923888547009</Height>
<ZOrder>2</ZOrder>
<Description>Uitzicht van hotelkamer</Description>
</SceneNode>
As you can see i added my own Description element to every SceneNode in the generated xml so we can use it in our project. We'll use this xml file to query the ZOrder of the subimage and get the description as a result with the use of Linq.
To do this we'll first have to open the xml file in our code behind page from the page.xaml.cs.
deepZoomObject.Loaded += delegate(object sender, RoutedEventArgs e)
{
_xmlImageMetadata = XDocument.Load("SparseImageSceneGraph.xml");
};
After that we'll add code to display the metadata when the mouse moves over a sub image in the multiscaleimage.
deepZoomObject.MouseMove += delegate(object sender, MouseEventArgs e)
{
if (mouseButtonPressed)
{
mouseIsDragging = true;
}
else
{
ImageName.Text = GetMetadata(e.GetPosition(deepZoomObject));
}
lastMousePos = e.GetPosition(deepZoomObject);
};
Then we add the function GetMetadata which queries the xml file and gets the description from it.
private string GetMetadata(Point point)
{
Point p = deepZoomObject.ElementToLogicalPoint(point);
int subImageIndex = SubImageHitTest(p);
if (subImageIndex >= 0)
{
var q = from c in _xmlImageMetadata.Elements("SceneGraph").Elements("SceneNode")
where ((string)c.Element("ZOrder")) == (subImageIndex + 1).ToString()
select (string)c.Element("Description");
if (q != null)
{
return q.Single();
}
else
return "";
}
else
return "";
}
This function uses the function SubImageHitTest which I copied from this weblog:
int SubImageHitTest(Point p)
{
for (int i = 0; i < deepZoomObject.SubImages.Count; i++)
{
Rect subImageRect = GetSubImageRect(i);
if (subImageRect.Contains(p))
return i;
} return -1;
}
Rect GetSubImageRect(int indexSubImage)
{
if (indexSubImage < 0 || indexSubImage >= deepZoomObject.SubImages.Count)
return Rect.Empty;
MultiScaleSubImage subImage = deepZoomObject.SubImages[indexSubImage];
double scaleBy = 1 / subImage.ViewportWidth;
return new Rect(-subImage.ViewportOrigin.X * scaleBy, -subImage.ViewportOrigin.Y * scaleBy, 1 * scaleBy, (1 / subImage.AspectRatio) * scaleBy);
}
if you build and start your application now you should be able to see your added metadata when you mouseover a sub image in the MultiscaleImage.
My working example can be found here: http://www.vdcruijsen.net/projects/SilverlightDeepzoom/test.html
sourcecode can be downloaded here:
(you'll have to add your own deepzoom object since i removed that from the zip file)
Happy Coding!
Geert van der Cruijsen
