add some code

managed_components/lvgl__lvgl/examples/widgets/canvas/index.rst

@@ -0,0 +1,70 @@
+Drawing on the Canvas and rotate
+--------------------------------
+
+.. lv_example:: widgets/canvas/lv_example_canvas_1
+  :language: c
+
+Transparent Canvas with chroma keying
+-------------------------------------
+
+.. lv_example:: widgets/canvas/lv_example_canvas_2
+  :language: c
+
+
+Draw a rectangle to the canvas
+------------------------------
+
+.. lv_example:: widgets/canvas/lv_example_canvas_3
+  :language: c
+
+
+Draw a label to the canvas
+--------------------------
+
+.. lv_example:: widgets/canvas/lv_example_canvas_4
+  :language: c
+
+
+Draw an arc to the canvas
+-------------------------
+
+.. lv_example:: widgets/canvas/lv_example_canvas_5
+  :language: c
+
+
+Draw an image to the canvas
+---------------------------
+
+.. lv_example:: widgets/canvas/lv_example_canvas_6
+  :language: c
+
+
+Draw a line to the canvas
+-------------------------
+
+.. lv_example:: widgets/canvas/lv_example_canvas_7
+  :language: c
+
+Draw a vector graphic to the canvas
+-----------------------------------
+
+.. lv_example:: widgets/canvas/lv_example_canvas_8
+  :language: c
+
+Draw a triangle to the canvas
+-----------------------------
+
+.. lv_example:: widgets/canvas/lv_example_canvas_9
+  :language: c
+
+Draw Fancy Letter Effects
+-------------------------
+
+.. lv_example:: widgets/canvas/lv_example_canvas_10
+  :language: c
+
+
+Draw Fancy Letter Effects 2
+---------------------------
+.. lv_example:: widgets/canvas/lv_example_canvas_11
+  :language: c

managed_components/lvgl__lvgl/examples/widgets/canvas/lv_example_canvas_1.c

@@ -0,0 +1,78 @@
+#include "../../lv_examples.h"
+#if LV_USE_CANVAS && LV_BUILD_EXAMPLES
+
+#define CANVAS_WIDTH  200
+#define CANVAS_HEIGHT  150
+
+void lv_example_canvas_1(void)
+{
+    lv_draw_rect_dsc_t rect_dsc;
+    lv_draw_rect_dsc_init(&rect_dsc);
+    rect_dsc.radius = 10;
+    rect_dsc.bg_opa = LV_OPA_COVER;
+    rect_dsc.bg_grad.dir = LV_GRAD_DIR_VER;
+    rect_dsc.bg_grad.stops[0].color = lv_palette_main(LV_PALETTE_RED);
+    rect_dsc.bg_grad.stops[0].opa = LV_OPA_100;
+    rect_dsc.bg_grad.stops[1].color = lv_palette_main(LV_PALETTE_BLUE);
+    rect_dsc.bg_grad.stops[1].opa = LV_OPA_50;
+    rect_dsc.border_width = 2;
+    rect_dsc.border_opa = LV_OPA_90;
+    rect_dsc.border_color = lv_color_white();
+    rect_dsc.shadow_width = 5;
+    rect_dsc.shadow_offset_x = 5;
+    rect_dsc.shadow_offset_y = 5;
+
+    lv_draw_label_dsc_t label_dsc;
+    lv_draw_label_dsc_init(&label_dsc);
+    label_dsc.color = lv_palette_main(LV_PALETTE_ORANGE);
+    label_dsc.text = "Some text on text canvas";
+    /*Create a buffer for the canvas*/
+    LV_DRAW_BUF_DEFINE_STATIC(draw_buf_16bpp, CANVAS_WIDTH, CANVAS_HEIGHT, LV_COLOR_FORMAT_RGB565);
+    LV_DRAW_BUF_INIT_STATIC(draw_buf_16bpp);
+
+    lv_obj_t * canvas = lv_canvas_create(lv_screen_active());
+    lv_canvas_set_draw_buf(canvas, &draw_buf_16bpp);
+    lv_obj_center(canvas);
+    lv_canvas_fill_bg(canvas, lv_palette_lighten(LV_PALETTE_GREY, 3), LV_OPA_COVER);
+
+    lv_layer_t layer;
+    lv_canvas_init_layer(canvas, &layer);
+
+    lv_area_t coords_rect = {30, 20, 100, 70};
+    lv_draw_rect(&layer, &rect_dsc, &coords_rect);
+
+    lv_area_t coords_text = {40, 80, 100, 120};
+    lv_draw_label(&layer, &label_dsc, &coords_text);
+
+    lv_canvas_finish_layer(canvas, &layer);
+
+    /*Test the rotation. It requires another buffer where the original image is stored.
+     *So use previous canvas as image and rotate it to the new canvas*/
+    LV_DRAW_BUF_DEFINE_STATIC(draw_buf_32bpp, CANVAS_WIDTH, CANVAS_HEIGHT, LV_COLOR_FORMAT_ARGB8888);
+    LV_DRAW_BUF_INIT_STATIC(draw_buf_32bpp);
+
+    /*Create a canvas and initialize its palette*/
+    canvas = lv_canvas_create(lv_screen_active());
+    lv_canvas_set_draw_buf(canvas, &draw_buf_32bpp);
+    lv_canvas_fill_bg(canvas, lv_color_hex3(0xccc), LV_OPA_COVER);
+    lv_obj_center(canvas);
+
+    lv_canvas_fill_bg(canvas, lv_palette_lighten(LV_PALETTE_GREY, 1), LV_OPA_COVER);
+
+    lv_canvas_init_layer(canvas, &layer);
+    lv_image_dsc_t img;
+    lv_draw_buf_to_image(&draw_buf_16bpp, &img);
+    lv_draw_image_dsc_t img_dsc;
+    lv_draw_image_dsc_init(&img_dsc);
+    img_dsc.rotation = 120;
+    img_dsc.src = &img;
+    img_dsc.pivot.x = CANVAS_WIDTH / 2;
+    img_dsc.pivot.y = CANVAS_HEIGHT / 2;
+
+    lv_area_t coords_img = {0, 0, CANVAS_WIDTH - 1, CANVAS_HEIGHT - 1};
+    lv_draw_image(&layer, &img_dsc, &coords_img);
+
+    lv_canvas_finish_layer(canvas, &layer);
+}
+
+#endif

managed_components/lvgl__lvgl/examples/widgets/canvas/lv_example_canvas_10.c

@@ -0,0 +1,67 @@
+#include "../../lv_examples.h"
+#if LV_USE_CANVAS && LV_BUILD_EXAMPLES
+
+#define CANVAS_WIDTH  300
+#define CANVAS_HEIGHT  200
+
+static void timer_cb(lv_timer_t * timer)
+{
+    static int16_t counter = 0;
+    const char * string = "lol~ I'm wavvvvvvving~>>>";
+    const int16_t string_len = lv_strlen(string);
+
+    lv_obj_t * canvas = (lv_obj_t *)lv_timer_get_user_data(timer);
+    lv_layer_t layer;
+    lv_canvas_init_layer(canvas, &layer);
+
+    lv_canvas_fill_bg(canvas, lv_color_white(), LV_OPA_COVER);
+
+    lv_draw_letter_dsc_t letter_dsc;
+    lv_draw_letter_dsc_init(&letter_dsc);
+    letter_dsc.color = lv_color_hex(0xff0000);
+    letter_dsc.font = lv_font_get_default();
+
+    {
+#define CURVE2_X(t) (t * 2 + 10)
+#define CURVE2_Y(t) (lv_trigo_sin((t) * 5) * 40 / 32767 + CANVAS_HEIGHT / 2)
+
+        int32_t pre_x = CURVE2_X(-1);
+        int32_t pre_y = CURVE2_Y(-1);
+        for(int16_t i = 0; i < string_len; i++) {
+            const int16_t angle = (int16_t)(i * 5);
+            const int32_t x = CURVE2_X(angle);
+            const int32_t y = CURVE2_Y(angle + counter / 2);
+            const lv_point_t point = { .x = x, .y = y };
+
+            letter_dsc.unicode = (uint32_t)string[i % string_len];
+            letter_dsc.rotation = lv_atan2(y - pre_y, x - pre_x) * 10;
+            letter_dsc.color = lv_color_hsv_to_rgb(i * 10, 100, 100);
+            lv_draw_letter(&layer, &letter_dsc, &point);
+
+            pre_x = x;
+            pre_y = y;
+        }
+    }
+
+    lv_canvas_finish_layer(canvas, &layer);
+
+    counter++;
+}
+
+void lv_example_canvas_10(void)
+{
+    /*Create a buffer for the canvas*/
+    LV_DRAW_BUF_DEFINE_STATIC(draw_buf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_COLOR_FORMAT_ARGB8888);
+    LV_DRAW_BUF_INIT_STATIC(draw_buf);
+
+    lv_obj_t * canvas = lv_canvas_create(lv_screen_active());
+    lv_obj_set_size(canvas, CANVAS_WIDTH, CANVAS_HEIGHT);
+
+    lv_obj_center(canvas);
+
+    lv_canvas_set_draw_buf(canvas, &draw_buf);
+
+    lv_timer_create(timer_cb, 16, canvas);
+}
+
+#endif

managed_components/lvgl__lvgl/examples/widgets/canvas/lv_example_canvas_11.c

@@ -0,0 +1,69 @@
+#include "../../lv_examples.h"
+#if LV_USE_CANVAS && LV_BUILD_EXAMPLES
+
+#define CANVAS_WIDTH  300
+#define CANVAS_HEIGHT  200
+
+static void timer_cb(lv_timer_t * timer)
+{
+    static int32_t counter = 0;
+    const char * string = "windstorrrrrrrrrrrrrrrrm~>>>";
+    const int16_t string_len = lv_strlen(string);
+
+    lv_obj_t * canvas = (lv_obj_t *) lv_timer_get_user_data(timer);
+    lv_layer_t layer;
+    lv_canvas_init_layer(canvas, &layer);
+
+    lv_canvas_fill_bg(canvas, lv_color_white(), LV_OPA_COVER);
+
+    lv_draw_letter_dsc_t letter_dsc;
+    lv_draw_letter_dsc_init(&letter_dsc);
+    letter_dsc.color = lv_color_hex(0xff0000);
+    letter_dsc.font = lv_font_get_default();
+
+    {
+#define CURVE2_X(t) ((t) * 2 + lv_trigo_cos((t) * 5) * 40 / 32767 - 10)
+#define CURVE2_Y(t, T) ((t) * lv_trigo_sin(((t) + (T)) * 5) * 40 / 32767 / 80 + CANVAS_HEIGHT / 2)
+
+        int32_t pre_x = CURVE2_X(-1);
+        int32_t pre_y = CURVE2_Y(-1, 0);
+        for(int16_t i = 0; i < string_len; i++) {
+            const int32_t angle = i * 5;
+            const int32_t x = CURVE2_X(angle);
+            const int32_t y = CURVE2_Y(angle + 30, counter / 2);
+
+            letter_dsc.unicode = (uint32_t)string[i % string_len];
+            letter_dsc.rotation = lv_atan2(y - pre_y, x - pre_x) * 10;
+            letter_dsc.color = lv_color_hsv_to_rgb(i * 10, 100, 100);
+            lv_point_t p = (lv_point_t) {
+                .x = x, .y = y
+            };
+            lv_draw_letter(&layer, &letter_dsc, &p);
+
+            pre_x = x;
+            pre_y = y;
+        }
+    }
+
+    lv_canvas_finish_layer(canvas, &layer);
+
+    counter++;
+}
+
+void lv_example_canvas_11(void)
+{
+    /*Create a buffer for the canvas*/
+    LV_DRAW_BUF_DEFINE_STATIC(draw_buf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_COLOR_FORMAT_ARGB8888);
+    LV_DRAW_BUF_INIT_STATIC(draw_buf);
+
+    lv_obj_t * canvas = lv_canvas_create(lv_screen_active());
+    lv_obj_set_size(canvas, CANVAS_WIDTH, CANVAS_HEIGHT);
+
+    lv_obj_center(canvas);
+
+    lv_canvas_set_draw_buf(canvas, &draw_buf);
+
+    lv_timer_create(timer_cb, 16, canvas);
+}
+
+#endif

managed_components/lvgl__lvgl/examples/widgets/canvas/lv_example_canvas_2.c

@@ -0,0 +1,47 @@
+#include "../../lv_examples.h"
+#if LV_USE_CANVAS && LV_BUILD_EXAMPLES
+
+#define CANVAS_WIDTH  80
+#define CANVAS_HEIGHT  40
+
+/**
+ * Create a transparent canvas with transparency
+ */
+void lv_example_canvas_2(void)
+{
+    lv_obj_set_style_bg_color(lv_screen_active(), lv_palette_lighten(LV_PALETTE_RED, 5), 0);
+
+    /*Create a buffer for the canvas*/
+    LV_DRAW_BUF_DEFINE_STATIC(draw_buf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_COLOR_FORMAT_ARGB8888);
+    LV_DRAW_BUF_INIT_STATIC(draw_buf);
+
+    /*Create a canvas and initialize its palette*/
+    lv_obj_t * canvas = lv_canvas_create(lv_screen_active());
+    lv_canvas_set_draw_buf(canvas, &draw_buf);
+    lv_obj_center(canvas);
+
+    /*Red background (There is no dedicated alpha channel in indexed images so LV_OPA_COVER is ignored)*/
+    lv_canvas_fill_bg(canvas, lv_palette_main(LV_PALETTE_BLUE), LV_OPA_COVER);
+
+    /*Create hole on the canvas*/
+    int32_t x;
+    int32_t y;
+    for(y = 10; y < 20; y++) {
+        for(x = 5; x < 75; x++) {
+            lv_canvas_set_px(canvas, x, y, lv_palette_main(LV_PALETTE_BLUE), LV_OPA_50);
+        }
+    }
+
+    for(y = 20; y < 30; y++) {
+        for(x = 5; x < 75; x++) {
+            lv_canvas_set_px(canvas, x, y, lv_palette_main(LV_PALETTE_BLUE), LV_OPA_20);
+        }
+    }
+
+    for(y = 30; y < 40; y++) {
+        for(x = 5; x < 75; x++) {
+            lv_canvas_set_px(canvas, x, y, lv_palette_main(LV_PALETTE_BLUE), LV_OPA_0);
+        }
+    }
+}
+#endif

managed_components/lvgl__lvgl/examples/widgets/canvas/lv_example_canvas_3.c

@@ -0,0 +1,44 @@
+#include "../../lv_examples.h"
+#if LV_USE_CANVAS && LV_BUILD_EXAMPLES
+
+#define CANVAS_WIDTH  50
+#define CANVAS_HEIGHT  50
+
+/**
+ * Draw a rectangle to the canvas
+ */
+void lv_example_canvas_3(void)
+{
+    /*Create a buffer for the canvas*/
+    LV_DRAW_BUF_DEFINE_STATIC(draw_buf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_COLOR_FORMAT_ARGB8888);
+    LV_DRAW_BUF_INIT_STATIC(draw_buf);
+
+    /*Create a canvas and initialize its palette*/
+    lv_obj_t * canvas = lv_canvas_create(lv_screen_active());
+    lv_canvas_set_draw_buf(canvas, &draw_buf);
+
+    lv_canvas_fill_bg(canvas, lv_color_hex3(0xccc), LV_OPA_COVER);
+    lv_obj_center(canvas);
+
+    lv_layer_t layer;
+    lv_canvas_init_layer(canvas, &layer);
+
+    lv_draw_rect_dsc_t dsc;
+    lv_draw_rect_dsc_init(&dsc);
+    dsc.bg_color = lv_palette_main(LV_PALETTE_RED);
+    dsc.border_color = lv_palette_main(LV_PALETTE_BLUE);
+    dsc.border_width = 3;
+    dsc.outline_color = lv_palette_main(LV_PALETTE_GREEN);
+    dsc.outline_width = 2;
+    dsc.outline_pad = 2;
+    dsc.outline_opa = LV_OPA_50;
+    dsc.radius = 5;
+    dsc.border_width = 3;
+
+    lv_area_t coords = {10, 10, 40, 30};
+
+    lv_draw_rect(&layer, &dsc, &coords);
+
+    lv_canvas_finish_layer(canvas, &layer);
+}
+#endif

managed_components/lvgl__lvgl/examples/widgets/canvas/lv_example_canvas_4.c

@@ -0,0 +1,39 @@
+#include "../../lv_examples.h"
+#if LV_USE_CANVAS && LV_FONT_MONTSERRAT_18 && LV_BUILD_EXAMPLES
+
+#define CANVAS_WIDTH  50
+#define CANVAS_HEIGHT  50
+
+/**
+ * Draw a text to the canvas
+ */
+void lv_example_canvas_4(void)
+{
+    /*Create a buffer for the canvas*/
+    LV_DRAW_BUF_DEFINE_STATIC(draw_buf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_COLOR_FORMAT_ARGB8888);
+    LV_DRAW_BUF_INIT_STATIC(draw_buf);
+
+    /*Create a canvas and initialize its palette*/
+    lv_obj_t * canvas = lv_canvas_create(lv_screen_active());
+    lv_canvas_set_draw_buf(canvas, &draw_buf);
+    lv_canvas_fill_bg(canvas, lv_color_hex3(0xccc), LV_OPA_COVER);
+    lv_obj_center(canvas);
+
+    lv_layer_t layer;
+    lv_canvas_init_layer(canvas, &layer);
+
+    lv_draw_label_dsc_t dsc;
+    lv_draw_label_dsc_init(&dsc);
+    dsc.color = lv_palette_main(LV_PALETTE_RED);
+    dsc.font = &lv_font_montserrat_18;
+    dsc.decor = LV_TEXT_DECOR_UNDERLINE;
+    dsc.text = "Hello";
+
+    lv_area_t coords = {10, 10, 30, 60};
+
+    lv_draw_label(&layer, &dsc, &coords);
+
+    lv_canvas_finish_layer(canvas, &layer);
+
+}
+#endif

managed_components/lvgl__lvgl/examples/widgets/canvas/lv_example_canvas_5.c

@@ -0,0 +1,41 @@
+#include "../../lv_examples.h"
+#if LV_USE_CANVAS && LV_BUILD_EXAMPLES
+
+#define CANVAS_WIDTH  50
+#define CANVAS_HEIGHT  50
+
+/**
+ * Draw an arc to the canvas
+ */
+void lv_example_canvas_5(void)
+{
+    /*Create a buffer for the canvas*/
+    LV_DRAW_BUF_DEFINE_STATIC(draw_buf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_COLOR_FORMAT_ARGB8888);
+    LV_DRAW_BUF_INIT_STATIC(draw_buf);
+
+    /*Create a canvas and initialize its palette*/
+    lv_obj_t * canvas = lv_canvas_create(lv_screen_active());
+    lv_canvas_set_draw_buf(canvas, &draw_buf);
+    lv_canvas_fill_bg(canvas, lv_color_hex3(0xccc), LV_OPA_COVER);
+    lv_obj_center(canvas);
+
+    lv_layer_t layer;
+    lv_canvas_init_layer(canvas, &layer);
+
+    lv_draw_arc_dsc_t dsc;
+    lv_draw_arc_dsc_init(&dsc);
+    dsc.color = lv_palette_main(LV_PALETTE_RED);
+    dsc.width = 5;
+    dsc.center.x = 25;
+    dsc.center.y = 25;
+    dsc.width = 10;
+    dsc.radius = 15;
+    dsc.start_angle = 0;
+    dsc.end_angle = 220;
+
+    lv_draw_arc(&layer, &dsc);
+
+    lv_canvas_finish_layer(canvas, &layer);
+
+}
+#endif

managed_components/lvgl__lvgl/examples/widgets/canvas/lv_example_canvas_6.c

@@ -0,0 +1,35 @@
+#include "../../lv_examples.h"
+#if LV_USE_CANVAS && LV_BUILD_EXAMPLES
+
+#define CANVAS_WIDTH  50
+#define CANVAS_HEIGHT  50
+
+/**
+ * Draw an image to the canvas
+ */
+void lv_example_canvas_6(void)
+{
+    /*Create a buffer for the canvas*/
+    static uint8_t cbuf[LV_CANVAS_BUF_SIZE(CANVAS_WIDTH, CANVAS_HEIGHT, 32, LV_DRAW_BUF_STRIDE_ALIGN)];
+
+    /*Create a canvas and initialize its palette*/
+    lv_obj_t * canvas = lv_canvas_create(lv_screen_active());
+    lv_canvas_set_buffer(canvas, cbuf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_COLOR_FORMAT_ARGB8888);
+    lv_canvas_fill_bg(canvas, lv_color_hex3(0xccc), LV_OPA_COVER);
+    lv_obj_center(canvas);
+
+    lv_layer_t layer;
+    lv_canvas_init_layer(canvas, &layer);
+
+    LV_IMAGE_DECLARE(img_star);
+    lv_draw_image_dsc_t dsc;
+    lv_draw_image_dsc_init(&dsc);
+    dsc.src = &img_star;
+
+    lv_area_t coords = {10, 10, 10 + img_star.header.w - 1, 10 + img_star.header.h - 1};
+
+    lv_draw_image(&layer, &dsc, &coords);
+
+    lv_canvas_finish_layer(canvas, &layer);
+}
+#endif

managed_components/lvgl__lvgl/examples/widgets/canvas/lv_example_canvas_7.c

@@ -0,0 +1,40 @@
+#include "../../lv_examples.h"
+#if LV_USE_CANVAS&& LV_BUILD_EXAMPLES
+
+#define CANVAS_WIDTH  50
+#define CANVAS_HEIGHT  50
+
+/**
+ * Draw a line to the canvas
+ */
+void lv_example_canvas_7(void)
+{
+    /*Create a buffer for the canvas*/
+    LV_DRAW_BUF_DEFINE_STATIC(draw_buf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_COLOR_FORMAT_ARGB8888);
+    LV_DRAW_BUF_INIT_STATIC(draw_buf);
+
+    /*Create a canvas and initialize its palette*/
+    lv_obj_t * canvas = lv_canvas_create(lv_screen_active());
+    lv_canvas_set_draw_buf(canvas, &draw_buf);
+    lv_canvas_fill_bg(canvas, lv_color_hex3(0xccc), LV_OPA_COVER);
+    lv_obj_center(canvas);
+
+    lv_layer_t layer;
+    lv_canvas_init_layer(canvas, &layer);
+
+    lv_draw_line_dsc_t dsc;
+    lv_draw_line_dsc_init(&dsc);
+    dsc.color = lv_palette_main(LV_PALETTE_RED);
+    dsc.width = 4;
+    dsc.round_end = 1;
+    dsc.round_start = 1;
+    dsc.p1.x = 15;
+    dsc.p1.y = 15;
+    dsc.p2.x = 35;
+    dsc.p2.y = 10;
+    lv_draw_line(&layer, &dsc);
+
+    lv_canvas_finish_layer(canvas, &layer);
+
+}
+#endif

managed_components/lvgl__lvgl/examples/widgets/canvas/lv_example_canvas_8.c

@@ -0,0 +1,57 @@
+#include "../../lv_examples.h"
+#if LV_USE_CANVAS && LV_BUILD_EXAMPLES
+
+#if LV_USE_VECTOR_GRAPHIC
+
+#define CANVAS_WIDTH  150
+#define CANVAS_HEIGHT 150
+
+/**
+ * Draw a path to the canvas
+ */
+void lv_example_canvas_8(void)
+{
+    /*Create a buffer for the canvas*/
+    LV_DRAW_BUF_DEFINE_STATIC(draw_buf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_COLOR_FORMAT_ARGB8888);
+    LV_DRAW_BUF_INIT_STATIC(draw_buf);
+
+    /*Create a canvas and initialize its palette*/
+    lv_obj_t * canvas = lv_canvas_create(lv_screen_active());
+    lv_canvas_set_draw_buf(canvas, &draw_buf);
+    lv_canvas_fill_bg(canvas, lv_color_hex3(0xccc), LV_OPA_COVER);
+    lv_obj_center(canvas);
+
+    lv_layer_t layer;
+    lv_canvas_init_layer(canvas, &layer);
+
+    lv_vector_dsc_t * dsc = lv_vector_dsc_create(&layer);
+    lv_vector_path_t * path = lv_vector_path_create(LV_VECTOR_PATH_QUALITY_MEDIUM);
+
+    lv_fpoint_t pts[] = {{10, 10}, {130, 130}, {10, 130}};
+    lv_vector_path_move_to(path, &pts[0]);
+    lv_vector_path_line_to(path, &pts[1]);
+    lv_vector_path_line_to(path, &pts[2]);
+    lv_vector_path_close(path);
+
+    lv_vector_dsc_set_fill_color(dsc, lv_color_make(0x00, 0x80, 0xff));
+    lv_vector_dsc_add_path(dsc, path);
+
+    lv_draw_vector(dsc);
+    lv_vector_path_delete(path);
+    lv_vector_dsc_delete(dsc);
+
+    lv_canvas_finish_layer(canvas, &layer);
+}
+#else
+
+void lv_example_canvas_8(void)
+{
+    /*fallback for online examples*/
+    lv_obj_t * label = lv_label_create(lv_screen_active());
+    lv_label_set_text(label, "Vector graphics is not enabled");
+    lv_obj_center(label);
+}
+
+#endif /*LV_USE_VECTOR_GRAPHIC*/
+
+#endif

managed_components/lvgl__lvgl/examples/widgets/canvas/lv_example_canvas_9.c

@@ -0,0 +1,51 @@
+#include "../../lv_examples.h"
+#if LV_USE_CANVAS && LV_BUILD_EXAMPLES
+
+
+#define CANVAS_WIDTH  150
+#define CANVAS_HEIGHT 150
+
+/**
+ * Draw a triangle to the canvas
+ */
+void lv_example_canvas_9(void)
+{
+    /*Create a buffer for the canvas*/
+    LV_DRAW_BUF_DEFINE_STATIC(draw_buf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_COLOR_FORMAT_ARGB8888);
+    LV_DRAW_BUF_INIT_STATIC(draw_buf);
+
+    /*Create a canvas and initialize its palette*/
+    lv_obj_t * canvas = lv_canvas_create(lv_screen_active());
+    lv_canvas_set_draw_buf(canvas, &draw_buf);
+    lv_canvas_fill_bg(canvas, lv_color_hex3(0xccc), LV_OPA_COVER);
+    lv_obj_center(canvas);
+
+    lv_layer_t layer;
+    lv_canvas_init_layer(canvas, &layer);
+
+    lv_draw_triangle_dsc_t tri_dsc;
+    lv_draw_triangle_dsc_init(&tri_dsc);
+    tri_dsc.p[0].x = 10;
+    tri_dsc.p[0].y = 10;
+    tri_dsc.p[1].x = 100;
+    tri_dsc.p[1].y = 30;
+    tri_dsc.p[2].x = 50;
+    tri_dsc.p[2].y = 100;
+
+    tri_dsc.grad.stops_count = 2;
+    tri_dsc.grad.dir = LV_GRAD_DIR_VER;
+    tri_dsc.grad.stops[0].color = lv_color_hex(0xff0000);
+    tri_dsc.grad.stops[0].frac = 64;    /*Start at 25%*/
+    tri_dsc.grad.stops[0].opa = LV_OPA_COVER;
+    tri_dsc.grad.stops[1].color = lv_color_hex(0x0000ff);
+    tri_dsc.grad.stops[1].opa = LV_OPA_TRANSP;
+    tri_dsc.grad.stops[1].frac = 3 * 64;    /*End at 75%*/
+
+    tri_dsc.opa = 128;  /*Set the overall opacity to 50%*/
+
+    lv_draw_triangle(&layer, &tri_dsc);
+
+    lv_canvas_finish_layer(canvas, &layer);
+}
+
+#endif