Use image button

How-to
1

Description

I’m working on stm32f429 discovery with lvgl 8.0.
I just want to add image button as circle.
btn1 and btn1_1 is cicle image like this
I have attached png file.

test1 test2

image

however, if I touched in red area, unintentionally, event_handler1 was called.
image

I wonder this problem caused from the png file or should I set some attribute/code.
I just want to show the only circle shape.
if the png file is problem, please let me know.

What MCU/Processor/Board and compiler are you using?

stm32f429 discovery

What LVGL version are you using?

lvgl 8.0

What do you want to achieve?

I just want to show only circle image.

What have you tried so far?

when I checked the png file. I think png file is good. I mean that red area isn’t shown.

Thanks
Best Regards

Code to reproduce

Add a code snippet which can run in the simulator. It should contain only the relevant code that compiles without errors when separated from your main code base.

The code block(s) should be formatted like:

/*You code here*/
 scr3 = lv_obj_create(background1);
 lv_obj_set_size(scr3, 294, 162);
 lv_obj_set_pos(scr3, 13, 66);

 btn_1 = lv_imgbtn_create(scr3);
 lv_imgbtn_set_src(btn_1, LV_IMGBTN_STATE_RELEASED,  NULL, &btn1, NULL);
 lv_imgbtn_set_src(btn_1, LV_IMGBTN_STATE_PRESSED ,  NULL, &btn1_1, NULL);
 lv_obj_align(btn_1, LV_ALIGN_CENTER, -68,27);
 lv_obj_add_event_cb(btn_1, event_handler1, LV_EVENT_ALL, NULL );

Screenshot and/or video

If possible, add screenshots and/or videos about the current state.

2

By default LVGL just uses the bounds of the image to check whether you clicked the button or not. Technically transparent pixels are still part of the image.

You can customize the hit-testing behavior with LV_EVENT_HIT_TEST. The color wheel is a good example of how to check whether the click is within a circle. Be sure that you also enable LV_OBJ_FLAG_ADV_HITTEST on the image button, otherwise LV_EVENT_HIT_TEST is not fired (for performance reasons).

(Off-topic: I’m curious why the corners matter in this specific case. Are there a lot of buttons close together?)

3

Thanks for kind response.
you’re correct. lots of image button close together in row
I just doubted why this kind of symptom is happened
as your guide, let me try to use the color wheel example.
Thanks

Best Regards.

4

Hi@jaeho,
Do you resolve this problem? I have similar problems to touch uncolored area and trigger button reply unintentionally.

5

are there any news on this topic? Is it possibile now with newer lvgl versions to change this behaviour, e.g. make the transparent part non-sensitive for hitting the button?