Message box and some question around it

How-to
1

Hello friends
I have a few questions for the messeger:

  1. Can I configure his style?
  2. How to layout his button?
  3. and I don’t understand how to use " char * btn_txts[] = {“Ok”, “Cancel”, NULL} " if I write like this {"Ok, NULL} then I will get 1 button right?

i using stm32f7508 -dk kit with sdram and external flash onboard.
thanks in advance

.
.
.
code follow example have good

Screenshot 2023-11-29 174153
Screenshot 2023-11-29 1741531115×583 31.5 KB

2

Yes, the number of strings will directly affect the number of buttons.

3

can i style it like “obj” ?
i want move him button to center

mess
mess1280×961 355 KB

4

Yes, you can just create an empty message box, for example:
msgBox = lv_msgbox_create(lv_layer_top(), NULL, NULL, NULL, false);

and then add children to this messagebox like you would with any other object. I did it like this at some point:

void (main)(void)
{
    lv_obj_t* msgBox = lv_msgbox_create(lv_layer_top(), NULL, NULL, NULL, false);
    /* Some other functions */
    setButtonRow(msgBox);
}

void setButtonRow(lv_obj_t* parent)
{
    //CONFIRM BUTTON
    confirmBtn = lv_btn_create(parent);
    lv_obj_t* confirmBtnLab = lv_label_create(confirmBtn);
    lv_label_set_text(confirmBtnLab, CONFIRM);
    lv_obj_set_style_bg_color(confirmBtn, lv_color_hex(GREEN), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_add_event_cb(confirmBtn, event_BtnConfirm, LV_EVENT_ALL, NULL);

    //PUT IN NEW FLEX ROW
    lv_obj_add_flag(confirmBtn, LV_OBJ_FLAG_FLEX_IN_NEW_TRACK);

    //DENY BUTTON
    denyBtn = lv_btn_create(parent);
    lv_obj_t* denyBtnLab = lv_label_create(denyBtn);
    lv_label_set_text(denyBtnLab, DENY);
    lv_obj_set_style_bg_color(denyBtn, lv_color_hex(RED), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_add_event_cb(denyBtn, event_BtnDeny, LV_EVENT_ALL, NULL);
}
5

I can change its color but I can’t bring it to the middle, can you show me more?

Screenshot 2023-12-15 110657
Screenshot 2023-12-15 1106571237×442 35.8 KB

nonrr
nonrr961×1280 282 KB

6

Hello,

My message box is set up slightly differently, however I I think I know whats wrong:

The button is placed in a flex row, which means it has to be centered using flex options. See Flex align documentation.

Try the following after creating your messagebox:

lv_obj_set_flex_flow(mbox1 LV_FLEX_FLOW_ROW_WRAP);
lv_obj_set_flex_align(mbox1, LV_FLEX_ALIGN_SPACE_EVENLY, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_SPACE_EVENLY);

This makes all of the children of the message box align according to these FLEX settings.
If this still does not work I can DM you the .c file of my messagebox setup, let me know.

1 Like
7

hi

you are right, it worked but I still don’t quite understand FLEX. Instead of sorting the position of an object, it sorts the collections of other objects, right?

zaa
zaa961×1280 374 KB

and you made me curious, can I take a look at that .c code of yours? If you want, I will also share the code that took me 2 weeks to understand and make it work :)))

8

Yes, flex does not affect only the position of one object, but the positions of all objects within a sort of “flex box”, it will dynamically move (and perhaps even size) objects inside of that box to make them fit according to the settings supplied by the user. The documentation has a link explaining the Flexbox system which is what the Flex functionality of LVGL is based on: A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks

This explains everything about the different settings, I really like the flex system, makes it so that you can dynamically add/remove UI elements without having to move them yourself.

P.S. I sent you a DM.