Reading RGB color values of the image specific coordinates

How-to
1

Description

Extracting RGB color values from the specific coordinates of the image

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

ESP32-S3

What LVGL version are you using?

8.3.6

What do you want to achieve?

I am working with RGB color palette. I want to be able know what color is specific point in the image. Lets say I have a 320x170 display. The image displayed on the screen is color palette as following:

image
image1402×410 58.2 KB

As you can see from the image above, the cursor is on the blueish color and the coordinates are:
X = 126
Y = 74

The expected result:
R:16
G:199
B:219

is LVGL capable of determining the RGB values for the particular coordinates? Ideally, I would pass coordinates to the function and it would return me RGB values.

What have you tried so far?

Tried looking for how to determine the color of specific coordinates of the image but without any luck. If it is not possible to do, what would be alternatives?

2

UPDATE:
I have discovered lvgl functions:

lv_img_buf_set_px_color

and

lv_img_buf_get_px_color

However, I cant get them to work.

For this simple experiment, I have a simple red rectangle as an png image to cover my whole display:

image
image1424×617 25.1 KB

I have tried to do the following:


LV_IMG_DECLARE(red_square)
static lv_obj_t * ui_redsquare;

void display_red_square(){
    //ui_Screen1 = lv_obj_create(NULL);
    //lv_obj_clear_flag(ui_Screen1, LV_OBJ_FLAG_SCROLLABLE);      /// Flags

    ui_redsquare = lv_img_create(lv_scr_act());
    lv_img_set_src(ui_redsquare, &red_square);
    lv_obj_set_width(ui_redsquare, LV_SIZE_CONTENT);   /// 1
    lv_obj_set_height(ui_redsquare, LV_SIZE_CONTENT);    /// 1
    lv_obj_set_align(ui_redsquare, LV_ALIGN_CENTER);
    lv_obj_add_flag(ui_redsquare, LV_OBJ_FLAG_ADV_HITTEST);     /// Flags
    lv_obj_clear_flag(ui_redsquare, LV_OBJ_FLAG_SCROLLABLE);      /// Flags
}


void set_img_color(){

    lv_color_t c = lv_color_make(0, 255, 0);
    lv_img_buf_set_px_color(ui_redsquare,50,50,c);
    lv_img_buf_set_px_color(ui_redsquare,51,51,c);
    lv_img_buf_set_px_color(ui_redsquare,52,52,c);
    lv_img_buf_set_px_color(ui_redsquare,53,53,c);
    lv_img_buf_set_px_color(ui_redsquare,54,54,c);
    lv_img_buf_set_px_color(ui_redsquare,55,55,c);
    lv_img_buf_set_px_color(ui_redsquare,56,56,c);
    lv_img_buf_set_px_color(ui_redsquare,57,57,c);
    lv_img_buf_set_px_color(ui_redsquare,58,58,c);
    lv_img_buf_set_px_color(ui_redsquare,59,59,c);
}

I was expecting some of the display to change the color to green, but nothing happened.

in my main I do;

    lvgl_setup();
    display_red_square();
    set_img_color()

I have also tried the following:

LV_IMG_DECLARE(red_square)
static lv_obj_t * ui_redsquare;

void display_red_square(){
    ui_redsquare = lv_img_create(lv_scr_act());
    lv_img_set_src(ui_redsquare, &red_square);
    lv_obj_set_width(ui_redsquare, LV_SIZE_CONTENT);   /// 1
    lv_obj_set_height(ui_redsquare, LV_SIZE_CONTENT);    /// 1
    lv_obj_set_align(ui_redsquare, LV_ALIGN_CENTER);
    lv_obj_add_flag(ui_redsquare, LV_OBJ_FLAG_ADV_HITTEST);     /// Flags
    lv_obj_clear_flag(ui_redsquare, LV_OBJ_FLAG_SCROLLABLE);      /// Flags
}

void get_img_color(){
    lv_color_t pixel_color = lv_img_buf_get_px_color(ui_redsquare, 50, 50,lv_color_make(0, 0, 0));
    uint8_t red = LV_COLOR_GET_R(pixel_color);
    uint8_t green = LV_COLOR_GET_G(pixel_color);
    uint8_t blue = LV_COLOR_GET_B(pixel_color);
    printf("Pixel color: R:%d, G:%d, B:%d \n", red, green, blue);
}

and in my main.c I do:

    lvgl_setup();
    display_red_square();
    get_img_color();

But the printf prints:

Pixel color: R:0, G:0, B:0