Style the tabview whole group of tabs when navigating with the encoder


I am using a rotary encoder to navigate a group of buttons and a tabview. I like to highlight the outline of entire group of tabs of a tabview when the encoder focus goes there by making all the lines thicker and changing the background color.

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

Atmel ARM Cortex M7, GCC

What LVGL version are you using?


What do you want to achieve?

Make all the lines of a tabview thick when the focus state is on the whole group of tabs.

What have you tried so far?

I managed to make one tab of a time of the group get highlighted when I already selected the whole tabview and rotate the encoder. I can’t seem to find out how to get the below code fragment to highlight the whole tabview when my encoder goes from the buttons to the tabview. I tried all kinds of variations for the first and third arguments of the below function with no success.

	lv_obj_set_style_border_width( (mainTabView),  6,                                        LV_PART_MAIN | LV_STATE_FOCUSED |LV_STATE_FOCUS_KEY);

Code to reproduce

I posted the code below. It needs an embedded system with the encoder installed to work.

    lv_obj_t *mainTabView = lv_tabview_create(lv_scr_act(), NULL);

    /*Add 3 tabs (the tabs are page (lv_page) and can be scrolled*/
    lv_obj_t *tab1 = lv_tabview_add_tab(mainTabView, "Tab 1");
    lv_obj_t *tab2 = lv_tabview_add_tab(mainTabView, "Tab 2");
    lv_obj_t *tab3 = lv_tabview_add_tab(mainTabView, "Tab 3");

    /*Add content to the tabs*/
    lv_obj_t * label = lv_label_create(tab1, NULL);
    lv_label_set_text(label, "First tab");

    label = lv_label_create(tab2, NULL);
    lv_label_set_text(label, "Second tab");

    label = lv_label_create(tab3, NULL);
    lv_label_set_text(label, "Third tab");
	lv_obj_set_style_bg_color( (mainTabView),   lv_color_hex(0xf5f5f5),  LV_PART_MAIN | LV_STATE_DEFAULT);

    lv_obj_set_style_bg_color(lv_tabview_get_tab_btns(mainTabView),   lv_color_hex(0xd3e6f6),  LV_PART_ITEMS | LV_STATE_DEFAULT);
    lv_obj_set_style_text_color(lv_tabview_get_tab_btns(mainTabView), lv_color_hex(0x000000),  LV_PART_ITEMS | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(lv_tabview_get_tab_btns(mainTabView),     LV_OPA_COVER,            LV_PART_ITEMS | LV_STATE_DEFAULT);
    lv_obj_set_style_border_side(lv_tabview_get_tab_btns(mainTabView),LV_BORDER_SIDE_RIGHT|LV_BORDER_SIDE_LEFT |LV_BORDER_SIDE_BOTTOM|LV_BORDER_SIDE_TOP,   LV_PART_ITEMS | LV_STATE_DEFAULT);
    lv_obj_set_style_border_width(lv_tabview_get_tab_btns(mainTabView),  1,                                        LV_PART_ITEMS | LV_STATE_DEFAULT);
    lv_obj_set_style_border_color(lv_tabview_get_tab_btns(mainTabView), lv_color_hex(0x000000),                    LV_PART_ITEMS | LV_STATE_DEFAULT);

    lv_obj_set_style_bg_color(lv_tabview_get_tab_btns(mainTabView),   lv_color_hex(0xf5f5f5), LV_PART_ITEMS | LV_STATE_CHECKED);
	lv_obj_set_style_text_color(lv_tabview_get_tab_btns(mainTabView), lv_color_hex(0x000000),  LV_PART_ITEMS | LV_STATE_CHECKED);
    lv_obj_set_style_bg_opa(lv_tabview_get_tab_btns(mainTabView),     LV_OPA_COVER,           LV_PART_ITEMS | LV_STATE_CHECKED);
    lv_obj_set_style_border_side(lv_tabview_get_tab_btns(mainTabView),LV_BORDER_SIDE_RIGHT|LV_BORDER_SIDE_LEFT |LV_BORDER_SIDE_TOP,   LV_PART_ITEMS | LV_STATE_CHECKED);
    lv_obj_set_style_border_width(lv_tabview_get_tab_btns(mainTabView),  1,                                        LV_PART_ITEMS | LV_STATE_CHECKED);
    lv_obj_set_style_border_color(lv_tabview_get_tab_btns(mainTabView), lv_color_hex(0x000000),                    LV_PART_ITEMS | LV_STATE_CHECKED);

	lv_obj_set_style_text_color(lv_tabview_get_tab_btns(mainTabView), lv_color_hex(0x808080),  LV_PART_ITEMS | LV_STATE_FOCUSED |LV_STATE_FOCUS_KEY);
	lv_obj_set_style_border_width(lv_tabview_get_tab_btns(mainTabView),  6,                                        LV_PART_ITEMS | LV_STATE_FOCUSED |LV_STATE_FOCUS_KEY);
	lv_obj_set_style_border_color(lv_tabview_get_tab_btns(mainTabView), lv_color_hex(0x808080),                    LV_PART_ITEMS | LV_STATE_FOCUSED |LV_STATE_FOCUS_KEY);

I mean you cant do it by focus (realy is focused only one element}
but you can do it in code on events …