How to create a img at the top of messagebox

How-to
1

Description

  • I want to put a picture at the top of the message box,but the picture is on the mottom side
  • I usedlv_obj_set_size() to set the messagebox size,but the Height setting failed,it only drived by text lines

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

What LVGL version are you using?

V7.10.0

What do you want to achieve?

I want to put a picture at the top of the message box

image
image676×551 23.9 KB

Code to reproduce

        /* Create the message box as a child of the modal background */
        msgbox = lv_msgbox_create(obj, NULL);
       

        

        lv_obj_set_event_cb(msgbox, mbox_event_cb);
        lv_msgbox_add_btns(msgbox, btns2);
        
        lv_msgbox_set_text(msgbox, "\n\n\nHello world!");
        
        lv_obj_t* img_icon = lv_img_create(msgbox, NULL);
        //lv_obj_set_size(img_icon, 80, 140);
        
        lv_img_set_src(img_icon, &icon_heart);
        lv_obj_set_pos(img_icon, 0, 0);
        //lv_obj_align(img_icon, mbox, LV_ALIGN_IN_TOP_MID, 0, 0);
        lv_obj_align(msgbox, NULL, LV_ALIGN_CENTER, 0, 0);

Screenshot and/or video

image

2

Try running lv_obj_move_background(img); by default the image is appended to the end of the message box and it gets positioned by the message box automatically.

3

After using this function, it was be fine.
image

1 Like
4

Cool background effect! Is the styling at the very top another image?

5

Yes, I used a background image on the message box, that provided by our graphic designer.
img_msgbox_bg

6

Hi,there are some new problems in V7.11,when i create a img on the top of msg_box,i want use lv_obj_align(imge, msgbox, LV_ALIGN_IN_TOP_MID, 0, 40) , to set the img’s position,but it dosen’t work.
another one is i called lv_obj_set_size(msgbox,x,y) to set the msg_box’s size,it dosen’t work too.i found the height is drived by text lenth only.

7

Hi @juneofive
I might be able to help with the last thing you mentioned. I ran into the same “problem” and I believe these lines of code “fixes” it so you can modify height and width by yourself.

 lv_cont_set_fit2                    (MsgBox, LV_FIT_NONE, LV_FIT_NONE);        //Modify the preset layout options and fits 
 lv_cont_set_layout                  (Msg, LV_LAYOUT_OFF);

I haven’t tested them independently, but I hope it still works :slight_smile:
That might also solve your first problem

8

thanks very much,i copy your code after create msg_box, that it could set size,but all items’ postion of the msg box is on the top left. lv_obj_align(btnmx, NULL, LV_ALIGN_IN_BOTTOM_MID, 0, -10);could set postion,but i can’t find how to ge the label ,so it was still on top left

9

Yeah thats probably because the layout is working like “normal”, so i believe you just have to align the objects with lv_obj_align() and you should have complete control.

10

i use this to get the label’s obj:

        lv_msgbox_ext_t * ext = lv_obj_get_ext_attr(mbox);
		lv_obj_align(ext->text, NULL, LV_ALIGN_CENTER, 0, 0);

now it’s working well,Thank you again!