How to create modal, reusable popup window / message box? (9.3)

How-to
1

LVGL 9.3

How to create modal, reusable popup window / message box?

My app will often display rather complex popup window so I thought it would make sense to make this window reusable instead of creating it from scratch every time it needs to shown. This should allow me to save some precious CPU cycles at the cost of extra SRAM memory, which I have plenty of.

So far I found no example of reusable popup window or message box.

How to handle it correctly? Is using LV_OBJ_FLAG_HIDDEN the right approach?
Please advise.

2

You can create your implementation like below

static lv_obj_t * dialog_parent;
static lv_obj_t * dialog_window;
static lv_obj_t * dialog_panel;
static lv_obj_t * dialog_title;
static lv_obj_t * dialog_message;
static lv_obj_t * dialog_close;
static lv_obj_t * dialog_close_label;


void show_dialog(const char * title, const char * message)
{
    lv_disp_t * display = lv_display_get_default();
    lv_obj_t * active_screen = lv_display_get_screen_active(display);

    /*  attach the dialog window to current active screen */
    lv_obj_set_parent(dialog_window, active_screen);

    lv_label_set_text(dialog_title, title);
    lv_label_set_text(dialog_message, message);
    lv_obj_remove_flag(dialog_window, LV_OBJ_FLAG_HIDDEN); /* show the dialog */
    lv_obj_scroll_to_y(dialog_window, 0, LV_ANIM_ON);
}



static void dialog_close_event_cb(lv_event_t * e)
{
    lv_obj_add_flag(dialog_window, LV_OBJ_FLAG_HIDDEN);
}

static void create_dialog_window()
{
    dialog_parent = lv_obj_create(NULL);

    dialog_window = lv_obj_create(dialog_parent);
    lv_obj_set_width(dialog_window, lv_pct(100));
    lv_obj_set_height(dialog_window, lv_pct(100));
    lv_obj_set_align(dialog_window, LV_ALIGN_CENTER);
    lv_obj_set_scrollbar_mode(dialog_window, LV_SCROLLBAR_MODE_OFF);
    lv_obj_add_flag(dialog_window, LV_OBJ_FLAG_HIDDEN);
    lv_obj_remove_flag(dialog_window, LV_OBJ_FLAG_GESTURE_BUBBLE); /* block gesture events when active */
    lv_obj_set_scroll_dir(dialog_window, LV_DIR_VER);
    lv_obj_set_style_radius(dialog_window, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(dialog_window, lv_color_hex(0x555555), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(dialog_window, 150, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_width(dialog_window, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_left(dialog_window, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_right(dialog_window, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_top(dialog_window, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_bottom(dialog_window, 60, LV_PART_MAIN | LV_STATE_DEFAULT);

    dialog_panel = lv_obj_create(dialog_window);
    lv_obj_set_width(dialog_panel, 167);
    lv_obj_set_height(dialog_panel, LV_SIZE_CONTENT);
    lv_obj_set_x(dialog_panel, 0);
    lv_obj_set_y(dialog_panel, 60);
    lv_obj_set_align(dialog_panel, LV_ALIGN_TOP_MID);
    lv_obj_set_flex_flow(dialog_panel, LV_FLEX_FLOW_COLUMN);
    lv_obj_set_flex_align(dialog_panel, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
    lv_obj_remove_flag(dialog_panel, LV_OBJ_FLAG_SCROLLABLE);
    lv_obj_set_style_bg_color(dialog_panel, lv_color_hex(0x080404), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(dialog_panel, 235, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_color(dialog_panel, lv_color_hex(0xFFFFFF), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_opa(dialog_panel, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_width(dialog_panel, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_left(dialog_panel, 5, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_right(dialog_panel, 5, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_top(dialog_panel, 8, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_bottom(dialog_panel, 8, LV_PART_MAIN | LV_STATE_DEFAULT);

    dialog_title = lv_label_create(dialog_panel);
    lv_obj_set_width(dialog_title, 140);
    lv_obj_set_height(dialog_title, LV_SIZE_CONTENT);
    lv_obj_set_align(dialog_title, LV_ALIGN_TOP_MID);
    lv_label_set_long_mode(dialog_title, LV_LABEL_LONG_SCROLL_CIRCULAR);
    lv_label_set_text(dialog_title, "Title");
    lv_obj_set_style_text_align(dialog_title, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_text_font(dialog_title, &lv_font_montserrat_16, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_color(dialog_title, lv_color_hex(0xFFFFFF), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_opa(dialog_title, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_width(dialog_title, 1, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_side(dialog_title, LV_BORDER_SIDE_BOTTOM, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_left(dialog_title, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_right(dialog_title, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_top(dialog_title, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_bottom(dialog_title, 5, LV_PART_MAIN | LV_STATE_DEFAULT);

    dialog_message = lv_label_create(dialog_panel);
    lv_obj_set_width(dialog_message, 140);
    lv_obj_set_height(dialog_message, LV_SIZE_CONTENT);
    lv_obj_set_align(dialog_message, LV_ALIGN_CENTER);
    lv_label_set_text(dialog_message, "Dialog message");
    lv_obj_set_style_text_font(dialog_message, &lv_font_montserrat_14, LV_PART_MAIN | LV_STATE_DEFAULT);

    dialog_close = lv_button_create(dialog_panel);
    lv_obj_set_width(dialog_close, 100);
    lv_obj_set_height(dialog_close, LV_SIZE_CONTENT);
    lv_obj_set_align(dialog_close, LV_ALIGN_BOTTOM_MID);
    lv_obj_add_flag(dialog_close, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
    lv_obj_remove_flag(dialog_close, LV_OBJ_FLAG_SCROLLABLE);
    lv_obj_set_style_radius(dialog_close, 20, LV_PART_MAIN | LV_STATE_DEFAULT);

    dialog_close_label = lv_label_create(dialog_close);
    lv_obj_set_width(dialog_close_label, LV_SIZE_CONTENT);
    lv_obj_set_height(dialog_close_label, LV_SIZE_CONTENT);
    lv_obj_set_align(dialog_close_label, LV_ALIGN_CENTER);
    lv_label_set_text(dialog_close_label, "Close");
    lv_obj_set_style_text_font(dialog_close_label, &lv_font_montserrat_14, LV_PART_MAIN | LV_STATE_DEFAULT);

    lv_obj_add_event_cb(dialog_close, dialog_close_event_cb, LV_EVENT_CLICKED, NULL);
}

Create the dialog once with create_dialog_window(), then you can call show_dialog("title", "message") to show the dialog