Migrating from 7.5 to 8.1 - Tabview outline

How-to
1

Description

How to remove tab view outline

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

Simulator

What LVGL version are you using?

8.1

What do you want to achieve?

Remove the outline

What have you tried so far?

Docs

Code to reproduce

    lv_obj_t * tv = lv_tabview_create(scr, LV_DIR_TOP, 50);
    lv_obj_set_height(tv, 535);

    lv_obj_set_style_pad_right(tv, LV_STATE_DEFAULT, LV_HOR_RES / 6);

    lblMenuTime = lv_label_create(lv_scr_act());
    lv_label_set_text(lblMenuTime, "00:00");
    lv_obj_align(lblMenuTime, LV_ALIGN_TOP_RIGHT, -70, 8);

    lv_obj_add_flag(lblMenuTime, LV_OBJ_FLAG_HIDDEN);
	lv_obj_set_style_text_color(lblMenuTime, lv_palette_main(LV_PALETTE_LIME), LV_PART_MAIN);
    lv_label_set_recolor(lblMenuTime, true);
	lv_obj_set_style_text_font(lblMenuTime, &lv_font_montserrat_48, LV_PART_MAIN);

    lv_obj_set_pos(tv, 0, 0);

Screenshot and/or video

image
image1028×91 4.08 KB

Thanks!

2

This isnt an exact answer to this question, but from a quick glance it looks like all of your questions could be solved by adjusting styles.

In this particular case my best guess would be by the use of lv_obj_set_style_boder_width and choosing a value of 0,

I would suggets having a good look through the style documentation to see what the options are and then if you still have questions you can follow up.

I am primarily a micropython developer and so am not 100% sure that this is correct, but whatever you are using to develop code (VS code for me) should have some form of intelitext to give suggestions about what style options there are.

Again I know this is micropython but as an alternative you could have a look at the simulator (found here: LVGL/MicroPython Simulator) and type scr.set_style_ into the prompt followed by tab, it will show you suggestions.

Hopefully this has been of some help

3

Thanks for the suggestion but that doesnt seem to exist in the documentation :frowning:

4

It definitely exists as I have used it, hence my suggestion of using the autocomplete to test things.

Here is a printout from the prompt on the simulator.

image
image713×340 23.5 KB

You could also have a look at edgeline, the beta doesn’t have all the features and widgets but it does allow setting styles and things like the border width are included.

5

My bad, i copied your example not noticing the missing “r”…

6

Haha sorry about that, slight typo there, hopefully thats helped you a bit though

7

Unfortunately not.

I tried this:

lv_obj_t * tv = lv_tabview_create(scr, LV_DIR_TOP, 50);
lv_obj_set_height(tv, 535);

static lv_style_t style;
lv_style_init(&style);

lv_style_set_border_width(&style, 0);
lv_obj_add_style(tv, &style, 0);

Maybe I’m missing something?

8

image
image1032×116 4.52 KB

9

So I have looked into it a bit, and tabview is a compound widget so it looks like you may need to change the border width of the button matrix.

I am not sure of the correct code in C but I have put together something in the micropython simulator which may provide a clue (look at the last line):

https://sim.lvgl.io/v8.1/micropython/ports/javascript/index.html?script_startup=https://raw.githubusercontent.com/lvgl/lvgl/935caa64e4c33d63ec937a323d93d53730ec487e/examples/header.py&script=https://raw.githubusercontent.com/lvgl/lvgl/935caa64e4c33d63ec937a323d93d53730ec487e/examples/widgets/tabview/lv_example_tabview_1.py&script_direct=917470f0bb7f4858c6c5cbfc15cbd9ca78f7d152

As a complete guess the c code you would need would be:

lv_obj_t * tv = lv_tabview_create(scr, LV_DIR_TOP, 50);
lv_obj_set_height(tv, 535);
lv_bth_matrix_t * tv_btns = lv_get_tab_btns(tv)
static lv_style_t style;
lv_style_init(&style);

lv_style_set_border_width(&style, 0);
lv_obj_add_style(tv_btns, &style, 0);
10

thanks for the suggestion.
I get:
undefined reference to `lv_get_tab_btns’
So let me search for the answer…

11

Its quite odd as the border does disappear if you scroll down:

image
image1017×211 11.3 KB

12

Looks like it should actually be lv_tabview_get_tab_btns, give that a try

13

Sorry,no change:

image
image1029×80 3.06 KB

14

Full print screen:

image
image1544×318 46.1 KB

15

Hi,

The outline is added in LV_STATE_FOCUS_KEY state. So it should be visible if you have focused the tabview with a keyboard or encoder input device.

Anyway, it should work:

    lv_obj_t * btnm = lv_tabview_get_tab_btns(tabview);
    lv_obj_set_style_outline_width(btnm, 0, LV_STATE_FOCUS_KEY);
    lv_obj_set_style_outline_width(btnm, 0, LV_PART_ITEMS | LV_STATE_FOCUS_KEY);
16

Wow!
Genius, that worked perfectly!
Thank you so much :slight_smile:

1 Like