After reading Kirupa's excellent blog post about filtering images in a Deep Zoom Collection, I decided to take it one step further. Deep Zoom has the potential to allow us to think way outside the box. There have already been some great examples of this, such as: Jose Fajardo's demo and Deep Earth. I'm sure there are a few other great examples out there, but those 2 really demonstrate true potential for this technology.
In Kirupa's example of how to filter images in a Deep Zoom Collection, there is an associate metadata.xml file that is created when you export you Deep Zoom Collection. The properties that are currently exported for each multiscale image are:
- File name
- X coordinate
- Y coordinate
- Width
- Height
- Z order
- Tag
I was mainly interested in accomplishing 2 things; having a list of images that came from the metadata.xml file and having the ability to select an image and bring it into view.
Since the metadata.xml file contains the file name (including the images source folder) I could easily loop through those tags and grab all of the images. I wanted to show these images as thumbnails. At this time, there is not an easy way to generate a thumbnail from the deep zoom collection. I manually resized my images and saved them off by appending "thumb_" in front of each image. Now that I had my thumbnails I could loop through the metadata.xml file, pull off the file name tag and associate that image with its corresponding thumbnail.
Each thumbnail is then placed in my ImageSlider control (great control Denislav Savkov). I tweaked the ImageSlider control to my liking and added repeatButtons for scrolling left and right so the user could hold down the mouse for a faster scroll. In the SelectionChanged event of the ImageSlider control I match up the thumbnail with the corresponding deep zoom image and then set the multiscale image control's viewport accordingly to bring that deep zoom image into view.
EDIT (June 26): The 'bug' is really no bug at all, instead a misunderstanding on my part. It turns out that the y coordinate is relative to the image's width. It also has to be negative ... negative goes down, right? (Thanks to Jaime Rodriguez and her blog post to clear this up!)
And there you have it, a simple way to see a collection of thumbnails and select the appropriate image to get the corresponding deep zoom image. If you have any questions / comments please let me know. And always, the source code is attached, enjoy!
SOURCE: Warning, 12 MB ... sorry for the large file
Wed, 10/29/2008 - 02:21
I read this site, its really good, my suggesstion is if its explained programatically step by step then it's helpful for developers
Thu, 12/18/2008 - 22:42
I will look into posting basic, detailed tutorials on how to accomplish these simple tasks, thanks for the advice!
Sun, 09/19/2010 - 14:15
I thank the writer friend for his writings on your site. I read all of it and i need to read new writings anymore. For the time being, i watched this type of topic on facebook and i liked it so much. In addition, it's one of the rare topics on the site.
See you at a new topic.
Wed, 09/22/2010 - 21:15
Very informative and trustworthy blog. Please keep updating with great posts like this one. I have booked marked your site and am about to email it to a few friends of mine that I know would enjoy reading
Mon, 12/27/2010 - 20:42
Thanks for comment page.i find this web site very useful.
Thu, 01/06/2011 - 10:50
Deep Zoom Composer (DZC) allows you take images, arrange them on a design surface, and export them for use with the Deep Zoom technology found in Silverlight 2.
Fri, 01/07/2011 - 12:00
At this time, there is not an easy way to generate a thumbnail from the deep zoom collection.
Wed, 01/26/2011 - 06:25
Thanks you very much.
Wed, 04/27/2011 - 08:10
I agree with what you have said generating a thumbnail from the deep zoom collection is not an easy task.
Sat, 05/28/2011 - 20:59
Thanks for the step by step of this. I am going to try this on my site
Post new comment