Gradient image color transition problem

How-to
1

Hello, I’m designing an interface as shown in the image. I’m having issues with the image quality. I designed the panel backgrounds in Photoshop. They have gradient color transitions. However, when I generate the code for LVGL, the gradient transitions are very noticeable. The image quality suffers. I’m using 16-bit RGB. I designed the interface and generated the code in Squareline Studio. How can I make the gradient transitions smoother?

ss
ss838×460 74.3 KB

2

Did you use the same colour mode in Photoshop as in LVGL? Having more bits per colour in Photoshop is one possible source for the banding.

3

Currently there is no dithering support in LVGL. That is what is going to be needed to fix the issue.

Here is some dithering code you can use…

#define CALC_THRESHOLD(x, y)  (uint8_t)(((y & 7) << 3) + (x & 7))



uint8_t red_thresh[] = { 1, 7, 3, 5, 0, 8, 2, 6, 7, 1, 5, 3, 8, 0, 6, 2, 3, 5, 
                         0, 8, 2, 6, 1, 7, 5, 3, 8, 0, 6, 2, 7, 1, 0, 8, 2, 6, 
                         1, 7, 3, 5, 8, 0, 6, 2, 7, 1, 5, 3, 2, 6, 1, 7, 3, 5, 
                         0, 8, 6, 2, 7, 1, 5, 3, 8, 0 };
    
uint8_t green_thresh[] = { 1, 3, 2, 2, 3, 1, 2, 2, 2, 2, 0, 4, 2, 2, 4, 0, 3, 1,
                           2, 2, 1, 3, 2, 2, 2, 2, 4, 0, 2, 2, 0, 4, 1, 3, 2, 2,
                           3, 1, 2, 2, 2, 2, 0, 4, 2, 2, 4, 0, 3, 1, 2, 2, 1, 3,
                           2, 2, 2, 2, 4, 0, 2, 2, 0, 4 };
                           
uint8_t blue_thresh[] = { 5, 3, 8, 0, 6, 2, 7, 1, 3, 5, 0, 8, 2, 6, 1, 7, 8, 0, 
                          6, 2, 7, 1, 5, 3, 0, 8, 2, 6, 1, 7, 3, 5, 6, 2, 7, 1, 
                          5, 3, 8, 0, 2, 6, 1, 7, 3, 5, 0, 8, 7, 1, 5, 3, 8, 0, 
                          6, 2, 1, 7, 3, 5, 0, 8, 2, 6 };



static inline void rgb565_dither_pixel(uint8_t treshold_id, uint16_t *pixel)
{
    *pixel = (((((*pixel >> 8) & 0xF8) + red_thresh[treshold_id]) << 8) |
              ((((*pixel >> 3) & 0xFC) + green_thresh[treshold_id]) << 3) |
              ((((*pixel & 0x1F) << 3) + blue_thresh[treshold_id]) >> 3));
}


void flush_cb(lv_display_t *disp, lv_area_t *area, uint8_t *buf)
{

    uint32_t start_x = (uint32_t)area->x1;
    uint32_t start_y = (uint32_t)area->y1;
    
    uint32_t end_x = (uint32_t)area->x2;
    uint32_t end_y = (uint32_t)area->y2;
    
    uint32_t width = end_x - start_x + 1;
    uint32_t height = end_y - start_y + 1;

    uint16_t *buf_16 = (uint16_t *)buf;
    
    for (uint32_t y=0;y<height;y++) {
        for uint32_t x=0;x<width;x++) {
            rgb565_dither_pixel(CALC_THRESHOLD((x + start_x), (y + start_y)), buf_16);
            buf_16++;
    }
    
    // write buffer data here. 
}
1 Like