Button transparency and corner rounding

Nextion Editor
1

Is there a way to make the buttons transparent and rounded corners in the GUI design?

2

Not without a bit of extra work. First step is to design the button with rounded corners in an external graphics program, export it as a .png file and using it as picture source for the button.
If you use the intelligent “P” series which can handle transparency, you are already done.
If you use one of the cheaper series wich can not handle transparency, you’ll have to do some extra work when deigning the button by filling the corners outside the rounding with the page’s background color, thus faking the transparency.

1 Like
3

Hey Casperli,
The way I design transparent rounded cornered buttons is by using Figma to design my displays and then I just port out every single element as pictures! Figma also exports shadows and shaders that make certain elements look 3D which you can then assign to your elements like buttons or just plain use as pictures with touch events!

In certain projects when 3D buttons are not required I have had success just exporting the entire page from figma as a png and then using hotspots for touch zones!

There are plenty of tutorials on Figma on youtube and it’s super simple and gives you great tools to work with like grid snap and alignment assistance!

I hope this helps!
Warm Regards,
Manas

1 Like
4

Thanks for your reply, I will search for Figma and learn how to use it, but I think it would be nice if the GUI software could include transparency and rounded corners.

5

Thank you for your reply, unfortunately I am not using P series, maybe I have to borrow external image processing software.

6

This an excellent and non complicated way to create a layout :slight_smile: Thanks!

7

Hey Casperli,

So there is an option for transparency in the editor but just that I have found Figma to be better at it!
You can still try it out, attaching a photo grab of the params for you to identify and play with,

Hope it leads you ahead,
Warm Regards,
Manas

image
image242Ă—510 12.8 KB

8

The alpha channel is only available on intelligent (P) series screens. He already stated that he doesn’t have such a model.

Kind regards,
Max

1 Like
9

Thanks for thinking about me, I saw this feature before, unfortunately, I don’t have P series, I will adopt your method to use Figma.