LVGL Draws Lines in Keyboard Buttons

How-to
1

LVGL Draws White Vertical Lines in Keyboard Buttons

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

TI F28335 Processor with Code Composer Studio C2000 Compiler

What LVGL version are you using?

v8.3

What do you want to achieve?

Want to remove those lines drawn when I click the keyboard buttons

What have you tried so far?

Tried anti-alising, changing Buffer and Keyboard Size

Code to reproduce

Add a code snippet which can run in the simulator. It should contain only the relevant code that compiles without errors when separated from your main code base.

    lv_obj_t * kb = lv_keyboard_create(lv_scr_act());
    lv_obj_remove_style_all(kb);

     lv_obj_align(kb, LV_ALIGN_BOTTOM_MID, 0, 0);

     lv_obj_add_style(kb, &styleKeyboardBackground, 0);
     lv_obj_add_style(kb, &styleKeyboardButtons, LV_PART_ITEMS);
     lv_obj_set_size(kb, 640, 270);

Screenshot and/or video

If possible, add screenshots and/or videos about the current state.

Media
Media2284×1029 410 KB

2

@kisvegabor Kindly review this, bit urgent.

3

Hi,

It’s unlikely that it’s an LVGL rendering issue. It should be one of the followings:

  1. Cache issue: Try invalidating D cache at the beginning and end of the flush_cb too (if your MCU has cache)
  2. Flushing issue: It can be some issues in the flush_cb. Maybe a +/- 1 error in width.
  3. Display driver issue: Maybe some clock rates are too fast or so.

Is it specific to the keyboard or do you see this problem on a normal button too?

4

Hi @kisvegabor , thanks for the response. Not seen on buttons, I only faced on “Key Matrix” and “Keyboard”

5

Please share your flush_cb.

6

@kisvegabor I used 2 different techniques for flushing and both have similar issue.
Here is the “for loop” method with single rendering buffer.

    lv_color_t * buf16 = (lv_color_t *)color_p;
     int32_t x, y;
     for(y = area->y1; y <= area->y2; y++) {
         for(x = area->x1; x <= area->x2; x++) {
             DrawPixelOnScreen(x, y, *buf16);
             buf16++;
         }
     }

Here is the one using “BitBlit” with double buffer (I also have tried single buffer, same results)

    uint16_t bufferNum = 0;
    if(color_p == 0x0025FA00)
    {
        bufferNum = 1;
    }
     _DoBitBlt(area->y1, area->y2, area->x1, area->x2, bufferNum);
7

@kisvegabor Please review the flush_cb

8

“Unfortunately” the flush_cb looks good.

What happens if you set the a smaller width to the keyboard? Will the lines shift too?

9

@kisvegabor Yes, they do. They get shifted according to the position of the keys. Just to be clear, the location of those white lines isn’t fixed. I mean which ever key is pressed, those lines move accordingly to the new key pressed.

10

I’m puzzled to be honest. I don’t thinks that it’s an LVGL issue as if it were it would have been reported by others too. The flush_cb looks good too.

Can you try creating 10 buttons in a row (similar to a row in the keyboard) with labels and keyboard-like styles to see if it’s specific to the keyboard somehow?