Unexpected effect of image display

[zavierluo]

Description

I use the image widget of lvgl v9.0.0 to display a png image with gradient effect, the actual effect in simulator is not so smooth.

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

Simulator

What LVGL version are you using?

LVGL v8.3.10
LVGL v9.0.0

What do you want to achieve?

I hope that the actual effect is smooth, just like the source image.

What have you tried so far?

1. Use Online image converter - BMP, JPG or PNG to C array | LVGL to convert the following source image.

• source image
  
• resulting c file
  test.c (2.3 MB)

2. use image widget to display the image and get the following effect.
   

Code to reproduce

The code block(s) should be formatted like:

	lv_obj_t * obj = lv_image_create(lv_screen_active());

	LV_IMAGE_DECLARE(test);
        lv_image_set_src(obj, &test);
        lv_obj_center(obj);

[glory-man]

I think this is nornal for LV_COLOR_FORMAT_RGB565, IMHO
try such image

[zavierluo]

Thanks a lot, the effect is improved dramatically by using the new image. May I know what’s the difference of the original image and new image?

New effect in simulator.

[glory-man]

I added noise to the original image in the editor

[glory-man]

your original image has 32bit palette, while output image - 16bit - 65536 times fewer colors. I tried such pictures myself on my display and saw something similar

[zavierluo]

Got it, can you please share the method of how to add noise to a image? Which tool can be used?

The following image is got when I try to add noise.

[glory-man]

gimp
menu Colours - Dither
I used close values for the channels

[zavierluo]

Thanks a lot.

[kdschlosser]

dithering m8 dithering.

Instead of adding noise try using this code.

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
};


uint8_t closest_rb(uint8_t c)
{
    return c >> 3 << 3;
}


uint8_t closest_g(uint8_t c)
{
    return c >> 2 << 2;
}


void rgb565_dither_pixel(uint16_t x, uint16_t y, lv_color_t *col)
{
    uint8_t threshold_id = (uint8_t)(((y & 7) << 3) + (x & 7));
    col->red = closest_rb(((col->red & 0xF8) + RED_THRESH[threshold_id]) & 0xFF) & 0xF8;
    col->green = closest_g(((col->green & 0xFC) + GREEN_THRESH[threshold_id]) & 0xFF) & 0xFC;
    col->blue = closest_rb(((col->blue & 0xF8) + BLUE_THRESH[threshold_id]) & 0xFF) & 0xF8;
}


void lv_rgb565_dither(uint8_t *buf, uint16_t width, uint16_t height, lv_color_format_t format) {
    lv_color_t *color;
    uint8_t *p;
    for (uint16_t y=0; y < height; y++) {
        for (uint16_t x=0; x < width; x++) {
            if (format == LV_COLOR_FORMAT_RGB888) {
                p = &buf[height * y + x];
                color = (lv_color_t *)p;
            } else if ((format == LV_COLOR_FORMAT_ARGB8888) || (format == LV_COLOR_FORMAT_XRGB8888)) {
                p = &buf[height * y + x + 1];
                color = (lv_color_t *)p;
            } else {
                continue;
            }
            rgb565_dither_pixel(x, y, color);
        }
    }
}

Turns this

into this

[Marian_M]

Primary understand what 565 16 bit gui is. Little math you have 5bit for color = 32 levels for example for blue gradient. Nothing more. whe display is 320 pix width and you create gradient result is zebra with 10pix same color x 32 levels …

For smooth switch LCD to 24bit mode and framebuffer and lib too. But here too exist limits for example 800px width gradient use 256 levels etc.