How do I get picture control to display PNG images with transparent background?

[VRspace4]

I have an image of a robot arm looking from the top with a transparent background and saved as PNG. When I drag the image directly to LabVIEW front panel, the image shows properly with the transparent background, but I want to manipulate it such as rotate the image. I used the Read from PNG.vi to read the image to a picture control, but the background isn't transparent anymore. Am I missing something?

Please help.

[tst]

The picture control works differently (it is essentially a string which describes the vector or bitmap image) and does not have support for alpha channel transparency.

If you will look inside the unflatten pixmap VI, you will see that it strips the alpha channel from 32 bit images.

[unclebump]

Try this info.

https://knowledge.ni.com/KnowledgeArticleDetails?id=kA03q000000YITiCAO&l=en-US

[JeffBoettcher]

unclebump gets 5 stars for referring you to a document that I wrote.  🙂

Incidentally, I wrote it years back, for LabVIEW 7.0.  A couple of notes to summarize:

The picture control doesn't "really" support transparency.  However, the image data type supports masking, and stores the alpha channel, if present in your image data.  So you use the "Create Mask By Alpha.vi" referenced in that document to mask out pixels whose transparency is above a certain level.  It does not support partial transparency.  You could try to implement your own blending algorithm based on the picture control's current pixel values, and the image data's RGB value and transparency value, but it would probably be very slow.

Also, that VI ships with 8.0 and later.  I don't know if it's on the palettes but it lives here:  vi.lib\picture\picture.llb\Create Mask By Alpha.vi

Good luck!

[Thomas_robertson]

Is there any way to do alpha transparency now that we're a few more versions (LV 2012) down the line?  This binary opaque/transparent thing is causing us trouble.

We have a series of png images (our company logo which we want to embed into a graph) which use alpha transparency and greyscale pixels around the edges of charecters to make very smooth looking curves.  When we read from png file and select a transparency threshold, we have to pick the one which looks least bad.  However, ultimately they all look kind of bad (the curves look jagged and pixelated).

The only way we figured out around this is to drag the picture file onto the front panel of a vi (seems to preserve its alpha transparency), call that vi dynamically, and insert its front panel onto a subpanel which we then place over the graph we want to show the logo on.

[tst]

There are some posts both here and on the LAVA forums which should have code showing how to programmatically do the blending (basically read the alpha channel and scale each pixel's RGB values for the FG and BG images according to it). This works for pictures, which might help you, since the graph should have a property for displaying a picture over the graph, so you can get an image of the graph, then blend it with the logo and display that image as the top picture.

It seems, though, that it would be easier to simply add the image directly above the graph, just like you did. You shouldn't need subpanels for that - just drag the PNG into the FP and place it over the graph.

[Thomas_robertson]

@tst, We need the ability to place the logo in any quadrent of the graph, as well as keep it there as the user moves and resizes the graph. Additionally we have 6 different logos based on size of the graph and color of the graph background.  So, would you agree that the idea of "just dragging the picture onto the graph" wouldn't work for us?

Do you have a link to one of those LAVA links you mentioned?

[tst]

---

@Thomas_robertson wrote:

So, would you agree that the idea of "just dragging the picture onto the graph" wouldn't work for us?

---

Yes.

As for the code, a quick search for "png alpha" shows this. I didn't look at the code, but I assume it works. If not, the code is fairly simple to write yourself. Keep in mind that you need to get the image of the graph at the point to do the blending. I believe the Get Image method for the control will work, but if not, you can get the image for the entire FP and crop it.