drawing ROIs

[akeshavan]

I am trying to use papaya to draw ROIs. So far, I am able to use the Context Manager to log points and calculate the real world coordinates. Is there a way to use this to "paint" ROIs? I'm happy to contribute, but I'm not sure where to start. Thanks!

[rii-mango]

Here's the general approach:

1. Decide the size and shape of the "brush".

2. Use the mouseDown and mouseMove events to track movement of the brush. Note that the mouseMove events might be several pixels apart from each other, so you will need to "fill in" in between the mouseMove points. A simple approach is to just find the set of pixels that the brush crossed over, then center the brush on each of those pixels and fill in using the shape of the brush -- do this for every call to mouseDown or mouseMove.

3. Store the ROI data in some kind of data structure. You could maybe use an instance of volume.

4. When painting, for every pixel check to see if the ROI is on/off. If on, paint that pixel.

That's a very high-level overview. It won't be a simple change, but it is definitely doable if you want a small project to work on. We haven't added ROI support mainly since there's no way to save the generated ROI data -- but it may be useful to say create an ROI to calculate some statistics.

Other thoughts...

• A different and probably simpler approach than painting, would be tracing. In this case the user can click repeatedly to draw the ROI shape. You can store this shape as a vector shape (the array of points that describe the shape, not image data like in painting). When drawing, you can then calculate if each point in the slice is inside/outside the shape (slower than simply looking up the voxel in the painting example).
• An even simpler case would be to allow only tracing rectangles and ovals.

[akeshavan]

Thanks for the suggestions! I'm actually more interested in tracing, and I have a server I'd eventually send the tracing to. I'm running into a small problem - for some reason $('#papaya').on("mousedown", function(){...}) isn't firing, but "click" and "mousemove" work. Is there something blocking this event, and is there a way for me to get around it without changing the papaya code?

Even $(document).bind("mousedown", function () {... }); only works when I click outside the viewer!

[rii-mango]

The reason your mousedown listener wasn't firing is because stopPropagation() was being called in papaya.viewer.Viewer.prototype.mouseDownEvent(). I'm not sure exactly why I used stopPropagation() there -- it might have been an initial attempt to disable right-click context menu (the native browser one) or some cross-browser issue. I'm leery to remove it, but what I did was to add a workaround at least for now.

Get the new build and try this: papaya.Container.allowPropagation = true; That should skip all of the stopPropagation calls. Hope this helps.

[akeshavan]

Thanks! Now, I can mousedown to start the tracing, mousemove to add points to it, and mouseup to end it.

Now my problem is that as soon as I mousedrag, the previous point I drew is cleared, so you can't really see what you've traced! On each mousemove, I could re-draw the all the points in my "tracing" array, but this doesn't seem very efficient. Is there a better way to do this?

[rii-mango]

It's possible to only update the part of the image that was changed, such as where the latest point was drawn, but this will get complicated. It's a lot simpler to just re-draw the entire scene each time.

Save your state (the list of points), then just re-draw all the points each time. It may not seem efficient, but considering all the work it's already doing to redraw the underlying image (see papaya.viewer.ScreenSlice.prototype.repaint()) it's a drop in the ocean -- unless you're talking about thousands of points, you won't notice any degradation in performance doing it this way.

[akeshavan]

Ok, here is a demo of what I have so far: http://mindcontrol.herokuapp.com/freesurfer/sub86516-sub86516-000-MPRAGE . On the left hand side, click on the "logged curves" menu, and then shift + click and drag to draw on papaya.

When I move the mouse slowly, I don't notice any performance issue, but when I move quickly, I see a lag. However, the lag isn't any different from the lag I see when I look at the crosshairs during a click+drag (maybe this is built in?). Alternatively, I could just get rid of the mouseup/mousedown requirement and only shift+mousemove to draw, but that feels unintuitive to me.

The other thing I've noticed is that my re-draw occurs only on the mousemove even though I call it in the mousedown/up events. I think my repaint in mousedown/up is fired before the papaya.viewer.ScreenSlice.prototype.repaint(), which then erases my drawing. This causes some weird flashy behavior - do you have any suggestions?

[akeshavan]

P.S the demo only works on chrome!

[rii-mango]

Sorry for my late reply. You demo looks awesome! I am unable to draw though. I created an account, did shift-click and drag. I see a few errors in the console. I'm using OS X Chrome. What do you think?

[rii-mango]

I'm going to close this up now. Let me know if have any other issues.

[hongliang666]

@akeshavan I have a simple project which needs a function like "drawing ROIs", I have created an account, and try your demo, it is so awesome! But in the source code I can't find the function to draw ROIs, Can you tell me where to implement the function of drawing curves in the source code? Thanks in advance