Grey pixels on 1 bit black and white image

How-to
1

Description

Hi all! I’m trying to draw black and white image in my desktop project and I’ve noticed some grey pixels in it. I’ve used LV_IMG_CF_INDEXED_1BIT color format and palette from two colors: black and white. So I expected no grey pixels at all. But they were there. Some white pixels become grey if there are some adjacent black pixels and another white pixel is on the diagonal position from the first one (just look on the screenshot). Later I’ve checked this effect with Visual Studio LVGL port ( GitHub - lvgl/lv_port_win_visual_studio: LVGL for Windows Visual Studio port ) and found it there too.
I don’t know how to make my images strongly black and white and I’m totally stuck. Please give me some advice.

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

I’m using Windows and Visual Studio 2022.

What LVGL version are you using?

I’ve faced the problem on LVGL 8.3.3 in my project. But also reproduced it with LVGL Visual Studio port and LVGL version 9.0.0 there.

What do you want to achieve?

I want to draw only black and white image without any gray color.

What have you tried so far?

I’ve tried to apply different styles to my image and to its parent panel (set shadows, borders, radius to 0 and so on), turn off anti-aliasing and check all options I’ve found in docs and source code. I even tried to debug lvgl source code but it seems hopeless.

Code to reproduce

Just an example of image is below. My image is more complex and has a lot of diagonal white pixels so the problem is more painful.

constexpr uint8_t _imageArray[] = {
        0xff, 0xff, 0xff, 0xff,    /*Color of index 0*/
        0x00, 0x00, 0x00, 0xff,    /*Color of index 1*/
        0xff, 0x00, 0xff, 0x00,
        0xff, 0x00, 0xff, 0x00,
        0xff, 0x00, 0xff, 0x00,
        0xff, 0x00, 0xff, 0x00,
        0x00, 0xff, 0x00, 0xff,
        0x00, 0xff, 0x00, 0xff,
        0x00, 0xff, 0x00, 0xff,
        0x00, 0xff, 0x00, 0xff,
        0xff, 0x00, 0xff, 0x00,
        0xff, 0x00, 0xff, 0x00,
        0xff, 0x00, 0xff, 0x00,
        0xff, 0x00, 0xff, 0x00,
        0x00, 0xff, 0x00, 0xff,
        0x00, 0xff, 0x00, 0xff,
        0x00, 0xff, 0x00, 0xff,
        0x00, 0xff, 0x00, 0xff,
    };
    const lv_img_dsc_t _imageSrc = {
		.header = {
			.cf = LV_IMG_CF_INDEXED_1BIT,
            .always_zero = 0,
            .w = 32,
            .h = 16
		},
		.data_size = sizeof(_imageArray),
		.data = _imageArray
	};

    lv_obj_t* img = lv_img_create(lv_scr_act());
    lv_img_set_src(img, &_imageSrc);

Screenshot and/or video

I’m using high screen zoom value (8-10) to make the problem obvious for you.
image