"Get Image" Invoke Node with transparency support?

[EthanJ]

In the UI for my application, I have a graph with a mostly transparent background on top of another object. I would like to be able to export an image of these two controls as they appear on the screen. The most obvious method for doing this is to call the "Get Image" invoke node to get image data for both, draw the image data for one on top of the other, then export the image. However, I'm having issues with the transparency. Specifically, if the "BG Color" parameter for the "Get Image" function is set to transparent, then it treats it as if it is black. As a result, instead of getting a transparent background in my resulting image, I get a black background, and when I draw it on top of the background image, it covers everything up.

I have also tried setting the "BG Color" to a color that does not appear in the image and then using the "Create Mask" VI to remove pixels of that color from the image. However, this results in a highly distorted image if the background image is a significantly different color from the mask color (see attached image). Does anyone know how to get an image of a control on the front panel with proper transparency?

I have attached example code as well to illustrate what I am trying to do.

[James_W]

From my experience so far with the LabVIEW image editing functions, Transparancy doesn't seem to be 'available'.

Whilst you can set the UI (FP and BD) to have transparency, imported or exported images do not render transparency correctly when converting through the PNG file system (from recollection, JPG and BMP don't support transparency).

I'm happy to be corrected on my statement above, but I think your on a losing streak here.

James

[James_W]

Sorry,

totally misread your post...

You essentially want a screenshot of the (transparent) graph with picture behind it?

Export a picture of the FP after having made sure the graph areas you want are transparent with the tools palette.

Then is you only want to look at a certain area, you could crop the picture with the image editing tools as you know the pixel sizes you are dealing with and their relation to the origin.

I can't see your VI as I only have LV 2015 on my PC atm. If you repost I can take a look.

James

[EthanJ]

Thanks! I'm attaching the VI saved for LabVIEW 2015.

Grabbing an image of the FP and then cropping is a possible solution, however that doesn't quite give us the end product we're looking for for a few somewhat minor reasons:

1. The underlying object in my actual application is actually another graph object (an intensity graph) with transparent axes background. As such, the "Get Image" invoke node produces an image with a background color of whatever color I want (white) around the axes rather than the gray background color of the front panel.
2. I also sometimes have other controls (buttons, etc.) on top of the graph on the front panel that I do not wish to have included in the resulting image that is exported.

For comparison, see the two images below:

The top image just looks "cleaner." This may end up being the only solution, but I'd like to make sure it's not possible to get the images of just the graphs with proper transparency first. I'm also attaching the example VI I used to generate those two images.

[AlanZ]

I think this task will be pretty difficult to accomplish, since the Get Image function doesn't save the transparency channel, and the "distortion" you're seeing is actually leftover semi-transparent pixels from Windows trying to make text more smooth.

You could also try disabling Windows ClearType to reduce the amount of anti-aliasing on the text to help with the distortion.

[zou]

> draw the image data for one on top of the other

You can't use that function to merge 2 32bit images, the draw function doesn't support transparent (alpha channel).

You should be able to merge the images yourself by adding the pixel values.  Calculate R,G,B component separately:  R1*(A1/0xFF) +R2*(A2/0xFF) = new red component

No need alpha channel for result.

It might be a little slow for large images.

[zou]

You should use 32 bit image for transparency.

[James_W]

Hi Ethan,

FP Screenshot VI is perfect for what you need - use the VI not the control function for the following reason:

From playing with the Get Image VI, I found that the Yellow circle on the background image disappeared on concatenation with graph image depending on the colours used.

If you use a System colour as the BG colour (and mask - mask doesn't seem to matter) with a transparent rectangle, this seems to create problems. User colours seem to be better.

On the basis you can't predict 100% what colours the graph will use on all systems for all plots, it would be better to:

1) choose the background colour of your VI (and Graph 2),

2) ensure that any controls on the top of the graphs are set to not visible

3) take a screen shot (and process for the ROI)

4) reset controls to the correct state

This should set you up better for the longer term.

(The top image only "looks cleaner" because you are looking on a white webpage, if the webpage were grey... - so change your VI colour to white for the main colour from the default grey, or put a white container behind the stuff you want to see.)

James

[James_W]

---

@zou wrote:

> draw the image data for one on top of the other

You can't use that function to merge 2 32bit images, the draw function doesn't support transparent (alpha channel).

You should be able to merge the images yourself by adding the pixel values.  Calculate R,G,B component separately:  R1*(A1/0xFF) +R2*(A2/0xFF) = new red component

No need alpha channel for result.

It might be a little slow for large images.

---

Of follow the code from here:

https://forums.ni.com/t5/Example-Program-Drafts/Overlay-an-Image-on-an-Image/ta-p/3531816

(many different ways)