Tabview with buttons on left side are leaving artifacts from when switching to another tab

Bug (archived)
21

Hello,

I have upgraded to the 6.1.1 version of LVGL. the bug is still there but the 6.1 cover it up by setting the tabview button to pretty style. The code below will show the bug. Please try it in the simulator.

tabviewOnOff = lv_tabview_create(lv_scr_act(), NULL);

// place the buttons on the left side
lv_tabview_set_btns_pos(tabviewOnOff, LV_TABVIEW_BTNS_POS_LEFT);

// 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”);

// create the button
lv_obj_t * btnUp = lv_btn_create(tabThermostatOn, NULL);
lv_obj_set_size(btnUp, 370, 200);

// the thermostat tab to ON or OFF
lv_tabview_set_tab_act(tabviewOnOff, 0, LV_ANIM_OFF);

static lv_style_t style1;
lv_style_copy(&style1, lv_tabview_get_style(tabviewOnOff , LV_TABVIEW_STYLE_BTN_BG)); // Copy a built-in style to initialize the new style

style1.body.padding.left = 1;
style1.body.padding.right = 1;
style1.body.padding.top = 1;
style1.body.padding.bottom = 6;
style1.body.padding.inner = 2;
style1.body.main_color = LV_COLOR_WHITE;
style1.body.grad_color = LV_COLOR_WHITE;
style1.body.border.width = 0;
lv_tabview_set_style(tabviewOnOff , LV_TABVIEW_STYLE_BTN_BG, &style1);

22

I’ve tried your code in the simulator and I do not see the bug. Here is what it looks like before switching tabs:

Screenshot%20from%202019-12-19%2018-34-57

and after:

Screenshot%20from%202019-12-19%2018-35-05

I think it’s probably an issue with your display driver.

23

@Pablo2048 the driver seems to be causing this issue. Can you confirm it? Can you run your lvgl\Arduino in a simulator? I would not have picked the driver unless I don’t really know what the driver is. Is the driver this piece of code?

/* Display flushing */

void my_disp_flush(lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p)

{

  uint16_t c;

 // Serial.printf("Flushing area: x1:  %d,  x2:  %d,  y1:  %d,  y2:  %d\n", area->x1, area->x2, area->y1, area->y2);

  tft.startWrite(); /* Start new TFT transaction */

  tft.setAddrWindow(area->x1, area->y1, (area->x2 - area->x1 + 1), (area->y2 - area->y1 + 1)); /* set the working window */

  for (int y = area->y1; y <= area->y2; y++) {

    for (int x = area->x1; x <= area->x2; x++) {

      c = color_p->full;

      tft.writeColor(c, 1);

      color_p++;

    }

  }

  tft.endWrite(); /* terminate TFT transaction */

  lv_disp_flush_ready(disp); /* tell lvgl that flushing is done */

}

Not sure how this code could map part of an image from another screen on to this page.

24

No, the driver is not piece of code. I’m using https://github.com/Bodmer/TFT_eSPI as an low level (and fast) driver. Can you please check your user_setup?

25

Ok so the driver is Bodmer’s TFT_eSPI. I like his code. It works good.

So I just tried the code on my system again and it works now. But the buttons messaged up when I press the on button it selects the off button tab.

So for now lets just forget this. I have a work around and if I see it again. I will bring the issue back up.

Pablo Is there a way to run your code in the simulator?

thanks

26

It would generally be impossible to simulate the Arduino driver on a PC, unless a complete emulator for the Arduino plus its display hardware exists.