Writing a plugin that displays two images overlapping and semi-opaque

[edsimmons]

Hi IJ list,

I'm currently writing a plugin for Micro-Manager that makes use of IJ
quite a bit. I'm processing images that arrive from the camera on the
fly and trying to display an image formed from bits of the incoming images.

The images arrive from the camera in MM - this is actually the
multi-camera plugin and provides two greyscale images in channels 1 + 2.
The two cameras have two physically different views and the images from
each are being analysed to determine the location of some alignment
features, using the positions determined from these alignment features
(already working) I would like to choose ROIs on the source channels and
form a new image - formed of one ROI from each channel where the two
ROIs overlap in the destination image. I have this working in principle
using the code below, but the aim is to have the two overlapping ROIs
semi-transparent so that the alignment of one image can be checked
against the other visually.

Here is my current code to achieve an example of the end result, but
without the desired transparency:

                 // splitdisplayImp is the target Imageplus that will
display the newly made alignment image
                 // imp is the source image with two channels, is a
composite image.

                 CompositeImage ci = (CompositeImage)imp;
                 ImageProcessor chan1 = ci.getProcessor(1);
                 ImageProcessor chan2 = ci.getProcessor(2);
                 Rectangle roi1 = new Rectangle(0,0,200,512); // for
example... these values are actually calculated on the fly
                 Rectangle roi2 = new Rectangle(200,0,200,512);
                 chan1.setRoi(roi1);
                 chan2.setRoi(roi2);
                 ImageProcessor src1 = chan1.resize((int)roi1.getWidth());
                 ImageProcessor src2 = chan2.resize((int)roi2.getWidth());

                 ImageProcessor dest = splitdisplayImp.getProcessor();
                 IJ.setForegroundColor(0, 0, 0);
                 dest.fill();
                 ImageRoi imageRoi = new ImageRoi(50,0,src2);
                 imageRoi.setOpacity(20);// despite trying this, no
transparency when the ROI is added to the imp later

                 dest.copyBits(src1,0,0,Blitter.COPY); // place the
first image into the imp directly
                 //dest.copyBits(src2,150,0,Blitter.COPY); // this
clearly overwrites the previous data in overlapping region

                 splitdisplayImp.setImage(dest.createImage());
                 splitdisplayImp.setRoi(imageRoi);
                 splitdisplayImp.show();
                 splitdisplayImp.updateAndDraw();

Many thanks for any suggestions...

Best regards,
Ed

--
Ed Simmons
[hidden email]
www.esimaging.co.uk

--
ImageJ mailing list: http://imagej.nih.gov/ij/list.html

[Rasband, Wayne (NIH/NIMH) [E]]

On Sep 30, 2013, at 10:26 AM, Ed Simmons wrote:

> Hi IJ list,
>
> I'm currently writing a plugin for Micro-Manager that makes use of IJ quite a bit. I'm processing images that arrive from the camera on the fly and trying to display an image formed from bits of the incoming images.
>
> The images arrive from the camera in MM - this is actually the multi-camera plugin and provides two greyscale images in channels 1 + 2. The two cameras have two physically different views and the images from each are being analysed to determine the location of some alignment features, using the positions determined from these alignment features (already working) I would like to choose ROIs on the source channels and form a new image - formed of one ROI from each channel where the two ROIs overlap in the destination image. I have this working in principle using the code below, but the aim is to have the two overlapping ROIs semi-transparent so that the alignment of one image can be checked against the other visually.

Here is a small, but self-contained, JavaScript example that displays two images overlapping and semi-opaque:

  imp = IJ.openImage("http://imagej.nih.gov/ij/images/FluorescentCells.zip");
  imp2 = IJ.openImage("http://imagej.nih.gov/ij/images/boats.gif");
  ip = imp2.getProcessor().resize(360,288);
  imageRoi = new ImageRoi(50,50, ip);
  imageRoi.setOpacity(0.40);
  imp.setRoi(imageRoi);
  imp.show();

-wayne

> Here is my current code to achieve an example of the end result, but without the desired transparency:
>
>                // splitdisplayImp is the target Imageplus that will display the newly made alignment image
>                // imp is the source image with two channels, is a composite image.
>
>                CompositeImage ci = (CompositeImage)imp;
>                ImageProcessor chan1 = ci.getProcessor(1);
>                ImageProcessor chan2 = ci.getProcessor(2);
>                Rectangle roi1 = new Rectangle(0,0,200,512); // for example... these values are actually calculated on the fly
>                Rectangle roi2 = new Rectangle(200,0,200,512);
>                chan1.setRoi(roi1);
>                chan2.setRoi(roi2);
>                ImageProcessor src1 = chan1.resize((int)roi1.getWidth());
>                ImageProcessor src2 = chan2.resize((int)roi2.getWidth());
>
>                ImageProcessor dest = splitdisplayImp.getProcessor();
>                IJ.setForegroundColor(0, 0, 0);
>                dest.fill();
>                ImageRoi imageRoi = new ImageRoi(50,0,src2);
>                imageRoi.setOpacity(20);// despite trying this, no transparency when the ROI is added to the imp later
>
>                dest.copyBits(src1,0,0,Blitter.COPY); // place the first image into the imp directly
>                //dest.copyBits(src2,150,0,Blitter.COPY); // this clearly overwrites the previous data in overlapping region
>
>                splitdisplayImp.setImage(dest.createImage());
>                splitdisplayImp.setRoi(imageRoi);
>                splitdisplayImp.show();
>                splitdisplayImp.updateAndDraw();
>
> Many thanks for any suggestions...
>
> Best regards,
> Ed
>
> --
> Ed Simmons
> [hidden email]
> www.esimaging.co.uk
>
> --
> ImageJ mailing list: http://imagej.nih.gov/ij/list.html

--
ImageJ mailing list: http://imagej.nih.gov/ij/list.html

[Ed Simmons]

On 30/09/13 17:15, Rasband, Wayne (NIH/NIMH) [E] wrote:

> On Sep 30, 2013, at 10:26 AM, Ed Simmons wrote:
>
>> Hi IJ list,
>>
>> I'm currently writing a plugin for Micro-Manager that makes use of IJ quite a bit. I'm processing images that arrive from the camera on the fly and trying to display an image formed from bits of the incoming images.
>>
>> The images arrive from the camera in MM - this is actually the multi-camera plugin and provides two greyscale images in channels 1 + 2. The two cameras have two physically different views and the images from each are being analysed to determine the location of some alignment features, using the positions determined from these alignment features (already working) I would like to choose ROIs on the source channels and form a new image - formed of one ROI from each channel where the two ROIs overlap in the destination image. I have this working in principle using the code below, but the aim is to have the two overlapping ROIs semi-transparent so that the alignment of one image can be checked against the other visually.
> Here is a small, but self-contained, JavaScript example that displays two images overlapping and semi-opaque:
>
>   imp = IJ.openImage("http://imagej.nih.gov/ij/images/FluorescentCells.zip");
>   imp2 = IJ.openImage("http://imagej.nih.gov/ij/images/boats.gif");
>   ip = imp2.getProcessor().resize(360,288);
>   imageRoi = new ImageRoi(50,50, ip);
>   imageRoi.setOpacity(0.40);
>   imp.setRoi(imageRoi);
>   imp.show();
>
> -wayne

Thanks Wayne,

I wondered what I was missing there...  :-)

Best,
Ed

--
ImageJ mailing list: http://imagej.nih.gov/ij/list.html