rii-mango / papaya Goto Github PK
View Code? Open in Web Editor NEWA pure JavaScript medical research image viewer.
License: Other
A pure JavaScript medical research image viewer.
License: Other
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!
Hi,
When displaying pixel value on DICOM images (in radiological mode) are you always using this line:
if (this.usesGlobalDataScale) { value = (this.checkSwap(this.imageData.data[offset]) * this.globalDataScaleSlope) + this.globalDataScaleIntercept; }
This means that you always showing HU if slope and intercept are present.
Regards,
Jongo
I'm attempting to use d3 to make a set of papaya objects from an array of image file paths (loaded from json). Do papaya objects need to be created using an associate string, e.g.:
var params = {images:
["images/ch2better_whitebg_aligned2EPI_V4.nii"]};
d3.select("body")
.append("div")
.attr("class", "papaya")
.attr("data-params", "params");
Or is it possible to create the papaya objects using the params
variable directly? Needing a string literal for elements in an array of parameters seems difficult.
Thanks in advance.
Is there any way to turn off mouse scroll event? It is nice to have that feature but I have an issue if I added two displays for example:
<div class="papaya" data-params="params_1"></div>
<div class="papaya" data-params="params_2"></div>
mouse scroll event only works with the first display. There is physical scroll bar under each display which can be used as an alternative. The issue with mouse scroll is that I can't scroll down the page to view the second display. So, if I can remove the mouse scroll event, I think that will solve the problem.
Hi,
My goal is to display several overlays on the same image, but not at start, i want to let the user pick which overlay he wants to load and see, without reloading images. The amount of overlays can be high and thats why i can't permit myself to load them all at start.
Images are loaded one after another. Slow on loading remote ct-scans.
Papaya is looking great.....
How to load images automatically from folder containing dicom images/series?
currently able to load single image.
var params = [];
params["images"] = ["data/.....?"];
let me know the possibility Thanks
Could I for example turn of the toolbar and the two slice viewers on the right? How could I do this?
I have two dicom images sets, each containing like 245 images or so. I am try to load them using javascript/jquery via an ajax call. In my HTML, I have kept a select tag that selects the set and depending on the selection, I get those images and display them using the viewer. I do it like this :
HTML :
<select id="ct-set-select">
<option value=null>-</option>
<option value="set1"> Set 1</option>
<option value="set2"> Set 1</option>
</select>
...
<div class="papaya" data-params="default_viewer"></div>
Javascript/Jquery :
var default_viewer = [];
$(document).ready(function(){
$("#ct-set-select").on("change",function(e){
var ct_set_select = $("#ct-set-select").find("option:selected").attr("value");
if (ct_set_select == null){
var params = [];
params["images"] = [];
params["kioskMode"] = false;
params["showControlBar"] = true;
papaya.Container.resetViewer(0,params);
}else{
$.get("/getSet",{"set_id" : ct_set_select},function(data){
// data is a array of image file names
var params = [];
params["images"] = [data];
params["kioskMode"] = true;
params["showControlBar"] = true;
papaya.Container.resetViewer(0,params);
});
}
});
});
Now the problems that I am facing here are :
kioskMode
as false
. All are disabled for some reason.Is there a better documentation on how to pass the parameters to the viewer?
Or is there a way to wipe clean the params, and start a fresh viewer.
Is there any way I can change layout to suit portrait monitor ?
I have problems displaying this map: https://www.dropbox.com/s/2ig8llrzo64xfrv/Screenshot%202015-12-10%2016.37.16.png?dl=0
There appear to be fringes/borders on edges of the parcels. However when I view the same map in mango it looks correct:
I've tried to turn off smoothing, but it did not change anything. You can download the map here:
http://neurovault.org/media/images/1003/brain_parcellation_mcinet_basc_asym_111clusters.nii.gz
PS other parcelation maps in NeuroVault are rendered correctly. For example: http://neurovault.org/images/1700/
Can we display the image to world transform for the image somehow?
Does nifti-reader-js take care of it or does Papaya do?
I am trying to get the transform for this file:
https://drive.google.com/file/d/0B2-PspfnvPNgY1R2SFFTd3YtaGM/view?usp=sharing
but I get inconsistent results between Slicer, nibabel, etc.
Best,
Is there a good way to use the Nifti parser as a stand alone project?
I am playing around with it as I want to parse/visualize Nifti datasets on my own but it seems tightly integrated into Papaya.
Thanks!
I want to create a custom colormap for the freesurfer aparc+aseg file. I have a dictionary that maps voxel values to rgb colors, but the custom colormap function (lookupRed, lookupGreen...) has inputs that are normalized to 0-255. Is it possible to access the un-normalized value of the voxel in these methods?
Is the variable alpha intended to be used as transparency for the layers? I currently need to be able to adjust each layer separately, and I implemented this in screenslice.js Line 104. Would this be the correct usage of alpha?
if ( (alpha > 0) || (ctr === 0)) {
index = ((ctrY * this.xDim) + ctrX) * 4;
var layerAlpha=this.screenVolumes[ctr].alpha;
var newRed=(this.imageDataDraw.data[index]*(1-layerAlpha) + this.screenVolumes[ctr].colorTable.lookupRed(value)*layerAlpha);
var newGreen=(this.imageDataDraw.data[index + 1]*(1-layerAlpha)+this.screenVolumes[ctr].colorTable.lookupGreen(value)*layerAlpha);
var newBlue=(this.imageDataDraw.data[index + 2]*(1-layerAlpha)+this.screenVolumes[ctr].colorTable.lookupBlue(value)*layerAlpha);
this.imageDataDraw.data[index] = newRed;
this.imageDataDraw.data[index + 1] = newGreen;
this.imageDataDraw.data[index + 2] = newBlue;
this.imageDataDraw.data[index + 3] = alpha;
}
Hi,
first of all thanks for providing this pieces of software. This is the best implementation of a pure JS NIfTI viewer that I have come across so far!
I am currently setting up a site where I want to use papaya, but I am hitting some issues. I am going to file separate issues about them. Here is the first:
http://www.studyforrest.org/mod_t2w.html
This page tries to implement an on-click loaded viewer as in the lorem example. However, papaya modifies the page in a way that is undesired (overflow:hidden), because it believes that it needs to work in fullscreen mode. I think that happens, because
no viewer is present when startPapaya() run for the first time, but I may be wrong.
Is there any way to avoid auto-detection of nested use and force it?
File in question:
http://neurovault.org/media/images/845/EMO_SOC.nii.gz
Stacktrace:
Uncaught RangeError: Invalid typed array length
papaya.volume.ImageData.readFileData @ papaya.js:786
papaya.volume.Volume.finishedReadImageData @ papaya.js:910
(anonymous function) @papaya.js:752
papaya.volume.nifti.HeaderNIFTI.readImageData @ papaya.js:798
papaya.volume.Header.readImageData @ papaya.js:780
papaya.volume.Volume.finishedReadHeaderData @ papaya.js:909
(anonymous function) @ papaya.js:752
papaya.volume.Header.onFinishedHeaderRead @ papaya.js:780
(anonymous function) @ papaya.js:752
papaya.volume.nifti.HeaderNIFTI.readHeaderData @papaya.js:798
papaya.volume.Header.readHeaderData @ papaya.js:776
papaya.volume.Volume.finishedReadData @ papaya.js:908
(anonymous function) @ papaya.js:907
I haven't tracked this down, but wanted to report it:
Papaya doesn't handle screen orientation changes completely. When I rotate the screen by 90 degrees the canvas coordinates no longer match the canvas content -- there maybe even an axis flip. When rotated back everything is fine again.
Sorry for the vague description.
Hi again!
You showed that there is an oblique plane MPR support already in the Papaya code #46, and that it is missing UI controls at the moment. Do you have some short term plans to implement oblique MPR UI controls, as it is really useful feature?
Currently papay does not support displaying images with more than 4 bytes of data in each voxel. Support for float64 images (even through casting to float32) would be very appreciated!
So I have built it adding "-atlas /usr/share/fsl/data/atlases/NeuroSynth-525-posterior_z.xml " on a NeuroDebian box to enable NeuroSynth atlas to see how well it would work. Unfortunately it didn't (see below) and I remembered that I had to patch fslview to support this kind of generalization over their original "Probabilistic" atlases. Original discussion/patch happened on the FSL list and I was promised that the patch will be included in the next release of FSLview whenever it eventually comes out https://www.jiscmail.ac.uk/cgi-bin/webadmin?A2=ind1309&L=fsl&D=0&P=11451 so I guess it should be safe to rely upon it
Uncaught TypeError: Cannot call method 'getVoxelAtCoordinate' of null papaya.js?version=0.6.2&build=509:22
papaya.volume.Volume.getVoxelAtCoordinate papaya.js?version=0.6.2&build=509:22
papaya.viewer.Atlas.getLabelAtCoordinate papaya.js?version=0.6.2&build=509:22
papaya.viewer.Display.drawDisplay papaya.js?version=0.6.2&build=509:22
papaya.viewer.Viewer.updateCursorPosition papaya.js?version=0.6.2&build=509:22
papaya.viewer.Viewer.mouseMoveEvent papaya.js?version=0.6.2&build=509:22
(anonymous function)
Trying to open the attached file in chrome (>= 47) results in a crash. Firefox (>= 42) is very slow and becomes unresponsive for a while, but then it is able to open the image, leaving however the viewer in an unusable state.
I understand that the file is quite big, but dealing with such big images is not so uncommon.
In Chrome version 43.0.2357.10
'CanvasRenderingContext2D.webkitImageSmoothingEnabled' is deprecated. Please use 'CanvasRenderingContext2D.imageSmoothingEnabled' instead.
There's no way to hide/show overlay. When I press the "close overlay" button, not only is the overlay hidden, but the entire tool disappears.
It'd be great to have a hide/show overlay option.
Originally opened here:
NeuroVault/NeuroVault#399
I'm having issues opening certain DICOM files, which I can open with Osirix or Ginkgo CADx with no errors.
In chrome I get an error: daikon.js:427 Uncaught TypeError: Cannot read property '0' of undefined
The problem seems to be located in method quantizeAndInverse
: component.quantizationTable
seems to be undefined.
Attached is one example file causing the problem.
Thank you for your great job!
Hello,
We're loving Papaya and we're quickly trying to integrate it into our workflow.
However, I think we've found a little bug.
This is the correct rendering,
However, sometimes, it gets rendered like this on chrome on Debian.
I can only recreate the problem randomly, I would say half of the time, it loads normally.
I can't seem to recreate the problem on chrome on Mac.
We were wondering if you had any ideas as to why this was occurring.
Hi,
Papaya currently supports orthogonal mpr only. Do you have plans to support oblique (non-orthogonal) mpr. If so what is the time frame to expect it?
Regards,
Jongo
I love Papaya - its by far the best MRI viewer my lab has experimented with. Out of curiositiy, is it possible to close the current image and load a new one entirely through Javascript, or must a new page be navigated to with the neccessary params block defined?
Ive managed to reverse engineer a number of features into Mango, namely moving the cursor around, but this last issue still troubles me as it seems as if the constructor methods are no longer present once the viewer loads.
Thanks!
Does it support 4th dimension niftis? Like fMRI?
I'd like to use papaya on a site built using the bootstrap framework. However, papaya doesn't seem to like layout configurations without fixed pixel height and width. Even setting width to a fixed pixel amount and height to 100% doesn't work, as the JS code
seems to compute a (wrong) height and assigns it to the parent div.
Do you have any advice on how papaya can be set up in order to scale to different, e.g. mobile device, screens sizes without having to make fixed assumptions upfront?
Thanks!
When in kiosk mode the viewer states "drop here or open file menu". This can be confusing for users as there is no file menu. Depending on the size of the image to be displayed this might be visible for quite some time. On slow connections it may even make the impression that nothing is happening at all.
One solution could be to state that the viewer is loading data when in kiosk mode, or maybe even whenever images are already configured, regardless of kiosk mode or not.
Thanks!
Is it somehow possible that the images of the second and third viewer instances are being loaded while looking at the images of the first viewer in order to save time and increase the performance?
is there a way to dynamically (with jquery/javascript) move the position of the crosshair for the user? I'm poking around all the different papayaContainer[0].viewer functions, but haven't found anything yet. I have a feeling the answer to this is an easy one!
It would be nice to have a mode where the menus for adding images and global preferences are disabled (as in kiosk mode), but the user can still alter the parameters of the LUTs.
Thanks!
When you move crosshairs, slice changing is really fast, but with mouse scrolling it is slow. Usually, user positions crosshair on ROI and then scrolls either with mouse or scrollbar. Is it possible to make it faster or give me hint where to change it?
Thanks
Here is a demo of papaya showing an image that has its origin around the AC:
http://studyforrest.org/mod_fmri.html
However, papaya seems to have its P->A axis flipped, as it says 0,0,0 in world coordinates is in the posterior half of the brain.
The image in question is available here:
http://psydata.ovgu.de/forrest_gump/templates/grpbold7Tad/brain.nii.gz
Small issue when loading data synchronously and forming papaya objects:
d3.json("images/data.json", function(error, data) {
if (error) throw error;
var images = data.images; // array of file paths (not used in this example).
var params = {
worldSpace: true,
kioskMode: true,
showControls: false,
showImageButtons: false,
fullScreenPadding: false
};
d3.select(".row").selectAll(".papaya-viewer")
.data(images).enter()
.append("div")
.attr("class", "col-xs-6 col-sm-3 col-md-3 well rowCell")
.append("div")
.attr("class", "papaya")
.attr("data-params", "params");
images.forEach( function (d, i) {
papaya.Container.resetViewer(i, params);
});
});
When forming the papaya objects synchronously in this manner, each of the divs print out "papaya requires javascript...
". (I imagine the result will be the same if jQuery ajax is used). If this is done outside of d3.json (such as using a dummy array as data), it works fine.
Is there a way around this or do the papaya objects need to be formed asynchronously?
Thanks
Hello everyone,
I have a link https://github.com/mi-kas/DICOMcoffee ( demo http://chienvu.esy.es/DICOMcoffee-master/)
Author of this project is @mi-kas. I'm interested in this project. I have tried to open dicom files on this demo, but i can't see any picture. The viewer is still black. I don't know why this project run wrong.
Can you help me to fix it?
Thank you so much!!!!!
Chienvu
What is the javascript command to restart (eg, re-initialize the viewer) in the browser given updated parameters?
Would this be possible? I am making an interface that will read header info from a nifti, and would like to have a nice viewer instead of my lame histogram :) It would be something like:
// Function to add / remove image from viewer
function viewimage(nifti) {
// Reset viewer and load new images
papayaContainers[0].viewer.resetViewer();
papayaContainers[0].toolbar.updateImageButtons();
papayaContainers[0].viewer.loadBaseImage(["img/MNI152_T1_2mm_brain.nii.gz"],true)
papayaContainers[0].viewer.loadOverlay([nifti.data],true)
}
where nifti.data
is a Float32Array[902629]
or I could see something like:
papayaContainers[0].viewer.loadOverlay([file],true)
where file
is a fileReader object of some flavor.
I'm looking at the context manager wiki: https://github.com/rii-mango/Papaya/wiki/How-To-Make-a-Context-Manager . Is there a method that transforms the screen coordinates to real-world coordinates (and vice versa?) Thanks! @pbellec
A few years ago a very interesting visualization of statistical maps was proposed (see: http://mialab.mrn.org/datavis/index.html)
It allows researchers to see the thresholded version of the map (the outline), effect size (hue), and confidence (absolute t value) at the same time. In context of Papaya this functionality could be broken down into two components:
I know this is a lot to ask, but since we are scanning for longer and using bigger sample sizes displaying unthresholded statistical maps becomes more and more important. This would be a fantastic addition to Papaya!
Howdy,
I've noticed that in some circumstances when clicking on the viewer, the selected position is updated incorrectly. I've only observed this behaviour in Chrome (OSX Mavericks, Version 41.0.2272.3 dev (64-bit)).
More specifically, I've found that this occurs in two situations:
If a viewer is embedded within a <div>
element, with CSS style overflow: scroll
, and this div is scrolled down; for example:
<div style="width: 550px; height: 400px; overflow: scroll">
<div style="width: 500px; height: 500px;">
<div class="papaya" data-params="params"></div>
</div>
</div>
If a nested viewer is embedded normally on a page, and the user scrolls down the page, and then increases/decreases the page zoom. This is observable on the 'lorem' demo: http://rii.uthscsa.edu/mango/lorem.html
I've personally fixed this by updating the cached Viewer.canvasRect
attribute in Viewer.updatePosition
(pauldmccarthy@2fb0c2f).
This patch seems to fix the issue for me. However, I don't know the Papaya codebase well enough to judge whether this is a viable solution for other platforms.
Cheers,
Paul
Is there a way (preferably through params not compilation) to specify where Papaya should be looking for the atlas? I have multiple viewers on different URLs and I would like all of them to share one atlas.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.