How to add images on a button at the same time, you can add text?

Hello, everyone
how to add images on a button at the same time, you can add text?
I want to do this effect as shown below:123
how to solve it??Are there any good suggestions?

You may use the container for this purpose

  1. create a parent clickable/transparent container
  2. create a child img and label in the parent container

Code

lv_obj_t * lv_icon_create(lv_obj_t*par, const void* img_src, const char* txt){
  lv_obj_t* icon = lv_btn_create( par, NULL);
    lv_cont_set_layout(icon, LV_LAYOUT_COL_M);
    lv_cont_set_fit2(icon, LV_FIT_TIGHT, LV_FIT_TIGHT);
    lv_obj_align(icon, NULL, LV_ALIGN_CENTER, 0,0);
    lv_obj_set_auto_realign(icon, true);

    static lv_style_t style_rel;  lv_style_copy(&style_rel, &lv_style_transp_tight);
      lv_btn_set_style(icon, LV_BTN_STYLE_REL, &style_rel);
      style_rel.body.padding.top    = 10;
      style_rel.body.padding.left   = 10;
      style_rel.body.padding.right  = 10;
      
    static lv_style_t style_pr;   lv_style_copy(&style_pr, &style_rel);
      lv_btn_set_style(icon, LV_BTN_STYLE_PR, &style_pr);
      style_pr.body.opa           = 128;
      style_pr.body.radius        = 0;
      style_pr.body.border.width  = 3;
      style_pr.body.border.color  = LV_COLOR_WHITE;
      style_pr.body.border.opa    = 128;
      style_pr.text.color= LV_COLOR_WHITE;
    
    lv_obj_t *img = lv_img_create(icon, NULL);
      lv_img_set_src(img, img_src);
    lv_obj_t *label = lv_label_create(icon,NULL);
      lv_label_set_text(label, txt);
      lv_obj_set_style(label, &style_pr);

  return icon;
}

Usage

IMG_DECLARE(ico_alarm);  // your image src declaration
lv_obj_t * icon = lv_icon_create(lv_scr_act(), &ico_alarm, "Alarm");

Result

image

@TridentTD Thank you very much for helping me. Can I ask a question again? I am showing png image is a memory allocation error, error code 83 application memory allocation failed, how to solve? Thank you!

Image data source:
const lv_img_dsc_t png_decoder_test = {
.header.always_zero = 0,
.header.w = 200,
.header.h = 150,
.data_size = 20869,
.header.cf = LV_IMG_CF_RAW_ALPHA,
.data = png_decoder_test_map,
};

test code :
png_decoder_init();

LV_IMG_DECLARE(png_decoder_test);
lv_obj_t * img = lv_img_create(lv_scr_act(), NULL);
lv_img_set_src(img, &png_decoder_test);

@seyyah Thank you, you are a good person.

PNG normally uses heap memory for decoding too much.
Your system’s heap memory is not enough.

I have set the heap memory to 8k, but the problem is still not solved.

Such as a png image size is 320x240 true-color.
Your system will be allocated by the png-decoder library
at lease 320x240x3 bytes = 230.4K Bytes when png-decoding
and plus more other mems for file-buffer before decoding too.
Then 8K is not enough.

If your system has a little heap mem, I think the best way for image
by converting to lvgl’s c file image instead of png decoding.

@TridentTDThank you for your multiple responses.I have converted the image to a .c file. Its name is png_decoder_test.cpng_decoder_test.c (125.1 KB)

The method I use comes from this blog, and the image test data comes from this blog.https://blog.littlevgl.com/2018-10-05/png_converter

Should I set the size of the heap to solve this problem?321

You are still using raw image mode (which requires the PNG to be decoded first).

It would be better to just use one of the standard image formats with the online converter (i.e. don’t choose raw mode). Those can be drawn directly by LittlevGL without requiring a decode operation and thus consume a lot less RAM.

1 Like

@embeddedt I understand, my problem has been solved, thank you

@TridentTD Through your guidance, my problem has been solved, thank you for your help me.

1 Like