Skip to main content
Marco.R
Senior
April 25, 2019
Solved

Buttons/Box with rounded corner

  • April 25, 2019
  • 4 replies
  • 4279 views

Hi

I have the situation, that on one screen several buttons with only one color and rounded corners has to be placed. (see screenshot) But the corners are different on every button.

The easiest way would be to generate two images (for released/pressed button) for every button, but this is very ressource intensive (memory) for such simple buttons. If possible I would like to avoid this case.

With the flex button i have the option to add a box. Is there an option to specify a radius for every corner?

Or are other concepts applicable for this situation?

Is such a feature planned for next releases of the designer (maybe in version 4.11)? When will the new release available? I've seen that this will include new text options which are very interesting for me.

Best regards

Marco

This topic has been closed for replies.
Best answer by cameronf

I ran into this same limitation a little while ago and ended up making a custom container for rounded corner boxes and a corresponding button style. Posted them here if you'd like to reference/use them:

https://github.com/cameronfyfe/touchgfx-lib

The BoxRoundedCornersButtonStyle can be used similar to how BoxWithBorderButtonStyle is used.

I'm sure there's a better/more efficient way to do the rounded corner box as a custom widget instead of a container but I haven't had issues with it yet.

4 replies

cameronf
cameronfBest answer
Associate
April 25, 2019

I ran into this same limitation a little while ago and ended up making a custom container for rounded corner boxes and a corresponding button style. Posted them here if you'd like to reference/use them:

https://github.com/cameronfyfe/touchgfx-lib

The BoxRoundedCornersButtonStyle can be used similar to how BoxWithBorderButtonStyle is used.

I'm sure there's a better/more efficient way to do the rounded corner box as a custom widget instead of a container but I haven't had issues with it yet.

Majid
Visitor II
April 2, 2020

@Community member​ 

@Martin KJELDSEN​ 

Marco.R
Marco.RAuthor
Senior
April 26, 2019

@Community member​ ​Thanks a lot. I will have a look on it, but It looks good at first glance.

Martin KJELDSEN
Principal III
April 29, 2019

Hi @Marco.R​,

There's no way to create rounded corners programatically or have the designer generate a new asset for you based on an existing one. TouchGFX was designer, originally, to be very effecient, so it simply takes what is given by a graphics artists and converts that.

Hope that answers your question.

Best regards,

Martin

Martin KJELDSEN
Principal III
April 29, 2019

Also, i will try to keep everyone updated on 4.11.0. It's a great release, and it's ready, but we have to wait for other internal deadlines such as CubeMX.

/Martin

Marco.R
Marco.RAuthor
Senior
May 1, 2019

​Hi @Martin KJELDSEN​, thank you for your reply. I assumed such an answer, but I hoped that there will be a better solution. I will go forward with the solution of cameronf.