Dont's squash - gradient updates (#7646)

examples/grad/index.rst

@@ -0,0 +1,25 @@
+
+
+Play with a simple horizontal gradient
+--------------------------------------
+
+.. lv_example:: get_started/lv_example_grad_1
+  :language: c
+
+Play with a linear (skew) gradient
+----------------------------------
+
+.. lv_example:: get_started/lv_example_grad_2
+  :language: c
+
+Play with a radial gradient
+---------------------------
+
+.. lv_example:: get_started/lv_example_grad_3
+  :language: c
+
+Play with a conical gradient
+----------------------------
+
+.. lv_example:: get_started/lv_example_grad_4
+  :language: c

examples/grad/lv_example_grad.h

@@ -0,0 +1,41 @@
+/**
+ * @file lv_example_grad.h
+ *
+ */
+
+#ifndef LV_EXAMPLE_GRAD_H
+#define LV_EXAMPLE_GRAD_H
+
+#ifdef __cplusplus
+extern "C" {
+#endif
+
+/*********************
+ *      INCLUDES
+ *********************/
+
+/*********************
+ *      DEFINES
+ *********************/
+
+/**********************
+ *      TYPEDEFS
+ **********************/
+
+/**********************
+ * GLOBAL PROTOTYPES
+ **********************/
+void lv_example_grad_1(void);
+void lv_example_grad_2(void);
+void lv_example_grad_3(void);
+void lv_example_grad_4(void);
+
+/**********************
+ *      MACROS
+ **********************/
+
+#ifdef __cplusplus
+} /*extern "C"*/
+#endif
+
+#endif /*LV_EXAMPLE_GRAD_H*/

examples/grad/lv_example_grad_1.c

@@ -0,0 +1,109 @@
+#include "../lv_examples.h"
+#if LV_BUILD_EXAMPLES && LV_USE_LABEL
+
+static void position_bullet(lv_event_t * e, lv_point_t * p)
+{
+    lv_indev_t * indev = lv_event_get_param(e);
+    lv_indev_get_point(indev, p);
+
+    lv_obj_t * bullet = lv_event_get_target(e);
+    lv_obj_t * parent = lv_obj_get_parent(bullet);
+
+    p->x -= lv_obj_get_x(parent);
+    p->y -= lv_obj_get_y(parent);
+
+    int32_t w = lv_obj_get_width(parent);
+    int32_t h = lv_obj_get_height(parent);
+    lv_obj_set_pos(bullet, LV_CLAMP(5, p->x, w - 20), LV_CLAMP(5, p->y, h - 20));
+}
+
+static void frac_1_event_cb(lv_event_t * e)
+{
+    lv_style_t * style = lv_event_get_user_data(e);
+    lv_style_value_t v;
+    lv_style_get_prop(style, LV_STYLE_BG_GRAD, &v);
+    lv_grad_dsc_t * dsc = (lv_grad_dsc_t *)v.ptr;
+
+    lv_point_t p;
+    position_bullet(e, &p);
+
+    lv_obj_t * bullet = lv_event_get_target(e);
+    lv_obj_t * parent = lv_obj_get_parent(bullet);
+    dsc->stops[0].frac = LV_CLAMP(0, p.x * 255 / lv_obj_get_width(parent), 255);
+
+    lv_obj_invalidate(parent);
+}
+
+static void frac_2_event_cb(lv_event_t * e)
+{
+    lv_style_t * style = lv_event_get_user_data(e);
+    lv_style_value_t v;
+    lv_style_get_prop(style, LV_STYLE_BG_GRAD, &v);
+    lv_grad_dsc_t * dsc = (lv_grad_dsc_t *)v.ptr;
+
+    lv_point_t p;
+    position_bullet(e, &p);
+
+    lv_obj_t * bullet = lv_event_get_target(e);
+    lv_obj_t * parent = lv_obj_get_parent(bullet);
+
+    dsc->stops[1].frac = LV_CLAMP(0, p.x * 255 / lv_obj_get_width(parent), 255);
+    lv_obj_invalidate(parent);
+}
+
+/**
+ * Play with a simple horizontal gradient.
+ * Adjust the stop positions of the gradient.
+ */
+void lv_example_grad_1(void)
+{
+    static const lv_color_t grad_colors[2] = {
+        LV_COLOR_MAKE(0xff, 0x00, 0x00),
+        LV_COLOR_MAKE(0x00, 0xff, 0x00),
+    };
+
+    static const lv_opa_t grad_opa[2] = {
+        LV_OPA_100,
+        LV_OPA_0,
+    };
+
+    static const uint8_t frac[2] = {
+        20 * 255 / 100, /*20%*/
+        80 * 255 / 100, /*80%*/
+    };
+
+    static lv_style_t style;
+    lv_style_init(&style);
+
+    static lv_grad_dsc_t grad_dsc;
+    lv_grad_init_stops(&grad_dsc, grad_colors, grad_opa, frac, sizeof(grad_colors) / sizeof(lv_color_t));
+    lv_grad_horizontal_init(&grad_dsc);
+
+    /*Set gradient as background*/
+    lv_style_set_bg_grad(&style, &grad_dsc);
+    lv_style_set_border_width(&style, 2);
+    lv_style_set_pad_all(&style, 0);
+    lv_style_set_radius(&style, 12);
+
+    /*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, lv_pct(80), lv_pct(80));
+    lv_obj_center(obj);
+
+    lv_obj_t * frac_1 = lv_button_create(obj);
+    lv_obj_set_size(frac_1, 15, 15);
+    lv_obj_set_style_bg_color(frac_1, lv_color_hex(0xff00ff), 0);
+    lv_obj_add_event_cb(frac_1, frac_1_event_cb, LV_EVENT_PRESSING, &style);
+    lv_obj_set_ext_click_area(frac_1, 5);
+    lv_obj_set_pos(frac_1, lv_pct(20), lv_pct(50));
+
+    lv_obj_t * frac_2 = lv_button_create(obj);
+    lv_obj_set_size(frac_2, 15, 15);
+    lv_obj_set_style_bg_color(frac_2, lv_color_hex(0xffff00), 0);
+    lv_obj_add_event_cb(frac_2, frac_2_event_cb, LV_EVENT_PRESSING, &style);
+    lv_obj_set_ext_click_area(frac_2, 5);
+    lv_obj_set_pos(frac_2, lv_pct(80), lv_pct(50));
+}
+
+#endif

examples/grad/lv_example_grad_2.c

@@ -0,0 +1,122 @@
+#include "../lv_examples.h"
+#if LV_BUILD_EXAMPLES && LV_USE_LABEL
+
+#if LV_USE_DRAW_SW_COMPLEX_GRADIENTS
+static void position_bullet(lv_event_t * e, lv_point_t * p)
+{
+    lv_indev_t * indev = lv_event_get_param(e);
+    lv_indev_get_point(indev, p);
+
+    lv_obj_t * bullet = lv_event_get_target(e);
+    lv_obj_t * parent = lv_obj_get_parent(bullet);
+
+    p->x -= lv_obj_get_x(parent);
+    p->y -= lv_obj_get_y(parent);
+
+    int32_t w = lv_obj_get_width(parent);
+    int32_t h = lv_obj_get_height(parent);
+    lv_obj_set_pos(bullet, LV_CLAMP(5, p->x, w - 20), LV_CLAMP(5, p->y, h - 20));
+}
+
+static void start_event_cb(lv_event_t * e)
+{
+    lv_style_t * style = lv_event_get_user_data(e);
+    lv_style_value_t v;
+    lv_style_get_prop(style, LV_STYLE_BG_GRAD, &v);
+    lv_grad_dsc_t * dsc = (lv_grad_dsc_t *)v.ptr;
+
+    lv_point_t p;
+    position_bullet(e, &p);
+
+    dsc->params.linear.start.x = p.x;
+    dsc->params.linear.start.y = p.y;
+
+    lv_obj_t * bullet = lv_event_get_target(e);
+    lv_obj_t * parent = lv_obj_get_parent(bullet);
+    lv_obj_invalidate(parent);
+}
+
+static void end_event_cb(lv_event_t * e)
+{
+    lv_style_t * style = lv_event_get_user_data(e);
+    lv_style_value_t v;
+    lv_style_get_prop(style, LV_STYLE_BG_GRAD, &v);
+    lv_grad_dsc_t * dsc = (lv_grad_dsc_t *)v.ptr;
+
+    lv_point_t p;
+    position_bullet(e, &p);
+
+    dsc->params.linear.end.x = p.x;
+    dsc->params.linear.end.y = p.y;
+
+    lv_obj_t * bullet = lv_event_get_target(e);
+    lv_obj_t * parent = lv_obj_get_parent(bullet);
+    lv_obj_invalidate(parent);
+}
+
+/**
+ * Play with the linear gradient.
+ * Adjust the 2 point in between the a linear gradient can be drawn (can be skew as well)
+ */
+void lv_example_grad_2(void)
+{
+    static const lv_color_t grad_colors[2] = {
+        LV_COLOR_MAKE(0xff, 0x00, 0x00),
+        LV_COLOR_MAKE(0x00, 0xff, 0x00),
+    };
+
+    static const lv_opa_t grad_opa[2] = {
+        LV_OPA_100,
+        LV_OPA_0,
+    };
+
+
+    static lv_style_t style;
+    lv_style_init(&style);
+
+    /*First define a color gradient. In this example we use a purple to black color map.*/
+    static lv_grad_dsc_t grad;
+
+    lv_grad_init_stops(&grad, grad_colors, grad_opa, NULL, sizeof(grad_colors) / sizeof(lv_color_t));
+
+    lv_grad_linear_init(&grad, 100, 100, 200, 150, LV_GRAD_EXTEND_PAD);
+
+    /*Set gradient as background*/
+    lv_style_set_bg_grad(&style, &grad);
+    lv_style_set_border_width(&style, 2);
+    lv_style_set_pad_all(&style, 0);
+    lv_style_set_radius(&style, 12);
+
+    /*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, lv_pct(80), lv_pct(80));
+    lv_obj_center(obj);
+
+    lv_obj_t * start = lv_button_create(obj);
+    lv_obj_set_size(start, 15, 15);
+    lv_obj_set_style_bg_color(start, lv_color_hex(0x0000ff), 0);
+    lv_obj_add_event_cb(start, start_event_cb, LV_EVENT_PRESSING, &style);
+    lv_obj_set_ext_click_area(start, 5);
+    lv_obj_set_pos(start, 100, 100);
+
+    lv_obj_t * end = lv_button_create(obj);
+    lv_obj_set_size(end, 15, 15);
+    lv_obj_set_style_bg_color(end, lv_color_hex(0x00ffff), 0);
+    lv_obj_add_event_cb(end, end_event_cb, LV_EVENT_PRESSING, &style);
+    lv_obj_set_ext_click_area(end, 5);
+    lv_obj_set_pos(end, 200, 150);
+}
+
+#else
+
+void lv_example_grad_2(void)
+{
+    lv_obj_t * label = lv_label_create(lv_screen_active());
+    lv_label_set_text(label, "LV_USE_DRAW_SW_COMPLEX_GRADIENTS needs to be enabled");
+    lv_obj_center(label);
+}
+
+#endif /*LV_USE_DRAW_SW_COMPLEX_GRADIENTS*/
+
+#endif

examples/grad/lv_example_grad_3.c

@@ -0,0 +1,135 @@
+#include "../lv_examples.h"
+#if LV_BUILD_EXAMPLES && LV_USE_LABEL
+
+#if LV_USE_DRAW_SW_COMPLEX_GRADIENTS
+
+static void position_bullet(lv_event_t * e, lv_point_t * p)
+{
+    lv_indev_t * indev = lv_event_get_param(e);
+    lv_indev_get_point(indev, p);
+
+    lv_obj_t * bullet = lv_event_get_target(e);
+    lv_obj_t * parent = lv_obj_get_parent(bullet);
+
+    p->x -= lv_obj_get_x(parent);
+    p->y -= lv_obj_get_y(parent);
+
+    int32_t w = lv_obj_get_width(parent);
+    int32_t h = lv_obj_get_height(parent);
+    lv_obj_set_pos(bullet, LV_CLAMP(5, p->x, w - 20), LV_CLAMP(5, p->y, h - 20));
+}
+
+static void focal_event_cb(lv_event_t * e)
+{
+    lv_style_t * style = lv_event_get_user_data(e);
+    lv_style_value_t v;
+    lv_style_get_prop(style, LV_STYLE_BG_GRAD, &v);
+    lv_grad_dsc_t * dsc = (lv_grad_dsc_t *)v.ptr;
+
+    lv_point_t p;
+    position_bullet(e, &p);
+
+    dsc->params.radial.focal.x = p.x;
+    dsc->params.radial.focal.y = p.y;
+    dsc->params.radial.focal_extent.x = p.x + 10;
+    dsc->params.radial.focal_extent.y = p.y;
+
+    lv_obj_t * bullet = lv_event_get_target(e);
+    lv_obj_t * parent = lv_obj_get_parent(bullet);
+    lv_obj_invalidate(parent);
+}
+
+static void end_event_cb(lv_event_t * e)
+{
+    lv_style_t * style = lv_event_get_user_data(e);
+    lv_style_value_t v;
+    lv_style_get_prop(style, LV_STYLE_BG_GRAD, &v);
+    lv_grad_dsc_t * dsc = (lv_grad_dsc_t *)v.ptr;
+
+    lv_point_t p;
+    position_bullet(e, &p);
+
+    dsc->params.radial.end.x = p.x;
+    dsc->params.radial.end.y = p.y;
+    dsc->params.radial.end_extent.x = p.x + 100;
+    dsc->params.radial.end_extent.y = p.y;
+    lv_obj_t * bullet = lv_event_get_target(e);
+    lv_obj_t * parent = lv_obj_get_parent(bullet);
+    lv_obj_invalidate(parent);
+}
+
+/**
+ * Play with the radial gradient
+ * Adjust the end circle and focal point position.
+ * The radius of the end circle and an focal point are hardcoded in the example.
+ */
+void lv_example_grad_3(void)
+{
+    static const lv_color_t grad_colors[2] = {
+        LV_COLOR_MAKE(0xff, 0x00, 0x00),
+        LV_COLOR_MAKE(0x00, 0xff, 0x00),
+    };
+
+    static const lv_opa_t grad_opa[2] = {
+        LV_OPA_100,
+        LV_OPA_0,
+    };
+
+    static lv_style_t style;
+    lv_style_init(&style);
+
+    /*First define a color gradient. In this example we use a purple to black color map.*/
+    static lv_grad_dsc_t grad;
+
+    lv_grad_init_stops(&grad, grad_colors, grad_opa, NULL, sizeof(grad_colors) / sizeof(lv_color_t));
+
+    /*Init a radial gradient where the center is at 100;100
+     *and the edge of the circle is at 200;100.
+     *Try LV_GRAD_EXTEND_REFLECT and LV_GRAD_EXTEND_REPEAT too. */
+    lv_grad_radial_init(&grad, 100, 100, 200, 100, LV_GRAD_EXTEND_PAD);
+
+    /*The gradient will be calculated between the focal point's circle and the
+     *edge of the circle. If the center of the focal point and the
+     *center of the main circle is the same, the gradient will spread
+     *evenly in all directions. The focal point should be inside the
+     *main circle.*/
+    lv_grad_radial_set_focal(&grad, 50, 50, 10);
+
+    /*Set the widget containing the gradient*/
+    lv_style_set_bg_grad(&style, &grad);
+    lv_style_set_border_width(&style, 2);
+    lv_style_set_pad_all(&style, 0);
+    lv_style_set_radius(&style, 12);
+
+    /*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, lv_pct(80), lv_pct(80));
+    lv_obj_center(obj);
+
+    lv_obj_t * focal = lv_button_create(obj);
+    lv_obj_set_size(focal, 15, 15);
+    lv_obj_set_style_bg_color(focal, lv_color_hex(0x0000ff), 0);
+    lv_obj_add_event_cb(focal, focal_event_cb, LV_EVENT_PRESSING, &style);
+    lv_obj_set_ext_click_area(focal, 5);
+    lv_obj_set_pos(focal, 50, 50);
+
+    lv_obj_t * end = lv_button_create(obj);
+    lv_obj_set_size(end, 15, 15);
+    lv_obj_set_style_bg_color(end, lv_color_hex(0x00ffff), 0);
+    lv_obj_add_event_cb(end, end_event_cb, LV_EVENT_PRESSING, &style);
+    lv_obj_set_ext_click_area(end, 5);
+    lv_obj_set_pos(end, 100, 100);
+}
+#else
+
+void lv_example_grad_3(void)
+{
+    lv_obj_t * label = lv_label_create(lv_screen_active());
+    lv_label_set_text(label, "LV_USE_DRAW_SW_COMPLEX_GRADIENTS needs to be enabled");
+    lv_obj_center(label);
+}
+
+#endif /*LV_USE_DRAW_SW_COMPLEX_GRADIENTS*/
+
+#endif

examples/grad/lv_example_grad_4.c

@@ -0,0 +1,123 @@
+#include "../lv_examples.h"
+#if LV_BUILD_EXAMPLES && LV_USE_LABEL
+
+#if LV_USE_DRAW_SW_COMPLEX_GRADIENTS
+
+static void position_bullet(lv_event_t * e, lv_point_t * p)
+{
+    lv_indev_t * indev = lv_event_get_param(e);
+    lv_indev_get_point(indev, p);
+
+    lv_obj_t * bullet = lv_event_get_target(e);
+    lv_obj_t * parent = lv_obj_get_parent(bullet);
+
+    p->x -= lv_obj_get_x(parent);
+    p->y -= lv_obj_get_y(parent);
+
+    int32_t w = lv_obj_get_width(parent);
+    int32_t h = lv_obj_get_height(parent);
+    lv_obj_set_pos(bullet, LV_CLAMP(5, p->x, w - 20), LV_CLAMP(5, p->y, h - 20));
+}
+
+static void start_event_cb(lv_event_t * e)
+{
+    lv_style_t * style = lv_event_get_user_data(e);
+    lv_style_value_t v;
+    lv_style_get_prop(style, LV_STYLE_BG_GRAD, &v);
+    lv_grad_dsc_t * dsc = (lv_grad_dsc_t *)v.ptr;
+
+    lv_point_t p;
+    position_bullet(e, &p);
+
+    lv_obj_t * bullet = lv_event_get_target(e);
+    lv_obj_t * parent = lv_obj_get_parent(bullet);
+    p.x -= lv_obj_get_width(parent) / 2;
+    p.y -= lv_obj_get_height(parent) / 2;
+
+    dsc->params.conical.start_angle = lv_atan2(p.y, p.x);
+    lv_obj_invalidate(parent);
+}
+
+static void end_event_cb(lv_event_t * e)
+{
+    lv_style_t * style = lv_event_get_user_data(e);
+    lv_style_value_t v;
+    lv_style_get_prop(style, LV_STYLE_BG_GRAD, &v);
+    lv_grad_dsc_t * dsc = (lv_grad_dsc_t *)v.ptr;
+
+    lv_point_t p;
+    position_bullet(e, &p);
+
+    lv_obj_t * bullet = lv_event_get_target(e);
+    lv_obj_t * parent = lv_obj_get_parent(bullet);
+    p.x -= lv_obj_get_width(parent) / 2;
+    p.y -= lv_obj_get_height(parent) / 2;
+
+    dsc->params.conical.end_angle = lv_atan2(p.y, p.x);
+    lv_obj_invalidate(parent);
+}
+
+/**
+ * Play with the conical gradient
+ */
+void lv_example_grad_4(void)
+{
+    static const lv_color_t grad_colors[2] = {
+        LV_COLOR_MAKE(0xff, 0x00, 0x00),
+        LV_COLOR_MAKE(0x00, 0xff, 0x00),
+    };
+
+    static const lv_opa_t grad_opa[2] = {
+        LV_OPA_100,
+        LV_OPA_0,
+    };
+
+    static lv_style_t style;
+    lv_style_init(&style);
+
+    /*First define a color gradient. In this example we use a purple to black color map.*/
+    static lv_grad_dsc_t grad;
+
+    lv_grad_init_stops(&grad, grad_colors, grad_opa, NULL, sizeof(grad_colors) / sizeof(lv_color_t));
+
+    lv_grad_conical_init(&grad, lv_pct(50), lv_pct(50), 0, 180, LV_GRAD_EXTEND_PAD);
+
+    /*Set gradient as background*/
+    lv_style_set_bg_grad(&style, &grad);
+    lv_style_set_border_width(&style, 2);
+    lv_style_set_pad_all(&style, 0);
+    lv_style_set_radius(&style, 12);
+
+    /*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, lv_pct(80), lv_pct(80));
+    lv_obj_center(obj);
+
+    lv_obj_t * start = lv_button_create(obj);
+    lv_obj_set_size(start, 15, 15);
+    lv_obj_set_style_bg_color(start, lv_color_hex(0x0000ff), 0);
+    lv_obj_add_event_cb(start, start_event_cb, LV_EVENT_PRESSING, &style);
+    lv_obj_set_ext_click_area(start, 5);
+    lv_obj_set_pos(start, lv_pct(80), lv_pct(50));
+
+    lv_obj_t * end = lv_button_create(obj);
+    lv_obj_set_size(end, 15, 15);
+    lv_obj_set_style_bg_color(end, lv_color_hex(0x00ffff), 0);
+    lv_obj_add_event_cb(end, end_event_cb, LV_EVENT_PRESSING, &style);
+    lv_obj_set_ext_click_area(end, 5);
+    lv_obj_set_pos(end, lv_pct(20), lv_pct(50));
+}
+
+#else
+
+void lv_example_grad_4(void)
+{
+    lv_obj_t * label = lv_label_create(lv_screen_active());
+    lv_label_set_text(label, "LV_USE_DRAW_SW_COMPLEX_GRADIENTS needs to be enabled");
+    lv_obj_center(label);
+}
+
+#endif /*LV_USE_DRAW_SW_COMPLEX_GRADIENTS*/
+
+#endif

examples/lv_examples.h

@@ -25,6 +25,7 @@ extern "C" {
 #include "scroll/lv_example_scroll.h"
 #include "styles/lv_example_style.h"
 #include "widgets/lv_example_widgets.h"
+#include "grad/lv_example_grad.h"
 
 /*********************
  *      DEFINES

examples/styles/lv_example_style_16.c

@@ -47,7 +47,7 @@ void lv_example_style_16(void)
     /*First define a color gradient. In this example we use a gray color map with random values.*/
     static lv_grad_dsc_t grad;
 
-    lv_gradient_init_stops(&grad, grad_colors, NULL, NULL, sizeof(grad_colors) / sizeof(lv_color_t));
+    lv_grad_init_stops(&grad, grad_colors, NULL, NULL, sizeof(grad_colors) / sizeof(lv_color_t));
 
     /*Make a conical gradient with the center in the middle of the object*/
 #if LV_GRADIENT_MAX_STOPS >= 8

examples/styles/lv_example_style_17.c

@@ -22,7 +22,7 @@ void lv_example_style_17(void)
     /*First define a color gradient. In this example we use a purple to black color map.*/
     static lv_grad_dsc_t grad;
 
-    lv_gradient_init_stops(&grad, grad_colors, NULL, NULL, sizeof(grad_colors) / sizeof(lv_color_t));
+    lv_grad_init_stops(&grad, grad_colors, NULL, NULL, sizeof(grad_colors) / sizeof(lv_color_t));
 
     /*Make a radial gradient with the center in the middle of the object, extending to the farthest corner*/
     lv_grad_radial_init(&grad, LV_GRAD_CENTER, LV_GRAD_CENTER, LV_GRAD_RIGHT, LV_GRAD_BOTTOM, LV_GRAD_EXTEND_PAD);

examples/styles/lv_example_style_18.c

@@ -18,7 +18,7 @@ void lv_example_style_18(void)
     static lv_grad_dsc_t linear_gradient_dsc;     /*NOTE: the gradient descriptor must be static or global variable!*/
 
     lv_style_init(&style_with_linear_gradient_bg);
-    lv_gradient_init_stops(&linear_gradient_dsc, grad_colors, NULL, NULL, sizeof(grad_colors) / sizeof(lv_color_t));
+    lv_grad_init_stops(&linear_gradient_dsc, grad_colors, NULL, NULL, sizeof(grad_colors) / sizeof(lv_color_t));
     lv_grad_linear_init(&linear_gradient_dsc, lv_pct(0), lv_pct(0), lv_pct(20), lv_pct(100), LV_GRAD_EXTEND_REFLECT);
     lv_style_set_bg_grad(&style_with_linear_gradient_bg, &linear_gradient_dsc);
     lv_style_set_bg_opa(&style_with_linear_gradient_bg, LV_OPA_COVER);
@@ -28,7 +28,7 @@ void lv_example_style_18(void)
     static lv_grad_dsc_t radial_gradient_dsc;     /*NOTE: the gradient descriptor must be static or global variable!*/
 
     lv_style_init(&style_with_radial_gradient_bg);
-    lv_gradient_init_stops(&radial_gradient_dsc, grad_colors, NULL, NULL, sizeof(grad_colors) / sizeof(lv_color_t));
+    lv_grad_init_stops(&radial_gradient_dsc, grad_colors, NULL, NULL, sizeof(grad_colors) / sizeof(lv_color_t));
     lv_grad_radial_init(&radial_gradient_dsc, lv_pct(30), lv_pct(30), lv_pct(100), lv_pct(100), LV_GRAD_EXTEND_REFLECT);
     lv_style_set_bg_grad(&style_with_radial_gradient_bg, &radial_gradient_dsc);
     lv_style_set_bg_opa(&style_with_radial_gradient_bg, LV_OPA_COVER);