Tabview bar randomly expands or change color

General discussion
1

Hi everybody,
I’m struggling with two very disappointing bugs(?) which sometimes makes my application unusable.
I’m using a tabview with 4 tabs, one of which have some textboxes with a related keyboad event (taken from the keyboard example).
1)
When I slide to that tab and press on a textbox, the keyboard appears, but contemporary the upper tabview bar expands in height covering half the screen. Then, when I close the keyboard the bar expands to the whole screen and it’s impossible to do anything else, except force closing the app.
I’ve tried to add some sleeps while creating the graphics to avoid eventual errors, but nothing changed.
2)
Sometimes the tabview bar color randomly change to green or transparent even if I set it statically at application start.

I’m using LVGL on a reTerminal with Raspberry Lite OS (64 bit) and C++.

Thanks in advance for your support.

Alessandro

2

1669204893796
16692048937962304×1728 148 KB

IMG-20221123-WA0000
IMG-20221123-WA00001080×1920 126 KB

IMG-20221123-WA0001
IMG-20221123-WA00011080×1920 125 KB

The first is the normal visualization, the others are the reported bugs

3

Regarding the keyboard issue: can you share a minimal code snippet to show how you do it?

Regarding the color changing issue: please create a video about it.

4

Hi, sorry for the delay. I’ll give you my main menu code.
Regarding the changing color I think a video would be useless because it changes color at the beginning of the program execution and it stucks with that color for the whole session.

void lv_menu_imx(bool graphics, IMX *imx)

{

    if (LV_HOR_RES <= 320)

    {

        disp_size = DISP_SMALL;

    }

    else if (LV_HOR_RES < 720)

    {

        disp_size = DISP_MEDIUM;

    }

    else

    {

        disp_size = DISP_LARGE;

    }

    lv_imx = imx;

    lv_ini.load_file("config.ini");

    lv_config = lv_ini.get_data();

    tab_h = 70;

    font_num = &openSans_500;

    font_sfCompact = &sfCompactDisplay_25;

    font_ip = &openSans_30;

    font_large = &roboto_32;

    font_normal = &roboto_25;

    font_small = &roboto_18;

    font_slider = &robotoBold_25;

    font_sliderB = &robotoBold_40;

    long size;

    char *buf;

    size = pathconf(".", _PC_PATH_MAX);

    if ((buf = (char *)malloc((size_t)size)) != NULL)

        ptr = getcwd(buf, (size_t)size);

#if LV_USE_THEME_DEFAULT

    lv_theme_default_init(NULL, lv_palette_lighten(LV_PALETTE_BLUE, NULL), lv_palette_main(LV_PALETTE_RED), LV_THEME_DEFAULT_DARK, &lv_font_montserrat_24);

#endif

    initGrid();

    sleep(0.1);

   

    lv_style_init(&transparent_style);

    lv_style_set_bg_opa(&transparent_style, LV_OPA_0);

    lv_style_set_border_width(&transparent_style, 0);

    //Completely transparent button except inside icon

    lv_style_init(&stransp_btn_style);

    lv_style_set_bg_opa(&stransp_btn_style, LV_OPA_TRANSP);

    lv_style_set_border_opa(&stransp_btn_style, LV_OPA_TRANSP);

    lv_style_set_outline_opa(&stransp_btn_style, LV_OPA_TRANSP);

    lv_style_set_shadow_opa(&stransp_btn_style, LV_OPA_TRANSP);

    lv_style_init(&style_text_muted);

    lv_style_set_text_opa(&style_text_muted, LV_OPA_50);

    lv_style_init(&style_normal);

    lv_style_set_text_font(&style_normal, font_normal);

    lv_style_init(&style_title);

    lv_style_set_text_font(&style_title, font_large);

    lv_style_init(&style_ip);

    lv_style_set_text_font(&style_ip, font_ip);

    lv_style_init(&style_bullet);

    lv_style_set_radius(&style_bullet, 50);

    lv_style_set_bg_opa(&style_bullet, LV_OPA_COVER);

    lv_style_set_bg_color(&style_bullet, lv_color_make(0, 124, 170));

    lv_style_set_border_side(&style_bullet, LV_BORDER_SIDE_RIGHT);

    lv_style_init(&round_style);

    lv_style_set_radius(&round_style, 50);

    lv_style_set_bg_opa(&round_style, LV_OPA_COVER);

    lv_style_set_border_side(&round_style, LV_BORDER_SIDE_RIGHT);

    lv_style_init(&style_tv);

    lv_style_set_bg_color(&style_tv, lv_color_make(0, 40, 56));

    lv_style_set_bg_opa(&style_tv, LV_OPA_COVER);

    lv_style_init(&knob_style);

    lv_style_set_bg_color(&knob_style, lv_color_make(255, 255, 255));

    lv_style_init(&login_style);

    lv_style_set_bg_color(&login_style, lv_color_make(0, 40, 56));

    lv_style_set_border_color(&login_style, lv_color_make(112, 112, 112));

    lv_style_set_border_opa(&login_style, LV_OPA_100);

    lv_style_set_border_width(&login_style, 5);

    lv_style_init(&white_style);

    lv_style_set_text_color(&white_style, lv_color_make(255, 255, 255));

    lv_style_init(&black_style);

    lv_style_set_text_color(&black_style, lv_color_make(0, 0, 0));

    // Creazione numero camera e status led

    lv_style_init(&camera_color_style);

    lv_style_set_text_color(&camera_color_style, lv_color_make(lv_config.label_R, lv_config.label_G, lv_config.label_B));

    lv_style_init(&num_style);

    lv_style_set_bg_opa(&num_style, LV_OPA_0);

    lv_style_set_border_color(&num_style, lv_color_make(198, 209, 216));

    lv_style_set_border_opa(&num_style, LV_OPA_COVER);

    lv_style_set_border_width(&num_style, 5);

    lv_obj_t *win;

    win = lv_label_create(lv_scr_act());

    lv_label_set_text(win, "");

    lv_obj_set_width(win, 1280);

    lv_obj_set_height(win, 720);

    lv_obj_align_to(win, lv_scr_act(), LV_ALIGN_CENTER, 0, 0);

    // lv_obj_add_style(win, &style_tv, LV_PART_MAIN);

    lv_obj_clear_flag(win, LV_OBJ_FLAG_SCROLLABLE);

    bg_img = lv_img_create(win);

    lv_img_set_src(bg_img, &bgReterminal);

    lv_obj_align(bg_img, LV_ALIGN_CENTER, 0, 0);

    lv_obj_set_size(bg_img, 1280, 720);

    // lv_obj_add_style(lv_scr_act(), &style_tv, LV_PART_MAIN);

    lv_obj_clear_flag(lv_scr_act(), LV_OBJ_FLAG_SCROLLABLE);

    // Creazione e posizionamento tab

    tv = lv_tabview_create(lv_scr_act(), LV_DIR_TOP, tab_h);

    lv_obj_add_style(tv, &transparent_style, LV_PART_MAIN);

    lv_obj_align(tv, LV_ALIGN_TOP_LEFT, -30, 10);

    lv_obj_set_width(tv, 1290);

    num_btn = lv_btn_create(lv_scr_act());

    lv_obj_remove_style_all(num_btn);

    lv_obj_align(num_btn, LV_ALIGN_TOP_RIGHT, -120, 10);

    lv_obj_set_size(num_btn, 70, 70);

    lv_obj_add_style(num_btn, &num_style, 0);

    lv_obj_add_style(num_btn, &style_title, LV_PART_MAIN);

    lv_obj_set_style_radius(num_btn, LV_RADIUS_CIRCLE, 0);

    label_num_button = lv_label_create(num_btn);

    char num[4];

    (lv_config.camera_num < 10) ? sprintf(num, "0%d", lv_config.camera_num) : sprintf(num, "%d", lv_config.camera_num);

    lv_label_set_text(label_num_button, num);

    lv_obj_add_style(label_num_button, &camera_color_style, 0);

    lv_obj_set_style_text_font(label_num_button, font_ip, LV_PART_MAIN);

    lv_obj_align(label_num_button, LV_ALIGN_CENTER, 0, 3);

    status_led = lv_led_create(lv_scr_act());

    lv_obj_align(status_led, LV_ALIGN_TOP_RIGHT, -10, 10);

    lv_obj_set_size(status_led, 70, 70);

    lv_led_on(status_led);

    lv_obj_add_event_cb(tv, scrolling, LV_EVENT_VALUE_CHANGED, NULL);

    lv_obj_set_style_text_font(lv_scr_act(), font_large, LV_PART_ANY);

    if (disp_size == DISP_LARGE)

    {

        lv_obj_t *tab_btns;

        lv_obj_t *logo;

        lv_style_init(&style_tab);

        lv_style_set_border_width(&style_tab, 0);

        lv_style_set_border_opa(&style_tab, LV_OPA_0);

        tab_btns = lv_tabview_get_tab_btns(tv);

        lv_obj_add_style(tab_btns, &style_bullet, LV_PART_MAIN);

        lv_obj_add_style(tab_btns, &white_style, LV_PART_MAIN);

        lv_obj_add_style(tab_btns, &style_title, LV_PART_MAIN);

        lv_obj_add_style(tab_btns, &style_tab, LV_PART_MAIN);

        lv_obj_set_width(tab_btns, 1080);

        lv_obj_add_event_cb(tab_btns, tab_btns_click, LV_EVENT_VALUE_CHANGED, tv);

        logo = lv_img_create(tab_btns);

        lv_img_set_src(logo, &bts_logo);

        lv_obj_set_style_pad_left(tab_btns, LV_HOR_RES / 2 - 250, 0);

        lv_obj_align(logo, LV_ALIGN_LEFT_MID, -LV_HOR_RES / 2 + 300, 0);

    }

    t1 = lv_tabview_add_tab(tv, "INFO");

    t2 = lv_tabview_add_tab(tv, "LIVE");

    t3 = lv_tabview_add_tab(tv, "SETTINGS");

    if(graphics)

    {

        // START DRAW

        drawTH = std::thread(drawImgBufferIMX);

        drawTH.detach();

    }

    tab_camera_info(t1);

    sleep(0.1);

    tab_img_live(t2);

    sleep(0.1);

    tab_settings(t3);

    // Remove scroll flag from tabs

    lv_obj_clear_flag(t1, LV_OBJ_FLAG_SCROLLABLE);

    lv_obj_clear_flag(t2, LV_OBJ_FLAG_SCROLLABLE);

    lv_obj_clear_flag(t3, LV_OBJ_FLAG_SCROLLABLE);

   

}
5

I wanted to try the code but there a lot of undefined variables, types and app specific stuff in it.

Could you create a simple targeted code to demonstrate only the issue. Which I can copy paste and compile.