What is the API for setting modal OBJ?

How-to
1

Description

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

vs2019 simulator

What LVGL version are you using?

v7.0.2

What do you want to achieve?

What is the API for setting modal OBJ?(Similar to the modal window in WIN).If the obj is not closed.You can’t click on other obj.

What have you tried so far?

Code to reproduce

/*You code here*/

Screenshot and/or video

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

2

Hi @guoweilkd,

There is no specific API for this you need to create a full screen size transparent container to absorb the clicks, then draw your ‘modal’ object on it. please take a look at the docs here there is a code sample for a message box to get you started. If you need any further assistance don’t hesitate to ask.
Personally I usually set the opacity of the container to about 30% and set the colour to LV_COLOR_SILVER to slightly grey out the screen behind.

I hope that helps.

Kind Regards,

Pete

1 Like
3

For people needing a modal window, this is the code in v8.3 that following Pete suggestion.

For visual widgets inside the window, you can design a panel with full childen widgets in SquareLine Studio, then set parent of that panel to this window after creation.

static void _close_event_handler(lv_event_t* e)
{
    lv_obj_t* obj = lv_event_get_target(e);
    LV_LOG_USER("Button %d clicked", (int)lv_obj_get_index(obj));

    lv_obj_t* parent_title = lv_obj_get_parent(obj);
    lv_obj_t* parent_win = lv_obj_get_parent(parent_title);
    lv_obj_t* parent_transparent_container = lv_obj_get_parent(parent_win);

    lv_obj_del_async(parent_transparent_container);
}


// Create a window
#define WINDOW_TITLE_H  40

lv_obj_t* transparent_modal_container = lv_obj_create(lv_scr_act());
lv_obj_set_size(transparent_modal_container, lv_pct(100), lv_pct(100));
lv_obj_align(transparent_modal_container, LV_ALIGN_CENTER, 0, 0);
lv_obj_set_style_radius(transparent_modal_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_border_width(transparent_modal_container, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_bg_color(transparent_modal_container, lv_color_hex3(0x666), LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_bg_opa(transparent_modal_container, 200, LV_PART_MAIN | LV_STATE_DEFAULT);

lv_obj_t* win = lv_win_create(transparent_modal_container, WINDOW_TITLE_H);
lv_win_add_title(win, "Window Title");

lv_coord_t w = 500;
lv_coord_t h = 350;

lv_obj_set_size(win, w, h + WINDOW_TITLE_H);
lv_obj_align(win, LV_ALIGN_CENTER, 0, 0);

static lv_style_t style_shadow;             // shadow
lv_style_init(&style_shadow);
lv_style_set_shadow_width(&style_shadow, 6);
lv_style_set_shadow_spread(&style_shadow, 1);
lv_style_set_shadow_ofs_x(&style_shadow, 3);
lv_style_set_shadow_ofs_y(&style_shadow, 3);
lv_style_set_shadow_color(&style_shadow, lv_color_hex3(0x555));
lv_style_set_shadow_opa(&style_shadow, 200);
lv_obj_add_style(win, &style_shadow, 0);

// close btn
lv_obj_t* btn = lv_win_add_btn(win, LV_SYMBOL_CLOSE, 60);
lv_obj_add_event_cb(btn, _close_event_handler, LV_EVENT_CLICKED, NULL);
4

Hi @tpt ,

Your code looks great thanks for sharing your update on this old post…

Just for completeness, it is now also possible to create the model message box just by setting its parent to NULL see the V8.3 documents here. This greatly simplifies the whole process.

Quick example:

	lv_obj_t 				*mb_blogin;
	static const char		*btns[] ={"Okay", ""}; /*Button description.*/

	mb_blogin = lv_msgbox_create(NULL, "Login Failed", "\nError: Bad Username or Password!\n", btns, pdTRUE);

Kind Regards,

Pete

1 Like
5

I stumbled on this post.
Thnx for the idea to make a modal dialog like this.
I have a question about the ‘or’ of two enumerations: LV_PART_MAIN | LV_STATE_DEFAULT
See that more often.
Why is it done like this?
In C++ this it is not allowed to make this kind of calculation with two different enumeration types.
Above all, both have value of 0.