A39模拟器

2024-03-07 11:03:18 +08:00
parent cb2cc0d66f
commit 33e6eb45b3
1008 changed files with 2222717 additions and 0 deletions
--- a/MXC-A39/lvgl/examples/widgets/animimg/lv_example_animimg_1.c
+++ b/MXC-A39/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
--- a/MXC-A39/lvgl/examples/widgets/arc/index.rst
+++ b/MXC-A39/lvgl/examples/widgets/arc/index.rst
@ -0,0 +1,19 @@
+C
+^
+
+Simple Arc 
+""""""""""""""""
+
+.. lv_example:: widgets/arc/lv_example_arc_1
+  :language: c
+
+Loader with Arc 
+""""""""""""""""
+
+.. lv_example:: widgets/arc/lv_example_arc_2
+  :language: c
+
+MicroPython
+^^^^^^^^^^^
+
+No examples yet.
--- a/MXC-A39/lvgl/examples/widgets/arc/lv_example_arc_1.c
+++ b/MXC-A39/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
--- a/MXC-A39/lvgl/examples/widgets/arc/lv_example_arc_1.py
+++ b/MXC-A39/lvgl/examples/widgets/arc/lv_example_arc_1.py
@ -0,0 +1,12 @@
+# Create style for the Arcs
+style = lv.style_t()
+lv.style_copy(style, lv.style_plain)
+style.line.color = lv.color_make(0,0,255) # Arc color
+style.line.width = 8                      # Arc width
+
+# Create an Arc
+arc = lv.arc(lv.scr_act())
+arc.set_style(lv.arc.STYLE.MAIN, style)   # Use the new style
+arc.set_angles(90, 60)
+arc.set_size(150, 150)
+arc.align(None, lv.ALIGN.CENTER, 0, 0)
--- a/MXC-A39/lvgl/examples/widgets/arc/lv_example_arc_2.c
+++ b/MXC-A39/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
--- a/MXC-A39/lvgl/examples/widgets/arc/lv_example_arc_2.py
+++ b/MXC-A39/lvgl/examples/widgets/arc/lv_example_arc_2.py
@ -0,0 +1,43 @@
+# Create an arc which acts as a loader.
+class loader_arc(lv.arc):
+
+    def __init__(self, parent, color=lv.color_hex(0x000080), 
+                       width=8, style=lv.style_plain, rate=20):
+        super().__init__(parent)
+        
+        self.a = 0
+        self.rate = rate
+
+        # Create style for the Arcs
+        self.style = lv.style_t()
+        lv.style_copy(self.style, style)
+        self.style.line.color = color
+        self.style.line.width = width
+
+        # Create an Arc
+        self.set_angles(180, 180);
+        self.set_style(self.STYLE.MAIN, self.style);
+
+        # Spin the Arc
+        self.spin()
+
+    def spin(self):
+        # Create an `lv_task` to update the arc.
+        lv.task_create(self.task_cb, self.rate, lv.TASK_PRIO.LOWEST, {})
+
+    
+    # An `lv_task` to call periodically to set the angles of the arc
+    def task_cb(self, task):
+        self.a+=5;
+        if self.a >= 359: self.a = 359
+
+        if self.a < 180: self.set_angles(180-self.a, 180)
+        else: self.set_angles(540-self.a, 180)
+
+        if self.a == 359:
+            self.a = 0
+            lv.task_del(task)
+
+# Create a loader arc
+loader_arc = loader_arc(lv.scr_act())
+loader_arc.align(None, lv.ALIGN.CENTER, 0, 0)
--- a/MXC-A39/lvgl/examples/widgets/bar/index.rst
+++ b/MXC-A39/lvgl/examples/widgets/bar/index.rst
@ -0,0 +1,42 @@
+C
+^
+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 RTL and RTL base direction
+""""""""""""""""""""""""""""""""""""
+
+.. lv_example:: widgets/bar/lv_example_bar_5
+  :language: c
+
+Custom drawr to show the current value
+"""""""""""""""""""""""""""""""""""""""
+
+.. lv_example:: widgets/bar/lv_example_bar_6
+  :language: c
+  
+MicroPython
+^^^^^^^^^^^
+
+No examples yet.
--- a/MXC-A39/lvgl/examples/widgets/bar/lv_example_bar_1.c
+++ b/MXC-A39/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
--- a/MXC-A39/lvgl/examples/widgets/bar/lv_example_bar_1.py
+++ b/MXC-A39/lvgl/examples/widgets/bar/lv_example_bar_1.py
@ -0,0 +1,5 @@
+bar1 = lv.bar(lv.scr_act())
+bar1.set_size(200, 30)
+bar1.align(None, lv.ALIGN.CENTER, 0, 0)
+bar1.set_anim_time(1000)
+bar1.set_value(100, lv.ANIM.ON)
--- a/MXC-A39/lvgl/examples/widgets/bar/lv_example_bar_2.c
+++ b/MXC-A39/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
--- a/MXC-A39/lvgl/examples/widgets/bar/lv_example_bar_3.c
+++ b/MXC-A39/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
--- a/MXC-A39/lvgl/examples/widgets/bar/lv_example_bar_4.c
+++ b/MXC-A39/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
--- a/MXC-A39/lvgl/examples/widgets/bar/lv_example_bar_5.c
+++ b/MXC-A39/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
--- a/MXC-A39/lvgl/examples/widgets/bar/lv_example_bar_6.c
+++ b/MXC-A39/lvgl/examples/widgets/bar/lv_example_bar_6.c
@ -0,0 +1,68 @@
+#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", 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(&txt_area, dsc->clip_area, &label_dsc, 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
--- a/MXC-A39/lvgl/examples/widgets/btn/index.rst
+++ b/MXC-A39/lvgl/examples/widgets/btn/index.rst
@ -0,0 +1,26 @@
+C
+^
+
+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
+
+MicroPython
+^^^^^^^^^^^
+
+No examples yet.
--- a/MXC-A39/lvgl/examples/widgets/btn/lv_example_btn_1.c
+++ b/MXC-A39/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
--- a/MXC-A39/lvgl/examples/widgets/btn/lv_example_btn_1.py
+++ b/MXC-A39/lvgl/examples/widgets/btn/lv_example_btn_1.py
@ -0,0 +1,21 @@
+def event_handler(obj, event):
+    if event == lv.EVENT.CLICKED:
+        print("Clicked")
+
+btn1 = lv.btn(lv.scr_act())
+btn1.set_event_cb(event_handler)
+btn1.align(None, lv.ALIGN.CENTER, 0, -40)
+
+label = lv.label(btn1)
+label.set_text("Button")
+
+btn2 = lv.btn(lv.scr_act())
+# callback can be lambda:
+btn2.set_event_cb(lambda obj, event: print("Toggled") if event == lv.EVENT.VALUE_CHANGED else None)
+btn2.align(None, lv.ALIGN.CENTER, 0, 40)
+btn2.set_toggle(True)
+btn2.toggle()
+btn2.set_fit2(lv.FIT.NONE, lv.FIT.TIGHT)
+
+label = lv.label(btn2)
+label.set_text("Toggled")
--- a/MXC-A39/lvgl/examples/widgets/btn/lv_example_btn_2.c
+++ b/MXC-A39/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);
+
+    /*Ad 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 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
--- a/MXC-A39/lvgl/examples/widgets/btn/lv_example_btn_3.c
+++ b/MXC-A39/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
--- a/MXC-A39/lvgl/examples/widgets/btnmatrix/index.rst
+++ b/MXC-A39/lvgl/examples/widgets/btnmatrix/index.rst
@ -0,0 +1,28 @@
+C
+^
+
+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
+
+
+MicroPython
+^^^^^^^^^^^
+
+No examples yet.
--- a/MXC-A39/lvgl/examples/widgets/btnmatrix/lv_example_btnmatrix_1.c
+++ b/MXC-A39/lvgl/examples/widgets/btnmatrix/lv_example_btnmatrix_1.c
@ -0,0 +1,32 @@
+#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
--- a/MXC-A39/lvgl/examples/widgets/btnmatrix/lv_example_btnmatrix_1.py
+++ b/MXC-A39/lvgl/examples/widgets/btnmatrix/lv_example_btnmatrix_1.py
@ -0,0 +1,14 @@
+def event_handler(obj, event):
+    if event == lv.EVENT.VALUE_CHANGED:
+        txt = obj.get_active_btn_text()
+        print("%s was pressed" % txt)
+
+btnm_map = ["1", "2", "3", "4", "5", "\n",
+            "6", "7", "8", "9", "0", "\n",
+            "Action1", "Action2", ""]
+
+btnm1 = lv.btnm(lv.scr_act())
+btnm1.set_map(btnm_map)
+btnm1.set_btn_width(10, 2)        # Make "Action1" twice as wide as "Action2"
+btnm1.align(None, lv.ALIGN.CENTER, 0, 0)
+btnm1.set_event_cb(event_handler)
--- a/MXC-A39/lvgl/examples/widgets/btnmatrix/lv_example_btnmatrix_2.c
+++ b/MXC-A39/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(&a, dsc->clip_area, &img_star, &img_draw_dsc);
+        }
+    }
+}
+
+/**
+ * Add custom drawer to the button matrix to customize butons 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
--- a/MXC-A39/lvgl/examples/widgets/btnmatrix/lv_example_btnmatrix_3.c
+++ b/MXC-A39/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
--- a/MXC-A39/lvgl/examples/widgets/calendar/index.rst
+++ b/MXC-A39/lvgl/examples/widgets/calendar/index.rst
@ -0,0 +1,13 @@
+C
+^
+
+Calendar with header 
+""""""""""""""""""""""
+
+.. lv_example:: widgets/calendar/lv_example_calendar_1
+  :language: c
+
+MicroPython
+^^^^^^^^^^^
+
+No examples yet.
--- a/MXC-A39/lvgl/examples/widgets/calendar/lv_example_calendar_1.c
+++ b/MXC-A39/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_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(lv_scr_act(), calendar);
+#elif LV_USE_CALENDAR_HEADER_ARROW
+
+    lv_calendar_header_arrow_create(lv_scr_act(), calendar, 25);
+#endif
+}
+
+#endif
--- a/MXC-A39/lvgl/examples/widgets/canvas/index.rst
+++ b/MXC-A39/lvgl/examples/widgets/canvas/index.rst
@ -0,0 +1,19 @@
+C
+^
+
+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
+
+MicroPython
+^^^^^^^^^^^
+
+No examples yet.
--- a/MXC-A39/lvgl/examples/widgets/canvas/lv_example_canvas_1.c
+++ b/MXC-A39/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_color = lv_palette_main(LV_PALETTE_RED);
+    rect_dsc.bg_grad_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_YELLOW);
+
+    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 an other buffer where the orignal 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, 30, LV_IMG_ZOOM_NONE, 0, 0, CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2, true);
+}
+
+#endif
--- a/MXC-A39/lvgl/examples/widgets/canvas/lv_example_canvas_1.py
+++ b/MXC-A39/lvgl/examples/widgets/canvas/lv_example_canvas_1.py
@ -0,0 +1,38 @@
+CANVAS_WIDTH  = 200
+CANVAS_HEIGHT = 150
+
+style = lv.style_t()
+lv.style_copy(style, lv.style_plain)
+style.body.main_color = lv.color_make(0xFF,0,0)
+style.body.grad_color = lv.color_make(0x80,0,0)
+style.body.radius = 4
+style.body.border.width = 2
+style.body.border.color = lv.color_make(0xFF,0xFF,0xFF)
+style.body.shadow.color = lv.color_make(0xFF,0xFF,0xFF)
+style.body.shadow.width = 4
+style.line.width = 2
+style.line.color = lv.color_make(0,0,0)
+style.text.color = lv.color_make(0,0,0xFF)
+
+# CF.TRUE_COLOR requires 4 bytes per pixel
+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.align(None, lv.ALIGN.CENTER, 0, 0)
+canvas.fill_bg(lv.color_make(0xC0, 0xC0, 0xC0))
+
+canvas.draw_rect(70, 60, 100, 70, style)
+
+canvas.draw_text(40, 20, 100, style, "Some text on text canvas", lv.label.ALIGN.LEFT)
+
+# Test the rotation. It requires an other buffer where the orignal 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.color_make(0xC0, 0xC0, 0xC0))
+canvas.rotate(img, 30, 0, 0, CANVAS_WIDTH // 2, CANVAS_HEIGHT // 2)
--- a/MXC-A39/lvgl/examples/widgets/canvas/lv_example_canvas_2.c
+++ b/MXC-A39/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 the 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(canvas, x, y, c0);
+        }
+    }
+
+}
+#endif
--- a/MXC-A39/lvgl/examples/widgets/canvas/lv_example_canvas_2.py
+++ b/MXC-A39/lvgl/examples/widgets/canvas/lv_example_canvas_2.py
@ -0,0 +1,41 @@
+# Create a transparent canvas with Chroma keying and indexed color format (palette).
+
+CANVAS_WIDTH  = 50
+CANVAS_HEIGHT = 50
+
+def bufsize(w, h, bits, indexed=False):
+    """this function determines required buffer size
+       depending on the color depth"""
+    size = (w * bits // 8 + 1) * h
+    if indexed:
+        # + 4 bytes per palette color
+        size += 4 * (2**bits)
+    return size
+
+# Create a button to better see the transparency
+lv.btn(lv.scr_act())
+
+# Create a buffer for the canvas
+cbuf = bytearray(bufsize(CANVAS_WIDTH, CANVAS_HEIGHT, 1, indexed=True))
+
+# Create a canvas and initialize its the palette
+canvas = lv.canvas(lv.scr_act())
+canvas.set_buffer(cbuf, CANVAS_WIDTH, CANVAS_HEIGHT, lv.img.CF.INDEXED_1BIT)
+# transparent color can be defined in lv_conf.h and set to pure green by default
+canvas.set_palette(0, lv.color_make(0x00, 0xFF, 0x00))
+canvas.set_palette(1, lv.color_make(0xFF, 0x00, 0x00))
+
+# Create colors with the indices of the palette
+c0 = lv.color_t()
+c1 = lv.color_t()
+
+c0.full = 0
+c1.full = 1
+
+# Transparent background
+canvas.fill_bg(c1)
+
+# Create hole on the canvas
+for y in range(10,30):
+    for x in range(5, 20):
+        canvas.set_px(x, y, c0)
--- a/MXC-A39/lvgl/examples/widgets/chart/index.rst
+++ b/MXC-A39/lvgl/examples/widgets/chart/index.rst
@ -0,0 +1,51 @@
+C
+^
+
+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
+
+
+MicroPython
+^^^^^^^^^^^
+
+No examples yet.
--- a/MXC-A39/lvgl/examples/widgets/chart/lv_example_chart_1.c
+++ b/MXC-A39/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
--- a/MXC-A39/lvgl/examples/widgets/chart/lv_example_chart_1.py
+++ b/MXC-A39/lvgl/examples/widgets/chart/lv_example_chart_1.py
@ -0,0 +1,19 @@
+# Create a chart
+chart = lv.chart(lv.scr_act())
+chart.set_size(200, 150)
+chart.align(None, lv.ALIGN.CENTER, 0, 0)
+chart.set_type(lv.chart.TYPE.POINT | lv.chart.TYPE.LINE)   # Show lines and points too
+chart.set_series_opa(lv.OPA._70)                           # Opacity of the data series
+chart.set_series_width(4)                                  # Line width and point radious
+
+chart.set_range(0, 100)
+
+# Add two data series
+ser1 = chart.add_series(lv.color_make(0xFF,0,0))
+ser2 = chart.add_series(lv.color_make(0,0x80,0))
+
+# Set points on 'dl1'
+chart.set_points(ser1, [10, 10, 10, 10, 10, 10, 10, 30, 70, 90])
+
+# Set points on 'dl2'
+chart.set_points(ser2, [90, 70, 65, 65, 65, 65, 65, 65, 65, 65])
--- a/MXC-A39/lvgl/examples/widgets/chart/lv_example_chart_2.c
+++ b/MXC-A39/lvgl/examples/widgets/chart/lv_example_chart_2.c
@ -0,0 +1,125 @@
+#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(&a, dsc->clip_area, &draw_rect_dsc);
+
+        /*Remove the masks*/
+        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) 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
--- a/MXC-A39/lvgl/examples/widgets/chart/lv_example_chart_3.c
+++ b/MXC-A39/lvgl/examples/widgets/chart/lv_example_chart_3.c
@ -0,0 +1,73 @@
+#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_param(e);
+    if(dsc->part == LV_PART_TICKS && dsc->id == LV_CHART_AXIS_PRIMARY_X) {
+        const char * month[] = {"Jan", "Febr", "March", "Apr", "May", "Jun", "July", "Aug", "Sept", "Oct", "Nov", "Dec"};
+        lv_snprintf(dsc->text, sizeof(dsc->text), "%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
--- a/MXC-A39/lvgl/examples/widgets/chart/lv_example_chart_4.c
+++ b/MXC-A39/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", 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;
+
+            const lv_area_t * clip_area = lv_event_get_clip_area(e);
+            lv_draw_rect(&a, clip_area, &draw_rect_dsc);
+
+            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
--- a/MXC-A39/lvgl/examples/widgets/chart/lv_example_chart_5.c
+++ b/MXC-A39/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
--- a/MXC-A39/lvgl/examples/widgets/chart/lv_example_chart_6.c
+++ b/MXC-A39/lvgl/examples/widgets/chart/lv_example_chart_6.c
@ -0,0 +1,86 @@
+#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(dsc->part == LV_PART_CURSOR && dsc->p1 && dsc->p2 && dsc->p1->y == dsc->p2->y && last_id >= 0) {
+            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(&a, dsc->clip_area, &draw_rect_dsc);
+
+            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(&a, dsc->clip_area, &draw_label_dsc, 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
--- a/MXC-A39/lvgl/examples/widgets/chart/lv_example_chart_7.c
+++ b/MXC-A39/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
--- a/MXC-A39/lvgl/examples/widgets/checkbox/index.rst
+++ b/MXC-A39/lvgl/examples/widgets/checkbox/index.rst
@ -0,0 +1,13 @@
+C
+^
+
+Simple Checkboxes
+"""""""""""""""""
+
+.. lv_example:: widgets/checkbox/lv_example_checkbox_1
+  :language: c
+
+MicroPython
+^^^^^^^^^^^
+
+No examples yet.
--- a/MXC-A39/lvgl/examples/widgets/checkbox/lv_example_checkbox_1.c
+++ b/MXC-A39/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
--- a/MXC-A39/lvgl/examples/widgets/checkbox/lv_example_checkbox_1.py
+++ b/MXC-A39/lvgl/examples/widgets/checkbox/lv_example_checkbox_1.py
@ -0,0 +1,8 @@
+def event_handler(obj, event):
+    if event == lv.EVENT.VALUE_CHANGED:
+        print("State: %s" % ("Checked" if obj.is_checked() else "Unchecked"))
+
+cb = lv.cb(lv.scr_act())
+cb.set_text("I agree to terms and conditions.")
+cb.align(None, lv.ALIGN.CENTER, 0, 0)
+cb.set_event_cb(event_handler)
--- a/MXC-A39/lvgl/examples/widgets/colorwheel/index.rst
+++ b/MXC-A39/lvgl/examples/widgets/colorwheel/index.rst
@ -0,0 +1,13 @@
+C
+^
+
+Simple Colorwheel
+"""""""""""""""""
+
+.. lv_example:: widgets/colorwheel/lv_example_colorwheel_1
+  :language: c
+
+MicroPython
+^^^^^^^^^^^
+
+No examples yet.
--- a/MXC-A39/lvgl/examples/widgets/colorwheel/lv_example_colorwheel_1.c
+++ b/MXC-A39/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
--- a/MXC-A39/lvgl/examples/widgets/dropdown/index.rst
+++ b/MXC-A39/lvgl/examples/widgets/dropdown/index.rst
@ -0,0 +1,26 @@
+C
+^
+
+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
+
+MicroPython
+^^^^^^^^^^^
+
+No examples yet.
--- a/MXC-A39/lvgl/examples/widgets/dropdown/lv_example_dropdown_1.c
+++ b/MXC-A39/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
--- a/MXC-A39/lvgl/examples/widgets/dropdown/lv_example_dropdown_1.py
+++ b/MXC-A39/lvgl/examples/widgets/dropdown/lv_example_dropdown_1.py
@ -0,0 +1,21 @@
+def event_handler(obj, event):
+    if event == 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 drop down list
+ddlist = lv.ddlist(lv.scr_act())
+ddlist.set_options("\n".join([
+                    "Apple",
+                    "Banana",
+                    "Orange",
+                    "Melon",
+                    "Grape",
+                    "Raspberry"]))
+
+ddlist.set_fix_width(150)
+ddlist.set_draw_arrow(True)
+ddlist.align(None, lv.ALIGN.IN_TOP_MID, 0, 20)
+ddlist.set_event_cb(event_handler)
--- a/MXC-A39/lvgl/examples/widgets/dropdown/lv_example_dropdown_2.c
+++ b/MXC-A39/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
--- a/MXC-A39/lvgl/examples/widgets/dropdown/lv_example_dropdown_2.py
+++ b/MXC-A39/lvgl/examples/widgets/dropdown/lv_example_dropdown_2.py
@ -0,0 +1,23 @@
+# Create a drop UP list by applying auto realign
+
+# Create a drop down list
+ddlist = lv.ddlist(lv.scr_act())
+ddlist.set_options("\n".join([
+                    "Apple",
+                    "Banana",
+                    "Orange",
+                    "Melon",
+                    "Grape",
+                    "Raspberry"]))
+
+
+ddlist.set_fix_width(150)
+ddlist.set_fix_height(150)
+ddlist.set_draw_arrow(True)
+
+# Enable auto-realign when the size changes.
+# It will keep the bottom of the ddlist fixed
+ddlist.set_auto_realign(True)
+
+# It will be called automatically when the size changes
+ddlist.align(None, lv.ALIGN.IN_BOTTOM_MID, 0, -20)
--- a/MXC-A39/lvgl/examples/widgets/dropdown/lv_example_dropdown_3.c
+++ b/MXC-A39/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
--- a/MXC-A39/lvgl/examples/widgets/img/index.rst
+++ b/MXC-A39/lvgl/examples/widgets/img/index.rst
@ -0,0 +1,34 @@
+C
+^
+
+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
+
+
+MicroPython
+^^^^^^^^^^^
+
+No examples yet.
--- a/MXC-A39/lvgl/examples/widgets/img/lv_example_img_1.c
+++ b/MXC-A39/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
--- a/MXC-A39/lvgl/examples/widgets/img/lv_example_img_1.py
+++ b/MXC-A39/lvgl/examples/widgets/img/lv_example_img_1.py
@ -0,0 +1,29 @@
+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 a screen with a draggable image
+
+with open('cogwheel.png','rb') as f:
+  png_data = f.read()
+
+png_img_dsc = lv.img_dsc_t({
+    'data_size': len(png_data),
+    'data': png_data 
+})
+
+scr = lv.scr_act()
+
+# Create an image on the left using the decoder
+
+# lv.img.cache_set_size(2)
+img1 = lv.img(scr)
+img1.align(scr, lv.ALIGN.CENTER, 0, -20)
+img1.set_src(png_img_dsc)
+
+img2 = lv.img(scr)
+img2.set_src(lv.SYMBOL.OK + "Accept")
+img2.align(img1, lv.ALIGN.OUT_BOTTOM_MID, 0, 20)
--- a/MXC-A39/lvgl/examples/widgets/img/lv_example_img_2.c
+++ b/MXC-A39/lvgl/examples/widgets/img/lv_example_img_2.c
@ -0,0 +1,63 @@
+#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
--- a/MXC-A39/lvgl/examples/widgets/img/lv_example_img_3.c
+++ b/MXC-A39/lvgl/examples/widgets/img/lv_example_img_3.c
@ -0,0 +1,44 @@
+#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
--- a/MXC-A39/lvgl/examples/widgets/img/lv_example_img_4.c
+++ b/MXC-A39/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
--- a/MXC-A39/lvgl/examples/widgets/imgbtn/index.rst
+++ b/MXC-A39/lvgl/examples/widgets/imgbtn/index.rst
@ -0,0 +1,13 @@
+C
+^
+
+Simple Image button 
+"""""""""""""""""""
+
+.. lv_example:: widgets/imgbtn/lv_example_imgbtn_1
+  :language: c
+
+MicroPython
+^^^^^^^^^^^
+
+No examples yet.
--- a/MXC-A39/lvgl/examples/widgets/imgbtn/lv_example_imgbtn_1.c
+++ b/MXC-A39/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
--- a/MXC-A39/lvgl/examples/widgets/keyboard/index.rst
+++ b/MXC-A39/lvgl/examples/widgets/keyboard/index.rst
@ -0,0 +1,16 @@
+C
+^
+
+Keyboard with text area 
+"""""""""""""""""""""""
+
+.. lv_example:: _widgets/keyboard/lv_example_keyboard_1
+  :language: c
+
+MicroPython
+^^^^^^^^^^^
+
+Keyboard with text area
+"""""""""""""""""""""""
+
+No examples yet.
--- a/MXC-A39/lvgl/examples/widgets/keyboard/lv_example_keyboard_1.c
+++ b/MXC-A39/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
--- a/MXC-A39/lvgl/examples/widgets/keyboard/lv_example_keyboard_1.py
+++ b/MXC-A39/lvgl/examples/widgets/keyboard/lv_example_keyboard_1.py
@ -0,0 +1,26 @@
+# Create styles for the keyboard
+rel_style = lv.style_t()
+pr_style  = lv.style_t()
+
+lv.style_copy(rel_style, lv.style_btn_rel)
+rel_style.body.radius = 0
+rel_style.body.border.width = 1
+
+lv.style_copy(pr_style, lv.style_btn_pr)
+pr_style.body.radius = 0
+pr_style.body.border.width = 1
+
+# Create a keyboard and apply the styles
+kb = lv.kb(lv.scr_act())
+kb.set_cursor_manage(True)
+kb.set_style(lv.kb.STYLE.BG, lv.style_transp_tight)
+kb.set_style(lv.kb.STYLE.BTN_REL, rel_style)
+kb.set_style(lv.kb.STYLE.BTN_PR, pr_style)
+
+# Create a text area. The keyboard will write here
+ta = lv.ta(lv.scr_act())
+ta.align(None, lv.ALIGN.IN_TOP_MID, 0, 10)
+ta.set_text("")
+
+# Assign the text area to the keyboard
+kb.set_ta(ta)
--- a/MXC-A39/lvgl/examples/widgets/label/index.rst
+++ b/MXC-A39/lvgl/examples/widgets/label/index.rst
@ -0,0 +1,25 @@
+C
+^
+  
+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
+
+MicroPython
+^^^^^^^^^^^
+
+No examples yet.
--- a/MXC-A39/lvgl/examples/widgets/label/lv_example_label_1.c
+++ b/MXC-A39/lvgl/examples/widgets/label/lv_example_label_1.c
@ -0,0 +1,26 @@
+#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
--- a/MXC-A39/lvgl/examples/widgets/label/lv_example_label_1.py
+++ b/MXC-A39/lvgl/examples/widgets/label/lv_example_label_1.py
@ -0,0 +1,14 @@
+label1 = lv.label(lv.scr_act())
+label1.set_long_mode(lv.label.LONG.BREAK)     # Break the long lines
+label1.set_recolor(True)                      # Enable re-coloring by commands in the text
+label1.set_align(lv.label.ALIGN.CENTER)       # Center aligned lines
+label1.set_text("#000080 Re-color# #0000ff words# #6666ff of a# label " +
+                "and  wrap long text automatically.")
+label1.set_width(150)
+label1.align(None, lv.ALIGN.CENTER, 0, -30)
+
+label2 = lv.label(lv.scr_act())
+label2.set_long_mode(lv.label.LONG.SROLL_CIRC)     # Circular scroll
+label2.set_width(150)
+label2.set_text("It is a circularly scrolling text. ")
+label2.align(None, lv.ALIGN.CENTER, 0, 30)
--- a/MXC-A39/lvgl/examples/widgets/label/lv_example_label_2.c
+++ b/MXC-A39/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
--- a/MXC-A39/lvgl/examples/widgets/label/lv_example_label_2.py
+++ b/MXC-A39/lvgl/examples/widgets/label/lv_example_label_2.py
@ -0,0 +1,24 @@
+# Create a style for the shadow
+label_style = lv.style_t()
+lv.style_copy(label_style, lv.style_plain)
+label_style.text.opa = lv.OPA._50
+
+# Create a label for the shadow first (it's in the background)
+shadow_label = lv.label(lv.scr_act())
+shadow_label.set_style(lv.label.STYLE.MAIN, label_style)
+
+# Create the main label
+main_label = lv.label(lv.scr_act())
+main_label.set_text("A simple method to create\n" +
+                              "shadows on text\n" +
+                              "It even works with\n\n" +
+                              "newlines     and spaces.")
+
+# Set the same text for the shadow label
+shadow_label.set_text(main_label.get_text())
+
+# Position the main label
+main_label.align(None, lv.ALIGN.CENTER, 0, 0)
+
+# Shift the second label down and to the right by 1 pixel
+shadow_label.align(main_label, lv.ALIGN.IN_TOP_LEFT, 1, 1)
--- a/MXC-A39/lvgl/examples/widgets/label/lv_example_label_3.c
+++ b/MXC-A39/lvgl/examples/widgets/label/lv_example_label_3.c
@ -0,0 +1,29 @@
+#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 Chiease 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
--- a/MXC-A39/lvgl/examples/widgets/led/index.rst
+++ b/MXC-A39/lvgl/examples/widgets/led/index.rst
@ -0,0 +1,13 @@
+C
+^
+
+LED with custom style
+"""""""""""""""""""""
+
+.. lv_example:: widgets/led/lv_example_led_1
+  :language: c
+
+MicroPython
+^^^^^^^^^^^
+
+No examples yet.
--- a/MXC-A39/lvgl/examples/widgets/led/lv_example_led_1.c
+++ b/MXC-A39/lvgl/examples/widgets/led/lv_example_led_1.c
@ -0,0 +1,26 @@
+#include "../../lv_examples.h"
+#if LV_USE_LED && LV_BUILD_EXAMPLES
+
+/**
+ * Create LED's with different brightness and color
+ */
+void lv_example_led_1(void)
+{
+    /*Create a LED and switch it OFF*/
+    lv_obj_t * led1  = lv_led_create(lv_scr_act());
+    lv_obj_align(led1, LV_ALIGN_CENTER, -80, 0);
+    lv_led_off(led1);
+
+    /*Copy the previous LED and set a brightness*/
+    lv_obj_t * led2  = lv_led_create(lv_scr_act());
+    lv_obj_align(led2, LV_ALIGN_CENTER, 0, 0);
+    lv_led_set_brightness(led2, 150);
+    lv_led_set_color(led2, lv_palette_main(LV_PALETTE_RED));
+
+    /*Copy the previous LED and switch it ON*/
+    lv_obj_t * led3  = lv_led_create(lv_scr_act());
+    lv_obj_align(led3, LV_ALIGN_CENTER, 80, 0);
+    lv_led_on(led3);
+}
+
+#endif
--- a/MXC-A39/lvgl/examples/widgets/led/lv_example_led_1.py
+++ b/MXC-A39/lvgl/examples/widgets/led/lv_example_led_1.py
@ -0,0 +1,27 @@
+# Create a style for the LED
+style_led = lv.style_t()
+lv.style_copy(style_led, lv.style_pretty_color)
+style_led.body.radius = 800 # large enough to draw a circle
+style_led.body.main_color = lv.color_make(0xb5, 0x0f, 0x04)
+style_led.body.grad_color = lv.color_make(0x50, 0x07, 0x02)
+style_led.body.border.color = lv.color_make(0xfa, 0x0f, 0x00)
+style_led.body.border.width = 3
+style_led.body.border.opa = lv.OPA._30
+style_led.body.shadow.color = lv.color_make(0xb5, 0x0f, 0x04)
+style_led.body.shadow.width = 5
+
+# Create a LED and switch it OFF
+led1  = lv.led(lv.scr_act())
+led1.set_style(lv.led.STYLE.MAIN, style_led)
+led1.align(None, lv.ALIGN.CENTER, -80, 0)
+led1.off()
+
+# Copy the previous LED and set a brightness
+led2  = lv.led(lv.scr_act(), led1)
+led2.align(None, lv.ALIGN.CENTER, 0, 0)
+led2.set_bright(190)
+
+# Copy the previous LED and switch it ON
+led3  = lv.led(lv.scr_act(), led1)
+led3.align(None, lv.ALIGN.CENTER, 80, 0)
+led3.on()
--- a/MXC-A39/lvgl/examples/widgets/line/index.rst
+++ b/MXC-A39/lvgl/examples/widgets/line/index.rst
@ -0,0 +1,13 @@
+C
+^
+
+Simple Line 
+""""""""""""""""
+
+.. lv_example:: widgets/line/lv_example_line_1
+  :language: c
+
+MicroPython
+^^^^^^^^^^^
+
+No examples yet.
--- a/MXC-A39/lvgl/examples/widgets/line/lv_example_line_1.c
+++ b/MXC-A39/lvgl/examples/widgets/line/lv_example_line_1.c
@ -0,0 +1,24 @@
+#include "../../lv_examples.h"
+#if LV_USE_LINE && LV_BUILD_EXAMPLES
+
+void lv_example_line_1(void)
+{
+    /*Create an array for the points of the line*/
+    static lv_point_t line_points[] = { {5, 5}, {70, 70}, {120, 10}, {180, 60}, {240, 10} };
+
+    /*Create style*/
+    static lv_style_t style_line;
+    lv_style_init(&style_line);
+    lv_style_set_line_width(&style_line, 8);
+    lv_style_set_line_color(&style_line, lv_palette_main(LV_PALETTE_BLUE));
+    lv_style_set_line_rounded(&style_line, true);
+
+    /*Create a line and apply the new style*/
+    lv_obj_t * line1;
+    line1 = lv_line_create(lv_scr_act());
+    lv_line_set_points(line1, line_points, 5);     /*Set the points*/
+    lv_obj_add_style(line1, &style_line, 0);
+    lv_obj_center(line1);
+}
+
+#endif
--- a/MXC-A39/lvgl/examples/widgets/line/lv_example_line_1.py
+++ b/MXC-A39/lvgl/examples/widgets/line/lv_example_line_1.py
@ -0,0 +1,19 @@
+# Create an array for the points of the line
+line_points = [ {"x":5, "y":5}, 
+                {"x":70, "y":70}, 
+                {"x":120, "y":10}, 
+                {"x":180, "y":60}, 
+                {"x":240, "y":10}]
+
+# Create new style (thick dark blue)
+style_line = lv.style_t()
+lv.style_copy(style_line, lv.style_plain)
+style_line.line.color = lv.color_make(0x00, 0x3b, 0x75)
+style_line.line.width = 3
+style_line.line.rounded = 1
+
+# Copy the previous line and apply the new style
+line1 = lv.line(lv.scr_act())
+line1.set_points(line_points, len(line_points))      # Set the points
+line1.set_style(lv.line.STYLE.MAIN, style_line)
+line1.align(None, lv.ALIGN.CENTER, 0, 0)
--- a/MXC-A39/lvgl/examples/widgets/list/index.rst
+++ b/MXC-A39/lvgl/examples/widgets/list/index.rst
@ -0,0 +1,13 @@
+C
+^
+
+Simple List 
+""""""""""""""""
+
+.. lv_example:: widgets/list/lv_example_list_1
+  :language: c
+
+MicroPython
+^^^^^^^^^^^
+
+No examples yet.
--- a/MXC-A39/lvgl/examples/widgets/list/lv_example_list_1.c
+++ b/MXC-A39/lvgl/examples/widgets/list/lv_example_list_1.c
@ -0,0 +1,52 @@
+#include "../../lv_examples.h"
+#if LV_USE_LIST && LV_BUILD_EXAMPLES
+static lv_obj_t * list1;
+
+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_CLICKED) {
+        LV_LOG_USER("Clicked: %s", lv_list_get_btn_text(list1, obj));
+    }
+}
+void lv_example_list_1(void)
+{
+    /*Create a list*/
+    list1 = lv_list_create(lv_scr_act());
+    lv_obj_set_size(list1, 180, 220);
+    lv_obj_center(list1);
+
+    /*Add buttons to the list*/
+    lv_obj_t * btn;
+
+    lv_list_add_text(list1, "File");
+    btn = lv_list_add_btn(list1, LV_SYMBOL_FILE, "New");
+    lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
+    btn = lv_list_add_btn(list1, LV_SYMBOL_DIRECTORY, "Open");
+    lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
+    btn = lv_list_add_btn(list1, LV_SYMBOL_SAVE, "Save");
+    lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
+    btn = lv_list_add_btn(list1, LV_SYMBOL_CLOSE, "Delete");
+    lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
+    btn = lv_list_add_btn(list1, LV_SYMBOL_EDIT, "Edit");
+    lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
+
+    lv_list_add_text(list1, "Connectivity");
+    btn = lv_list_add_btn(list1, LV_SYMBOL_BLUETOOTH, "Bluetooth");
+    lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
+    btn = lv_list_add_btn(list1, LV_SYMBOL_GPS, "Navigation");
+    lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
+    btn = lv_list_add_btn(list1, LV_SYMBOL_USB, "USB");
+    lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
+    btn = lv_list_add_btn(list1, LV_SYMBOL_BATTERY_FULL, "Battery");
+    lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
+
+    lv_list_add_text(list1, "Exit");
+    btn = lv_list_add_btn(list1, LV_SYMBOL_OK, "Apply");
+    lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
+    btn = lv_list_add_btn(list1, LV_SYMBOL_CLOSE, "Close");
+    lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
+}
+
+#endif
--- a/MXC-A39/lvgl/examples/widgets/list/lv_example_list_1.py
+++ b/MXC-A39/lvgl/examples/widgets/list/lv_example_list_1.py
@ -0,0 +1,25 @@
+def event_handler(obj, event):
+    if event == lv.EVENT.CLICKED:
+        print("Clicked: %s" % lv.list.get_btn_text(obj))
+
+# Create a list
+list1 = lv.list(lv.scr_act())
+list1.set_size(160, 200)
+list1.align(None, lv.ALIGN.CENTER, 0, 0)
+
+# Add buttons to the list
+
+list_btn = list1.add_btn(lv.SYMBOL.FILE, "New")
+list_btn.set_event_cb(event_handler)
+
+list_btn = list1.add_btn(lv.SYMBOL.DIRECTORY, "Open")
+list_btn.set_event_cb(event_handler)
+
+list_btn = list1.add_btn(lv.SYMBOL.CLOSE, "Delete")
+list_btn.set_event_cb(event_handler)
+
+list_btn = list1.add_btn(lv.SYMBOL.EDIT, "Edit")
+list_btn.set_event_cb(event_handler)
+
+list_btn = list1.add_btn(lv.SYMBOL.SAVE, "Save")
+list_btn.set_event_cb(event_handler)
--- a/MXC-A39/lvgl/examples/widgets/lv_example_widgets.h
+++ b/MXC-A39/lvgl/examples/widgets/lv_example_widgets.h
@ -0,0 +1,135 @@
+/**
+ * @file lv_example_widgets.h
+ *
+ */
+
+#ifndef LV_EXAMPLE_WIDGETS_H
+#define LV_EXAMPLE_WIDGETS_H
+
+#ifdef __cplusplus
+extern "C" {
+#endif
+
+/*********************
+ *      INCLUDES
+ *********************/
+
+/*********************
+ *      DEFINES
+ *********************/
+
+/**********************
+ *      TYPEDEFS
+ **********************/
+
+/**********************
+ * GLOBAL PROTOTYPES
+ **********************/
+void lv_example_arc_1(void);
+void lv_example_arc_2(void);
+
+void lv_example_animimg_1(void);
+
+void lv_example_bar_1(void);
+void lv_example_bar_2(void);
+void lv_example_bar_3(void);
+void lv_example_bar_4(void);
+void lv_example_bar_5(void);
+void lv_example_bar_6(void);
+
+void lv_example_btn_1(void);
+void lv_example_btn_2(void);
+void lv_example_btn_3(void);
+
+void lv_example_btnmatrix_1(void);
+void lv_example_btnmatrix_2(void);
+void lv_example_btnmatrix_3(void);
+
+void lv_example_calendar_1(void);
+
+void lv_example_canvas_1(void);
+void lv_example_canvas_2(void);
+
+void lv_example_chart_1(void);
+void lv_example_chart_2(void);
+void lv_example_chart_3(void);
+void lv_example_chart_4(void);
+void lv_example_chart_5(void);
+void lv_example_chart_6(void);
+void lv_example_chart_7(void);
+
+void lv_example_checkbox_1(void);
+
+void lv_example_colorwheel_1(void);
+
+void lv_example_dropdown_1(void);
+void lv_example_dropdown_2(void);
+void lv_example_dropdown_3(void);
+
+void lv_example_img_1(void);
+void lv_example_img_2(void);
+void lv_example_img_3(void);
+void lv_example_img_4(void);
+
+void lv_example_imgbtn_1(void);
+
+void lv_example_keyboard_1(void);
+
+void lv_example_label_1(void);
+void lv_example_label_2(void);
+void lv_example_label_3(void);
+
+void lv_example_led_1(void);
+
+void lv_example_line_1(void);
+
+void lv_example_list_1(void);
+
+void lv_example_meter_1(void);
+void lv_example_meter_2(void);
+void lv_example_meter_3(void);
+void lv_example_meter_4(void);
+
+void lv_example_msgbox_1(void);
+
+void lv_example_obj_1(void);
+void lv_example_obj_2(void);
+
+void lv_example_roller_1(void);
+void lv_example_roller_2(void);
+void lv_example_roller_3(void);
+
+void lv_example_slider_1(void);
+void lv_example_slider_2(void);
+void lv_example_slider_3(void);
+
+void lv_example_spinbox_1(void);
+
+void lv_example_spinner_1(void);
+
+void lv_example_switch_1(void);
+
+void lv_example_table_1(void);
+void lv_example_table_2(void);
+
+void lv_example_tabview_1(void);
+
+void lv_example_textarea_1(void);
+void lv_example_textarea_2(void);
+void lv_example_textarea_3(void);
+
+void lv_example_tileview_1(void);
+
+void lv_example_win_1(void);
+
+void lv_example_span_1(void);
+
+/**********************
+ *      MACROS
+ **********************/
+
+#ifdef __cplusplus
+} /*extern "C"*/
+#endif
+
+#endif /*LV_EX_WIDGETS_H*/
--- a/MXC-A39/lvgl/examples/widgets/meter/index.rst
+++ b/MXC-A39/lvgl/examples/widgets/meter/index.rst
@ -0,0 +1,34 @@
+C
+^
+
+Simple meter
+"""""""""""""""""""""""
+
+.. lv_example:: widgets/meter/lv_example_meter_1
+  :language: c
+
+
+A meter with multiple arcs
+"""""""""""""""""""""""""""
+
+.. lv_example:: widgets/meter/lv_example_meter_2
+  :language: c
+
+
+A clock from a meter
+"""""""""""""""""""""""
+
+.. lv_example:: widgets/meter/lv_example_meter_3
+  :language: c
+
+
+Pie chart
+"""""""""""""""""""""""
+
+.. lv_example:: widgets/meter/lv_example_meter_4
+  :language: c
+
+MicroPython
+^^^^^^^^^^^
+
+No examples yet.
--- a/MXC-A39/lvgl/examples/widgets/meter/lv_example_meter_1.c
+++ b/MXC-A39/lvgl/examples/widgets/meter/lv_example_meter_1.c
@ -0,0 +1,64 @@
+#include "../../lv_examples.h"
+#if LV_USE_METER && LV_BUILD_EXAMPLES
+
+static lv_obj_t * meter;
+
+static void set_value(void * indic, int32_t v)
+{
+    lv_meter_set_indicator_value(meter, indic, v);
+}
+
+/**
+ * A simple meter
+ */
+void lv_example_meter_1(void)
+{
+     meter = lv_meter_create(lv_scr_act());
+    lv_obj_center(meter);
+    lv_obj_set_size(meter, 200, 200);
+
+    /*Add a scale first*/
+    lv_meter_scale_t * scale = lv_meter_add_scale(meter);
+    lv_meter_set_scale_ticks(meter, scale, 41, 2, 10, lv_palette_main(LV_PALETTE_GREY));
+    lv_meter_set_scale_major_ticks(meter, scale, 8, 4, 15, lv_color_black(), 10);
+
+    lv_meter_indicator_t * indic;
+
+    /*Add a blue arc to the start*/
+    indic = lv_meter_add_arc(meter, scale, 3, lv_palette_main(LV_PALETTE_BLUE), 0);
+    lv_meter_set_indicator_start_value(meter, indic, 0);
+    lv_meter_set_indicator_end_value(meter, indic, 20);
+
+    /*Make the tick lines blue at the start of the scale*/
+    indic = lv_meter_add_scale_lines(meter, scale, lv_palette_main(LV_PALETTE_BLUE), lv_palette_main(LV_PALETTE_BLUE), false, 0);
+    lv_meter_set_indicator_start_value(meter, indic, 0);
+    lv_meter_set_indicator_end_value(meter, indic, 20);
+
+    /*Add a red arc to the end*/
+    indic = lv_meter_add_arc(meter, scale, 3, lv_palette_main(LV_PALETTE_RED), 0);
+    lv_meter_set_indicator_start_value(meter, indic, 80);
+    lv_meter_set_indicator_end_value(meter, indic, 100);
+
+    /*Make the tick lines red at the end of the scale*/
+    indic = lv_meter_add_scale_lines(meter, scale, lv_palette_main(LV_PALETTE_RED), lv_palette_main(LV_PALETTE_RED), false, 0);
+    lv_meter_set_indicator_start_value(meter, indic, 80);
+    lv_meter_set_indicator_end_value(meter, indic, 100);
+
+    /*Add a needle line indicator*/
+    indic = lv_meter_add_needle_line(meter, scale, 4, lv_palette_main(LV_PALETTE_GREY), -10);
+
+    /*Create an animation to set the value*/
+    lv_anim_t a;
+    lv_anim_init(&a);
+    lv_anim_set_exec_cb(&a, set_value);
+    lv_anim_set_var(&a, indic);
+    lv_anim_set_values(&a, 0, 100);
+    lv_anim_set_time(&a, 2000);
+    lv_anim_set_repeat_delay(&a, 100);
+    lv_anim_set_playback_time(&a, 500);
+    lv_anim_set_playback_delay(&a, 100);
+    lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
+    lv_anim_start(&a);
+}
+
+#endif
--- a/MXC-A39/lvgl/examples/widgets/meter/lv_example_meter_2.c
+++ b/MXC-A39/lvgl/examples/widgets/meter/lv_example_meter_2.c
@ -0,0 +1,60 @@
+#include "../../lv_examples.h"
+#if LV_USE_METER && LV_BUILD_EXAMPLES
+
+static lv_obj_t * meter;
+
+static void set_value(void * indic, int32_t v)
+{
+    lv_meter_set_indicator_end_value(meter, indic, v);
+}
+
+
+/**
+ * A meter with multiple arcs
+ */
+void lv_example_meter_2(void)
+{
+    meter = lv_meter_create(lv_scr_act());
+    lv_obj_center(meter);
+    lv_obj_set_size(meter, 200, 200);
+
+    /*Remove the circle from the middle*/
+    lv_obj_remove_style(meter, NULL, LV_PART_INDICATOR);
+
+    /*Add a scale first*/
+    lv_meter_scale_t * scale = lv_meter_add_scale(meter);
+    lv_meter_set_scale_ticks(meter, scale, 11, 2, 10, lv_palette_main(LV_PALETTE_GREY));
+    lv_meter_set_scale_major_ticks(meter, scale, 1, 2, 30, lv_color_hex3(0xeee), 10);
+    lv_meter_set_scale_range(meter, scale, 0, 100, 270, 90);
+
+    /*Add a three arc indicator*/
+    lv_meter_indicator_t * indic1 = lv_meter_add_arc(meter, scale, 10, lv_palette_main(LV_PALETTE_RED), 0);
+    lv_meter_indicator_t * indic2 = lv_meter_add_arc(meter, scale, 10, lv_palette_main(LV_PALETTE_GREEN), -10);
+    lv_meter_indicator_t * indic3 = lv_meter_add_arc(meter, scale, 10, lv_palette_main(LV_PALETTE_BLUE), -20);
+
+    /*Create an animation to set the value*/
+    lv_anim_t a;
+    lv_anim_init(&a);
+    lv_anim_set_exec_cb(&a, set_value);
+    lv_anim_set_values(&a, 0, 100);
+    lv_anim_set_repeat_delay(&a, 100);
+    lv_anim_set_playback_delay(&a, 100);
+    lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
+
+    lv_anim_set_time(&a, 2000);
+    lv_anim_set_playback_time(&a, 500);
+    lv_anim_set_var(&a, indic1);
+    lv_anim_start(&a);
+
+    lv_anim_set_time(&a, 1000);
+    lv_anim_set_playback_time(&a, 1000);
+    lv_anim_set_var(&a, indic2);
+    lv_anim_start(&a);
+
+    lv_anim_set_time(&a, 1000);
+    lv_anim_set_playback_time(&a, 2000);
+    lv_anim_set_var(&a, indic3);
+    lv_anim_start(&a);
+}
+
+#endif
--- a/MXC-A39/lvgl/examples/widgets/meter/lv_example_meter_3.c
+++ b/MXC-A39/lvgl/examples/widgets/meter/lv_example_meter_3.c
@ -0,0 +1,54 @@
+#include "../../lv_examples.h"
+#if LV_USE_METER && LV_BUILD_EXAMPLES
+
+static lv_obj_t * meter;
+
+static void set_value(void * indic, int32_t v)
+{
+    lv_meter_set_indicator_end_value(meter, indic, v);
+}
+
+/**
+ * A clock from a meter
+ */
+void lv_example_meter_3(void)
+{
+    meter = lv_meter_create(lv_scr_act());
+    lv_obj_set_size(meter, 220, 220);
+    lv_obj_center(meter);
+
+    /*Create a scale for the minutes*/
+    /*61 ticks in a 360 degrees range (the last and the first line overlaps)*/
+    lv_meter_scale_t * scale_min = lv_meter_add_scale(meter);
+    lv_meter_set_scale_ticks(meter, scale_min, 61, 1, 10, lv_palette_main(LV_PALETTE_GREY));
+    lv_meter_set_scale_range(meter, scale_min, 0, 60, 360, 270);
+
+    /*Create an other scale for the hours. It's only visual and contains only major ticks*/
+    lv_meter_scale_t * scale_hour = lv_meter_add_scale(meter);
+    lv_meter_set_scale_ticks(meter, scale_hour, 12, 0, 0, lv_palette_main(LV_PALETTE_GREY));               /*12 ticks*/
+    lv_meter_set_scale_major_ticks(meter, scale_hour, 1, 2, 20, lv_color_black(), 10);    /*Every tick is major*/
+    lv_meter_set_scale_range(meter, scale_hour, 1, 12, 330, 300);       /*[1..12] values in an almost full circle*/
+
+    LV_IMG_DECLARE(img_hand)
+
+    /*Add a the hands from images*/
+    lv_meter_indicator_t * indic_min = lv_meter_add_needle_img(meter, scale_min, &img_hand, 5, 5);
+    lv_meter_indicator_t * indic_hour = lv_meter_add_needle_img(meter, scale_min, &img_hand, 5, 5);
+
+    /*Create an animation to set the value*/
+    lv_anim_t a;
+    lv_anim_init(&a);
+    lv_anim_set_exec_cb(&a, set_value);
+    lv_anim_set_values(&a, 0, 60);
+    lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
+    lv_anim_set_time(&a, 2000);     /*2 sec for 1 turn of the minute hand (1 hour)*/
+    lv_anim_set_var(&a, indic_min);
+    lv_anim_start(&a);
+
+    lv_anim_set_var(&a, indic_hour);
+    lv_anim_set_time(&a, 24000);    /*24 sec for 1 turn of the hour hand*/
+    lv_anim_set_values(&a, 0, 60);
+    lv_anim_start(&a);
+}
+
+#endif
--- a/MXC-A39/lvgl/examples/widgets/meter/lv_example_meter_4.c
+++ b/MXC-A39/lvgl/examples/widgets/meter/lv_example_meter_4.c
@ -0,0 +1,38 @@
+#include "../../lv_examples.h"
+#if LV_USE_METER && LV_BUILD_EXAMPLES
+
+/**
+ * Create a pie chart
+ */
+void lv_example_meter_4(void)
+{
+    lv_obj_t * meter = lv_meter_create(lv_scr_act());
+
+    /*Remove the background and the circle from the middle*/
+    lv_obj_remove_style(meter, NULL, LV_PART_MAIN);
+    lv_obj_remove_style(meter, NULL, LV_PART_INDICATOR);
+
+    lv_obj_set_size(meter, 200, 200);
+    lv_obj_center(meter);
+
+    /*Add a scale first with no ticks.*/
+    lv_meter_scale_t * scale = lv_meter_add_scale(meter);
+    lv_meter_set_scale_ticks(meter, scale, 0, 0, 0, lv_color_black());
+    lv_meter_set_scale_range(meter, scale, 0, 100, 360, 0);
+
+    /*Add a three arc indicator*/
+    lv_coord_t indic_w = 100;
+    lv_meter_indicator_t * indic1 = lv_meter_add_arc(meter, scale, indic_w,lv_palette_main(LV_PALETTE_ORANGE), 0);
+    lv_meter_set_indicator_start_value(meter, indic1, 0);
+    lv_meter_set_indicator_end_value(meter, indic1, 40);
+
+    lv_meter_indicator_t * indic2 = lv_meter_add_arc(meter, scale, indic_w, lv_palette_main(LV_PALETTE_YELLOW), 0);
+    lv_meter_set_indicator_start_value(meter, indic2, 40);  /*Start from the previous*/
+    lv_meter_set_indicator_end_value(meter, indic2, 80);
+
+    lv_meter_indicator_t * indic3 = lv_meter_add_arc(meter, scale, indic_w, lv_palette_main(LV_PALETTE_DEEP_ORANGE), 0);
+    lv_meter_set_indicator_start_value(meter, indic3, 80);  /*Start from the previous*/
+    lv_meter_set_indicator_end_value(meter, indic3, 100);
+}
+
+#endif
--- a/MXC-A39/lvgl/examples/widgets/msgbox/index.rst
+++ b/MXC-A39/lvgl/examples/widgets/msgbox/index.rst
@ -0,0 +1,14 @@
+C
+^
+
+Simple Message box 
+"""""""""""""""""""
+
+.. lv_example:: widgets/msgbox/lv_example_msgbox_1
+  :language: c
+
+
+MicroPython
+^^^^^^^^^^^
+
+No examples yet.
--- a/MXC-A39/lvgl/examples/widgets/msgbox/lv_example_msgbox_1.c
+++ b/MXC-A39/lvgl/examples/widgets/msgbox/lv_example_msgbox_1.c
@ -0,0 +1,19 @@
+#include "../../lv_examples.h"
+#if LV_USE_MSGBOX && LV_BUILD_EXAMPLES
+
+static void event_cb(lv_event_t * e)
+{
+    lv_obj_t * obj = lv_event_get_current_target(e);
+    LV_LOG_USER("Button %s clicked", lv_msgbox_get_active_btn_text(obj));
+}
+
+void lv_example_msgbox_1(void)
+{
+    static const char * btns[] ={"Apply", "Close", ""};
+
+    lv_obj_t * mbox1 = lv_msgbox_create(NULL, "Hello", "This is a message box with two buttons.", btns, true);
+    lv_obj_add_event_cb(mbox1, event_cb, LV_EVENT_VALUE_CHANGED, NULL);
+    lv_obj_center(mbox1);
+}
+
+#endif
--- a/MXC-A39/lvgl/examples/widgets/msgbox/lv_example_msgbox_1.py
+++ b/MXC-A39/lvgl/examples/widgets/msgbox/lv_example_msgbox_1.py
@ -0,0 +1,12 @@
+def event_handler(obj, event):
+    if event == lv.EVENT.VALUE_CHANGED:
+        print("Button: %s" % lv.mbox.get_active_btn_text(obj))
+
+btns = ["Apply", "Close", ""]
+
+mbox1 = lv.mbox(lv.scr_act())
+mbox1.set_text("A message box with two buttons.");
+mbox1.add_btns(btns)
+mbox1.set_width(200)
+mbox1.set_event_cb(event_handler)
+mbox1.align(None, lv.ALIGN.CENTER, 0, 0)  # Align to the corner
--- a/MXC-A39/lvgl/examples/widgets/msgbox/lv_example_msgbox_2.py
+++ b/MXC-A39/lvgl/examples/widgets/msgbox/lv_example_msgbox_2.py
@ -0,0 +1,86 @@
+welcome_info = "Welcome to the modal message box demo!\nPress the button to display a message box."
+in_msg_info = "Notice that you cannot touch the button again while the message box is open."
+
+class Modal(lv.mbox):
+    """mbox with semi-transparent background"""
+    def __init__(self, parent, *args, **kwargs):
+        # Create a full-screen background
+        modal_style = lv.style_t()
+        lv.style_copy(modal_style, lv.style_plain_color)
+        # Set the background's style
+        modal_style.body.main_color = modal_style.body.grad_color = lv.color_make(0,0,0)
+        modal_style.body.opa = lv.OPA._50
+        
+        # Create a base object for the modal background
+        self.bg = lv.obj(parent)
+        self.bg.set_style(modal_style)
+        self.bg.set_pos(0, 0)
+        self.bg.set_size(parent.get_width(), parent.get_height())
+        self.bg.set_opa_scale_enable(True)  # Enable opacity scaling for the animation
+
+        super().__init__(self.bg, *args, **kwargs)
+        self.align(None, lv.ALIGN.CENTER, 0, 0)
+
+        # Fade the message box in with an animation
+        a = lv.anim_t()
+        lv.anim_init(a)
+        lv.anim_set_time(a, 500, 0)
+        lv.anim_set_values(a, lv.OPA.TRANSP, lv.OPA.COVER)
+        lv.anim_set_exec_cb(a, self.bg, lv.obj.set_opa_scale)
+        lv.anim_create(a)
+        super().set_event_cb(self.default_callback)
+
+    def set_event_cb(self, callback):
+        self.callback = callback
+
+    def get_event_cb(self):
+        return self.callback
+
+    def default_callback(self, obj, evt):
+        if evt == lv.EVENT.DELETE:# and obj == self:
+            # Delete the parent modal background
+            self.get_parent().del_async()
+        elif evt == lv.EVENT.VALUE_CHANGED:
+            # A button was clicked
+            self.start_auto_close(0)
+        # Call user-defined callback
+        if self.callback is not None:
+            self.callback(obj, evt)
+
+def mbox_event_cb(obj, evt):
+    if evt == lv.EVENT.DELETE:
+        info.set_text(welcome_info)
+
+def btn_event_cb(btn, evt):
+    if evt == lv.EVENT.CLICKED:
+
+        btns2 = ["Ok", "Cancel", ""]
+
+        # Create the message box as a child of the modal background
+        mbox = Modal(lv.scr_act())
+        mbox.add_btns(btns2)
+        mbox.set_text("Hello world!")
+        mbox.set_event_cb(mbox_event_cb)
+
+        info.set_text(in_msg_info)
+        info.align(None, lv.ALIGN.IN_BOTTOM_LEFT, 5, -5)
+
+# Get active screen
+scr = lv.scr_act()
+
+# Create a button, then set its position and event callback
+btn = lv.btn(scr)
+btn.set_size(200, 60)
+btn.set_event_cb(btn_event_cb)
+btn.align(None, lv.ALIGN.IN_TOP_LEFT, 20, 20)
+
+# Create a label on the button
+label = lv.label(btn)
+label.set_text("Display a message box!")
+
+# Create an informative label on the screen
+info = lv.label(scr)
+info.set_text(welcome_info)
+info.set_long_mode(lv.label.LONG.BREAK) # Make sure text will wrap
+info.set_width(scr.get_width() - 10)
+info.align(None, lv.ALIGN.IN_BOTTOM_LEFT, 5, -5)
--- a/MXC-A39/lvgl/examples/widgets/obj/index.rst
+++ b/MXC-A39/lvgl/examples/widgets/obj/index.rst
@ -0,0 +1,19 @@
+C
+^
+
+Base objects with custom styles 
+""""""""""""""""""""""""""""""""
+
+.. lv_example:: widgets/obj/lv_example_obj_1
+  :language: c
+  
+Make an object draggable 
+""""""""""""""""""""""""""""
+
+.. lv_example:: widgets/obj/lv_example_obj_2
+  :language: c
+
+MicroPython
+^^^^^^^^^^^
+
+No examples yet.
--- a/MXC-A39/lvgl/examples/widgets/obj/lv_example_obj_1.c
+++ b/MXC-A39/lvgl/examples/widgets/obj/lv_example_obj_1.c
@ -0,0 +1,22 @@
+#include "../../lv_examples.h"
+#if LV_BUILD_EXAMPLES
+
+void lv_example_obj_1(void)
+{
+    lv_obj_t * obj1;
+    obj1 = lv_obj_create(lv_scr_act());
+    lv_obj_set_size(obj1, 100, 50);
+    lv_obj_align(obj1, LV_ALIGN_CENTER, -60, -30);
+
+    static lv_style_t style_shadow;
+    lv_style_init(&style_shadow);
+    lv_style_set_shadow_width(&style_shadow, 10);
+    lv_style_set_shadow_spread(&style_shadow, 5);
+    lv_style_set_shadow_color(&style_shadow, lv_palette_main(LV_PALETTE_BLUE));
+
+    lv_obj_t * obj2;
+    obj2 = lv_obj_create(lv_scr_act());
+    lv_obj_add_style(obj2, &style_shadow, 0);
+    lv_obj_align(obj2, LV_ALIGN_CENTER, 60, 30);
+}
+#endif
--- a/MXC-A39/lvgl/examples/widgets/obj/lv_example_obj_1.py
+++ b/MXC-A39/lvgl/examples/widgets/obj/lv_example_obj_1.py
@ -0,0 +1,20 @@
+obj1 = lv.obj(lv.scr_act())
+obj1.set_size(100, 50)
+obj1.set_style(lv.style_plain_color)
+obj1.align(None, lv.ALIGN.CENTER, -60, -30)
+
+# Copy the previous object and enable drag
+obj2 = lv.obj(lv.scr_act(), obj1)
+obj2.set_style(lv.style_pretty_color)
+obj2.align(None, lv.ALIGN.CENTER, 0, 0)
+obj2.set_drag(True)
+
+style_shadow = lv.style_t()
+lv.style_copy(style_shadow, lv.style_pretty)
+style_shadow.body.shadow.width = 6
+style_shadow.body.radius = 800 # large enough to make it round
+
+# Copy the previous object (drag is already enabled)
+obj3 = lv.obj(lv.scr_act(), obj2)
+obj3.set_style(style_shadow)
+obj3.align(None, lv.ALIGN.CENTER, 60, 30)
--- a/MXC-A39/lvgl/examples/widgets/obj/lv_example_obj_2.c
+++ b/MXC-A39/lvgl/examples/widgets/obj/lv_example_obj_2.c
@ -0,0 +1,33 @@
+#include "../../lv_examples.h"
+#if LV_BUILD_EXAMPLES
+
+static void drag_event_handler(lv_event_t * e)
+{
+    lv_obj_t * obj = lv_event_get_target(e);
+
+    lv_indev_t * indev = lv_indev_get_act();
+    lv_point_t vect;
+    lv_indev_get_vect(indev, &vect);
+
+    lv_coord_t x = lv_obj_get_x(obj) + vect.x;
+    lv_coord_t y = lv_obj_get_y(obj) + vect.y;
+    lv_obj_set_pos(obj, x, y);
+}
+
+
+/**
+ * Make an object dragable.
+ */
+void lv_example_obj_2(void)
+{
+    lv_obj_t * obj;
+    obj = lv_obj_create(lv_scr_act());
+    lv_obj_set_size(obj, 150, 100);
+    lv_obj_add_event_cb(obj, drag_event_handler, LV_EVENT_PRESSING, NULL);
+
+    lv_obj_t * label = lv_label_create(obj);
+    lv_label_set_text(label, "Drag me");
+    lv_obj_center(label);
+
+}
+#endif
--- a/MXC-A39/lvgl/examples/widgets/roller/index.rst
+++ b/MXC-A39/lvgl/examples/widgets/roller/index.rst
@ -0,0 +1,25 @@
+C
+^
+
+Simple Roller 
+""""""""""""""""
+
+.. lv_example:: widgets/roller/lv_example_roller_1
+  :language: c
+  
+Styling the roller
+""""""""""""""""""
+
+.. lv_example:: widgets/roller/lv_example_roller_2
+  :language: c
+
+add fade mask to roller
+"""""""""""""""""""""""
+
+.. lv_example:: widgets/roller/lv_example_roller_3
+  :language: c
+
+MicroPython
+^^^^^^^^^^^
+
+No examples yet.
--- a/MXC-A39/lvgl/examples/widgets/roller/lv_example_roller_1.c
+++ b/MXC-A39/lvgl/examples/widgets/roller/lv_example_roller_1.c
@ -0,0 +1,41 @@
+#include "../../lv_examples.h"
+#if LV_USE_ROLLER && 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_roller_get_selected_str(obj, buf, sizeof(buf));
+        LV_LOG_USER("Selected month: %s\n", buf);
+    }
+}
+
+/**
+ * An infinite roller with the name of the months
+ */
+void lv_example_roller_1(void)
+{
+    lv_obj_t *roller1 = lv_roller_create(lv_scr_act());
+    lv_roller_set_options(roller1,
+                        "January\n"
+                        "February\n"
+                        "March\n"
+                        "April\n"
+                        "May\n"
+                        "June\n"
+                        "July\n"
+                        "August\n"
+                        "September\n"
+                        "October\n"
+                        "November\n"
+                        "December",
+                        LV_ROLLER_MODE_INFINITE);
+
+    lv_roller_set_visible_row_count(roller1, 4);
+    lv_obj_center(roller1);
+    lv_obj_add_event_cb(roller1, event_handler, LV_EVENT_ALL, NULL);
+}
+
+#endif
--- a/MXC-A39/lvgl/examples/widgets/roller/lv_example_roller_1.py
+++ b/MXC-A39/lvgl/examples/widgets/roller/lv_example_roller_1.py
@ -0,0 +1,24 @@
+def event_handler(obj, event):
+    if event == lv.EVENT.VALUE_CHANGED:
+        option = " "*10
+        obj.get_selected_str(option, len(option))
+        print("Selected month: %s" % option.strip())
+
+roller1 = lv.roller(lv.scr_act())
+roller1.set_options("\n".join([
+                    "January",
+                    "February",
+                    "March",
+                    "April",
+                    "May",
+                    "June",
+                    "July",
+                    "August",
+                    "September",
+                    "October",
+                    "November",
+                    "December"]), lv.roller.MODE.INIFINITE)
+
+roller1.set_visible_row_count(4)
+roller1.align(None, lv.ALIGN.CENTER, 0, 0)
+roller1.set_event_cb(event_handler)
--- a/MXC-A39/lvgl/examples/widgets/roller/lv_example_roller_2.c
+++ b/MXC-A39/lvgl/examples/widgets/roller/lv_example_roller_2.c
@ -0,0 +1,60 @@
+#include "../../lv_examples.h"
+#if LV_USE_ROLLER && LV_FONT_MONTSERRAT_22 && 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_roller_get_selected_str(obj, buf, sizeof(buf));
+        LV_LOG_USER("Selected value: %s", buf);
+    }
+}
+
+/**
+ * Roller with various alignments and larger text in the selected area
+ */
+void lv_example_roller_2(void)
+{
+    /*A style to make the selected option larger*/
+    static lv_style_t style_sel;
+    lv_style_init(&style_sel);
+    lv_style_set_text_font(&style_sel, &lv_font_montserrat_22);
+
+    const char * opts = "1\n2\n3\n4\n5\n6\n7\n8\n9\n10";
+    lv_obj_t *roller;
+
+    /*A roller on the left with left aligned text, and custom width*/
+    roller = lv_roller_create(lv_scr_act());
+    lv_roller_set_options(roller, opts, LV_ROLLER_MODE_NORMAL);
+    lv_roller_set_visible_row_count(roller, 2);
+    lv_obj_set_width(roller, 100);
+    lv_obj_add_style(roller, &style_sel, LV_PART_SELECTED);
+    lv_obj_set_style_text_align(roller, LV_TEXT_ALIGN_LEFT, 0);
+    lv_obj_align(roller, LV_ALIGN_LEFT_MID, 10, 0);
+    lv_obj_add_event_cb(roller, event_handler, LV_EVENT_ALL, NULL);
+    lv_roller_set_selected(roller, 2, LV_ANIM_OFF);
+
+    /*A roller on the middle with center aligned text, and auto (default) width*/
+    roller = lv_roller_create(lv_scr_act());
+    lv_roller_set_options(roller, opts, LV_ROLLER_MODE_NORMAL);
+    lv_roller_set_visible_row_count(roller, 3);
+    lv_obj_add_style(roller, &style_sel, LV_PART_SELECTED);
+    lv_obj_align(roller, LV_ALIGN_CENTER, 0, 0);
+    lv_obj_add_event_cb(roller, event_handler, LV_EVENT_ALL, NULL);
+    lv_roller_set_selected(roller, 5, LV_ANIM_OFF);
+
+    /*A roller on the right with right aligned text, and custom width*/
+    roller = lv_roller_create(lv_scr_act());
+    lv_roller_set_options(roller, opts, LV_ROLLER_MODE_NORMAL);
+    lv_roller_set_visible_row_count(roller, 4);
+    lv_obj_set_width(roller, 80);
+    lv_obj_add_style(roller, &style_sel, LV_PART_SELECTED);
+    lv_obj_set_style_text_align(roller, LV_TEXT_ALIGN_RIGHT, 0);
+    lv_obj_align(roller, LV_ALIGN_RIGHT_MID, -10, 0);
+    lv_obj_add_event_cb(roller, event_handler, LV_EVENT_ALL, NULL);
+    lv_roller_set_selected(roller, 8, LV_ANIM_OFF);
+}
+
+#endif
--- a/MXC-A39/lvgl/examples/widgets/roller/lv_example_roller_3.c
+++ b/MXC-A39/lvgl/examples/widgets/roller/lv_example_roller_3.c
@ -0,0 +1,92 @@
+#include "../../lv_examples.h"
+#if LV_USE_ROLLER && LV_DRAW_COMPLEX && LV_BUILD_EXAMPLES
+
+static void mask_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);
+
+    static int16_t mask_top_id = -1;
+    static int16_t mask_bottom_id = -1;
+
+    if (code == LV_EVENT_COVER_CHECK) {
+        lv_event_set_cover_res(e, LV_COVER_RES_MASKED);
+
+    } else if (code == LV_EVENT_DRAW_MAIN_BEGIN) {
+        /* add mask */
+        const lv_font_t * font = lv_obj_get_style_text_font(obj, LV_PART_MAIN);
+        lv_coord_t line_space = lv_obj_get_style_text_line_space(obj, LV_PART_MAIN);
+        lv_coord_t font_h = lv_font_get_line_height(font);
+
+        lv_area_t roller_coords;
+        lv_obj_get_coords(obj, &roller_coords);
+
+        lv_area_t rect_area;
+        rect_area.x1 = roller_coords.x1;
+        rect_area.x2 = roller_coords.x2;
+        rect_area.y1 = roller_coords.y1;
+        rect_area.y2 = roller_coords.y1 + (lv_obj_get_height(obj) - font_h - line_space) / 2;
+
+        lv_draw_mask_fade_param_t * fade_mask_top = lv_mem_buf_get(sizeof(lv_draw_mask_fade_param_t));
+        lv_draw_mask_fade_init(fade_mask_top, &rect_area, LV_OPA_TRANSP, rect_area.y1, LV_OPA_COVER, rect_area.y2);
+        mask_top_id = lv_draw_mask_add(fade_mask_top, NULL);
+
+        rect_area.y1 = rect_area.y2 + font_h + line_space - 1;
+        rect_area.y2 = roller_coords.y2;
+
+        lv_draw_mask_fade_param_t * fade_mask_bottom =lv_mem_buf_get(sizeof(lv_draw_mask_fade_param_t));
+        lv_draw_mask_fade_init(fade_mask_bottom, &rect_area, LV_OPA_COVER, rect_area.y1, LV_OPA_TRANSP, rect_area.y2);
+        mask_bottom_id = lv_draw_mask_add(fade_mask_bottom, NULL);
+
+    } else if (code == LV_EVENT_DRAW_POST_END) {
+        lv_draw_mask_fade_param_t * fade_mask_top = lv_draw_mask_remove_id(mask_top_id);
+        lv_draw_mask_fade_param_t * fade_mask_bottom = lv_draw_mask_remove_id(mask_bottom_id);
+        lv_mem_buf_release(fade_mask_top);
+        lv_mem_buf_release(fade_mask_bottom);
+        mask_top_id = -1;
+        mask_bottom_id = -1;
+    }
+}
+
+/**
+ * Add an fade mask to roller.
+ */
+void lv_example_roller_3(void)
+{
+    static lv_style_t style;
+    lv_style_init(&style);
+    lv_style_set_bg_color(&style, lv_color_black());
+    lv_style_set_text_color(&style, lv_color_white());
+    lv_style_set_border_width(&style, 0);
+    lv_style_set_pad_all(&style, 0);
+    lv_obj_add_style(lv_scr_act(), &style, 0);
+
+    lv_obj_t *roller1 = lv_roller_create(lv_scr_act());
+    lv_obj_add_style(roller1, &style, 0);
+    lv_obj_set_style_bg_opa(roller1, LV_OPA_TRANSP, LV_PART_SELECTED);
+
+#if LV_FONT_MONTSERRAT_22
+    lv_obj_set_style_text_font(roller1, &lv_font_montserrat_22, LV_PART_SELECTED);
+#endif
+
+    lv_roller_set_options(roller1,
+                        "January\n"
+                        "February\n"
+                        "March\n"
+                        "April\n"
+                        "May\n"
+                        "June\n"
+                        "July\n"
+                        "August\n"
+                        "September\n"
+                        "October\n"
+                        "November\n"
+                        "December",
+                        LV_ROLLER_MODE_NORMAL);
+
+    lv_obj_center(roller1);
+    lv_roller_set_visible_row_count(roller1, 3);
+    lv_obj_add_event_cb(roller1, mask_event_cb, LV_EVENT_ALL, NULL);
+}
+
+#endif
--- a/MXC-A39/lvgl/examples/widgets/slider/index.rst
+++ b/MXC-A39/lvgl/examples/widgets/slider/index.rst
@ -0,0 +1,26 @@
+C
+^
+
+Simple Slider
+"""""""""""""""""""""""""
+
+.. lv_example:: widgets/slider/lv_example_slider_1
+  :language: c
+
+Slider with custom style
+"""""""""""""""""""""""""
+
+.. lv_example:: widgets/slider/lv_example_slider_2
+  :language: c
+  
+Slider with extended drawer
+""""""""""""""""""""""""""""
+
+.. lv_example:: widgets/slider/lv_example_slider_3
+  :language: c
+  
+
+MicroPython
+^^^^^^^^^^^
+
+No examples yet.
--- a/MXC-A39/lvgl/examples/widgets/slider/lv_example_slider_1.c
+++ b/MXC-A39/lvgl/examples/widgets/slider/lv_example_slider_1.c
@ -0,0 +1,33 @@
+#include "../../lv_examples.h"
+#if LV_USE_SLIDER && LV_BUILD_EXAMPLES
+
+static void slider_event_cb(lv_event_t * e);
+static lv_obj_t * slider_label;
+
+/**
+ * A default slider with a label displaying the current value
+ */
+void lv_example_slider_1(void)
+{
+    /*Create a slider in the center of the display*/
+    lv_obj_t * slider = lv_slider_create(lv_scr_act());
+    lv_obj_center(slider);
+    lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
+
+    /*Create a label below the slider*/
+    slider_label = lv_label_create(lv_scr_act());
+    lv_label_set_text(slider_label, "0%");
+
+    lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
+}
+
+static void slider_event_cb(lv_event_t * e)
+{
+    lv_obj_t * slider = lv_event_get_target(e);
+    char buf[8];
+    lv_snprintf(buf, sizeof(buf), "%d%%", lv_slider_get_value(slider));
+    lv_label_set_text(slider_label, buf);
+    lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
+}
+
+#endif
--- a/MXC-A39/lvgl/examples/widgets/slider/lv_example_slider_1.py
+++ b/MXC-A39/lvgl/examples/widgets/slider/lv_example_slider_1.py
@ -0,0 +1,37 @@
+def event_handler(obj, event):
+    if event == lv.EVENT.VALUE_CHANGED:
+        print("Value: %d" % obj.get_value())
+
+# Create styles
+style_bg = lv.style_t()
+style_indic = lv.style_t()
+style_knob = lv.style_t()
+
+lv.style_copy(style_bg, lv.style_pretty)
+style_bg.body.main_color =  lv.color_make(0,0,0)
+style_bg.body.grad_color =  lv.color_make(0x80, 0x80, 0x80)
+style_bg.body.radius = 800 # large enough to make a circle
+style_bg.body.border.color = lv.color_make(0xff,0xff,0xff)
+
+lv.style_copy(style_indic, lv.style_pretty_color)
+style_indic.body.radius = 800
+style_indic.body.shadow.width = 8
+style_indic.body.shadow.color = style_indic.body.main_color
+style_indic.body.padding.left = 3
+style_indic.body.padding.right = 3
+style_indic.body.padding.top = 3
+style_indic.body.padding.bottom = 3
+
+lv.style_copy(style_knob, lv.style_pretty)
+style_knob.body.radius = 800
+style_knob.body.opa = lv.OPA._70
+style_knob.body.padding.top = 10
+style_knob.body.padding.bottom = 10
+
+# Create a slider
+slider = lv.slider(lv.scr_act())
+slider.set_style(lv.slider.STYLE.BG, style_bg)
+slider.set_style(lv.slider.STYLE.INDIC, style_indic)
+slider.set_style(lv.slider.STYLE.KNOB, style_knob)
+slider.align(None, lv.ALIGN.CENTER, 0, 0)
+slider.set_event_cb(event_handler)
--- a/MXC-A39/lvgl/examples/widgets/slider/lv_example_slider_2.c
+++ b/MXC-A39/lvgl/examples/widgets/slider/lv_example_slider_2.c
@ -0,0 +1,57 @@
+#include "../../lv_examples.h"
+#if LV_USE_SLIDER && LV_BUILD_EXAMPLES
+
+
+
+/**
+ * Show how to style a slider.
+ */
+void lv_example_slider_2(void)
+{
+    /*Create a transition*/
+    static const lv_style_prop_t props[] = {LV_STYLE_BG_COLOR, 0};
+    static lv_style_transition_dsc_t transition_dsc;
+    lv_style_transition_dsc_init(&transition_dsc, props, lv_anim_path_linear, 300, 0, NULL);
+
+    static lv_style_t style_main;
+    static lv_style_t style_indicator;
+    static lv_style_t style_knob;
+    static lv_style_t style_pressed_color;
+    lv_style_init(&style_main);
+    lv_style_set_bg_opa(&style_main, LV_OPA_COVER);
+    lv_style_set_bg_color(&style_main, lv_color_hex3(0xbbb));
+    lv_style_set_radius(&style_main, LV_RADIUS_CIRCLE);
+    lv_style_set_pad_ver(&style_main, -2); /*Makes the indicator larger*/
+
+    lv_style_init(&style_indicator);
+    lv_style_set_bg_opa(&style_indicator, LV_OPA_COVER);
+    lv_style_set_bg_color(&style_indicator, lv_palette_main(LV_PALETTE_CYAN));
+    lv_style_set_radius(&style_indicator, LV_RADIUS_CIRCLE);
+    lv_style_set_transition(&style_indicator, &transition_dsc);
+
+    lv_style_init(&style_knob);
+    lv_style_set_bg_opa(&style_knob, LV_OPA_COVER);
+    lv_style_set_bg_color(&style_knob, lv_palette_main(LV_PALETTE_CYAN));
+    lv_style_set_border_color(&style_knob, lv_palette_darken(LV_PALETTE_CYAN, 3));
+    lv_style_set_border_width(&style_knob, 2);
+    lv_style_set_radius(&style_knob, LV_RADIUS_CIRCLE);
+    lv_style_set_pad_all(&style_knob, 6); /*Makes the knob larger*/
+    lv_style_set_transition(&style_knob, &transition_dsc);
+
+    lv_style_init(&style_pressed_color);
+    lv_style_set_bg_color(&style_pressed_color, lv_palette_darken(LV_PALETTE_CYAN, 2));
+
+    /*Create a slider and add the style*/
+    lv_obj_t * slider = lv_slider_create(lv_scr_act());
+    lv_obj_remove_style_all(slider);        /*Remove the styles coming from the theme*/
+
+    lv_obj_add_style(slider, &style_main, LV_PART_MAIN);
+    lv_obj_add_style(slider, &style_indicator, LV_PART_INDICATOR);
+    lv_obj_add_style(slider, &style_pressed_color, LV_PART_INDICATOR | LV_STATE_PRESSED);
+    lv_obj_add_style(slider, &style_knob, LV_PART_KNOB);
+    lv_obj_add_style(slider, &style_pressed_color, LV_PART_KNOB | LV_STATE_PRESSED);
+
+    lv_obj_center(slider);
+}
+
+#endif
--- a/Show More
+++ b/Show More