rii-mango / Papaya

A pure JavaScript medical research image viewer.
Other
539 stars 199 forks source link

viewer measurements #86

Open vsoch opened 7 years ago

vsoch commented 7 years ago

hey @rii-mango ! I am adding papaya to an application for a radiologist to annotate images, and for one of the views it would be useful to be able to draw a line and measure. I think there are a couple of options here. Either 1) there is something already in papaya (is there and I can't find it?) or 2) I could make an overlay over the image, and then wherever the user clicks the overlay, extract the coordinate from papaya below it (based on corresponding window location of the two canvas?) and then draw a line. What I'm not sure about (and would want to ask you) is how to make sure that the pixel space maps on to some unit that is intuitive for the measurer (Eg, if the radiologist is measuring a tumor and typing in some text box, he or she would want to be able to write out the measurement). Thanks for your help!

martinezmj-ims commented 7 years ago

Hi. See the showRuler option. It might be what you need. It displays a line with a handle on each end. In the center of the line it displays the distance in millimeters. See the papaya.viewer.Viewer.prototype.drawRuler() in viewer.js for the implementation.

vsoch commented 7 years ago

Yes this is great!

image

I seem to only be able to control it maybe 1/5 times that it loads. I tried removing the crosshairs like:

   // Remove the crosshairs
   setTimeout(function(){
       papayaContainers[0].preferences.updatePreference("showCrosshairs","No")
   }, 500)

(a bit hacky, but it removes them after a pause) and it doesn't seem to make a difference. Where should I look to change how the ruler is used and updated? I think we would want bigger handles for the user.

Also, not sure if the pink is from my style or yours, but I highly approve :)

martinezmj-ims commented 7 years ago

So you are trying to grab the handles, but they aren't moving? If your image is very high resolution, then that might be the reason.

See papaya.viewer.ScreenSurface.prototype.findProximalRulerHandle() in screenslice.js. Note the papaya.viewer.ScreenSlice.GRAB_RADIUS constant. An easy fix is to just increase that constant value.

A more permanent fix is to calculate a ratio, such that as the pixel density increases you multiply the GRAB_RADIUS by some scale factor (works the other way too, if the resolution is extremely low). It looks like I did this for findProximalRulerHandle() in screensurface.js but not in screenslice.js.

I think the color was just a random color that stood out. You can control all the UI aspects of the ruler in papaya.viewer.Viewer.prototype.drawRuler() in viewer.js.

Hope this helps!