« MIX08 Keynote Announcements | Home | Session 0 Isolation »

MultiScaleImage with mouse support-ish

Thu, March 6, 2008, 07:13 AM under Silverlight
One of the demos that captures people's attention with some Silverlight 2 demos is the Seadragon-based technology that in Silverlight is called "DeepZoom". To see a good example of that in action look at the Hard Rock Memorabilia site or visit the Vertigo site (the guys that built the HR experience). The control behind all that is the MultiScaleImage control. You need to point the Source property of that to the output you get when you use the DeepZoomComposer tool. The tool basically takes an image and chops it up to more download-friendly bits that it distributes to folders.

My colleague MikeT had a play with it all and has a quickstart on his blog. One of the downsides of that approach is that it uses the keyboard for panning around and zooming. I thought I'd take that and try to offer navigation (left/up/right/down) via dragging the mouse and also zooming in by clicking the mouse. To zoom out, I had to keep with using the keyboard (Spacebar was my choice). Assuming that you have the Silverlight 2 runtime installed, the results are here. The source is work in progress but should anyone care about it too much I can share.

It was actually more work than I anticipated. Detecting mouse movement is easy, but making it scroll half-sensibly dependent on how zoomed in or out it is, and also to vary the drag speed dependent on how aggressively the mouse is moved was not as straightforward (to me). My example also doesn't really make as a good sample because I used an image that isn't sufficiently large or deep. To truly experience the beauty of the control, please visit the links at the top.

If you visit the links at the top you will also find that scrolling is much more natural because in addition to mouse clicking for zooming in, the mouse wheel is also used. Mouse wheel events are not directly supported in managed code and require javascript assistance. There is a sample that shows you how to do that on mharsh's blog (but it doesn't include the panning and zooming on click).

So if you aggregate all the sources of information I list above, you can come up with the complete sample ;-).
Comments [3] |#Permalink
Friday, March 07, 2008 11:44:00 PM (Pacific Standard Time, UTC-08:00)
Very true, every example seemed to offer a part of the puzzle. I've written up my post here with my sample from thailand and full source code:
http://www.soulsolutions.com.au/Blog/tabid/73/EntryID/394/Default.aspx
John.
John
Sunday, March 09, 2008 7:42:00 AM (Pacific Standard Time, UTC-08:00)
Daniel - have you tried this in Firefox? It doesn't work for me (I don't see your app at all). I see what I was doing wrong with the HTML bridge but it doesn't help very much as the managed handler doesn't get the wheel data from FireFox from the "detail" property - it's always 0 for me. A pity as it's much neater than the JS solution. Mike
MikeO
Sunday, March 09, 2008 9:52:07 AM (Pacific Standard Time, UTC-08:00)
John: I have updated my solution to do everything I state above plus mouse wheel support without having to drop to JavaScript at all. Credit for the mouse wheel support goes to Pete:
http://blois.us/blog/2008/03/ive-heard-number-of-people-wondering.html

Mike: Thanks for reporting it not working on FireFox – indeed it didn't render at all. However, it had nothing to do with the mousewheel and all to do with my HTML which had no styles that FF apparently requires. Added those and now it all works fine. Thanks again to you, and big boo to all my other readers for not reporting this (or big cheer for using IE like me :-p)
Daniel Moth
Comments are closed.