Strange gray levels in base image after adding and removing a layer

67 views
Skip to first unread message

Vincenzo Ciancia

unread,
Jul 2, 2021, 2:38:46 PM7/2/21
to cornerstone platform
Hello,

I am using cornerstone to design an user interface for an academic project, related to a new, declarative language for image analysis (see www.voxlogica.org). 

I am still learning in general how the whole thing works. For now I have loaded a base image in nifti format, learned how to change the current slice with the mouse wheel, which I do manually, because as far as I understand it would be difficult to also change the current slice in overlays using the appropriate tool. I learned how to add an overlay and designed my own logic to manage the mouse wheel. 

The problem is when I just add and immediately after remove an overlay (no mouse wheel events involved) the colormap of the base image is different, for instance the background (color 0) is grey. Don't understand what's going on.

thanks in advance for any hint,

Vincenzo

Vincenzo Ciancia

unread,
Jul 2, 2021, 4:46:37 PM7/2/21
to cornerstone platform
Here is a minimal non-working example:


Here is the source code (images in the zip). The second div is not displayed correctly after removing the overlay: the image is all white. Also: removeOverlay does NOT remove the overlay (even in the first div). I need to "displayImage" again, which is odd?

Thanks

Vincenzo


<html lang="en">
<head>
<script src="cornerstone.min.js"></script>
<script src="cornerstoneWebImageLoader.min.js"></script>
<script src="cornerstoneNIFTIImageLoader.min.js"></script>
</head>

<body>
<div id="test"></div>
<div id="test2"></div>
</body>
<script>
(async () => {
cornerstoneNIFTIImageLoader.external.cornerstone = cornerstone
cornerstoneWebImageLoader.external.cornerstone = cornerstone

let div = document.getElementById("test")
let div2 = document.getElementById("test2")


cornerstone.enable(div)
let img = await cornerstone.loadImage("http:image.png")

cornerstone.displayImage(div, img)

let overlay = await cornerstone.loadImage("http:overlay.png")
let id = cornerstone.addLayer(div, overlay)
cornerstone.removeLayer(div, id)
cornerstone.displayImage(div, img)

cornerstone.enable(div2)
let img2 = await cornerstone.loadImage("nifti:Brats17_TCIA_471_1_flair.nii.gz#75")

cornerstone.displayImage(div2, img2)
let overlay2 = await cornerstone.loadImage("nifti:Brats17_TCIA_471_1_seg.nii.gz#75")
let id2 = cornerstone.addLayer(div2, overlay2)
cornerstone.removeLayer(div2, id2)

cornerstone.displayImage(div2, img2)
})()
</script>

</html>



Reply all
Reply to author
Forward
0 new messages