Using images with transparency in flex buttons

[jchernus-fikst]

Hey there!

I'm trying to design a TouchGFX GUI using a background image that has some placeholder 'boxes' (that will eventually hold status of things) and custom flex buttons. I'd like these buttons to have rounded edges, so I am using PNGs with transparency around the edges. However, TouchGFX seems to ignore the alpha of 0 and fill that space with blue - see screenshots of the buttons below:

They appear the same way in the simulator. Am I doing something wrong? 

Thanks for your help!

Julia

[GaetanGodart]

Hello @jchernus-fikst and welcome to the community!

Unfortunately, I am not able to reproduce the error.
For me it displays correctly both on the simulator and on the board :

Here is what I have done :

1. add a background image
2. add a flexbutton
3. add an image to that flexbutton
4. select an image with rounded corner and transparency from the TouchGFX Stock
5. remove the initial box of the flexbutton

I am using TouchGFX 4.24.2, what about you?

Can you share a simple project with the error? (or at least the png file so I can test it).

Find attached my project.

Regards,

[jchernus-fikst]

Thanks for looking into this, Gaetan! 

Here are the buttons I was trying to place in the example above:

My button behaves the same way in your project. I noticed that your images are generated, where as I'm importing the graphic.

I've tried importing other transparent graphics I've found online. They all behave the same way - if I add them to TouchGFX as an image, they are transparent as you'd expect. If I add them as an image to a button, they are blue below the transparency - I included this random image to really emphasize the effect:

I have included the modified project so you can take a look.

Thanks,

Julia

[GaetanGodart · Accepted solution]

Hello @jchernus-fikst ,

Thank you for providing your project.

I have looked at it, the fix is very easy.

When a flexbutton is created, by default it will have a blue box as background, you then added your image with transparency (and sometimes a text) but did not remove the blue box :

Simply deleting the "Box with border" element fix the issue (here I only did it to the Heineken image):

Regards,

[jchernus-fikst]

Thanks, yu're right - this worked!

I actually tried to remove that border as soon as I added the flex button, but it wouldn't let me so I dropped it's size to 0 and hoped that was the equivalent. I see now that after you add another item (image/text/icon), you can delete the border - but that seems like a poor user experience. 

Appreciate your help!