Skip to main content
Home Forums General Silverlight Getting Started Silverlight deep zoom image click issue
26 replies. Latest Post by George1231 on July 10, 2009.
(0)
George1231
Member
11 points
131 Posts
07-04-2009 5:16 AM |
Hello everyone,
I am using deep zoom composer to generate XAP and html files and they works fine for me. Currently, I want to retrieve the information about which image the end user is clicked, and I want to display the description information for the user clicked image in another Silverlight TextBox control on the same page. The description informaiton is currently stored in a database, and has WCF interface. So, I need to know which image in the whole deep zoom area is clicked (support I have 100 images, 10 images in a row and 10 rows).
Any reference samples or documents? I am using Silverlight 2.0 + VSTS 2008 + .Net + C# + IIS 7.0 on Windows Vista x86 Enterprise.
thanks in advance,
George
jay nana...
Contributor
3388 points
624 Posts
07-04-2009 5:18 AM |
Hey you can store image metadata in xml generated by Deep Zoom composer for you.
Go to "GeneratedImages" folder and see there is one file called
Metadata.xml. you can open it and add information about images in <Tag>.
see here:
http://vdcruijsen.net/post/Display-Picture-Metadata-in-your-Silverlight-20-Deepzoom-Application.aspx
07-04-2009 5:29 AM |
Thanks Jay! You are always giving valuable advice. :-)
I followed the steps in the blog, it mentioned when I export, I need to check the "Create Collection" checkbox. But actually the Deep Zoom Composer I am using does not have such option for export process. Here is my screen snapshot, any ideas what is wrong?
http://i42.tinypic.com/2zrn5fq.jpg
07-04-2009 5:44 AM |
The blog entry posted on April 30, 2008, so It has old version of Deep Zoom than yours. You are using latest one. and You are going in right way as in your screen shot, I saw that you've checked the right option button "Export as Collection (Multiple Images)".
If you notice, you will have small dropdown after this option and there you can have "Tag Browser" option there. Select that and export. You will see what you want.
07-04-2009 5:50 AM |
Thanks Jay, 1. do you mean my current settings are already correct? 2. For the dropdown box you mentioned, I can select Default and Tag Browser, as you mentioned I should select Tag Browser, correct? 3. What is the differences between Default and Tag Browser?
07-04-2009 5:56 AM |
1.Correct 2. Correct
3. You need to see yourself by trying both option one by one i.e. Default and Tag Browser. You will understand then.
07-04-2009 6:09 AM |
Thanks Jay, I have tried and when I select Tag Browser, seems only a lot of XML files are exported and no XAP/html files exported, here is my screen snapshot,
http://i43.tinypic.com/14t5wjs.jpg
Is that expected? My confusion is, if no XAP file generated, how could end user play with the Deep Zoom application -- Silverlight player in browser needs an XAP file to begin play with.
07-04-2009 6:13 AM |
While selecting Tag Browser, you should have missed selecting "Silverlight Deep Zoom" in output type that you have first selected while doing with Default option.
07-04-2009 6:28 AM |
Thanks Jay, I have tried and it will filter images by Tags automatically, looks cool!
1. My problem is how to check which image is clicked so that I display related description information. Why I should I use Tag Browser other than using Default? (my confusion is I think Tag Browser is a good feature, but not related to my image position issue.) Any comments?
2. I met with build error in the source code attached with the blog, any ideas what is wrong? I am using VSTS 2008 SP1.
Here is what I download => http://cid-ef12210979e9f6b0.skydrive.live.com/self.aspx/Projects/VdCruijsen.SLDeepZoom.zip
Error 1 The best overloaded method match for 'System.Windows.Media.Animation.Storyboard.SetTargetProperty(System.Windows.Media.Animation.Timeline, System.Windows.PropertyPath)' has some invalid arguments C:\Test\VdCruijsen.SLDeepZoom\VdCruijsen.SLDeepZoom\VdCruijsen.SLDeepZoom\Page.xaml.cs 244 25 VdCruijsen.SLDeepZoomError 2 Argument '2': cannot convert from 'string' to 'System.Windows.PropertyPath' C:\Test\VdCruijsen.SLDeepZoom\VdCruijsen.SLDeepZoom\VdCruijsen.SLDeepZoom\Page.xaml.cs 244 69 VdCruijsen.SLDeepZoomError 3 No overload for method 'Add' takes '1' arguments C:\Test\VdCruijsen.SLDeepZoom\VdCruijsen.SLDeepZoom\VdCruijsen.SLDeepZoom\Page.xaml.cs 247 25 VdCruijsen.SLDeepZoom
07-04-2009 6:38 AM |
You should open MetaData.xml and add your Description Information there. I don't understand why you need to handle Click event on image and display information when it is already done by Deep Zoom composer for you? You simply put information about MetaData.xml in for each image and Deep zoom will take care of fetching this information upon click of that image. see example here:(Here when you mouse over the image, the appropriate description is shown at right)http://deepzoompublisher.com/ClientBin/DeepZoomMetadataTestPageRC0.htmlhere is the source code to this example:
http://www.kirupa.com/silverlight/Source/Deep%20Zoom%20Tag%20Project%20Updated.zip
Download from above and see their code to implement your application.
07-04-2009 6:45 AM |
Thanks Jay, 1. the reaosn why I want to keep track of which image is clicked is, I am developing a commodity show Deep Zoom, and I need to know which commodity is selected (double clicked) by end user and I will record which commodity is selected and put into the shopping cart. Any comments? :-)
2. Any ideas what is wrong with my build error?
07-04-2009 6:50 AM |
For your need, Deep Zoom is not good. On double click, it will zoom in, so what about your double click? Still if you want to go for it, you should read and try according to my previous post.
07-04-2009 7:03 AM |
Thanks Jay,
1. I like this Demo you recommended very much (as below shows), are there any any step by step guide about how to implement this?
http://deepzoompublisher.com/ClientBin/DeepZoomMetadataTestPageRC0.html
2. I agree with you capturing double click is not very good of useability. For my requirements (a lot of commodities, have to use deep zoom to show them in a fancy way, and need shopping cart feature), any suggestions for my solution with good usability?
07-04-2009 1:49 PM |
Hi Jay, I setup and studied the sample you mentioned, and I like it very much. One question, I found my exported images never shows information like Description/Tags on the right bottom part of the page (as the online Demo shows), any ideas what is wrong? Do I need any additional steps?
BTW: I read through code, but never find related parts of code which handles how to display the right bottom corner.
07-04-2009 3:00 PM |
hmm.. let me see. I will post answer here soon..
07-04-2009 3:08 PM |
Well, I got the answer.
visit here:
http://stackoverflow.com/questions/415036/how-do-i-associate-metadata-with-a-deepzoom-subimage
Here guy shows step by step how can you add additional metadata like Description, Title etc in Metadata.xml and modify the sample project accordingly...
Now you can mark some of my post as answer.. let me know if any....
07-04-2009 3:13 PM |
To be more specific, you need to see in Page.xaml.cs in
xmlClient_DownloadStringCompleted method to modify code for that right bottom bar kind thing.
after this line...
string tag = g.Element("Tag").Value; if (tag == "") { tag = "None"; }
And put that
string descriptionString = g.Element("Description").Value;string titleString = g.Element("Title").Value;
kind of code as suggested at bottom in the page in my previous link.
07-05-2009 11:44 AM |
Thanks Jay, the information you provoided is very good, but one of my questions is still not answered, i.e. how to know which picture is selected (when mouse stops on the picture)? I need to know which picture the cursor is located on in order to display the related meta data on the panel.
07-05-2009 2:12 PM |
Hey the previous post of mine did not solve that issue?
Well, If you have prepared the metadata properly as described in Metadata.xml file as said in earlier post than on MouseEnter event, the panel will display metadata for sure.
07-05-2009 2:42 PM |
if you still have doubt, I will create simple demo application and post it here.
07-06-2009 4:52 AM |
Thanks Jay, I think your previous reply does not answer my question, i.e. how to detect which picture the mouse is on, and I need such information to display the related meta data information. Appreciate if you could share more details.
BTW: your previous reply answers how to retrieve meta data, my current question is how to detect which picture mouse is on, so that I can use the retrieved meta data for that picture to display somewhere.
Mog Lian...
All-Star
15884 points
1,541 Posts
07-08-2009 2:32 AM |
Hi George,
I wrote a Helper method to determine which subimage has been clicked in MultiScaleImage, please have a look.
http://silverlight.net/forums/p/99129/228778.aspx#228778
07-09-2009 12:35 PM |
Thanks Mog Liang, I read your code posted here, http://silverlight.net/forums/p/99129/228778.aspx#228778
I like the code you wrote, still one technical issue left, and it is about ViewportOrigin property of MultiScaleImage. My confusion is about the value/range of ViewportOrigin. I think the value of ViewportOrigin should be represented in logical form, so, it should be between 0 and 1, but from the MSDN sample,
http://msdn.microsoft.com/en-us/library/system.windows.controls.multiscaleimage.viewportorigin(VS.95).aspx
the ViewportOrigin could be beyond the range of 0 and 1, like -2, -1.3, etc. Appreciate if you could clarify what is the value range/meaning of ViewportOrigin.
07-09-2009 10:51 PM |
Hi George1231,
ViewportOrgin = - (image position relative to left top corner of multiscaleimage control) / (current image size)
We can still see the image in window area when it has been zoomed out to small size (viewportwidth>1) and viewportorigin<-1.
07-09-2009 11:05 PM |
Thanks for your reply, Mog Liang. For 1. "image position relative to left top corner of multiscaleimage control", I think it should be in the logical coordinate, so the value of "image position relative to left top corner of multiscaleimage control" will range from 0 to 1? 2. "current image size" -- how do we measure the value of image size? Using logical coordinate to represent size? Or using viewportwidth to represent size? Or?
07-09-2009 11:39 PM |
Mog: ViewportOrgin = - (image position relative to left top corner of multiscaleimage control) / (current image size)
I mean, (image position relative to left top corner of multiscaleimage control) is element position, (current image size) is element size. however if we use logical value both on position and size, the equation is also true.
07-10-2009 12:19 AM |
Thanks Mog Liang for your clarification, in the MSDN sample below (for the specific sample of ViewportOrigin="-2, -2" and ViewportWidth is "4", the sample is in the 2nd one of the 2nd row in the samples of the page), what is the value of the "current image size" and "image position relative to left top corner of multiscaleimage control" in your formula so that we could get ViewportOrigin="-2, -2"? I am still confused how to calculate ViewportOrgin because I do not know how to get the values (in logical coordinate form) of "image position relative to left top corner of multiscaleimage control" and "current image size". Appreciate if you could give me some more descriptions. Sorry for my stupid. :-)
Silverlight deep zoom image click issue