LVGL 8.2 re-coloring

Defining variables

static lv_obj_t* red_slider, * green_slider, * blue_slider, * intense_slider;
static lv_obj_t* img1;

Event handling callback function

static void slider_event_cb(lv_event_t* e)
{
    
    LV_UNUSED(e);
    /*Recolor the image based on the sliders' values*/
    lv_color_t color = lv_color_make(lv_slider_get_value(red_slider), lv_slider_get_value(green_slider),
        lv_slider_get_value(blue_slider)); // Get three slider The value of the composition RGB Color 
    lv_opa_t intense = lv_slider_get_value(intense_slider);  // obtain slider Value of constitutes transparency 
    lv_obj_set_style_img_recolor_opa(img1, intense, 0); //  Recolor colors 
    lv_obj_set_style_img_recolor(img1, color, 0);  //  Recolor transparency 
}

establish slider

static lv_obj_t* create_slider(lv_color_t color)
{
    
    lv_obj_t* slider = lv_slider_create(lv_scr_act()); // establish slider object 
    lv_slider_set_range(slider, 0, 255); // set range 0~255
    lv_obj_set_size(slider, 10, 200); // Set up slider size 
    lv_obj_set_style_bg_color(slider, color, LV_PART_KNOB); // Set up knob The background color 
    lv_obj_set_style_bg_color(slider, lv_color_darken(color, LV_OPA_40),  LV_PART_INDICATOR); // Set up indicator Back sway color 
    lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL); // Add registration LV_EVENT_VALUE_CHANGED event 
    return slider; //  return slider object 

}
/** * Demonstrate runtime image re-coloring */
static void lv_example_img_2(void)
{
    
    /*Create 4 sliders to adjust RGB color and re-color intensity*/
    red_slider = create_slider(lv_palette_main(LV_PALETTE_RED)); // Create red slider
    green_slider = create_slider(lv_palette_main(LV_PALETTE_GREEN));// Create green slider
    blue_slider = create_slider(lv_palette_main(LV_PALETTE_BLUE));// Create blue slider
    intense_slider = create_slider(lv_palette_main(LV_PALETTE_GREY));// Create gray slider
    lv_slider_set_value(red_slider, LV_OPA_20, LV_ANIM_OFF); // Set the initial value and close slider Control animation effect 
    lv_slider_set_value(green_slider, LV_OPA_90, LV_ANIM_OFF);// Set the initial value and close slider Control animation effect 
    lv_slider_set_value(blue_slider, LV_OPA_60, LV_ANIM_OFF);// Set the initial value and close slider Control animation effect 
    lv_slider_set_value(intense_slider, LV_OPA_50, LV_ANIM_OFF);// Set the initial value and close slider Control animation effect 
    lv_obj_align(red_slider, LV_ALIGN_LEFT_MID, 25, 0);//LV_ALIGN_LEFT_MID Alignment 
    lv_obj_align_to(green_slider, red_slider, LV_ALIGN_OUT_RIGHT_MID, 25, 0);//green_slider Align to red_slider Outer frame right middle 25,0 It's about 
    lv_obj_align_to(blue_slider, green_slider, LV_ALIGN_OUT_RIGHT_MID, 25, 0);//blue_slider Align to green_slider Outer frame right middle 25,0 It's about 
    lv_obj_align_to(intense_slider, blue_slider, LV_ALIGN_OUT_RIGHT_MID, 25, 0);//intense_slider Align to blue_slider Outer frame right middle 25,0 It's about 
    /*Now create the actual image*/
    LV_IMG_DECLARE(img_cogwheel_argb)   //  Declare image resources 
        img1 = lv_img_create(lv_scr_act());  //  establish image object 
    lv_img_set_src(img1, &img_cogwheel_argb); // Set pictures 
    lv_obj_align_to(img1, intense_slider, LV_ALIGN_OUT_RIGHT_MID, 25, 0);//img1 Align to blue_slider Outer frame right middle 25,0 It's about 
    lv_event_send(intensintense_slidere_slider, LV_EVENT_VALUE_CHANGED, NULL); // towards intense_slider Control sending LV_EVENT_VALUE_CHANGED event 
}

Running effect