Deep Zoom Composer – Filtering by Tag Sample
June 15th, 2008 | 61 Comments
One of my side projects on the Expression Blend team is working on Deep Zoom Composer (DZC), a small application for allowing you to create Deep Zoom content. A cool feature we released in our most recent release is the ability to tag your images. You can select an image (or a group of images) and specify several tags that you want associated with your selection. The earlier link describes that process in slightly more detail.
To summarize our tagging functionality, when you export, DZC generates a file called Metadata.xml and places it in your GeneratedImages folder along with all of your image tiles and dzc_output.xml file.This Metadata.xml file contains information on each image, its X and Y position, the Tag values, and the ZOrder.
Because of time constraints, though, we didn’t do anything inside DZC besides exporting this XML file. There was no way for you to associate your metadata with each image and do some interesting things without writing code.
To help you use this Metadata functionality, I wrote a small Silverlight 2 app that I am calling the Deep Zoom Tag Browser:
You can see a demo of it working by clicking the above screenshot or clicking here. In case you are not familiar with Deep Zoom, you can use your mouse to pan the images around, the mouse wheel to zoom in/out, or if you do not have access to a mouse wheel, Click and Shift+Click will allow you to zoom in and out as well.
Using The Tag Browser with your own Deep Zoom Composer Projects
If you would like to use this functionality inside your own projects, it is pretty easy. First, download and extract the source files for my Deep Zoom Tag Browser by clicking the download link below:
 |
Download Tag Browser Source (Visual Studio 2008) |
Once you have downloaded and extracted the files, open the solution in Visual Studio 2008 (make sure you have the Silverlight Tools installed). You will see two projects inside it – a Silverlight 2 project and a Web Site project. Expand your Web Site project until you reach your ClientBin folder:
Inside your ClientBin folder, create a new folder called GeneratedImages. Make sure you a Windows Explorer instance showing you the the XML files and image tile folders generated by Deep Zoom Composer:
Select all of these files and folders and drag/drop them into your GeneratedImages folder in Visual Studio. This will take a good minute or two since there are many files that need to be copied over. You will see a handy progress dialog informing you of the progress:
Once all of the files have been imported into your GeneratedImages folder, you should see confirmation of that in your Solution Explorer:
Now comes the easy part. Press F6 to build your project. You should not be seeing any errors! Right click on DeepZoomMetadataTestPage.html in your Web Site project and select View in Browser:
Once you have done that, a web server instance will be fired up and your browser will display your new images and metadata files associated with it.
A major limitation in the current version is that if you have multiple tags separated by commas, the application doesn’t break them up and allow you to filter by them. It associated all tags with an image as one entity. That means, your images can only have one tag associated with them.
Don’t worry – I will fix that shortly.
Cheers!
Kirupa 
EDIT: Updated above templates to use the latest version of Silverlight 2.
June 15th, 2008 at 9:51 pm
Very nice! thanks for putting this example together.
June 19th, 2008 at 8:51 am
[...] Deep Zoom with Tag Support [...]
June 19th, 2008 at 9:23 am
This rocks…thanks!
A couple asks….
any way to get the viewer to expand to full screen?
Can I associated link information to an image?
June 19th, 2008 at 3:19 pm
Great example! I was playing around with your code and tried to pull the picture locations from the metadata.xml file and use those as dataTemplates for a listbox to display all of the available images in your deep zoom composition. I was unable to use the whole fileName tag and had to resort to moving the files by hand and trimming the fileName tag down. I was then going to add a selectionChanged event that would bring up the current selection in the deep zoom area.
Is there a better way to grab a thumbnail of all the images? Thanks, and great job with deep zoom!
June 21st, 2008 at 1:29 pm
Todd – to go full screen, this article should help: http://www.kirupa.com/blend_silverlight/fullscreen.htm Associating the link information with an image is a bit more tricky, but I’ll try to create an example of it soon.
aqua – the metadata.xml file’s image paths are the actual locations on your hard drive where those images were originally located. They are used mainly to help you get more context on the images. For example, an image in C:\AlbumData\ would probably be related to album data, so you can programmatically isolate just the “AlbumData” part of the path and do something different.
There is no easy way of getting a thumbnail of the images unless you upload a static JPG/PNG of your image to your server and manually change the current image path to the location of the thumbnail image on your server. That will allow you to read your new image path and load that into an image control.
June 23rd, 2008 at 7:11 am
Awesome sample!
Deep Zoom Composer seems to only allow one tag to be associated with an image. How can we have multiple tags associated to an image.
For example, the memorabilia.hardrock.com site has multiple filters:
* Featured Artist
* Type
* Decade
* Genre
* Location
Not only do we want different kinds of filters, but also a possible multiple filters per image (ex. 2 genres per image).
How would we go about this many-to-many relationship? Is it possible to have multiple tags, or do we have to put a separator within the tag? We’ve also considered persisting the image metadata in a database.
Thoughts?
Jason
June 23rd, 2008 at 8:53 am
Jason – the separator approach is what we may go with inside DZC, and that will allow you to have multiple tags. I’m currently testing an updated version of this code that allows having multiple tags be associated to multiple images, so I’ll be sure to post it once I have it working.
June 23rd, 2008 at 1:29 pm
Kirupa,
You rock! While you’re working on the tag interface, one suggestion? Could you include an optional element to the tag, so we can differentiate what filter the tag belongs to?
ex.
Heavy Metal
If there’s a better architecture, then go for it.
Thanks,
Jason
June 24th, 2008 at 12:48 am
[...] Creating a Deep Zoom composition with Tag support [...]
June 24th, 2008 at 1:58 pm
Thanks for all the great work!
June 24th, 2008 at 11:23 pm
[...] This means I could now filter, or do any thing since the data is merged. Kirupa has an example of using tags to filter (so I will stop here on that topic and move to Viewports). [...]
June 25th, 2008 at 8:54 am
In regards to my earlier comment, here is my blog post with an example and full source:
http://theamoebaproject.com/blog/aquaseal/deep-zoom-selecting-image
June 25th, 2008 at 4:22 pm
Fantastic job Kirupa, really marvelous contribution.
July 11th, 2008 at 8:08 am
Hi Kirupa,
Excellent work
I downloaded the demo but there are no images displayed. The clientbin does not contain the generated images folder. Is that what the problem is?
Sham.
July 14th, 2008 at 5:14 am
hey Sham, that is idd the problem. You need the Deep Zoom Composer. You can export the files with images and paste them in ClientBin/GeneratedImages/
all should work then. It did for me
thx Kirupa for all the nice work
July 17th, 2008 at 12:25 am
Muy buen sistema de Galeria, estamuy bien explicado Zoom en la iomagen la galeria es muy chula!!!
Me agrada! Muy buen Trabajo
http://www.hoteles-esquel.com.ar
July 19th, 2008 at 4:00 am
Kirupa, I’ve taken the liberty of hacking on “multiple tag handling” to your sample; described here:
http://conceptdev.blogspot.com/2008/07/deepzoom-composer-tag-cloud.html
with the code changes outlined here:
http://www.conceptdevelopment.net/Silverlight/DeepZoomPublisher02/code.htm
Thanks for publishing the sample – look forward to the final incarnation of DZC 1.0!
July 26th, 2008 at 5:53 am
[...] criou uma aplicaçãozinha que permite navegar pelas fotos de um deep zoom usando tags. genial! clique nas imagens [...]
August 5th, 2008 at 12:18 pm
[...] as well as a default html test page for you. Now if you want to take Deep Zoom a step further, here’s a post by KIRUPA.CHINNATHAMBI that shows how you can implement a deep zoom application that allows you to [...]
August 5th, 2008 at 12:20 pm
[...] as well as a default html test page for you. Now if you want to take Deep Zoom a step further, here’s a post by KIRUPA.CHINNATHAMBI that shows how you can implement a deep zoom application that allows you to [...]
August 7th, 2008 at 6:37 am
Hi All…..
I have an problem …
While composing Deep zoom, i put tag for each image. now i want on click of msi(multiscale image)
i want to get as pop up for respective tag, on which the mouse is down (for each sub image in msi).
any body have any idea….!
August 15th, 2008 at 1:10 am
G’day Kirupa
Great article!
I have downloaded the demo and I can view the tagged web page from within VS2008. How do I get this running outside VS2008 localhost. Similar to a collection exported from Deep Zoom Composer were you can open the htm file into the browser?
Cheers
August 16th, 2008 at 2:24 am
Happy – unfortunately, you can’t run it outside of a web server. The reason is that I am using the WebClient class to load the XML file, and WebClient requires a server to work.
You could look into passing the XML values in as JavaScript file. Reading the JS values does not require a web server to be present, but I would choose that as a last resort.
Cheers!
Kirupa
September 8th, 2008 at 4:30 pm
[...] Filtering by Tag Here is an example I wrote showing how you can use the Metadata.xml file generated by Deep Zoom Composer to filter. [...]
September 15th, 2008 at 6:36 am
[...] Filtering by Tag Here is an example I wrote showing how you can use the Metadata.xml file generated by Deep Zoom Composer to filter. [...]
September 17th, 2008 at 11:22 am
Great Sample!
Thanks for the tutorial. This is exactly what I was looking for.
I found a strange behaviour when you are holding the mouse button down, move the mouse off of the DZ Images, let go of the mouse button and move back onto the DZ Images. The DZ images pan even though the mouse button isn’t clicked.
The cause is b/c the variable “mouseButtonPressed” is still set to true since the mouseleftbuttonup event is only fired when the button is let go over the msi but in this scenario it wasn’t.
I simply set the mouseButtonPressed = false in the MouseLeave event and I don’t see the strange behaviour. However I do lose the ability to allow the user to hold the mouse button down and keep panning the images when they go back into the MSI area.
Do you have any other suggestions?
Oran
October 1st, 2008 at 3:47 pm
I’m anxious to view and try this out.
Is there something I need to update in order to view it with Silverlight RC 0?
October 1st, 2008 at 6:27 pm
cam – you can’t view this in Silverlight 2 RC0 because I haven’t recompiled the app. I will post an updated version sometime soon when I get time.
That version will work in Silverlight 2 RC and hopefully RTM as well
October 4th, 2008 at 2:11 pm
awesome work! Will there be an api to the composer to auto generate the file outputs? I want to create a photoalbum that users can upload their own images, then my webservice would generate the necessary deepzoom files to display them in a grid layout where it defaults to zoomtofit for all the pics in the collection. So everything is automated and no need to manually load the composer to create collections. I’m sure its possible, just wondering if and when it will be available. Thanks!
October 5th, 2008 at 12:57 am
David – not yet, but that would be cool to have! I’ll talk to a colleague that I work with on this project and see what can be done!
November 30th, 2008 at 9:09 am
Great example. The one thing I noticed is that it doesn’t maintain the images that I embed in each other. For example I have a picture of a building with a sign on it and a close up picture of the sign, so I embed the second image in the first, but the example site just shows the two as separate images. Any suggestions?
December 2nd, 2008 at 2:00 am
David – my current example treats each image individually. Even if you were to originally have them be positioned over each other, their positions are not maintained.
Are you looking for a combination of images that are dynamically positioned and images whose positions are fixed relative to another image?
Thanks,
Kirupa
December 17th, 2008 at 4:04 am
[...] as well as a default html test page for you. Now if you want to take Deep Zoom a step further, here’s a post by KIRUPA.CHINNATHAMBI that shows how you can implement a deep zoom application that allows you to [...]
January 29th, 2009 at 1:51 am
if i want to link to this tag browser from another project, how do i go about doing it? When i add in the .cs file, it only show the tag browser but not the images inside.
January 30th, 2009 at 12:12 am
Hi Caspia – just download Deep Zoom Composer and export something that happens to be a collection
Make sure that you use the tag functionality found in Deep Zoom Composer to tag your images with a word.
Once you export, your GeneratedImages folder will contain a series of XML files and images, and these are what you need to copy/paste into your GeneratedImages folder from filtering project.
Cheers!
Kirupa
February 3rd, 2009 at 8:23 pm
Yup.. that is what i did and i tried to code
Display.Children.Clear();
DeepZoomMetadata.Page dzc = new DeepZoomMetadata.Page();
Display.Children.Add(dzc);
but it only show the tag browser. is there somthing wrong with the code?
March 5th, 2009 at 9:18 pm
[...] Much code was stolen/borrowed from Kirupa Chinnathambi and his very useful Deep Zoom Tag Sample. [...]
March 25th, 2009 at 4:27 pm
Hey Kirupa, the Tag Cloud example based on your code has been updated again – with the new Virtual Earth Map Control
http://conceptdevelopment.net/Silverlight/DeepZoomPublisher04/Default.html
and explanation
http://conceptdev.blogspot.com/2009/03/silverlight-virtualearth-map-control_23.html
The ‘on hover’ can be a bit unintuitive (maybe the map should only re-target ‘on click’) but you get the idea…
Thanks again for your source.
April 1st, 2009 at 12:43 pm
Great Example. I was wondering if you’d tried to optimize the filtering on large datasets. I have a set of about 2000 images and parsing the metadata files causes it to take a long time to load.
I need a way to filter the images, but I’m not sure of anyway around this limitation. Possibly dynamically loading dzc files?
Any suggestions?
May 30th, 2009 at 11:46 pm
Hi Kirupa,
First Thanks for the interesting article.. I am started experimenting DeepZoom features and working on application that resembles the HardRock memorabillia site..
I have a problem to get the id or name of the selected image. i need this to retrieve the metadata info of the image when user clicks on the image… (In Hardrock, the story is displayed when the image zoomed to some extend )
I need to implement the functionality… do u have any idea how this could be done..
Cheers
Ramesh Vel
June 2nd, 2009 at 6:33 am
I dont want the images to be in the default GeneratedImages but in a user specified directory. See- I want to be able to upload different deepzoom collections for different users and let them see their own collection by (lets say) selecting themselves from a list within deepzoom.
Is this possible.
July 8th, 2009 at 8:43 pm
Hi there,
I tried ur codes and yes it worked but i only have ALL and NONE. How can i add in more tags? where do i start? how do i add in the other files into a new tag?
July 8th, 2009 at 9:24 pm
Hi there,
i loved ur application but one question though,
how can i add in more tags with other pictures associating with the tag?
for now, i only have all and none.
July 14th, 2009 at 9:02 pm
[...] application take care of arranging and positioning your content at runtime instead such as what this example highlights. That is what most of the popular Deep Zoom examples that provide advanced interaction and [...]
July 31st, 2009 at 10:01 am
Here it is another example we are using in our magazine:http://www.thefineartmagazine.com/magazine/magazine-issue-no3-09.html
August 5th, 2009 at 5:55 am
Hi kirupa,
I think ur application covers most of the basic stuff which I need to do right now in my POC Application.Its truly a well made application.
I have recently started working on the Deep Zoom Applications. I just wanted to clarify a few things.
First of all has DeepZoomTools.dll replaced the SparseImageTool.exe ? Is this the reason why I don’t get the metadata.xml file in my ClientBin/GeneratedImages anymore ? Can u guide me as to how can I arrange my images using DeepZoomTools.dll
Thanks
August 5th, 2009 at 1:27 pm
Hi Anubandh!
DeepZoomTools.dll has replaced SparseImageTool.exe, but metadata.xml has nothing to do with either of the tools. It is something Deep Zoom Composer generates for you instead.
For positioning, the document here should help: http://msdn.microsoft.com/en-us/library/cc645050(VS.95).aspx
Cheers!
Kirupa
August 6th, 2009 at 11:22 pm
Hey kirupa,
Thanks a lot for the information. Now here’s the thing I want to do.
I generated a Deep Zoom Silverlight project using Deep Zoom Composer and some images.
After exporting the project, I deleted the existing images which I added earlier and added images at runtime by setting source and destination target paths.
Now my question is if I want to categorize multiple images in different categories then do I create multiple output.xml files in the ClientBin/GeneratedImages folder along with multiple images or is there a better way to implement this ?
August 7th, 2009 at 5:15 am
Also just an addition to my previous query, the categorizing acn be done by the ‘Tag’ element in the metadata.xml file. So does Deepzoomtools.dll provide any classes to generate the metadata.xml file at runtime coz thats where the positioning and layout of individual images comes from rite ?
August 16th, 2009 at 12:26 am
Hello KIRUPA.CHINNATHAMBI,
Thanks for this interesting article and sample code.
Could you please give me a reference to the sample code for adding internal links.?
Thanks.
August 26th, 2009 at 2:16 pm
Hi Kirupa,
this is a nice post, and opens a lots of prospects of using this technology, I have a scenario and thought to get inputs from you to see how deepzoom can help here,
Scenario: Contoso Corp. is a national provider for mobile services, they have few million customers, who calls Contoso at thier call center for various requests, may be for thier billing, may be for new services, for technical issues and so on, in the call center, CSR (Customer Service representative) attends the call, takes initial detail from customer (his customer number or something similar) and loads the customer information into his software by searching him in the system, once customer is loaded CSR then navigates to section of the system which is most appropriate at the moment for customer’s request (Billing, Maintainance, Services etc) now from that section CSR further drills down into specific details customer is calling about may be a historical invoice, or adding new services / changing existing services.. etc.
I was wondering if DeepZoom can help here having zoom enabled on objects, and not only on images
Vishal
760-587-8317
August 26th, 2009 at 11:35 pm
[...] hace uso de un template diferente … y muestra las posibilidades de DeepZoom. En el blog de Kirupa Chinnathambi podemos encontrar el Source de este [...]
September 9th, 2009 at 4:59 am
Hi Kirupa,
Fantastic effort, I’m looking to employ the tag browser on a couple of sites – you mentioned in a previous comment the possibility of associating link information with an image, is it feasible to do this?
Also there is a comment above relating to the possibility of an “api to the composer to auto generate the file outputs” – I’m assuming this would need to be DZC running on a .NET server yes?
Hope you don’t mind my questions
Many thanks,
Ewan
September 9th, 2009 at 4:49 pm
Мне интересно, сколько средств вложили в раскрутку этого блога. Кто как думает?
October 1st, 2009 at 4:12 pm
Hi Kirupa,
Am using Image creator and collection creator class to create my image tiles. How will i add the tag information to the images which i generate programatically, so that i can use your above example to sort them using tagging feature. How will i genearte the metadata.xml for all my images programatically.
Anyhelp will be higly appreaciated.
regards
sakti
November 26th, 2009 at 2:18 am
Hello,
When I open the Tag Browser Source with Expression Blend 3 it updates the project to SilverLight 3.
When I then build and move it into the export templates folder in DZC it appears in the custom drop down list – but I can’t seem to get the template to work, it doesn’t generate the html file for example when I export.
Is there something I need to do to the template to get it to work with latest DZC?
Many thanks,
Ewan
November 30th, 2009 at 6:39 pm
Hi,
This is great! My question may be obvious as I’m a bit of a newbie wit this stuff.
I’ve got it working so that the DeepZoomMetadataTestPage.html works when I do View in Browser. What I’m having trouble with is getting it added to my website.In Expression Web I do an Insert->Media->Silverlight which adds this code to my HTML page:
It also created a Silverlight folder with deepzoommetadata.xap in it. I copied the GeneratedImages folder into the Silverlight folder as well. When I go to the page though I just get an 800×800 white box.
Suggestions?
Thanks,
Gurujeet
November 30th, 2009 at 6:53 pm
…the code got zapped on submission on prior post, but it was just the DIV that was added after navigating to the .xap file
November 30th, 2009 at 9:03 pm
…got it working. It looks like the Insert->Media->Silverlight put in a path starting from the parent directory rather than the current directory. Works great – now on to multiple tags and EXIF info from the images.
December 4th, 2009 at 6:45 am
[...] to display thousand of images. However, how you may manage so many images in your applications? Kirupa has a [...]
December 11th, 2009 at 5:07 pm
Very Nice.. thanks for the example.