cancel
Showing results for 
Search instead for 
Did you mean: 

Button with non-rectangle touchable area

EEuge
Senior

Hello!

For example - I want to use button in the shape of an arc. I don't want the button to be pressed outside of its bounds.

How can I set non rectangle bounds of touchable area?

3 REPLIES 3
Alexandre RENOUX
Principal

Hello,

A touchable area is a rectangle so unfortunately what you want is not possible in my opinion. I'm sorry about that.

/Alexandre

Romain DIELEMAN
ST Employee

Hi,

Maybe I should not share this as it it just a lazy solution I did once that was considered enough for my demo 😅 : I also needed to have an arc that would serve as a button. Since the "button widget" needs a rectangular image, I made an image on paint of the arc I wanted with a background. I then needed to have the parts of the button widget corresponding to the background to not respond when touched by the user. To do this I added flex button widgets on top of the button, and set the size and color of the "box with border" settings (one of the properties of the flex button) to the zones i wanted to cover and match the color of the background. I also set the alpha levels to 1 but this might impact the performances depending on your mcu. By doing this the flex button are used as dummies so that the user only thinks he can press the sections you want him to press when in reality he is pressing other buttons that are invisible.

I could not find the project but here is the general idea: I put 3 flex buttons in a pyramid shape over the button i want to use so that only the top arc can be pressed by the user. The colors would be set to match the background, and the alpha set to 1 (here it is just so that you can see how i would set them). 0693W000006HXPcQAO.png/Romain

Thanks. I'll try

I want this

0693W000006HXcfQAG.png