How to get rid of focus border on page widget?

nusret3 · May 22, 2020, 11:41pm

Description

I’ve been using lv_theme_night. I am trying to port my code to 7.0 but I cannot get rid of the focus border on page widget. If I set BORDER_WIDTH to “0”, borders on textarea, dropdown and chart disappears (may be other widgets that I am not using)

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

STM32F4/Custom board/GCC

What do you want to achieve?

Disable the focus border of page widget

What have you tried so far?

Tried to modify lv_theme_material without any luck

Code to reproduce

    style_init_reset(&styles->bg);
// some other props
    lv_style_set_border_width(&styles->bg, LV_STATE_DEFAULT, BORDER_WIDTH); 
// If I set BORDER_WIDTH to 0, border disappears on page but it disappears on other widgets as well.

Screenshot and/or video

embeddedt · May 23, 2020, 1:01am

You should avoid modifying the built-in themes. Instead, you should create styles that override the properties you want and add those styles to your objects.

In your case I think you want to change the border color on LV_STATE_FOCUSED.

nusret3 · May 23, 2020, 11:21am

Playing with supplied examples are the best way to learn. You can always make a fresh start by executing
git fetch --all && git reset --hard && git pull
in lvgl directory.

That’s not the point. I handled it like this:

static lv_style_t style_page_override;
scr = lv_page_create(NULL, NULL);
lv_style_init(&style_page_override);
lv_style_set_border_width(&style_page_override, LV_STATE_DEFAULT , 0);
lv_obj_add_style(scr, LV_PAGE_PART_BG , &style_page_override);
lv_disp_load_scr(scr);

I am not sure if it is the cleanest way but it works!

abueno · May 23, 2020, 3:51pm

It’s not the same exact case, but how would you do it if you would like to disable all the focus borders? I am using only touch and it’s not needed…

Thanks

Alex

nusret3 · May 23, 2020, 4:02pm

#define BORDER_WIDTH 0
In lv_theme_material.c will disable all borders as I see.

abueno · May 24, 2020, 9:37am

Yes, it’s what I did. But as embeddedt said that we should not modify themes, I thought maybe there was another way (option) to disable it.

At the moment, though, I have created a copy of the material theme, and modified it, so I have my personal theme to test.

Thanks for the help.

Alex

nusret3 · May 24, 2020, 12:35pm

As I discovered so far, you can achieve it by defining a custom style like this:

lv_style_t my_custom_style;
lv_style_set_border_width(&my_custom_style, LV_STATE_DEFAULT , 0);

or you can modify the theme file or create your own by using template or modifying the existing themes. The author of this framework distributes it under MIT license -and this is awesome - so you are free to use, copy, modify, merge, publish, distribute…

For myself I choose to make my own ubuntu community theme like theme based on lv_theme_material.c

embeddedt · May 24, 2020, 2:04pm

Creating your own theme should be safe. The problem with modifying the existing theme file is that you open up the possibility of merge conflicts/incompatibilities when you try to update.

It’s more of a “best practice” than a mandated rule.

nusret3 · May 24, 2020, 2:16pm

That’s what I say. Use an existing theme instead of making one from scratch. It does not mean to modify built in source. Just make a copy.

kisvegabor · May 25, 2020, 9:59am

Removing the border is not exactly the same as removing the highlight if focused.

You can se here that the pages border uses the bg style:

github.com

lvgl/lvgl/blob/master/src/lv_themes/lv_theme_material.c#L1138


        case LV_THEME_LED:
            lv_obj_clean_style_list(obj, LV_LED_PART_MAIN);
            list = lv_obj_get_style_list(obj, LV_LED_PART_MAIN);
            _lv_style_list_add_style(list, &styles->led);
            break;
#endif
#if LV_USE_PAGE
        case LV_THEME_PAGE:
            lv_obj_clean_style_list(obj, LV_PAGE_PART_BG);
            list = lv_obj_get_style_list(obj, LV_PAGE_PART_BG);
            _lv_style_list_add_style(list, &styles->bg);

            lv_obj_clean_style_list(obj, LV_PAGE_PART_SCROLLABLE);
            list = lv_obj_get_style_list(obj, LV_PAGE_PART_SCROLLABLE);
            _lv_style_list_add_style(list, &styles->pad_inner);

            lv_obj_clean_style_list(obj, LV_PAGE_PART_SCROLLBAR);
            list = lv_obj_get_style_list(obj, LV_PAGE_PART_SCROLLBAR);
            _lv_style_list_add_style(list, &styles->sb);

#if LV_USE_ANIMATION

And here is how the focused color is added:

github.com

lvgl/lvgl/blob/master/src/lv_themes/lv_theme_material.c#L214


lv_style_set_text_color(&styles->scr, LV_STATE_DEFAULT, COLOR_SCR_TEXT);
lv_style_set_value_color(&styles->scr, LV_STATE_DEFAULT, COLOR_SCR_TEXT);
lv_style_set_text_font(&styles->scr, LV_STATE_DEFAULT, theme.font_normal);
lv_style_set_value_font(&styles->scr, LV_STATE_DEFAULT, theme.font_normal);

style_init_reset(&styles->bg);
lv_style_set_radius(&styles->bg, LV_STATE_DEFAULT, LV_DPX(8));
lv_style_set_bg_opa(&styles->bg, LV_STATE_DEFAULT, LV_OPA_COVER);
lv_style_set_bg_color(&styles->bg, LV_STATE_DEFAULT, COLOR_BG);
lv_style_set_border_color(&styles->bg, LV_STATE_DEFAULT, COLOR_BG_BORDER);
lv_style_set_border_color(&styles->bg, LV_STATE_FOCUSED, theme.color_primary);
lv_style_set_border_color(&styles->bg, LV_STATE_EDITED, theme.color_secondary);
lv_style_set_border_width(&styles->bg, LV_STATE_DEFAULT, BORDER_WIDTH);
lv_style_set_border_post(&styles->bg, LV_STATE_DEFAULT, true);
lv_style_set_text_font(&styles->bg, LV_STATE_DEFAULT, theme.font_normal);
lv_style_set_text_color(&styles->bg, LV_STATE_DEFAULT, COLOR_BG_TEXT);
lv_style_set_value_font(&styles->bg, LV_STATE_DEFAULT, theme.font_normal);
lv_style_set_value_color(&styles->bg, LV_STATE_DEFAULT, COLOR_BG_TEXT);
lv_style_set_image_recolor(&styles->bg, LV_STATE_DEFAULT, COLOR_BG_TEXT);
lv_style_set_line_color(&styles->bg, LV_STATE_DEFAULT, COLOR_BG_TEXT);
lv_style_set_line_width(&styles->bg, LV_STATE_DEFAULT, 1);

As @embeddedt suggested it’s better to hack the built-in themes externally than modifying the theme itself. So:

    static lv_style_t style;
    lv_style_init(&style);
    lv_style_set_border_color(&style, LV_STATE_FOCUSED, lv_color_hex(0xd6dde3));
    lv_obj_add_style(page, LV_PAGE_PART_BG, &style);

barbiani · May 29, 2020, 1:56am

So the idea is to have the focus border be the same color as the page border? Where did you get the color 0xd6dde3 from?

I have not played with the styles yet.

kisvegabor · June 5, 2020, 8:14am

Yes. The color is defined here: https://github.com/lvgl/lvgl/blob/master/src/lv_themes/lv_theme_material.c#L49

Rhaoma · June 6, 2020, 9:33pm

Hi
I couldn’t make any of it work. I suspect i might be doing it totally wrong, but either way I do it it still looks like this:
Pressed(red border suddenly shows):
Capture1

embeddedt · June 6, 2020, 10:57pm

@Rhaoma Please provide a minimal code snippet.

Rhaoma · June 7, 2020, 8:37am

This is the two styles for the different kinds of buttons:
(this is unrefined so I havent checked which things i can do without)
as of now it looks like this when i press a button:
Capture

static lv_style_t style_close_btn;                                                                                                                               
lv_style_set_bg_color       (&style_close_btn, LV_STATE_DEFAULT, LV_COLOR_MAKE(0xFF, 0x86, 0x00));
lv_style_set_bg_color       (&style_close_btn, LV_STATE_PRESSED, LV_COLOR_MAKE(0xFF, 0x79, 0x00));
lv_style_set_pad_bottom     (&style_close_btn, LV_STATE_DEFAULT, LV_DPI / 30);                                                  
lv_style_set_pad_top        (&style_close_btn, LV_STATE_DEFAULT, LV_DPI / 30);                                                  
lv_style_set_pad_left       (&style_close_btn, LV_STATE_DEFAULT, LV_DPI / 30);                                                  
lv_style_set_pad_right      (&style_close_btn, LV_STATE_DEFAULT, hres / 2);                                                     
lv_style_set_text_color     (&style_close_btn, LV_STATE_DEFAULT, LV_COLOR_WHITE);                                               
lv_style_set_image_recolor  (&style_close_btn, LV_STATE_DEFAULT, LV_COLOR_WHITE);                                               
lv_style_set_radius         (&style_close_btn, LV_STATE_DEFAULT, LV_RADIUS_CIRCLE);                                             
lv_style_set_border_width   (&style_close_btn, LV_STATE_DEFAULT, 2);                                                            
lv_style_set_border_color   (&style_close_btn, LV_STATE_DEFAULT, LV_COLOR_MAKE(0xFF, 0x79, 0x00));             
lv_style_set_border_color   (&style_close_btn, LV_STATE_PRESSED, LV_COLOR_MAKE(0xFF, 0x79, 0x00));                      
lv_style_set_shadow_width   (&style_close_btn, LV_STATE_DEFAULT, 5);                                                            
lv_style_set_shadow_color   (&style_close_btn, LV_STATE_DEFAULT, lv_color_hex(0x8a8a8a));                                       

static lv_style_t style_close_btn_blank;
lv_style_set_bg_color       (&style_close_btn_blank, LV_STATE_DEFAULT,  lv_color_hex(0xf2f2f2));                                
lv_style_set_bg_color       (&style_close_btn_blank, LV_STATE_PRESSED | LV_STATE_FOCUSED, lv_color_hex(0xe3e3e3)); 
lv_style_set_pad_bottom     (&style_close_btn_blank, LV_STATE_DEFAULT, LV_DPI / 30);                      
lv_style_set_pad_top        (&style_close_btn_blank, LV_STATE_DEFAULT, LV_DPI / 30);                                            
lv_style_set_pad_left       (&style_close_btn_blank, LV_STATE_DEFAULT, LV_DPI / 30);                                            
lv_style_set_pad_right      (&style_close_btn_blank, LV_STATE_DEFAULT, hres / 2);                                               
lv_style_set_text_color     (&style_close_btn_blank, LV_STATE_DEFAULT, LV_COLOR_WHITE);                                          
lv_style_set_image_recolor  (&style_close_btn_blank, LV_STATE_DEFAULT, LV_COLOR_WHITE);                                         
lv_style_set_border_width   (&style_close_btn_blank, LV_STATE_DEFAULT, 2);                                                      
lv_style_set_border_color   (&style_close_btn_blank, LV_STATE_DEFAULT, LV_COLOR_MAKE(0xFF, 0x79, 0x00));
lv_style_set_border_color   (&style_close_btn_blank, LV_STATE_PRESSED | LV_STATE_FOCUSED, LV_COLOR_MAKE(0xFF, 0x79, 0x00));
lv_style_set_radius         (&style_close_btn_blank, LV_STATE_DEFAULT, LV_RADIUS_CIRCLE);                                       
lv_style_set_shadow_width   (&style_close_btn_blank, LV_STATE_DEFAULT, 5);
lv_style_set_shadow_color   (&style_close_btn_blank, LV_STATE_DEFAULT, lv_color_hex(0x8a8a8a));

Here I use one of the styles for the button in the uppermost left corner:

lv_obj_t* BatBtnP;
BatBtnP = lv_btn_create(winOver, NULL);
lv_obj_add_style    (BatBtnP, LV_STATE_DEFAULT, &style_close_btn_blank);
lv_obj_set_size     (BatBtnP, 60, 60);
lv_obj_set_pos      (BatBtnP, 35, 25);
lv_obj_set_event_cb (BatBtnP, btn_event_handler);
BatBtnId = BatBtnP;

embeddedt · June 7, 2020, 11:51am

2 things:

You should always call lv_style_init before setting properties on a style.
You also need to set the outline width to 0 around the button with (lv_style_set_outline_width (&style_close_btn, LV_STATE_FOCUSED, 0);). This disables the red focus outline that appears when you press the button.

Rhaoma · June 7, 2020, 12:14pm

Thanks . I just went trough and fixed it, though i still have one problem:

I fixed it with LV_STATE_FOCUSED, like you showed, but if i press my cursor/finger, and drag it away from the object I get an animation around it for a quick second. Is that related or something entirely different?

embeddedt · June 7, 2020, 12:32pm

You probably need to set the outline width to 0 for one of the other states as well. I’m not sure which one; you might have to experiment a bit. My guess would be LV_STATE_PRESSED.