How to set more than two colors or gradient stops for an object?

How-to
1

I am using Master (latest) version (dated: 17 Jan 2024). It may be v8.3. I am implementing LVGL control in WPF technology. I am trying to implement gradient effect for an object. As per LVGL documentation, I have possible it using 2 ways. In both ways, I can take max number of colours or gradient stops as 2. If I want to set it as more than 2, then I am not getting idea to implement it.

In 1st way, I have implemented below code:

__declspec(dllexport) void DrawGradient1(int width, int height, int fillColor1, int fillColor2)
{
    static lv_style_t style;
    lv_style_init(&style);
    lv_style_set_radius(&style, 5);
    
    /*Make a gradient*/
    lv_style_set_bg_opa(&style, LV_OPA_COVER);
    static lv_grad_dsc_t grad;
    grad.dir = LV_GRAD_DIR_VER;
    grad.stops_count = 2;
    grad.stops[0].color = lv_palette_main(LV_PALETTE_RED);
    grad.stops[0].opa = LV_OPA_COVER;
    grad.stops[1].color = lv_palette_main(LV_PALETTE_GREEN);
    grad.stops[1].opa = LV_OPA_COVER;
    /*Shift the gradient to the bottom*/
    grad.stops[0].frac = 0;
    grad.stops[1].frac = 144;

    lv_style_set_bg_grad(&style, &grad);

    /*Create an object with the new style*/
    lv_obj_t* obj = lv_obj_create(lv_screen_active());
    lv_obj_add_style(obj, &style, 0);
    lv_obj_set_size(obj, width, height);
    lv_obj_center(obj);
}

In 2nd way, I have implemented below code:

__declspec(dllexport) void DrawGradient2(int width, int height, int fillColor1, int fillColor2)
{  
    lv_obj_t* grad = lv_obj_create(lv_screen_active());
    lv_obj_set_size(grad, width, height);
    lv_obj_center(grad);
    lv_obj_set_style_bg_color(grad, lv_color_hex(fillColor1), 0);
    lv_obj_set_style_bg_grad_color(grad, lv_color_hex(fillColor2), 0);
    lv_obj_set_style_bg_grad_dir(grad, LV_GRAD_DIR_VER, 0);
}
2

Inside lv_conf_internal.h file, I have found below code:

/*Number of stops allowed per gradient. Increase this to allow more stops.
 *This adds (sizeof(lv_color_t) + 1) bytes per additional stop*/
#ifndef LV_GRADIENT_MAX_STOPS
    #ifdef CONFIG_LV_GRADIENT_MAX_STOPS
        #define LV_GRADIENT_MAX_STOPS CONFIG_LV_GRADIENT_MAX_STOPS
    #else
        #define LV_GRADIENT_MAX_STOPS   2
    #endif
#endif

At the place of ‘2’, we just need to update your own number. For example, if you want to set max gradient stops as 40, then replace ‘2’ by ‘40’.

Now, my program with more gradient stops is as follow:

__declspec(dllexport) void ButtonGradient(int x, int y, int width, int height)
{
    static lv_style_t style;
    lv_style_init(&style);
    lv_style_set_radius(&style, 0);

    static lv_grad_dsc_t grad_dsc;

    grad_dsc.dir = LV_GRAD_DIR_HOR;
    grad_dsc.stops_count = 5;

    grad_dsc.stops[0].color = lv_palette_main(LV_PALETTE_RED);
    grad_dsc.stops[0].opa = LV_OPA_COVER;
    grad_dsc.stops[0].frac = 0;

    grad_dsc.stops[1].color = lv_palette_main(LV_PALETTE_GREEN);
    grad_dsc.stops[1].opa = LV_OPA_COVER;
    grad_dsc.stops[1].frac = 63;

    grad_dsc.stops[2].color = lv_palette_main(LV_PALETTE_BLUE);
    grad_dsc.stops[2].opa = LV_OPA_COVER;
    grad_dsc.stops[2].frac = 126;

    grad_dsc.stops[3].color = lv_palette_main(LV_PALETTE_YELLOW);
    grad_dsc.stops[3].opa = LV_OPA_COVER;
    grad_dsc.stops[3].frac = 189;

    grad_dsc.stops[4].color = lv_palette_main(LV_PALETTE_CYAN);
    grad_dsc.stops[4].opa = LV_OPA_COVER;
    grad_dsc.stops[4].frac = 255;

    lv_style_set_bg_grad(&style, &grad_dsc);
    lv_obj_t* ptrBtn = lv_button_create(lv_screen_active());
    lv_obj_set_pos(ptrBtn, x, y);
    lv_obj_set_size(ptrBtn, width, height);
    lv_obj_add_style(ptrBtn, &style, 0);
}

:blush: