init lvgl code

LVGL.Simulator/lvgl/examples/widgets/animimg/index.rst

@@ -0,0 +1,7 @@
+
+Simple Animation Image
+""""""""""""""""
+
+.. lv_example:: widgets/animimg/lv_example_animimg_1
+  :language: c
+  :description: A simple example to demonstrate the use of an animation image.

LVGL.Simulator/lvgl/examples/widgets/animimg/lv_example_animimg_1.c

@@ -0,0 +1,23 @@
+#include "../../lv_examples.h"
+#if LV_USE_ANIMIMG && LV_BUILD_EXAMPLES
+LV_IMG_DECLARE(animimg001)
+LV_IMG_DECLARE(animimg002)
+LV_IMG_DECLARE(animimg003)
+
+static const lv_img_dsc_t * anim_imgs[3] = {
+    &animimg001,
+    &animimg002,
+    &animimg003,
+};
+
+void lv_example_animimg_1(void)
+{
+    lv_obj_t * animimg0 = lv_animimg_create(lv_scr_act());
+    lv_obj_center(animimg0);
+    lv_animimg_set_src(animimg0, (lv_img_dsc_t **) anim_imgs, 3);
+    lv_animimg_set_duration(animimg0, 1000);
+    lv_animimg_set_repeat_count(animimg0, LV_ANIM_REPEAT_INFINITE);
+    lv_animimg_start(animimg0);
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/animimg/lv_example_animimg_1.py

@@ -0,0 +1,54 @@
+from imagetools import get_png_info, open_png
+
+# Register PNG image decoder
+decoder = lv.img.decoder_create()
+decoder.info_cb = get_png_info
+decoder.open_cb = open_png
+
+anim_imgs = [None]*3
+# Create an image from the png file
+try:
+    with open('../../assets/animimg001.png','rb') as f:
+        anim001_data = f.read()
+except:
+    print("Could not find animimg001.png")
+    sys.exit()
+
+anim_imgs[0] = lv.img_dsc_t({
+  'data_size': len(anim001_data),
+  'data': anim001_data
+})
+
+try:
+    with open('../../assets/animimg002.png','rb') as f:
+        anim002_data = f.read()
+except:
+    print("Could not find animimg002.png")
+    sys.exit()
+
+anim_imgs[1] = lv.img_dsc_t({
+  'data_size': len(anim002_data),
+  'data': anim002_data
+})
+
+try:
+    with open('../../assets/animimg003.png','rb') as f:
+        anim003_data = f.read()
+except:
+    print("Could not find animimg003.png")
+    sys.exit()
+
+anim_imgs[2] = lv.img_dsc_t({
+  'data_size': len(anim003_data),
+  'data': anim003_data
+})
+
+animimg0 = lv.animimg(lv.scr_act())
+animimg0.center()
+animimg0.set_src(anim_imgs, 3)
+animimg0.set_duration(1000)
+animimg0.set_repeat_count(lv.ANIM_REPEAT.INFINITE)
+animimg0.start()
+
+
+

LVGL.Simulator/lvgl/examples/widgets/arc/index.rst

@@ -0,0 +1,14 @@
+
+Simple Arc
+""""""""""""""""
+
+.. lv_example:: widgets/arc/lv_example_arc_1
+  :language: c
+  :description: A simple example to demonstrate the use of an arc.
+
+Loader with Arc
+""""""""""""""""
+
+.. lv_example:: widgets/arc/lv_example_arc_2
+  :language: c
+

LVGL.Simulator/lvgl/examples/widgets/arc/lv_example_arc_1.c

@@ -0,0 +1,16 @@
+#include "../../lv_examples.h"
+
+#if LV_USE_ARC && LV_BUILD_EXAMPLES
+
+void lv_example_arc_1(void)
+{
+    /*Create an Arc*/
+    lv_obj_t * arc = lv_arc_create(lv_scr_act());
+    lv_obj_set_size(arc, 150, 150);
+    lv_arc_set_rotation(arc, 135);
+    lv_arc_set_bg_angles(arc, 0, 270);
+    lv_arc_set_value(arc, 40);
+    lv_obj_center(arc);
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/arc/lv_example_arc_1.py

@@ -0,0 +1,8 @@
+# Create an Arc
+arc = lv.arc(lv.scr_act())
+arc.set_end_angle(200)
+arc.set_size(150, 150)
+arc.center()
+
+
+

LVGL.Simulator/lvgl/examples/widgets/arc/lv_example_arc_2.c

@@ -0,0 +1,37 @@
+#include "../../lv_examples.h"
+
+#if LV_USE_ARC && LV_BUILD_EXAMPLES
+
+static void set_angle(void * obj, int32_t v)
+{
+    lv_arc_set_value(obj, v);
+}
+
+/**
+ * Create an arc which acts as a loader.
+ */
+void lv_example_arc_2(void)
+{
+    /*Create an Arc*/
+    lv_obj_t * arc = lv_arc_create(lv_scr_act());
+    lv_arc_set_rotation(arc, 270);
+    lv_arc_set_bg_angles(arc, 0, 360);
+    lv_obj_remove_style(arc, NULL, LV_PART_KNOB);   /*Be sure the knob is not displayed*/
+    lv_obj_clear_flag(arc, LV_OBJ_FLAG_CLICKABLE);  /*To not allow adjusting by click*/
+    lv_obj_center(arc);
+
+    lv_anim_t a;
+    lv_anim_init(&a);
+    lv_anim_set_var(&a, arc);
+    lv_anim_set_exec_cb(&a, set_angle);
+    lv_anim_set_time(&a, 1000);
+    lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);    /*Just for the demo*/
+    lv_anim_set_repeat_delay(&a, 500);
+    lv_anim_set_values(&a, 0, 100);
+    lv_anim_start(&a);
+
+
+
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/arc/lv_example_arc_2.py

@@ -0,0 +1,37 @@
+#
+# An `lv_timer` to call periodically to set the angles of the arc
+#
+class ArcLoader():
+    def __init__(self):
+        self.a = 270
+
+    def arc_loader_cb(self,tim,arc):
+        # print(tim,arc)
+        self.a += 5
+
+        arc.set_end_angle(self.a)
+
+        if self.a >= 270 + 360:
+            tim._del()
+
+
+#
+# Create an arc which acts as a loader.
+#
+
+# Create an Arc
+arc = lv.arc(lv.scr_act())
+arc.set_bg_angles(0, 360)
+arc.set_angles(270, 270)
+arc.center()
+
+# create the loader
+arc_loader = ArcLoader()
+
+# Create an `lv_timer` to update the arc.
+
+timer = lv.timer_create_basic()
+timer.set_period(20)
+timer.set_cb(lambda src: arc_loader.arc_loader_cb(timer,arc))
+
+

LVGL.Simulator/lvgl/examples/widgets/bar/index.rst

@@ -0,0 +1,36 @@
+Simple Bar
+""""""""""""""""
+
+.. lv_example:: widgets/bar/lv_example_bar_1
+  :language: c
+
+Styling a bar
+""""""""""""""""
+
+.. lv_example:: widgets/bar/lv_example_bar_2
+  :language: c
+
+Temperature meter
+""""""""""""""""""
+
+.. lv_example:: widgets/bar/lv_example_bar_3
+  :language: c
+
+Stripe pattern and range value
+""""""""""""""""""""""""""""""""
+
+.. lv_example:: widgets/bar/lv_example_bar_4
+  :language: c
+
+Bar with LTR and RTL base direction
+""""""""""""""""""""""""""""""""""""
+
+.. lv_example:: widgets/bar/lv_example_bar_5
+  :language: c
+
+Custom drawer to show the current value
+"""""""""""""""""""""""""""""""""""""""
+
+.. lv_example:: widgets/bar/lv_example_bar_6
+  :language: c
+

LVGL.Simulator/lvgl/examples/widgets/bar/lv_example_bar_1.c

@@ -0,0 +1,12 @@
+#include "../../lv_examples.h"
+#if LV_USE_BAR && LV_BUILD_EXAMPLES
+
+void lv_example_bar_1(void)
+{
+    lv_obj_t * bar1 = lv_bar_create(lv_scr_act());
+    lv_obj_set_size(bar1, 200, 20);
+    lv_obj_center(bar1);
+    lv_bar_set_value(bar1, 70, LV_ANIM_OFF);
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/bar/lv_example_bar_1.py

@@ -0,0 +1,5 @@
+bar1 = lv.bar(lv.scr_act())
+bar1.set_size(200, 20)
+bar1.center()
+bar1.set_value(70, lv.ANIM.OFF)
+

LVGL.Simulator/lvgl/examples/widgets/bar/lv_example_bar_2.c

@@ -0,0 +1,34 @@
+#include "../../lv_examples.h"
+#if LV_USE_BAR && LV_BUILD_EXAMPLES
+
+/**
+ * Example of styling the bar
+ */
+void lv_example_bar_2(void)
+{
+    static lv_style_t style_bg;
+    static lv_style_t style_indic;
+
+    lv_style_init(&style_bg);
+    lv_style_set_border_color(&style_bg, lv_palette_main(LV_PALETTE_BLUE));
+    lv_style_set_border_width(&style_bg, 2);
+    lv_style_set_pad_all(&style_bg, 6); /*To make the indicator smaller*/
+    lv_style_set_radius(&style_bg, 6);
+    lv_style_set_anim_time(&style_bg, 1000);
+
+    lv_style_init(&style_indic);
+    lv_style_set_bg_opa(&style_indic, LV_OPA_COVER);
+    lv_style_set_bg_color(&style_indic, lv_palette_main(LV_PALETTE_BLUE));
+    lv_style_set_radius(&style_indic, 3);
+
+    lv_obj_t * bar = lv_bar_create(lv_scr_act());
+    lv_obj_remove_style_all(bar);  /*To have a clean start*/
+    lv_obj_add_style(bar, &style_bg, 0);
+    lv_obj_add_style(bar, &style_indic, LV_PART_INDICATOR);
+
+    lv_obj_set_size(bar, 200, 20);
+    lv_obj_center(bar);
+    lv_bar_set_value(bar, 100, LV_ANIM_ON);
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/bar/lv_example_bar_2.py

@@ -0,0 +1,27 @@
+#
+# Example of styling the bar
+#
+style_bg = lv.style_t()
+style_indic = lv.style_t()
+
+style_bg.init()
+style_bg.set_border_color(lv.palette_main(lv.PALETTE.BLUE))
+style_bg.set_border_width(2)
+style_bg.set_pad_all(6)            # To make the indicator smaller
+style_bg.set_radius(6)
+style_bg.set_anim_time(1000)
+
+style_indic.init()
+style_indic.set_bg_opa(lv.OPA.COVER)
+style_indic.set_bg_color(lv.palette_main(lv.PALETTE.BLUE))
+style_indic.set_radius(3)
+
+bar = lv.bar(lv.scr_act())
+bar.remove_style_all()   # To have a clean start
+bar.add_style(style_bg, 0)
+bar.add_style(style_indic, lv.PART.INDICATOR)
+
+bar.set_size(200, 20)
+bar.center()
+bar.set_value(100, lv.ANIM.ON)
+

LVGL.Simulator/lvgl/examples/widgets/bar/lv_example_bar_3.c

@@ -0,0 +1,40 @@
+#include "../../lv_examples.h"
+#if LV_USE_BAR && LV_BUILD_EXAMPLES
+
+static void set_temp(void * bar, int32_t temp)
+{
+    lv_bar_set_value(bar, temp, LV_ANIM_ON);
+}
+
+/**
+ * A temperature meter example
+ */
+void lv_example_bar_3(void)
+{
+    static lv_style_t style_indic;
+
+    lv_style_init(&style_indic);
+    lv_style_set_bg_opa(&style_indic, LV_OPA_COVER);
+    lv_style_set_bg_color(&style_indic, lv_palette_main(LV_PALETTE_RED));
+    lv_style_set_bg_grad_color(&style_indic, lv_palette_main(LV_PALETTE_BLUE));
+    lv_style_set_bg_grad_dir(&style_indic, LV_GRAD_DIR_VER);
+
+    lv_obj_t * bar = lv_bar_create(lv_scr_act());
+    lv_obj_add_style(bar, &style_indic, LV_PART_INDICATOR);
+    lv_obj_set_size(bar, 20, 200);
+    lv_obj_center(bar);
+    lv_bar_set_range(bar, -20, 40);
+
+    lv_anim_t a;
+    lv_anim_init(&a);
+    lv_anim_set_exec_cb(&a, set_temp);
+    lv_anim_set_time(&a, 3000);
+    lv_anim_set_playback_time(&a, 3000);
+    lv_anim_set_var(&a, bar);
+    lv_anim_set_values(&a, -20, 40);
+    lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
+    lv_anim_start(&a);
+}
+
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/bar/lv_example_bar_3.py

@@ -0,0 +1,32 @@
+def set_temp(bar, temp):
+    bar.set_value(temp, lv.ANIM.ON)
+
+#
+# A temperature meter example
+#
+
+
+style_indic = lv.style_t()
+
+style_indic.init()
+style_indic.set_bg_opa(lv.OPA.COVER)
+style_indic.set_bg_color(lv.palette_main(lv.PALETTE.RED))
+style_indic.set_bg_grad_color(lv.palette_main(lv.PALETTE.BLUE))
+style_indic.set_bg_grad_dir(lv.GRAD_DIR.VER)
+
+bar = lv.bar(lv.scr_act())
+bar.add_style(style_indic, lv.PART.INDICATOR)
+bar.set_size(20, 200)
+bar.center()
+bar.set_range(-20, 40)
+
+a = lv.anim_t()
+a.init()
+a.set_time(3000)
+a.set_playback_time(3000)
+a.set_var(bar)
+a.set_values(-20, 40)
+a.set_repeat_count(lv.ANIM_REPEAT.INFINITE)
+a.set_custom_exec_cb(lambda a, val: set_temp(bar,val))
+lv.anim_t.start(a)
+

LVGL.Simulator/lvgl/examples/widgets/bar/lv_example_bar_4.c

@@ -0,0 +1,27 @@
+#include "../../lv_examples.h"
+#if LV_USE_BAR && LV_BUILD_EXAMPLES
+
+/**
+ * Bar with stripe pattern and ranged value
+ */
+void lv_example_bar_4(void)
+{
+    LV_IMG_DECLARE(img_skew_strip);
+    static lv_style_t style_indic;
+
+    lv_style_init(&style_indic);
+    lv_style_set_bg_img_src(&style_indic, &img_skew_strip);
+    lv_style_set_bg_img_tiled(&style_indic, true);
+    lv_style_set_bg_img_opa(&style_indic, LV_OPA_30);
+
+    lv_obj_t * bar = lv_bar_create(lv_scr_act());
+    lv_obj_add_style(bar, &style_indic, LV_PART_INDICATOR);
+
+    lv_obj_set_size(bar, 260, 20);
+    lv_obj_center(bar);
+    lv_bar_set_mode(bar, LV_BAR_MODE_RANGE);
+    lv_bar_set_value(bar, 90, LV_ANIM_OFF);
+    lv_bar_set_start_value(bar, 20, LV_ANIM_OFF);
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/bar/lv_example_bar_4.py

@@ -0,0 +1,45 @@
+#
+# get an icon
+#
+def get_icon(filename,xres,yres):
+    try:
+        sdl_filename = "../../assets/" + filename + "_" + str(xres) + "x" + str(yres) + "_argb8888.fnt"
+        print("file name: ", sdl_filename)
+        with open(sdl_filename,'rb') as f:
+            icon_data = f.read()
+    except:
+        print("Could not find image file: " + filename)
+        return None
+
+    icon_dsc = lv.img_dsc_t(
+        {
+            "header": {"always_zero": 0, "w": xres, "h": yres, "cf": lv.img.CF.TRUE_COLOR_ALPHA},
+            "data": icon_data,
+            "data_size": len(icon_data),
+        }
+    )
+    return icon_dsc
+
+#
+# Bar with stripe pattern and ranged value
+#
+
+img_skew_strip_dsc = get_icon("img_skew_strip",80,20)
+style_indic = lv.style_t()
+
+style_indic.init()
+style_indic.set_bg_img_src(img_skew_strip_dsc)
+style_indic.set_bg_img_tiled(True)
+style_indic.set_bg_img_opa(lv.OPA._30)
+
+bar = lv.bar(lv.scr_act())
+bar.add_style(style_indic, lv.PART.INDICATOR)
+
+bar.set_size(260, 20)
+bar.center()
+bar.set_mode(lv.bar.MODE.RANGE)
+bar.set_value(90, lv.ANIM.OFF)
+bar.set_start_value(20, lv.ANIM.OFF)
+
+
+

LVGL.Simulator/lvgl/examples/widgets/bar/lv_example_bar_5.c

@@ -0,0 +1,32 @@
+#include "../../lv_examples.h"
+#if LV_USE_BAR && LV_BUILD_EXAMPLES
+
+/**
+ * Bar with LTR and RTL base direction
+ */
+void lv_example_bar_5(void)
+{
+    lv_obj_t * label;
+
+
+    lv_obj_t * bar_ltr = lv_bar_create(lv_scr_act());
+    lv_obj_set_size(bar_ltr, 200, 20);
+    lv_bar_set_value(bar_ltr, 70, LV_ANIM_OFF);
+    lv_obj_align(bar_ltr, LV_ALIGN_CENTER, 0, -30);
+
+    label = lv_label_create(lv_scr_act());
+    lv_label_set_text(label, "Left to Right base direction");
+    lv_obj_align_to(label, bar_ltr, LV_ALIGN_OUT_TOP_MID, 0, -5);
+
+    lv_obj_t * bar_rtl = lv_bar_create(lv_scr_act());
+    lv_obj_set_style_base_dir(bar_rtl, LV_BASE_DIR_RTL, 0);
+    lv_obj_set_size(bar_rtl, 200, 20);
+    lv_bar_set_value(bar_rtl, 70, LV_ANIM_OFF);
+    lv_obj_align(bar_rtl, LV_ALIGN_CENTER, 0, 30);
+
+    label = lv_label_create(lv_scr_act());
+    lv_label_set_text(label, "Right to Left base direction");
+    lv_obj_align_to(label, bar_rtl, LV_ALIGN_OUT_TOP_MID, 0, -5);
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/bar/lv_example_bar_5.py

@@ -0,0 +1,22 @@
+#
+# Bar with LTR and RTL base direction
+#
+
+bar_ltr = lv.bar(lv.scr_act())
+bar_ltr.set_size(200, 20)
+bar_ltr.set_value(70, lv.ANIM.OFF)
+bar_ltr.align(lv.ALIGN.CENTER, 0, -30)
+
+label = lv.label(lv.scr_act())
+label.set_text("Left to Right base direction")
+label.align_to(bar_ltr, lv.ALIGN.OUT_TOP_MID, 0, -5)
+
+bar_rtl = lv.bar(lv.scr_act())
+bar_rtl.set_style_base_dir(lv.BASE_DIR.RTL,0)
+bar_rtl.set_size(200, 20)
+bar_rtl.set_value(70, lv.ANIM.OFF)
+bar_rtl.align(lv.ALIGN.CENTER, 0, 30)
+
+label = lv.label(lv.scr_act())
+label.set_text("Right to Left base direction")
+label.align_to(bar_rtl, lv.ALIGN.OUT_TOP_MID, 0, -5)

LVGL.Simulator/lvgl/examples/widgets/bar/lv_example_bar_6.c

@@ -0,0 +1,69 @@
+#include "../../lv_examples.h"
+#if LV_USE_BAR && LV_BUILD_EXAMPLES
+
+static void set_value(void * bar, int32_t v)
+{
+    lv_bar_set_value(bar, v, LV_ANIM_OFF);
+}
+
+static void event_cb(lv_event_t * e)
+{
+    lv_obj_draw_part_dsc_t * dsc = lv_event_get_param(e);
+    if(dsc->part != LV_PART_INDICATOR) return;
+
+    lv_obj_t * obj = lv_event_get_target(e);
+
+    lv_draw_label_dsc_t label_dsc;
+    lv_draw_label_dsc_init(&label_dsc);
+    label_dsc.font = LV_FONT_DEFAULT;
+
+    char buf[8];
+    lv_snprintf(buf, sizeof(buf), "%d", (int)lv_bar_get_value(obj));
+
+    lv_point_t txt_size;
+    lv_txt_get_size(&txt_size, buf, label_dsc.font, label_dsc.letter_space, label_dsc.line_space, LV_COORD_MAX,
+                    label_dsc.flag);
+
+    lv_area_t txt_area;
+    /*If the indicator is long enough put the text inside on the right*/
+    if(lv_area_get_width(dsc->draw_area) > txt_size.x + 20) {
+        txt_area.x2 = dsc->draw_area->x2 - 5;
+        txt_area.x1 = txt_area.x2 - txt_size.x + 1;
+        label_dsc.color = lv_color_white();
+    }
+    /*If the indicator is still short put the text out of it on the right*/
+    else {
+        txt_area.x1 = dsc->draw_area->x2 + 5;
+        txt_area.x2 = txt_area.x1 + txt_size.x - 1;
+        label_dsc.color = lv_color_black();
+    }
+
+    txt_area.y1 = dsc->draw_area->y1 + (lv_area_get_height(dsc->draw_area) - txt_size.y) / 2;
+    txt_area.y2 = txt_area.y1 + txt_size.y - 1;
+
+    lv_draw_label(dsc->draw_ctx, &label_dsc, &txt_area, buf, NULL);
+}
+
+/**
+ * Custom drawer on the bar to display the current value
+ */
+void lv_example_bar_6(void)
+{
+    lv_obj_t * bar = lv_bar_create(lv_scr_act());
+    lv_obj_add_event_cb(bar, event_cb, LV_EVENT_DRAW_PART_END, NULL);
+    lv_obj_set_size(bar, 200, 20);
+    lv_obj_center(bar);
+
+    lv_anim_t a;
+    lv_anim_init(&a);
+    lv_anim_set_var(&a, bar);
+    lv_anim_set_values(&a, 0, 100);
+    lv_anim_set_exec_cb(&a, set_value);
+    lv_anim_set_time(&a, 2000);
+    lv_anim_set_playback_time(&a, 2000);
+    lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
+    lv_anim_start(&a);
+
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/bar/lv_example_bar_6.py

@@ -0,0 +1,54 @@
+def set_value(bar, v):
+    bar.set_value(v, lv.ANIM.OFF)
+
+def event_cb(e):
+    dsc = lv.obj_draw_part_dsc_t.__cast__(e.get_param())
+    if dsc.part != lv.PART.INDICATOR:
+        return
+
+    obj= e.get_target()
+
+    label_dsc = lv.draw_label_dsc_t()
+    label_dsc.init()
+    # label_dsc.font = LV_FONT_DEFAULT;
+
+    value_txt = str(obj.get_value())
+    txt_size = lv.point_t()
+    lv.txt_get_size(txt_size, value_txt, label_dsc.font, label_dsc.letter_space, label_dsc.line_space, lv.COORD.MAX, label_dsc.flag)
+
+    txt_area = lv.area_t()
+    # If the indicator is long enough put the text inside on the right
+    if dsc.draw_area.get_width() > txt_size.x + 20:
+        txt_area.x2 = dsc.draw_area.x2 - 5
+        txt_area.x1 = txt_area.x2 - txt_size.x + 1
+        label_dsc.color = lv.color_white()
+    # If the indicator is still short put the text out of it on the right*/
+    else:
+        txt_area.x1 = dsc.draw_area.x2 + 5
+        txt_area.x2 = txt_area.x1 + txt_size.x - 1
+        label_dsc.color = lv.color_black()
+
+    txt_area.y1 = dsc.draw_area.y1 + (dsc.draw_area.get_height() - txt_size.y) // 2
+    txt_area.y2 = txt_area.y1 + txt_size.y - 1
+
+    dsc.draw_ctx.label(label_dsc, txt_area, value_txt, None)
+
+#
+# Custom drawer on the bar to display the current value
+#
+
+bar = lv.bar(lv.scr_act())
+bar.add_event_cb(event_cb, lv.EVENT.DRAW_PART_END, None)
+bar.set_size(200, 20)
+bar.center()
+
+a = lv.anim_t()
+a.init()
+a.set_var(bar)
+a.set_values(0, 100)
+a.set_custom_exec_cb(lambda a,val: set_value(bar,val))
+a.set_time(2000)
+a.set_playback_time(2000)
+a.set_repeat_count(lv.ANIM_REPEAT.INFINITE)
+lv.anim_t.start(a)
+

LVGL.Simulator/lvgl/examples/widgets/bar/test.py

@@ -0,0 +1,57 @@
+#!/opt/bin/lv_micropython -i
+import lvgl as lv
+import display_driver
+def set_value(bar, v):
+    bar.set_value(v, lv.ANIM.OFF)
+
+def event_cb(e):
+    dsc = lv.obj_draw_part_dsc_t.__cast__(e.get_param())
+    if dsc.part != lv.PART.INDICATOR:
+        return
+
+    obj= e.get_target()
+
+    label_dsc = lv.draw_label_dsc_t()
+    label_dsc.init()
+    # label_dsc.font = LV_FONT_DEFAULT;
+
+    value_txt = str(obj.get_value())
+    txt_size = lv.point_t()
+    lv.txt_get_size(txt_size, value_txt, label_dsc.font, label_dsc.letter_space, label_dsc.line_space, lv.COORD.MAX, label_dsc.flag)
+
+    txt_area = lv.area_t()
+    # If the indicator is long enough put the text inside on the right
+    if dsc.draw_area.get_width() > txt_size.x + 20:
+        txt_area.x2 = dsc.draw_area.x2 - 5
+        txt_area.x1 = txt_area.x2 - txt_size.x + 1
+        label_dsc.color = lv.color_white()
+    # If the indicator is still short put the text out of it on the right*/
+    else:
+        txt_area.x1 = dsc.draw_area.x2 + 5
+        txt_area.x2 = txt_area.x1 + txt_size.x - 1
+        label_dsc.color = lv.color_black()
+
+    txt_area.y1 = dsc.draw_area.y1 + (dsc.draw_area.get_height() - txt_size.y) // 2
+    txt_area.y2 = txt_area.y1 + txt_size.y - 1
+
+    dsc.draw_ctx.label(label_dsc, txt_area, value_txt, None)
+
+#
+# Custom drawer on the bar to display the current value
+#
+
+bar = lv.bar(lv.scr_act())
+bar.add_event_cb(event_cb, lv.EVENT.DRAW_PART_END, None)
+bar.set_size(200, 20)
+bar.center()
+
+a = lv.anim_t()
+a.init()
+a.set_var(bar)
+a.set_values(0, 100)
+a.set_custom_exec_cb(lambda a,val: set_value(bar,val))
+a.set_time(2000)
+a.set_playback_time(2000)
+a.set_repeat_count(lv.ANIM_REPEAT.INFINITE)
+lv.anim_t.start(a)
+

LVGL.Simulator/lvgl/examples/widgets/btn/index.rst

@@ -0,0 +1,20 @@
+
+Simple Buttons
+""""""""""""""""
+
+.. lv_example:: widgets/btn/lv_example_btn_1
+  :language: c
+
+
+Styling buttons
+""""""""""""""""
+
+.. lv_example:: widgets/btn/lv_example_btn_2
+  :language: c
+
+Gummy button
+""""""""""""""""
+
+.. lv_example:: widgets/btn/lv_example_btn_3
+  :language: c
+

LVGL.Simulator/lvgl/examples/widgets/btn/lv_example_btn_1.c

@@ -0,0 +1,38 @@
+#include "../../lv_examples.h"
+#if LV_USE_BTN && LV_BUILD_EXAMPLES
+
+static void event_handler(lv_event_t * e)
+{
+    lv_event_code_t code = lv_event_get_code(e);
+
+    if(code == LV_EVENT_CLICKED) {
+        LV_LOG_USER("Clicked");
+    }
+    else if(code == LV_EVENT_VALUE_CHANGED) {
+        LV_LOG_USER("Toggled");
+    }
+}
+
+void lv_example_btn_1(void)
+{
+    lv_obj_t * label;
+
+    lv_obj_t * btn1 = lv_btn_create(lv_scr_act());
+    lv_obj_add_event_cb(btn1, event_handler, LV_EVENT_ALL, NULL);
+    lv_obj_align(btn1, LV_ALIGN_CENTER, 0, -40);
+
+    label = lv_label_create(btn1);
+    lv_label_set_text(label, "Button");
+    lv_obj_center(label);
+
+    lv_obj_t * btn2 = lv_btn_create(lv_scr_act());
+    lv_obj_add_event_cb(btn2, event_handler, LV_EVENT_ALL, NULL);
+    lv_obj_align(btn2, LV_ALIGN_CENTER, 0, 40);
+    lv_obj_add_flag(btn2, LV_OBJ_FLAG_CHECKABLE);
+    lv_obj_set_height(btn2, LV_SIZE_CONTENT);
+
+    label = lv_label_create(btn2);
+    lv_label_set_text(label, "Toggle");
+    lv_obj_center(label);
+}
+#endif

LVGL.Simulator/lvgl/examples/widgets/btn/lv_example_btn_1.py

@@ -0,0 +1,32 @@
+def event_handler(evt):
+    code = evt.get_code()
+
+    if code == lv.EVENT.CLICKED:
+            print("Clicked event seen")
+    elif code == lv.EVENT.VALUE_CHANGED:
+        print("Value changed seen")
+
+# create a simple button
+btn1 = lv.btn(lv.scr_act())
+
+# attach the callback
+btn1.add_event_cb(event_handler,lv.EVENT.ALL, None)
+
+btn1.align(lv.ALIGN.CENTER,0,-40)
+label=lv.label(btn1)
+label.set_text("Button")
+
+# create a toggle button
+btn2 = lv.btn(lv.scr_act())
+
+# attach the callback
+#btn2.add_event_cb(event_handler,lv.EVENT.VALUE_CHANGED,None)
+btn2.add_event_cb(event_handler,lv.EVENT.ALL, None)
+
+btn2.align(lv.ALIGN.CENTER,0,40)
+btn2.add_flag(lv.obj.FLAG.CHECKABLE)
+btn2.set_height(lv.SIZE.CONTENT)
+
+label=lv.label(btn2)
+label.set_text("Toggle")
+label.center()

LVGL.Simulator/lvgl/examples/widgets/btn/lv_example_btn_2.c

@@ -0,0 +1,65 @@
+#include "../../lv_examples.h"
+#if LV_USE_BTN && LV_BUILD_EXAMPLES
+
+/**
+ * Style a button from scratch
+ */
+void lv_example_btn_2(void)
+{
+    /*Init the style for the default state*/
+    static lv_style_t style;
+    lv_style_init(&style);
+
+    lv_style_set_radius(&style, 3);
+
+    lv_style_set_bg_opa(&style, LV_OPA_100);
+    lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_BLUE));
+    lv_style_set_bg_grad_color(&style, lv_palette_darken(LV_PALETTE_BLUE, 2));
+    lv_style_set_bg_grad_dir(&style, LV_GRAD_DIR_VER);
+
+    lv_style_set_border_opa(&style, LV_OPA_40);
+    lv_style_set_border_width(&style, 2);
+    lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_GREY));
+
+    lv_style_set_shadow_width(&style, 8);
+    lv_style_set_shadow_color(&style, lv_palette_main(LV_PALETTE_GREY));
+    lv_style_set_shadow_ofs_y(&style, 8);
+
+    lv_style_set_outline_opa(&style, LV_OPA_COVER);
+    lv_style_set_outline_color(&style, lv_palette_main(LV_PALETTE_BLUE));
+
+    lv_style_set_text_color(&style, lv_color_white());
+    lv_style_set_pad_all(&style, 10);
+
+    /*Init the pressed style*/
+    static lv_style_t style_pr;
+    lv_style_init(&style_pr);
+
+    /*Add a large outline when pressed*/
+    lv_style_set_outline_width(&style_pr, 30);
+    lv_style_set_outline_opa(&style_pr, LV_OPA_TRANSP);
+
+    lv_style_set_translate_y(&style_pr, 5);
+    lv_style_set_shadow_ofs_y(&style_pr, 3);
+    lv_style_set_bg_color(&style_pr, lv_palette_darken(LV_PALETTE_BLUE, 2));
+    lv_style_set_bg_grad_color(&style_pr, lv_palette_darken(LV_PALETTE_BLUE, 4));
+
+    /*Add a transition to the outline*/
+    static lv_style_transition_dsc_t trans;
+    static lv_style_prop_t props[] = {LV_STYLE_OUTLINE_WIDTH, LV_STYLE_OUTLINE_OPA, 0};
+    lv_style_transition_dsc_init(&trans, props, lv_anim_path_linear, 300, 0, NULL);
+
+    lv_style_set_transition(&style_pr, &trans);
+
+    lv_obj_t * btn1 = lv_btn_create(lv_scr_act());
+    lv_obj_remove_style_all(btn1);                          /*Remove the style coming from the theme*/
+    lv_obj_add_style(btn1, &style, 0);
+    lv_obj_add_style(btn1, &style_pr, LV_STATE_PRESSED);
+    lv_obj_set_size(btn1, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
+    lv_obj_center(btn1);
+
+    lv_obj_t * label = lv_label_create(btn1);
+    lv_label_set_text(label, "Button");
+    lv_obj_center(label);
+}
+#endif

LVGL.Simulator/lvgl/examples/widgets/btn/lv_example_btn_2.py

@@ -0,0 +1,60 @@
+#
+# Style a button from scratch
+#
+
+# Init the style for the default state
+style = lv.style_t()
+style.init()
+
+style.set_radius(3)
+
+style.set_bg_opa(lv.OPA.COVER)
+style.set_bg_color(lv.palette_main(lv.PALETTE.BLUE))
+style.set_bg_grad_color(lv.palette_darken(lv.PALETTE.BLUE, 2))
+style.set_bg_grad_dir(lv.GRAD_DIR.VER)
+
+style.set_border_opa(lv.OPA._40)
+style.set_border_width(2)
+style.set_border_color(lv.palette_main(lv.PALETTE.GREY))
+
+style.set_shadow_width(8)
+style.set_shadow_color(lv.palette_main(lv.PALETTE.GREY))
+style.set_shadow_ofs_y(8)
+
+style.set_outline_opa(lv.OPA.COVER)
+style.set_outline_color(lv.palette_main(lv.PALETTE.BLUE))
+
+style.set_text_color(lv.color_white())
+style.set_pad_all(10)
+
+# Init the pressed style
+style_pr = lv.style_t()
+style_pr.init()
+
+# Add a large outline when pressed
+style_pr.set_outline_width(30)
+style_pr.set_outline_opa(lv.OPA.TRANSP)
+
+style_pr.set_translate_y(5)
+style_pr.set_shadow_ofs_y(3)
+style_pr.set_bg_color(lv.palette_darken(lv.PALETTE.BLUE, 2))
+style_pr.set_bg_grad_color(lv.palette_darken(lv.PALETTE.BLUE, 4))
+
+# Add a transition to the outline
+trans = lv.style_transition_dsc_t()
+props = [lv.STYLE.OUTLINE_WIDTH, lv.STYLE.OUTLINE_OPA, 0]
+trans.init(props, lv.anim_t.path_linear, 300, 0, None)
+
+style_pr.set_transition(trans)
+
+btn1 = lv.btn(lv.scr_act())
+btn1.remove_style_all()                          # Remove the style coming from the theme
+btn1.add_style(style, 0)
+btn1.add_style(style_pr, lv.STATE.PRESSED)
+btn1.set_size(lv.SIZE.CONTENT, lv.SIZE.CONTENT)
+btn1.center()
+
+label = lv.label(btn1)
+label.set_text("Button")
+label.center()
+

LVGL.Simulator/lvgl/examples/widgets/btn/lv_example_btn_3.c

@@ -0,0 +1,45 @@
+#include "../../lv_examples.h"
+#if LV_BUILD_EXAMPLES && LV_USE_BTN
+
+/**
+ * Create a style transition on a button to act like a gum when clicked
+ */
+void lv_example_btn_3(void)
+{
+    /*Properties to transition*/
+    static lv_style_prop_t props[] = {
+        LV_STYLE_TRANSFORM_WIDTH, LV_STYLE_TRANSFORM_HEIGHT, LV_STYLE_TEXT_LETTER_SPACE, 0
+    };
+
+    /*Transition descriptor when going back to the default state.
+     *Add some delay to be sure the press transition is visible even if the press was very short*/
+    static lv_style_transition_dsc_t transition_dsc_def;
+    lv_style_transition_dsc_init(&transition_dsc_def, props, lv_anim_path_overshoot, 250, 100, NULL);
+
+    /*Transition descriptor when going to pressed state.
+     *No delay, go to presses state immediately*/
+    static lv_style_transition_dsc_t transition_dsc_pr;
+    lv_style_transition_dsc_init(&transition_dsc_pr, props, lv_anim_path_ease_in_out, 250, 0, NULL);
+
+    /*Add only the new transition to he default state*/
+    static lv_style_t style_def;
+    lv_style_init(&style_def);
+    lv_style_set_transition(&style_def, &transition_dsc_def);
+
+    /*Add the transition and some transformation to the presses state.*/
+    static lv_style_t style_pr;
+    lv_style_init(&style_pr);
+    lv_style_set_transform_width(&style_pr, 10);
+    lv_style_set_transform_height(&style_pr, -10);
+    lv_style_set_text_letter_space(&style_pr, 10);
+    lv_style_set_transition(&style_pr, &transition_dsc_pr);
+
+    lv_obj_t * btn1 = lv_btn_create(lv_scr_act());
+    lv_obj_align(btn1, LV_ALIGN_CENTER, 0, -80);
+    lv_obj_add_style(btn1, &style_pr, LV_STATE_PRESSED);
+    lv_obj_add_style(btn1, &style_def, 0);
+
+    lv_obj_t * label = lv_label_create(btn1);
+    lv_label_set_text(label, "Gum");
+}
+#endif

LVGL.Simulator/lvgl/examples/widgets/btn/lv_example_btn_3.py

@@ -0,0 +1,38 @@
+#
+# Create a style transition on a button to act like a gum when clicked
+#
+
+# Properties to transition
+props = [lv.STYLE.TRANSFORM_WIDTH, lv.STYLE.TRANSFORM_HEIGHT, lv.STYLE.TEXT_LETTER_SPACE, 0]
+
+# Transition descriptor when going back to the default state.
+# Add some delay to be sure the press transition is visible even if the press was very short*/
+transition_dsc_def = lv.style_transition_dsc_t()
+transition_dsc_def.init(props, lv.anim_t.path_overshoot, 250, 100, None)
+
+# Transition descriptor when going to pressed state.
+# No delay, go to pressed state immediately
+transition_dsc_pr = lv.style_transition_dsc_t()
+transition_dsc_pr.init(props, lv.anim_t.path_ease_in_out, 250, 0, None)
+
+# Add only the new transition to the default state
+style_def = lv.style_t()
+style_def.init()
+style_def.set_transition(transition_dsc_def)
+
+# Add the transition and some transformation to the presses state.
+style_pr = lv.style_t()
+style_pr.init()
+style_pr.set_transform_width(10)
+style_pr.set_transform_height(-10)
+style_pr.set_text_letter_space(10)
+style_pr.set_transition(transition_dsc_pr)
+
+btn1 = lv.btn(lv.scr_act())
+btn1.align(lv.ALIGN.CENTER, 0, -80)
+btn1.add_style(style_pr, lv.STATE.PRESSED)
+btn1.add_style(style_def, 0)
+
+label = lv.label(btn1)
+label.set_text("Gum")
+

LVGL.Simulator/lvgl/examples/widgets/btnmatrix/index.rst

@@ -0,0 +1,22 @@
+
+Simple Button matrix
+""""""""""""""""""""""
+
+.. lv_example:: widgets/btnmatrix/lv_example_btnmatrix_1
+  :language: c
+
+
+Custom buttons
+""""""""""""""""""""""
+
+.. lv_example:: widgets/btnmatrix/lv_example_btnmatrix_2
+  :language: c
+
+
+Pagination
+""""""""""""""""""""""
+
+.. lv_example:: widgets/btnmatrix/lv_example_btnmatrix_3
+  :language: c
+
+

LVGL.Simulator/lvgl/examples/widgets/btnmatrix/lv_example_btnmatrix_1.c

@@ -0,0 +1,33 @@
+#include "../../lv_examples.h"
+#if LV_USE_BTNMATRIX && LV_BUILD_EXAMPLES
+
+static void event_handler(lv_event_t * e)
+{
+    lv_event_code_t code = lv_event_get_code(e);
+    lv_obj_t * obj = lv_event_get_target(e);
+    if(code == LV_EVENT_VALUE_CHANGED) {
+        uint32_t id = lv_btnmatrix_get_selected_btn(obj);
+        const char * txt = lv_btnmatrix_get_btn_text(obj, id);
+
+        LV_LOG_USER("%s was pressed\n", txt);
+    }
+}
+
+
+static const char * btnm_map[] = {"1", "2", "3", "4", "5", "\n",
+                                  "6", "7", "8", "9", "0", "\n",
+                                  "Action1", "Action2", ""
+                                 };
+
+void lv_example_btnmatrix_1(void)
+{
+    lv_obj_t * btnm1 = lv_btnmatrix_create(lv_scr_act());
+    lv_btnmatrix_set_map(btnm1, btnm_map);
+    lv_btnmatrix_set_btn_width(btnm1, 10, 2);        /*Make "Action1" twice as wide as "Action2"*/
+    lv_btnmatrix_set_btn_ctrl(btnm1, 10, LV_BTNMATRIX_CTRL_CHECKABLE);
+    lv_btnmatrix_set_btn_ctrl(btnm1, 11, LV_BTNMATRIX_CTRL_CHECKED);
+    lv_obj_align(btnm1, LV_ALIGN_CENTER, 0, 0);
+    lv_obj_add_event_cb(btnm1, event_handler, LV_EVENT_ALL, NULL);
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/btnmatrix/lv_example_btnmatrix_1.py

@@ -0,0 +1,24 @@
+def event_handler(evt):
+    code = evt.get_code()
+    obj  = evt.get_target()
+
+    if code == lv.EVENT.VALUE_CHANGED :
+        id = obj.get_selected_btn()
+        txt = obj.get_btn_text(id)
+
+        print("%s was pressed"%txt)
+
+btnm_map = ["1", "2", "3", "4", "5", "\n",
+            "6", "7", "8", "9", "0", "\n",
+            "Action1", "Action2", ""]
+
+btnm1 = lv.btnmatrix(lv.scr_act())
+btnm1.set_map(btnm_map)
+btnm1.set_btn_width(10, 2)        # Make "Action1" twice as wide as "Action2"
+btnm1.set_btn_ctrl(10, lv.btnmatrix.CTRL.CHECKABLE)
+btnm1.set_btn_ctrl(11, lv.btnmatrix.CTRL.CHECKED)
+btnm1.align(lv.ALIGN.CENTER, 0, 0)
+btnm1.add_event_cb(event_handler, lv.EVENT.ALL, None)
+
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/btnmatrix/lv_example_btnmatrix_2.c

@@ -0,0 +1,72 @@
+#include "../../lv_examples.h"
+#if LV_USE_BTNMATRIX && LV_BUILD_EXAMPLES
+
+
+static void event_cb(lv_event_t * e)
+{
+    lv_event_code_t code = lv_event_get_code(e);
+    lv_obj_t * obj = lv_event_get_target(e);
+    if(code == LV_EVENT_DRAW_PART_BEGIN) {
+        lv_obj_draw_part_dsc_t * dsc = lv_event_get_param(e);
+
+        /*Change the draw descriptor the 2nd button*/
+        if(dsc->id == 1) {
+            dsc->rect_dsc->radius = 0;
+            if(lv_btnmatrix_get_selected_btn(obj) == dsc->id)  dsc->rect_dsc->bg_color = lv_palette_darken(LV_PALETTE_BLUE, 3);
+            else dsc->rect_dsc->bg_color = lv_palette_main(LV_PALETTE_BLUE);
+
+            dsc->rect_dsc->shadow_width = 6;
+            dsc->rect_dsc->shadow_ofs_x = 3;
+            dsc->rect_dsc->shadow_ofs_y = 3;
+            dsc->label_dsc->color = lv_color_white();
+        }
+        /*Change the draw descriptor the 3rd button*/
+        else if(dsc->id == 2) {
+            dsc->rect_dsc->radius = LV_RADIUS_CIRCLE;
+            if(lv_btnmatrix_get_selected_btn(obj) == dsc->id)  dsc->rect_dsc->bg_color = lv_palette_darken(LV_PALETTE_RED, 3);
+            else dsc->rect_dsc->bg_color = lv_palette_main(LV_PALETTE_RED);
+
+            dsc->label_dsc->color = lv_color_white();
+        }
+        else if(dsc->id == 3) {
+            dsc->label_dsc->opa = LV_OPA_TRANSP; /*Hide the text if any*/
+
+        }
+    }
+    if(code == LV_EVENT_DRAW_PART_END) {
+        lv_obj_draw_part_dsc_t * dsc = lv_event_get_param(e);
+
+        /*Add custom content to the 4th button when the button itself was drawn*/
+        if(dsc->id == 3) {
+            LV_IMG_DECLARE(img_star);
+            lv_img_header_t header;
+            lv_res_t res = lv_img_decoder_get_info(&img_star, &header);
+            if(res != LV_RES_OK) return;
+
+            lv_area_t a;
+            a.x1 = dsc->draw_area->x1 + (lv_area_get_width(dsc->draw_area) - header.w) / 2;
+            a.x2 = a.x1 + header.w - 1;
+            a.y1 = dsc->draw_area->y1 + (lv_area_get_height(dsc->draw_area) - header.h) / 2;
+            a.y2 = a.y1 + header.h - 1;
+
+            lv_draw_img_dsc_t img_draw_dsc;
+            lv_draw_img_dsc_init(&img_draw_dsc);
+            img_draw_dsc.recolor = lv_color_black();
+            if(lv_btnmatrix_get_selected_btn(obj) == dsc->id)  img_draw_dsc.recolor_opa = LV_OPA_30;
+
+            lv_draw_img(dsc->draw_ctx, &img_draw_dsc, &a, &img_star);
+        }
+    }
+}
+
+/**
+ * Add custom drawer to the button matrix to customize buttons one by one
+ */
+void lv_example_btnmatrix_2(void)
+{
+    lv_obj_t * btnm = lv_btnmatrix_create(lv_scr_act());
+    lv_obj_add_event_cb(btnm, event_cb, LV_EVENT_ALL, NULL);
+    lv_obj_center(btnm);
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/btnmatrix/lv_example_btnmatrix_2.py

@@ -0,0 +1,81 @@
+from imagetools import get_png_info, open_png
+
+# Register PNG image decoder
+decoder = lv.img.decoder_create()
+decoder.info_cb = get_png_info
+decoder.open_cb = open_png
+
+# Create an image from the png file
+try:
+    with open('../../assets/img_star.png','rb') as f:
+        png_data = f.read()
+except:
+    print("Could not find star.png")
+    sys.exit()
+
+img_star_argb = lv.img_dsc_t({
+  'data_size': len(png_data),
+  'data': png_data
+})
+
+def event_cb(e):
+    code = e.get_code()
+    obj = e.get_target()
+    dsc = lv.obj_draw_part_dsc_t.__cast__(e.get_param())
+    if code == lv.EVENT.DRAW_PART_BEGIN:
+        # Change the draw descriptor the 2nd button
+        if dsc.id == 1:
+            dsc.rect_dsc.radius = 0
+            if obj.get_selected_btn() == dsc.id:
+                dsc.rect_dsc.bg_color = lv.palette_darken(lv.PALETTE.GREY, 3)
+            else:
+                dsc.rect_dsc.bg_color = lv.palette_main(lv.PALETTE.BLUE)
+
+            dsc.rect_dsc.shadow_width = 6
+            dsc.rect_dsc.shadow_ofs_x = 3
+            dsc.rect_dsc.shadow_ofs_y = 3
+            dsc.label_dsc.color = lv.color_white()
+
+        # Change the draw descriptor the 3rd button
+
+        elif dsc.id == 2:
+            dsc.rect_dsc.radius = lv.RADIUS.CIRCLE
+            if obj.get_selected_btn() == dsc.id:
+                dsc.rect_dsc.bg_color = lv.palette_darken(lv.PALETTE.RED, 3)
+            else:
+                dsc.rect_dsc.bg_color = lv.palette_main(lv.PALETTE.RED)
+
+                dsc.label_dsc.color = lv.color_white()
+        elif dsc.id == 3:
+            dsc.label_dsc.opa = lv.OPA.TRANSP  # Hide the text if any
+
+    if code == lv.EVENT.DRAW_PART_END:
+        # Add custom content to the 4th button when the button itself was drawn
+        if dsc.id == 3:
+            # LV_IMG_DECLARE(img_star)
+            header = lv.img_header_t()
+            res = lv.img.decoder_get_info(img_star_argb, header)
+            if res != lv.RES.OK:
+                print("error when getting image header")
+                return
+            else:
+                a = lv.area_t()
+                a.x1 = dsc.draw_area.x1 + (dsc.draw_area.get_width() - header.w) // 2
+                a.x2 = a.x1 + header.w - 1
+                a.y1 = dsc.draw_area.y1 + (dsc.draw_area.get_height() - header.h) // 2
+                a.y2 = a.y1 + header.h - 1
+                img_draw_dsc = lv.draw_img_dsc_t()
+                img_draw_dsc.init()
+                img_draw_dsc.recolor = lv.color_black()
+                if obj.get_selected_btn() == dsc.id:
+                    img_draw_dsc.recolor_opa = lv.OPA._30
+
+                dsc.draw_ctx.img(img_draw_dsc, a, img_star_argb)
+
+#
+# Add custom drawer to the button matrix to c
+#
+btnm = lv.btnmatrix(lv.scr_act())
+btnm.add_event_cb(event_cb, lv.EVENT.ALL, None)
+btnm.center()
+

LVGL.Simulator/lvgl/examples/widgets/btnmatrix/lv_example_btnmatrix_3.c

@@ -0,0 +1,68 @@
+#include "../../lv_examples.h"
+#if LV_USE_BTNMATRIX  && LV_BUILD_EXAMPLES
+
+static void event_cb(lv_event_t * e)
+{
+    lv_obj_t * obj = lv_event_get_target(e);
+    uint32_t id = lv_btnmatrix_get_selected_btn(obj);
+    bool prev = id == 0 ? true : false;
+    bool next = id == 6 ? true : false;
+    if(prev || next) {
+        /*Find the checked button*/
+        uint32_t i;
+        for(i = 1; i < 7; i++) {
+            if(lv_btnmatrix_has_btn_ctrl(obj, i, LV_BTNMATRIX_CTRL_CHECKED)) break;
+        }
+
+        if(prev && i > 1) i--;
+        else if(next && i < 5) i++;
+
+        lv_btnmatrix_set_btn_ctrl(obj, i, LV_BTNMATRIX_CTRL_CHECKED);
+    }
+}
+
+/**
+ * Make a button group (pagination)
+ */
+void lv_example_btnmatrix_3(void)
+{
+    static lv_style_t style_bg;
+    lv_style_init(&style_bg);
+    lv_style_set_pad_all(&style_bg, 0);
+    lv_style_set_pad_gap(&style_bg, 0);
+    lv_style_set_clip_corner(&style_bg, true);
+    lv_style_set_radius(&style_bg, LV_RADIUS_CIRCLE);
+    lv_style_set_border_width(&style_bg, 0);
+
+
+    static lv_style_t style_btn;
+    lv_style_init(&style_btn);
+    lv_style_set_radius(&style_btn, 0);
+    lv_style_set_border_width(&style_btn, 1);
+    lv_style_set_border_opa(&style_btn, LV_OPA_50);
+    lv_style_set_border_color(&style_btn, lv_palette_main(LV_PALETTE_GREY));
+    lv_style_set_border_side(&style_btn, LV_BORDER_SIDE_INTERNAL);
+    lv_style_set_radius(&style_btn, 0);
+
+    static const char * map[] = {LV_SYMBOL_LEFT, "1", "2", "3", "4", "5", LV_SYMBOL_RIGHT, ""};
+
+    lv_obj_t * btnm = lv_btnmatrix_create(lv_scr_act());
+    lv_btnmatrix_set_map(btnm, map);
+    lv_obj_add_style(btnm, &style_bg, 0);
+    lv_obj_add_style(btnm, &style_btn, LV_PART_ITEMS);
+    lv_obj_add_event_cb(btnm, event_cb, LV_EVENT_VALUE_CHANGED, NULL);
+    lv_obj_set_size(btnm, 225, 35);
+
+    /*Allow selecting on one number at time*/
+    lv_btnmatrix_set_btn_ctrl_all(btnm, LV_BTNMATRIX_CTRL_CHECKABLE);
+    lv_btnmatrix_clear_btn_ctrl(btnm, 0, LV_BTNMATRIX_CTRL_CHECKABLE);
+    lv_btnmatrix_clear_btn_ctrl(btnm, 6, LV_BTNMATRIX_CTRL_CHECKABLE);
+
+    lv_btnmatrix_set_one_checked(btnm, true);
+    lv_btnmatrix_set_btn_ctrl(btnm, 1, LV_BTNMATRIX_CTRL_CHECKED);
+
+    lv_obj_center(btnm);
+
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/btnmatrix/lv_example_btnmatrix_3.py

@@ -0,0 +1,64 @@
+def event_cb(e):
+    obj = e.get_target()
+    id = obj.get_selected_btn()
+    if id == 0:
+        prev = True
+    else:
+        prev = False
+    if id == 6:
+        next = True
+    else:
+        next = False
+    if prev or next:
+        # Find the checked butto
+        for i in range(7):
+            if obj.has_btn_ctrl(i, lv.btnmatrix.CTRL.CHECKED):
+                break
+        if prev and i > 1:
+            i-=1
+        elif next and i < 5:
+            i+=1
+
+        obj.set_btn_ctrl(i, lv.btnmatrix.CTRL.CHECKED)
+
+#
+# Make a button group
+#
+
+style_bg = lv.style_t()
+style_bg.init()
+style_bg.set_pad_all(0)
+style_bg.set_pad_gap(0)
+style_bg.set_clip_corner(True)
+style_bg.set_radius(lv.RADIUS.CIRCLE)
+style_bg.set_border_width(0)
+
+
+style_btn = lv.style_t()
+style_btn.init()
+style_btn.set_radius(0)
+style_btn.set_border_width(1)
+style_btn.set_border_opa(lv.OPA._50)
+style_btn.set_border_color(lv.palette_main(lv.PALETTE.GREY))
+style_btn.set_border_side(lv.BORDER_SIDE.INTERNAL)
+style_btn.set_radius(0)
+
+map = [lv.SYMBOL.LEFT,"1","2", "3", "4", "5",lv.SYMBOL.RIGHT, ""]
+
+btnm = lv.btnmatrix(lv.scr_act())
+btnm.set_map(map)
+btnm.add_style(style_bg, 0)
+btnm.add_style(style_btn, lv.PART.ITEMS)
+btnm.add_event_cb(event_cb, lv.EVENT.VALUE_CHANGED, None)
+btnm.set_size(225, 35)
+
+# Allow selecting on one number at time
+btnm.set_btn_ctrl_all(lv.btnmatrix.CTRL.CHECKABLE)
+btnm.clear_btn_ctrl(0, lv.btnmatrix.CTRL.CHECKABLE)
+btnm.clear_btn_ctrl(6, lv.btnmatrix.CTRL.CHECKABLE)
+
+btnm.set_one_checked(True)
+btnm.set_btn_ctrl(1, lv.btnmatrix.CTRL.CHECKED)
+
+btnm.center()
+

LVGL.Simulator/lvgl/examples/widgets/calendar/index.rst

@@ -0,0 +1,7 @@
+
+Calendar with header
+""""""""""""""""""""""
+
+.. lv_example:: widgets/calendar/lv_example_calendar_1
+  :language: c
+

LVGL.Simulator/lvgl/examples/widgets/calendar/lv_example_calendar_1.c

@@ -0,0 +1,51 @@
+#include "../../lv_examples.h"
+#if LV_USE_CALENDAR && LV_BUILD_EXAMPLES
+
+static void event_handler(lv_event_t * e)
+{
+    lv_event_code_t code = lv_event_get_code(e);
+    lv_obj_t * obj = lv_event_get_current_target(e);
+
+    if(code == LV_EVENT_VALUE_CHANGED) {
+        lv_calendar_date_t date;
+        if(lv_calendar_get_pressed_date(obj, &date)) {
+            LV_LOG_USER("Clicked date: %02d.%02d.%d", date.day, date.month, date.year);
+        }
+    }
+}
+
+void lv_example_calendar_1(void)
+{
+    lv_obj_t  * calendar = lv_calendar_create(lv_scr_act());
+    lv_obj_set_size(calendar, 185, 185);
+    lv_obj_align(calendar, LV_ALIGN_CENTER, 0, 27);
+    lv_obj_add_event_cb(calendar, event_handler, LV_EVENT_ALL, NULL);
+
+    lv_calendar_set_today_date(calendar, 2021, 02, 23);
+    lv_calendar_set_showed_date(calendar, 2021, 02);
+
+    /*Highlight a few days*/
+    static lv_calendar_date_t highlighted_days[3];       /*Only its pointer will be saved so should be static*/
+    highlighted_days[0].year = 2021;
+    highlighted_days[0].month = 02;
+    highlighted_days[0].day = 6;
+
+    highlighted_days[1].year = 2021;
+    highlighted_days[1].month = 02;
+    highlighted_days[1].day = 11;
+
+    highlighted_days[2].year = 2022;
+    highlighted_days[2].month = 02;
+    highlighted_days[2].day = 22;
+
+    lv_calendar_set_highlighted_dates(calendar, highlighted_days, 3);
+
+#if LV_USE_CALENDAR_HEADER_DROPDOWN
+    lv_calendar_header_dropdown_create(calendar);
+#elif LV_USE_CALENDAR_HEADER_ARROW
+    lv_calendar_header_arrow_create(calendar);
+#endif
+    lv_calendar_set_showed_date(calendar, 2021, 10);
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/calendar/lv_example_calendar_1.py

@@ -0,0 +1,30 @@
+
+def event_handler(evt):
+    code = evt.get_code()
+
+    if code == lv.EVENT.VALUE_CHANGED:
+        source = evt.get_current_target()
+        date = lv.calendar_date_t()
+        if source.get_pressed_date(date) == lv.RES.OK:
+            calendar.set_today_date(date.year, date.month, date.day)
+            print("Clicked date: %02d.%02d.%02d"%(date.day, date.month, date.year))
+
+
+calendar = lv.calendar(lv.scr_act())
+calendar.set_size(200, 200)
+calendar.align(lv.ALIGN.CENTER, 0, 20)
+calendar.add_event_cb(event_handler, lv.EVENT.ALL, None)
+
+calendar.set_today_date(2021, 02, 23)
+calendar.set_showed_date(2021, 02)
+
+# Highlight a few days
+highlighted_days=[
+    lv.calendar_date_t({'year':2021, 'month':2, 'day':6}),
+    lv.calendar_date_t({'year':2021, 'month':2, 'day':11}),
+    lv.calendar_date_t({'year':2021, 'month':2, 'day':22})
+]
+
+calendar.set_highlighted_dates(highlighted_days, len(highlighted_days))
+
+lv.calendar_header_dropdown(calendar)

LVGL.Simulator/lvgl/examples/widgets/canvas/index.rst

@@ -0,0 +1,13 @@
+
+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
+

LVGL.Simulator/lvgl/examples/widgets/canvas/lv_example_canvas_1.c

@@ -0,0 +1,53 @@
+#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_HOR;
+    rect_dsc.bg_grad.stops[0].color = lv_palette_main(LV_PALETTE_RED);
+    rect_dsc.bg_grad.stops[1].color = lv_palette_main(LV_PALETTE_BLUE);
+    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_ofs_x = 5;
+    rect_dsc.shadow_ofs_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);
+
+    static lv_color_t cbuf[LV_CANVAS_BUF_SIZE_TRUE_COLOR(CANVAS_WIDTH, CANVAS_HEIGHT)];
+
+    lv_obj_t * canvas = lv_canvas_create(lv_scr_act());
+    lv_canvas_set_buffer(canvas, cbuf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_IMG_CF_TRUE_COLOR);
+    lv_obj_center(canvas);
+    lv_canvas_fill_bg(canvas, lv_palette_lighten(LV_PALETTE_GREY, 3), LV_OPA_COVER);
+
+    lv_canvas_draw_rect(canvas, 70, 60, 100, 70, &rect_dsc);
+
+    lv_canvas_draw_text(canvas, 40, 20, 100, &label_dsc, "Some text on text canvas");
+
+    /*Test the rotation. It requires another buffer where the original image is stored.
+     *So copy the current image to buffer and rotate it to the canvas*/
+    static lv_color_t cbuf_tmp[CANVAS_WIDTH * CANVAS_HEIGHT];
+    memcpy(cbuf_tmp, cbuf, sizeof(cbuf_tmp));
+    lv_img_dsc_t img;
+    img.data = (void *)cbuf_tmp;
+    img.header.cf = LV_IMG_CF_TRUE_COLOR;
+    img.header.w = CANVAS_WIDTH;
+    img.header.h = CANVAS_HEIGHT;
+
+    lv_canvas_fill_bg(canvas, lv_palette_lighten(LV_PALETTE_GREY, 3), LV_OPA_COVER);
+    lv_canvas_transform(canvas, &img, 120, LV_IMG_ZOOM_NONE, 0, 0, CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2, true);
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/canvas/lv_example_canvas_1.py

@@ -0,0 +1,43 @@
+_CANVAS_WIDTH = 200
+_CANVAS_HEIGHT = 150
+LV_IMG_ZOOM_NONE = 256
+
+rect_dsc = lv.draw_rect_dsc_t()
+rect_dsc.init()
+rect_dsc.radius = 10
+rect_dsc.bg_opa = lv.OPA.COVER
+rect_dsc.bg_grad.dir = lv.GRAD_DIR.HOR
+rect_dsc.bg_grad.stops[0].color = lv.palette_main(lv.PALETTE.RED)
+rect_dsc.bg_grad.stops[1].color = lv.palette_main(lv.PALETTE.BLUE)
+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_ofs_x = 5
+rect_dsc.shadow_ofs_y = 5
+
+label_dsc = lv.draw_label_dsc_t()
+label_dsc.init()
+label_dsc.color = lv.palette_main(lv.PALETTE.YELLOW)
+
+cbuf = bytearray(_CANVAS_WIDTH * _CANVAS_HEIGHT * 4)
+
+canvas = lv.canvas(lv.scr_act())
+canvas.set_buffer(cbuf, _CANVAS_WIDTH, _CANVAS_HEIGHT, lv.img.CF.TRUE_COLOR)
+canvas.center()
+canvas.fill_bg(lv.palette_lighten(lv.PALETTE.GREY, 3), lv.OPA.COVER)
+
+canvas.draw_rect(70, 60, 100, 70, rect_dsc)
+canvas.draw_text(40, 20, 100, label_dsc, "Some text on text canvas")
+
+# Test the rotation. It requires another buffer where the original image is stored.
+# So copy the current image to buffer and rotate it to the canvas
+
+img = lv.img_dsc_t()
+img.data = cbuf[:]
+img.header.cf = lv.img.CF.TRUE_COLOR
+img.header.w = _CANVAS_WIDTH
+img.header.h = _CANVAS_HEIGHT
+
+canvas.fill_bg(lv.palette_lighten(lv.PALETTE.GREY, 3), lv.OPA.COVER)
+canvas.transform(img, 30, LV_IMG_ZOOM_NONE, 0, 0, _CANVAS_WIDTH // 2, _CANVAS_HEIGHT // 2, True)

LVGL.Simulator/lvgl/examples/widgets/canvas/lv_example_canvas_2.c

@@ -0,0 +1,44 @@
+#include "../../lv_examples.h"
+#if LV_USE_CANVAS && LV_BUILD_EXAMPLES
+
+#define CANVAS_WIDTH  50
+#define CANVAS_HEIGHT  50
+
+/**
+ * Create a transparent canvas with Chroma keying and indexed color format (palette).
+ */
+void lv_example_canvas_2(void)
+{
+    /*Create a button to better see the transparency*/
+    lv_btn_create(lv_scr_act());
+
+    /*Create a buffer for the canvas*/
+    static lv_color_t cbuf[LV_CANVAS_BUF_SIZE_INDEXED_1BIT(CANVAS_WIDTH, CANVAS_HEIGHT)];
+
+    /*Create a canvas and initialize its palette*/
+    lv_obj_t * canvas = lv_canvas_create(lv_scr_act());
+    lv_canvas_set_buffer(canvas, cbuf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_IMG_CF_INDEXED_1BIT);
+    lv_canvas_set_palette(canvas, 0, LV_COLOR_CHROMA_KEY);
+    lv_canvas_set_palette(canvas, 1, lv_palette_main(LV_PALETTE_RED));
+
+    /*Create colors with the indices of the palette*/
+    lv_color_t c0;
+    lv_color_t c1;
+
+    c0.full = 0;
+    c1.full = 1;
+
+    /*Red background (There is no dedicated alpha channel in indexed images so LV_OPA_COVER is ignored)*/
+    lv_canvas_fill_bg(canvas, c1, LV_OPA_COVER);
+
+    /*Create hole on the canvas*/
+    uint32_t x;
+    uint32_t y;
+    for(y = 10; y < 30; y++) {
+        for(x = 5; x < 20; x++) {
+            lv_canvas_set_px_color(canvas, x, y, c0);
+        }
+    }
+
+}
+#endif

LVGL.Simulator/lvgl/examples/widgets/canvas/lv_example_canvas_2.py

@@ -0,0 +1,43 @@
+CANVAS_WIDTH   = 50
+CANVAS_HEIGHT  = 50
+LV_COLOR_CHROMA_KEY = lv.color_hex(0x00ff00)
+
+def LV_IMG_BUF_SIZE_ALPHA_1BIT(w, h):
+    return int(((w / 8) + 1) * h)
+
+def LV_IMG_BUF_SIZE_INDEXED_1BIT(w, h):
+    return LV_IMG_BUF_SIZE_ALPHA_1BIT(w, h) + 4 * 2
+
+def LV_CANVAS_BUF_SIZE_INDEXED_1BIT(w, h):
+    return LV_IMG_BUF_SIZE_INDEXED_1BIT(w, h)
+
+#
+# Create a transparent canvas with Chroma keying and indexed color format (palette).
+#
+
+# Create a button to better see the transparency
+btn=lv.btn(lv.scr_act())
+
+# Create a buffer for the canvas
+cbuf= bytearray(LV_CANVAS_BUF_SIZE_INDEXED_1BIT(CANVAS_WIDTH, CANVAS_HEIGHT))
+
+# Create a canvas and initialize its palette
+canvas = lv.canvas(lv.scr_act())
+canvas.set_buffer(cbuf, CANVAS_WIDTH, CANVAS_HEIGHT, lv.img.CF.INDEXED_1BIT)
+canvas.set_palette(0, LV_COLOR_CHROMA_KEY)
+canvas.set_palette(1, lv.palette_main(lv.PALETTE.RED))
+
+# Create colors with the indices of the palette
+c0 = lv.color_t()
+c1 = lv.color_t()
+
+c0.full = 0
+c1.full = 1
+
+# Red background (There is no dedicated alpha channel in indexed images so LV_OPA_COVER is ignored)
+canvas.fill_bg(c1, lv.OPA.COVER)
+
+# Create hole on the canvas
+for y in range(10,30):
+    for x in range(5,20):
+        canvas.set_px(x, y, c0)

LVGL.Simulator/lvgl/examples/widgets/chart/index.rst

@@ -0,0 +1,49 @@
+
+Line Chart
+""""""""""
+
+.. lv_example:: widgets/chart/lv_example_chart_1
+  :language: c
+
+
+Faded area line chart with custom division lines
+"""""""""""""""""""""""""""""""""""""""""""""""""""
+
+.. lv_example:: widgets/chart/lv_example_chart_2
+  :language: c
+
+Axis ticks and labels with scrolling
+""""""""""""""""""""""""""""""""""""
+
+.. lv_example:: widgets/chart/lv_example_chart_3
+  :language: c
+
+Show the value of the pressed points
+""""""""""""""""""""""""""""""""""""""
+
+.. lv_example:: widgets/chart/lv_example_chart_4
+  :language: c
+
+Display 1000 data points with zooming and scrolling
+""""""""""""""""""""""""""""""""""""""""""""""""""""
+
+.. lv_example:: widgets/chart/lv_example_chart_5
+  :language: c
+
+Show cursor on the clicked point
+"""""""""""""""""""""""""""""""""""
+
+.. lv_example:: widgets/chart/lv_example_chart_6
+  :language: c
+
+Scatter chart
+"""""""""""""""""""""""""""""""""""
+
+.. lv_example:: widgets/chart/lv_example_chart_7
+  :language: c
+
+Stacked area chart
+"""""""""""""""""""""""""""""""""""
+
+.. lv_example:: widgets/chart/lv_example_chart_8
+  :language:

LVGL.Simulator/lvgl/examples/widgets/chart/lv_example_chart_1.c

@@ -0,0 +1,44 @@
+#include "../../lv_examples.h"
+#if LV_USE_CHART && LV_BUILD_EXAMPLES
+
+void lv_example_chart_1(void)
+{
+    /*Create a chart*/
+    lv_obj_t * chart;
+    chart = lv_chart_create(lv_scr_act());
+    lv_obj_set_size(chart, 200, 150);
+    lv_obj_center(chart);
+    lv_chart_set_type(chart, LV_CHART_TYPE_LINE);   /*Show lines and points too*/
+
+    /*Add two data series*/
+    lv_chart_series_t * ser1 = lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_RED), LV_CHART_AXIS_PRIMARY_Y);
+    lv_chart_series_t * ser2 = lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_GREEN), LV_CHART_AXIS_SECONDARY_Y);
+
+    /*Set the next points on 'ser1'*/
+    lv_chart_set_next_value(chart, ser1, 10);
+    lv_chart_set_next_value(chart, ser1, 10);
+    lv_chart_set_next_value(chart, ser1, 10);
+    lv_chart_set_next_value(chart, ser1, 10);
+    lv_chart_set_next_value(chart, ser1, 10);
+    lv_chart_set_next_value(chart, ser1, 10);
+    lv_chart_set_next_value(chart, ser1, 10);
+    lv_chart_set_next_value(chart, ser1, 30);
+    lv_chart_set_next_value(chart, ser1, 70);
+    lv_chart_set_next_value(chart, ser1, 90);
+
+    /*Directly set points on 'ser2'*/
+    ser2->y_points[0] = 90;
+    ser2->y_points[1] = 70;
+    ser2->y_points[2] = 65;
+    ser2->y_points[3] = 65;
+    ser2->y_points[4] = 65;
+    ser2->y_points[5] = 65;
+    ser2->y_points[6] = 65;
+    ser2->y_points[7] = 65;
+    ser2->y_points[8] = 65;
+    ser2->y_points[9] = 65;
+
+    lv_chart_refresh(chart); /*Required after direct set*/
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/chart/lv_example_chart_1.py

@@ -0,0 +1,26 @@
+# Create a chart
+chart = lv.chart(lv.scr_act())
+chart.set_size(200, 150)
+chart.center()
+chart.set_type(lv.chart.TYPE.LINE)   # Show lines and points too
+
+# Add two data series
+ser1 = chart.add_series(lv.palette_main(lv.PALETTE.RED), lv.chart.AXIS.PRIMARY_Y)
+ser2 = chart.add_series(lv.palette_main(lv.PALETTE.GREEN), lv.chart.AXIS.SECONDARY_Y)
+print(ser2)
+# Set next points on ser1
+chart.set_next_value(ser1,10)
+chart.set_next_value(ser1,10)
+chart.set_next_value(ser1,10)
+chart.set_next_value(ser1,10)
+chart.set_next_value(ser1,10)
+chart.set_next_value(ser1,10)
+chart.set_next_value(ser1,10)
+chart.set_next_value(ser1,30)
+chart.set_next_value(ser1,70)
+chart.set_next_value(ser1,90)
+
+# Directly set points on 'ser2'
+ser2.y_points = [90, 70, 65, 65, 65, 65, 65, 65, 65, 65]
+chart.refresh()      #  Required after direct set
+

LVGL.Simulator/lvgl/examples/widgets/chart/lv_example_chart_2.c

@@ -0,0 +1,130 @@
+#include "../../lv_examples.h"
+#if LV_USE_CHART && LV_DRAW_COMPLEX && LV_BUILD_EXAMPLES
+
+static lv_obj_t * chart1;
+static lv_chart_series_t * ser1;
+static lv_chart_series_t * ser2;
+
+static void draw_event_cb(lv_event_t * e)
+{
+    lv_obj_t * obj = lv_event_get_target(e);
+
+    /*Add the faded area before the lines are drawn*/
+    lv_obj_draw_part_dsc_t * dsc = lv_event_get_draw_part_dsc(e);
+    if(dsc->part == LV_PART_ITEMS) {
+        if(!dsc->p1 || !dsc->p2) return;
+
+        /*Add a line mask that keeps the area below the line*/
+        lv_draw_mask_line_param_t line_mask_param;
+        lv_draw_mask_line_points_init(&line_mask_param, dsc->p1->x, dsc->p1->y, dsc->p2->x, dsc->p2->y,
+                                      LV_DRAW_MASK_LINE_SIDE_BOTTOM);
+        int16_t line_mask_id = lv_draw_mask_add(&line_mask_param, NULL);
+
+        /*Add a fade effect: transparent bottom covering top*/
+        lv_coord_t h = lv_obj_get_height(obj);
+        lv_draw_mask_fade_param_t fade_mask_param;
+        lv_draw_mask_fade_init(&fade_mask_param, &obj->coords, LV_OPA_COVER, obj->coords.y1 + h / 8, LV_OPA_TRANSP,
+                               obj->coords.y2);
+        int16_t fade_mask_id = lv_draw_mask_add(&fade_mask_param, NULL);
+
+        /*Draw a rectangle that will be affected by the mask*/
+        lv_draw_rect_dsc_t draw_rect_dsc;
+        lv_draw_rect_dsc_init(&draw_rect_dsc);
+        draw_rect_dsc.bg_opa = LV_OPA_20;
+        draw_rect_dsc.bg_color = dsc->line_dsc->color;
+
+        lv_area_t a;
+        a.x1 = dsc->p1->x;
+        a.x2 = dsc->p2->x - 1;
+        a.y1 = LV_MIN(dsc->p1->y, dsc->p2->y);
+        a.y2 = obj->coords.y2;
+        lv_draw_rect(dsc->draw_ctx, &draw_rect_dsc, &a);
+
+        /*Remove the masks*/
+        lv_draw_mask_free_param(&line_mask_param);
+        lv_draw_mask_free_param(&fade_mask_param);
+        lv_draw_mask_remove_id(line_mask_id);
+        lv_draw_mask_remove_id(fade_mask_id);
+    }
+    /*Hook the division lines too*/
+    else if(dsc->part == LV_PART_MAIN) {
+        if(dsc->line_dsc == NULL || dsc->p1 == NULL || dsc->p2 == NULL) return;
+
+        /*Vertical line*/
+        if(dsc->p1->x == dsc->p2->x) {
+            dsc->line_dsc->color  = lv_palette_lighten(LV_PALETTE_GREY, 1);
+            if(dsc->id == 3) {
+                dsc->line_dsc->width  = 2;
+                dsc->line_dsc->dash_gap  = 0;
+                dsc->line_dsc->dash_width  = 0;
+            }
+            else {
+                dsc->line_dsc->width = 1;
+                dsc->line_dsc->dash_gap  = 6;
+                dsc->line_dsc->dash_width  = 6;
+            }
+        }
+        /*Horizontal line*/
+        else {
+            if(dsc->id == 2) {
+                dsc->line_dsc->width  = 2;
+                dsc->line_dsc->dash_gap  = 0;
+                dsc->line_dsc->dash_width  = 0;
+            }
+            else {
+                dsc->line_dsc->width = 2;
+                dsc->line_dsc->dash_gap  = 6;
+                dsc->line_dsc->dash_width  = 6;
+            }
+
+            if(dsc->id == 1  || dsc->id == 3) {
+                dsc->line_dsc->color  = lv_palette_main(LV_PALETTE_GREEN);
+            }
+            else {
+                dsc->line_dsc->color  = lv_palette_lighten(LV_PALETTE_GREY, 1);
+            }
+        }
+    }
+}
+
+static void add_data(lv_timer_t * timer)
+{
+    LV_UNUSED(timer);
+    static uint32_t cnt = 0;
+    lv_chart_set_next_value(chart1, ser1, lv_rand(20, 90));
+
+    if(cnt % 4 == 0) lv_chart_set_next_value(chart1, ser2, lv_rand(40, 60));
+
+    cnt++;
+}
+
+/**
+ * Add a faded area effect to the line chart and make some division lines ticker
+ */
+void lv_example_chart_2(void)
+{
+    /*Create a chart1*/
+    chart1 = lv_chart_create(lv_scr_act());
+    lv_obj_set_size(chart1, 200, 150);
+    lv_obj_center(chart1);
+    lv_chart_set_type(chart1, LV_CHART_TYPE_LINE);   /*Show lines and points too*/
+
+    lv_chart_set_div_line_count(chart1, 5, 7);
+
+    lv_obj_add_event_cb(chart1, draw_event_cb, LV_EVENT_DRAW_PART_BEGIN, NULL);
+    lv_chart_set_update_mode(chart1, LV_CHART_UPDATE_MODE_CIRCULAR);
+
+    /*Add two data series*/
+    ser1 = lv_chart_add_series(chart1, lv_palette_main(LV_PALETTE_RED), LV_CHART_AXIS_PRIMARY_Y);
+    ser2 = lv_chart_add_series(chart1, lv_palette_main(LV_PALETTE_BLUE), LV_CHART_AXIS_SECONDARY_Y);
+
+    uint32_t i;
+    for(i = 0; i < 10; i++) {
+        lv_chart_set_next_value(chart1, ser1, lv_rand(20, 90));
+        lv_chart_set_next_value(chart1, ser2, lv_rand(30, 70));
+    }
+
+    lv_timer_create(add_data, 200, NULL);
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/chart/lv_example_chart_2.py

@@ -0,0 +1,76 @@
+def draw_event_cb(e):
+
+    obj = e.get_target()
+
+    # Add the faded area before the lines are drawn
+    dsc = lv.obj_draw_part_dsc_t.__cast__(e.get_param())
+    if dsc.part != lv.PART.ITEMS:
+        return
+    if not dsc.p1 or not dsc.p2:
+        return
+
+    # Add a line mask that keeps the area below the line
+    line_mask_param = lv.draw_mask_line_param_t()
+    line_mask_param.points_init(dsc.p1.x, dsc.p1.y, dsc.p2.x, dsc.p2.y, lv.DRAW_MASK_LINE_SIDE.BOTTOM)
+    # line_mask_id = line_mask_param.draw_mask_add(None)
+    line_mask_id = lv.draw_mask_add(line_mask_param, None)
+    # Add a fade effect: transparent bottom covering top
+    h = obj.get_height()
+    fade_mask_param = lv.draw_mask_fade_param_t()
+    coords = lv.area_t()
+    obj.get_coords(coords)
+    fade_mask_param.init(coords, lv.OPA.COVER, coords.y1 + h // 8, lv.OPA.TRANSP,coords.y2)
+    fade_mask_id = lv.draw_mask_add(fade_mask_param,None)
+
+    # Draw a rectangle that will be affected by the mask
+    draw_rect_dsc = lv.draw_rect_dsc_t()
+    draw_rect_dsc.init()
+    draw_rect_dsc.bg_opa = lv.OPA._20
+    draw_rect_dsc.bg_color = dsc.line_dsc.color
+
+    a = lv.area_t()
+    a.x1 = dsc.p1.x
+    a.x2 = dsc.p2.x - 1
+    a.y1 = min(dsc.p1.y, dsc.p2.y)
+    coords = lv.area_t()
+    obj.get_coords(coords)
+    a.y2 = coords.y2
+    dsc.draw_ctx.rect(draw_rect_dsc, a)
+
+    # Remove the masks
+    lv.draw_mask_remove_id(line_mask_id)
+    lv.draw_mask_remove_id(fade_mask_id)
+
+
+def add_data(timer):
+    # LV_UNUSED(timer);
+    cnt = 0
+    chart1.set_next_value(ser1, lv.rand(20, 90))
+
+    if cnt % 4 == 0:
+        chart1.set_next_value(ser2, lv.rand(40, 60))
+
+    cnt +=1
+
+#
+# Add a faded area effect to the line chart
+#
+
+# Create a chart1
+chart1 = lv.chart(lv.scr_act())
+chart1.set_size(200, 150)
+chart1.center()
+chart1.set_type(lv.chart.TYPE.LINE)    # Show lines and points too
+
+chart1.add_event_cb(draw_event_cb, lv.EVENT.DRAW_PART_BEGIN, None)
+chart1.set_update_mode(lv.chart.UPDATE_MODE.CIRCULAR)
+
+# Add two data series
+ser1 = chart1.add_series(lv.palette_main(lv.PALETTE.RED), lv.chart.AXIS.PRIMARY_Y)
+ser2 = chart1.add_series(lv.palette_main(lv.PALETTE.BLUE), lv.chart.AXIS.SECONDARY_Y)
+
+for i in range(10):
+    chart1.set_next_value(ser1, lv.rand(20, 90))
+    chart1.set_next_value(ser2, lv.rand(30, 70))
+
+timer = lv.timer_create(add_data, 200, None)

LVGL.Simulator/lvgl/examples/widgets/chart/lv_example_chart_3.c

@@ -0,0 +1,76 @@
+#include "../../lv_examples.h"
+#if LV_USE_CHART && LV_BUILD_EXAMPLES
+
+static void draw_event_cb(lv_event_t * e)
+{
+    lv_obj_draw_part_dsc_t * dsc = lv_event_get_draw_part_dsc(e);
+    if(!lv_obj_draw_part_check_type(dsc, &lv_chart_class, LV_CHART_DRAW_PART_TICK_LABEL)) return;
+
+    if(dsc->id == LV_CHART_AXIS_PRIMARY_X && dsc->text) {
+        const char * month[] = {"Jan", "Febr", "March", "Apr", "May", "Jun", "July", "Aug", "Sept", "Oct", "Nov", "Dec"};
+        lv_snprintf(dsc->text, dsc->text_length, "%s", month[dsc->value]);
+    }
+}
+
+/**
+ * Add ticks and labels to the axis and demonstrate scrolling
+ */
+void lv_example_chart_3(void)
+{
+    /*Create a chart*/
+    lv_obj_t * chart;
+    chart = lv_chart_create(lv_scr_act());
+    lv_obj_set_size(chart, 200, 150);
+    lv_obj_center(chart);
+    lv_chart_set_type(chart, LV_CHART_TYPE_BAR);
+    lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, 0, 100);
+    lv_chart_set_range(chart, LV_CHART_AXIS_SECONDARY_Y, 0, 400);
+    lv_chart_set_point_count(chart, 12);
+    lv_obj_add_event_cb(chart, draw_event_cb, LV_EVENT_DRAW_PART_BEGIN, NULL);
+
+    /*Add ticks and label to every axis*/
+    lv_chart_set_axis_tick(chart, LV_CHART_AXIS_PRIMARY_X, 10, 5, 12, 3, true, 40);
+    lv_chart_set_axis_tick(chart, LV_CHART_AXIS_PRIMARY_Y, 10, 5, 6, 2, true, 50);
+    lv_chart_set_axis_tick(chart, LV_CHART_AXIS_SECONDARY_Y, 10, 5, 3, 4, true, 50);
+
+    /*Zoom in a little in X*/
+    lv_chart_set_zoom_x(chart, 800);
+
+    /*Add two data series*/
+    lv_chart_series_t * ser1 = lv_chart_add_series(chart, lv_palette_lighten(LV_PALETTE_GREEN, 2), LV_CHART_AXIS_PRIMARY_Y);
+    lv_chart_series_t * ser2 = lv_chart_add_series(chart, lv_palette_darken(LV_PALETTE_GREEN, 2),
+                                                   LV_CHART_AXIS_SECONDARY_Y);
+
+    /*Set the next points on 'ser1'*/
+    lv_chart_set_next_value(chart, ser1, 31);
+    lv_chart_set_next_value(chart, ser1, 66);
+    lv_chart_set_next_value(chart, ser1, 10);
+    lv_chart_set_next_value(chart, ser1, 89);
+    lv_chart_set_next_value(chart, ser1, 63);
+    lv_chart_set_next_value(chart, ser1, 56);
+    lv_chart_set_next_value(chart, ser1, 32);
+    lv_chart_set_next_value(chart, ser1, 35);
+    lv_chart_set_next_value(chart, ser1, 57);
+    lv_chart_set_next_value(chart, ser1, 85);
+    lv_chart_set_next_value(chart, ser1, 22);
+    lv_chart_set_next_value(chart, ser1, 58);
+
+    lv_coord_t * ser2_array = lv_chart_get_y_array(chart, ser2);
+    /*Directly set points on 'ser2'*/
+    ser2_array[0] = 92;
+    ser2_array[1] = 71;
+    ser2_array[2] = 61;
+    ser2_array[3] = 15;
+    ser2_array[4] = 21;
+    ser2_array[5] = 35;
+    ser2_array[6] = 35;
+    ser2_array[7] = 58;
+    ser2_array[8] = 31;
+    ser2_array[9] = 53;
+    ser2_array[10] = 33;
+    ser2_array[11] = 73;
+
+    lv_chart_refresh(chart); /*Required after direct set*/
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/chart/lv_example_chart_3.py

@@ -0,0 +1,52 @@
+def draw_event_cb(e):
+
+    dsc = lv.obj_draw_part_dsc_t.__cast__(e.get_param())
+    if dsc.part == lv.PART.TICKS and dsc.id == lv.chart.AXIS.PRIMARY_X:
+        month = ["Jan", "Febr", "March", "Apr", "May", "Jun", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]
+        # dsc.text is defined char text[16], I must therefore convert the Python string to a byte_array
+        dsc.text = bytes(month[dsc.value],"ascii")
+#
+# Add ticks and labels to the axis and demonstrate scrolling
+#
+
+# Create a chart
+chart = lv.chart(lv.scr_act())
+chart.set_size(200, 150)
+chart.center()
+chart.set_type(lv.chart.TYPE.BAR)
+chart.set_range(lv.chart.AXIS.PRIMARY_Y, 0, 100)
+chart.set_range(lv.chart.AXIS.SECONDARY_Y, 0, 400)
+chart.set_point_count(12)
+chart.add_event_cb(draw_event_cb, lv.EVENT.DRAW_PART_BEGIN, None)
+
+# Add ticks and label to every axis
+chart.set_axis_tick(lv.chart.AXIS.PRIMARY_X, 10, 5, 12, 3, True, 40)
+chart.set_axis_tick(lv.chart.AXIS.PRIMARY_Y, 10, 5, 6, 2, True, 50)
+chart.set_axis_tick(lv.chart.AXIS.SECONDARY_Y, 10, 5, 3, 4,True, 50)
+
+# Zoom in a little in X
+chart.set_zoom_x(800)
+
+# Add two data series
+ser1 = lv.chart.add_series(chart, lv.palette_lighten(lv.PALETTE.GREEN, 2), lv.chart.AXIS.PRIMARY_Y)
+ser2 = lv.chart.add_series(chart, lv.palette_darken(lv.PALETTE.GREEN, 2), lv.chart.AXIS.SECONDARY_Y)
+
+# Set the next points on 'ser1'
+chart.set_next_value(ser1, 31)
+chart.set_next_value(ser1, 66)
+chart.set_next_value(ser1, 10)
+chart.set_next_value(ser1, 89)
+chart.set_next_value(ser1, 63)
+chart.set_next_value(ser1, 56)
+chart.set_next_value(ser1, 32)
+chart.set_next_value(ser1, 35)
+chart.set_next_value(ser1, 57)
+chart.set_next_value(ser1, 85)
+chart.set_next_value(ser1, 22)
+chart.set_next_value(ser1, 58)
+
+# Directly set points on 'ser2'
+ser2.y_points = [92,71,61,15,21,35,35,58,31,53,33,73]
+
+chart.refresh()  # Required after direct set
+

LVGL.Simulator/lvgl/examples/widgets/chart/lv_example_chart_4.c

@@ -0,0 +1,86 @@
+#include "../../lv_examples.h"
+#if LV_USE_CHART && LV_BUILD_EXAMPLES
+
+
+static void event_cb(lv_event_t * e)
+{
+    lv_event_code_t code = lv_event_get_code(e);
+    lv_obj_t * chart = lv_event_get_target(e);
+
+    if(code == LV_EVENT_VALUE_CHANGED) {
+        lv_obj_invalidate(chart);
+    }
+    if(code == LV_EVENT_REFR_EXT_DRAW_SIZE) {
+        lv_coord_t * s = lv_event_get_param(e);
+        *s = LV_MAX(*s, 20);
+    }
+    else if(code == LV_EVENT_DRAW_POST_END) {
+        int32_t id = lv_chart_get_pressed_point(chart);
+        if(id == LV_CHART_POINT_NONE) return;
+
+        LV_LOG_USER("Selected point %d", (int)id);
+
+        lv_chart_series_t * ser = lv_chart_get_series_next(chart, NULL);
+        while(ser) {
+            lv_point_t p;
+            lv_chart_get_point_pos_by_id(chart, ser, id, &p);
+
+            lv_coord_t * y_array = lv_chart_get_y_array(chart, ser);
+            lv_coord_t value = y_array[id];
+
+            char buf[16];
+            lv_snprintf(buf, sizeof(buf), LV_SYMBOL_DUMMY"$%d", value);
+
+            lv_draw_rect_dsc_t draw_rect_dsc;
+            lv_draw_rect_dsc_init(&draw_rect_dsc);
+            draw_rect_dsc.bg_color = lv_color_black();
+            draw_rect_dsc.bg_opa = LV_OPA_50;
+            draw_rect_dsc.radius = 3;
+            draw_rect_dsc.bg_img_src = buf;
+            draw_rect_dsc.bg_img_recolor = lv_color_white();
+
+            lv_area_t a;
+            a.x1 = chart->coords.x1 + p.x - 20;
+            a.x2 = chart->coords.x1 + p.x + 20;
+            a.y1 = chart->coords.y1 + p.y - 30;
+            a.y2 = chart->coords.y1 + p.y - 10;
+
+            lv_draw_ctx_t * draw_ctx = lv_event_get_draw_ctx(e);
+            lv_draw_rect(draw_ctx, &draw_rect_dsc, &a);
+
+            ser = lv_chart_get_series_next(chart, ser);
+        }
+    }
+    else if(code == LV_EVENT_RELEASED) {
+        lv_obj_invalidate(chart);
+    }
+}
+
+/**
+ * Show the value of the pressed points
+ */
+void lv_example_chart_4(void)
+{
+    /*Create a chart*/
+    lv_obj_t * chart;
+    chart = lv_chart_create(lv_scr_act());
+    lv_obj_set_size(chart, 200, 150);
+    lv_obj_center(chart);
+
+    lv_obj_add_event_cb(chart, event_cb, LV_EVENT_ALL, NULL);
+    lv_obj_refresh_ext_draw_size(chart);
+
+    /*Zoom in a little in X*/
+    lv_chart_set_zoom_x(chart, 800);
+
+    /*Add two data series*/
+    lv_chart_series_t * ser1 = lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_RED), LV_CHART_AXIS_PRIMARY_Y);
+    lv_chart_series_t * ser2 = lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_GREEN), LV_CHART_AXIS_PRIMARY_Y);
+    uint32_t i;
+    for(i = 0; i < 10; i++) {
+        lv_chart_set_next_value(chart, ser1, lv_rand(60, 90));
+        lv_chart_set_next_value(chart, ser2, lv_rand(10, 40));
+    }
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/chart/lv_example_chart_4.py

@@ -0,0 +1,73 @@
+def event_cb(e):
+    code = e.get_code()
+    chart = e.get_target()
+
+    if code == lv.EVENT.VALUE_CHANGED:
+        chart.invalidate()
+
+    if code == lv.EVENT.REFR_EXT_DRAW_SIZE:
+        e.set_ext_draw_size(20)
+
+    elif code == lv.EVENT.DRAW_POST_END:
+        id = lv.chart.get_pressed_point(chart)
+        if id == lv.CHART_POINT.NONE:
+            return
+        # print("Selected point ", id)
+        for i in range(len(series)):
+            p = lv.point_t()
+            chart.get_point_pos_by_id(series[i], id, p)
+            value = series_points[i][id]
+            buf = lv.SYMBOL.DUMMY + "$" + str(value)
+
+            draw_rect_dsc = lv.draw_rect_dsc_t()
+            draw_rect_dsc.init()
+            draw_rect_dsc.bg_color = lv.color_black()
+            draw_rect_dsc.bg_opa = lv.OPA._50
+            draw_rect_dsc.radius = 3
+            draw_rect_dsc.bg_img_src = buf
+            draw_rect_dsc.bg_img_recolor = lv.color_white()
+
+            a = lv.area_t()
+            coords = lv.area_t()
+            chart.get_coords(coords)
+            a.x1 = coords.x1 + p.x - 20
+            a.x2 = coords.x1 + p.x + 20
+            a.y1 = coords.y1 + p.y - 30
+            a.y2 = coords.y1 + p.y - 10
+
+            clip_area = lv.area_t.__cast__(e.get_param())
+            lv.draw_rect(a, clip_area, draw_rect_dsc)
+
+    elif code == lv.EVENT.RELEASED:
+        chart.invalidate()
+
+#
+# Add ticks and labels to the axis and demonstrate scrolling
+#
+
+# Create a chart
+chart = lv.chart(lv.scr_act())
+chart.set_size(200, 150)
+chart.center()
+
+chart.add_event_cb(event_cb, lv.EVENT.ALL, None)
+chart.refresh_ext_draw_size()
+
+# Zoom in a little in X
+chart.set_zoom_x(800)
+
+# Add two data series
+ser1 = chart.add_series(lv.palette_main(lv.PALETTE.RED), lv.chart.AXIS.PRIMARY_Y)
+ser2 = chart.add_series(lv.palette_main(lv.PALETTE.GREEN), lv.chart.AXIS.PRIMARY_Y)
+
+ser1_p = []
+ser2_p = []
+for i in range(10):
+    ser1_p.append(lv.rand(60,90))
+    ser2_p.append(lv.rand(10,40))
+ser1.y_points = ser1_p
+ser2.y_points = ser2_p
+
+series = [ser1,ser2]
+series_points=[ser1_p,ser2_p]
+

LVGL.Simulator/lvgl/examples/widgets/chart/lv_example_chart_5.c

@@ -0,0 +1,99 @@
+#include "../../lv_examples.h"
+#if LV_USE_CHART && LV_USE_SLIDER && LV_BUILD_EXAMPLES
+
+static lv_obj_t * chart;
+/* Source: https://github.com/ankur219/ECG-Arrhythmia-classification/blob/642230149583adfae1e4bd26c6f0e1fd8af2be0e/sample.csv*/
+static const lv_coord_t ecg_sample[] = {
+    -2, 2, 0, -15, -39, -63, -71, -68, -67, -69, -84, -95, -104, -107, -108, -107, -107, -107, -107, -114, -118, -117,
+        -112, -100, -89, -83, -71, -64, -58, -58, -62, -62, -58, -51, -46, -39, -27, -10, 4, 7, 1, -3, 0, 14, 24, 30, 25, 19,
+        13, 7, 12, 15, 18, 21, 13, 6, 9, 8, 17, 19, 13, 11, 11, 11, 23, 30, 37, 34, 25, 14, 15, 19, 28, 31, 26, 23, 25, 31,
+        39, 37, 37, 34, 30, 32, 22, 29, 31, 33, 37, 23, 13, 7, 2, 4, -2, 2, 11, 22, 33, 19, -1, -27, -55, -67, -72, -71, -63,
+        -49, -18, 35, 113, 230, 369, 525, 651, 722, 730, 667, 563, 454, 357, 305, 288, 274, 255, 212, 173, 143, 117, 82, 39,
+        -13, -53, -78, -91, -101, -113, -124, -131, -131, -131, -129, -128, -129, -125, -123, -123, -129, -139, -148, -153,
+        -159, -166, -183, -205, -227, -243, -248, -246, -254, -280, -327, -381, -429, -473, -517, -556, -592, -612, -620,
+        -620, -614, -604, -591, -574, -540, -497, -441, -389, -358, -336, -313, -284, -222, -167, -114, -70, -47, -28, -4, 12,
+        38, 52, 58, 56, 56, 57, 68, 77, 86, 86, 80, 69, 67, 70, 82, 85, 89, 90, 89, 89, 88, 91, 96, 97, 91, 83, 78, 82, 88, 95,
+        96, 105, 106, 110, 102, 100, 96, 98, 97, 101, 98, 99, 100, 107, 113, 119, 115, 110, 96, 85, 73, 64, 69, 76, 79,
+        78, 75, 85, 100, 114, 113, 105, 96, 84, 74, 66, 60, 75, 85, 89, 83, 67, 61, 67, 73, 79, 74, 63, 57, 56, 58, 61, 55,
+        48, 45, 46, 55, 62, 55, 49, 43, 50, 59, 63, 57, 40, 31, 23, 25, 27, 31, 35, 34, 30, 36, 34, 42, 38, 36, 40, 46, 50,
+        47, 32, 30, 32, 52, 67, 73, 71, 63, 54, 53, 45, 41, 28, 13, 3, 1, 4, 4, -8, -23, -32, -31, -19, -5, 3, 9, 13, 19,
+        24, 27, 29, 25, 22, 26, 32, 42, 51, 56, 60, 57, 55, 53, 53, 54, 59, 54, 49, 26, -3, -11, -20, -47, -100, -194, -236,
+        -212, -123, 8, 103, 142, 147, 120, 105, 98, 93, 81, 61, 40, 26, 28, 30, 30, 27, 19, 17, 21, 20, 19, 19, 22, 36, 40,
+        35, 20, 7, 1, 10, 18, 27, 22, 6, -4, -2, 3, 6, -2, -13, -14, -10, -2, 3, 2, -1, -5, -10, -19, -32, -42, -55, -60,
+        -68, -77, -86, -101, -110, -117, -115, -104, -92, -84, -85, -84, -73, -65, -52, -50, -45, -35, -20, -3, 12, 20, 25,
+        26, 28, 28, 30, 28, 25, 28, 33, 42, 42, 36, 23, 9, 0, 1, -4, 1, -4, -4, 1, 5, 9, 9, -3, -1, -18, -50, -108, -190,
+        -272, -340, -408, -446, -537, -643, -777, -894, -920, -853, -697, -461, -251, -60, 58, 103, 129, 139, 155, 170, 173,
+        178, 185, 190, 193, 200, 208, 215, 225, 224, 232, 234, 240, 240, 236, 229, 226, 224, 232, 233, 232, 224, 219, 219,
+        223, 231, 226, 223, 219, 218, 223, 223, 223, 233, 245, 268, 286, 296, 295, 283, 271, 263, 252, 243, 226, 210, 197,
+        186, 171, 152, 133, 117, 114, 110, 107, 96, 80, 63, 48, 40, 38, 34, 28, 15, 2, -7, -11, -14, -18, -29, -37, -44, -50,
+        -58, -63, -61, -52, -50, -48, -61, -59, -58, -54, -47, -52, -62, -61, -64, -54, -52, -59, -69, -76, -76, -69, -67,
+        -74, -78, -81, -80, -73, -65, -57, -53, -51, -47, -35, -27, -22, -22, -24, -21, -17, -13, -10, -11, -13, -20, -20,
+        -12, -2, 7, -1, -12, -16, -13, -2, 2, -4, -5, -2, 9, 19, 19, 14, 11, 13, 19, 21, 20, 18, 19, 19, 19, 16, 15, 13, 14,
+        9, 3, -5, -9, -5, -3, -2, -3, -3, 2, 8, 9, 9, 5, 6, 8, 8, 7, 4, 3, 4, 5, 3, 5, 5, 13, 13, 12, 10, 10, 15, 22, 17,
+        14, 7, 10, 15, 16, 11, 12, 10, 13, 9, -2, -4, -2, 7, 16, 16, 17, 16, 7, -1, -16, -18, -16, -9, -4, -5, -10, -9, -8,
+        -3, -4, -10, -19, -20, -16, -9, -9, -23, -40, -48, -43, -33, -19, -21, -26, -31, -33, -19, 0, 17, 24, 9, -17, -47,
+        -63, -67, -59, -52, -51, -50, -49, -42, -26, -21, -15, -20, -23, -22, -19, -12, -8, 5, 18, 27, 32, 26, 25, 26, 22,
+        23, 17, 14, 17, 21, 25, 2, -45, -121, -196, -226, -200, -118, -9, 73, 126, 131, 114, 87, 60, 42, 29, 26, 34, 35, 34,
+        25, 12, 9, 7, 3, 2, -8, -11, 2, 23, 38, 41, 23, 9, 10, 13, 16, 8, -8, -17, -23, -26, -25, -21, -15, -10, -13, -13,
+        -19, -22, -29, -40, -48, -48, -54, -55, -66, -82, -85, -90, -92, -98, -114, -119, -124, -129, -132, -146, -146, -138,
+        -124, -99, -85, -72, -65, -65, -65, -66, -63, -64, -64, -58, -46, -26, -9, 2, 2, 4, 0, 1, 4, 3, 10, 11, 10, 2, -4,
+        0, 10, 18, 20, 6, 2, -9, -7, -3, -3, -2, -7, -12, -5, 5, 24, 36, 31, 25, 6, 3, 7, 12, 17, 11, 0, -6, -9, -8, -7, -5,
+        -6, -2, -2, -6, -2, 2, 14, 24, 22, 15, 8, 4, 6, 7, 12, 16, 25, 20, 7, -16, -41, -60, -67, -65, -54, -35, -11, 30,
+        84, 175, 302, 455, 603, 707, 743, 714, 625, 519, 414, 337, 300, 281, 263, 239, 197, 163, 136, 109, 77, 34, -18, -50,
+        -66, -74, -79, -92, -107, -117, -127, -129, -135, -139, -141, -155, -159, -167, -171, -169, -174, -175, -178, -191,
+        -202, -223, -235, -243, -237, -240, -256, -298, -345, -393, -432, -475, -518, -565, -596, -619, -623, -623, -614,
+        -599, -583, -559, -524, -477, -425, -383, -357, -331, -301, -252, -198, -143, -96, -57, -29, -8, 10, 31, 45, 60, 65,
+        70, 74, 76, 79, 82, 79, 75, 62,
+    };
+
+static void slider_x_event_cb(lv_event_t * e)
+{
+    lv_obj_t * obj = lv_event_get_target(e);
+    int32_t v = lv_slider_get_value(obj);
+    lv_chart_set_zoom_x(chart, v);
+}
+
+static void slider_y_event_cb(lv_event_t * e)
+{
+    lv_obj_t * obj = lv_event_get_target(e);
+    int32_t v = lv_slider_get_value(obj);
+    lv_chart_set_zoom_y(chart, v);
+}
+
+/**
+ * Display 1000 data points with zooming and scrolling.
+ * See how the chart changes drawing mode (draw only vertical lines) when
+ * the points get too crowded.
+ */
+void lv_example_chart_5(void)
+{
+    /*Create a chart*/
+    chart = lv_chart_create(lv_scr_act());
+    lv_obj_set_size(chart, 200, 150);
+    lv_obj_align(chart, LV_ALIGN_CENTER, -30, -30);
+    lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, -1000, 1000);
+
+    /*Do not display points on the data*/
+    lv_obj_set_style_size(chart, 0, LV_PART_INDICATOR);
+
+    lv_chart_series_t * ser = lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_RED), LV_CHART_AXIS_PRIMARY_Y);
+
+    uint32_t pcnt = sizeof(ecg_sample) / sizeof(ecg_sample[0]);
+    lv_chart_set_point_count(chart, pcnt);
+    lv_chart_set_ext_y_array(chart, ser, (lv_coord_t *)ecg_sample);
+
+    lv_obj_t * slider;
+    slider = lv_slider_create(lv_scr_act());
+    lv_slider_set_range(slider, LV_IMG_ZOOM_NONE, LV_IMG_ZOOM_NONE * 10);
+    lv_obj_add_event_cb(slider, slider_x_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
+    lv_obj_set_size(slider, 200, 10);
+    lv_obj_align_to(slider, chart, LV_ALIGN_OUT_BOTTOM_MID, 0, 20);
+
+    slider = lv_slider_create(lv_scr_act());
+    lv_slider_set_range(slider, LV_IMG_ZOOM_NONE, LV_IMG_ZOOM_NONE * 10);
+    lv_obj_add_event_cb(slider, slider_y_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
+    lv_obj_set_size(slider, 10, 150);
+    lv_obj_align_to(slider, chart, LV_ALIGN_OUT_RIGHT_MID, 20, 0);
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/chart/lv_example_chart_5.py

@@ -0,0 +1,89 @@
+# Source: https://github.com/ankur219/ECG-Arrhythmia-classification/blob/642230149583adfae1e4bd26c6f0e1fd8af2be0e/sample.csv
+ecg_sample = [
+    -2, 2, 0, -15, -39, -63, -71, -68, -67, -69, -84, -95, -104, -107, -108, -107, -107, -107, -107, -114, -118, -117,
+    -112, -100, -89, -83, -71, -64, -58, -58, -62, -62, -58, -51, -46, -39, -27, -10, 4, 7, 1, -3, 0, 14, 24, 30, 25, 19,
+    13, 7, 12, 15, 18, 21, 13, 6, 9, 8, 17, 19, 13, 11, 11, 11, 23, 30, 37, 34, 25, 14, 15, 19, 28, 31, 26, 23, 25, 31,
+    39, 37, 37, 34, 30, 32, 22, 29, 31, 33, 37, 23, 13, 7, 2, 4, -2, 2, 11, 22, 33, 19, -1, -27, -55, -67, -72, -71, -63,
+    -49, -18, 35, 113, 230, 369, 525, 651, 722, 730, 667, 563, 454, 357, 305, 288, 274, 255, 212, 173, 143, 117, 82, 39,
+    -13, -53, -78, -91, -101, -113, -124, -131, -131, -131, -129, -128, -129, -125, -123, -123, -129, -139, -148, -153,
+    -159, -166, -183, -205, -227, -243, -248, -246, -254, -280, -327, -381, -429, -473, -517, -556, -592, -612, -620,
+    -620, -614, -604, -591, -574, -540, -497, -441, -389, -358, -336, -313, -284, -222, -167, -114, -70, -47, -28, -4, 12,
+    38, 52, 58, 56, 56, 57, 68, 77, 86, 86, 80, 69, 67, 70, 82, 85, 89, 90, 89, 89, 88, 91, 96, 97, 91, 83, 78, 82, 88, 95,
+    96, 105, 106, 110, 102, 100, 96, 98, 97, 101, 98, 99, 100, 107, 113, 119, 115, 110, 96, 85, 73, 64, 69, 76, 79,
+    78, 75, 85, 100, 114, 113, 105, 96, 84, 74, 66, 60, 75, 85, 89, 83, 67, 61, 67, 73, 79, 74, 63, 57, 56, 58, 61, 55,
+    48, 45, 46, 55, 62, 55, 49, 43, 50, 59, 63, 57, 40, 31, 23, 25, 27, 31, 35, 34, 30, 36, 34, 42, 38, 36, 40, 46, 50,
+    47, 32, 30, 32, 52, 67, 73, 71, 63, 54, 53, 45, 41, 28, 13, 3, 1, 4, 4, -8, -23, -32, -31, -19, -5, 3, 9, 13, 19,
+    24, 27, 29, 25, 22, 26, 32, 42, 51, 56, 60, 57, 55, 53, 53, 54, 59, 54, 49, 26, -3, -11, -20, -47, -100, -194, -236,
+    -212, -123, 8, 103, 142, 147, 120, 105, 98, 93, 81, 61, 40, 26, 28, 30, 30, 27, 19, 17, 21, 20, 19, 19, 22, 36, 40,
+    35, 20, 7, 1, 10, 18, 27, 22, 6, -4, -2, 3, 6, -2, -13, -14, -10, -2, 3, 2, -1, -5, -10, -19, -32, -42, -55, -60,
+    -68, -77, -86, -101, -110, -117, -115, -104, -92, -84, -85, -84, -73, -65, -52, -50, -45, -35, -20, -3, 12, 20, 25,
+    26, 28, 28, 30, 28, 25, 28, 33, 42, 42, 36, 23, 9, 0, 1, -4, 1, -4, -4, 1, 5, 9, 9, -3, -1, -18, -50, -108, -190,
+    -272, -340, -408, -446, -537, -643, -777, -894, -920, -853, -697, -461, -251, -60, 58, 103, 129, 139, 155, 170, 173,
+    178, 185, 190, 193, 200, 208, 215, 225, 224, 232, 234, 240, 240, 236, 229, 226, 224, 232, 233, 232, 224, 219, 219,
+    223, 231, 226, 223, 219, 218, 223, 223, 223, 233, 245, 268, 286, 296, 295, 283, 271, 263, 252, 243, 226, 210, 197,
+    186, 171, 152, 133, 117, 114, 110, 107, 96, 80, 63, 48, 40, 38, 34, 28, 15, 2, -7, -11, -14, -18, -29, -37, -44, -50,
+    -58, -63, -61, -52, -50, -48, -61, -59, -58, -54, -47, -52, -62, -61, -64, -54, -52, -59, -69, -76, -76, -69, -67,
+    -74, -78, -81, -80, -73, -65, -57, -53, -51, -47, -35, -27, -22, -22, -24, -21, -17, -13, -10, -11, -13, -20, -20,
+    -12, -2, 7, -1, -12, -16, -13, -2, 2, -4, -5, -2, 9, 19, 19, 14, 11, 13, 19, 21, 20, 18, 19, 19, 19, 16, 15, 13, 14,
+    9, 3, -5, -9, -5, -3, -2, -3, -3, 2, 8, 9, 9, 5, 6, 8, 8, 7, 4, 3, 4, 5, 3, 5, 5, 13, 13, 12, 10, 10, 15, 22, 17,
+    14, 7, 10, 15, 16, 11, 12, 10, 13, 9, -2, -4, -2, 7, 16, 16, 17, 16, 7, -1, -16, -18, -16, -9, -4, -5, -10, -9, -8,
+    -3, -4, -10, -19, -20, -16, -9, -9, -23, -40, -48, -43, -33, -19, -21, -26, -31, -33, -19, 0, 17, 24, 9, -17, -47,
+    -63, -67, -59, -52, -51, -50, -49, -42, -26, -21, -15, -20, -23, -22, -19, -12, -8, 5, 18, 27, 32, 26, 25, 26, 22,
+    23, 17, 14, 17, 21, 25, 2, -45, -121, -196, -226, -200, -118, -9, 73, 126, 131, 114, 87, 60, 42, 29, 26, 34, 35, 34,
+    25, 12, 9, 7, 3, 2, -8, -11, 2, 23, 38, 41, 23, 9, 10, 13, 16, 8, -8, -17, -23, -26, -25, -21, -15, -10, -13, -13,
+    -19, -22, -29, -40, -48, -48, -54, -55, -66, -82, -85, -90, -92, -98, -114, -119, -124, -129, -132, -146, -146, -138,
+    -124, -99, -85, -72, -65, -65, -65, -66, -63, -64, -64, -58, -46, -26, -9, 2, 2, 4, 0, 1, 4, 3, 10, 11, 10, 2, -4,
+    0, 10, 18, 20, 6, 2, -9, -7, -3, -3, -2, -7, -12, -5, 5, 24, 36, 31, 25, 6, 3, 7, 12, 17, 11, 0, -6, -9, -8, -7, -5,
+    -6, -2, -2, -6, -2, 2, 14, 24, 22, 15, 8, 4, 6, 7, 12, 16, 25, 20, 7, -16, -41, -60, -67, -65, -54, -35, -11, 30,
+    84, 175, 302, 455, 603, 707, 743, 714, 625, 519, 414, 337, 300, 281, 263, 239, 197, 163, 136, 109, 77, 34, -18, -50,
+    -66, -74, -79, -92, -107, -117, -127, -129, -135, -139, -141, -155, -159, -167, -171, -169, -174, -175, -178, -191,
+    -202, -223, -235, -243, -237, -240, -256, -298, -345, -393, -432, -475, -518, -565, -596, -619, -623, -623, -614,
+    -599, -583, -559, -524, -477, -425, -383, -357, -331, -301, -252, -198, -143, -96, -57, -29, -8, 10, 31, 45, 60, 65,
+    70, 74, 76, 79, 82, 79, 75, 62,
+]
+
+def slider_x_event_cb(e):
+
+    slider = e.get_target()
+    v = slider.get_value()
+    chart.set_zoom_x(v)
+
+def slider_y_event_cb(e):
+
+    slider = e.get_target()
+    v = slider.get_value()
+    chart.set_zoom_y(v)
+
+
+#
+# Display 1000 data points with zooming and scrolling.
+# See how the chart changes drawing mode (draw only vertical lines) when
+# the points get too crowded.
+
+# Create a chart
+chart = lv.chart(lv.scr_act())
+chart.set_size(200, 150)
+chart.align(lv.ALIGN.CENTER, -30, -30)
+chart.set_range(lv.chart.AXIS.PRIMARY_Y, -1000, 1000)
+
+# Do not display points on the data
+chart.set_style_size(0, lv.PART.INDICATOR)
+
+ser = chart.add_series(lv.palette_main(lv.PALETTE.RED), lv.chart.AXIS.PRIMARY_Y)
+
+pcnt = len(ecg_sample)
+chart.set_point_count(pcnt)
+chart.set_ext_y_array(ser, ecg_sample)
+
+slider = lv.slider(lv.scr_act())
+slider.set_range(lv.IMG_ZOOM.NONE, lv.IMG_ZOOM.NONE * 10)
+slider.add_event_cb(slider_x_event_cb, lv.EVENT.VALUE_CHANGED, None)
+slider.set_size(200,10)
+slider.align_to(chart, lv.ALIGN.OUT_BOTTOM_MID, 0, 20)
+
+slider = lv.slider(lv.scr_act())
+slider.set_range(lv.IMG_ZOOM.NONE, lv.IMG_ZOOM.NONE * 10)
+slider.add_event_cb(slider_y_event_cb, lv.EVENT.VALUE_CHANGED, None)
+slider.set_size(10, 150)
+slider.align_to(chart, lv.ALIGN.OUT_RIGHT_MID, 20, 0)
+

LVGL.Simulator/lvgl/examples/widgets/chart/lv_example_chart_6.c

@@ -0,0 +1,87 @@
+#include "../../lv_examples.h"
+#if LV_USE_CHART && LV_BUILD_EXAMPLES
+
+static lv_obj_t * chart;
+static lv_chart_series_t * ser;
+static lv_chart_cursor_t * cursor;
+
+static void event_cb(lv_event_t * e)
+{
+    static int32_t last_id = -1;
+    lv_event_code_t code = lv_event_get_code(e);
+    lv_obj_t * obj = lv_event_get_target(e);
+
+    if(code == LV_EVENT_VALUE_CHANGED) {
+        last_id = lv_chart_get_pressed_point(obj);
+        if(last_id != LV_CHART_POINT_NONE) {
+            lv_chart_set_cursor_point(obj, cursor, NULL, last_id);
+        }
+    }
+    else if(code == LV_EVENT_DRAW_PART_END) {
+        lv_obj_draw_part_dsc_t * dsc = lv_event_get_draw_part_dsc(e);
+        if(!lv_obj_draw_part_check_type(dsc, &lv_chart_class, LV_CHART_DRAW_PART_CURSOR)) return;
+        if(dsc->p1 == NULL || dsc->p2 == NULL || dsc->p1->y != dsc->p2->y || last_id < 0) return;
+
+        lv_coord_t * data_array = lv_chart_get_y_array(chart, ser);
+        lv_coord_t v = data_array[last_id];
+        char buf[16];
+        lv_snprintf(buf, sizeof(buf), "%d", v);
+
+        lv_point_t size;
+        lv_txt_get_size(&size, buf, LV_FONT_DEFAULT, 0, 0, LV_COORD_MAX, LV_TEXT_FLAG_NONE);
+
+        lv_area_t a;
+        a.y2 = dsc->p1->y - 5;
+        a.y1 = a.y2 - size.y - 10;
+        a.x1 = dsc->p1->x + 10;
+        a.x2 = a.x1 + size.x + 10;
+
+        lv_draw_rect_dsc_t draw_rect_dsc;
+        lv_draw_rect_dsc_init(&draw_rect_dsc);
+        draw_rect_dsc.bg_color = lv_palette_main(LV_PALETTE_BLUE);
+        draw_rect_dsc.radius = 3;
+
+        lv_draw_rect(dsc->draw_ctx, &draw_rect_dsc, &a);
+
+        lv_draw_label_dsc_t draw_label_dsc;
+        lv_draw_label_dsc_init(&draw_label_dsc);
+        draw_label_dsc.color = lv_color_white();
+        a.x1 += 5;
+        a.x2 -= 5;
+        a.y1 += 5;
+        a.y2 -= 5;
+        lv_draw_label(dsc->draw_ctx, &draw_label_dsc, &a, buf, NULL);
+    }
+}
+
+/**
+ * Show cursor on the clicked point
+ */
+void lv_example_chart_6(void)
+{
+    chart = lv_chart_create(lv_scr_act());
+    lv_obj_set_size(chart, 200, 150);
+    lv_obj_align(chart, LV_ALIGN_CENTER, 0, -10);
+
+    lv_chart_set_axis_tick(chart, LV_CHART_AXIS_PRIMARY_Y, 10, 5, 6, 5, true, 40);
+    lv_chart_set_axis_tick(chart, LV_CHART_AXIS_PRIMARY_X, 10, 5, 10, 1, true, 30);
+
+    lv_obj_add_event_cb(chart, event_cb, LV_EVENT_ALL, NULL);
+    lv_obj_refresh_ext_draw_size(chart);
+
+    cursor = lv_chart_add_cursor(chart, lv_palette_main(LV_PALETTE_BLUE), LV_DIR_LEFT | LV_DIR_BOTTOM);
+
+    ser = lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_RED), LV_CHART_AXIS_PRIMARY_Y);
+    uint32_t i;
+    for(i = 0; i < 10; i++) {
+        lv_chart_set_next_value(chart, ser, lv_rand(10, 90));
+    }
+
+    lv_chart_set_zoom_x(chart, 500);
+
+    lv_obj_t * label = lv_label_create(lv_scr_act());
+    lv_label_set_text(label, "Click on a point");
+    lv_obj_align_to(label, chart, LV_ALIGN_OUT_TOP_MID, 0, -5);
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/chart/lv_example_chart_6.py

@@ -0,0 +1,88 @@
+class ExampleChart_6():
+
+    def __init__(self):
+        self.last_id = -1
+        #
+        # Show cursor on the clicked point
+        #
+
+        chart = lv.chart(lv.scr_act())
+        chart.set_size(200, 150)
+        chart.align(lv.ALIGN.CENTER, 0, -10)
+
+        chart.set_axis_tick(lv.chart.AXIS.PRIMARY_Y, 10, 5, 6, 5, True, 40)
+        chart.set_axis_tick(lv.chart.AXIS.PRIMARY_X, 10, 5, 10, 1, True, 30)
+
+        chart.add_event_cb(self.event_cb, lv.EVENT.ALL, None)
+        chart.refresh_ext_draw_size()
+
+        self.cursor = chart.add_cursor(lv.palette_main(lv.PALETTE.BLUE), lv.DIR.LEFT | lv.DIR.BOTTOM)
+
+        self.ser = chart.add_series(lv.palette_main(lv.PALETTE.RED), lv.chart.AXIS.PRIMARY_Y)
+
+        self.ser_p = []
+        for i in range(10):
+            self.ser_p.append(lv.rand(10,90))
+        self.ser.y_points = self.ser_p
+
+        newser = chart.get_series_next(None)
+        # print("length of data points: ",len(newser.points))
+        chart.set_zoom_x(500)
+
+        label = lv.label(lv.scr_act())
+        label.set_text("Click on a point")
+        label.align_to(chart, lv.ALIGN.OUT_TOP_MID, 0, -5)
+
+
+    def event_cb(self,e):
+
+        code = e.get_code()
+        chart = e.get_target()
+
+        if code == lv.EVENT.VALUE_CHANGED:
+            # print("last_id: ",self.last_id)
+            self.last_id = chart.get_pressed_point()
+            if self.last_id != lv.CHART_POINT.NONE:
+                p = lv.point_t()
+                chart.get_point_pos_by_id(self.ser, self.last_id, p)
+                chart.set_cursor_point(self.cursor, None, self.last_id)
+
+        elif code == lv.EVENT.DRAW_PART_END:
+            # print("EVENT.DRAW_PART_END")
+            dsc = lv.obj_draw_part_dsc_t.__cast__(e.get_param())
+            # if dsc.p1 and dsc.p2:
+                # print("p1, p2", dsc.p1,dsc.p2)
+                # print("p1.y, p2.y", dsc.p1.y, dsc.p2.y)
+                # print("last_id: ",self.last_id)
+            if dsc.part == lv.PART.CURSOR and dsc.p1 and dsc.p2 and dsc.p1.y == dsc.p2.y and self.last_id >= 0:
+
+                v = self.ser_p[self.last_id]
+
+                # print("value: ",v)
+                value_txt = str(v)
+                size = lv.point_t()
+                lv.txt_get_size(size, value_txt, lv.font_default(), 0, 0, lv.COORD.MAX, lv.TEXT_FLAG.NONE)
+
+                a = lv.area_t()
+                a.y2 = dsc.p1.y - 5
+                a.y1 = a.y2 - size.y - 10
+                a.x1 = dsc.p1.x + 10
+                a.x2 = a.x1 + size.x + 10
+
+                draw_rect_dsc = lv.draw_rect_dsc_t()
+                draw_rect_dsc.init()
+                draw_rect_dsc.bg_color = lv.palette_main(lv.PALETTE.BLUE)
+                draw_rect_dsc.radius = 3
+
+                lv.draw_rect(a, dsc.clip_area, draw_rect_dsc)
+
+                draw_label_dsc = lv.draw_label_dsc_t()
+                draw_label_dsc.init()
+                draw_label_dsc.color = lv.color_white()
+                a.x1 += 5
+                a.x2 -= 5
+                a.y1 += 5
+                a.y2 -= 5
+                lv.draw_label(a, dsc.clip_area, draw_label_dsc, value_txt, None)
+
+example_chart_6 = ExampleChart_6()

LVGL.Simulator/lvgl/examples/widgets/chart/lv_example_chart_7.c

@@ -0,0 +1,66 @@
+#include "../../lv_examples.h"
+#if LV_USE_CHART && LV_BUILD_EXAMPLES
+
+static void draw_event_cb(lv_event_t * e)
+{
+    lv_obj_draw_part_dsc_t * dsc = lv_event_get_draw_part_dsc(e);
+    if(dsc->part == LV_PART_ITEMS) {
+        lv_obj_t * obj = lv_event_get_target(e);
+        lv_chart_series_t * ser = lv_chart_get_series_next(obj, NULL);
+        uint32_t cnt = lv_chart_get_point_count(obj);
+        /*Make older value more transparent*/
+        dsc->rect_dsc->bg_opa = (LV_OPA_COVER *  dsc->id) / (cnt - 1);
+
+        /*Make smaller values blue, higher values red*/
+        lv_coord_t * x_array = lv_chart_get_x_array(obj, ser);
+        lv_coord_t * y_array = lv_chart_get_y_array(obj, ser);
+        /*dsc->id is the tells drawing order, but we need the ID of the point being drawn.*/
+        uint32_t start_point = lv_chart_get_x_start_point(obj, ser);
+        uint32_t p_act = (start_point + dsc->id) % cnt; /*Consider start point to get the index of the array*/
+        lv_opa_t x_opa = (x_array[p_act] * LV_OPA_50) / 200;
+        lv_opa_t y_opa = (y_array[p_act] * LV_OPA_50) / 1000;
+
+        dsc->rect_dsc->bg_color = lv_color_mix(lv_palette_main(LV_PALETTE_RED),
+                                               lv_palette_main(LV_PALETTE_BLUE),
+                                               x_opa + y_opa);
+    }
+}
+
+static void add_data(lv_timer_t * timer)
+{
+    LV_UNUSED(timer);
+    lv_obj_t * chart = timer->user_data;
+    lv_chart_set_next_value2(chart, lv_chart_get_series_next(chart, NULL), lv_rand(0, 200), lv_rand(0, 1000));
+}
+
+/**
+ * A scatter chart
+ */
+void lv_example_chart_7(void)
+{
+    lv_obj_t * chart = lv_chart_create(lv_scr_act());
+    lv_obj_set_size(chart, 200, 150);
+    lv_obj_align(chart, LV_ALIGN_CENTER, 0, 0);
+    lv_obj_add_event_cb(chart, draw_event_cb, LV_EVENT_DRAW_PART_BEGIN, NULL);
+    lv_obj_set_style_line_width(chart, 0, LV_PART_ITEMS);   /*Remove the lines*/
+
+    lv_chart_set_type(chart, LV_CHART_TYPE_SCATTER);
+
+    lv_chart_set_axis_tick(chart, LV_CHART_AXIS_PRIMARY_X, 5, 5, 5, 1, true, 30);
+    lv_chart_set_axis_tick(chart, LV_CHART_AXIS_PRIMARY_Y, 10, 5, 6, 5, true, 50);
+
+    lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_X, 0, 200);
+    lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, 0, 1000);
+
+    lv_chart_set_point_count(chart, 50);
+
+    lv_chart_series_t * ser = lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_RED), LV_CHART_AXIS_PRIMARY_Y);
+    uint32_t i;
+    for(i = 0; i < 50; i++) {
+        lv_chart_set_next_value2(chart, ser, lv_rand(0, 200), lv_rand(0, 1000));
+    }
+
+    lv_timer_create(add_data, 100, chart);
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/chart/lv_example_chart_7.py

@@ -0,0 +1,77 @@
+#!/opt/bin/lv_micropython -i
+import utime as time
+import lvgl as lv
+import display_driver
+
+def draw_event_cb(e):
+    dsc = e.get_draw_part_dsc()
+    if dsc.part == lv.PART.ITEMS:
+        obj = e.get_target()
+        ser = obj.get_series_next(None)
+        cnt = obj.get_point_count()
+        # print("cnt: ",cnt)
+        # Make older value more transparent
+        dsc.rect_dsc.bg_opa = (lv.OPA.COVER *  dsc.id) // (cnt - 1)
+
+        # Make smaller values blue, higher values red
+        # x_array = chart.get_x_array(ser)
+        # y_array = chart.get_y_array(ser)
+        # dsc->id is the tells drawing order, but we need the ID of the point being drawn.
+        start_point = chart.get_x_start_point(ser)
+        # print("start point: ",start_point)
+        p_act = (start_point + dsc.id) % cnt # Consider start point to get the index of the array
+        # print("p_act", p_act)
+        x_opa = (x_array[p_act] * lv.OPA._50) // 200
+        y_opa = (y_array[p_act] * lv.OPA._50) // 1000
+
+        dsc.rect_dsc.bg_color = lv.palette_main(lv.PALETTE.RED).color_mix(
+                                             lv.palette_main(lv.PALETTE.BLUE),
+                                             x_opa + y_opa)
+
+def add_data(timer,chart):
+    # print("add_data")
+    x = lv.rand(0,200)
+    y = lv.rand(0,1000)
+    chart.set_next_value2(ser, x, y)
+    # chart.set_next_value2(chart.gx, y)
+    x_array.pop(0)
+    x_array.append(x)
+    y_array.pop(0)
+    y_array.append(y)
+
+#
+# A scatter chart
+#
+
+chart = lv.chart(lv.scr_act())
+chart.set_size(200, 150)
+chart.align(lv.ALIGN.CENTER, 0, 0)
+chart.add_event_cb(draw_event_cb, lv.EVENT.DRAW_PART_BEGIN, None)
+chart.set_style_line_width(0, lv.PART.ITEMS)   # Remove the lines
+
+chart.set_type(lv.chart.TYPE.SCATTER)
+
+chart.set_axis_tick(lv.chart.AXIS.PRIMARY_X, 5, 5, 5, 1, True, 30)
+chart.set_axis_tick(lv.chart.AXIS.PRIMARY_Y, 10, 5, 6, 5, True, 50)
+
+chart.set_range(lv.chart.AXIS.PRIMARY_X, 0, 200)
+chart.set_range(lv.chart.AXIS.PRIMARY_Y, 0, 1000)
+
+chart.set_point_count(50)
+
+ser = chart.add_series(lv.palette_main(lv.PALETTE.RED), lv.chart.AXIS.PRIMARY_Y)
+
+x_array = []
+y_array = []
+for i in range(50):
+    x_array.append(lv.rand(0, 200))
+    y_array.append(lv.rand(0, 1000))
+
+ser.x_points = x_array
+ser.y_points = y_array
+
+# Create an `lv_timer` to update the chart.
+
+timer = lv.timer_create_basic()
+timer.set_period(100)
+timer.set_cb(lambda src: add_data(timer,chart))

LVGL.Simulator/lvgl/examples/widgets/chart/lv_example_chart_8.c

@@ -0,0 +1,131 @@
+#include "../../lv_examples.h"
+#if LV_USE_CHART && LV_DRAW_COMPLEX && LV_BUILD_EXAMPLES
+
+/*  A struct is used to keep track of the series list because later we need to draw to the series in the reverse order to which they were initialised. */
+typedef struct {
+    lv_obj_t * obj;
+    lv_chart_series_t * series_list[3];
+} stacked_area_chart_t;
+
+static stacked_area_chart_t stacked_area_chart;
+
+/**
+ * Callback which draws the blocks of colour under the lines
+ **/
+static void draw_event_cb(lv_event_t * e)
+{
+    lv_obj_t * obj = lv_event_get_target(e);
+
+    /*Add the faded area before the lines are drawn*/
+    lv_obj_draw_part_dsc_t * dsc = lv_event_get_draw_part_dsc(e);
+    if(dsc->part == LV_PART_ITEMS) {
+        if(!dsc->p1 || !dsc->p2)
+            return;
+
+        /*Add a line mask that keeps the area below the line*/
+        lv_draw_mask_line_param_t line_mask_param;
+        lv_draw_mask_line_points_init(&line_mask_param, dsc->p1->x, dsc->p1->y, dsc->p2->x, dsc->p2->y,
+                                      LV_DRAW_MASK_LINE_SIDE_BOTTOM);
+        int16_t line_mask_id = lv_draw_mask_add(&line_mask_param, NULL);
+
+        /*Draw a rectangle that will be affected by the mask*/
+        lv_draw_rect_dsc_t draw_rect_dsc;
+        lv_draw_rect_dsc_init(&draw_rect_dsc);
+        draw_rect_dsc.bg_opa = LV_OPA_COVER;
+        draw_rect_dsc.bg_color = dsc->line_dsc->color;
+
+        lv_area_t a;
+        a.x1 = dsc->p1->x;
+        a.x2 = dsc->p2->x;
+        a.y1 = LV_MIN(dsc->p1->y, dsc->p2->y);
+        a.y2 = obj->coords.y2 -
+               13; /* -13 cuts off where the rectangle draws over the chart margin. Without this an area of 0 doesn't look like 0 */
+        lv_draw_rect(dsc->draw_ctx, &draw_rect_dsc, &a);
+
+        /*Remove the mask*/
+        lv_draw_mask_free_param(&line_mask_param);
+        lv_draw_mask_remove_id(line_mask_id);
+    }
+}
+
+/**
+ * Helper function to round a fixed point number
+ **/
+static int32_t round_fixed_point(int32_t n, int8_t shift)
+{
+    /* Create a bitmask to isolates the decimal part of the fixed point number */
+    int32_t mask = 1;
+    for(int32_t bit_pos = 0; bit_pos < shift; bit_pos++) {
+        mask = (mask << 1) + 1;
+    }
+
+    int32_t decimal_part = n & mask;
+
+    /* Get 0.5 as fixed point */
+    int32_t rounding_boundary = 1 << (shift - 1);
+
+    /* Return either the integer part of n or the integer part + 1 */
+    return (decimal_part < rounding_boundary) ? (n & ~mask) : ((n >> shift) + 1) << shift;
+}
+
+/**
+ * Stacked area chart
+ */
+void lv_example_chart_8(void)
+{
+    /*Create a stacked_area_chart.obj*/
+    stacked_area_chart.obj = lv_chart_create(lv_scr_act());
+    lv_obj_set_size(stacked_area_chart.obj, 200, 150);
+    lv_obj_center(stacked_area_chart.obj);
+    lv_chart_set_type(stacked_area_chart.obj, LV_CHART_TYPE_LINE);
+    lv_chart_set_div_line_count(stacked_area_chart.obj, 5, 7);
+    lv_obj_add_event_cb(stacked_area_chart.obj, draw_event_cb, LV_EVENT_DRAW_PART_BEGIN, NULL);
+
+    /* Set range to 0 to 100 for percentages. Draw ticks */
+    lv_chart_set_range(stacked_area_chart.obj, LV_CHART_AXIS_PRIMARY_Y, 0, 100);
+    lv_chart_set_axis_tick(stacked_area_chart.obj, LV_CHART_AXIS_PRIMARY_Y, 3, 0, 5, 1, true, 30);
+
+    /*Set point size to 0 so the lines are smooth */
+    lv_obj_set_style_size(stacked_area_chart.obj, 0, LV_PART_INDICATOR);
+
+    /*Add some data series*/
+    stacked_area_chart.series_list[0] = lv_chart_add_series(stacked_area_chart.obj, lv_palette_main(LV_PALETTE_RED),
+                                                            LV_CHART_AXIS_PRIMARY_Y);
+    stacked_area_chart.series_list[1] = lv_chart_add_series(stacked_area_chart.obj, lv_palette_main(LV_PALETTE_BLUE),
+                                                            LV_CHART_AXIS_PRIMARY_Y);
+    stacked_area_chart.series_list[2] = lv_chart_add_series(stacked_area_chart.obj, lv_palette_main(LV_PALETTE_GREEN),
+                                                            LV_CHART_AXIS_PRIMARY_Y);
+
+    for(int point = 0; point < 10; point++) {
+        /* Make some random data */
+        uint32_t vals[3] = {lv_rand(10, 20), lv_rand(20, 30), lv_rand(20, 30)};
+
+        int8_t fixed_point_shift = 5;
+        uint32_t total = vals[0] + vals[1] + vals[2];
+        uint32_t draw_heights[3];
+        uint32_t int_sum = 0;
+        uint32_t decimal_sum = 0;
+
+        /* Fixed point cascade rounding ensures percentages add to 100 */
+        for(int32_t series_index = 0; series_index < 3; series_index++) {
+            decimal_sum += (((vals[series_index] * 100) << fixed_point_shift) / total);
+            int_sum += (vals[series_index] * 100) / total;
+
+            int32_t modifier = (round_fixed_point(decimal_sum, fixed_point_shift) >> fixed_point_shift) - int_sum;
+
+            /*  The draw heights are equal to the percentage of the total each value is + the cumulative sum of the previous percentages.
+                The accumulation is how the values get "stacked" */
+            draw_heights[series_index] = int_sum + modifier;
+
+            /*  Draw to the series in the reverse order to which they were initialised.
+                Without this the higher values will draw on top of the lower ones.
+                This is because the Z-height of a series matches the order it was initialised */
+            lv_chart_set_next_value(stacked_area_chart.obj, stacked_area_chart.series_list[3 - series_index - 1],
+                                    draw_heights[series_index]);
+        }
+    }
+
+    lv_chart_refresh(stacked_area_chart.obj);
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/chart/lv_example_chart_8.py

@@ -0,0 +1,124 @@
+import display_driver
+import lvgl as lv
+
+# A class is used to keep track of the series list because later we
+#  need to draw to the series in the reverse order to which they were initialised.
+class StackedAreaChart:
+    def __init__(self):
+        self.obj = None
+        self.series_list = [None, None, None]
+
+stacked_area_chart = StackedAreaChart()
+
+#
+# Callback which draws the blocks of colour under the lines
+#
+def draw_event_cb(e):
+
+    obj = e.get_target()
+    cont_a = lv.area_t()
+    obj.get_coords(cont_a)
+
+    #Add the faded area before the lines are drawn
+    dsc = e.get_draw_part_dsc()
+    if dsc.part == lv.PART.ITEMS:
+        if not dsc.p1 or not dsc.p2:
+            return
+
+        # Add a line mask that keeps the area below the line
+        line_mask_param = lv.draw_mask_line_param_t()
+        line_mask_param.points_init(dsc.p1.x, dsc.p1.y, dsc.p2.x, dsc.p2.y, lv.DRAW_MASK_LINE_SIDE.BOTTOM)
+        line_mask_id = lv.draw_mask_add(line_mask_param, None)
+
+        #Draw a rectangle that will be affected by the mask
+        draw_rect_dsc = lv.draw_rect_dsc_t()
+        draw_rect_dsc.init()
+        draw_rect_dsc.bg_opa = lv.OPA.COVER
+        draw_rect_dsc.bg_color = dsc.line_dsc.color
+
+        a = lv.area_t()
+        a.x1 = dsc.p1.x
+        a.x2 = dsc.p2.x
+        a.y1 = min(dsc.p1.y, dsc.p2.y)
+        a.y2 = cont_a.y2 - 13 # -13 cuts off where the rectangle draws over the chart margin. Without this an area of 0 doesn't look like 0
+        dsc.draw_ctx.rect(draw_rect_dsc, a)
+
+        # Remove the mask
+        lv.draw_mask_free_param(line_mask_param)
+        lv.draw_mask_remove_id(line_mask_id)
+
+
+#
+# Helper function to round a fixed point number
+#
+def round_fixed_point(n, shift):
+    # Create a bitmask to isolates the decimal part of the fixed point number
+    mask = 1
+    for bit_pos in range(shift):
+        mask = (mask << 1) + 1
+
+    decimal_part = n & mask
+
+    # Get 0.5 as fixed point
+    rounding_boundary = 1 << (shift - 1)
+
+    # Return either the integer part of n or the integer part + 1
+    if decimal_part < rounding_boundary:
+        return (n & ~mask)
+    return ((n >> shift) + 1) << shift
+
+
+#
+# Stacked area chart
+#
+def lv_example_chart_8():
+
+    #Create a stacked_area_chart.obj
+    stacked_area_chart.obj = lv.chart(lv.scr_act())
+    stacked_area_chart.obj.set_size(200, 150)
+    stacked_area_chart.obj.center()
+    stacked_area_chart.obj.set_type( lv.chart.TYPE.LINE)
+    stacked_area_chart.obj.set_div_line_count(5, 7)
+    stacked_area_chart.obj.add_event_cb( draw_event_cb, lv.EVENT.DRAW_PART_BEGIN, None)
+
+    # Set range to 0 to 100 for percentages. Draw ticks
+    stacked_area_chart.obj.set_range(lv.chart.AXIS.PRIMARY_Y,0,100)
+    stacked_area_chart.obj.set_axis_tick(lv.chart.AXIS.PRIMARY_Y, 3, 0, 5, 1, True, 30)
+
+    #Set point size to 0 so the lines are smooth
+    stacked_area_chart.obj.set_style_size(0, lv.PART.INDICATOR)
+
+    # Add some data series
+    stacked_area_chart.series_list[0] = stacked_area_chart.obj.add_series(lv.palette_main(lv.PALETTE.RED), lv.chart.AXIS.PRIMARY_Y)
+    stacked_area_chart.series_list[1] = stacked_area_chart.obj.add_series(lv.palette_main(lv.PALETTE.BLUE), lv.chart.AXIS.PRIMARY_Y)
+    stacked_area_chart.series_list[2] = stacked_area_chart.obj.add_series(lv.palette_main(lv.PALETTE.GREEN), lv.chart.AXIS.PRIMARY_Y)
+
+    for point in range(10):
+        # Make some random data
+        vals = [lv.rand(10, 20), lv.rand(20, 30), lv.rand(20, 30)]
+
+        fixed_point_shift = 5
+        total = vals[0] + vals[1] + vals[2]
+        draw_heights = [0, 0, 0]
+        int_sum = 0
+        decimal_sum = 0
+
+        # Fixed point cascade rounding ensures percentages add to 100
+        for series_index in range(3):
+            decimal_sum += int(((vals[series_index] * 100) << fixed_point_shift) // total)
+            int_sum += int((vals[series_index] * 100) / total)
+
+            modifier = (round_fixed_point(decimal_sum, fixed_point_shift) >> fixed_point_shift) - int_sum
+
+            #  The draw heights are equal to the percentage of the total each value is + the cumulative sum of the previous percentages.
+            #   The accumulation is how the values get "stacked"
+            draw_heights[series_index] = int(int_sum + modifier)
+
+            #  Draw to the series in the reverse order to which they were initialised.
+            #   Without this the higher values will draw on top of the lower ones.
+            #   This is because the Z-height of a series matches the order it was initialised
+            stacked_area_chart.obj.set_next_value( stacked_area_chart.series_list[3 - series_index - 1], draw_heights[series_index])
+
+    stacked_area_chart.obj.refresh()
+
+lv_example_chart_8()

LVGL.Simulator/lvgl/examples/widgets/chart/lv_example_chart_9.c

@@ -0,0 +1,46 @@
+#include "../../lv_examples.h"
+#if LV_USE_CHART && LV_DRAW_COMPLEX && LV_BUILD_EXAMPLES
+
+
+static void add_data(lv_timer_t * t)
+{
+    lv_obj_t * chart = t->user_data;
+    lv_chart_series_t * ser = lv_chart_get_series_next(chart, NULL);
+
+    lv_chart_set_next_value(chart, ser, lv_rand(10, 90));
+
+    uint16_t p = lv_chart_get_point_count(chart);
+    uint16_t s = lv_chart_get_x_start_point(chart, ser);
+    lv_coord_t * a = lv_chart_get_y_array(chart, ser);
+
+    a[(s + 1) % p] = LV_CHART_POINT_NONE;
+    a[(s + 2) % p] = LV_CHART_POINT_NONE;
+    a[(s + 2) % p] = LV_CHART_POINT_NONE;
+
+    lv_chart_refresh(chart);
+}
+
+/**
+ * Circular line chart with gap
+ */
+void lv_example_chart_9(void)
+{
+    /*Create a stacked_area_chart.obj*/
+    lv_obj_t * chart = lv_chart_create(lv_scr_act());
+    lv_chart_set_update_mode(chart, LV_CHART_UPDATE_MODE_CIRCULAR);
+    lv_obj_set_size(chart, 200, 150);
+    lv_obj_center(chart);
+
+    lv_chart_set_point_count(chart, 30);
+    lv_chart_series_t * ser = lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_RED), LV_CHART_AXIS_PRIMARY_Y);
+    /*Prefill with data*/
+    uint32_t i;
+    for(i = 0; i < 30; i++) {
+        lv_chart_set_next_value(chart, ser, lv_rand(10, 90));
+    }
+
+    lv_timer_create(add_data, 300, chart);
+
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/chart/lv_example_chart_9.py

@@ -0,0 +1,31 @@
+import display_driver
+import lvgl as lv
+
+def add_data(t):
+    chart.set_next_value(ser, lv.rand(10, 90))
+
+    p = chart.get_point_count()
+    s = chart.get_x_start_point(ser)
+    a = chart.get_y_array(ser)
+
+    a[(s + 1) % p] = lv.CHART_POINT.NONE
+    a[(s + 2) % p] = lv.CHART_POINT.NONE
+    a[(s + 3) % p] = lv.CHART_POINT.NONE
+    chart.refresh()
+
+#
+# Circular line chart with gap
+#
+chart = lv.chart(lv.scr_act())
+
+chart.set_update_mode(lv.chart.UPDATE_MODE.CIRCULAR)
+chart.set_size(200, 150)
+chart.center()
+
+chart.set_point_count(30)
+ser = chart.add_series(lv.palette_main(lv.PALETTE.RED), lv.chart.AXIS.PRIMARY_Y)
+#Prefill with data
+for i in range(0, 30):
+    chart.set_next_value(ser, lv.rand(10, 90))
+
+lv.timer_create(add_data, 200, None)

LVGL.Simulator/lvgl/examples/widgets/checkbox/index.rst

@@ -0,0 +1,12 @@
+
+Simple Checkboxes
+"""""""""""""""""
+
+.. lv_example:: widgets/checkbox/lv_example_checkbox_1
+  :language: c
+
+Checkboxes as radio buttons
+"""""""""""""""""""""""""""
+.. lv_example:: widgets/checkbox/lv_example_checkbox_2
+  :language: c
+

LVGL.Simulator/lvgl/examples/widgets/checkbox/lv_example_checkbox_1.c

@@ -0,0 +1,43 @@
+#include "../../lv_examples.h"
+#if LV_USE_CHECKBOX && LV_BUILD_EXAMPLES
+
+static void event_handler(lv_event_t * e)
+{
+    lv_event_code_t code = lv_event_get_code(e);
+    lv_obj_t * obj = lv_event_get_target(e);
+    if(code == LV_EVENT_VALUE_CHANGED) {
+        const char * txt = lv_checkbox_get_text(obj);
+        const char * state = lv_obj_get_state(obj) & LV_STATE_CHECKED ? "Checked" : "Unchecked";
+        LV_LOG_USER("%s: %s", txt, state);
+    }
+}
+
+void lv_example_checkbox_1(void)
+{
+    lv_obj_set_flex_flow(lv_scr_act(), LV_FLEX_FLOW_COLUMN);
+    lv_obj_set_flex_align(lv_scr_act(), LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER);
+
+    lv_obj_t * cb;
+    cb = lv_checkbox_create(lv_scr_act());
+    lv_checkbox_set_text(cb, "Apple");
+    lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);
+
+    cb = lv_checkbox_create(lv_scr_act());
+    lv_checkbox_set_text(cb, "Banana");
+    lv_obj_add_state(cb, LV_STATE_CHECKED);
+    lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);
+
+    cb = lv_checkbox_create(lv_scr_act());
+    lv_checkbox_set_text(cb, "Lemon");
+    lv_obj_add_state(cb, LV_STATE_DISABLED);
+    lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);
+
+    cb = lv_checkbox_create(lv_scr_act());
+    lv_obj_add_state(cb, LV_STATE_CHECKED | LV_STATE_DISABLED);
+    lv_checkbox_set_text(cb, "Melon\nand a new line");
+    lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);
+
+    lv_obj_update_layout(cb);
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/checkbox/lv_example_checkbox_1.py

@@ -0,0 +1,36 @@
+def event_handler(e):
+    code = e.get_code()
+    obj = e.get_target()
+    if code == lv.EVENT.VALUE_CHANGED:
+        txt = obj.get_text()
+        if obj.get_state() & lv.STATE.CHECKED:
+            state = "Checked"
+        else:
+            state = "Unchecked"
+        print(txt + ":" + state)
+
+
+lv.scr_act().set_flex_flow(lv.FLEX_FLOW.COLUMN)
+lv.scr_act().set_flex_align(lv.FLEX_ALIGN.CENTER, lv.FLEX_ALIGN.START, lv.FLEX_ALIGN.CENTER)
+
+cb = lv.checkbox(lv.scr_act())
+cb.set_text("Apple")
+cb.add_event_cb(event_handler, lv.EVENT.ALL, None)
+
+cb = lv.checkbox(lv.scr_act())
+cb.set_text("Banana")
+cb.add_state(lv.STATE.CHECKED)
+cb.add_event_cb(event_handler, lv.EVENT.ALL, None)
+
+cb = lv.checkbox(lv.scr_act())
+cb.set_text("Lemon")
+cb.add_state(lv.STATE.DISABLED)
+cb.add_event_cb(event_handler, lv.EVENT.ALL, None)
+
+cb = lv.checkbox(lv.scr_act())
+cb.add_state(lv.STATE.CHECKED | lv.STATE.DISABLED)
+cb.set_text("Melon")
+cb.add_event_cb(event_handler, lv.EVENT.ALL, None)
+
+cb.update_layout()
+

LVGL.Simulator/lvgl/examples/widgets/checkbox/lv_example_checkbox_2.c

@@ -0,0 +1,86 @@
+#include "../../lv_examples.h"
+#if LV_USE_CHECKBOX && LV_BUILD_EXAMPLES
+
+static lv_style_t style_radio;
+static lv_style_t style_radio_chk;
+static uint32_t active_index_1 = 0;
+static uint32_t active_index_2 = 0;
+
+static void radio_event_handler(lv_event_t * e)
+{
+    uint32_t * active_id = lv_event_get_user_data(e);
+    lv_obj_t * cont = lv_event_get_current_target(e);
+    lv_obj_t * act_cb = lv_event_get_target(e);
+    lv_obj_t * old_cb = lv_obj_get_child(cont, *active_id);
+
+    /*Do nothing if the container was clicked*/
+    if(act_cb == cont) return;
+
+    lv_obj_clear_state(old_cb, LV_STATE_CHECKED);   /*Uncheck the previous radio button*/
+    lv_obj_add_state(act_cb, LV_STATE_CHECKED);     /*Uncheck the current radio button*/
+
+    *active_id = lv_obj_get_index(act_cb);
+
+    LV_LOG_USER("Selected radio buttons: %d, %d", (int)active_index_1, (int)active_index_2);
+}
+
+
+static void radiobutton_create(lv_obj_t * parent, const char * txt)
+{
+    lv_obj_t * obj = lv_checkbox_create(parent);
+    lv_checkbox_set_text(obj, txt);
+    lv_obj_add_flag(obj, LV_OBJ_FLAG_EVENT_BUBBLE);
+    lv_obj_add_style(obj, &style_radio, LV_PART_INDICATOR);
+    lv_obj_add_style(obj, &style_radio_chk, LV_PART_INDICATOR | LV_STATE_CHECKED);
+}
+
+/**
+ * Checkboxes as radio buttons
+ */
+void lv_example_checkbox_2(void)
+{
+    /* The idea is to enable `LV_OBJ_FLAG_EVENT_BUBBLE` on checkboxes and process the
+     * `LV_EVENT_CLICKED` on the container.
+     * A variable is passed as event user data where the index of the active
+     * radiobutton is saved */
+
+
+    lv_style_init(&style_radio);
+    lv_style_set_radius(&style_radio, LV_RADIUS_CIRCLE);
+
+    lv_style_init(&style_radio_chk);
+    lv_style_set_bg_img_src(&style_radio_chk, NULL);
+
+    uint32_t i;
+    char buf[32];
+
+    lv_obj_t * cont1 = lv_obj_create(lv_scr_act());
+    lv_obj_set_flex_flow(cont1, LV_FLEX_FLOW_COLUMN);
+    lv_obj_set_size(cont1, lv_pct(40), lv_pct(80));
+    lv_obj_add_event_cb(cont1, radio_event_handler, LV_EVENT_CLICKED, &active_index_1);
+
+    for(i = 0; i < 5; i++) {
+        lv_snprintf(buf, sizeof(buf), "A %d", (int)i + 1);
+        radiobutton_create(cont1, buf);
+
+    }
+    /*Make the first checkbox checked*/
+    lv_obj_add_state(lv_obj_get_child(cont1, 0), LV_STATE_CHECKED);
+
+    lv_obj_t * cont2 = lv_obj_create(lv_scr_act());
+    lv_obj_set_flex_flow(cont2, LV_FLEX_FLOW_COLUMN);
+    lv_obj_set_size(cont2, lv_pct(40), lv_pct(80));
+    lv_obj_set_x(cont2, lv_pct(50));
+    lv_obj_add_event_cb(cont2, radio_event_handler, LV_EVENT_CLICKED, &active_index_2);
+
+    for(i = 0; i < 3; i++) {
+        lv_snprintf(buf, sizeof(buf), "B %d", (int)i + 1);
+        radiobutton_create(cont2, buf);
+    }
+
+    /*Make the first checkbox checked*/
+    lv_obj_add_state(lv_obj_get_child(cont2, 0), LV_STATE_CHECKED);
+}
+
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/colorwheel/index.rst

@@ -0,0 +1,7 @@
+
+Simple Colorwheel
+"""""""""""""""""
+
+.. lv_example:: widgets/colorwheel/lv_example_colorwheel_1
+  :language: c
+

LVGL.Simulator/lvgl/examples/widgets/colorwheel/lv_example_colorwheel_1.c

@@ -0,0 +1,13 @@
+#include "../../lv_examples.h"
+#if LV_USE_COLORWHEEL && LV_BUILD_EXAMPLES
+
+void lv_example_colorwheel_1(void)
+{
+    lv_obj_t * cw;
+
+    cw = lv_colorwheel_create(lv_scr_act(), true);
+    lv_obj_set_size(cw, 200, 200);
+    lv_obj_center(cw);
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/colorwheel/lv_example_colorwheel_1.py

@@ -0,0 +1,4 @@
+cw = lv.colorwheel(lv.scr_act(), True)
+cw.set_size(200, 200)
+cw.center()
+

LVGL.Simulator/lvgl/examples/widgets/dropdown/index.rst

@@ -0,0 +1,20 @@
+
+Simple Drop down list
+""""""""""""""""""""""
+
+.. lv_example:: widgets/dropdown/lv_example_dropdown_1
+  :language: c
+
+Drop down in four directions
+""""""""""""""""""""""""""""
+
+.. lv_example:: widgets/dropdown/lv_example_dropdown_2
+  :language: c
+
+
+Menu
+""""""""""""
+
+.. lv_example:: widgets/dropdown/lv_example_dropdown_3
+  :language: c
+

LVGL.Simulator/lvgl/examples/widgets/dropdown/lv_example_dropdown_1.c

@@ -0,0 +1,35 @@
+#include "../../lv_examples.h"
+#if LV_USE_DROPDOWN && LV_BUILD_EXAMPLES
+
+static void event_handler(lv_event_t * e)
+{
+    lv_event_code_t code = lv_event_get_code(e);
+    lv_obj_t * obj = lv_event_get_target(e);
+    if(code == LV_EVENT_VALUE_CHANGED) {
+        char buf[32];
+        lv_dropdown_get_selected_str(obj, buf, sizeof(buf));
+        LV_LOG_USER("Option: %s", buf);
+    }
+}
+
+void lv_example_dropdown_1(void)
+{
+
+    /*Create a normal drop down list*/
+    lv_obj_t * dd = lv_dropdown_create(lv_scr_act());
+    lv_dropdown_set_options(dd, "Apple\n"
+                            "Banana\n"
+                            "Orange\n"
+                            "Cherry\n"
+                            "Grape\n"
+                            "Raspberry\n"
+                            "Melon\n"
+                            "Orange\n"
+                            "Lemon\n"
+                            "Nuts");
+
+    lv_obj_align(dd, LV_ALIGN_TOP_MID, 0, 20);
+    lv_obj_add_event_cb(dd, event_handler, LV_EVENT_ALL, NULL);
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/dropdown/lv_example_dropdown_1.py

@@ -0,0 +1,26 @@
+def event_handler(e):
+    code = e.get_code()
+    obj = e.get_target()
+    if code == lv.EVENT.VALUE_CHANGED:
+        option = " "*10 # should be large enough to store the option
+        obj.get_selected_str(option, len(option))
+        # .strip() removes trailing spaces
+        print("Option: \"%s\"" % option.strip())
+
+# Create a normal drop down list
+dd = lv.dropdown(lv.scr_act())
+dd.set_options("\n".join([
+    "Apple",
+    "Banana",
+    "Orange",
+    "Cherry",
+    "Grape",
+    "Raspberry",
+    "Melon",
+    "Orange",
+    "Lemon",
+    "Nuts"]))
+
+dd.align(lv.ALIGN.TOP_MID, 0, 20)
+dd.add_event_cb(event_handler, lv.EVENT.ALL, None)
+

LVGL.Simulator/lvgl/examples/widgets/dropdown/lv_example_dropdown_2.c

@@ -0,0 +1,39 @@
+#include "../../lv_examples.h"
+#if LV_USE_DROPDOWN && LV_BUILD_EXAMPLES
+
+
+/**
+ * Create a drop down, up, left and right menus
+ */
+void lv_example_dropdown_2(void)
+{
+    static const char * opts = "Apple\n"
+                               "Banana\n"
+                               "Orange\n"
+                               "Melon";
+
+    lv_obj_t * dd;
+    dd = lv_dropdown_create(lv_scr_act());
+    lv_dropdown_set_options_static(dd, opts);
+    lv_obj_align(dd, LV_ALIGN_TOP_MID, 0, 10);
+
+    dd = lv_dropdown_create(lv_scr_act());
+    lv_dropdown_set_options_static(dd, opts);
+    lv_dropdown_set_dir(dd, LV_DIR_BOTTOM);
+    lv_dropdown_set_symbol(dd, LV_SYMBOL_UP);
+    lv_obj_align(dd, LV_ALIGN_BOTTOM_MID, 0, -10);
+
+    dd = lv_dropdown_create(lv_scr_act());
+    lv_dropdown_set_options_static(dd, opts);
+    lv_dropdown_set_dir(dd, LV_DIR_RIGHT);
+    lv_dropdown_set_symbol(dd, LV_SYMBOL_RIGHT);
+    lv_obj_align(dd, LV_ALIGN_LEFT_MID, 10, 0);
+
+    dd = lv_dropdown_create(lv_scr_act());
+    lv_dropdown_set_options_static(dd, opts);
+    lv_dropdown_set_dir(dd, LV_DIR_LEFT);
+    lv_dropdown_set_symbol(dd, LV_SYMBOL_LEFT);
+    lv_obj_align(dd, LV_ALIGN_RIGHT_MID, -10, 0);
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/dropdown/lv_example_dropdown_2.py

@@ -0,0 +1,34 @@
+#
+# Create a drop down, up, left and right menus
+#
+
+opts = "\n".join([
+    "Apple",
+    "Banana",
+    "Orange",
+    "Melon",
+    "Grape",
+    "Raspberry"])
+
+dd = lv.dropdown(lv.scr_act())
+dd.set_options_static(opts)
+dd.align(lv.ALIGN.TOP_MID, 0, 10)
+dd = lv.dropdown(lv.scr_act())
+dd.set_options_static(opts)
+dd.set_dir(lv.DIR.BOTTOM)
+dd.set_symbol(lv.SYMBOL.UP)
+dd.align(lv.ALIGN.BOTTOM_MID, 0, -10)
+
+dd = lv.dropdown(lv.scr_act())
+dd.set_options_static(opts)
+dd.set_dir(lv.DIR.RIGHT)
+dd.set_symbol(lv.SYMBOL.RIGHT)
+dd.align(lv.ALIGN.LEFT_MID, 10, 0)
+
+dd = lv.dropdown(lv.scr_act())
+dd.set_options_static(opts)
+dd.set_dir(lv.DIR.LEFT)
+dd.set_symbol(lv.SYMBOL.LEFT)
+dd.align(lv.ALIGN.RIGHT_MID, -10, 0)
+
+

LVGL.Simulator/lvgl/examples/widgets/dropdown/lv_example_dropdown_3.c

@@ -0,0 +1,43 @@
+#include "../../lv_examples.h"
+#if LV_USE_DROPDOWN && LV_BUILD_EXAMPLES
+
+static void event_cb(lv_event_t * e)
+{
+    lv_obj_t * dropdown = lv_event_get_target(e);
+    char buf[64];
+    lv_dropdown_get_selected_str(dropdown, buf, sizeof(buf));
+    LV_LOG_USER("'%s' is selected", buf);
+}
+
+/**
+ * Create a menu from a drop-down list and show some drop-down list features and styling
+ */
+void lv_example_dropdown_3(void)
+{
+    /*Create a drop down list*/
+    lv_obj_t * dropdown = lv_dropdown_create(lv_scr_act());
+    lv_obj_align(dropdown, LV_ALIGN_TOP_LEFT, 10, 10);
+    lv_dropdown_set_options(dropdown, "New project\n"
+                            "New file\n"
+                            "Save\n"
+                            "Save as ...\n"
+                            "Open project\n"
+                            "Recent projects\n"
+                            "Preferences\n"
+                            "Exit");
+
+    /*Set a fixed text to display on the button of the drop-down list*/
+    lv_dropdown_set_text(dropdown, "Menu");
+
+    /*Use a custom image as down icon and flip it when the list is opened*/
+    LV_IMG_DECLARE(img_caret_down)
+    lv_dropdown_set_symbol(dropdown, &img_caret_down);
+    lv_obj_set_style_transform_angle(dropdown, 1800, LV_PART_INDICATOR | LV_STATE_CHECKED);
+
+    /*In a menu we don't need to show the last clicked item*/
+    lv_dropdown_set_selected_highlight(dropdown, false);
+
+    lv_obj_add_event_cb(dropdown, event_cb, LV_EVENT_VALUE_CHANGED, NULL);
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/dropdown/lv_example_dropdown_3.py

@@ -0,0 +1,53 @@
+from imagetools import get_png_info, open_png
+
+# Register PNG image decoder
+decoder = lv.img.decoder_create()
+decoder.info_cb = get_png_info
+decoder.open_cb = open_png
+
+# Create an image from the png file
+try:
+    with open('../../assets/img_caret_down.png','rb') as f:
+        png_data = f.read()
+except:
+    print("Could not find img_caret_down.png")
+    sys.exit()
+
+img_caret_down_argb = lv.img_dsc_t({
+  'data_size': len(png_data),
+  'data': png_data
+})
+
+def event_cb(e):
+    dropdown = e.get_target()
+    option = " "*64 # should be large enough to store the option
+    dropdown.get_selected_str(option, len(option))
+    print(option.strip() +" is selected")
+#
+# Create a menu from a drop-down list and show some drop-down list features and styling
+#
+
+# Create a drop down list
+dropdown = lv.dropdown(lv.scr_act())
+dropdown.align(lv.ALIGN.TOP_LEFT, 10, 10)
+dropdown.set_options("\n".join([
+    "New project",
+    "New file",
+    "Open project",
+    "Recent projects",
+    "Preferences",
+    "Exit"]))
+
+# Set a fixed text to display on the button of the drop-down list
+dropdown.set_text("Menu")
+
+# Use a custom image as down icon and flip it when the list is opened
+# LV_IMG_DECLARE(img_caret_down)
+dropdown.set_symbol(img_caret_down_argb)
+dropdown.set_style_transform_angle(1800, lv.PART.INDICATOR | lv.STATE.CHECKED)
+
+# In a menu we don't need to show the last clicked item
+dropdown.set_selected_highlight(False)
+
+dropdown.add_event_cb(event_cb, lv.EVENT.VALUE_CHANGED, None)
+

LVGL.Simulator/lvgl/examples/widgets/img/index.rst

@@ -0,0 +1,28 @@
+
+Image from variable and symbol
+"""""""""""""""""""""""""""""""
+
+.. lv_example:: widgets/img/lv_example_img_1
+  :language: c
+
+
+Image recoloring
+""""""""""""""""
+
+.. lv_example:: widgets/img/lv_example_img_2
+  :language: c
+
+
+Rotate and zoom
+""""""""""""""""
+
+.. lv_example:: widgets/img/lv_example_img_3
+  :language: c
+
+Image offset and styling
+""""""""""""""""""""""""
+
+.. lv_example:: widgets/img/lv_example_img_4
+  :language: c
+
+

LVGL.Simulator/lvgl/examples/widgets/img/lv_example_img_1.c

@@ -0,0 +1,18 @@
+#include "../../lv_examples.h"
+#if LV_USE_IMG && LV_BUILD_EXAMPLES
+
+
+void lv_example_img_1(void)
+{
+    LV_IMG_DECLARE(img_cogwheel_argb);
+    lv_obj_t * img1 = lv_img_create(lv_scr_act());
+    lv_img_set_src(img1, &img_cogwheel_argb);
+    lv_obj_align(img1, LV_ALIGN_CENTER, 0, -20);
+    lv_obj_set_size(img1, 200, 200);
+
+    lv_obj_t * img2 = lv_img_create(lv_scr_act());
+    lv_img_set_src(img2, LV_SYMBOL_OK "Accept");
+    lv_obj_align_to(img2, img1, LV_ALIGN_OUT_BOTTOM_MID, 0, 20);
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/img/lv_example_img_1.py

@@ -0,0 +1,32 @@
+#!/opt/bin/lv_micropython -i
+import usys as sys
+import lvgl as lv
+import display_driver
+from imagetools import get_png_info, open_png
+
+# Register PNG image decoder
+decoder = lv.img.decoder_create()
+decoder.info_cb = get_png_info
+decoder.open_cb = open_png
+
+# Create an image from the png file
+try:
+    with open('../../assets/img_cogwheel_argb.png','rb') as f:
+        png_data = f.read()
+except:
+    print("Could not find img_cogwheel_argb.png")
+    sys.exit()
+
+img_cogwheel_argb = lv.img_dsc_t({
+  'data_size': len(png_data),
+  'data': png_data
+})
+
+img1 = lv.img(lv.scr_act())
+img1.set_src(img_cogwheel_argb)
+img1.align(lv.ALIGN.CENTER, 0, -20)
+img1.set_size(200, 200)
+
+img2 = lv.img(lv.scr_act())
+img2.set_src(lv.SYMBOL.OK + "Accept")
+img2.align_to(img1, lv.ALIGN.OUT_BOTTOM_MID, 0, 20)

LVGL.Simulator/lvgl/examples/widgets/img/lv_example_img_2.c

@@ -0,0 +1,64 @@
+#include "../../lv_examples.h"
+#if LV_USE_IMG && LV_USE_SLIDER && LV_BUILD_EXAMPLES
+
+static lv_obj_t * create_slider(lv_color_t color);
+static void slider_event_cb(lv_event_t * e);
+
+static lv_obj_t * red_slider, * green_slider, * blue_slider, * intense_slider;
+static lv_obj_t * img1;
+
+
+/**
+ * Demonstrate runtime image re-coloring
+ */
+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));
+    green_slider = create_slider(lv_palette_main(LV_PALETTE_GREEN));
+    blue_slider = create_slider(lv_palette_main(LV_PALETTE_BLUE));
+    intense_slider = create_slider(lv_palette_main(LV_PALETTE_GREY));
+
+    lv_slider_set_value(red_slider, LV_OPA_20, LV_ANIM_OFF);
+    lv_slider_set_value(green_slider, LV_OPA_90, LV_ANIM_OFF);
+    lv_slider_set_value(blue_slider, LV_OPA_60, LV_ANIM_OFF);
+    lv_slider_set_value(intense_slider, LV_OPA_50, LV_ANIM_OFF);
+
+    lv_obj_align(red_slider, LV_ALIGN_LEFT_MID, 25, 0);
+    lv_obj_align_to(green_slider, red_slider, LV_ALIGN_OUT_RIGHT_MID, 25, 0);
+    lv_obj_align_to(blue_slider, green_slider, LV_ALIGN_OUT_RIGHT_MID, 25, 0);
+    lv_obj_align_to(intense_slider, blue_slider, LV_ALIGN_OUT_RIGHT_MID, 25, 0);
+
+    /*Now create the actual image*/
+    LV_IMG_DECLARE(img_cogwheel_argb)
+    img1 = lv_img_create(lv_scr_act());
+    lv_img_set_src(img1, &img_cogwheel_argb);
+    lv_obj_align(img1, LV_ALIGN_RIGHT_MID, -20, 0);
+
+    lv_event_send(intense_slider, LV_EVENT_VALUE_CHANGED, NULL);
+}
+
+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));
+    lv_opa_t intense = lv_slider_get_value(intense_slider);
+    lv_obj_set_style_img_recolor_opa(img1, intense, 0);
+    lv_obj_set_style_img_recolor(img1, color, 0);
+}
+
+static lv_obj_t * create_slider(lv_color_t color)
+{
+    lv_obj_t * slider = lv_slider_create(lv_scr_act());
+    lv_slider_set_range(slider, 0, 255);
+    lv_obj_set_size(slider, 10, 200);
+    lv_obj_set_style_bg_color(slider, color, LV_PART_KNOB);
+    lv_obj_set_style_bg_color(slider, lv_color_darken(color, LV_OPA_40), LV_PART_INDICATOR);
+    lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
+    return slider;
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/img/lv_example_img_2.py

@@ -0,0 +1,70 @@
+#!/opt/bin/lv_micropython -i
+import usys as sys
+import lvgl as lv
+import display_driver
+from imagetools import get_png_info, open_png
+
+# Register PNG image decoder
+decoder = lv.img.decoder_create()
+decoder.info_cb = get_png_info
+decoder.open_cb = open_png
+
+# Create an image from the png file
+try:
+    with open('../../assets/img_cogwheel_argb.png','rb') as f:
+        png_data = f.read()
+except:
+    print("Could not find img_cogwheel_argb.png")
+    sys.exit()
+
+img_cogwheel_argb = lv.img_dsc_t({
+  'data_size': len(png_data),
+  'data': png_data
+})
+
+def create_slider(color):
+    slider = lv.slider(lv.scr_act())
+    slider.set_range(0, 255)
+    slider.set_size(10, 200)
+    slider.set_style_bg_color(color, lv.PART.KNOB)
+    slider.set_style_bg_color(color.color_darken(lv.OPA._40), lv.PART.INDICATOR)
+    slider.add_event_cb(slider_event_cb, lv.EVENT.VALUE_CHANGED, None)
+    return slider
+
+def slider_event_cb(e):
+    # Recolor the image based on the sliders' values
+    color  = lv.color_make(red_slider.get_value(), green_slider.get_value(), blue_slider.get_value())
+    intense = intense_slider.get_value()
+    img1.set_style_img_recolor_opa(intense, 0)
+    img1.set_style_img_recolor(color, 0)
+
+#
+# Demonstrate runtime image re-coloring
+#
+# Create 4 sliders to adjust RGB color and re-color intensity
+red_slider = create_slider(lv.palette_main(lv.PALETTE.RED))
+green_slider = create_slider(lv.palette_main(lv.PALETTE.GREEN))
+blue_slider = create_slider(lv.palette_main(lv.PALETTE.BLUE))
+intense_slider = create_slider(lv.palette_main(lv.PALETTE.GREY))
+
+red_slider.set_value(lv.OPA._20, lv.ANIM.OFF)
+green_slider.set_value(lv.OPA._90, lv.ANIM.OFF)
+blue_slider.set_value(lv.OPA._60, lv.ANIM.OFF)
+intense_slider.set_value(lv.OPA._50, lv.ANIM.OFF)
+
+red_slider.align(lv.ALIGN.LEFT_MID, 25, 0)
+green_slider.align_to(red_slider, lv.ALIGN.OUT_RIGHT_MID, 25, 0)
+blue_slider.align_to(green_slider, lv.ALIGN.OUT_RIGHT_MID, 25, 0)
+intense_slider.align_to(blue_slider, lv.ALIGN.OUT_RIGHT_MID, 25, 0)
+
+# Now create the actual image
+img1 = lv.img(lv.scr_act())
+img1.set_src(img_cogwheel_argb)
+img1.align(lv.ALIGN.RIGHT_MID, -20, 0)
+
+lv.event_send(intense_slider, lv.EVENT.VALUE_CHANGED, None)
+
+
+
+
+

LVGL.Simulator/lvgl/examples/widgets/img/lv_example_img_3.c

@@ -0,0 +1,43 @@
+#include "../../lv_examples.h"
+#if LV_USE_IMG && LV_BUILD_EXAMPLES
+
+static void set_angle(void * img, int32_t v)
+{
+    lv_img_set_angle(img, v);
+}
+
+static void set_zoom(void * img, int32_t v)
+{
+    lv_img_set_zoom(img, v);
+}
+
+
+/**
+ * Show transformations (zoom and rotation) using a pivot point.
+ */
+void lv_example_img_3(void)
+{
+    LV_IMG_DECLARE(img_cogwheel_argb);
+
+    /*Now create the actual image*/
+    lv_obj_t * img = lv_img_create(lv_scr_act());
+    lv_img_set_src(img, &img_cogwheel_argb);
+    lv_obj_align(img, LV_ALIGN_CENTER, 50, 50);
+    lv_img_set_pivot(img, 0, 0);    /*Rotate around the top left corner*/
+
+    lv_anim_t a;
+    lv_anim_init(&a);
+    lv_anim_set_var(&a, img);
+    lv_anim_set_exec_cb(&a, set_angle);
+    lv_anim_set_values(&a, 0, 3600);
+    lv_anim_set_time(&a, 5000);
+    lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
+    lv_anim_start(&a);
+
+    lv_anim_set_exec_cb(&a, set_zoom);
+    lv_anim_set_values(&a, 128, 256);
+    lv_anim_set_playback_time(&a, 3000);
+    lv_anim_start(&a);
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/img/lv_example_img_3.py

@@ -0,0 +1,61 @@
+#!/opt/bin/lv_micropython -i
+import usys as sys
+import lvgl as lv
+import display_driver
+from imagetools import get_png_info, open_png
+
+# Register PNG image decoder
+decoder = lv.img.decoder_create()
+decoder.info_cb = get_png_info
+decoder.open_cb = open_png
+
+# Create an image from the png file
+try:
+    with open('../../assets/img_cogwheel_argb.png','rb') as f:
+        png_data = f.read()
+except:
+    print("Could not find img_cogwheel_argb.png")
+    sys.exit()
+
+img_cogwheel_argb = lv.img_dsc_t({
+  'data_size': len(png_data),
+  'data': png_data
+})
+
+def set_angle(img, v):
+    img.set_angle(v)
+
+def set_zoom(img, v):
+    img.set_zoom(v)
+
+
+#
+# Show transformations (zoom and rotation) using a pivot point.
+#
+
+# Now create the actual image
+img = lv.img(lv.scr_act())
+img.set_src(img_cogwheel_argb)
+img.align(lv.ALIGN.CENTER, 50, 50)
+img.set_pivot(0, 0)               # Rotate around the top left corner
+
+a1 = lv.anim_t()
+a1.init()
+a1.set_var(img)
+a1.set_custom_exec_cb(lambda a,val: set_angle(img,val))
+a1.set_values(0, 3600)
+a1.set_time(5000)
+a1.set_repeat_count(lv.ANIM_REPEAT.INFINITE)
+lv.anim_t.start(a1)
+
+a2 = lv.anim_t()
+a2.init()
+a2.set_var(img)
+a2.set_custom_exec_cb(lambda a,val: set_zoom(img,val))
+a2.set_values(128, 256)
+a2.set_time(5000)
+a2.set_playback_time(3000)
+a2.set_repeat_count(lv.ANIM_REPEAT.INFINITE)
+lv.anim_t.start(a2)
+
+

LVGL.Simulator/lvgl/examples/widgets/img/lv_example_img_4.c

@@ -0,0 +1,41 @@
+#include "../../lv_examples.h"
+#if LV_USE_IMG && LV_BUILD_EXAMPLES
+
+static void ofs_y_anim(void * img, int32_t v)
+{
+    lv_img_set_offset_y(img, v);
+}
+
+/**
+ * Image styling and offset
+ */
+void lv_example_img_4(void)
+{
+    LV_IMG_DECLARE(img_skew_strip);
+
+    static lv_style_t style;
+    lv_style_init(&style);
+    lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_YELLOW));
+    lv_style_set_bg_opa(&style, LV_OPA_COVER);
+    lv_style_set_img_recolor_opa(&style, LV_OPA_COVER);
+    lv_style_set_img_recolor(&style, lv_color_black());
+
+    lv_obj_t * img = lv_img_create(lv_scr_act());
+    lv_obj_add_style(img, &style, 0);
+    lv_img_set_src(img, &img_skew_strip);
+    lv_obj_set_size(img, 150, 100);
+    lv_obj_center(img);
+
+    lv_anim_t a;
+    lv_anim_init(&a);
+    lv_anim_set_var(&a, img);
+    lv_anim_set_exec_cb(&a, ofs_y_anim);
+    lv_anim_set_values(&a, 0, 100);
+    lv_anim_set_time(&a, 3000);
+    lv_anim_set_playback_time(&a, 500);
+    lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
+    lv_anim_start(&a);
+
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/img/lv_example_img_4.py

@@ -0,0 +1,51 @@
+from imagetools import get_png_info, open_png
+
+def ofs_y_anim(img, v):
+    img.set_offset_y(v)
+    # print(img,v)
+
+# Register PNG image decoder
+decoder = lv.img.decoder_create()
+decoder.info_cb = get_png_info
+decoder.open_cb = open_png
+
+# Create an image from the png file
+try:
+    with open('../../assets/img_skew_strip.png','rb') as f:
+        png_data = f.read()
+except:
+    print("Could not find img_skew_strip.png")
+    sys.exit()
+
+img_skew_strip = lv.img_dsc_t({
+  'data_size': len(png_data),
+  'data': png_data
+})
+
+#
+# Image styling and offset
+#
+
+style = lv.style_t()
+style.init()
+style.set_bg_color(lv.palette_main(lv.PALETTE.YELLOW))
+style.set_bg_opa(lv.OPA.COVER)
+style.set_img_recolor_opa(lv.OPA.COVER)
+style.set_img_recolor(lv.color_black())
+
+img = lv.img(lv.scr_act())
+img.add_style(style, 0)
+img.set_src(img_skew_strip)
+img.set_size(150, 100)
+img.center()
+
+a = lv.anim_t()
+a.init()
+a.set_var(img)
+a.set_values(0, 100)
+a.set_time(3000)
+a.set_playback_time(500)
+a.set_repeat_count(lv.ANIM_REPEAT.INFINITE)
+a.set_custom_exec_cb(lambda a,val: ofs_y_anim(img,val))
+lv.anim_t.start(a)
+

LVGL.Simulator/lvgl/examples/widgets/imgbtn/index.rst

@@ -0,0 +1,7 @@
+
+Simple Image button
+"""""""""""""""""""
+
+.. lv_example:: widgets/imgbtn/lv_example_imgbtn_1
+  :language: c
+

LVGL.Simulator/lvgl/examples/widgets/imgbtn/lv_example_imgbtn_1.c

@@ -0,0 +1,41 @@
+#include "../../lv_examples.h"
+#if LV_USE_IMGBTN && LV_BUILD_EXAMPLES
+
+void lv_example_imgbtn_1(void)
+{
+    LV_IMG_DECLARE(imgbtn_left);
+    LV_IMG_DECLARE(imgbtn_right);
+    LV_IMG_DECLARE(imgbtn_mid);
+
+    /*Create a transition animation on width transformation and recolor.*/
+    static lv_style_prop_t tr_prop[] = {LV_STYLE_TRANSFORM_WIDTH, LV_STYLE_IMG_RECOLOR_OPA, 0};
+    static lv_style_transition_dsc_t tr;
+    lv_style_transition_dsc_init(&tr, tr_prop, lv_anim_path_linear, 200, 0, NULL);
+
+    static lv_style_t style_def;
+    lv_style_init(&style_def);
+    lv_style_set_text_color(&style_def, lv_color_white());
+    lv_style_set_transition(&style_def, &tr);
+
+    /*Darken the button when pressed and make it wider*/
+    static lv_style_t style_pr;
+    lv_style_init(&style_pr);
+    lv_style_set_img_recolor_opa(&style_pr, LV_OPA_30);
+    lv_style_set_img_recolor(&style_pr, lv_color_black());
+    lv_style_set_transform_width(&style_pr, 20);
+
+    /*Create an image button*/
+    lv_obj_t * imgbtn1 = lv_imgbtn_create(lv_scr_act());
+    lv_imgbtn_set_src(imgbtn1, LV_IMGBTN_STATE_RELEASED, &imgbtn_left, &imgbtn_mid, &imgbtn_right);
+    lv_obj_add_style(imgbtn1, &style_def, 0);
+    lv_obj_add_style(imgbtn1, &style_pr, LV_STATE_PRESSED);
+
+    lv_obj_align(imgbtn1, LV_ALIGN_CENTER, 0, 0);
+
+    /*Create a label on the image button*/
+    lv_obj_t * label = lv_label_create(imgbtn1);
+    lv_label_set_text(label, "Button");
+    lv_obj_align(label, LV_ALIGN_CENTER, 0, -4);
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/imgbtn/lv_example_imgbtn_1.py

@@ -0,0 +1,74 @@
+from imagetools import get_png_info, open_png
+
+# Register PNG image decoder
+decoder = lv.img.decoder_create()
+decoder.info_cb = get_png_info
+decoder.open_cb = open_png
+
+# Create an image from the png file
+try:
+    with open('../../assets/imgbtn_left.png','rb') as f:
+        imgbtn_left_data = f.read()
+except:
+    print("Could not find imgbtn_left.png")
+    sys.exit()
+
+imgbtn_left_dsc = lv.img_dsc_t({
+  'data_size': len(imgbtn_left_data),
+  'data': imgbtn_left_data
+})
+
+try:
+    with open('../../assets/imgbtn_mid.png','rb') as f:
+        imgbtn_mid_data = f.read()
+except:
+    print("Could not find imgbtn_mid.png")
+    sys.exit()
+
+imgbtn_mid_dsc = lv.img_dsc_t({
+  'data_size': len(imgbtn_mid_data),
+  'data': imgbtn_mid_data
+})
+
+try:
+    with open('../../assets/imgbtn_right.png','rb') as f:
+        imgbtn_right_data = f.read()
+except:
+    print("Could not find imgbtn_right.png")
+    sys.exit()
+
+imgbtn_right_dsc = lv.img_dsc_t({
+  'data_size': len(imgbtn_right_data),
+  'data': imgbtn_right_data
+})
+
+# Create a transition animation on width transformation and recolor.
+tr_prop = [lv.STYLE.TRANSFORM_WIDTH, lv.STYLE.IMG_RECOLOR_OPA, 0]
+tr = lv.style_transition_dsc_t()
+tr.init(tr_prop, lv.anim_t.path_linear, 200, 0, None)
+
+style_def = lv.style_t()
+style_def.init()
+style_def.set_text_color(lv.color_white())
+style_def.set_transition(tr)
+
+# Darken the button when pressed and make it wider
+style_pr = lv.style_t()
+style_pr.init()
+style_pr.set_img_recolor_opa(lv.OPA._30)
+style_pr.set_img_recolor(lv.color_black())
+style_pr.set_transform_width(20)
+
+# Create an image button
+imgbtn1 = lv.imgbtn(lv.scr_act())
+imgbtn1.set_src(lv.imgbtn.STATE.RELEASED, imgbtn_left_dsc, imgbtn_mid_dsc, imgbtn_right_dsc)
+imgbtn1.add_style(style_def, 0)
+imgbtn1.add_style(style_pr, lv.STATE.PRESSED)
+
+imgbtn1.align(lv.ALIGN.CENTER, 0, 0)
+
+# Create a label on the image button
+label = lv.label(imgbtn1)
+label.set_text("Button")
+label.align(lv.ALIGN.CENTER, 0, -4)
+

LVGL.Simulator/lvgl/examples/widgets/keyboard/index.rst

@@ -0,0 +1,7 @@
+
+Keyboard with text area
+"""""""""""""""""""""""
+
+.. lv_example:: widgets/keyboard/lv_example_keyboard_1
+  :language: c
+

LVGL.Simulator/lvgl/examples/widgets/keyboard/lv_example_keyboard_1.c

@@ -0,0 +1,40 @@
+#include "../../lv_examples.h"
+#if LV_USE_KEYBOARD && LV_BUILD_EXAMPLES
+
+static void ta_event_cb(lv_event_t * e)
+{
+    lv_event_code_t code = lv_event_get_code(e);
+    lv_obj_t * ta = lv_event_get_target(e);
+    lv_obj_t * kb = lv_event_get_user_data(e);
+    if(code == LV_EVENT_FOCUSED) {
+        lv_keyboard_set_textarea(kb, ta);
+        lv_obj_clear_flag(kb, LV_OBJ_FLAG_HIDDEN);
+    }
+
+    if(code == LV_EVENT_DEFOCUSED) {
+        lv_keyboard_set_textarea(kb, NULL);
+        lv_obj_add_flag(kb, LV_OBJ_FLAG_HIDDEN);
+    }
+}
+
+void lv_example_keyboard_1(void)
+{
+    /*Create a keyboard to use it with an of the text areas*/
+    lv_obj_t * kb = lv_keyboard_create(lv_scr_act());
+
+    /*Create a text area. The keyboard will write here*/
+    lv_obj_t * ta;
+    ta = lv_textarea_create(lv_scr_act());
+    lv_obj_align(ta, LV_ALIGN_TOP_LEFT, 10, 10);
+    lv_obj_add_event_cb(ta, ta_event_cb, LV_EVENT_ALL, kb);
+    lv_textarea_set_placeholder_text(ta, "Hello");
+    lv_obj_set_size(ta, 140, 80);
+
+    ta = lv_textarea_create(lv_scr_act());
+    lv_obj_align(ta, LV_ALIGN_TOP_RIGHT, -10, 10);
+    lv_obj_add_event_cb(ta, ta_event_cb, LV_EVENT_ALL, kb);
+    lv_obj_set_size(ta, 140, 80);
+
+    lv_keyboard_set_textarea(kb, ta);
+}
+#endif

LVGL.Simulator/lvgl/examples/widgets/keyboard/lv_example_keyboard_1.py

@@ -0,0 +1,28 @@
+def ta_event_cb(e,kb):
+    code = e.get_code()
+    ta = e.get_target()
+    if code == lv.EVENT.FOCUSED:
+        kb.set_textarea(ta)
+        kb.clear_flag(lv.obj.FLAG.HIDDEN)
+
+    if code == lv.EVENT.DEFOCUSED:
+        kb.set_textarea(None)
+        kb.add_flag(lv.obj.FLAG.HIDDEN)
+
+# Create a keyboard to use it with one of the text areas
+kb = lv.keyboard(lv.scr_act())
+
+# Create a text area. The keyboard will write here
+ta = lv.textarea(lv.scr_act())
+ta.set_width(200)
+ta.align(lv.ALIGN.TOP_LEFT, 10, 10)
+ta.add_event_cb(lambda e: ta_event_cb(e,kb), lv.EVENT.ALL, None)
+ta.set_placeholder_text("Hello")
+
+ta = lv.textarea(lv.scr_act())
+ta.set_width(200)
+ta.align(lv.ALIGN.TOP_RIGHT, -10, 10)
+ta.add_event_cb(lambda e: ta_event_cb(e,kb), lv.EVENT.ALL, None)
+
+kb.set_textarea(ta)
+

LVGL.Simulator/lvgl/examples/widgets/label/index.rst

@@ -0,0 +1,31 @@
+
+Line wrap, recoloring and scrolling
+"""""""""""""""""""""""""""""""""""
+
+.. lv_example:: widgets/label/lv_example_label_1
+  :language: c
+
+Text shadow
+""""""""""""
+
+.. lv_example:: widgets/label/lv_example_label_2
+  :language: c
+
+Show LTR, RTL and Chinese texts
+""""""""""""""""""""""""""""""""""""
+
+.. lv_example:: widgets/label/lv_example_label_3
+  :language: c
+
+Draw label with gradient color
+""""""""""""""""""""""""""""""""""""
+
+.. lv_example:: widgets/label/lv_example_label_4
+  :language: c
+
+Customize circular scrolling animation
+""""""""""""""""""""""""""""""""""""
+
+.. lv_example:: widgets/label/lv_example_label_5
+  :language: c
+

LVGL.Simulator/lvgl/examples/widgets/label/lv_example_label_1.c

@@ -0,0 +1,25 @@
+#include "../../lv_examples.h"
+#if LV_USE_LABEL && LV_BUILD_EXAMPLES
+
+/**
+ * Show line wrap, re-color, line align and text scrolling.
+ */
+void lv_example_label_1(void)
+{
+    lv_obj_t * label1 = lv_label_create(lv_scr_act());
+    lv_label_set_long_mode(label1, LV_LABEL_LONG_WRAP);     /*Break the long lines*/
+    lv_label_set_recolor(label1, true);                      /*Enable re-coloring by commands in the text*/
+    lv_label_set_text(label1, "#0000ff Re-color# #ff00ff words# #ff0000 of a# label, align the lines to the center "
+                      "and wrap long text automatically.");
+    lv_obj_set_width(label1, 150);  /*Set smaller width to make the lines wrap*/
+    lv_obj_set_style_text_align(label1, LV_TEXT_ALIGN_CENTER, 0);
+    lv_obj_align(label1, LV_ALIGN_CENTER, 0, -40);
+
+    lv_obj_t * label2 = lv_label_create(lv_scr_act());
+    lv_label_set_long_mode(label2, LV_LABEL_LONG_SCROLL_CIRCULAR);     /*Circular scroll*/
+    lv_obj_set_width(label2, 150);
+    lv_label_set_text(label2, "It is a circularly scrolling text. ");
+    lv_obj_align(label2, LV_ALIGN_CENTER, 0, 40);
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/label/lv_example_label_1.py

@@ -0,0 +1,19 @@
+#
+# Show line wrap, re-color, line align and text scrolling.
+#
+label1 = lv.label(lv.scr_act())
+label1.set_long_mode(lv.label.LONG.WRAP)      # Break the long lines*/
+label1.set_recolor(True)                      # Enable re-coloring by commands in the text
+label1.set_text("#0000ff Re-color# #ff00ff words# #ff0000 of a# label, align the lines to the center"
+                              "and  wrap long text automatically.")
+label1.set_width(150)                         # Set smaller width to make the lines wrap
+label1.set_style_text_align(lv.ALIGN.CENTER, 0)
+label1.align(lv.ALIGN.CENTER, 0, -40)
+
+
+label2 = lv.label(lv.scr_act())
+label2.set_long_mode(lv.label.LONG.SCROLL_CIRCULAR) # Circular scroll
+label2.set_width(150)
+label2.set_text("It is a circularly scrolling text. ")
+label2.align(lv.ALIGN.CENTER, 0, 40)
+

LVGL.Simulator/lvgl/examples/widgets/label/lv_example_label_2.c

@@ -0,0 +1,36 @@
+#include "../../lv_examples.h"
+#if LV_USE_LABEL && LV_BUILD_EXAMPLES
+
+/**
+ * Create a fake text shadow
+ */
+void lv_example_label_2(void)
+{
+    /*Create a style for the shadow*/
+    static lv_style_t style_shadow;
+    lv_style_init(&style_shadow);
+    lv_style_set_text_opa(&style_shadow, LV_OPA_30);
+    lv_style_set_text_color(&style_shadow, lv_color_black());
+
+    /*Create a label for the shadow first (it's in the background)*/
+    lv_obj_t * shadow_label = lv_label_create(lv_scr_act());
+    lv_obj_add_style(shadow_label, &style_shadow, 0);
+
+    /*Create the main label*/
+    lv_obj_t * main_label = lv_label_create(lv_scr_act());
+    lv_label_set_text(main_label, "A simple method to create\n"
+                      "shadows on a text.\n"
+                      "It even works with\n\n"
+                      "newlines     and spaces.");
+
+    /*Set the same text for the shadow label*/
+    lv_label_set_text(shadow_label, lv_label_get_text(main_label));
+
+    /*Position the main label*/
+    lv_obj_align(main_label, LV_ALIGN_CENTER, 0, 0);
+
+    /*Shift the second label down and to the right by 2 pixel*/
+    lv_obj_align_to(shadow_label, main_label, LV_ALIGN_TOP_LEFT, 2, 2);
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/label/lv_example_label_2.py

@@ -0,0 +1,30 @@
+#
+# Create a fake text shadow
+#
+
+# Create a style for the shadow
+style_shadow = lv.style_t()
+style_shadow.init()
+style_shadow.set_text_opa(lv.OPA._30)
+style_shadow.set_text_color(lv.color_black())
+
+# Create a label for the shadow first (it's in the background)
+shadow_label = lv.label(lv.scr_act())
+shadow_label.add_style(style_shadow, 0)
+
+# Create the main label
+main_label = lv.label(lv.scr_act())
+main_label.set_text("A simple method to create\n"
+                   "shadows on a text.\n"
+                   "It even works with\n\n"
+                   "newlines     and spaces.")
+
+# Set the same text for the shadow label
+shadow_label.set_text(lv.label.get_text(main_label))
+
+# Position the main label
+main_label.align(lv.ALIGN.CENTER, 0, 0)
+
+# Shift the second label down and to the right by 2 pixel
+shadow_label.align_to(main_label, lv.ALIGN.TOP_LEFT, 2, 2)
+

LVGL.Simulator/lvgl/examples/widgets/label/lv_example_label_3.c

@@ -0,0 +1,31 @@
+#include "../../lv_examples.h"
+#if LV_USE_LABEL && LV_BUILD_EXAMPLES && LV_FONT_DEJAVU_16_PERSIAN_HEBREW && LV_FONT_SIMSUN_16_CJK && LV_USE_BIDI
+
+/**
+ * Show mixed LTR, RTL and Chinese label
+ */
+void lv_example_label_3(void)
+{
+    lv_obj_t * ltr_label = lv_label_create(lv_scr_act());
+    lv_label_set_text(ltr_label, "In modern terminology, a microcontroller is similar to a system on a chip (SoC).");
+    lv_obj_set_style_text_font(ltr_label, &lv_font_montserrat_16, 0);
+    lv_obj_set_width(ltr_label, 310);
+    lv_obj_align(ltr_label, LV_ALIGN_TOP_LEFT, 5, 5);
+
+    lv_obj_t * rtl_label = lv_label_create(lv_scr_act());
+    lv_label_set_text(rtl_label,
+                      "מעבד, או בשמו המלא יחידת עיבוד מרכזית (באנגלית: CPU - Central Processing Unit).");
+    lv_obj_set_style_base_dir(rtl_label, LV_BASE_DIR_RTL, 0);
+    lv_obj_set_style_text_font(rtl_label, &lv_font_dejavu_16_persian_hebrew, 0);
+    lv_obj_set_width(rtl_label, 310);
+    lv_obj_align(rtl_label, LV_ALIGN_LEFT_MID, 5, 0);
+
+    lv_obj_t * cz_label = lv_label_create(lv_scr_act());
+    lv_label_set_text(cz_label,
+                      "嵌入式系统（Embedded System），\n是一种嵌入机械或电气系统内部、具有专一功能和实时计算性能的计算机系统。");
+    lv_obj_set_style_text_font(cz_label, &lv_font_simsun_16_cjk, 0);
+    lv_obj_set_width(cz_label, 310);
+    lv_obj_align(cz_label, LV_ALIGN_BOTTOM_LEFT, 5, -5);
+}
+
+#endif

LVGL.Simulator/lvgl/examples/widgets/label/lv_example_label_3.py

@@ -0,0 +1,36 @@
+import fs_driver
+#
+# Show mixed LTR, RTL and Chinese label
+#
+
+ltr_label = lv.label(lv.scr_act())
+ltr_label.set_text("In modern terminology, a microcontroller is similar to a system on a chip (SoC).")
+# ltr_label.set_style_text_font(ltr_label, &lv_font_montserrat_16, 0);
+
+fs_drv = lv.fs_drv_t()
+fs_driver.fs_register(fs_drv, 'S')
+
+try:
+    ltr_label.set_style_text_font(ltr_label, lv.font_montserrat_16, 0)
+except:
+    font_montserrat_16 = lv.font_load("S:../../assets/font/montserrat-16.fnt")
+    ltr_label.set_style_text_font(font_montserrat_16, 0)
+
+ltr_label.set_width(310)
+ltr_label.align(lv.ALIGN.TOP_LEFT, 5, 5)
+
+rtl_label = lv.label(lv.scr_act())
+rtl_label.set_text("מעבד, או בשמו המלא יחידת עיבוד מרכזית (באנגלית: CPU - Central Processing Unit).")
+rtl_label.set_style_base_dir(lv.BASE_DIR.RTL, 0)
+rtl_label.set_style_text_font(lv.font_dejavu_16_persian_hebrew, 0)
+rtl_label.set_width(310)
+rtl_label.align(lv.ALIGN.LEFT_MID, 5, 0)
+
+font_simsun_16_cjk = lv.font_load("S:../../assets/font/lv_font_simsun_16_cjk.fnt")
+
+cz_label = lv.label(lv.scr_act())
+cz_label.set_style_text_font(font_simsun_16_cjk, 0)
+cz_label.set_text("嵌入式系统（Embedded System），\n是一种嵌入机械或电气系统内部、具有专一功能和实时计算性能的计算机系统。")
+cz_label.set_width(310)
+cz_label.align(lv.ALIGN.BOTTOM_LEFT, 5, -5)
+

LVGL.Simulator/lvgl/examples/widgets/label/lv_example_label_4.c

@@ -0,0 +1,63 @@
+#include "../../lv_examples.h"
+#if LV_USE_LABEL && LV_USE_CANVAS && LV_BUILD_EXAMPLES && LV_DRAW_COMPLEX
+
+#define MASK_WIDTH 100
+#define MASK_HEIGHT 45
+
+static void add_mask_event_cb(lv_event_t * e)
+{
+    static lv_draw_mask_map_param_t m;
+    static int16_t mask_id;
+
+    lv_event_code_t code = lv_event_get_code(e);
+    lv_obj_t * obj = lv_event_get_target(e);
+    lv_opa_t * mask_map = lv_event_get_user_data(e);
+    if(code == LV_EVENT_COVER_CHECK) {
+        lv_event_set_cover_res(e, LV_COVER_RES_MASKED);
+    }
+    else if(code == LV_EVENT_DRAW_MAIN_BEGIN) {
+        lv_draw_mask_map_init(&m, &obj->coords, mask_map);
+        mask_id = lv_draw_mask_add(&m, NULL);
+
+    }
+    else if(code == LV_EVENT_DRAW_MAIN_END) {
+        lv_draw_mask_free_param(&m);
+        lv_draw_mask_remove_id(mask_id);
+    }
+}
+
+/**
+ * Draw label with gradient color
+ */
+void lv_example_label_4(void)
+{
+    /* Create the mask of a text by drawing it to a canvas*/
+    static lv_opa_t mask_map[MASK_WIDTH * MASK_HEIGHT];
+
+    /*Create a "8 bit alpha" canvas and clear it*/
+    lv_obj_t * canvas = lv_canvas_create(lv_scr_act());
+    lv_canvas_set_buffer(canvas, mask_map, MASK_WIDTH, MASK_HEIGHT, LV_IMG_CF_ALPHA_8BIT);
+    lv_canvas_fill_bg(canvas, lv_color_black(), LV_OPA_TRANSP);
+
+    /*Draw a label to the canvas. The result "image" will be used as mask*/
+    lv_draw_label_dsc_t label_dsc;
+    lv_draw_label_dsc_init(&label_dsc);
+    label_dsc.color = lv_color_white();
+    label_dsc.align = LV_TEXT_ALIGN_CENTER;
+    lv_canvas_draw_text(canvas, 5, 5, MASK_WIDTH, &label_dsc, "Text with gradient");
+
+    /*The mask is reads the canvas is not required anymore*/
+    lv_obj_del(canvas);
+
+    /* Create an object from where the text will be masked out.
+     * Now it's a rectangle with a gradient but it could be an image too*/
+    lv_obj_t * grad = lv_obj_create(lv_scr_act());
+    lv_obj_set_size(grad, MASK_WIDTH, MASK_HEIGHT);
+    lv_obj_center(grad);
+    lv_obj_set_style_bg_color(grad, lv_color_hex(0xff0000), 0);
+    lv_obj_set_style_bg_grad_color(grad, lv_color_hex(0x0000ff), 0);
+    lv_obj_set_style_bg_grad_dir(grad, LV_GRAD_DIR_HOR, 0);
+    lv_obj_add_event_cb(grad, add_mask_event_cb, LV_EVENT_ALL, mask_map);
+}
+
+#endif