How to create a model dialog with lvgl？

How-to
1

Description

How to create a model dialog with lvgl?

When I was using lvgl, I found it a little difficult to create a modal dialog window.

2

Hi @zhwxChaos,

Please see this post.

Kind Regards,

Pete

3

@pete-pjb，Thanks！
I’m doing this now, but I find that it’s a bit difficult if another modal dialog pops up on the modal dialog.

lv_obj_t * m = lv_msgbox_create(lv_layer_top(), NULL);

4

It should work as long as you create the second one after the first one. Can you explain in more detail what the issue is, please?

5

for example,
1、click one button to modify some parameters. Then I pop up one modal dialog.
2、before saving parameters,check them. if some err ,then I need a messagebox to tell user.

This is a very common scenario!

6

In addition, I hope that after the messagebox pops up, it waits for the user to make a choice before executing the following logic.
Not the way it is now…

7

That’s not directly possible with an event-driven architecture. You would need to register an event handler for the choices and run your logic inside that instead of where you create the message box. Admittedly, it’s a bit cumbersome, but this is how both the web and LVGL work, and it gives the most flexibility while avoiding issues like recursion.

In that case, I think you could still create a second modal background and message box, and I don’t see why it would appear behind the previous one. Can you provide a simple code snippet that demonstrates the problem?

8

@embeddedt @kisvegabor
for example:
`static lv_obj_t* m_UserBtn = NULL;
static lv_obj_t* m_SaveBtn = NULL;

static lv_obj_t* m_ageTa = NULL;

static void defEventCB(lv_obj_t * obj, lv_event_t e);

void firstScreen(void)
{
lv_obj_t* par = lv_scr_act();

m_UserBtn = lv_btn_create(par, copy);

lv_obj_set_event_cb(m_UserBtn, defEventCB);

}

void secondScreen(void)
{
lv_obj_t* par = lv_layer_top();

m_ageTa = lv_textarea_create(par, NULL);

m_SaveBtn = lv_btn_create(par, copy);

lv_obj_set_event_cb(m_SaveBtn, defEventCB);
lv_obj_set_event_cb(m_ageTa, defEventCB);

//doModel
...

}

static void defEventCB(lv_obj_t * obj, lv_event_t e)
{
if(obj == m_UserBtn && e == LV_EVENT_CLICKED)
{
secondScreen();//Show or Edit user info
}
else if(obj == m_SaveBtn && e == LV_EVENT_CLICKED)
{
//Check
int age = Str2Int(lv_textarea_get_text(m_ageTa))
if(age >= 150)
{
lv_obj_t * m = lv_msgbox_create(lv_layer_top(), NULL);
lv_msgbox_set_text(m, “Age is invalid. Continue or not？”);

		//doModel
		....
		
		//get msgbox return value
		if(Continue)
		{
			//do Continue
		}
		else
		{
			//do Stop
		}
	}
}

}`