How to disable the focus border

How-to
1

Description

What LVGL version are you using?

V8.3.9, vs simulator[800x480]

What do you want to achieve?

disable the focus border.
I create a roller widget and set the border to 0, but a border still have been show when i run the simulator.

What have you tried so far?

use border set api:

lv_obj_set_style_border_width(roller1, 0, LV_PART_MAIN | LV_STATE_DEFAULT);

Code to reproduce

    /* create a black backgroud */
    lv_obj_t* bg= lv_obj_create(lv_scr_act());
    lv_obj_remove_style_all(bg);
    lv_obj_set_pos(bg, 0, 0);
    lv_obj_set_size(bg, UI_SIZE_WIDTH, UI_SIZE_HEIGHT);
    lv_obj_set_style_bg_color(bg, lv_color_hex(0x000000), 0);
    lv_obj_set_style_bg_opa(bg, 255, 0);

    /*create string for the roller*/
    static char buff[1024];
    char* p;
    int len;
    buff[0] = '\0';
    p = buff;
    for (int i = 1; i < 10; i++)
    {
        len = sprintf(p, "%02d\n", i);
        p += len;
    }
    *(p - 1) = '\0';

    /* create a roller widget */
    lv_obj_t* roller1 = lv_roller_create(bg); 
    lv_roller_set_options(roller1,                      
        buff,
        LV_ROLLER_MODE_INFINITE);
    lv_obj_set_width(roller1, 175);
    lv_obj_set_pos(roller1, 180,130);
    /* set roller font */
#if LV_FONT_MONTSERRAT_42
    lv_obj_set_style_text_font(roller1, &lv_font_montserrat_42, LV_PART_SELECTED);  
#endif
#if LV_FONT_MONTSERRAT_32
    lv_obj_set_style_text_font(roller1, &lv_font_montserrat_32, LV_PART_MAIN);  
#endif

    /*you should set the height after the the text font*/
    lv_obj_set_style_text_line_space(roller1, 32, 0);
    lv_roller_set_visible_row_count(roller1, 5);        

    lv_obj_set_style_pad_all(roller1, 0, LV_PART_MAIN);
    lv_obj_set_style_radius(roller1, 0, LV_PART_MAIN);
    lv_obj_set_style_border_width(roller1, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(roller1, LV_OPA_TRANSP, LV_PART_MAIN);
    lv_obj_set_style_bg_opa(roller1, LV_OPA_30, LV_PART_SELECTED);
    lv_obj_set_style_bg_color(roller1, lv_color_make(0, 0, 0), LV_PART_SELECTED);
    lv_obj_set_style_text_color(roller1, lv_color_make(100, 100, 100), LV_PART_MAIN);
    lv_obj_set_style_text_color(roller1, lv_color_make(255, 255, 255), LV_PART_SELECTED);
    lv_obj_set_style_anim_speed(roller1, 1000, 0);

    lv_obj_t* temp = lv_btn_create(bg);
    lv_obj_set_size(temp, 50, 50);
    lv_obj_set_pos(temp, 675, 10);
    lv_obj_add_event_cb(temp, roller_btn_cb, LV_EVENT_CLICKED, NULL);

Screenshot

image
image804×516 13.4 KB

if Slide the mouse wheel , this border would go to the btn, like follows.

image
image804×515 10.8 KB

Can you kindly give me some advices about this issue?

2

manage style properties for LV_STATE_FOCUSED state

4

Thanks for your information.
I have try to change border,shadow,outline style prop in LV_STATE_FOCUSED, like follows, but still no work.

    //lv_obj_set_style_grid_cell_column_pos
    lv_obj_set_style_border_post(roller1, false, LV_PART_MAIN | LV_STATE_FOCUSED);
    lv_obj_set_style_shadow_width(roller1, 0, LV_PART_MAIN | LV_STATE_FOCUSED);
    lv_obj_set_style_shadow_color(roller1, lv_color_make(255, 0, 0), LV_PART_MAIN | LV_STATE_FOCUSED);

    lv_obj_set_style_outline_width(roller1, 0, LV_PART_MAIN | LV_STATE_FOCUSED);
    lv_obj_set_style_outline_width(roller1, 0, LV_PART_SELECTED | LV_STATE_FOCUSED);
    lv_obj_set_style_outline_width(roller1, 0, LV_PART_SELECTED | LV_STATE_DEFAULT);
    lv_obj_set_style_outline_pad(roller1,0, LV_PART_MAIN | LV_STATE_FOCUSED);
    lv_obj_set_style_outline_color(roller1, lv_color_make(255, 0, 0), LV_PART_MAIN| LV_STATE_FOCUSED);

    lv_obj_set_style_border_width(roller1, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_width(roller1, 0, LV_PART_MAIN | LV_STATE_FOCUSED);
    lv_obj_set_style_border_color(roller1, lv_color_make(255, 0, 0), LV_PART_MAIN | LV_STATE_FOCUSED);

I try to remove roller1 from group. this focus border can be disabled here.

lv_group_remove_obj(roller1);

and if remove style all befor set it’s prop, this focus border can be disabled too.

lv_obj_remove_style_all(roller1);

Do you have any comments about which is the specific style properties about this focus border?

5

lv_obj_set_style_outline_opa(roller, LV_OPA_0, LV_PART_MAIN | LV_STATE_FOCUS_KEY);

6 
  lv_obj_remove_style(ui_Screen3_Roller1, NULL, LV_STATE_FOCUS_KEY);
  lv_obj_remove_style(ui_Screen3_Roller1, NULL, LV_STATE_EDITED);