Comments (10)
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?
from papaya.
P.S the demo only works on chrome!
from papaya.
Here's the general approach:
-
Decide the size and shape of the "brush".
-
Use the
mouseDown
andmouseMove
events to track movement of the brush. Note that themouseMove
events might be several pixels apart from each other, so you will need to "fill in" in between themouseMove
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 tomouseDown
ormouseMove
. -
Store the ROI data in some kind of data structure. You could maybe use an instance of
volume
. -
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.
from papaya.
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!
from papaya.
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.
from papaya.
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?
from papaya.
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.
from papaya.
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?
from papaya.
I'm going to close this up now. Let me know if have any other issues.
from papaya.
@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
from papaya.
Related Issues (20)
- Loading freesurfer apac+aseg overlay on top T1 HOT 1
- Trouble creating new visualizer when page is already loaded HOT 1
- Client loading received image HOT 2
- Negative image HOT 1
- Using Papaya with React.js HOT 1
- [Bug?] Problem displaying images with PSR orientation
- How to integrate Papaya in a React.js component? HOT 3
- Need to add ref to mainView
- Get coordinates where mouse is/click HOT 2
- Hide and show certain surfaces
- Hide and show certain surfaces HOT 1
- Load vector3 for surface or do transformation only for one surface file?
- Add surface to params using addViewer() without reloading the whole viewer
- Large DICOM datasets overwhelm Chrome's request quota
- Making debug HTMLs like in the tests directory & Dev Guide
- Callback when error loading the images/surfaces
- URL Query Parameters - Opening an nii file
- Retrieve current image from specific View HOT 1
- Float32Array to papaya.Container.addImage HOT 1
- Not able to push changes that I have create to contribute to the project
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from papaya.