Display Picture Metadata in your Silverlight 2.0 Deepzoom Application

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.

deepzoomComposerCollection

After exporting this will be the result:

deepzoomexport

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

kick it on DotNetKicks.com

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

Build your own Silverlight 2.0 Deepzoom application and host it with “Silverlight Streaming”

A few weeks back on MIX'08 Microsoft showed us a stunning demo including new technologies like Seadragon and Silverlight 2.0.

This demo showed us the collection of memorabilia at Hardrock Cafe. The demo can be found at http://memorabilia.hardrock.com/

This demo really got my attention and after some searching on the internet i found out i wasn't the only one. There are hundreds of blogposts by people showing how you can build this for yourself and guess what: it's really easy!

I've spend some days in the weekend and this evening building my own version of a Silverlight Deepzoom Application. Most of my code is "borrowed" or copied from other blog posts which i'll list at the bottom of this post. My goal was to also be able to show metadata at the pictures and after some research it wasn't to hard to do this either. Since i didn't find any other blog posts who explained how to show metadata with your pictures i'll make a seperate blogpost about this tomorrow.

I've put some of my last vacation photo's online in my own deepzoom test application at: http://www.vdcruijsen.net/projects/SilverlightDeepzoom/test.html (source also linked on that page)

Download Source: 

As i said before i won't go explaining the code in this post because i'm gonna do that tomorrow in a separate post where i'll explain how to add metadata to your deepzoom application. if you want more information about Silverlight and Deepzoom check out the following links:

how it works: http://blogs.msdn.com/jaimer/archive/2008/03/31/a-deepzoom-primer-explained-and-coded.aspx

lots of how-to's: http://projectsilverlight.blogspot.com/

more info on silverlight 2.0 http://weblogs.asp.net/scottgu/archive/2008/02/22/first-look-at-silverlight-2.aspx

Another cool thing i found out is that Microsoft is offering is a hosted environment for your silverlight applications. You can get up to 10GB of free space at Silverlight Streaming: http://silverlight.live.com/

You can upload your Silverlight manifest files + other resource files like video's to Silverlight Streaming and you can link your silverlight object on your own page. The silverlight object in my own example is also hosted at Silverlight Streaming.

If you have any questions or recommendations about this subject please dont hesitate to send me a mail about it.

Geert van der Cruijsen

kick it on DotNetKicks.com

 

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter