How to add text in Deep Zoom Composer?

Question

Hi,

I want to compose my own project in deep zoom composer however I would like to know on how to add text per image zoomed in just like the hard rock memorabilia

I want to consume it, using silverlight 4.0

As you notice, under right pane, it has its description about the image.

Thank you.

Answer 1

Seems like its not simple DeepZoom. What they have used in the project you just mentioned is MS Live Lab Pivot Control of silverlight. http://www.getpivot.com/. This site has good tutorials to start with Pivot and its pretty simple to create collection.

Regards.

Answer 2

Vertigo, the company that created the Hardrock Cafe Memrobilia example, has released its source-code to CodePlex. Check it out here: http://bigpicture.codeplex.com/

• To simplify things way too much, you have to listen to mouse movements above the MultiScaleImage.

• On each mouse move you should iterate over MultiScaleImage subimages collection and check which of them is under your mouse pointer.

• To identify different images, each image in DeepZoom collection should have an unique identifier - for example in DeepZoomComposer you can add a tag value to each image. Based on that tag you could find proper info text to be displayed to the user from an other XML file for example.

Answer 3

This is definitely doable. I've done something similar and it worked great. The following example will show information specific to a clicked image. You can modify it depending on if you want the information to be dispayed on mouseover, click, or even when zoomed. It's entirely up to you.

First off, add a MultiScaleImage to your canvas...

<MultiScaleImage  x:Name="deepZoomObject" Source="/GeneratedImages/dzc_output.xml" />

...and somewhere else on the canvas, add a TextBlock to be used to display the information:

<TextBlock X:Name="tbInfo" />

Next, create a class to hold the information for each "tile", add some dummy information, and add a bunch of tiles to a List:

    public class TileDetail {
       public int Index { get; set; } 
       public string TileName { get; set; }
    }
    //The Index is the zero based index of the images.  It depends on the index created by DeepZoomComposer.  This is the one piece of information that you absolutely need to know.  I believe the index is based on the order that the images are added to DeepZoomComposer but test to make sure.

   List<TileDetail> TileDetailsList = new List<TileDetail>();

   TitleDetail td1 = new TileDetail();
   td1.Index = 0;
   td1.TileName = "Tile #1";

   TileDetailsList.Add(td1);

   TitleDetail td21 = new TileDetail();
   td2.Index = 1;
   td2.TileName = "Tile #2";

   TileDetailsList.Add(td2);

   //Repeat the above for your remaining tiles always incrementing the Index.  If you're loading information from a DB then you'll need to make sure to have a way to connect the image to its index from DeepZoomComposer.

Now that the list is full of tile information, we need to wire up the MouseLeftButtonDown event handler to detect when an image is clicked and ultimately to determine the index of the clicked image. With the index then we only need to search our list for the appropriate tile details and then display on the canvas.

In your code-behind, place the following:

   deepZoomObject.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs e)
   {
      //Get the index of the image
      int index = GetIndexOfSubImage(e.GetPosition(deepZoomObject));
      //Find the image in the list of images
      TileDetail td = TileDetailsList.FirstOrDefault(t => t.Index == index);
      //Display image info
      tbInfo.Text = td.TileName;
   };

The following is the "secret sauce". It will find the index of the clicked image.

   private int GetIndexOfSubImage(Point point)
   {
      // Test each subimage to find the image where the mouse is within
      for (int i = deepZoomObject.SubImages.Count - 1; i >= 0; i--)
      {
        MultiScaleSubImage image = deepZoomObject.SubImages[i];
        double width = deepZoomObject.ActualWidth / (deepZoomObject.ViewportWidth * image.ViewportWidth);
        double height = deepZoomObject.ActualWidth / (deepZoomObject.ViewportWidth * image.ViewportWidth * image.AspectRatio);

        Point pos = deepZoomObject.LogicalToElementPoint(new Point(image.ViewportOrigin.X / image.ViewportWidth, -image.ViewportOrigin.Y / image.ViewportWidth));
        Rect rect = new Rect(pos.X, pos.Y, width, height);

        if (rect.Contains(point))
        {
           // Return the image index
           return i;
        }
      }    
      return -1; //if there is no corresponding subimage
    }

And that's it. As long as your image indexes have a corresponding image in your list then clicking on an image inside of the MultiScaleImage object will result in the image info being displayed.