Msg box, I can't change object focus and object appearance


I am creating a MsgBox. I would like to change the size and appearance of CloseBtn and BtnMatrix (Yes and No buttons). I would like to change the background color and text, and add different styles when the button is not in focus, when it is in focus, and when it is clicked. I can’t focus all the added objects in the group. My navigation is via an external encoder. I would like to disable the long click on the button, that doesn’t work either. I want to increase BtnMatrix elements. Increasing the font does not increase the button, the letters are outside the Yes or No button. Because of the small screen, I want to make the buttons bigger, and I want to move them “outwards”

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

ESP32-C3, ESP-IDF v5.0

What LVGL version are you using?



lv_obj_t * mbox;

void MsgBox_Init(void)
    static const char * btns[] = {"NO", "YES", ""};

    // Create the MsgBox
    mbox = lv_msgbox_create(NULL, "ERROR", "Question ?", btns, true);
    lv_obj_set_style_text_font(mbox, &lv_font_montserrat_28, LV_STATE_DEFAULT | LV_PART_MAIN);
    // lv_obj_add_event_cb(mbox, event_cb, LV_EVENT_ALL, NULL);
	// lv_obj_add_event_cb(lv_msgbox_get_close_btn(mbox), close_cb, LV_EVENT_PRESSED, NULL);	

	// Focus is on the second button, "YES"
    lv_obj_t * msgbut = lv_msgbox_get_btns(mbox);
    lv_btnmatrix_set_selected_btn(msgbut, 1);	

	// Change text - Ok
   	lv_obj_t* mbox1_text = lv_msgbox_get_text(mbox);
 	static lv_style_t style_label;
   	lv_style_set_text_font(&style_label, &lv_font_montserrat_20);
   	lv_style_set_text_color(&style_label, lv_color_hex(0x32a858));
   	lv_obj_add_style(mbox1_text, &style_label, LV_PART_MAIN | LV_STATE_DEFAULT);
  	lv_label_set_text(mbox1_text, "Save data?");

	// Change title - Ok
   	lv_obj_t* mbox1_title = lv_msgbox_get_title(mbox);
   	static lv_style_t style_title;
   	lv_style_set_text_font(&style_title, &lv_font_montserrat_28);
   	lv_style_set_text_color(&style_title, lv_color_hex(0x160ea1));
   	lv_obj_add_style(mbox1_title, &style_title, LV_PART_MAIN | LV_STATE_DEFAULT);
   	lv_label_set_recolor(mbox1_title, true);
   	lv_label_set_text(mbox1_title, "#ff0000 " LV_SYMBOL_WARNING "# Error");	

   	// Change the background of the MsgBox window - Ok
   	static lv_style_t style_msgBox;
   	lv_style_set_border_color(&style_msgBox, lv_color_hex(0xdb1237));	
   	lv_style_set_border_width(&style_msgBox, 2);
   	lv_style_set_bg_color(&style_msgBox, lv_color_hex(0xe6e8c1));	
 	lv_style_set_bg_opa(&style_msgBox, LV_OPA_50);
 	lv_obj_add_style(mbox, &style_msgBox, LV_PART_MAIN | LV_STATE_DEFAULT);

 	// MsgBox window location and position - Ok
 	lv_obj_align(mbox, LV_ALIGN_CENTER, 0, -5);
 	lv_obj_set_size(mbox, 236, 190);

 	// Changing the look of the close button (and focused look) - **** DOES NOT WORK  ****
	static lv_style_t style_btn_exit;
	lv_style_set_bg_color(&style_btn_exit, lv_palette_main(LV_PALETTE_ORANGE));
	lv_style_set_shadow_width(&style_btn_exit, 0);
	lv_style_set_outline_width(&style_btn_exit, 0);
	lv_obj_add_style(lv_msgbox_get_close_btn(mbox), &style_btn_exit, LV_PART_ITEMS);

	static lv_style_t style_btn_exitFocus;
	lv_style_set_bg_color(&style_btn_exitFocus, lv_palette_main(LV_PALETTE_ORANGE));
	lv_style_set_shadow_width(&style_btn_exitFocus, 0);
	lv_style_set_outline_color(&style_btn_exitFocus, lv_palette_main(LV_PALETTE_PINK));
	lv_style_set_outline_width(&style_btn_exitFocus, 2);
	lv_style_set_outline_pad(&style_btn_exitFocus, 4);
	lv_obj_add_style(lv_msgbox_get_close_btn(mbox), &style_btn_exitFocus, LV_PART_ITEMS | LV_STATE_FOCUSED);
	lv_obj_set_size(lv_msgbox_get_close_btn(mbox), 30, 30);

	// Change the appearance of the BtnMatrix button, for different states - **** DOES NOT WORK  ****
	static lv_style_t style_buttons;
	lv_style_set_shadow_width(&style_buttons, 0);
	lv_style_set_text_color(&style_buttons, lv_palette_main(LV_PALETTE_GREEN));
	lv_style_set_bg_color(&style_buttons, lv_palette_main(LV_PALETTE_LIGHT_BLUE));
	lv_style_set_text_font(&style_buttons, &lv_font_montserrat_28);
	lv_obj_add_style(lv_msgbox_get_btns(mbox), &style_buttons, LV_PART_ITEMS);

	static lv_style_t style_buttonsFocused;
	lv_style_set_text_color(&style_buttonsFocused, lv_palette_main(LV_PALETTE_GREEN));
	lv_style_set_bg_color(&style_buttonsFocused, lv_palette_main(LV_PALETTE_LIGHT_BLUE));
	lv_style_set_outline_color(&style_buttonsFocused, lv_palette_main(LV_PALETTE_RED));
	lv_style_set_outline_width(&style_buttonsFocused, 3);
	lv_style_set_outline_pad(&style_buttonsFocused, 4);
	lv_obj_add_style(lv_msgbox_get_btns(mbox), &style_buttonsFocused, LV_PART_ITEMS |LV_STATE_FOCUSED);

	static lv_style_t style_buttonsPressed;
	lv_style_set_text_color(&style_buttonsPressed, lv_palette_main(LV_PALETTE_GREEN));
	lv_style_set_bg_color(&style_buttonsPressed, lv_palette_main(LV_PALETTE_GREY));
	lv_style_set_outline_color(&style_buttonsPressed, lv_palette_main(LV_PALETTE_RED));
	lv_style_set_outline_width(&style_buttonsPressed, 3);
	lv_style_set_outline_pad(&style_buttonsPressed, 4);
	lv_obj_add_style(lv_msgbox_get_btns(mbox), &style_buttonsPressed, LV_PART_ITEMS |LV_STATE_CHECKED);
	lv_obj_add_style(lv_msgbox_get_btns(mbox), &style_buttonsPressed, LV_PART_ITEMS |LV_STATE_PRESSED );


	// Adding objects to a group
	lv_group_add_obj(g, msgbut);
	lv_group_add_obj(g, lv_msgbox_get_close_btn(mbox));

	// The initial focus of the object

	lv_group_set_editing(g, true);	 	// 1: Edit mode, 0: Navigate mode
	lv_group_focus_freeze(g, false);	// 1: can't focus to new object

I can’t change the focus on the CloseBtn button?
I cannot change the size and position of the BtnMatrix, as well as their style for the states normal, focused, pressed?
I would like to set the BtnMatrix “NO” button to set a different style (eg red background) and the “YES” button to a green background?
I would like to disable a long key press, to change the state? Then the button remains permanently selected (checked)?
I cannot navigate through the added button objects in the group (… → No → YES → Close ->…)

Does anyone know the correct way, how to move the button focus as follows:

(… → No → YES → Close → No → …)