This project is read-only.

Deep Zoom Annotations?

Feb 11, 2009 at 7:23 PM
How are the annotations on the ECG chart deep zoom control achieved? I'm not even too concerned about the textbox that appears to type the annotation. That part would be easy to add. I guess what I'm confused about is the drawn border created in the annotation.

I've been searching the 'net, trying to find something, somewhere, explaining how to draw back to the multiscale image control. I've figured out how to get a top-left and bottom-right point and return that information, but actually drawing back the highlight border is beyond me.

I thought about nesting the deep zoom control in a canvas, then generating my own clipping and scaling algorithm for each child border I created to give a simulated effect of drawing borders to the multiscale image. But then I thought about it some more. There HAS to be a better/easier/more efficient way available that I'm entirely overlooking. I don't want to go about the hack-ish method of getting things done if there's a better way.

Any help would be appreciated. Thanks.
Feb 16, 2009 at 8:40 AM
Hi Ravant,

Thanks for your interest in Microsoft Health CUI and the Patient Journey Demonstrator.

The deep zoom annotation is achieved by placing Silverlight objects (TextBox's, Borders, Shapes etc.) on top of a Multi Scale Image. The Silverlight objects are placed inside a single Canvas, and are then moved around and resized when the Multi Scale Image fires it's Viewport Updated event.

The algorithm is relatively simple. It simply assigns a Sub Image whithin the Mutli Scale Image to each Silverlight object, and the X,Y offset that the object sits in relation to the Sub Image. As the Viewport updates, we calculate new coodinates for each object based on where it's corresponding SubImage is. The clipping is done on the entire object canvas, rather than on each object to make that simpler too.

I hope this helps, and if you have any more questions, fire away.

Feb 17, 2009 at 2:32 AM


Thanks. Helps out tons. While the answer isn't as simple as one would hope (just doing a draw-back to the MultiScale Image), it does confirm what I was (sort of) originally thinking. I'll have to start developing in that direction.

Last question, however.You said it assigns a sub-image within the multiscale image to each Silverlight object. The image I'm using is a single, large-resolution flat image. On this image, there can be any number of points of interest to annotate, like a broken bone, and a couple of contusions near said break on an MRI, for example. (Weak example, I know, but it's the one I've been given to work with for now.) The image is a single image, no collection in this case. I'm not sure of any "sub-images" involved here other than the main. So can you clarify what you mean when you say it assigns a sub image? Does it take an existing sub-image and link it to an object? If so, can every object be linked to the same single, high-resolution image I have to work with?

Thanks again for all of your help.


Feb 17, 2009 at 8:14 AM
Hi Eddie,

Actually, I reckon that this is the most simple way. If you think about it, when you prepare an image for Deep Zoom, that image is broken down into loads of tiles at different resolutions. If you then wanted to added some extra grapics to that image, you would need to parse the deep zoom XML data to figure which tiles are needed for the annotation (which would be complex enough!), at each level of scale, and then do some complicated maths to divide the annotation into peices to render on top of the respective tiles. Of course, this would need to be handled on the Server too, as Siverlight cant write Bitmaps.

By placing Silverlight objects on top of an Multi Scale Image, they can be animated, have all of the interactivity of any other Silverlight control, but perhaps most compellingly, are always visible. When the Deep Zoom image has to get some new tiles, the image can be blurred for a period whilst it downloads, this is not a problem for you Silverlight objects, and thus your users wont get lost trying to quickly zoom into a point of interest.

Of course, if you really wanted the annotations on the Deep Zoom image, I would write a simple WPF app that took in the source image, and the annotation data, and rendered a complete new image, before processing it for Deep Zoom.

With regards to 'sub image' - the ECG results are a Deep Zoom Image Collection, i.e. they are multiple images in one Deep Zoom control, hence the ability to animate each chart individually. When I assign a sub image to an annotation, I simply store which chart the annoation relates to. If you just have 1 large image, then that makes things even simpler - you do not need to worry about SubImages. Just get the ViewportUpdated event, and look at the Width and Origin value to calculate where to put your annotations.

Hope that helps,
Feb 17, 2009 at 7:30 PM

That does help, quite a bit, actually. Thank you much.

May 21, 2009 at 3:16 PM

Hi there Martin,

I downloaded the MSCUI file on the site, but can't seem to find the ECG or anything to do with PatientJourneyDemonstrator / SecondaryCare... where can I find this. I want to look at the code related to the deep zoom.


May 29, 2009 at 8:42 AM

Hi mpraath,

We have not released the code for the Patient Journey Demonstrator, however, the toolkit contains many of the controls seen in the demonstrator.

The above posts should provide some guidance for building an experience similar to the ECG annotation experience.



Jun 3, 2009 at 1:45 PM
Edited Jun 3, 2009 at 1:49 PM

Thanks so much Martin,

I got the annotation to work pretty much the way you described. This was of utmost value. Thanks so much. I do see that sometimes it is a bit "sore" on the eyes when the annotation resizes... I had a look at and they have an amazing annotation themselves. It almost seems like the annotation is directly on the image... so smooth is their transition.

I wanted to know. Do you know how to do annotation in the way they do it... so that it looks like you actually drew on top of the subimage... any way to make it smoother will help me a lot. IF you have ANY clue as to what the guys at colaab uses please let me know.

Thanks again for the above.

Go well!