Expression >
Forums Home
>
Related Technologies Forums
>
Deep Zoom Composer
>
Filtering and Showing Additional Information
Filtering and Showing Additional Information
- Hi everyone,
I'm working with DeepZoom for a few days now - it was very hard to find documentation about dynamically creation of DeepZoom. When I'm done, I want to have a solution like Hard Rock Memorabilia (like nearly everyone...) or for now a functionality like it is shown here:
http://deepzoompublisher.com/ClientBin/DeepZoomMetadataTestPageRC0.html
At the moment I have a problem with the following issue:
I give Tags for every SubImage in a XML file which i create dynamically myself with data from a DB. With the Tags I can filter the view of the subimages, that works fine so far. I also can identify each SubImage when the view is not filtered by the SubImage-Index.
But when I filter the view I run into the problem to identify the image. I filter the view with this code:
As you can see, I simply set the Opacity of the images that do not match the given filter to zero. For the view that works really fine but it seems like the untagged Images with the Opacity of zero lie over the Tagged One the user can see. So when the user clicks one of the images he doesn't get the appreciated information, but the information from an image he is not seeing at all.foreach (var item in msiImages){ MultiScaleSubImage si= item.SubImage; if (item.Tag.Contains(tag.ToLower())) { taggedImages.Add(si); si.Opacity = 1; // save the Index of the SubImage in MSI separatly, so I can // identify it later item.Id = (msi.SubImages.IndexOf(subImage)); }else { subImage.Opacity = 0; } }
I tried to set the ZOrder of the untagged Images to zero, but that didn't work.
Does anyone have an idea how to solve this? Thanks for any help!
Regards,
Al
Answers
- Hi everyone,
was working a lot on that so far - maybe too long, my productivity dropped.
But finally I found a solution to solve the problem:
In my code I have two Lists - one List containing each SubImage plus some additional information coming from a XML and the second one contains the Images the user was looking for (via Tag or TextBox).
So what I do initially is loading the XML file and generate a MultiScaleSubImage like Kirupa does in his sample here http://blog.kirupa.com/?p=212. You can also look there how to filter a list by Tag. What I did after filtering the list is to save the ViewportOrigin Property which the MultiScaleImage-Control gives each SubImage. In the MouseBottonUp Event Handler then I loop through the images and compare the ViewportOrigin Property.
I will post my code later for the interested...- Marked As Answer byal_w Tuesday, October 06, 2009 2:27 PM
All Replies
- Hi everyone,
was working a lot on that so far - maybe too long, my productivity dropped.
But finally I found a solution to solve the problem:
In my code I have two Lists - one List containing each SubImage plus some additional information coming from a XML and the second one contains the Images the user was looking for (via Tag or TextBox).
So what I do initially is loading the XML file and generate a MultiScaleSubImage like Kirupa does in his sample here http://blog.kirupa.com/?p=212. You can also look there how to filter a list by Tag. What I did after filtering the list is to save the ViewportOrigin Property which the MultiScaleImage-Control gives each SubImage. In the MouseBottonUp Event Handler then I loop through the images and compare the ViewportOrigin Property.
I will post my code later for the interested...- Marked As Answer byal_w Tuesday, October 06, 2009 2:27 PM
- As mentioned above a little code sample as How To Identify a MultiScaleSubImage after Filtering:
Depending of the Example of Kirupa here: http://blog.kirupa.com/?p=212
you have a method ArrangeIntoGrid() which arranges the MultiScaleSubImages depending of the filter which is being set by the user. There, after
calling the Storyboard you have to register an EventHandler called when the Storyboard is completed, this EventHandler should look like this:
// Contains all the Images that will be added to the MSI Control<br /> private List<ImageReference> imageList;<br /> <br /> void MoveStoryboard_Completed(object sender, EventArgs e) { <br /> // loop through the images that contain the tag foreach(MultiScaleSubImage mssi in randomList){ // loop through the list of all images to get<br /> // the right image<br /> foreach (var imageReference in imageList){ if (imageReference.SubImage.Equals(mssi)) { // if current image is one of filtered, set new ViewportOrigin <br /> imageReference.ViewPortOrigin = mssi.ViewportOrigin; break; } } } }
After you've set the ViewportOrigin-Property to the images that have been filtered, you can identify them either a user clicks on it
or the mouse is being enterd with the following code:
// Identify the clicked Image by it's id which is set automatically <br /> // by the MSI control when it's set Point p = this.msi.ElementToLogicalPoint(e.GetPosition(this.msi)); int subImageIndex = GetSubImageIndex(p); if (subImageIndex >= 0){ MultiScaleSubImage mssi = msi.SubImages[subImageIndex]; // Loop through the list of all images and the tagged one's again // to identify the right one foreach (var Image in listOfAllImages){ foreach (var item in randomList){ if (Image.SubImage.Equals(item)){ if (Image.ViewPortOrigin == mssi.ViewportOrigin){ // found the image clicked, show additional information or // something like that... break; } } } } }
As you can see, a lot of of loops and conditions in my code, not the perfect solution but it works fine for me... hope it helps anyone out there.
