Indicator on tabview button not sizing correctly with button matrix

mikep · December 19, 2019, 6:19pm

Description

With a tabview with 2 tabs and setting the first tabs buttons width to twice that of the second button the indicator below the button is not sized correctly.

What do you expect?

The indicator below the buttons to sized correctly with the buttons.

Code to reproduce

  tabviewOnOff = lv_tabview_create(lv_scr_act(), NULL);

  // Add 2 tabs (the tabs are page (lv_page) and can be scrolled
  tabThermostatOn = lv_tabview_add_tab(tabviewOnOff, "On");
  tabThermostatOff = lv_tabview_add_tab(tabviewOnOff, "Off");

  lv_tabview_set_tab_act(tabviewOnOff, 1, LV_ANIM_OFF);

  // set one button to twice the rest
  lv_tabview_ext_t * ext = (lv_tabview_ext_t *)lv_obj_get_ext_attr(tabviewOnOff);
  lv_btnm_set_btn_width(ext->btns, 0, 4);

embeddedt · December 19, 2019, 11:38pm

This is not really a bug, as accessing the ext_attr structure of objects directly is not officially supported. It can lead to issues like this, as the underlying implementation is not expecting you to change properties like that.

In your case, the problem is that the tabview is not using button widths to determine the width of the indicator, because it assumes that all the buttons are the same width. Do you think it’s worthwhile adding this feature to 7.0?

mikep · December 20, 2019, 3:18am

Thanks for the quick response. I would like it fixed. but is it worthwhile? That is up to you.

Thanks

kisvegabor · December 21, 2019, 7:42pm

The tabview supposes that the tab buttons have the same width.

As this way of usage is really not supported I think it’s not worth to fix it.

Anyway, it’s an interesting idea to make possible to set different width for the tab buttons. If you are interested, you can open topic for it in the Feature request category.

mikep · December 21, 2019, 8:29pm

Thanks I will do that. In the mean time can you point me in a direction to fix this myself? I see in the tabview.c code where it is calculating the indicator size. But I think this should be changed in lv_tabview_set_tab_act to get the selected button width or height depending on the button placement. Where is the button width? Has it already been calculated?

Thanks

kisvegabor · December 21, 2019, 9:32pm

Yes. The animation should be applied too. (similarly to the position animations)

The size of the buttons is stored internally in the button matrix object. See

github.com

littlevgl/lvgl/blob/master/src/lv_objx/lv_btnm.h#L57


    LV_BTNM_CTRL_CLICK_TRIG = 0x0100, /**< 1: Send LV_EVENT_SELECTED on CLICK, 0: Send LV_EVENT_SELECTED on PRESS*/
};
typedef uint16_t lv_btnm_ctrl_t;


/*Data of button matrix*/
typedef struct
{
    /*No inherited ext.*/ /*Ext. of ancestor*/
    /*New data for this type */
    const char ** map_p;                              /*Pointer to the current map*/
    lv_area_t * button_areas;                         /*Array of areas of buttons*/
    lv_btnm_ctrl_t * ctrl_bits;                       /*Array of control bytes*/
    const lv_style_t * styles_btn[_LV_BTN_STATE_NUM]; /*Styles of buttons in each state*/
    uint16_t btn_cnt;                                 /*Number of button in 'map_p'(Handled by the library)*/
    uint16_t btn_id_pr;                               /*Index of the currently pressed button or LV_BTNM_BTN_NONE*/
    uint16_t btn_id_act;    /*Index of the active button (being pressed/released etc) or LV_BTNM_BTN_NONE */
    uint8_t recolor : 1;    /*Enable button recoloring*/
    uint8_t one_toggle : 1; /*Single button toggled at once*/
} lv_btnm_ext_t;


enum {

Actually it seems like good idea to read the width from there.

In dev-7.0 I’ve updated the tabview object to reduce duplicated codes. See this for example:

github.com

littlevgl/lvgl/blob/dev-7.0/src/lv_objx/lv_tabview.c#L828


    refr_content_size(tabview);
    refr_indic_size(tabview);


    refr_align(tabview);


    lv_tabview_set_tab_act(tabview, ext->tab_cur, LV_ANIM_OFF);
}






static void refr_indic_size(lv_obj_t * tabview)
{
    lv_tabview_ext_t * ext = lv_obj_get_ext_attr(tabview);


    const lv_style_t * style_btn_bg  = lv_tabview_get_style(tabview, LV_TABVIEW_STYLE_BTN_BG);
    const lv_style_t * style_indic  = lv_tabview_get_style(tabview, LV_TABVIEW_STYLE_INDIC);


    if(style_indic == NULL) style_indic = &lv_style_plain_color;




    /*Set the indicator width/height*/

If it’s possible in your project I suggest using the dev-7.0 branch. Merging it from v6.1 would be quite difficult.

mikep · December 22, 2019, 12:14am

Sorry I’m using lvgl/Arduino branch. Pablo just merge the 6.1 code into that branch. Is there a way to automate the lvgl/Arduino branch so that Pablo doesn’t have to manually merge the code?

I will look into changes for the existing 6.1 Arduino branch. I don’t think it will be that hard. I will also need to get the x offset or y offset for the buttons.

thanks

embeddedt · December 22, 2019, 1:59am

He did? It seems that the last change to master was made at the end of September.

The tabview code has changed somewhat since 6.1. It would simply the workload if you made the change against 7.0, rather than us having to manually port it from a 6.1 codebase.

mikep · December 22, 2019, 2:07am

I agree changing 7.0 would be easier. But I have no way to test it. Unless… I get the simulator running. I tried to get the simulator running once on windows without success. Do you have setup information for platformio and visual studio code?

Thanks

kisvegabor · December 22, 2019, 6:57am

The mentioned areas show the offset too. They are the real coordinates where the buttons are drawn (relative to the button matrix object)

The Visual studio project should simply work. Just download and run it. What problem have you found?

Have you tried the CodeBlock project?

mikep · December 22, 2019, 8:02am

I’m running windows. the instructions are for Linux. I installed MinGW. But when I try to build I get these errors.

Verbose mode can be enabled via -v, --verbose option
PACKAGES:
LDF: Library Dependency Finder -> http://bit.ly/configure-pio-ldf
LDF Modes: Finder ~ chain, Compatibility ~ soft
Found 2 compatible libraries
Scanning dependencies…
Dependency Graph
|-- 6.1.1
|-- <lv_drivers> 6.0.2
| |-- 6.1.1
Building in release mode
Compiling .pio\build\native\drivers\sdl2\driver.o
Compiling .pio\build\native\src\demo.o
‘gcc’ is not recognized as an internal or external command,
operable program or batch file.
Compiling .pio\build\native\src\img_bubble_pattern.o
‘gcc’ is not recognized as an internal or external command,
operable program or batch file.
Compiling .pio\build\native\src\main.o
‘gcc’ is not recognized as an internal or external command,
operable program or batch file.
Compiling .pio\build\native\src\syscalls.o
‘gcc’ is not recognized as an internal or external command,
operable program or batch file.
‘gcc’ is not recognized as an internal or external command,
operable program or batch file.
Compiling .pio\build\native\lib6b3\lvgl_ID6598\lv_core\lv_debug.o
Compiling .pio\build\native\lib6b3\lvgl_ID6598\lv_core\lv_disp.o
‘gcc’ is not recognized as an internal or external command,
operable program or batch file.
Compiling .pio\build\native\lib6b3\lvgl_ID6598\lv_core\lv_group.o
‘gcc’ is not recognized as an internal or external command,
operable program or batch file.
Compiling .pio\build\native\lib6b3\lvgl_ID6598\lv_core\lv_indev.o
‘gcc’ is not recognized as an internal or external command,
operable program or batch file.
Compiling .pio\build\native\lib6b3\lvgl_ID6598\lv_core\lv_obj.o
‘gcc’ is not recognized as an internal or external command,
operable program or batch file.
Compiling .pio\build\native\lib6b3\lvgl_ID6598\lv_core\lv_refr.o
‘gcc’ is not recognized as an internal or external command,
operable program or batch file.
*** [.pio\build\native\drivers\sdl2\driver.o] Error 1
Compiling .pio\build\native\lib6b3\lvgl_ID6598\lv_core\lv_style.o
*** [.pio\build\native\src\demo.o] Error 1
*** [.pio\build\native\src\img_bubble_pattern.o] Error 1
*** [.pio\build\native\src\main.o] Error 1
*** [.pio\build\native\src\syscalls.o] Error 1
*** [.pio\build\native\lib6b3\lvgl_ID6598\lv_core\lv_debug.o] Error 1
*** [.pio\build\native\lib6b3\lvgl_ID6598\lv_core\lv_disp.o] Error 1
*** [.pio\build\native\lib6b3\lvgl_ID6598\lv_core\lv_group.o] Error 1
*** [.pio\build\native\lib6b3\lvgl_ID6598\lv_core\lv_indev.o] Error 1
*** [.pio\build\native\lib6b3\lvgl_ID6598\lv_core\lv_obj.o] Error 1
‘gcc’ is not recognized as an internal or external command,
operable program or batch file.
*** [.pio\build\native\lib6b3\lvgl_ID6598\lv_core\lv_refr.o] Error 1
‘gcc’ is not recognized as an internal or external command,
operable program or batch file.
*** [.pio\build\native\lib6b3\lvgl_ID6598\lv_core\lv_style.o] Error 1
============================================================ [FAILED] Took 1.56 seconds ============================================================

kisvegabor · December 22, 2019, 9:44am

The PIO project is not working on Windows.

Please try the CodeBlocks project.

mikep · December 22, 2019, 9:06pm

Thanks I will try codeblocks.

I have a suggestion, why not move the indicator into the button matrix. That way the indicator could be used with the button matrix to show the selected button. I think it would make it more useful and add more visual indicator for the selected button.

kisvegabor · December 22, 2019, 9:49pm

Wouldn’t it look ugly if a line is animated in a 2D button matrix?

mikep · December 23, 2019, 12:33am

You are right it would look ugly. I would not change the look of anything already in lvgl. by default the indicator and indicator animation would be off and only turned on for tabview. But it someone wanted to use in the indicator and/or the animation of the indicator with the button matrix then it would be available. Right now it is only available in the tabview. I think it would be the same amount of code in the button matrix but usable by other components then just the tabview. I would also allow the indicator on any side of the button matrix. Just my 2 cents.

thanks