adding micropython examples (#2286)

* adding micropython examples

* adding micropython examples

114 files changed, 4143 insertions, 664 deletions

diff --git a/examples/anim/lv_example_anim_1.py b/examples/anim/lv_example_anim_1.py
new file mode 100644
index 000000000..e0f8cf576
--- /dev/null
+++ b/examples/anim/lv_example_anim_1.py
@@ -0,0 +1,41 @@
+def anim_x_cb(label, v):
+    label.set_x(v)
+
+def sw_event_cb(e,label):
+    sw = e.get_target()
+
+    if sw.has_state(lv.STATE.CHECKED): 
+        a = lv.anim_t()
+        a.init()
+        a.set_var(label)
+        a.set_values(label.get_x(), 100)
+        a.set_time(500)
+        a.set_path_cb(lv.anim_t.path_overshoot)
+        a.set_custom_exec_cb(lambda a,val: anim_x_cb(label,val))
+        lv.anim_t.start(a)
+    else:
+        a = lv.anim_t()
+        a.init()
+        a.set_var(label)
+        a.set_values(label.get_x(), -label.get_width())
+        a.set_time(500)
+        a.set_path_cb(lv.anim_t.path_ease_in)
+        a.set_custom_exec_cb(lambda a,val: anim_x_cb(label,val))
+        lv.anim_t.start(a)
+
+#
+# Start animation on an event
+#
+
+label = lv.label(lv.scr_act())
+label.set_text("Hello animations!")
+label.set_pos(100, 10)
+
+
+sw = lv.switch(lv.scr_act())
+sw.center()
+sw.add_state(lv.STATE.CHECKED)
+sw.add_event_cb(lambda e: sw_event_cb(e,label), lv.EVENT.VALUE_CHANGED, None)
+
+
+
diff --git a/examples/anim/lv_example_anim_2.py b/examples/anim/lv_example_anim_2.py
new file mode 100644
index 000000000..1b0356a5c
--- /dev/null
+++ b/examples/anim/lv_example_anim_2.py
@@ -0,0 +1,41 @@
+def anim_x_cb(obj, v):
+    obj.set_x(v)
+
+def anim_size_cb(obj, v):
+    obj.set_size(v, v)
+
+
+#
+# Create a playback animation
+#
+obj = lv.obj(lv.scr_act())
+obj.set_style_bg_color(lv.palette_main(lv.PALETTE.RED), 0)
+obj.set_style_radius(lv.RADIUS.CIRCLE, 0)
+
+obj.align(lv.ALIGN.LEFT_MID, 10, 0)
+
+a1 = lv.anim_t()
+a1.init()
+a1.set_var(obj)
+a1.set_values(10, 50)
+a1.set_time(1000)
+a1.set_playback_delay(100)
+a1.set_playback_time(300)
+a1.set_repeat_delay(500)
+a1.set_repeat_count(lv.ANIM_REPEAT.INFINITE)
+a1.set_path_cb(lv.anim_t.path_ease_in_out)
+a1.set_custom_exec_cb(lambda a1,val: anim_size_cb(obj,val))
+lv.anim_t.start(a1)
+
+a2 = lv.anim_t()
+a2.init()
+a2.set_var(obj)
+a2.set_values(10, 240)
+a2.set_time(1000)
+a2.set_playback_delay(100)
+a2.set_playback_time(300)
+a2.set_repeat_delay(500)
+a2.set_repeat_count(lv.ANIM_REPEAT.INFINITE)
+a2.set_path_cb(lv.anim_t.path_ease_in_out)
+a2.set_custom_exec_cb(lambda a1,val: anim_x_cb(obj,val))
+lv.anim_t.start(a2)
diff --git a/examples/assets/img_star.png b/examples/assets/img_star.png
new file mode 120000
index 000000000..d40d090e2
--- /dev/null
+++ b/examples/assets/img_star.png
@@ -0,0 +1 @@
+star.png
\ No newline at end of file
diff --git a/examples/assets/img_strip.png b/examples/assets/img_strip.png
new file mode 120000
index 000000000..8c85ec02b
--- /dev/null
+++ b/examples/assets/img_strip.png
@@ -0,0 +1 @@
+skew_strip.png
\ No newline at end of file
diff --git a/examples/event/lv_example_event_1.py b/examples/event/lv_example_event_1.py
new file mode 100644
index 000000000..b1947610a
--- /dev/null
+++ b/examples/event/lv_example_event_1.py
@@ -0,0 +1,25 @@
+class Event_1():
+    def __init__(self):
+        self.cnt = 1
+        #
+        # Add click event to a button
+        #
+
+        btn = lv.btn(lv.scr_act())
+        btn.set_size(100, 50)
+        btn.center()
+        btn.add_event_cb(self.event_cb, lv.EVENT.CLICKED, None)
+        
+        label = lv.label(btn)
+        label.set_text("Click me!");
+        label.center()
+
+    def event_cb(self,e):
+        print("Clicked");
+            
+        btn = lv.btn.__cast__(e.get_target())
+        label = btn.get_child(0)
+        label.set_text(str(self.cnt))
+        self.cnt += 1
+
+evt1 = Event_1()
diff --git a/examples/event/lv_example_event_2.py b/examples/event/lv_example_event_2.py
new file mode 100644
index 000000000..ff714a2b2
--- /dev/null
+++ b/examples/event/lv_example_event_2.py
@@ -0,0 +1,22 @@
+def event_cb(e,label):
+    code = e.get_code()
+    if code == lv.EVENT.PRESSED:
+        label.set_text("The last button event:\nLV_EVENT_PRESSED")
+    elif code == lv.EVENT.CLICKED:
+        label.set_text("The last button event:\nLV_EVENT_CLICKED")
+    elif code ==  lv.EVENT.LONG_PRESSED:
+        label.set_text("The last button event:\nLV_EVENT_LONG_PRESSED")
+    elif code == lv.EVENT.LONG_PRESSED_REPEAT:
+        label.set_text("The last button event:\nLV_EVENT_LONG_PRESSED_REPEAT")        
+btn = lv.btn(lv.scr_act())
+btn.set_size(100, 50)
+btn.center()
+
+btn_label = lv.label(btn)
+btn_label.set_text("Click me!")
+btn_label.center()
+
+info_label = lv.label(lv.scr_act())
+info_label.set_text("The last button event:\nNone");
+
+btn.add_event_cb(lambda e: event_cb(e,info_label), lv.EVENT.ALL, None)
diff --git a/examples/event/lv_example_event_3.py b/examples/event/lv_example_event_3.py
new file mode 100644
index 000000000..e9b078126
--- /dev/null
+++ b/examples/event/lv_example_event_3.py
@@ -0,0 +1,31 @@
+def event_cb(e):
+
+    # The original target of the event. Can be the buttons or the container
+    target = e.get_target()
+    # print(type(target))
+
+    # If container was clicked do nothing
+    if type(target) != type(lv.btn()):
+        return
+
+    # Make the clicked buttons red
+    target.set_style_bg_color(lv.palette_main(lv.PALETTE.RED), 0)
+
+#
+# Demonstrate event bubbling
+#
+
+cont = lv.obj(lv.scr_act())
+cont.set_size(320, 200)
+cont.center()
+cont.set_flex_flow(lv.FLEX_FLOW.ROW_WRAP)
+
+for i in range(30):
+    btn = lv.btn(cont)
+    btn.set_size(80, 50)
+    btn.add_flag(lv.obj.FLAG.EVENT_BUBBLE)
+
+    label = lv.label(btn)
+    label.set_text(str(i))
+    label.center()
+    cont.add_event_cb(event_cb, lv.EVENT.CLICKED, None)
diff --git a/examples/get_started/lv_example_get_started_1.py b/examples/get_started/lv_example_get_started_1.py
new file mode 100644
index 000000000..639048644
--- /dev/null
+++ b/examples/get_started/lv_example_get_started_1.py
@@ -0,0 +1,29 @@
+class CounterBtn():
+    def __init__(self):
+        self.cnt = 0
+        #
+        # Create a button with a label and react on click event.
+        #
+
+        btn = lv.btn(lv.scr_act())                               # Add a button the current screen
+        btn.set_pos(10, 10)                                      # Set its position
+        btn.set_size(120, 50)                                    # Set its size
+        btn.align(lv.ALIGN.CENTER,0,0)
+        btn.add_event_cb(self.btn_event_cb, lv.EVENT.ALL, None)  # Assign a callback to the button
+        label = lv.label(btn)                                    # Add a label to the button
+        label.set_text("Button")                                 # Set the labels text
+        label.center()
+
+    def btn_event_cb(self,evt):
+        code = evt.get_code()
+        btn = evt.get_target()
+        if code == lv.EVENT.CLICKED:
+            self.cnt += 1
+
+        # Get the first child of the button which is the label and change its text
+        label = lv.label.__cast__(btn.get_child(0))
+        label.set_text("Button: " + str(self.cnt))
+
+
+counterBtn = CounterBtn()
+
diff --git a/examples/get_started/lv_example_get_started_2.py b/examples/get_started/lv_example_get_started_2.py
new file mode 100644
index 000000000..19aaf4a67
--- /dev/null
+++ b/examples/get_started/lv_example_get_started_2.py
@@ -0,0 +1,62 @@
+#
+# Create styles from scratch for buttons.
+#
+style_btn =  lv.style_t()
+style_btn_red = lv.style_t()
+style_btn_pressed = lv.style_t()
+
+# Create a simple button style
+style_btn.init()
+style_btn.set_radius(10)
+style_btn.set_bg_opa(lv.OPA.COVER)
+style_btn.set_bg_color(lv.palette_lighten(lv.PALETTE.GREY, 3))
+style_btn.set_bg_grad_color(lv.palette_main(lv.PALETTE.GREY))
+style_btn.set_bg_grad_dir(lv.GRAD_DIR.VER)
+
+# Add a border
+style_btn.set_border_color(lv.color_white())
+style_btn.set_border_opa(lv.OPA._70)
+style_btn.set_border_width(2)
+
+# Set the text style
+style_btn.set_text_color(lv.color_white())
+
+# Create a red style. Change only some colors.
+style_btn_red.init()
+style_btn_red.set_bg_color(lv.palette_main(lv.PALETTE.RED))
+style_btn_red.set_bg_grad_color(lv.palette_lighten(lv.PALETTE.RED, 2))
+
+# Create a style for the pressed state.
+style_btn_pressed.init()
+style_btn_pressed.set_bg_color(lv.palette_main(lv.PALETTE.BLUE))
+style_btn_pressed.set_bg_grad_color(lv.palette_darken(lv.PALETTE.RED, 3))
+
+# Create a button and use the new styles
+btn = lv.btn(lv.scr_act())                  # Add a button the current screen
+# Remove the styles coming from the theme
+# Note that size and position are also stored as style properties
+# so lv_obj_remove_style_all will remove the set size and position too
+btn.remove_style_all()                      # Remove the styles coming from the theme
+btn.set_pos(10, 10)                         # Set its position
+btn.set_size(120, 50)                       # Set its size
+btn.add_style(style_btn, 0)
+btn.add_style(style_btn_pressed, lv.STATE.PRESSED)
+
+label = lv.label(btn)                       # Add a label to the button
+label.set_text("Button")                    # Set the labels text
+label.center()
+
+# Create an other button and use the red style too
+btn2 = lv.btn(lv.scr_act())
+btn2.remove_style_all()                     # Remove the styles coming from the theme
+btn2.set_pos(10, 80)                        # Set its position
+btn2.set_size(120, 50)                      # Set its size
+btn2.add_style(style_btn, 0)
+btn2.add_style(style_btn_red, 0)
+btn2.add_style(style_btn_pressed, lv.STATE.PRESSED)
+btn2.set_style_radius(lv.RADIUS.CIRCLE, 0); # Add a local style
+
+label = lv.label(btn2)                      # Add a label to the button
+label.set_text("Button 2");                 # Set the labels text
+label.center()
+
diff --git a/examples/get_started/lv_example_get_started_3.py b/examples/get_started/lv_example_get_started_3.py
new file mode 100644
index 000000000..cac113edd
--- /dev/null
+++ b/examples/get_started/lv_example_get_started_3.py
@@ -0,0 +1,22 @@
+def slider_event_cb(evt):
+    slider = evt.get_target()
+
+    # Refresh the text
+    label.set_text(str(slider.get_value()))
+
+#
+# Create a slider and write its value on a label.
+#
+            
+# Create a slider in the center of the display
+slider = lv.slider(lv.scr_act())
+slider.set_width(200)                                              # Set the width
+slider.center()                                                    # Align to the center of the parent (screen)
+slider.add_event_cb(slider_event_cb, lv.EVENT.VALUE_CHANGED, None) # Assign an event function
+
+# Create a label below the slider
+label = lv.label(lv.scr_act());
+label.set_text("0")
+label.align_to(slider, lv.ALIGN.OUT_TOP_MID, 0, -15)               # Align below the slider
+
+
diff --git a/examples/header.py b/examples/header.py
new file mode 100644
index 000000000..d74504ebf
--- /dev/null
+++ b/examples/header.py
@@ -0,0 +1,3 @@
+#!/opt/bin/lv_micropython -i
+import lvgl as lv
+import display_driver
diff --git a/examples/layouts/flex/lv_example_flex_1.py b/examples/layouts/flex/lv_example_flex_1.py
new file mode 100644
index 000000000..8dc23851b
--- /dev/null
+++ b/examples/layouts/flex/lv_example_flex_1.py
@@ -0,0 +1,33 @@
+#
+# A simple row and a column layout with flexbox
+#
+
+# Create a container with ROW flex direction
+cont_row = lv.obj(lv.scr_act())
+cont_row.set_size(300, 75)
+cont_row.align(lv.ALIGN.TOP_MID, 0, 5)
+cont_row.set_flex_flow(lv.FLEX_FLOW.ROW)
+
+# Create a container with COLUMN flex direction
+cont_col = lv.obj(lv.scr_act())
+cont_col.set_size(200, 150)
+cont_col.align_to(cont_row, lv.ALIGN.OUT_BOTTOM_MID, 0, 5)
+cont_col.set_flex_flow(lv.FLEX_FLOW.COLUMN)
+
+for i in range(10):
+    # Add items to the row
+    obj = lv.btn(cont_row)
+    obj.set_size(100, lv.pct(100))
+
+    label = lv.label(obj)
+    label.set_text("Item: {:d}".format(i))
+    label.center()
+
+    # Add items to the column
+    obj = lv.btn(cont_col)
+    obj.set_size(lv.pct(100), lv.SIZE.CONTENT)
+
+    label = lv.label(obj)
+    label.set_text("Item: {:d}".format(i))
+    label.center()
+
diff --git a/examples/layouts/flex/lv_example_flex_2.py b/examples/layouts/flex/lv_example_flex_2.py
new file mode 100644
index 000000000..7a8012c17
--- /dev/null
+++ b/examples/layouts/flex/lv_example_flex_2.py
@@ -0,0 +1,22 @@
+#
+# Arrange items in rows with wrap and place the items to get even space around them.
+#
+style = lv.style_t()
+style.init()
+style.set_flex_flow(lv.FLEX_FLOW.ROW_WRAP)
+style.set_flex_main_place(lv.FLEX_ALIGN.SPACE_EVENLY)
+style.set_layout(lv.LAYOUT_FLEX.value)
+
+cont = lv.obj(lv.scr_act())
+cont.set_size(300, 220)
+cont.center()
+cont.add_style(style, 0)
+
+for i in range(8):
+    obj = lv.obj(cont)
+    obj.set_size(70, lv.SIZE.CONTENT)
+
+    label = lv.label(obj)
+    label.set_text("{:d}".format(i))
+    label.center()
+
diff --git a/examples/layouts/flex/lv_example_flex_3.py b/examples/layouts/flex/lv_example_flex_3.py
new file mode 100644
index 000000000..fb60ce91f
--- /dev/null
+++ b/examples/layouts/flex/lv_example_flex_3.py
@@ -0,0 +1,23 @@
+#
+# Demonstrate flex grow.
+#
+
+cont = lv.obj(lv.scr_act())
+cont.set_size(300, 220)
+cont.center()
+cont.set_flex_flow(lv.FLEX_FLOW.ROW)
+
+obj = lv.obj(cont)
+obj.set_size(40, 40)           # Fix size
+
+obj = lv.obj(cont)
+obj.set_height(40)
+obj.set_flex_grow(1)           # 1 portion from the free space
+
+obj = lv.obj(cont)
+obj.set_height(40)
+obj.set_flex_grow(2)           # 2 portion from the free space
+
+obj = lv.obj(cont)
+obj.set_size(40, 40)           # Fix size. It is flushed to the right by the "grow" items
+
diff --git a/examples/layouts/flex/lv_example_flex_4.py b/examples/layouts/flex/lv_example_flex_4.py
new file mode 100644
index 000000000..4958e9381
--- /dev/null
+++ b/examples/layouts/flex/lv_example_flex_4.py
@@ -0,0 +1,16 @@
+#
+# Reverse the order of flex items
+#
+cont = lv.obj(lv.scr_act())
+cont.set_size(300, 220)
+cont.center()
+cont.set_flex_flow(lv.FLEX_FLOW.COLUMN_REVERSE)
+
+for i  in range(6):
+    obj = lv.obj(cont)
+    obj.set_size(100, 50)
+
+    label = lv.label(obj)
+    label.set_text("Item: " + str(i))
+    label.center()
+
diff --git a/examples/layouts/flex/lv_example_flex_5.py b/examples/layouts/flex/lv_example_flex_5.py
new file mode 100644
index 000000000..11e11f969
--- /dev/null
+++ b/examples/layouts/flex/lv_example_flex_5.py
@@ -0,0 +1,47 @@
+def row_gap_anim(obj, v):
+    obj.set_style_pad_row(v, 0)
+
+
+def column_gap_anim(obj, v):
+    obj.set_style_pad_column(v, 0)
+
+#
+# Demonstrate the effect of column and row gap style properties
+#
+
+cont = lv.obj(lv.scr_act())
+cont.set_size(300, 220)
+cont.center()
+cont.set_flex_flow(lv.FLEX_FLOW.ROW_WRAP)
+
+for i in range(9):
+    obj = lv.obj(cont)
+    obj.set_size(70, lv.SIZE.CONTENT)
+
+    label = lv.label(obj)
+    label.set_text(str(i))
+    label.center()
+
+a_row = lv.anim_t()
+a_row.init()
+a_row.set_var(cont)
+a_row.set_values(0, 10)
+a_row.set_repeat_count(lv.ANIM_REPEAT.INFINITE)
+
+a_row.set_time(500)
+a_row.set_playback_time(500)
+a_row.set_custom_exec_cb(lambda a,val: row_gap_anim(cont,val))
+lv.anim_t.start(a_row)
+
+a_col = lv.anim_t()
+a_col.init()
+a_col.set_var(cont)
+a_col.set_values(0, 10)
+a_col.set_repeat_count(lv.ANIM_REPEAT.INFINITE)
+
+a_col.set_time(3000)
+a_col.set_playback_time(3000)
+a_col.set_custom_exec_cb(lambda a,val: column_gap_anim(cont,val))
+
+lv.anim_t.start(a_col)
+
diff --git a/examples/layouts/flex/lv_example_flex_6.py b/examples/layouts/flex/lv_example_flex_6.py
new file mode 100644
index 000000000..b29cf7050
--- /dev/null
+++ b/examples/layouts/flex/lv_example_flex_6.py
@@ -0,0 +1,19 @@
+#
+# RTL base direction changes order of the items.
+# Also demonstrate how horizontal scrolling works with RTL.
+#
+
+cont = lv.obj(lv.scr_act())
+cont.set_style_base_dir(lv.BASE_DIR.RTL,0)
+cont.set_size(300, 220)
+cont.center()
+cont.set_flex_flow(lv.FLEX_FLOW.ROW_WRAP)
+
+for i in range(20):
+    obj = lv.obj(cont)
+    obj.set_size(70, lv.SIZE.CONTENT)
+    
+    label = lv.label(obj)
+    label.set_text(str(i))
+    label.center()
+
diff --git a/examples/layouts/grid/lv_example_grid_1.py b/examples/layouts/grid/lv_example_grid_1.py
new file mode 100644
index 000000000..814b076fd
--- /dev/null
+++ b/examples/layouts/grid/lv_example_grid_1.py
@@ -0,0 +1,29 @@
+#
+# A simple grid
+#
+
+col_dsc = [70, 70, 70, lv.COORD.MAX]
+row_dsc = [50, 50, 50, lv.COORD.MAX]
+
+# Create a container with grid
+cont = lv.obj(lv.scr_act())
+cont.set_style_grid_column_dsc_array(col_dsc, 0)
+cont.set_style_grid_row_dsc_array(row_dsc, 0)
+cont.set_size(300, 220)
+cont.center()
+cont.set_layout(lv.LAYOUT_GRID.value)
+
+for i in range(9):
+    col = i % 3
+    row = i // 3
+
+    obj = lv.btn(cont)
+    # Stretch the cell horizontally and vertically too
+    # Set span to 1 to make the cell 1 column/row sized
+    obj.set_grid_cell(lv.GRID_ALIGN.STRETCH, col, 1,
+                      lv.GRID_ALIGN.STRETCH, row, 1)
+
+    label = lv.label(obj)
+    label.set_text("c" +str(col) +  "r" +str(row))
+    label.center()
+
diff --git a/examples/layouts/grid/lv_example_grid_2.py b/examples/layouts/grid/lv_example_grid_2.py
new file mode 100644
index 000000000..7faea0045
--- /dev/null
+++ b/examples/layouts/grid/lv_example_grid_2.py
@@ -0,0 +1,53 @@
+#
+# Demonstrate cell placement and span
+#
+
+col_dsc = [70, 70, 70, lv.GRID_TEMPLATE.LAST]
+row_dsc = [50, 50, 50, lv.GRID_TEMPLATE.LAST]
+
+# Create a container with grid
+cont = lv.obj(lv.scr_act())
+cont.set_grid_dsc_array(col_dsc, row_dsc)
+cont.set_size(300, 220)
+cont.center()
+
+# Cell to 0;0 and align to to the start (left/top) horizontally and vertically too
+obj = lv.obj(cont)
+obj.set_size(lv.SIZE.CONTENT, lv.SIZE.CONTENT)
+obj.set_grid_cell(lv.GRID_ALIGN.START, 0, 1,
+                  lv.GRID_ALIGN.START, 0, 1)
+label = lv.label(obj);
+label.set_text("c0, r0")
+
+# Cell to 1;0 and align to to the start (left) horizontally and center vertically too
+obj = lv.obj(cont)
+obj.set_size(lv.SIZE.CONTENT, lv.SIZE.CONTENT)
+obj.set_grid_cell(lv.GRID_ALIGN.START, 1, 1,
+                  lv.GRID_ALIGN.CENTER, 0, 1)
+label = lv.label(obj)
+label.set_text("c1, r0")
+
+# Cell to 2;0 and align to to the start (left) horizontally and end (bottom) vertically too
+obj = lv.obj(cont)
+obj.set_size(lv.SIZE.CONTENT, lv.SIZE.CONTENT)
+obj.set_grid_cell(lv.GRID_ALIGN.START, 2, 1,
+                  lv.GRID_ALIGN.END, 0, 1)
+label = lv.label(obj)
+label.set_text("c2, r0");
+
+# Cell to 1;1 but 2 column wide (span = 2).Set width and height to stretched.
+obj = lv.obj(cont)
+obj.set_size(lv.SIZE.CONTENT, lv.SIZE.CONTENT)
+obj.set_grid_cell(lv.GRID_ALIGN.STRETCH, 1, 2,
+                  lv.GRID_ALIGN.STRETCH, 1, 1)
+label = lv.label(obj)
+label.set_text("c1-2, r1")
+
+# Cell to 0;1 but 2 rows tall (span = 2).Set width and height to stretched.
+obj = lv.obj(cont)
+obj.set_size(lv.SIZE.CONTENT, lv.SIZE.CONTENT)
+obj.set_grid_cell(lv.GRID_ALIGN.STRETCH, 0, 1,
+                  lv.GRID_ALIGN.STRETCH, 1, 2)
+label = lv.label(obj)
+label.set_text("c0\nr1-2")
+
diff --git a/examples/layouts/grid/lv_example_grid_3.py b/examples/layouts/grid/lv_example_grid_3.py
new file mode 100644
index 000000000..873129995
--- /dev/null
+++ b/examples/layouts/grid/lv_example_grid_3.py
@@ -0,0 +1,38 @@
+def LV_GRID_FR(x):
+    return lv.COORD.MAX - 100 + x
+#
+# Demonstrate grid's "free unit"
+#
+
+# Column 1: fix width 60 px
+# Column 2: 1 unit from the remaining free space
+# Column 3: 2 unit from the remaining free space
+
+col_dsc = [60, LV_GRID_FR(1), LV_GRID_FR(2), lv.COORD.MAX]
+
+# Row 1: fix width 60 px
+# Row 2: 1 unit from the remaining free space
+# Row 3: fix width 60 px
+
+row_dsc = [40, LV_GRID_FR(1), 40, lv.COORD.MAX]
+
+# Create a container with grid
+cont = lv.obj(lv.scr_act())
+cont.set_size(300, 220)
+cont.center()
+cont.set_grid_dsc_array(col_dsc, row_dsc)
+
+for i in range(9):
+    col = i % 3
+    row = i // 3
+
+    obj = lv.obj(cont)
+    # Stretch the cell horizontally and vertically too
+    # Set span to 1 to make the cell 1 column/row sized
+    obj.set_grid_cell(lv.GRID_ALIGN.STRETCH, col, 1,
+                      lv.GRID_ALIGN.STRETCH, row, 1)
+
+    label = lv.label(obj)
+    label.set_text("%d,%d"%(col, row))
+    label.center()
+
diff --git a/examples/layouts/grid/lv_example_grid_4.py b/examples/layouts/grid/lv_example_grid_4.py
new file mode 100644
index 000000000..cc2185b7d
--- /dev/null
+++ b/examples/layouts/grid/lv_example_grid_4.py
@@ -0,0 +1,32 @@
+#
+# Demonstrate track placement
+#
+
+col_dsc = [60, 60, 60, lv.GRID_TEMPLATE.LAST]
+row_dsc = [40, 40, 40, lv.GRID_TEMPLATE.LAST]
+
+
+# Add space between the columns and move the rows to the bottom (end)
+
+# Create a container with grid
+cont = lv.obj(lv.scr_act())
+cont.set_grid_align(lv.GRID_ALIGN.SPACE_BETWEEN, lv.GRID_ALIGN.END)
+cont.set_grid_dsc_array(col_dsc, row_dsc)
+cont.set_size(300, 220)
+cont.center()
+
+
+for i in range(9):
+    col = i % 3
+    row = i // 3
+
+    obj = lv.obj(cont)
+    # Stretch the cell horizontally and vertically too
+    # Set span to 1 to make the cell 1 column/row sized
+    obj.set_grid_cell(lv.GRID_ALIGN.STRETCH, col, 1,
+                      lv.GRID_ALIGN.STRETCH, row, 1)
+
+    label = lv.label(obj)
+    label.set_text("{:d}{:d}".format(col, row))
+    label.center()
+
diff --git a/examples/layouts/grid/lv_example_grid_5.py b/examples/layouts/grid/lv_example_grid_5.py
new file mode 100644
index 000000000..83f500b8e
--- /dev/null
+++ b/examples/layouts/grid/lv_example_grid_5.py
@@ -0,0 +1,52 @@
+def row_gap_anim(obj, v):
+    obj.set_style_pad_row(v, 0)
+
+def column_gap_anim(obj, v):
+    obj.set_style_pad_column(v, 0)
+
+#
+# Demonstrate column and row gap
+#
+
+# 60x60 cells
+col_dsc = [60, 60, 60, lv.GRID_TEMPLATE.LAST]
+row_dsc = [40, 40, 40, lv.GRID_TEMPLATE.LAST]
+
+# Create a container with grid
+cont = lv.obj(lv.scr_act())
+cont.set_size(300, 220)
+cont.center()
+cont.set_grid_dsc_array(col_dsc, row_dsc)
+
+for i in range(9):
+    col = i % 3
+    row = i // 3
+
+    obj = lv.obj(cont)
+    obj.set_grid_cell(lv.GRID_ALIGN.STRETCH, col, 1,
+                      lv.GRID_ALIGN.STRETCH, row, 1)
+    label = lv.label(obj)
+    label.set_text("{:d},{:d}".format(col, row))
+    label.center()
+
+    a_row = lv.anim_t()
+    a_row.init()
+    a_row.set_var(cont)
+    a_row.set_values(0, 10)
+    a_row.set_repeat_count(lv.ANIM_REPEAT.INFINITE)
+    a_row.set_time(500)
+    a_row.set_playback_time(500)
+    a_row. set_custom_exec_cb(lambda a,val: row_gap_anim(cont,val))
+    lv.anim_t.start(a_row)
+
+    a_col = lv.anim_t()
+    a_col.init()
+    a_col.set_var(cont)
+    a_col.set_values(0, 10)
+    a_col.set_repeat_count(lv.ANIM_REPEAT.INFINITE)
+    a_col.set_time(500)
+    a_col.set_playback_time(500)
+    a_col. set_custom_exec_cb(lambda a,val: column_gap_anim(cont,val))
+    lv.anim_t.start(a_col)
+
+
diff --git a/examples/layouts/grid/lv_example_grid_6.py b/examples/layouts/grid/lv_example_grid_6.py
new file mode 100644
index 000000000..d5d773b30
--- /dev/null
+++ b/examples/layouts/grid/lv_example_grid_6.py
@@ -0,0 +1,27 @@
+#
+# Demonstrate RTL direction on grid
+#
+col_dsc = [60, 60, 60, lv.GRID_TEMPLATE.LAST]
+row_dsc = [40, 40, 40, lv.GRID_TEMPLATE.LAST]
+
+# Create a container with grid
+cont = lv.obj(lv.scr_act())
+cont.set_size(300, 220)
+cont.center()
+cont.set_style_base_dir(lv.BASE_DIR.RTL,0)
+cont.set_grid_dsc_array(col_dsc, row_dsc)
+
+for i in range(9):
+    col = i % 3
+    row = i // 3
+
+    obj = lv.obj(cont)
+    # Stretch the cell horizontally and vertically too
+    # Set span to 1 to make the cell 1 column/row sized
+    obj.set_grid_cell(lv.GRID_ALIGN.STRETCH, col, 1,
+                      lv.GRID_ALIGN.STRETCH, row, 1);
+    
+    label = lv.label(obj)
+    label.set_text("{:d},{:d}".format(col, row))
+    label.center()
+
diff --git a/examples/scroll/lv_example_scroll_1.py b/examples/scroll/lv_example_scroll_1.py
new file mode 100644
index 000000000..f04589718
--- /dev/null
+++ b/examples/scroll/lv_example_scroll_1.py
@@ -0,0 +1,38 @@
+#
+# Demonstrate how scrolling appears automatically
+#
+# Create an object with the new style
+panel = lv.obj(lv.scr_act())
+panel.set_size(200, 200)
+panel.center()
+
+child = lv.obj(panel)
+child.set_pos(0, 0)
+label = lv.label(child)
+label.set_text("Zero")
+label.center()
+
+child = lv.obj(panel)
+child.set_pos(-40, 100)
+label = lv.label(child)
+label.set_text("Left")
+label.center()
+
+child = lv.obj(panel)
+child.set_pos(90, -30)
+label = lv.label(child)
+label.set_text("Top")
+label.center()
+
+child = lv.obj(panel)
+child.set_pos(150, 80)
+label = lv.label(child)
+label.set_text("Right")
+label.center()
+
+child = lv.obj(panel)
+child.set_pos(60, 170)
+label = lv.label(child)
+label.set_text("Bottom")
+label.center()
+
diff --git a/examples/scroll/lv_example_scroll_2.py b/examples/scroll/lv_example_scroll_2.py
new file mode 100644
index 000000000..37c00f441
--- /dev/null
+++ b/examples/scroll/lv_example_scroll_2.py
@@ -0,0 +1,47 @@
+def sw_event_cb(e,panel):
+
+    code = e.get_code()
+    sw = e.get_target()
+
+    if code == lv.EVENT.VALUE_CHANGED:
+
+        if sw.has_state(lv.STATE.CHECKED):
+            panel.add_flag(lv.obj.FLAG.SCROLL_ONE)
+        else:
+            panel.clear_flag(lv.obj.FLAG.SCROLL_ONE)
+
+
+#
+# Show an example to scroll snap
+#
+
+panel = lv.obj(lv.scr_act())
+panel.set_size(280, 150)
+panel.set_scroll_snap_x(lv.SCROLL_SNAP.CENTER)
+panel.set_flex_flow(lv.FLEX_FLOW.ROW)
+panel.center()
+
+for i in range(10): 
+    btn = lv.btn(panel)
+    btn.set_size(150, 100)
+
+    label = lv.label(btn)
+    if i == 3:
+        label.set_text("Panel {:d}\nno snap".format(i))
+        btn.clear_flag(lv.obj.FLAG.SNAPABLE)
+    else:
+        label.set_text("Panel {:d}".format(i))
+    label.center()
+
+panel.update_snap(lv.ANIM.ON)
+
+
+# Switch between "One scroll" and "Normal scroll" mode
+sw = lv.switch(lv.scr_act());
+sw.align(lv.ALIGN.TOP_RIGHT, -20, 10)
+sw.add_event_cb(lambda evt:  sw_event_cb(evt,panel), lv.EVENT.ALL, None)
+label = lv.label(lv.scr_act())
+label.set_text("One scroll")
+label.align_to(sw, lv.ALIGN.OUT_BOTTOM_MID, 0, 5)
+
+
diff --git a/examples/scroll/lv_example_scroll_3.py b/examples/scroll/lv_example_scroll_3.py
new file mode 100644
index 000000000..676794263
--- /dev/null
+++ b/examples/scroll/lv_example_scroll_3.py
@@ -0,0 +1,38 @@
+class ScrollExample_3():
+    def __init__(self):
+        self.btn_cnt = 1
+        #
+        # Create a list a with a floating button
+        #
+
+        list = lv.list(lv.scr_act())
+        list.set_size(280, 220)
+        list.center()
+
+        for btn_cnt in range(2):
+            list.add_btn(lv.SYMBOL.AUDIO,"Track {:d}".format(btn_cnt))
+
+            float_btn = lv.btn(list)
+            float_btn.set_size(50, 50)
+            float_btn.add_flag(lv.obj.FLAG.FLOATING)
+            float_btn.align(lv.ALIGN.BOTTOM_RIGHT, 0, -list.get_style_pad_right(lv.PART.MAIN))
+            float_btn.add_event_cb(lambda evt: self.float_btn_event_cb(evt,list), lv.EVENT.ALL, None)
+            float_btn.set_style_radius(lv.RADIUS.CIRCLE, 0)
+            float_btn.set_style_bg_img_src(lv.SYMBOL.PLUS, 0)
+            float_btn.set_style_text_font(lv.theme_get_font_large(float_btn), 0)
+            
+    def float_btn_event_cb(self,e,list):
+        code = e.get_code()
+        float_btn = e.get_target()
+
+        if code == lv.EVENT.CLICKED:
+            list_btn = list.add_btn(lv.SYMBOL.AUDIO, "Track {:d}".format(self.btn_cnt))
+            self.btn_cnt += 1
+
+            float_btn.move_foreground()
+
+            list_btn.scroll_to_view(lv.ANIM.ON)
+            
+scroll_example_3 = ScrollExample_3()
+
+
diff --git a/examples/scroll/lv_example_scroll_4.py b/examples/scroll/lv_example_scroll_4.py
new file mode 100644
index 000000000..92a009c2f
--- /dev/null
+++ b/examples/scroll/lv_example_scroll_4.py
@@ -0,0 +1,62 @@
+#
+# Styling the scrollbars
+#
+obj = lv.obj(lv.scr_act())
+obj.set_size(200, 100)
+obj.center()
+
+label = lv.label(obj)
+label.set_text(
+"""
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Etiam dictum, tortor vestibulum lacinia laoreet, mi neque consectetur neque, vel mattis odio dolor egestas ligula.
+Sed vestibulum sapien nulla, id convallis ex porttitor nec.
+Duis et massa eu libero accumsan faucibus a in arcu.
+Ut pulvinar odio lorem, vel tempus turpis condimentum quis. Nam consectetur condimentum sem in auctor.
+Sed nisl augue, venenatis in blandit et, gravida ac tortor.
+Etiam dapibus elementum suscipit.
+Proin mollis sollicitudin convallis.
+Integer dapibus tempus arcu nec viverra.
+Donec molestie nulla enim, eu interdum velit placerat quis.
+Donec id efficitur risus, at molestie turpis.
+Suspendisse vestibulum consectetur nunc ut commodo.
+Fusce molestie rhoncus nisi sit amet tincidunt.
+Suspendisse a nunc ut magna ornare volutpat.
+""")
+
+
+# Remove the style of scrollbar to have clean start
+obj.remove_style(None, lv.PART.SCROLLBAR | lv.STATE.ANY)
+
+# Create a transition the animate the some properties on state change
+props = [lv.STYLE.BG_OPA, lv.STYLE.WIDTH, 0]
+trans = lv.style_transition_dsc_t()
+trans.init(props, lv.anim_t.path_linear, 200, 0, None)
+
+# Create a style for the scrollbars
+style = lv.style_t()
+style.init()
+style.set_width(4)               # Width of the scrollbar
+style.set_pad_right(5)           # Space from the parallel side
+style.set_pad_top(5)             # Space from the perpendicular side
+
+style.set_radius(2)
+style.set_bg_opa(lv.OPA._70)
+style.set_bg_color(lv.palette_main(lv.PALETTE.BLUE))
+style.set_border_color(lv.palette_darken(lv.PALETTE.BLUE, 3))
+style.set_border_width(2)
+style.set_shadow_width(8)
+style.set_shadow_spread(2)
+style.set_shadow_color(lv.palette_darken(lv.PALETTE.BLUE, 1))
+
+style.set_transition(trans)
+
+# Make the scrollbars wider and use 100% opacity when scrolled
+style_scrolled =  lv.style_t()
+style_scrolled.init()
+style_scrolled.set_width(8)
+style_scrolled.set_bg_opa(lv.OPA.COVER)
+
+obj.add_style(style, lv.PART.SCROLLBAR)
+obj.add_style(style_scrolled, lv.PART.SCROLLBAR | lv.STATE.SCROLLED)
+
diff --git a/examples/scroll/lv_example_scroll_5.py b/examples/scroll/lv_example_scroll_5.py
new file mode 100644
index 000000000..064d4816b
--- /dev/null
+++ b/examples/scroll/lv_example_scroll_5.py
@@ -0,0 +1,13 @@
+#
+# Scrolling with Right To Left base direction
+#
+obj = lv.obj(lv.scr_act())
+obj.set_style_base_dir(lv.BASE_DIR.RTL, 0)
+obj.set_size(200, 100)
+obj.center()
+
+label = lv.label(obj)
+label.set_text("میکروکُنترولر (به انگلیسی: Microcontroller) گونه‌ای ریزپردازنده است که دارای حافظهٔ دسترسی تصادفی (RAM) و حافظهٔ فقط‌خواندنی (ROM)، تایمر، پورت‌های ورودی و خروجی (I/O) و درگاه ترتیبی (Serial Port پورت سریال)، درون خود تراشه است، و می‌تواند به تنهایی ابزارهای دیگر را کنترل کند. به عبارت دیگر یک میکروکنترلر، مدار مجتمع کوچکی است که از یک CPU کوچک و اجزای دیگری مانند تایمر، درگاه‌های ورودی و خروجی آنالوگ و دیجیتال و حافظه تشکیل شده‌است.")
+label.set_width(400)
+label.set_style_text_font(lv.font_dejavu_16_persian_hebrew, 0)
+
diff --git a/examples/scroll/lv_example_scroll_6.py b/examples/scroll/lv_example_scroll_6.py
new file mode 100644
index 000000000..8440e353f
--- /dev/null
+++ b/examples/scroll/lv_example_scroll_6.py
@@ -0,0 +1,68 @@
+def scroll_event_cb(e):
+
+    cont = e.get_target()
+
+    cont_a = lv.area_t()
+    cont.get_coords(cont_a)
+    cont_y_center = cont_a.y1 + cont_a.get_height() // 2
+
+    r = cont.get_height() * 7 // 10
+    
+    child_cnt = cont.get_child_cnt()
+    for i in range(child_cnt):
+        child = cont.get_child(i)
+        child_a = lv.area_t()
+        child.get_coords(child_a)
+
+        child_y_center = child_a.y1 + child_a.get_height() // 2
+
+        diff_y = child_y_center - cont_y_center;
+        diff_y = abs(diff_y)
+
+        # Get the x of diff_y on a circle.
+        
+        # If diff_y is out of the circle use the last point of the circle (the radius)
+        if diff_y >= r:
+            x = r
+        else:
+            # Use Pythagoras theorem to get x from radius and y
+            x_sqr = r * r - diff_y * diff_y;
+            res = lv.sqrt_res_t()
+            lv.sqrt(x_sqr, res, 0x8000)   # Use lvgl's built in sqrt root function
+            x = r - res.i
+
+        # Translate the item by the calculated X coordinate
+        child.set_style_translate_x(x, 0)
+
+        # Use some opacity with larger translations
+        opa = lv.map(x, 0, r, lv.OPA.TRANSP, lv.OPA.COVER)
+        child.set_style_opa(lv.OPA.COVER - opa, 0)
+
+#
+# Translate the object as they scroll
+#
+
+cont = lv.obj(lv.scr_act())
+cont.set_size(200, 200)
+cont.center()
+cont.set_flex_flow(lv.FLEX_FLOW.COLUMN)
+cont.add_event_cb(scroll_event_cb, lv.EVENT.SCROLL, None)
+cont.set_style_radius(lv.RADIUS.CIRCLE, 0)
+cont.set_style_clip_corner(True, 0)
+cont.set_scroll_dir(lv.DIR.VER)
+cont.set_scroll_snap_y(lv.SCROLL_SNAP.CENTER)
+cont.set_scrollbar_mode(lv.SCROLLBAR_MODE.OFF)
+
+for i in range(20):
+    btn = lv.btn(cont)
+    btn.set_width(lv.pct(100))
+    
+    label = lv.label(btn)
+    label.set_text("Button " + str(i))
+
+    # Update the buttons position manually for first*
+    lv.event_send(cont, lv.EVENT.SCROLL, None)
+
+    # Be sure the fist button is in the middle
+    #lv.obj.scroll_to_view(cont.get_child(0), lv.ANIM.OFF)
+    cont.get_child(0).scroll_to_view(lv.ANIM.OFF)
diff --git a/examples/styles/lv_example_style_1.py b/examples/styles/lv_example_style_1.py
new file mode 100644
index 000000000..645e35ce8
--- /dev/null
+++ b/examples/styles/lv_example_style_1.py
@@ -0,0 +1,24 @@
+#
+# Using the Size, Position and Padding style properties
+#
+style = lv.style_t()
+style.init()
+style.set_radius(5)
+
+# Make a gradient
+style.set_width(150)
+style.set_height(lv.SIZE.CONTENT)
+
+style.set_pad_ver(20)
+style.set_pad_left(5)
+
+style.set_x(lv.pct(50))
+style.set_y(80)
+
+# Create an object with the new style
+obj = lv.obj(lv.scr_act())
+obj.add_style(style, 0)
+
+label = lv.label(obj)
+label.set_text("Hello");
+
diff --git a/examples/styles/lv_example_style_10.py b/examples/styles/lv_example_style_10.py
new file mode 100644
index 000000000..799560296
--- /dev/null
+++ b/examples/styles/lv_example_style_10.py
@@ -0,0 +1,36 @@
+#
+# Creating a transition
+#
+
+props = [lv.STYLE.BG_COLOR, lv.STYLE.BORDER_COLOR, lv.STYLE.BORDER_WIDTH, 0]
+
+# A default transition
+# Make it fast (100ms) and start with some delay (200 ms)
+
+trans_def =  lv.style_transition_dsc_t()
+trans_def.init(props, lv.anim_t.path_linear, 100, 200, None)
+
+# A special transition when going to pressed state
+# Make it slow (500 ms) but start  without delay
+
+trans_pr = lv.style_transition_dsc_t()
+trans_pr.init(props, lv.anim_t.path_linear, 500, 0, None)
+
+style_def = lv.style_t()
+style_def.init()
+style_def.set_transition(trans_def)
+
+style_pr = lv.style_t()
+style_pr.init()
+style_pr.set_bg_color(lv.palette_main(lv.PALETTE.RED))
+style_pr.set_border_width(6)
+style_pr.set_border_color(lv.palette_darken(lv.PALETTE.RED, 3))
+style_pr.set_transition(trans_pr)
+
+# Create an object with the new style_pr
+obj = lv.obj(lv.scr_act())
+obj.add_style(style_def, 0)
+obj.add_style(style_pr, lv.STATE.PRESSED)
+
+obj.center()
+
diff --git a/examples/styles/lv_example_style_11.py b/examples/styles/lv_example_style_11.py
new file mode 100644
index 000000000..941e73991
--- /dev/null
+++ b/examples/styles/lv_example_style_11.py
@@ -0,0 +1,44 @@
+#
+# Using multiple styles
+#
+# A base style
+
+style_base =  lv.style_t()
+style_base.init()
+style_base.set_bg_color(lv.palette_main(lv.PALETTE.LIGHT_BLUE))
+style_base.set_border_color(lv.palette_darken(lv.PALETTE.LIGHT_BLUE, 3))
+style_base.set_border_width(2)
+style_base.set_radius(10)
+style_base.set_shadow_width(10)
+style_base.set_shadow_ofs_y(5)
+style_base.set_shadow_opa(lv.OPA._50)
+style_base.set_text_color(lv.color_white())
+style_base.set_width(100)
+style_base.set_height(lv.SIZE.CONTENT)
+
+# Set only the properties that should be different
+style_warning = lv.style_t()
+style_warning.init()
+style_warning.set_bg_color(lv.palette_main(lv.PALETTE.YELLOW))
+style_warning.set_border_color(lv.palette_darken(lv.PALETTE.YELLOW, 3))
+style_warning.set_text_color(lv.palette_darken(lv.PALETTE.YELLOW, 4))
+
+# Create an object with the base style only
+obj_base = lv.obj(lv.scr_act())
+obj_base.add_style(style_base, 0)
+obj_base.align(lv.ALIGN.LEFT_MID, 20, 0)
+
+label = lv.label(obj_base)
+label.set_text("Base")
+label.center()
+
+# Create an other object with the base style and earnings style too
+obj_warning = lv.obj(lv.scr_act())
+obj_warning.add_style(style_base, 0)
+obj_warning.add_style(style_warning, 0)
+obj_warning.align(lv.ALIGN.RIGHT_MID, -20, 0)
+
+label = lv.label(obj_warning)
+label.set_text("Warning")
+label.center()
+
diff --git a/examples/styles/lv_example_style_12.py b/examples/styles/lv_example_style_12.py
new file mode 100644
index 000000000..ebfe131e2
--- /dev/null
+++ b/examples/styles/lv_example_style_12.py
@@ -0,0 +1,18 @@
+#
+# Local styles
+#
+
+style = lv.style_t()
+style.init()
+style.set_bg_color(lv.palette_main(lv.PALETTE.GREEN))
+style.set_border_color(lv.palette_lighten(lv.PALETTE.GREEN, 3))
+style.set_border_width(3)
+
+obj = lv.obj(lv.scr_act())
+obj.add_style(style, 0)
+
+# Overwrite the background color locally
+obj.set_style_bg_color(lv.palette_main(lv.PALETTE.ORANGE), lv.PART.MAIN)
+
+obj.center()
+
diff --git a/examples/styles/lv_example_style_13.py b/examples/styles/lv_example_style_13.py
new file mode 100644
index 000000000..0ccb2ecb4
--- /dev/null
+++ b/examples/styles/lv_example_style_13.py
@@ -0,0 +1,23 @@
+#
+# Add styles to parts and states
+#
+
+style_indic = lv.style_t()
+style_indic.init()
+style_indic.set_bg_color(lv.palette_lighten(lv.PALETTE.RED, 3))
+style_indic.set_bg_grad_color(lv.palette_main(lv.PALETTE.RED))
+style_indic.set_bg_grad_dir(lv.GRAD_DIR.HOR)
+
+style_indic_pr = lv.style_t()
+style_indic_pr.init()
+style_indic_pr.set_shadow_color(lv.palette_main(lv.PALETTE.RED))
+style_indic_pr.set_shadow_width(10)
+style_indic_pr.set_shadow_spread(3)
+
+# Create an object with the new style_pr
+obj = lv.slider(lv.scr_act())
+obj.add_style(style_indic, lv.PART.INDICATOR)
+obj.add_style(style_indic_pr, lv.PART.INDICATOR | lv.STATE.PRESSED)
+obj.set_value(70, lv.ANIM.OFF)
+obj.center()
+
diff --git a/examples/styles/lv_example_style_14.py b/examples/styles/lv_example_style_14.py
new file mode 100644
index 000000000..5753a6ece
--- /dev/null
+++ b/examples/styles/lv_example_style_14.py
@@ -0,0 +1,53 @@
+# Will be called when the styles of the base theme are already added
+# to add new styles
+
+
+class NewTheme(lv.theme_t):
+    def __init__(self):
+        super().__init__()
+        # Initialize the styles
+        self.style_btn = lv.style_t()
+        self.style_btn.init()
+        self.style_btn.set_bg_color(lv.palette_main(lv.PALETTE.GREEN))
+        self.style_btn.set_border_color(lv.palette_darken(lv.PALETTE.GREEN, 3))
+        self.style_btn.set_border_width(3)
+
+        # This theme is based on active theme 
+        th_act = lv.theme_get_from_obj(lv.scr_act())
+        # This theme will be applied only after base theme is applied
+        self.set_parent(th_act)        
+        
+class ExampleStyle_14():
+    
+    def __init__(self):
+        # 
+        # Extending the current theme
+        #
+
+        btn = lv.btn(lv.scr_act())
+        btn.align(lv.ALIGN.TOP_MID, 0, 20)
+
+        label = lv.label(btn)
+        label.set_text("Original theme")
+        
+        self.new_theme_init_and_set()
+        
+        btn = lv.btn(lv.scr_act())
+        btn.align(lv.ALIGN.BOTTOM_MID, 0, -20)
+        
+        label = lv.label(btn)
+        label.set_text("New theme")
+        
+    def new_theme_apply_cb(self,th, obj):
+        print(th,obj)
+        if obj.get_class() == lv.btn_class:
+            obj.add_style(self.th_new.style_btn, 0)
+        
+    def new_theme_init_and_set(self):
+        print("new_theme_init_and_set")
+        # Initialize the new theme from the current theme        
+        self.th_new = NewTheme()
+        self.th_new.set_apply_cb(self.new_theme_apply_cb)
+        lv.disp_get_default().set_theme(self.th_new)
+        
+exampleStyle_14 = ExampleStyle_14()
diff --git a/examples/styles/lv_example_style_2.py b/examples/styles/lv_example_style_2.py
new file mode 100644
index 000000000..84f668c11
--- /dev/null
+++ b/examples/styles/lv_example_style_2.py
@@ -0,0 +1,22 @@
+#
+# Using the background style properties
+#
+style = lv.style_t()
+style.init()
+style.set_radius(5)
+
+# Make a gradient
+style.set_bg_opa(lv.OPA.COVER)
+style.set_bg_color(lv.palette_lighten(lv.PALETTE.GREY, 1))
+style.set_bg_grad_color(lv.palette_main(lv.PALETTE.BLUE))
+style.set_bg_grad_dir(lv.GRAD_DIR.VER)
+
+# Shift the gradient to the bottom
+style.set_bg_main_stop(128)
+style.set_bg_grad_stop(192)
+
+# Create an object with the new style
+obj = lv.obj(lv.scr_act())
+obj.add_style(style, 0)
+obj.center()
+
diff --git a/examples/styles/lv_example_style_3.py b/examples/styles/lv_example_style_3.py
new file mode 100644
index 000000000..186b5c9fe
--- /dev/null
+++ b/examples/styles/lv_example_style_3.py
@@ -0,0 +1,22 @@
+#
+# Using the border style properties
+#
+style = lv.style_t()
+style.init()
+
+# Set a background color and a radius
+style.set_radius(10)
+style.set_bg_opa(lv.OPA.COVER)
+style.set_bg_color(lv.palette_lighten(lv.PALETTE.GREY, 1))
+
+# Add border to the bottom+right
+style.set_border_color(lv.palette_main(lv.PALETTE.BLUE))
+style.set_border_width(5)
+style.set_border_opa(lv.OPA._50)
+style.set_border_side(lv.BORDER_SIDE.BOTTOM | lv.BORDER_SIDE.RIGHT)
+
+# Create an object with the new style
+obj = lv.obj(lv.scr_act())
+obj.add_style(style, 0)
+obj.center()
+
diff --git a/examples/styles/lv_example_style_4.py b/examples/styles/lv_example_style_4.py
new file mode 100644
index 000000000..63ee9628a
--- /dev/null
+++ b/examples/styles/lv_example_style_4.py
@@ -0,0 +1,23 @@
+#
+# Using the outline style properties
+#
+
+style = lv.style_t()
+style.init()
+
+# Set a background color and a radius
+style.set_radius(5)
+style.set_bg_opa(lv.OPA.COVER)
+style.set_bg_color(lv.palette_lighten(lv.PALETTE.GREY, 1))
+
+# Add outline
+style.set_outline_width(2)
+style.set_outline_color(lv.palette_main(lv.PALETTE.BLUE))
+style.set_outline_pad(8)
+
+# Create an object with the new style
+obj = lv.obj(lv.scr_act())
+obj.add_style(style, 0)
+obj.center()
+
+
diff --git a/examples/styles/lv_example_style_5.py b/examples/styles/lv_example_style_5.py
new file mode 100644
index 000000000..1414f8f4c
--- /dev/null
+++ b/examples/styles/lv_example_style_5.py
@@ -0,0 +1,23 @@
+#
+# Using the Shadow style properties
+#
+
+style = lv.style_t()
+style.init()
+
+# Set a background color and a radius
+style.set_radius(5)
+style.set_bg_opa(lv.OPA.COVER)
+style.set_bg_color(lv.palette_lighten(lv.PALETTE.GREY, 1))
+
+# Add a shadow
+style.set_shadow_width(8)
+style.set_shadow_color(lv.palette_main(lv.PALETTE.BLUE))
+style.set_shadow_ofs_x(10)
+style.set_shadow_ofs_y(20)
+
+# Create an object with the new style
+obj = lv.obj(lv.scr_act())
+obj.add_style(style, 0)
+obj.center()
+
diff --git a/examples/styles/lv_example_style_6.py b/examples/styles/lv_example_style_6.py
new file mode 100644
index 000000000..944b6029f
--- /dev/null
+++ b/examples/styles/lv_example_style_6.py
@@ -0,0 +1,44 @@
+from imagetools import get_png_info, open_png
+# Register PNG image decoder
+decoder = lv.img.decoder_create()
+decoder.info_cb = get_png_info
+decoder.open_cb = open_png
+
+# Create an image from the png file
+try:
+    with open('../assets/img_cogwheel_argb.png','rb') as f:
+        png_data = f.read()
+except:
+    print("Could not find img_cogwheel_argb.png")
+    sys.exit()
+    
+img_cogwheel_argb = lv.img_dsc_t({
+  'data_size': len(png_data),
+  'data': png_data 
+})
+
+#
+# Using the Image style properties
+#
+style = lv.style_t()
+style.init()
+
+# Set a background color and a radius
+style.set_radius(5)
+style.set_bg_opa(lv.OPA.COVER)
+style.set_bg_color(lv.palette_lighten(lv.PALETTE.GREY, 3))
+style.set_border_width(2)
+style.set_border_color(lv.palette_main(lv.PALETTE.BLUE))
+
+style.set_img_recolor(lv.palette_main(lv.PALETTE.BLUE))
+style.set_img_recolor_opa(lv.OPA._50)
+# style.set_transform_angle(300)
+
+# Create an object with the new style
+obj = lv.img(lv.scr_act())
+obj.add_style(style, 0)
+
+obj.set_src(img_cogwheel_argb)
+
+obj.center()
+
diff --git a/examples/styles/lv_example_style_7.py b/examples/styles/lv_example_style_7.py
new file mode 100644
index 000000000..ea6c267eb
--- /dev/null
+++ b/examples/styles/lv_example_style_7.py
@@ -0,0 +1,15 @@
+#
+# Using the Arc style properties
+#
+style = lv.style_t()
+style.init()
+
+style.set_arc_color(lv.palette_main(lv.PALETTE.RED))
+style.set_arc_width(4)
+
+# Create an object with the new style
+obj = lv.arc(lv.scr_act())
+obj.add_style(style, 0)
+obj.center()
+
+
diff --git a/examples/styles/lv_example_style_8.py b/examples/styles/lv_example_style_8.py
new file mode 100644
index 000000000..e9dc8f966
--- /dev/null
+++ b/examples/styles/lv_example_style_8.py
@@ -0,0 +1,27 @@
+#
+# Using the text style properties
+#
+
+style = lv.style_t()
+style.init()
+
+style.set_radius(5)
+style.set_bg_opa(lv.OPA.COVER)
+style.set_bg_color(lv.palette_lighten(lv.PALETTE.GREY, 3))
+style.set_border_width(2)
+style.set_border_color(lv.palette_main(lv.PALETTE.BLUE))
+style.set_pad_all(10)
+
+style.set_text_color(lv.palette_main(lv.PALETTE.BLUE))
+style.set_text_letter_space(5)
+style.set_text_line_space(20)
+style.set_text_decor(lv.TEXT_DECOR.UNDERLINE)
+
+# Create an object with the new style
+obj = lv.label(lv.scr_act())
+obj.add_style(style, 0)
+obj.set_text("Text of\n"
+             "a label");
+
+obj.center()
+
diff --git a/examples/styles/lv_example_style_9.py b/examples/styles/lv_example_style_9.py
new file mode 100644
index 000000000..e8413b633
--- /dev/null
+++ b/examples/styles/lv_example_style_9.py
@@ -0,0 +1,22 @@
+#
+# Using the line style properties
+#
+
+style = lv.style_t()
+style.init()
+
+style.set_line_color(lv.palette_main(lv.PALETTE.GREY))
+style.set_line_width(6)
+style.set_line_rounded(True)
+
+# Create an object with the new style
+obj = lv.line(lv.scr_act())
+obj.add_style(style, 0)
+p =  [ {"x":10, "y":30}, 
+       {"x":30, "y":50}, 
+       {"x":100, "y":0}]
+
+obj.set_points(p, 3)
+
+obj.center()
+
diff --git a/examples/test_ex.sh b/examples/test_ex.sh
new file mode 100755
index 000000000..9bfb0d022
--- /dev/null
+++ b/examples/test_ex.sh
@@ -0,0 +1,4 @@
+#!/bin/sh
+cat ../../header.py $1 > test.py
+chmod +x test.py
+./test.py
diff --git a/examples/widgets/animimg/lv_example_animimg_1.py b/examples/widgets/animimg/lv_example_animimg_1.py
new file mode 100644
index 000000000..93938e7c7
--- /dev/null
+++ b/examples/widgets/animimg/lv_example_animimg_1.py
@@ -0,0 +1,54 @@
+from imagetools import get_png_info, open_png
+
+# Register PNG image decoder
+decoder = lv.img.decoder_create()
+decoder.info_cb = get_png_info
+decoder.open_cb = open_png
+
+anim_imgs = [None]*3
+# Create an image from the png file
+try:
+    with open('../../assets/animimg001.png','rb') as f:
+        anim001_data = f.read()
+except:
+    print("Could not find animimg001.png")
+    sys.exit()
+    
+anim_imgs[0] = lv.img_dsc_t({
+  'data_size': len(anim001_data),
+  'data': anim001_data 
+})
+
+try:
+    with open('../../assets/animimg002.png','rb') as f:
+        anim002_data = f.read()
+except:
+    print("Could not find animimg002.png")
+    sys.exit()
+    
+anim_imgs[1] = lv.img_dsc_t({
+  'data_size': len(anim002_data),
+  'data': anim002_data 
+})
+
+try:
+    with open('../../assets/animimg003.png','rb') as f:
+        anim003_data = f.read()
+except:
+    print("Could not find animimg003.png")
+    sys.exit()
+    
+anim_imgs[2] = lv.img_dsc_t({
+  'data_size': len(anim003_data),
+  'data': anim003_data 
+})
+
+animimg0 = lv.animimg(lv.scr_act())
+animimg0.center()
+animimg0.set_src(anim_imgs, 3)
+animimg0.set_duration(1000)
+animimg0.set_repeat_count(lv.ANIM_REPEAT.INFINITE)
+animimg0.start()
+
+
+
diff --git a/examples/widgets/arc/lv_example_arc_1.py b/examples/widgets/arc/lv_example_arc_1.py
index 2fc6dae39..5220b5481 100644
--- a/examples/widgets/arc/lv_example_arc_1.py
+++ b/examples/widgets/arc/lv_example_arc_1.py
@@ -1,12 +1,8 @@
-# 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_end_angle(200)
 arc.set_size(150, 150)
-arc.align(None, lv.ALIGN.CENTER, 0, 0)
\ No newline at end of file
+arc.center()
+
+
+
diff --git a/examples/widgets/arc/lv_example_arc_2.py b/examples/widgets/arc/lv_example_arc_2.py
index a03f4ec61..a55058728 100644
--- a/examples/widgets/arc/lv_example_arc_2.py
+++ b/examples/widgets/arc/lv_example_arc_2.py
@@ -1,43 +1,37 @@
+#
+# An `lv_timer` to call periodically to set the angles of the arc
+#
+class ArcLoader():
+    def __init__(self):
+        self.a = 270
+        
+    def arc_loader_cb(self,tim,arc):
+        # print(tim,arc)
+        self.a += 5
+
+        arc.set_end_angle(self.a)
+
+        if self.a >= 270 + 360:
+            tim._del()
+
+
+#
 # Create an arc which acts as a loader.
-class loader_arc(lv.arc):
+#
+
+# Create an Arc
+arc = lv.arc(lv.scr_act())
+arc.set_bg_angles(0, 360)
+arc.set_angles(270, 270)
+arc.center()
+
+# create the loader
+arc_loader = ArcLoader()
+
+# Create an `lv_timer` to update the arc.
+
+timer = lv.timer_create_basic()
+timer.set_period(20)
+timer.set_cb(lambda src: arc_loader.arc_loader_cb(timer,arc))
+  
 
-    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)
\ No newline at end of file
diff --git a/examples/widgets/bar/lv_example_bar_1.py b/examples/widgets/bar/lv_example_bar_1.py
index 2f663c7e2..874e3d75d 100644
--- a/examples/widgets/bar/lv_example_bar_1.py
+++ b/examples/widgets/bar/lv_example_bar_1.py
@@ -1,5 +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)
+bar1.set_size(200, 20)
+bar1.center()
+bar1.set_value(70, lv.ANIM.OFF)
+
diff --git a/examples/widgets/bar/lv_example_bar_2.py b/examples/widgets/bar/lv_example_bar_2.py
new file mode 100644
index 000000000..37dbc0d6c
--- /dev/null
+++ b/examples/widgets/bar/lv_example_bar_2.py
@@ -0,0 +1,27 @@
+#
+# Example of styling the bar
+#
+style_bg = lv.style_t()
+style_indic = lv.style_t()
+
+style_bg.init()
+style_bg.set_border_color(lv.palette_main(lv.PALETTE.BLUE))
+style_bg.set_border_width(2)
+style_bg.set_pad_all(6)            # To make the indicator smaller
+style_bg.set_radius(6)
+style_bg.set_anim_time(1000)
+
+style_indic.init()
+style_indic.set_bg_opa(lv.OPA.COVER)
+style_indic.set_bg_color(lv.palette_main(lv.PALETTE.BLUE))
+style_indic.set_radius(3)
+
+bar = lv.bar(lv.scr_act())
+bar.remove_style_all()   # To have a clean start
+bar.add_style(style_bg, 0)
+bar.add_style(style_indic, lv.PART.INDICATOR)
+
+bar.set_size(200, 20)
+bar.center()
+bar.set_value(100, lv.ANIM.ON)
+
diff --git a/examples/widgets/bar/lv_example_bar_3.py b/examples/widgets/bar/lv_example_bar_3.py
new file mode 100644
index 000000000..c5f52f39f
--- /dev/null
+++ b/examples/widgets/bar/lv_example_bar_3.py
@@ -0,0 +1,32 @@
+def set_temp(bar, temp):
+    bar.set_value(temp, lv.ANIM.ON)
+
+#
+# A temperature meter example
+#
+
+
+style_indic = lv.style_t()
+
+style_indic.init()
+style_indic.set_bg_opa(lv.OPA.COVER)
+style_indic.set_bg_color(lv.palette_main(lv.PALETTE.RED))
+style_indic.set_bg_grad_color(lv.palette_main(lv.PALETTE.BLUE))
+style_indic.set_bg_grad_dir(lv.GRAD_DIR.VER)
+
+bar = lv.bar(lv.scr_act())
+bar.add_style(style_indic, lv.PART.INDICATOR)
+bar.set_size(20, 200)
+bar.center()
+bar.set_range(-20, 40)
+
+a = lv.anim_t()
+a.init()
+a.set_time(3000)
+a.set_playback_time(3000)
+a.set_var(bar)
+a.set_values(-20, 40)
+a.set_repeat_count(lv.ANIM_REPEAT.INFINITE)
+a.set_custom_exec_cb(lambda a, val: set_temp(bar,val))
+lv.anim_t.start(a)
+
diff --git a/examples/widgets/bar/lv_example_bar_4.py b/examples/widgets/bar/lv_example_bar_4.py
new file mode 100644
index 000000000..3d2db4809
--- /dev/null
+++ b/examples/widgets/bar/lv_example_bar_4.py
@@ -0,0 +1,45 @@
+#
+# get an icon
+#
+def get_icon(filename,xres,yres):
+    try:
+        sdl_filename = "../../assets/" + filename + "_" + str(xres) + "x" + str(yres) + "_argb8888.bin"
+        print("file name: ", sdl_filename)
+        with open(sdl_filename,'rb') as f:
+            icon_data = f.read()
+    except:
+        print("Could not find image file: " + filename) 
+        return None
+    
+    icon_dsc = lv.img_dsc_t(
+        {
+            "header": {"always_zero": 0, "w": xres, "h": yres, "cf": lv.img.CF.TRUE_COLOR_ALPHA},
+            "data": icon_data,
+            "data_size": len(icon_data),
+        }
+    )
+    return icon_dsc
+
+#
+# Bar with stripe pattern and ranged value
+#
+
+img_skew_strip_dsc = get_icon("img_skew_strip",80,20)
+style_indic =  lv.style_t()
+
+style_indic.init()
+style_indic.set_bg_img_src(img_skew_strip_dsc)
+style_indic.set_bg_img_tiled(True);
+style_indic.set_bg_img_opa(lv.OPA._30)
+
+bar = lv.bar(lv.scr_act())
+bar.add_style(style_indic, lv.PART.INDICATOR)
+
+bar.set_size(260, 20)
+bar.center()
+bar.set_mode(lv.bar.MODE.RANGE)
+bar.set_value(90, lv.ANIM.OFF)
+bar.set_start_value(20, lv.ANIM.OFF)
+
+
+    
diff --git a/examples/widgets/bar/lv_example_bar_5.py b/examples/widgets/bar/lv_example_bar_5.py
new file mode 100644
index 000000000..7c81ec8be
--- /dev/null
+++ b/examples/widgets/bar/lv_example_bar_5.py
@@ -0,0 +1,22 @@
+#
+# Bar with LTR and RTL base direction
+#
+
+bar_ltr = lv.bar(lv.scr_act())
+bar_ltr.set_size(200, 20)
+bar_ltr.set_value(70, lv.ANIM.OFF)
+bar_ltr.align(lv.ALIGN.CENTER, 0, -30)
+
+label = lv.label(lv.scr_act())
+label.set_text("Left to Right base direction")
+label.align_to(bar_ltr, lv.ALIGN.OUT_TOP_MID, 0, -5)
+
+bar_rtl = lv.bar(lv.scr_act())
+bar_rtl.set_style_base_dir(lv.BASE_DIR.RTL,0)
+bar_rtl.set_size(200, 20)
+bar_rtl.set_value(70, lv.ANIM.OFF)
+bar_rtl.align(lv.ALIGN.CENTER, 0, 30)
+
+label = lv.label(lv.scr_act())
+label.set_text("Right to Left base direction")
+label.align_to(bar_rtl, lv.ALIGN.OUT_TOP_MID, 0, -5)
diff --git a/examples/widgets/bar/lv_example_bar_6.py b/examples/widgets/bar/lv_example_bar_6.py
new file mode 100644
index 000000000..fef9e8d36
--- /dev/null
+++ b/examples/widgets/bar/lv_example_bar_6.py
@@ -0,0 +1,54 @@
+def set_value(bar, v):
+    bar.set_value(v, lv.ANIM.OFF)
+
+def event_cb(e):
+    dsc = lv.obj_draw_part_dsc_t.cast(e.get_param())
+    if dsc.part != lv.PART.INDICATOR:
+        return
+
+    obj= lv.bar.__cast__(e.get_target())
+
+    label_dsc = lv.draw_label_dsc_t()
+    label_dsc.init()
+    # label_dsc.font = LV_FONT_DEFAULT;
+
+    value_txt = str(obj.get_value())
+    txt_size = lv.point_t()
+    lv.txt_get_size(txt_size, value_txt, label_dsc.font, label_dsc.letter_space, label_dsc.line_space, lv.COORD.MAX, label_dsc.flag)
+
+    txt_area = lv.area_t()
+    # If the indicator is long enough put the text inside on the right
+    if dsc.draw_area.get_width() > txt_size.x + 20:
+        txt_area.x2 = dsc.draw_area.x2 - 5
+        txt_area.x1 = txt_area.x2 - txt_size.x + 1
+        label_dsc.color = lv.color_white()
+    # If the indicator is still short put the text out of it on the right*/
+    else:
+        txt_area.x1 = dsc.draw_area.x2 + 5
+        txt_area.x2 = txt_area.x1 + txt_size.x - 1
+        label_dsc.color = lv.color_black()
+
+    txt_area.y1 = dsc.draw_area.y1 + (dsc.draw_area.get_height() - txt_size.y) // 2
+    txt_area.y2 = txt_area.y1 + txt_size.y - 1
+
+    lv.draw_label(txt_area, dsc.clip_area, label_dsc, value_txt, None)
+
+#
+# Custom drawer on the bar to display the current value
+#
+
+bar = lv.bar(lv.scr_act())
+bar.add_event_cb(event_cb, lv.EVENT.DRAW_PART_END, None)
+bar.set_size(200, 20)
+bar.center()
+
+a = lv.anim_t()
+a.init()
+a.set_var(bar)
+a.set_values(0, 100)
+a.set_custom_exec_cb(lambda a,val: set_value(bar,val))
+a.set_time(2000)
+a.set_playback_time(2000)
+a.set_repeat_count(lv.ANIM_REPEAT.INFINITE)
+lv.anim_t.start(a)
+
diff --git a/examples/widgets/bar/test.py b/examples/widgets/bar/test.py
new file mode 100644
index 000000000..143afe1d2
--- /dev/null
+++ b/examples/widgets/bar/test.py
@@ -0,0 +1,57 @@
+#!/opt/bin/lv_micropython -i
+import lvgl as lv
+import display_driver
+def set_value(bar, v):
+    bar.set_value(v, lv.ANIM.OFF)
+
+def event_cb(e):
+    dsc = lv.obj_draw_part_dsc_t.cast(e.get_param())
+    if dsc.part != lv.PART.INDICATOR:
+        return
+
+    obj= lv.bar.__cast__(e.get_target())
+
+    label_dsc = lv.draw_label_dsc_t()
+    label_dsc.init()
+    # label_dsc.font = LV_FONT_DEFAULT;
+
+    value_txt = str(obj.get_value())
+    txt_size = lv.point_t()
+    lv.txt_get_size(txt_size, value_txt, label_dsc.font, label_dsc.letter_space, label_dsc.line_space, lv.COORD.MAX, label_dsc.flag)
+
+    txt_area = lv.area_t()
+    # If the indicator is long enough put the text inside on the right
+    if dsc.draw_area.get_width() > txt_size.x + 20:
+        txt_area.x2 = dsc.draw_area.x2 - 5
+        txt_area.x1 = txt_area.x2 - txt_size.x + 1
+        label_dsc.color = lv.color_white()
+    # If the indicator is still short put the text out of it on the right*/
+    else:
+        txt_area.x1 = dsc.draw_area.x2 + 5
+        txt_area.x2 = txt_area.x1 + txt_size.x - 1
+        label_dsc.color = lv.color_black()
+
+    txt_area.y1 = dsc.draw_area.y1 + (dsc.draw_area.get_height() - txt_size.y) // 2
+    txt_area.y2 = txt_area.y1 + txt_size.y - 1
+
+    lv.draw_label(txt_area, dsc.clip_area, label_dsc, value_txt, None)
+
+#
+# Custom drawer on the bar to display the current value
+#
+
+bar = lv.bar(lv.scr_act())
+bar.add_event_cb(event_cb, lv.EVENT.DRAW_PART_END, None)
+bar.set_size(200, 20)
+bar.center()
+
+a = lv.anim_t()
+a.init()
+a.set_var(bar)
+a.set_values(0, 100)
+a.set_custom_exec_cb(lambda a,val: set_value(bar,val))
+a.set_time(2000)
+a.set_playback_time(2000)
+a.set_repeat_count(lv.ANIM_REPEAT.INFINITE)
+lv.anim_t.start(a)
+
diff --git a/examples/widgets/btn/lv_example_btn_1.py b/examples/widgets/btn/lv_example_btn_1.py
index 007821e65..ebf684488 100644
--- a/examples/widgets/btn/lv_example_btn_1.py
+++ b/examples/widgets/btn/lv_example_btn_1.py
@@ -1,21 +1,32 @@
-def event_handler(obj, event):
-    if event == lv.EVENT.CLICKED:
-        print("Clicked")
+def event_handler(evt):
+    code = evt.get_code()
 
+    if code == lv.EVENT.CLICKED:
+            print("Clicked event seen")
+    elif code == lv.EVENT.VALUE_CHANGED:
+        print("Value changed seen")
+        
+# create a simple button
 btn1 = lv.btn(lv.scr_act())
-btn1.set_event_cb(event_handler)
-btn1.align(None, lv.ALIGN.CENTER, 0, -40)
 
-label = lv.label(btn1)
+# attach the callback
+btn1.add_event_cb(event_handler,lv.EVENT.ALL, None)
+
+btn1.align(lv.ALIGN.CENTER,0,-40)
+label=lv.label(btn1)
 label.set_text("Button")
 
+# create a toggle button
 btn2 = lv.btn(lv.scr_act())
-# 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")
+# attach the callback
+#btn2.add_event_cb(event_handler,lv.EVENT.VALUE_CHANGED,None)
+btn2.add_event_cb(event_handler,lv.EVENT.ALL, None)
+
+btn2.align(lv.ALIGN.CENTER,0,40)
+btn2.add_flag(lv.obj.FLAG.CHECKABLE)
+btn2.set_height(lv.SIZE.CONTENT)
+
+label=lv.label(btn2)
+label.set_text("Toggle")
+label.center()
diff --git a/examples/widgets/btn/lv_example_btn_2.py b/examples/widgets/btn/lv_example_btn_2.py
new file mode 100644
index 000000000..a4f859bd1
--- /dev/null
+++ b/examples/widgets/btn/lv_example_btn_2.py
@@ -0,0 +1,60 @@
+#
+# Style a button from scratch
+#
+
+# Init the style for the default state
+style = lv.style_t()
+style.init()
+
+style.set_radius(3)
+
+style.set_bg_opa(lv.OPA.COVER)
+style.set_bg_color(lv.palette_main(lv.PALETTE.BLUE))
+style.set_bg_grad_color(lv.palette_darken(lv.PALETTE.BLUE, 2))
+style.set_bg_grad_dir(lv.GRAD_DIR.VER)
+
+style.set_border_opa(lv.OPA._40)
+style.set_border_width(2)
+style.set_border_color(lv.palette_main(lv.PALETTE.GREY))
+
+style.set_shadow_width(8)
+style.set_shadow_color(lv.palette_main(lv.PALETTE.GREY))
+style.set_shadow_ofs_y(8)
+
+style.set_outline_opa(lv.OPA.COVER)
+style.set_outline_color(lv.palette_main(lv.PALETTE.BLUE))
+
+style.set_text_color(lv.color_white())
+style.set_pad_all(10)
+
+# Init the pressed style
+style_pr = lv.style_t()
+style_pr.init()
+
+# Add a large outline when pressed
+style_pr.set_outline_width(30)
+style_pr.set_outline_opa(lv.OPA.TRANSP)
+
+style_pr.set_translate_y(5)
+style_pr.set_shadow_ofs_y(3)
+style_pr.set_bg_color(lv.palette_darken(lv.PALETTE.BLUE, 2))
+style_pr.set_bg_grad_color(lv.palette_darken(lv.PALETTE.BLUE, 4))
+
+# Add a transition to the the outline
+trans = lv.style_transition_dsc_t()
+props = [lv.STYLE.OUTLINE_WIDTH, lv.STYLE.OUTLINE_OPA, 0]
+trans.init(props, lv.anim_t.path_linear, 300, 0, None)
+
+style_pr.set_transition(trans)
+
+btn1 = lv.btn(lv.scr_act())
+btn1.remove_style_all()                          # Remove the style coming from the theme
+btn1.add_style(style, 0)
+btn1.add_style(style_pr, lv.STATE.PRESSED)
+btn1.set_size(lv.SIZE.CONTENT, lv.SIZE.CONTENT)
+btn1.center()
+
+label = lv.label(btn1)
+label.set_text("Button")
+label.center()
+
diff --git a/examples/widgets/btn/lv_example_btn_3.py b/examples/widgets/btn/lv_example_btn_3.py
new file mode 100644
index 000000000..7eea28110
--- /dev/null
+++ b/examples/widgets/btn/lv_example_btn_3.py
@@ -0,0 +1,38 @@
+#
+# Create a style transition on a button to act like a gum when clicked
+#
+
+# Properties to transition
+props = [lv.STYLE.TRANSFORM_WIDTH, lv.STYLE.TRANSFORM_HEIGHT, lv.STYLE.TEXT_LETTER_SPACE, 0]
+
+# Transition descriptor when going back to the default state.
+# Add some delay to be sure the press transition is visible even if the press was very short*/
+transition_dsc_def = lv.style_transition_dsc_t()
+transition_dsc_def.init(props, lv.anim_t.path_overshoot, 250, 100, None)
+
+# Transition descriptor when going to pressed state.
+# No delay, go to pressed state immediately
+transition_dsc_pr = lv.style_transition_dsc_t()
+transition_dsc_pr.init(props, lv.anim_t.path_ease_in_out, 250, 0, None)
+
+# Add only the new transition to the default state
+style_def = lv.style_t()
+style_def.init()
+style_def.set_transition(transition_dsc_def)
+
+# Add the transition and some transformation to the presses state.
+style_pr = lv.style_t()
+style_pr.init()
+style_pr.set_transform_width(10)
+style_pr.set_transform_height(-10)
+style_pr.set_text_letter_space(10)
+style_pr.set_transition(transition_dsc_pr)
+
+btn1 = lv.btn(lv.scr_act())
+btn1.align(lv.ALIGN.CENTER, 0, -80)
+btn1.add_style(style_pr, lv.STATE.PRESSED)
+btn1.add_style(style_def, 0)
+
+label = lv.label(btn1)
+label.set_text("Gum");
+
diff --git a/examples/widgets/btnmatrix/lv_example_btnmatrix_1.py b/examples/widgets/btnmatrix/lv_example_btnmatrix_1.py
index 2cf684966..9adbddffc 100644
--- a/examples/widgets/btnmatrix/lv_example_btnmatrix_1.py
+++ b/examples/widgets/btnmatrix/lv_example_btnmatrix_1.py
@@ -1,14 +1,24 @@
-def event_handler(obj, event):
-    if event == lv.EVENT.VALUE_CHANGED:
-        txt = obj.get_active_btn_text()
-        print("%s was pressed" % txt)
+def event_handler(evt):
+    code = evt.get_code()
+    obj  = evt.get_target()
+
+    if code == lv.EVENT.VALUE_CHANGED :
+        id = obj.get_selected_btn()
+        txt = obj.get_btn_text(id)
+
+        print("%s was pressed"%txt)
 
 btnm_map = ["1", "2", "3", "4", "5", "\n",
             "6", "7", "8", "9", "0", "\n",
             "Action1", "Action2", ""]
 
-btnm1 = lv.btnm(lv.scr_act())
+btnm1 = lv.btnmatrix(lv.scr_act())
 btnm1.set_map(btnm_map)
 btnm1.set_btn_width(10, 2)        # Make "Action1" twice as wide as "Action2"
-btnm1.align(None, lv.ALIGN.CENTER, 0, 0)
-btnm1.set_event_cb(event_handler)
\ No newline at end of file
+btnm1.set_btn_ctrl(10, lv.btnmatrix.CTRL.CHECKABLE)
+btnm1.set_btn_ctrl(11, lv.btnmatrix.CTRL.CHECKED)
+btnm1.align(lv.ALIGN.CENTER, 0, 0)
+btnm1.add_event_cb(event_handler, lv.EVENT.ALL, None)
+
+
+#endif
diff --git a/examples/widgets/btnmatrix/lv_example_btnmatrix_2.py b/examples/widgets/btnmatrix/lv_example_btnmatrix_2.py
new file mode 100644
index 000000000..d5dcee761
--- /dev/null
+++ b/examples/widgets/btnmatrix/lv_example_btnmatrix_2.py
@@ -0,0 +1,83 @@
+from imagetools import get_png_info, open_png
+
+# Register PNG image decoder
+decoder = lv.img.decoder_create()
+decoder.info_cb = get_png_info
+decoder.open_cb = open_png
+
+# Create an image from the png file
+try:
+    with open('../../assets/img_star.png','rb') as f:
+        png_data = f.read()
+except:
+    print("Could not find img_star.png")
+    sys.exit()
+    
+img_star_argb = lv.img_dsc_t({
+  'data_size': len(png_data),
+  'data': png_data 
+})
+
+def event_cb(e):
+    code = e.get_code()
+    obj = e.get_target()
+    if code == lv.EVENT.DRAW_PART_BEGIN:
+        dsc = lv.obj_draw_part_dsc_t.cast(e.get_param())
+        # Change the draw descriptor the 2nd button
+        if dsc.id == 1:
+            dsc.rect_dsc.radius = 0;
+            if obj.get_selected_btn() == dsc.id:
+                dsc.rect_dsc.bg_color = lv.palette_darken(lv.PALETTE.GREY, 3)
+            else:
+                dsc.rect_dsc.bg_color = lv.palette_main(lv.PALETTE.BLUE)
+
+            dsc.rect_dsc.shadow_width = 6
+            dsc.rect_dsc.shadow_ofs_x = 3
+            dsc.rect_dsc.shadow_ofs_y = 3
+            dsc.label_dsc.color = lv.color_white()
+
+        # Change the draw descriptor the 3rd button
+
+        elif dsc.id == 2:
+            dsc.rect_dsc.radius = lv.RADIUS.CIRCLE
+            if obj.get_selected_btn() == dsc.id:
+                dsc.rect_dsc.bg_color = lv.palette_darken(lv.PALETTE.RED, 3)
+            else:
+                dsc.rect_dsc.bg_color = lv.palette_main(lv.PALETTE.RED)
+                
+                dsc.label_dsc.color = lv.color_white()
+        elif dsc.id == 3:
+            dsc.label_dsc.opa = lv.OPA.TRANSP  # Hide the text if any
+
+    if code == lv.EVENT.DRAW_PART_END:
+        dsc = lv.obj_draw_part_dsc_t.cast(e.get_param())
+
+        # Add custom content to the 4th button when the button itself was drawn
+        if dsc.id == 3:
+            # LV_IMG_DECLARE(img_star);
+            header = lv.img_header_t()
+            res = lv.img.decoder_get_info(img_star_argb, header)
+            if res != lv.RES.OK:
+                print("error when getting image header")
+                return
+            else:
+                a = lv.area_t()
+                a.x1 = dsc.draw_area.x1 + (dsc.draw_area.get_width() - header.w) // 2
+                a.x2 = a.x1 + header.w - 1;
+                a.y1 = dsc.draw_area.y1 + (dsc.draw_area.get_height() - header.h) // 2
+                a.y2 = a.y1 + header.h - 1;
+                img_draw_dsc = lv.draw_img_dsc_t()
+                img_draw_dsc.init()
+                img_draw_dsc.recolor = lv.color_black()
+                if obj.get_selected_btn() == dsc.id:
+                    img_draw_dsc.recolor_opa = lv.OPA._30
+
+                lv.draw_img(a, dsc.clip_area, img_star_argb, img_draw_dsc)
+
+#
+# Add custom drawer to the button matrix to c
+#
+btnm = lv.btnmatrix(lv.scr_act())
+btnm.add_event_cb(event_cb, lv.EVENT.ALL, None)
+btnm.center()
+
diff --git a/examples/widgets/btnmatrix/lv_example_btnmatrix_3.py b/examples/widgets/btnmatrix/lv_example_btnmatrix_3.py
new file mode 100644
index 000000000..12becddf6
--- /dev/null
+++ b/examples/widgets/btnmatrix/lv_example_btnmatrix_3.py
@@ -0,0 +1,64 @@
+def event_cb(e):
+    obj = lv.btnmatrix.__cast__(e.get_target())
+    id = obj.get_selected_btn()
+    if id == 0:
+        prev = True
+    else:
+        prev = False
+    if id == 6:
+        next = True
+    else:
+        next = False
+    if prev or next:
+        # Find the checked butto
+        for i in range(7):
+            if obj.has_btn_ctrl(i, lv.btnmatrix.CTRL.CHECKED):
+                break
+        if prev and i > 1:
+            i-=1
+        elif next and i < 5:
+            i+=1
+
+        obj.set_btn_ctrl(i, lv.btnmatrix.CTRL.CHECKED)
+
+#
+# Make a button group
+#
+
+style_bg = lv.style_t()
+style_bg.init()
+style_bg.set_pad_all(0)
+style_bg.set_pad_gap(0)
+style_bg.set_clip_corner(True)
+style_bg.set_radius(lv.RADIUS.CIRCLE)
+style_bg.set_border_width(0)
+
+
+style_btn = lv.style_t()
+style_btn.init()
+style_btn.set_radius(0)
+style_btn.set_border_width(1)
+style_btn.set_border_opa(lv.OPA._50)
+style_btn.set_border_color(lv.palette_main(lv.PALETTE.GREY))
+style_btn.set_border_side(lv.BORDER_SIDE.INTERNAL)
+style_btn.set_radius(0)
+
+map = [lv.SYMBOL.LEFT,"1","2", "3", "4", "5",lv.SYMBOL.RIGHT, ""]
+
+btnm = lv.btnmatrix(lv.scr_act())
+btnm.set_map(map)
+btnm.add_style(style_bg, 0);
+btnm.add_style(style_btn, lv.PART.ITEMS)
+btnm.add_event_cb(event_cb, lv.EVENT.VALUE_CHANGED, None)
+btnm.set_size(225, 35)
+
+# Allow selecting on one number at time
+btnm.set_btn_ctrl_all(lv.btnmatrix.CTRL.CHECKABLE)
+btnm.clear_btn_ctrl(0, lv.btnmatrix.CTRL.CHECKABLE)
+btnm.clear_btn_ctrl(6, lv.btnmatrix.CTRL.CHECKABLE)
+
+btnm.set_one_checked(True);
+btnm.set_btn_ctrl(1, lv.btnmatrix.CTRL.CHECKED)
+
+btnm.center()
+
diff --git a/examples/widgets/calendar/lv_example_calendar_1.py b/examples/widgets/calendar/lv_example_calendar_1.py
new file mode 100644
index 000000000..119c0db64
--- /dev/null
+++ b/examples/widgets/calendar/lv_example_calendar_1.py
@@ -0,0 +1,42 @@
+def event_handler(evt):
+    code = evt.get_code()
+
+    if code == lv.EVENT.VALUE_CHANGED:
+        source = lv.calendar.__cast__(evt.get_target())
+        date = lv.calendar_date_t()
+        lv.calendar.get_pressed_date(source,date)
+        if date:
+             print("Clicked date: %02d.%02d.%02d"%(date.day, date.month, date.year))
+                
+
+calendar = lv.calendar(lv.scr_act())
+calendar.set_size(200, 200)
+calendar.align(lv.ALIGN.CENTER, 0, 20)
+calendar.add_event_cb(event_handler, lv.EVENT.ALL, None)
+
+calendar.set_today_date(2021, 02, 23)
+calendar.set_showed_date(2021, 02)
+
+# Highlight a few days
+highlighted_days=[]
+for i in range(3):
+    highlighted_days.append(lv.calendar_date_t())
+
+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
+
+calendar.set_highlighted_dates(highlighted_days, 3)
+
+header = lv.calendar_header_dropdown(lv.scr_act(),calendar)
+# header = lv.calendar_header_arrow(lv.scr_act(),calendar,25)
+
+
diff --git a/examples/widgets/canvas/lv_example_canvas_1.py b/examples/widgets/canvas/lv_example_canvas_1.py
index 116784164..3c3709f69 100644
--- a/examples/widgets/canvas/lv_example_canvas_1.py
+++ b/examples/widgets/canvas/lv_example_canvas_1.py
@@ -1,38 +1,43 @@
-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_WIDTH  = 200
+_CANVAS_HEIGHT =  150
+LV_IMG_ZOOM_NONE = 256
 
-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))
+rect_dsc = lv.draw_rect_dsc_t()
+rect_dsc.init()
+rect_dsc.radius = 10
+rect_dsc.bg_opa = lv.OPA.COVER
+rect_dsc.bg_grad_dir = lv.GRAD_DIR.HOR
+rect_dsc.bg_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
+
+label_dsc = lv.draw_label_dsc_t()
+label_dsc.init()
+label_dsc.color = lv.palette_main(lv.PALETTE.YELLOW)
 
-canvas.draw_rect(70, 60, 100, 70, style)
+cbuf = bytearray(_CANVAS_WIDTH * _CANVAS_HEIGHT * 4)
 
-canvas.draw_text(40, 20, 100, style, "Some text on text canvas", lv.label.ALIGN.LEFT)
+canvas = lv.canvas(lv.scr_act())
+canvas.set_buffer(cbuf, _CANVAS_WIDTH, _CANVAS_HEIGHT, lv.img.CF.TRUE_COLOR)
+canvas.center()
+canvas.fill_bg(lv.palette_lighten(lv.PALETTE.GREY, 3), lv.OPA.COVER)
+
+canvas.draw_rect(70, 60, 100, 70, rect_dsc)
+canvas.draw_text(40, 20, 100, label_dsc, "Some text on text canvas")
 
 # Test the rotation. It requires 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
+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)
\ No newline at end of file
+canvas.fill_bg(lv_palette_lighten(LV_PALETTE_GREY, 3), LV_OPA_COVER)
+canvas.transform(img, 30, LV_IMG_ZOOM_NONE, 0, 0, _CANVAS_WIDTH // 2, _CANVAS_HEIGHT // 2, True);
diff --git a/examples/widgets/canvas/lv_example_canvas_2.py b/examples/widgets/canvas/lv_example_canvas_2.py
index 2ebe8f4f4..0a0180796 100644
--- a/examples/widgets/canvas/lv_example_canvas_2.py
+++ b/examples/widgets/canvas/lv_example_canvas_2.py
@@ -1,29 +1,31 @@
-# Create a transparent canvas with Chroma keying and indexed color format (palette).
+CANVAS_WIDTH   = 50
+CANVAS_HEIGHT  = 50
+LV_COLOR_CHROMA_KEY = lv.color_hex(0x00ff00) 
+
+def LV_IMG_BUF_SIZE_ALPHA_1BIT(w, h):
+    return int(((w / 8) + 1) * h)
 
-CANVAS_WIDTH  = 50
-CANVAS_HEIGHT = 50
+def LV_IMG_BUF_SIZE_INDEXED_1BIT(w, h):
+    return LV_IMG_BUF_SIZE_ALPHA_1BIT(w, h) + 4 * 2
 
-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
+def LV_CANVAS_BUF_SIZE_INDEXED_1BIT(w, h):
+    return LV_IMG_BUF_SIZE_INDEXED_1BIT(w, h)
+
+#
+# Create a transparent canvas with Chroma keying and indexed color format (palette).
+# 
 
 # Create a button to better see the transparency
-lv.btn(lv.scr_act())
+btn=lv.btn(lv.scr_act())
 
 # Create a buffer for the canvas
-cbuf = bytearray(bufsize(CANVAS_WIDTH, CANVAS_HEIGHT, 1, indexed=True))
+cbuf= bytearray(LV_CANVAS_BUF_SIZE_INDEXED_1BIT(CANVAS_WIDTH, CANVAS_HEIGHT))
 
 # 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))
+canvas.set_palette(0, LV_COLOR_CHROMA_KEY)
+canvas.set_palette(1, lv.palette_main(lv.PALETTE.RED))
 
 # Create colors with the indices of the palette
 c0 = lv.color_t()
@@ -32,10 +34,10 @@ c1 = lv.color_t()
 c0.full = 0
 c1.full = 1
 
-# Transparent background
-canvas.fill_bg(c1)
+# Red background (There is no dedicated alpha channel in indexed images so LV_OPA_COVER is ignored)
+canvas.fill_bg(c1, lv.OPA.COVER)
 
 # Create hole on the canvas
 for y in range(10,30):
-    for x in range(5, 20):
+    for x in range(5,20):
         canvas.set_px(x, y, c0)
diff --git a/examples/widgets/chart/lv_example_chart_1.py b/examples/widgets/chart/lv_example_chart_1.py
index f2250ff78..3801c9645 100644
--- a/examples/widgets/chart/lv_example_chart_1.py
+++ b/examples/widgets/chart/lv_example_chart_1.py
@@ -1,19 +1,26 @@
 # 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)
+chart.center()
+chart.set_type(lv.chart.TYPE.LINE)   # Show lines and points too
 
 # Add two data series
-ser1 = chart.add_series(lv.color_make(0xFF,0,0))
-ser2 = chart.add_series(lv.color_make(0,0x80,0))
+ser1 = chart.add_series(lv.palette_main(lv.PALETTE.RED), lv.chart.AXIS.PRIMARY_Y);
+ser2 = chart.add_series(lv.palette_main(lv.PALETTE.GREEN), lv.chart.AXIS.SECONDARY_Y)
+print(ser2)
+# Set next points on ser1
+chart.set_next_value(ser1,10)
+chart.set_next_value(ser1,10)
+chart.set_next_value(ser1,10)
+chart.set_next_value(ser1,10)
+chart.set_next_value(ser1,10)
+chart.set_next_value(ser1,10)
+chart.set_next_value(ser1,10)
+chart.set_next_value(ser1,30)
+chart.set_next_value(ser1,70)
+chart.set_next_value(ser1,90)
 
-# Set points on 'dl1'
-chart.set_points(ser1, [10, 10, 10, 10, 10, 10, 10, 30, 70, 90])
+# Directly set points on 'ser2'
+ser2.y_points = [90, 70, 65, 65, 65, 65, 65, 65, 65, 65]
+chart.refresh()      #  Required after direct set
 
-# Set points on 'dl2'
-chart.set_points(ser2, [90, 70, 65, 65, 65, 65, 65, 65, 65, 65])
\ No newline at end of file
diff --git a/examples/widgets/chart/lv_example_chart_2.py b/examples/widgets/chart/lv_example_chart_2.py
new file mode 100644
index 000000000..1cd504ddc
--- /dev/null
+++ b/examples/widgets/chart/lv_example_chart_2.py
@@ -0,0 +1,77 @@
+def draw_event_cb(e):
+
+    obj = lv.obj.__cast__(e.get_target())
+
+    # Add the faded area before the lines are drawn
+    dsc = lv.obj_draw_part_dsc_t.cast(e.get_param())
+    if dsc.part != lv.PART.ITEMS:
+        return
+    if not dsc.p1 or not dsc.p2:
+        return
+
+    # Add  a line mask that keeps the area below the line
+    line_mask_param = lv.draw_mask_line_param_t()
+    line_mask_param.points_init(dsc.p1.x, dsc.p1.y, dsc.p2.x, dsc.p2.y, lv.DRAW_MASK_LINE_SIDE.BOTTOM)
+    # line_mask_id = line_mask_param.draw_mask_add(None)
+    line_mask_id = lv.draw_mask_add(line_mask_param, None)
+    # Add a fade effect: transparent bottom covering top
+    h = obj.get_height()
+    fade_mask_param = lv.draw_mask_fade_param_t()
+    coords = lv.area_t()
+    obj.get_coords(coords)
+    fade_mask_param.init(coords, lv.OPA.COVER, coords.y1 + h // 8, lv.OPA.TRANSP,coords.y2)
+    fade_mask_id = lv.draw_mask_add(fade_mask_param,None)
+
+    # Draw a rectangle that will be affected by the mask
+    draw_rect_dsc = lv.draw_rect_dsc_t()
+    draw_rect_dsc.init()
+    draw_rect_dsc.bg_opa = lv.OPA._20
+    draw_rect_dsc.bg_color = dsc.line_dsc.color
+
+    a = lv.area_t()
+    a.x1 = dsc.p1.x
+    a.x2 = dsc.p2.x - 1
+    a.y1 = min(dsc.p1.y, dsc.p2.y)
+    coords = lv.area_t()
+    obj.get_coords(coords)
+    a.y2 = coords.y2
+    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)
+
+
+def add_data(timer):
+    # LV_UNUSED(timer);
+    cnt = 0;
+    char1.set_next_value(ser1, lv.rand(20, 90))
+
+    if cnt % 4 == 0:
+        chart1.set_next_value(ser2, lv_rand(40, 60))
+
+    cnt +=1
+
+#
+# Add a faded area effect to the line chart
+#
+
+# Create a chart1
+chart1 = lv.chart(lv.scr_act())
+chart1.set_size(200, 150)
+chart1.center()
+chart1.set_type(lv.chart.TYPE.LINE)    # Show lines and points too
+
+chart1.add_event_cb(draw_event_cb, lv.EVENT.DRAW_PART_BEGIN, None)
+chart1.set_update_mode(lv.chart.UPDATE_MODE.CIRCULAR)
+
+# Add two data series
+ser1 = chart1.add_series(lv.palette_main(lv.PALETTE.RED), lv.chart.AXIS.PRIMARY_Y)
+ser2 = chart1.add_series(lv.palette_main(lv.PALETTE.BLUE), lv.chart.AXIS.SECONDARY_Y)
+
+for i in range(10):
+    chart1.set_next_value(ser1, lv.rand(20, 90))
+    chart1.set_next_value(ser2, lv.rand(30, 70))
+
+# timer = lv.timer_t(add_data, 200, None)
+
diff --git a/examples/widgets/chart/lv_example_chart_3.py b/examples/widgets/chart/lv_example_chart_3.py
new file mode 100644
index 000000000..3d14bd037
--- /dev/null
+++ b/examples/widgets/chart/lv_example_chart_3.py
@@ -0,0 +1,52 @@
+def draw_event_cb(e):
+
+    dsc = lv.obj_draw_part_dsc_t.cast(e.get_param())
+    if dsc.part == lv.PART.TICKS and dsc.id == lv.chart.AXIS.PRIMARY_X: 
+        month = ["Jan", "Febr", "March", "Apr", "May", "Jun", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]
+        # dsc.text is defined char text[16], I must therefore convert the Python string to a byte_array
+        dsc.text = bytes(month[dsc.value],"ascii") 
+#
+# Add ticks and labels to the axis and demonstrate scrolling
+#
+
+# Create a chart
+chart = lv.chart(lv.scr_act())
+chart.set_size(200, 150)
+chart.center()
+chart.set_type(lv.chart.TYPE.BAR)
+chart.set_range(lv.chart.AXIS.PRIMARY_Y, 0, 100)
+chart.set_range(lv.chart.AXIS.SECONDARY_Y, 0, 400)
+chart.set_point_count(12)
+chart.add_event_cb(draw_event_cb, lv.EVENT.DRAW_PART_BEGIN, None)
+
+# Add ticks and label to every axis
+chart.set_axis_tick(lv.chart.AXIS.PRIMARY_X, 10, 5, 12, 3, True, 40)
+chart.set_axis_tick(lv.chart.AXIS.PRIMARY_Y, 10, 5, 6, 2, True, 50)
+chart.set_axis_tick(lv.chart.AXIS.SECONDARY_Y, 10, 5, 3, 4,True, 50)
+
+# Zoom in a little in X
+chart.set_zoom_x(800)
+
+# Add two data series
+ser1 = lv.chart.add_series(chart, lv.palette_lighten(lv.PALETTE.GREEN, 2), lv.chart.AXIS.PRIMARY_Y);
+ser2 = lv.chart.add_series(chart, lv.palette_darken(lv.PALETTE.GREEN, 2), lv.chart.AXIS.SECONDARY_Y);
+
+# Set the next points on 'ser1'
+chart.set_next_value(ser1, 31)
+chart.set_next_value(ser1, 66)
+chart.set_next_value(ser1, 10)
+chart.set_next_value(ser1, 89)
+chart.set_next_value(ser1, 63)
+chart.set_next_value(ser1, 56)
+chart.set_next_value(ser1, 32)
+chart.set_next_value(ser1, 35)
+chart.set_next_value(ser1, 57)
+chart.set_next_value(ser1, 85)
+chart.set_next_value(ser1, 22)
+chart.set_next_value(ser1, 58)
+
+# Directly set points on 'ser2'
+ser2.y_points =  [92,71,61,15,21,35,35,58,31,53,33,73]
+
+chart.refresh()  #Required after direct set
+
diff --git a/examples/widgets/chart/lv_example_chart_4.py b/examples/widgets/chart/lv_example_chart_4.py
new file mode 100644
index 000000000..981f65feb
--- /dev/null
+++ b/examples/widgets/chart/lv_example_chart_4.py
@@ -0,0 +1,73 @@
+def event_cb(e):
+    code = e.get_code()
+    chart = e.get_target()
+
+    if code == lv.EVENT.VALUE_CHANGED:
+        chart.invalidate()
+
+    if code == lv.EVENT.REFR_EXT_DRAW_SIZE:
+        e.set_ext_draw_size(20)
+
+    elif code == lv.EVENT.DRAW_POST_END:
+        id = lv.chart.get_pressed_point(chart)
+        if id == lv.CHART_POINT.NONE:
+            return
+        # print("Selected point ", id)
+        for i in range(len(series)):
+            p = lv.point_t()
+            chart.get_point_pos_by_id(series[i], id, p)
+            value = series_points[i][id]
+            buf = lv.SYMBOL.DUMMY + "$" + str(value)
+            
+            draw_rect_dsc = lv.draw_rect_dsc_t()
+            draw_rect_dsc.init()
+            draw_rect_dsc.bg_color = lv.color_black()
+            draw_rect_dsc.bg_opa = lv.OPA._50
+            draw_rect_dsc.radius = 3
+            draw_rect_dsc.bg_img_src = buf;
+            draw_rect_dsc.bg_img_recolor = lv.color_white()
+            
+            a = lv.area_t()
+            coords = lv.area_t()
+            chart.get_coords(coords)
+            a.x1 = coords.x1 + p.x - 20
+            a.x2 = coords.x1 + p.x + 20
+            a.y1 = coords.y1 + p.y - 30
+            a.y2 = coords.y1 + p.y - 10
+            
+            clip_area = lv.area_t.cast(e.get_param())
+            lv.draw_rect(a, clip_area, draw_rect_dsc)
+            
+    elif code == lv.EVENT.RELEASED:
+        chart.invalidate()
+            
+# 
+# Add ticks and labels to the axis and demonstrate scrolling
+#
+
+# Create a chart
+chart = lv.chart(lv.scr_act())
+chart.set_size(200, 150)
+chart.center()
+
+chart.add_event_cb(event_cb, lv.EVENT.ALL, None)
+chart.refresh_ext_draw_size()
+
+# Zoom in a little in X
+chart.set_zoom_x(800)
+
+# Add two data series
+ser1 = chart.add_series(lv.palette_main(lv.PALETTE.RED), lv.chart.AXIS.PRIMARY_Y)
+ser2 = chart.add_series(lv.palette_main(lv.PALETTE.GREEN), lv.chart.AXIS.PRIMARY_Y)
+
+ser1_p = []
+ser2_p = []
+for i in range(10):
+    ser1_p.append(lv.rand(60,90))
+    ser2_p.append(lv.rand(10,40))
+ser1.y_points = ser1_p
+ser2.y_points = ser2_p
+
+series = [ser1,ser2]
+series_points=[ser1_p,ser2_p]
+
diff --git a/examples/widgets/chart/lv_example_chart_5.py b/examples/widgets/chart/lv_example_chart_5.py
new file mode 100644
index 000000000..1999d3003
--- /dev/null
+++ b/examples/widgets/chart/lv_example_chart_5.py
@@ -0,0 +1,89 @@
+# Source: https://github.com/ankur219/ECG-Arrhythmia-classification/blob/642230149583adfae1e4bd26c6f0e1fd8af2be0e/sample.csv
+ecg_sample = [
+    -2, 2, 0, -15, -39, -63, -71, -68, -67, -69, -84, -95, -104, -107, -108, -107, -107, -107, -107, -114, -118, -117,
+    -112, -100, -89, -83, -71, -64, -58, -58, -62, -62, -58, -51, -46, -39, -27, -10, 4, 7, 1, -3, 0, 14, 24, 30, 25, 19,
+    13, 7, 12, 15, 18, 21, 13, 6, 9, 8, 17, 19, 13, 11, 11, 11, 23, 30, 37, 34, 25, 14, 15, 19, 28, 31, 26, 23, 25, 31,
+    39, 37, 37, 34, 30, 32, 22, 29, 31, 33, 37, 23, 13, 7, 2, 4, -2, 2, 11, 22, 33, 19, -1, -27, -55, -67, -72, -71, -63,
+    -49, -18, 35, 113, 230, 369, 525, 651, 722, 730, 667, 563, 454, 357, 305, 288, 274, 255, 212, 173, 143, 117, 82, 39,
+    -13, -53, -78, -91, -101, -113, -124, -131, -131, -131, -129, -128, -129, -125, -123, -123, -129, -139, -148, -153,
+    -159, -166, -183, -205, -227, -243, -248, -246, -254, -280, -327, -381, -429, -473, -517, -556, -592, -612, -620,
+    -620, -614, -604, -591, -574, -540, -497, -441, -389, -358, -336, -313, -284, -222, -167, -114, -70, -47, -28, -4, 12,
+    38, 52, 58, 56, 56, 57, 68, 77, 86, 86, 80, 69, 67, 70, 82, 85, 89, 90, 89, 89, 88, 91, 96, 97, 91, 83, 78, 82, 88, 95,
+    96, 105, 106, 110, 102, 100, 96, 98, 97, 101, 98, 99, 100, 107, 113, 119, 115, 110, 96, 85, 73, 64, 69, 76, 79,
+    78, 75, 85, 100, 114, 113, 105, 96, 84, 74, 66, 60, 75, 85, 89, 83, 67, 61, 67, 73, 79, 74, 63, 57, 56, 58, 61, 55,
+    48, 45, 46, 55, 62, 55, 49, 43, 50, 59, 63, 57, 40, 31, 23, 25, 27, 31, 35, 34, 30, 36, 34, 42, 38, 36, 40, 46, 50,
+    47, 32, 30, 32, 52, 67, 73, 71, 63, 54, 53, 45, 41, 28, 13, 3, 1, 4, 4, -8, -23, -32, -31, -19, -5, 3, 9, 13, 19,
+    24, 27, 29, 25, 22, 26, 32, 42, 51, 56, 60, 57, 55, 53, 53, 54, 59, 54, 49, 26, -3, -11, -20, -47, -100, -194, -236,
+    -212, -123, 8, 103, 142, 147, 120, 105, 98, 93, 81, 61, 40, 26, 28, 30, 30, 27, 19, 17, 21, 20, 19, 19, 22, 36, 40,
+    35, 20, 7, 1, 10, 18, 27, 22, 6, -4, -2, 3, 6, -2, -13, -14, -10, -2, 3, 2, -1, -5, -10, -19, -32, -42, -55, -60,
+    -68, -77, -86, -101, -110, -117, -115, -104, -92, -84, -85, -84, -73, -65, -52, -50, -45, -35, -20, -3, 12, 20, 25,
+    26, 28, 28, 30, 28, 25, 28, 33, 42, 42, 36, 23, 9, 0, 1, -4, 1, -4, -4, 1, 5, 9, 9, -3, -1, -18, -50, -108, -190,
+    -272, -340, -408, -446, -537, -643, -777, -894, -920, -853, -697, -461, -251, -60, 58, 103, 129, 139, 155, 170, 173,
+    178, 185, 190, 193, 200, 208, 215, 225, 224, 232, 234, 240, 240, 236, 229, 226, 224, 232, 233, 232, 224, 219, 219,
+    223, 231, 226, 223, 219, 218, 223, 223, 223, 233, 245, 268, 286, 296, 295, 283, 271, 263, 252, 243, 226, 210, 197,
+    186, 171, 152, 133, 117, 114, 110, 107, 96, 80, 63, 48, 40, 38, 34, 28, 15, 2, -7, -11, -14, -18, -29, -37, -44, -50,
+    -58, -63, -61, -52, -50, -48, -61, -59, -58, -54, -47, -52, -62, -61, -64, -54, -52, -59, -69, -76, -76, -69, -67,
+    -74, -78, -81, -80, -73, -65, -57, -53, -51, -47, -35, -27, -22, -22, -24, -21, -17, -13, -10, -11, -13, -20, -20,
+    -12, -2, 7, -1, -12, -16, -13, -2, 2, -4, -5, -2, 9, 19, 19, 14, 11, 13, 19, 21, 20, 18, 19, 19, 19, 16, 15, 13, 14,
+    9, 3, -5, -9, -5, -3, -2, -3, -3, 2, 8, 9, 9, 5, 6, 8, 8, 7, 4, 3, 4, 5, 3, 5, 5, 13, 13, 12, 10, 10, 15, 22, 17,
+    14, 7, 10, 15, 16, 11, 12, 10, 13, 9, -2, -4, -2, 7, 16, 16, 17, 16, 7, -1, -16, -18, -16, -9, -4, -5, -10, -9, -8,
+    -3, -4, -10, -19, -20, -16, -9, -9, -23, -40, -48, -43, -33, -19, -21, -26, -31, -33, -19, 0, 17, 24, 9, -17, -47,
+    -63, -67, -59, -52, -51, -50, -49, -42, -26, -21, -15, -20, -23, -22, -19, -12, -8, 5, 18, 27, 32, 26, 25, 26, 22,
+    23, 17, 14, 17, 21, 25, 2, -45, -121, -196, -226, -200, -118, -9, 73, 126, 131, 114, 87, 60, 42, 29, 26, 34, 35, 34,
+    25, 12, 9, 7, 3, 2, -8, -11, 2, 23, 38, 41, 23, 9, 10, 13, 16, 8, -8, -17, -23, -26, -25, -21, -15, -10, -13, -13,
+    -19, -22, -29, -40, -48, -48, -54, -55, -66, -82, -85, -90, -92, -98, -114, -119, -124, -129, -132, -146, -146, -138,
+    -124, -99, -85, -72, -65, -65, -65, -66, -63, -64, -64, -58, -46, -26, -9, 2, 2, 4, 0, 1, 4, 3, 10, 11, 10, 2, -4,
+    0, 10, 18, 20, 6, 2, -9, -7, -3, -3, -2, -7, -12, -5, 5, 24, 36, 31, 25, 6, 3, 7, 12, 17, 11, 0, -6, -9, -8, -7, -5,
+    -6, -2, -2, -6, -2, 2, 14, 24, 22, 15, 8, 4, 6, 7, 12, 16, 25, 20, 7, -16, -41, -60, -67, -65, -54, -35, -11, 30,
+    84, 175, 302, 455, 603, 707, 743, 714, 625, 519, 414, 337, 300, 281, 263, 239, 197, 163, 136, 109, 77, 34, -18, -50,
+    -66, -74, -79, -92, -107, -117, -127, -129, -135, -139, -141, -155, -159, -167, -171, -169, -174, -175, -178, -191,
+    -202, -223, -235, -243, -237, -240, -256, -298, -345, -393, -432, -475, -518, -565, -596, -619, -623, -623, -614,
+    -599, -583, -559, -524, -477, -425, -383, -357, -331, -301, -252, -198, -143, -96, -57, -29, -8, 10, 31, 45, 60, 65,
+    70, 74, 76, 79, 82, 79, 75, 62,
+]
+
+def slider_x_event_cb(e):
+
+    slider = lv.slider.__cast__(e.get_target())
+    v = slider.get_value()
+    chart.set_zoom_x(v)
+
+def slider_y_event_cb(e):
+
+    slider = lv.slider.__cast__(e.get_target())
+    v = slider.get_value()
+    chart.set_zoom_y(v)
+
+
+#
+# Display 1000 data points with zooming and scrolling.
+# See how the chart changes drawing mode (draw only vertical lines) when
+# the points get too crowded.
+ 
+# Create a chart
+chart = lv.chart(lv.scr_act())
+chart.set_size(200, 150)
+chart.align(lv.ALIGN.CENTER, -30, -30)
+chart.set_range(lv.chart.AXIS.PRIMARY_Y, -1000, 1000)
+
+# Do not display points on the data
+chart.set_style_size(0, lv.PART.INDICATOR)
+
+ser = chart.add_series(lv.palette_main(lv.PALETTE.RED), lv.chart.AXIS.PRIMARY_Y)
+
+pcnt = len(ecg_sample)
+chart.set_point_count(pcnt)
+chart.set_ext_y_array(ser, ecg_sample)
+
+slider = lv.slider(lv.scr_act())
+slider.set_range(lv.IMG_ZOOM.NONE, lv.IMG_ZOOM.NONE * 10)
+slider.add_event_cb(slider_x_event_cb, lv.EVENT.VALUE_CHANGED, None)
+slider.set_size(200,10)
+slider.align_to(chart, lv.ALIGN.OUT_BOTTOM_MID, 0, 20)
+
+slider = lv.slider(lv.scr_act())
+slider.set_range(lv.IMG_ZOOM.NONE, lv.IMG_ZOOM.NONE * 10)
+slider.add_event_cb(slider_y_event_cb, lv.EVENT.VALUE_CHANGED, None)
+slider.set_size(10, 150)
+slider.align_to(chart, lv.ALIGN.OUT_RIGHT_MID, 20, 0)
+
diff --git a/examples/widgets/chart/lv_example_chart_6.py b/examples/widgets/chart/lv_example_chart_6.py
new file mode 100644
index 000000000..23d4e4453
--- /dev/null
+++ b/examples/widgets/chart/lv_example_chart_6.py
@@ -0,0 +1,88 @@
+class ExampleChart_6():
+    
+    def __init__(self):
+        self.last_id = -1
+        #
+        # Show cursor on the clicked point
+        #
+
+        chart = lv.chart(lv.scr_act())
+        chart.set_size(200, 150)
+        chart.align(lv.ALIGN.CENTER, 0, -10)
+        
+        chart.set_axis_tick(lv.chart.AXIS.PRIMARY_Y, 10, 5, 6, 5, True, 40)
+        chart.set_axis_tick(lv.chart.AXIS.PRIMARY_X, 10, 5, 10, 1, True, 30)
+        
+        chart.add_event_cb(self.event_cb, lv.EVENT.ALL, None)
+        chart.refresh_ext_draw_size()
+        
+        self.cursor = chart.add_cursor(lv.palette_main(lv.PALETTE.BLUE), lv.DIR.LEFT | lv.DIR.BOTTOM)
+        
+        self.ser = chart.add_series(lv.palette_main(lv.PALETTE.RED), lv.chart.AXIS.PRIMARY_Y)
+
+        self.ser_p = []
+        for i in range(10):
+            self.ser_p.append(lv.rand(10,90))
+        self.ser.y_points = self.ser_p                     
+
+        newser = chart.get_series_next(None)
+        # print("length of data points: ",len(newser.points))
+        chart.set_zoom_x(500)
+
+        label = lv.label(lv.scr_act())
+        label.set_text("Click on a point")
+        label.align_to(chart, lv.ALIGN.OUT_TOP_MID, 0, -5)
+        
+        
+    def event_cb(self,e):
+
+        code = e.get_code()
+        chart = lv.chart.__cast__(e.get_target())
+
+        if code == lv.EVENT.VALUE_CHANGED:
+            # print("last_id: ",self.last_id)
+            self.last_id = chart.get_pressed_point()
+            if self.last_id != lv.CHART_POINT.NONE:
+                p = lv.point_t()
+                chart.get_point_pos_by_id(self.ser, self.last_id, p)
+                chart.set_cursor_point(self.cursor, None, self.last_id)
+                
+        elif code == lv.EVENT.DRAW_PART_END:
+            # print("EVENT.DRAW_PART_END")
+            dsc = lv.obj_draw_part_dsc_t.cast(e.get_param())
+            # if dsc.p1 and dsc.p2:
+                # print("p1, p2", dsc.p1,dsc.p2)
+                # print("p1.y, p2.y", dsc.p1.y, dsc.p2.y)
+                # print("last_id: ",self.last_id)
+            if dsc.part == lv.PART.CURSOR and dsc.p1 and dsc.p2 and dsc.p1.y == dsc.p2.y and self.last_id >= 0:
+
+                v = self.ser_p[self.last_id];
+     
+                # print("value: ",v)
+                value_txt = str(v)
+                size = lv.point_t()
+                lv.txt_get_size(size, value_txt, lv.font_default(), 0, 0, lv.COORD.MAX, lv.TEXT_FLAG.NONE)
+                
+                a = lv.area_t()
+                a.y2 = dsc.p1.y - 5
+                a.y1 = a.y2 - size.y - 10
+                a.x1 = dsc.p1.x + 10;
+                a.x2 = a.x1 + size.x + 10;
+                
+                draw_rect_dsc = lv.draw_rect_dsc_t()
+                draw_rect_dsc.init()
+                draw_rect_dsc.bg_color = lv.palette_main(lv.PALETTE.BLUE)
+                draw_rect_dsc.radius = 3;
+                
+                lv.draw_rect(a, dsc.clip_area, draw_rect_dsc)
+                
+                draw_label_dsc = lv.draw_label_dsc_t()
+                draw_label_dsc.init()
+                draw_label_dsc.color = lv.color_white()
+                a.x1 += 5
+                a.x2 -= 5
+                a.y1 += 5
+                a.y2 -= 5
+                lv.draw_label(a, dsc.clip_area, draw_label_dsc, value_txt, None)
+
+example_chart_6 = ExampleChart_6()
diff --git a/examples/widgets/chart/lv_example_chart_7.py b/examples/widgets/chart/lv_example_chart_7.py
new file mode 100644
index 000000000..f9856365d
--- /dev/null
+++ b/examples/widgets/chart/lv_example_chart_7.py
@@ -0,0 +1,77 @@
+#!/opt/bin/lv_micropython -i
+import time
+import lvgl as lv
+import display_driver
+
+def draw_event_cb(e):
+    dsc = e.get_draw_part_dsc()
+    if dsc.part == lv.PART.ITEMS:
+        obj = e.get_target()
+        ser = obj.get_series_next(None)
+        cnt = obj.get_point_count()
+        # print("cnt: ",cnt)
+        # Make older value more transparent
+        dsc.rect_dsc.bg_opa = (lv.OPA.COVER *  dsc.id) // (cnt - 1)
+        
+        # Make smaller values blue, higher values red
+        # x_array = chart.get_x_array(ser)
+        # y_array = chart.get_y_array(ser)
+        # dsc->id is the tells drawing order, but we need the ID of the point being drawn.
+        start_point = chart.get_x_start_point(ser)
+        # print("start point: ",start_point)
+        p_act = (start_point + dsc.id) % cnt # Consider start point to get the index of the array
+        # print("p_act", p_act)
+        x_opa = (x_array[p_act] * lv.OPA._50) // 200
+        y_opa = (y_array[p_act] * lv.OPA._50) // 1000
+        
+        dsc.rect_dsc.bg_color = lv.palette_main(lv.PALETTE.RED).color_mix(
+                                             lv.palette_main(lv.PALETTE.BLUE),
+                                             x_opa + y_opa)
+        
+def add_data(timer,chart):
+    # print("add_data")
+    x = lv.rand(0,200)
+    y = lv.rand(0,1000)
+    chart.set_next_value2(ser, x, y)
+    # chart.set_next_value2(chart.gx, y)
+    x_array.pop(0)
+    x_array.append(x)
+    y_array.pop(0)
+    y_array.append(y)
+    
+#
+# A scatter chart
+#
+
+chart = lv.chart(lv.scr_act())
+chart.set_size(200, 150)
+chart.align(lv.ALIGN.CENTER, 0, 0)
+chart.add_event_cb(draw_event_cb, lv.EVENT.DRAW_PART_BEGIN, None)
+chart.set_style_line_width(0, lv.PART.ITEMS)   # Remove the lines
+
+chart.set_type(lv.chart.TYPE.SCATTER)
+
+chart.set_axis_tick(lv.chart.AXIS.PRIMARY_X, 5, 5, 5, 1, True, 30)
+chart.set_axis_tick(lv.chart.AXIS.PRIMARY_Y, 10, 5, 6, 5, True, 50)
+
+chart.set_range(lv.chart.AXIS.PRIMARY_X, 0, 200)
+chart.set_range(lv.chart.AXIS.PRIMARY_Y, 0, 1000)
+
+chart.set_point_count(50)
+
+ser = chart.add_series(lv.palette_main(lv.PALETTE.RED), lv.chart.AXIS.PRIMARY_Y)
+
+x_array = []
+y_array = []
+for i in range(50):
+    x_array.append(lv.rand(0, 200))
+    y_array.append(lv.rand(0, 1000))
+                        
+ser.x_points = x_array
+ser.y_points = y_array
+
+# Create an `lv_timer` to update the chart.
+
+timer = lv.timer_create_basic()
+timer.set_period(100)
+timer.set_cb(lambda src: add_data(timer,chart))
diff --git a/examples/widgets/checkbox/lv_example_checkbox_1.py b/examples/widgets/checkbox/lv_example_checkbox_1.py
index d0ffb7e33..9eae6435f 100644
--- a/examples/widgets/checkbox/lv_example_checkbox_1.py
+++ b/examples/widgets/checkbox/lv_example_checkbox_1.py
@@ -1,8 +1,36 @@
-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)
\ No newline at end of file
+def event_handler(e):
+    code = e.get_code()
+    obj = lv.checkbox.__cast__(e.get_target())
+    if code == lv.EVENT.VALUE_CHANGED:
+        txt = obj.get_text()
+        if obj.get_state() & lv.STATE.CHECKED:
+            state =  "Checked"
+        else:
+            state = "Unchecked";
+        print(txt + ":" + state)
+
+
+lv.scr_act().set_flex_flow(lv.FLEX_FLOW.COLUMN)
+lv.scr_act().set_flex_align(lv.FLEX_ALIGN.CENTER, lv.FLEX_ALIGN.START, lv.FLEX_ALIGN.CENTER)
+
+cb = lv.checkbox(lv.scr_act())
+cb.set_text("Apple")
+cb.add_event_cb(event_handler, lv.EVENT.ALL, None)
+
+cb = lv.checkbox(lv.scr_act())
+cb.set_text("Banana")
+cb.add_state(lv.STATE.CHECKED)
+cb.add_event_cb(event_handler, lv.EVENT.ALL, None)
+
+cb = lv.checkbox(lv.scr_act())
+cb.set_text("Lemon")
+cb.add_state(lv.STATE.DISABLED)
+cb.add_event_cb(event_handler, lv.EVENT.ALL, None)
+
+cb = lv.checkbox(lv.scr_act())
+cb.add_state(lv.STATE.CHECKED | lv.STATE.DISABLED)
+cb.set_text("Melon")
+cb.add_event_cb(event_handler, lv.EVENT.ALL, None)
+
+cb.update_layout()
+
diff --git a/examples/widgets/colorwheel/lv_example_colorwheel_1.py b/examples/widgets/colorwheel/lv_example_colorwheel_1.py
new file mode 100644
index 000000000..3da373d6c
--- /dev/null
+++ b/examples/widgets/colorwheel/lv_example_colorwheel_1.py
@@ -0,0 +1,4 @@
+cw = lv.colorwheel(lv.scr_act(), True)
+cw.set_size(200, 200)
+cw.center()
+
diff --git a/examples/widgets/dropdown/lv_example_dropdown_1.py b/examples/widgets/dropdown/lv_example_dropdown_1.py
index da76df517..4cfc15521 100644
--- a/examples/widgets/dropdown/lv_example_dropdown_1.py
+++ b/examples/widgets/dropdown/lv_example_dropdown_1.py
@@ -1,21 +1,26 @@
-def event_handler(obj, event):
-    if event == lv.EVENT.VALUE_CHANGED:
+def event_handler(e):
+    code = e.get_code()
+    obj = lv.dropdown.__cast__(e.get_target())
+    if code == lv.EVENT.VALUE_CHANGED: 
         option = " "*10 # should be large enough to store the option
         obj.get_selected_str(option, len(option))
         # .strip() removes trailing spaces
         print("Option: \"%s\"" % option.strip())
 
-# Create a drop down list
-ddlist = lv.ddlist(lv.scr_act())
-ddlist.set_options("\n".join([
-                    "Apple",
-                    "Banana",
-                    "Orange",
-                    "Melon",
-                    "Grape",
-                    "Raspberry"]))
+# Create a normal drop down list
+dd = lv.dropdown(lv.scr_act())
+dd.set_options("\n".join([
+    "Apple\n"
+    "Banana\n"
+    "Orange\n"
+    "Cherry\n"
+    "Grape\n"
+    "Raspberry\n"
+    "Melon\n"
+    "Orange\n"
+    "Lemon\n"
+    "Nuts\n"]))
+
+dd.align(lv.ALIGN.TOP_MID, 0, 20)
+dd.add_event_cb(event_handler, lv.EVENT.ALL, None)
 
-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)
\ No newline at end of file
diff --git a/examples/widgets/dropdown/lv_example_dropdown_2.py b/examples/widgets/dropdown/lv_example_dropdown_2.py
index e01334c40..43b31b06b 100644
--- a/examples/widgets/dropdown/lv_example_dropdown_2.py
+++ b/examples/widgets/dropdown/lv_example_dropdown_2.py
@@ -1,23 +1,34 @@
-# Create a drop UP list by applying auto realign
+#
+# Create a drop down, up, left and right menus
+#
 
-# Create a drop down list
-ddlist = lv.ddlist(lv.scr_act())
-ddlist.set_options("\n".join([
-                    "Apple",
-                    "Banana",
-                    "Orange",
-                    "Melon",
-                    "Grape",
-                    "Raspberry"]))
+opts = "\n".join([
+    "Apple\n"
+    "Banana\n"
+    "Orange\n"
+    "Melon\n"
+    "Grape\n"
+    "Raspberry"])
 
+dd = lv.dropdown(lv.scr_act())
+dd.set_options_static(opts)
+dd.align(lv.ALIGN.TOP_MID, 0, 10)
+dd = lv.dropdown(lv.scr_act())
+dd.set_options_static(opts)
+dd.set_dir(lv.DIR.BOTTOM)
+dd.set_symbol(lv.SYMBOL.UP)
+dd.align(lv.ALIGN.BOTTOM_MID, 0, -10)
 
-ddlist.set_fix_width(150)
-ddlist.set_fix_height(150)
-ddlist.set_draw_arrow(True)
+dd = lv.dropdown(lv.scr_act())
+dd.set_options_static(opts)
+dd.set_dir(lv.DIR.RIGHT)
+dd.set_symbol(lv.SYMBOL.RIGHT)
+dd.align(lv.ALIGN.LEFT_MID, 10, 0)
+
+dd = lv.dropdown(lv.scr_act())
+dd.set_options_static(opts)
+dd.set_dir(lv.DIR.LEFT)
+dd.set_symbol(lv.SYMBOL.LEFT)
+dd.align(lv.ALIGN.RIGHT_MID, -10, 0)
 
-# 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)
diff --git a/examples/widgets/dropdown/lv_example_dropdown_3.py b/examples/widgets/dropdown/lv_example_dropdown_3.py
new file mode 100644
index 000000000..099b2a7f7
--- /dev/null
+++ b/examples/widgets/dropdown/lv_example_dropdown_3.py
@@ -0,0 +1,53 @@
+from imagetools import get_png_info, open_png
+
+# Register PNG image decoder
+decoder = lv.img.decoder_create()
+decoder.info_cb = get_png_info
+decoder.open_cb = open_png
+
+# Create an image from the png file
+try:
+    with open('../../assets/img_caret_down.png','rb') as f:
+        png_data = f.read()
+except:
+    print("Could not find img_caret_down.png")
+    sys.exit()
+    
+img_caret_down_argb = lv.img_dsc_t({
+  'data_size': len(png_data),
+  'data': png_data 
+})
+
+def event_cb(e):
+    dropdown = lv.dropdown.__cast__(e.get_target())
+    option = " "*64 # should be large enough to store the option
+    dropdown.get_selected_str(option, len(option))
+    print(option.strip() +" is selected")
+#
+# Create a menu from a drop-down list and show some drop-down list features and styling
+#
+
+# Create a drop down list
+dropdown = lv.dropdown(lv.scr_act())
+dropdown.align(lv.ALIGN.TOP_LEFT, 10, 10)
+dropdown.set_options("".join([
+    "New project\n",
+    "New file\n",
+    "Open project\n",
+    "Recent projects\n",
+    "Preferences\n",
+    "Exit"]))
+
+# Set a fixed text to display on the button of the drop-down list
+dropdown.set_text("Menu")
+
+# Use a custom image as down icon and flip it when the list is opened
+# LV_IMG_DECLARE(img_caret_down)
+dropdown.set_symbol(img_caret_down_argb)
+dropdown.set_style_transform_angle(1800, lv.STATE.CHECKED)
+
+# In a menu we don't need to show the last clicked item
+dropdown.set_selected_highlight(False)
+
+dropdown.add_event_cb(event_cb, lv.EVENT.VALUE_CHANGED, None)
+
diff --git a/examples/widgets/img/lv_example_img_1.py b/examples/widgets/img/lv_example_img_1.py
index 75325ccc7..2b93e6747 100644
--- a/examples/widgets/img/lv_example_img_1.py
+++ b/examples/widgets/img/lv_example_img_1.py
@@ -1,3 +1,7 @@
+#!/opt/bin/lv_micropython -i
+import sys
+import lvgl as lv
+import display_driver
 from imagetools import get_png_info, open_png
 
 # Register PNG image decoder
@@ -5,25 +9,24 @@ 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 
+# Create an image from the png file
+try:
+    with open('../../assets/img_cogwheel_argb.png','rb') as f:
+        png_data = f.read()
+except:
+    print("Could not find img_cogwheel_argb.png")
+    sys.exit()
+    
+img_cogwheel_argb = lv.img_dsc_t({
+  'data_size': len(png_data),
+  'data': png_data 
 })
 
-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)
+img1 = lv.img(lv.scr_act())
+img1.set_src(img_cogwheel_argb)
+img1.align(lv.ALIGN.CENTER, 0, -20)
+img1.set_size(200, 200)
 
-img2 = lv.img(scr)
+img2 = lv.img(lv.scr_act())
 img2.set_src(lv.SYMBOL.OK + "Accept")
-img2.align(img1, lv.ALIGN.OUT_BOTTOM_MID, 0, 20)
\ No newline at end of file
+img2.align_to(img1, lv.ALIGN.OUT_BOTTOM_MID, 0, 20)
diff --git a/examples/widgets/img/lv_example_img_2.py b/examples/widgets/img/lv_example_img_2.py
new file mode 100644
index 000000000..b4d721df2
--- /dev/null
+++ b/examples/widgets/img/lv_example_img_2.py
@@ -0,0 +1,70 @@
+#!/opt/bin/lv_micropython -i
+import sys
+import lvgl as lv
+import display_driver
+from imagetools import get_png_info, open_png
+
+# Register PNG image decoder
+decoder = lv.img.decoder_create()
+decoder.info_cb = get_png_info
+decoder.open_cb = open_png
+
+# Create an image from the png file
+try:
+    with open('../../assets/img_cogwheel_argb.png','rb') as f:
+        png_data = f.read()
+except:
+    print("Could not find img_cogwheel_argb.png")
+    sys.exit()
+    
+img_cogwheel_argb = lv.img_dsc_t({
+  'data_size': len(png_data),
+  'data': png_data 
+})
+
+def create_slider(color):
+    slider = lv.slider(lv.scr_act())
+    slider.set_range(0, 255)
+    slider.set_size(10, 200);
+    slider.set_style_bg_color(color, lv.PART.KNOB);
+    slider.set_style_bg_color(color.color_darken(lv.OPA._40), lv.PART.INDICATOR)
+    slider.add_event_cb(slider_event_cb, lv.EVENT.VALUE_CHANGED, None)
+    return slider
+
+def slider_event_cb(e):
+    # Recolor the image based on the sliders' values
+    color  = lv.color_make(red_slider.get_value(), green_slider.get_value(), blue_slider.get_value())
+    intense = intense_slider.get_value()
+    img1.set_style_img_recolor_opa(intense, 0)
+    img1.set_style_img_recolor(color, 0)
+    
+#
+# Demonstrate runtime image re-coloring
+#
+# Create 4 sliders to adjust RGB color and re-color intensity
+red_slider = create_slider(lv.palette_main(lv.PALETTE.RED))
+green_slider = create_slider(lv.palette_main(lv.PALETTE.GREEN))
+blue_slider = create_slider(lv.palette_main(lv.PALETTE.BLUE))
+intense_slider = create_slider(lv.palette_main(lv.PALETTE.GREY))
+
+red_slider.set_value(lv.OPA._20, lv.ANIM.OFF)
+green_slider.set_value(lv.OPA._90, lv.ANIM.OFF)
+blue_slider.set_value(lv.OPA._60, lv.ANIM.OFF)
+intense_slider.set_value(lv.OPA._50, lv.ANIM.OFF)
+
+red_slider.align(lv.ALIGN.LEFT_MID, 25, 0)
+green_slider.align_to(red_slider, lv.ALIGN.OUT_RIGHT_MID, 25, 0)
+blue_slider.align_to(green_slider, lv.ALIGN.OUT_RIGHT_MID, 25, 0)
+intense_slider.align_to(blue_slider, lv.ALIGN.OUT_RIGHT_MID, 25, 0)
+
+# Now create the actual image
+img1 = lv.img(lv.scr_act())
+img1.set_src(img_cogwheel_argb)
+img1.align(lv.ALIGN.RIGHT_MID, -20, 0)
+
+lv.event_send(intense_slider, lv.EVENT.VALUE_CHANGED, None)
+
+
+
+
+
diff --git a/examples/widgets/img/lv_example_img_3.py b/examples/widgets/img/lv_example_img_3.py
new file mode 100644
index 000000000..87194a14f
--- /dev/null
+++ b/examples/widgets/img/lv_example_img_3.py
@@ -0,0 +1,61 @@
+#!/opt/bin/lv_micropython -i
+import sys
+import lvgl as lv
+import display_driver
+from imagetools import get_png_info, open_png
+
+# Register PNG image decoder
+decoder = lv.img.decoder_create()
+decoder.info_cb = get_png_info
+decoder.open_cb = open_png
+
+# Create an image from the png file
+try:
+    with open('../../assets/img_cogwheel_argb.png','rb') as f:
+        png_data = f.read()
+except:
+    print("Could not find img_cogwheel_argb.png")
+    sys.exit()
+    
+img_cogwheel_argb = lv.img_dsc_t({
+  'data_size': len(png_data),
+  'data': png_data 
+})
+
+def set_angle(img, v):
+    img.set_angle(v)
+
+def set_zoom(img, v):
+    img.set_zoom(v)
+
+
+#
+# Show transformations (zoom and rotation) using a pivot point.
+#
+
+# Now create the actual image
+img = lv.img(lv.scr_act())
+img.set_src(img_cogwheel_argb)
+img.align(lv.ALIGN.CENTER, 50, 50)
+img.set_pivot(0, 0)               # Rotate around the top left corner
+
+a1 = lv.anim_t()
+a1.init()
+a1.set_var(img)
+a1.set_custom_exec_cb(lambda a,val: set_angle(img,val))
+a1.set_values(0, 3600)
+a1.set_time(5000)
+a1.set_repeat_count(lv.ANIM_REPEAT.INFINITE)
+lv.anim_t.start(a1)
+
+a2 = lv.anim_t()
+a2.init()
+a2.set_var(img)
+a2.set_custom_exec_cb(lambda a,val: set_zoom(img,val))
+a2.set_values(128, 256)
+a2.set_time(5000)
+a2.set_playback_time(3000)
+a2.set_repeat_count(LV_ANIM_REPEAT_INFINITE)
+lv.anim_t.start(a2)
+
+
diff --git a/examples/widgets/img/lv_example_img_4.py b/examples/widgets/img/lv_example_img_4.py
new file mode 100644
index 000000000..f40e74a87
--- /dev/null
+++ b/examples/widgets/img/lv_example_img_4.py
@@ -0,0 +1,51 @@
+from imagetools import get_png_info, open_png
+
+def ofs_y_anim(img, v):    
+    img.set_offset_y(v)
+    # print(img,v)
+    
+# Register PNG image decoder
+decoder = lv.img.decoder_create()
+decoder.info_cb = get_png_info
+decoder.open_cb = open_png
+
+# Create an image from the png file
+try:
+    with open('../../assets/img_skew_strip.png','rb') as f:
+        png_data = f.read()
+except:
+    print("Could not find img_skew_strip.png")
+    sys.exit()
+    
+img_skew_strip = lv.img_dsc_t({
+  'data_size': len(png_data),
+  'data': png_data 
+})
+
+#
+# Image styling and offset
+#
+
+style = lv.style_t()
+style.init()
+style.set_bg_color(lv.palette_main(lv.PALETTE.YELLOW))
+style.set_bg_opa(lv.OPA.COVER)
+style.set_img_recolor_opa(lv.OPA.COVER)
+style.set_img_recolor(lv.color_black())
+
+img = lv.img(lv.scr_act())
+img.add_style(style, 0)
+img.set_src(img_skew_strip)
+img.set_size(150, 100)
+img.center()
+
+a = lv.anim_t()
+a.init()
+a.set_var(img)
+a.set_values(0, 100)
+a.set_time(3000)
+a.set_playback_time(500)
+a.set_repeat_count(lv.ANIM_REPEAT.INFINITE)
+a.set_custom_exec_cb(lambda a,val: ofs_y_anim(img,val))
+lv.anim_t.start(a)
+
diff --git a/examples/widgets/imgbtn/lv_example_imgbtn_1.py b/examples/widgets/imgbtn/lv_example_imgbtn_1.py
new file mode 100644
index 000000000..127c6225c
--- /dev/null
+++ b/examples/widgets/imgbtn/lv_example_imgbtn_1.py
@@ -0,0 +1,74 @@
+from imagetools import get_png_info, open_png
+
+# Register PNG image decoder
+decoder = lv.img.decoder_create()
+decoder.info_cb = get_png_info
+decoder.open_cb = open_png
+
+# Create an image from the png file
+try:
+    with open('../../assets/imgbtn_left.png','rb') as f:
+        imgbtn_left_data = f.read()
+except:
+    print("Could not find imgbtn_left.png")
+    sys.exit()
+    
+imgbtn_left_dsc = lv.img_dsc_t({
+  'data_size': len(imgbtn_left_data),
+  'data': imgbtn_left_data 
+})
+
+try:
+    with open('../../assets/imgbtn_mid.png','rb') as f:
+        imgbtn_mid_data = f.read()
+except:
+    print("Could not find imgbtn_mid.png")
+    sys.exit()
+    
+imgbtn_mid_dsc = lv.img_dsc_t({
+  'data_size': len(imgbtn_mid_data),
+  'data': imgbtn_mid_data 
+})
+
+try:
+    with open('../../assets/imgbtn_right.png','rb') as f:
+        imgbtn_right_data = f.read()
+except:
+    print("Could not find imgbtn_right.png")
+    sys.exit()
+    
+imgbtn_right_dsc = lv.img_dsc_t({
+  'data_size': len(imgbtn_right_data),
+  'data': imgbtn_right_data 
+})
+
+# Create a transition animation on width transformation and recolor.
+tr_prop = [lv.STYLE.TRANSFORM_WIDTH, lv.STYLE.IMG_RECOLOR_OPA, 0]
+tr = lv.style_transition_dsc_t()
+tr.init(tr_prop, lv.anim_t.path_linear, 200, 0, None)
+
+style_def = lv.style_t()
+style_def.init()
+style_def.set_text_color(lv.color_white())
+style_def.set_transition(tr)
+
+# Darken the button when pressed and make it wider
+style_pr = lv.style_t()
+style_pr.init()
+style_pr.set_img_recolor_opa(lv.OPA._30)
+style_pr.set_img_recolor(lv.color_black())
+style_pr.set_transform_width(20)
+
+# Create an image button
+imgbtn1 = lv.imgbtn(lv.scr_act())
+imgbtn1.set_src(lv.imgbtn.STATE.RELEASED, imgbtn_left_dsc, imgbtn_mid_dsc, imgbtn_right_dsc)
+imgbtn1.add_style(style_def, 0)
+imgbtn1.add_style(style_pr, lv.STATE.PRESSED)
+
+imgbtn1.align(lv.ALIGN.CENTER, 0, 0)
+
+# Create a label on the image button
+label = lv.label(imgbtn1)
+label.set_text("Button");
+label.align(lv.ALIGN.CENTER, 0, -4)
+
diff --git a/examples/widgets/keyboard/lv_example_keyboard_1.py b/examples/widgets/keyboard/lv_example_keyboard_1.py
index 61d83ad76..08b3c056f 100644
--- a/examples/widgets/keyboard/lv_example_keyboard_1.py
+++ b/examples/widgets/keyboard/lv_example_keyboard_1.py
@@ -1,26 +1,28 @@
-# Create styles for the keyboard
-rel_style = lv.style_t()
-pr_style  = lv.style_t()
+def ta_event_cb(e,kb):
+    code = e.get_code()
+    ta = e.get_target()
+    if code == lv.EVENT.FOCUSED:
+        kb.set_textarea(ta)
+        kb.clear_flag(lv.obj.FLAG.HIDDEN)
 
-lv.style_copy(rel_style, lv.style_btn_rel)
-rel_style.body.radius = 0
-rel_style.body.border.width = 1
+    if code == lv.EVENT.DEFOCUSED:
+        kb.set_textarea(None)
+        kb.add_flag(lv.obj.FLAG.HIDDEN)
+        
+# Create a keyboard to use it with an of the text areas
+kb = lv.keyboard(lv.scr_act())
 
-lv.style_copy(pr_style, lv.style_btn_pr)
-pr_style.body.radius = 0
-pr_style.body.border.width = 1
+# Create a text area. The keyboard will write here
+ta = lv.textarea(lv.scr_act())
+ta.set_width(200)
+ta.align(lv.ALIGN.TOP_LEFT, 10, 10)
+ta.add_event_cb(lambda e: ta_event_cb(e,kb), lv.EVENT.ALL, None)
+ta.set_placeholder_text("Hello")
 
-# 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)
+ta = lv.textarea(lv.scr_act())
+ta.set_width(200)
+ta.align(lv.ALIGN.TOP_RIGHT, -10, 10)
+ta.add_event_cb(lambda e: ta_event_cb(e,kb), lv.EVENT.ALL, None)
 
-# 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("")
+kb.set_textarea(ta)
 
-# Assign the text area to the keyboard
-kb.set_ta(ta)
\ No newline at end of file
diff --git a/examples/widgets/label/lv_example_label_1.py b/examples/widgets/label/lv_example_label_1.py
index 659d3d9e8..f2e2433bc 100644
--- a/examples/widgets/label/lv_example_label_1.py
+++ b/examples/widgets/label/lv_example_label_1.py
@@ -1,14 +1,19 @@
+#
+# Show line wrap, re-color, line align and text scrolling.
+#
 label1 = lv.label(lv.scr_act())
-label1.set_long_mode(lv.label.LONG.BREAK)     # Break the long lines
+label1.set_long_mode(lv.label.LONG.WRAP);     # Break the long lines*/
 label1.set_recolor(True)                      # Enable re-coloring by commands in the text
-label1.set_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)
+label1.set_text("#0000ff Re-color# #ff00ff words# #ff0000 of a# label, align the lines to the center"
+                              "and  wrap long text automatically.")
+label1.set_width(150)                         # Set smaller width to make the lines wrap
+label1.set_style_text_align(lv.ALIGN.CENTER, 0)
+label1.align(lv.ALIGN.CENTER, 0, -40)
+
 
 label2 = lv.label(lv.scr_act())
-label2.set_long_mode(lv.label.LONG.SROLL_CIRC)     # Circular scroll
+label2.set_long_mode(lv.label.LONG.SCROLL_CIRCULAR) # Circular scroll
 label2.set_width(150)
 label2.set_text("It is a circularly scrolling text. ")
-label2.align(None, lv.ALIGN.CENTER, 0, 30)
\ No newline at end of file
+label2.align(lv.ALIGN.CENTER, 0, 40)
+
diff --git a/examples/widgets/label/lv_example_label_2.py b/examples/widgets/label/lv_example_label_2.py
index c25e59ad2..d252f2563 100644
--- a/examples/widgets/label/lv_example_label_2.py
+++ b/examples/widgets/label/lv_example_label_2.py
@@ -1,24 +1,30 @@
+#
+# Create a fake text shadow
+#
+
 # 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
+style_shadow = lv.style_t()
+style_shadow.init()
+style_shadow.set_text_opa(lv.OPA._30)
+style_shadow.set_text_color(lv.color_black())
 
 # Create a label for the shadow first (it's in the background)
 shadow_label = lv.label(lv.scr_act())
-shadow_label.set_style(lv.label.STYLE.MAIN, label_style)
+shadow_label.add_style(style_shadow, 0)
 
 # Create the main label
 main_label = lv.label(lv.scr_act())
-main_label.set_text("A simple method to create\n" +
-                              "shadows on text\n" +
-                              "It even works with\n\n" +
-                              "newlines     and spaces.")
+main_label.set_text("A simple method to create\n"
+                   "shadows on a text.\n"
+                   "It even works with\n\n"
+                   "newlines     and spaces.")
 
 # Set the same text for the shadow label
-shadow_label.set_text(main_label.get_text())
+shadow_label.set_text(lv.label.get_text(main_label))
 
 # Position the main label
-main_label.align(None, lv.ALIGN.CENTER, 0, 0)
+main_label.align(lv.ALIGN.CENTER, 0, 0)
+
+# Shift the second label down and to the right by 2 pixel
+shadow_label.align_to(main_label, lv.ALIGN.TOP_LEFT, 2, 2)
 
-# Shift the second label down and to the right by 1 pixel
-shadow_label.align(main_label, lv.ALIGN.IN_TOP_LEFT, 1, 1)
\ No newline at end of file
diff --git a/examples/widgets/label/lv_example_label_3.py b/examples/widgets/label/lv_example_label_3.py
new file mode 100644
index 000000000..d6ed50b05
--- /dev/null
+++ b/examples/widgets/label/lv_example_label_3.py
@@ -0,0 +1,36 @@
+import fs_driver
+#
+# Show mixed LTR, RTL and Chinese label
+#
+
+ltr_label = lv.label(lv.scr_act())
+ltr_label.set_text("In modern terminology, a microcontroller is similar to a system on a chip (SoC).");
+# ltr_label.set_style_text_font(ltr_label, &lv_font_montserrat_16, 0);
+
+fs_drv = lv.fs_drv_t()
+fs_driver.fs_register(fs_drv, 'S')
+
+try:
+    ltr_label.set_style_text_font(ltr_label, lv.font_montserrat_16, 0)
+except:
+    font_montserrat_16 = lv.font_load("S:../../assets/font/montserrat-16.bin")
+    ltr_label.set_style_text_font(font_montserrat_16, 0)
+    
+ltr_label.set_width(310)
+ltr_label.align(lv.ALIGN.TOP_LEFT, 5, 5)
+
+rtl_label = lv.label(lv.scr_act())
+rtl_label.set_text("מעבד, או בשמו המלא יחידת עיבוד מרכזית (באנגלית: CPU - Central Processing Unit).")
+rtl_label.set_style_base_dir(lv.BASE_DIR.RTL, 0)
+rtl_label.set_style_text_font(lv.font_dejavu_16_persian_hebrew, 0)
+rtl_label.set_width(310)
+rtl_label.align(lv.ALIGN.LEFT_MID, 5, 0)
+
+font_simsun_16_cjk = lv.font_load("S:../../assets/font/lv_font_simsun_16_cjk.bin")
+
+cz_label = lv.label(lv.scr_act())
+cz_label.set_style_text_font(font_simsun_16_cjk, 0)
+cz_label.set_text("嵌入式系统（Embedded System），\n是一种嵌入机械或电气系统内部、具有专一功能和实时计算性能的计算机系统。")    
+cz_label.set_width(310)
+cz_label.align(lv.ALIGN.BOTTOM_LEFT, 5, -5)
+
diff --git a/examples/widgets/led/lv_example_led_1.py b/examples/widgets/led/lv_example_led_1.py
index dc1782998..5e1b1267e 100644
--- a/examples/widgets/led/lv_example_led_1.py
+++ b/examples/widgets/led/lv_example_led_1.py
@@ -1,27 +1,20 @@
-# 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 LED's with different brightness and color
+#
 
 # 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.align(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)
+led2  = lv.led(lv.scr_act())
+led2.align(lv.ALIGN.CENTER, 0, 0)
+led2.set_brightness(150)
+led2.set_color(lv.palette_main(lv.PALETTE.RED))
 
 # 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()
\ No newline at end of file
+led3  = lv.led(lv.scr_act())
+led3.align(lv.ALIGN.CENTER, 80, 0)
+led3.on()
+
diff --git a/examples/widgets/line/lv_example_line_1.py b/examples/widgets/line/lv_example_line_1.py
index a590d23af..816f9db86 100644
--- a/examples/widgets/line/lv_example_line_1.py
+++ b/examples/widgets/line/lv_example_line_1.py
@@ -5,15 +5,16 @@ line_points = [ {"x":5, "y":5},
                 {"x":180, "y":60}, 
                 {"x":240, "y":10}]
 
-# Create new style (thick dark blue)
+# Create style
 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
+style_line.init()
+style_line.set_line_width(8)
+style_line.set_line_color(lv.palette_main(lv.PALETTE.BLUE))
+style_line.set_line_rounded(True)
 
-# Copy the previous line and apply the new style
+# Create a 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)
\ No newline at end of file
+line1.set_points(line_points, 5)     # Set the points
+line1.add_style(style_line, 0)
+line1.center()
+
diff --git a/examples/widgets/list/lv_example_list_1.py b/examples/widgets/list/lv_example_list_1.py
index 22a0db2f4..73b259ed4 100644
--- a/examples/widgets/list/lv_example_list_1.py
+++ b/examples/widgets/list/lv_example_list_1.py
@@ -1,25 +1,40 @@
-def event_handler(obj, event):
-    if event == lv.EVENT.CLICKED:
-        print("Clicked: %s" % lv.list.get_btn_text(obj))
+def event_handler(e):
+    code = e.get_code()
+    obj = lv.btn.__cast__(e.get_target())
+    if code == lv.EVENT.CLICKED:
+            print("Clicked: list1." + list1.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)
+list1.set_size(180, 220)
+list1.center()
 
 # Add buttons to the list
+list1.add_text("File")
+btn_new = list1.add_btn(lv.SYMBOL.FILE, "New")
+btn_new.add_event_cb(event_handler,lv.EVENT.ALL, None)
+btn_open = list1.add_btn(lv.SYMBOL.DIRECTORY, "Open")
+btn_open.add_event_cb(event_handler,lv.EVENT.ALL, None)
+btn_save = list1.add_btn(lv.SYMBOL.SAVE, "Save")
+btn_save.add_event_cb(event_handler,lv.EVENT.ALL, None)
+btn_delete = list1.add_btn(lv.SYMBOL.CLOSE, "Delete")
+btn_delete.add_event_cb(event_handler,lv.EVENT.ALL, None)
+btn_edit = list1.add_btn(lv.SYMBOL.EDIT, "Edit")
+btn_edit.add_event_cb(event_handler,lv.EVENT.ALL, None)
 
-list_btn = list1.add_btn(lv.SYMBOL.FILE, "New")
-list_btn.set_event_cb(event_handler)
+list1.add_text("Connectivity")
+btn_bluetooth = list1.add_btn(lv.SYMBOL.BLUETOOTH, "Bluetooth")
+btn_bluetooth.add_event_cb(event_handler,lv.EVENT.ALL, None)
+btn_navig = list1.add_btn(lv.SYMBOL.GPS, "Navigation")
+btn_navig.add_event_cb(event_handler,lv.EVENT.ALL, None)
+btn_USB = list1.add_btn(lv.SYMBOL.USB, "USB")
+btn_USB.add_event_cb(event_handler,lv.EVENT.ALL, None)
+btn_battery = list1.add_btn(lv.SYMBOL.BATTERY_FULL, "Battery")
+btn_battery.add_event_cb(event_handler,lv.EVENT.ALL, None)
 
-list_btn = list1.add_btn(lv.SYMBOL.DIRECTORY, "Open")
-list_btn.set_event_cb(event_handler)
+list1.add_text("Exit")
+btn_apply = list1.add_btn(lv.SYMBOL.OK, "Apply")
+btn_apply.add_event_cb(event_handler,lv.EVENT.ALL, None)
+btn_close = list1.add_btn(LV_SYMBOL.CLOSE, "Close")
+btn_close.add_event_cb(event_handler,lv.EVENT.ALL, None)
 
-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)
\ No newline at end of file
diff --git a/examples/widgets/list/test.py b/examples/widgets/list/test.py
new file mode 100755
index 000000000..999ff995c
--- /dev/null
+++ b/examples/widgets/list/test.py
@@ -0,0 +1,43 @@
+#!/opt/bin/lv_micropython -i
+import lvgl as lv
+import display_driver
+def event_handler(e):
+    code = e.get_code()
+    obj = lv.btn.__cast__(e.get_target())
+    if code == lv.EVENT.CLICKED:
+            print("Clicked: list1." + list1.get_btn_text(obj))
+
+# Create a list
+list1 = lv.list(lv.scr_act())
+list1.set_size(180, 220)
+list1.center()
+
+# Add buttons to the list
+list1.add_text("File")
+btn_new = list1.add_btn(lv.SYMBOL.FILE, "New")
+btn_new.add_event_cb(event_handler,lv.EVENT.ALL, None)
+btn_open = list1.add_btn(lv.SYMBOL.DIRECTORY, "Open")
+btn_open.add_event_cb(event_handler,lv.EVENT.ALL, None)
+btn_save = list1.add_btn(lv.SYMBOL.SAVE, "Save")
+btn_save.add_event_cb(event_handler,lv.EVENT.ALL, None)
+btn_delete = list1.add_btn(lv.SYMBOL.CLOSE, "Delete")
+btn_delete.add_event_cb(event_handler,lv.EVENT.ALL, None)
+btn_edit = list1.add_btn(lv.SYMBOL.EDIT, "Edit")
+btn_edit.add_event_cb(event_handler,lv.EVENT.ALL, None)
+
+list1.add_text("Connectivity")
+btn_bluetooth = list1.add_btn(lv.SYMBOL.BLUETOOTH, "Bluetooth")
+btn_bluetooth.add_event_cb(event_handler,lv.EVENT.ALL, None)
+btn_navig = list1.add_btn(lv.SYMBOL.GPS, "Navigation")
+btn_navig.add_event_cb(event_handler,lv.EVENT.ALL, None)
+btn_USB = list1.add_btn(lv.SYMBOL.USB, "USB")
+btn_USB.add_event_cb(event_handler,lv.EVENT.ALL, None)
+btn_battery = list1.add_btn(lv.SYMBOL.BATTERY_FULL, "Battery")
+btn_battery.add_event_cb(event_handler,lv.EVENT.ALL, None)
+
+list1.add_text("Exit")
+btn_apply = list1.add_btn(lv.SYMBOL.OK, "Apply")
+btn_apply.add_event_cb(event_handler,lv.EVENT.ALL, None)
+btn_close = list1.add_btn(LV_SYMBOL.CLOSE, "Close")
+btn_close.add_event_cb(event_handler,lv.EVENT.ALL, None)
+
diff --git a/examples/widgets/meter/lv_example_meter_1.py b/examples/widgets/meter/lv_example_meter_1.py
new file mode 100644
index 000000000..b1a0046b8
--- /dev/null
+++ b/examples/widgets/meter/lv_example_meter_1.py
@@ -0,0 +1,58 @@
+#!//opt/bin/lv_micropython -i
+import time
+import lvgl as lv
+import display_driver
+
+def set_value(indic, v):
+    meter.set_indicator_value(indic, v)
+
+#
+# A simple meter
+#
+meter = lv.meter(lv.scr_act())
+meter.center()
+meter.set_size(200, 200)
+
+# Add a scale first
+scale = meter.add_scale()
+meter.set_scale_ticks(scale, 51, 2, 10, lv.palette_main(lv.PALETTE.GREY))
+meter.set_scale_major_ticks(scale, 10, 4, 15, lv.color_black(), 10)
+
+indic = lv.meter_indicator_t()
+
+# Add a blue arc to the start
+indic = meter.add_arc(scale, 3, lv.palette_main(lv.PALETTE.BLUE), 0)
+meter.set_indicator_start_value(indic, 0)
+meter.set_indicator_end_value(indic, 20)
+
+# Make the tick lines blue at the start of the scale
+indic = meter.add_scale_lines(scale, lv.palette_main(lv.PALETTE.BLUE), lv.palette_main(lv.PALETTE.BLUE), False, 0)
+meter.set_indicator_start_value(indic, 0)
+meter.set_indicator_end_value(indic, 20)
+
+# Add a red arc to the end
+indic = meter.add_arc(scale, 3, lv.palette_main(lv.PALETTE.RED), 0)
+meter.set_indicator_start_value(indic, 80)
+meter.set_indicator_end_value(indic, 100)
+
+# Make the tick lines red at the end of the scale
+indic = meter.add_scale_lines(scale, lv.palette_main(lv.PALETTE.RED), lv.palette_main(lv.PALETTE.RED), False, 0)
+meter.set_indicator_start_value(indic, 80)
+meter.set_indicator_end_value(indic, 100)
+
+# Add a needle line indicator
+indic = meter.add_needle_line(scale, 4, lv.palette_main(lv.PALETTE.GREY), -10)
+
+# Create an animation to set the value
+a = lv.anim_t()
+a.init()
+a.set_var(indic)
+a.set_values(0, 100)
+a.set_time(2000)
+a.set_repeat_delay(100)
+a.set_playback_time(500)
+a.set_playback_delay(100)
+a.set_repeat_count(lv.ANIM_REPEAT.INFINITE)
+a.set_custom_exec_cb(lambda a,val: set_value(indic,val))
+lv.anim_t.start(a)
+
diff --git a/examples/widgets/meter/lv_example_meter_2.py b/examples/widgets/meter/lv_example_meter_2.py
new file mode 100644
index 000000000..87ffcc725
--- /dev/null
+++ b/examples/widgets/meter/lv_example_meter_2.py
@@ -0,0 +1,69 @@
+#!//opt/bin/lv_micropython -i
+import time
+import lvgl as lv
+import display_driver
+
+def set_value(indic,v):
+    meter.set_indicator_end_value(indic, v)
+
+#
+# A meter with multiple arcs
+#
+
+meter = lv.meter(lv.scr_act())
+meter.center()
+meter.set_size(200, 200)
+
+# Remove the circle from the middle
+meter.remove_style(None, lv.PART.INDICATOR)
+
+# Add a scale first
+scale = meter.add_scale()
+meter.set_scale_ticks(scale, 11, 2, 10, lv.palette_main(lv.PALETTE.GREY))
+meter.set_scale_major_ticks(scale, 1, 2, 30, lv.color_hex3(0xeee), 10)
+meter.set_scale_range(scale, 0, 100, 270, 90)
+
+# Add a three arc indicator
+indic1 = meter.add_arc(scale, 10, lv.palette_main(lv.PALETTE.RED), 0)
+indic2 = meter.add_arc(scale, 10, lv.palette_main(lv.PALETTE.GREEN), -10)
+indic3 = meter.add_arc(scale, 10, lv.palette_main(lv.PALETTE.BLUE), -20)
+
+# Create an animation to set the value
+a1 = lv.anim_t()
+a1.init()
+a1.set_values(0, 100)
+a1.set_time(2000)
+a1.set_repeat_delay(100)
+a1.set_playback_delay(100)
+a1.set_playback_time(500)
+a1.set_var(indic1)
+a1.set_repeat_count(lv.ANIM_REPEAT.INFINITE)
+a1.set_custom_exec_cb(lambda a,val: set_value(indic1,val))
+lv.anim_t.start(a1)
+
+a2 = lv.anim_t()
+a2.init()
+a2.set_values(0, 100)
+a2.set_time(1000)
+a2.set_repeat_delay(100)
+a2.set_playback_delay(100)
+a2.set_playback_time(1000)
+a2.set_var(indic2)
+a2.set_repeat_count(lv.ANIM_REPEAT.INFINITE)
+a2.set_custom_exec_cb(lambda a,val: set_value(indic2,val))
+lv.anim_t.start(a2)
+
+a3 = lv.anim_t()
+a3.init()
+a3.set_values(0, 100)
+a3.set_time(1000)
+a3.set_repeat_delay(100)
+a3.set_playback_delay(100)
+a3.set_playback_time(2000)
+a3.set_var(indic3)
+a3.set_repeat_count(LV_ANIM_REPEAT_INFINITE)
+a3.set_custom_exec_cb(lambda a,val: set_value(indic3,val))
+lv.anim_t.start(a3)
+
+
+
diff --git a/examples/widgets/meter/lv_example_meter_3.py b/examples/widgets/meter/lv_example_meter_3.py
new file mode 100644
index 000000000..78c188826
--- /dev/null
+++ b/examples/widgets/meter/lv_example_meter_3.py
@@ -0,0 +1,83 @@
+#!//opt/bin/lv_micropython -i
+import time
+import lvgl as lv
+import display_driver
+from imagetools import get_png_info, open_png
+
+# Register PNG image decoder
+decoder = lv.img.decoder_create()
+decoder.info_cb = get_png_info
+decoder.open_cb = open_png
+
+# Create an image from the png file
+try:
+    with open('../../assets/img_hand_min.png','rb') as f:
+        img_hand_min_data = f.read()
+except:
+    print("Could not find img_hand_min.png")
+    sys.exit()
+    
+img_hand_min_dsc = lv.img_dsc_t({
+  'data_size': len(img_hand_min_data),
+  'data': img_hand_min_data 
+})
+
+# Create an image from the png file
+try:
+    with open('../../assets/img_hand_hour.png','rb') as f:
+        img_hand_hour_data = f.read()
+except:
+    print("Could not find img_hand_hour.png")
+    sys.exit()
+    
+img_hand_hour_dsc = lv.img_dsc_t({
+  'data_size': len(img_hand_hour_data),
+  'data': img_hand_hour_data 
+})
+
+def set_value(indic, v):
+    meter.set_indicator_value(indic, v)
+#
+# A clock from a meter
+#
+
+meter = lv.meter(lv.scr_act())
+meter.set_size(220, 220)
+meter.center()
+
+# Create a scale for the minutes
+# 61 ticks in a 360 degrees range (the last and the first line overlaps)
+scale_min = meter.add_scale()
+meter.set_scale_ticks(scale_min, 61, 1, 10, lv.palette_main(lv.PALETTE.GREY))
+meter.set_scale_range(scale_min, 0, 60, 360, 270)
+
+# Create an other scale for the hours. It's only visual and contains only major ticks
+scale_hour = meter.add_scale()
+meter.set_scale_ticks(scale_hour, 12, 0, 0, lv.palette_main(lv.PALETTE.GREY))  # 12 ticks
+meter.set_scale_major_ticks(scale_hour, 1, 2, 20, lv.color_black(), 10)         # Every tick is major
+meter.set_scale_range(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
+indic_min = meter.add_needle_img(scale_min, img_hand_min_dsc, 5, 5)
+indic_hour = meter.add_needle_img(scale_min, img_hand_hour_dsc, 5, 5)
+
+# Create an animation to set the value
+a1 = lv.anim_t()
+a1.init()
+a1.set_values(0, 60)
+a1.set_repeat_count(lv.ANIM_REPEAT.INFINITE)
+a1.set_time(2000)        # 2 sec for 1 turn of the minute hand (1 hour)
+a1.set_var(indic_min)
+a1.set_custom_exec_cb(lambda a1,val: set_value(indic_min,val))
+lv.anim_t.start(a1)
+
+a2 = lv.anim_t()
+a2.init()
+a2.set_var(indic_hour)
+a2.set_time(24000)       # 24 sec for 1 turn of the hour hand
+a2.set_values(0, 60)
+a2.set_custom_exec_cb(lambda a2,val: set_value(indic_hour,val))            
+lv.anim_t.start(a2)
+
diff --git a/examples/widgets/meter/lv_example_meter_4.py b/examples/widgets/meter/lv_example_meter_4.py
new file mode 100644
index 000000000..2b4af53b8
--- /dev/null
+++ b/examples/widgets/meter/lv_example_meter_4.py
@@ -0,0 +1,32 @@
+#
+# Create a pie chart
+#
+
+meter = lv.meter(lv.scr_act())
+
+# Remove the background and the circle from the middle
+meter.remove_style(None, lv.PART.MAIN)
+meter.remove_style(None, lv.PART.INDICATOR)
+
+meter.set_size(200, 200)
+meter.center()
+
+# Add a scale first with no ticks.
+scale = meter.add_scale()
+meter.set_scale_ticks(scale, 0, 0, 0, lv.color_black())
+meter.set_scale_range(scale, 0, 100, 360, 0)
+
+# Add a three arc indicator*
+indic_w = 100
+indic1 = meter.add_arc(scale, indic_w,lv.palette_main(lv.PALETTE.ORANGE), 0)
+meter.set_indicator_start_value(indic1, 0)
+meter.set_indicator_end_value(indic1, 40)
+
+indic2 = meter.add_arc(scale, indic_w, lv.palette_main(lv.PALETTE.YELLOW), 0)
+meter.set_indicator_start_value(indic2, 40)  # Start from the previous
+meter.set_indicator_end_value(indic2, 80)
+
+indic3 = meter.add_arc(scale, indic_w, lv.palette_main(lv.PALETTE.DEEP_ORANGE), 0)
+meter_set_indicator_start_value(indic3, 80)  # Start from the previous
+meter_set_indicator_end_value(indic3, 100)
+
diff --git a/examples/widgets/msgbox/lv_example_msgbox_1.py b/examples/widgets/msgbox/lv_example_msgbox_1.py
index 31c59f534..e37452a50 100644
--- a/examples/widgets/msgbox/lv_example_msgbox_1.py
+++ b/examples/widgets/msgbox/lv_example_msgbox_1.py
@@ -1,12 +1,10 @@
-def event_handler(obj, event):
-    if event == lv.EVENT.VALUE_CHANGED:
-        print("Button: %s" % lv.mbox.get_active_btn_text(obj))
+def event_cb(e):
+    mbox = lv.msgbox.__cast__(e.get_current_target())
+    print("Button " + mbox.get_active_btn_text() + " clicked")
 
 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
\ No newline at end of file
+mbox1 = lv.msgbox(lv.scr_act(), "Hello", "This is a message box with two buttons.", btns, True)
+mbox1.add_event_cb(event_cb, lv.EVENT.VALUE_CHANGED, None)
+mbox1.center()
+
diff --git a/examples/widgets/msgbox/lv_example_msgbox_2.py b/examples/widgets/msgbox/lv_example_msgbox_2.py
deleted file mode 100644
index ed6c05335..000000000
--- a/examples/widgets/msgbox/lv_example_msgbox_2.py
+++ /dev/null
@@ -1,86 +0,0 @@
-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)
\ No newline at end of file
diff --git a/examples/widgets/obj/lv_example_obj_1.py b/examples/widgets/obj/lv_example_obj_1.py
index 3a22ab74c..f627e520b 100644
--- a/examples/widgets/obj/lv_example_obj_1.py
+++ b/examples/widgets/obj/lv_example_obj_1.py
@@ -1,20 +1,14 @@
 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)
+obj1.align(lv.ALIGN.CENTER, -60, -30)
 
 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
+style_shadow.init()
+style_shadow.set_shadow_width(10)
+style_shadow.set_shadow_spread(5)
+style_shadow.set_shadow_color(lv.palette_main(lv.PALETTE.BLUE))
+
+obj2 = lv.obj(lv.scr_act())
+obj2.add_style(style_shadow, 0)
+obj2.align(lv.ALIGN.CENTER, 60, 30)
 
-# 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)
\ No newline at end of file
diff --git a/examples/widgets/obj/lv_example_obj_2.py b/examples/widgets/obj/lv_example_obj_2.py
new file mode 100644
index 000000000..f1f3626df
--- /dev/null
+++ b/examples/widgets/obj/lv_example_obj_2.py
@@ -0,0 +1,25 @@
+def drag_event_handler(e):
+
+    obj = e.get_target()
+
+    indev = lv.indev_get_act()
+
+    vect = lv.point_t()
+    indev.get_vect(vect)
+    x = obj.get_x() + vect.x
+    y = obj.get_y() + vect.y
+    obj.set_pos(x, y)
+
+
+#
+# Make an object dragable.
+#
+
+obj = lv.obj(lv.scr_act())
+obj.set_size(150, 100)
+obj.add_event_cb(drag_event_handler, lv.EVENT.PRESSING, None)
+
+label = lv.label(obj)
+label.set_text("Drag me")
+label.center()
+
diff --git a/examples/widgets/roller/lv_example_roller_1.py b/examples/widgets/roller/lv_example_roller_1.py
index f99015778..4d1f191a4 100644
--- a/examples/widgets/roller/lv_example_roller_1.py
+++ b/examples/widgets/roller/lv_example_roller_1.py
@@ -1,24 +1,31 @@
-def event_handler(obj, event):
-    if event == lv.EVENT.VALUE_CHANGED:
+def event_handler(e):
+    code = e.get_code()
+    obj = lv.roller.__cast__(e.get_target())
+    if code == lv.EVENT.VALUE_CHANGED:
         option = " "*10
         obj.get_selected_str(option, len(option))
-        print("Selected month: %s" % option.strip())
+        print("Selected month: " + option.strip())
+
+#
+# An infinite roller with the name of the months
+#
 
 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)
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December"]),lv.roller.MODE.INFINITE)
 
 roller1.set_visible_row_count(4)
-roller1.align(None, lv.ALIGN.CENTER, 0, 0)
-roller1.set_event_cb(event_handler)
+roller1.center()
+roller1.add_event_cb(event_handler, lv.EVENT.ALL, None)
+
diff --git a/examples/widgets/roller/lv_example_roller_2.py b/examples/widgets/roller/lv_example_roller_2.py
new file mode 100644
index 000000000..a26e3eb60
--- /dev/null
+++ b/examples/widgets/roller/lv_example_roller_2.py
@@ -0,0 +1,60 @@
+import fs_driver
+
+def event_handler(e):
+    code = e.get_code()
+    obj = lv.roller.__cast__(e.get_target())
+    if code == lv.EVENT.VALUE_CHANGED: 
+        option = " "*10
+        obj.get_selected_str(option, len(option))
+        print("Selected value: %s\n" + option.strip())
+
+#
+# Roller with various alignments and larger text in the selected area
+#
+
+# A style to make the selected option larger
+style_sel =  lv.style_t()
+style_sel.init()
+
+try:
+    style_sel.set_text_font(lv.font_montserrat_22)
+except:
+    fs_drv = lv.fs_drv_t()
+    fs_driver.fs_register(fs_drv, 'S')
+    print("montserrat-22 not enabled in lv_conf.h, dynamically loading the font")
+    font_montserrat_22 = lv.font_load("S:" + "../../assets/font/montserrat-22.bin")
+    style_sel.set_text_font(font_montserrat_22)
+    
+opts = "\n".join(["1","2","3","4","5","6","7","8","9","10"])
+
+# A roller on the left with left aligned text, and custom width
+roller = lv.roller(lv.scr_act())
+roller.set_options(opts, lv.roller.MODE.NORMAL)
+roller.set_visible_row_count(2)
+roller.set_width(100)
+roller.add_style(style_sel, lv.PART.SELECTED)
+roller.set_style_text_align(lv.TEXT_ALIGN.LEFT, 0)
+roller.align(lv.ALIGN.LEFT_MID, 10, 0)
+roller.add_event_cb(event_handler, lv.EVENT.ALL, None)
+roller.set_selected(2, lv.ANIM.OFF)
+
+# A roller on the middle with center aligned text, and auto (default) width
+roller = lv.roller(lv.scr_act());
+roller.set_options(opts, lv.roller.MODE.NORMAL)
+roller.set_visible_row_count(3)
+roller.add_style(style_sel, lv.PART.SELECTED)
+roller.align(lv.ALIGN.CENTER, 0, 0)
+roller.add_event_cb(event_handler, lv.EVENT.ALL, None)
+roller.set_selected(5, lv.ANIM.OFF)
+
+# A roller on the right with right aligned text, and custom width
+roller = lv.roller(lv.scr_act());
+roller.set_options(opts, lv.roller.MODE.NORMAL)
+roller.set_visible_row_count(4)
+roller.set_width(80)
+roller.add_style(style_sel, lv.PART.SELECTED)
+roller.set_style_text_align(lv.TEXT_ALIGN.RIGHT, 0)
+roller.align(lv.ALIGN.RIGHT_MID, -10, 0)
+roller.add_event_cb(event_handler, lv.EVENT.ALL, None)
+roller.set_selected(8, lv.ANIM.OFF)
+
diff --git a/examples/widgets/roller/lv_example_roller_3.py b/examples/widgets/roller/lv_example_roller_3.py
new file mode 100644
index 000000000..6e4bef49f
--- /dev/null
+++ b/examples/widgets/roller/lv_example_roller_3.py
@@ -0,0 +1,93 @@
+#!/opt/bin/lv_micropython -i
+import time
+import lvgl as lv
+import display_driver
+import sys
+
+class Lv_Roller_3():
+
+    def __init__(self):
+        self.mask_top_id = -1
+        self.mask_bottom_id = -1
+        
+        # 
+        # Add an fade mask to roller.
+        #
+        style =  lv.style_t()
+        style.init()
+        style.set_bg_color(lv.color_black())
+        style.set_text_color(lv.color_white())
+        
+        lv.scr_act().add_style(style, 0)
+        
+        roller1 = lv.roller(lv.scr_act())
+        roller1.add_style(style, 0)
+        roller1.set_style_border_width(0, 0)
+        roller1.set_style_pad_all(0, 0)
+        roller1.set_style_bg_opa(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
+        roller1.set_options("\n".join([
+            "January",
+            "February",
+            "March",
+            "April",
+            "May",
+            "June",
+            "July",
+            "August",
+            "September",
+            "October",
+            "November",
+            "December"]),lv.roller.MODE.NORMAL)
+
+        roller1.center()
+        roller1.set_visible_row_count(3)
+        roller1.add_event_cb(self.mask_event_cb, lv.EVENT.ALL, None)
+
+    def mask_event_cb(self,e):
+
+        code = e.get_code()
+        obj = e.get_target()
+
+        if code == lv.EVENT.COVER_CHECK:
+            e.set_cover_res(lv.COVER_RES.MASKED)
+
+        elif code == lv.EVENT.DRAW_MAIN_BEGIN:
+            # add mask 
+            font = obj.get_style_text_font(lv.PART.MAIN)
+            line_space = obj.get_style_text_line_space(lv.PART.MAIN)
+            font_h = font.get_line_height()
+            
+            roller_coords = lv.area_t()
+            obj.get_coords(roller_coords)
+            
+            rect_area = lv.area_t()
+            rect_area.x1 = roller_coords.x1
+            rect_area.x2 = roller_coords.x2
+            rect_area.y1 = roller_coords.y1
+            rect_area.y2 = roller_coords.y1 + (obj.get_height() - font_h - line_space) // 2
+            
+            fade_mask_top = lv.draw_mask_fade_param_t()
+            fade_mask_top.init(rect_area, lv.OPA.TRANSP, rect_area.y1, lv.OPA.COVER, rect_area.y2)
+            self.mask_top_id = lv.draw_mask_add(fade_mask_top,None)
+            
+            rect_area.y1 = rect_area.y2 + font_h + line_space - 1
+            rect_area.y2 = roller_coords.y2
+            
+            fade_mask_bottom = lv.draw_mask_fade_param_t()
+            fade_mask_bottom.init(rect_area, lv.OPA.COVER, rect_area.y1, lv.OPA.TRANSP, rect_area.y2)
+            self.mask_bottom_id = lv.draw_mask_add(fade_mask_bottom, None)
+
+        elif code == lv.EVENT.DRAW_POST_END:
+            fade_mask_top = lv.draw_mask_remove_id(self.mask_top_id)
+            fade_mask_bottom = lv.draw_mask_remove_id(self.mask_bottom_id)
+            # Remove the masks
+            lv.draw_mask_remove_id(self.mask_top_id)
+            lv.draw_mask_remove_id(self.mask_bottom_id)
+            self.mask_top_id = -1;
+            self.mask_bottom_id = -1;        
+            
+roller3 = Lv_Roller_3()
diff --git a/examples/widgets/slider/lv_example_slider_1.py b/examples/widgets/slider/lv_example_slider_1.py
index 655fbd145..21a9925aa 100644
--- a/examples/widgets/slider/lv_example_slider_1.py
+++ b/examples/widgets/slider/lv_example_slider_1.py
@@ -1,37 +1,20 @@
-def event_handler(obj, event):
-    if event == lv.EVENT.VALUE_CHANGED:
-        print("Value: %d" % obj.get_value())
+# 
+# A default slider with a label displaying the current value
+#
+def slider_event_cb(e):
 
-# Create styles
-style_bg = lv.style_t()
-style_indic = lv.style_t()
-style_knob = lv.style_t()
+    slider = lv.slider.__cast__(e.get_target())
+    slider_label.set_text("{:d}%".format(slider.get_value()))
+    slider_label.align_to(slider, lv.ALIGN.OUT_BOTTOM_MID, 0, 10)
 
-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)
+# Create a slider in the center of the display
+slider = lv.slider(lv.scr_act())
+slider.center()
+slider.add_event_cb(slider_event_cb, lv.EVENT.VALUE_CHANGED, None)
 
-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
+# Create a label below the slider
+slider_label = lv.label(lv.scr_act())
+slider_label.set_text("0%")
 
-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
+slider_label.align_to(slider, lv.ALIGN.OUT_BOTTOM_MID, 0, 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)
\ No newline at end of file
diff --git a/examples/widgets/slider/lv_example_slider_2.py b/examples/widgets/slider/lv_example_slider_2.py
index be6c67591..d7ef96757 100644
--- a/examples/widgets/slider/lv_example_slider_2.py
+++ b/examples/widgets/slider/lv_example_slider_2.py
@@ -1,23 +1,48 @@
-def slider_event_cb(slider, event):
-    if event == lv.EVENT.VALUE_CHANGED:
-        slider_label.set_text("%u" % slider.get_value())
+#
+# Show how to style a slider.
+#
+# Create a transition
+props = [lv.STYLE.BG_COLOR, 0]
+transition_dsc = lv.style_transition_dsc_t()
+transition_dsc.init(props, lv.anim_t.path_linear, 300, 0, None)
 
-# Create a slider in the center of the display
+style_main = lv.style_t()
+style_indicator =  lv.style_t()
+style_knob = lv.style_t()
+style_pressed_color = lv.style_t()
+style_main.init()
+style_main.set_bg_opa(lv.OPA.COVER)
+style_main.set_bg_color(lv.color_hex3(0xbbb))
+style_main.set_radius(lv.RADIUS.CIRCLE)
+style_main.set_pad_ver(-2)                 # Makes the indicator larger
+
+style_indicator.init()
+style_indicator.set_bg_opa(lv.OPA.COVER)
+style_indicator.set_bg_color(lv.palette_main(lv.PALETTE.CYAN))
+style_indicator.set_radius(lv.RADIUS.CIRCLE)
+style_indicator.set_transition(transition_dsc)
+
+style_knob.init()
+style_knob.set_bg_opa(lv.OPA.COVER)
+style_knob.set_bg_color(lv.palette_main(lv.PALETTE.CYAN))
+style_knob.set_border_color(lv.palette_darken(lv.PALETTE.CYAN, 3))
+style_knob.set_border_width(2)
+style_knob.set_radius(lv.RADIUS.CIRCLE)
+style_knob.set_pad_all(6)                   # Makes the knob larger
+style_knob.set_transition(transition_dsc)
+
+style_pressed_color.init()
+style_pressed_color.set_bg_color(lv.palette_darken(lv.PALETTE.CYAN, 2))
+
+# Create a slider and add the style
 slider = lv.slider(lv.scr_act())
-slider.set_width(200)
-slider.align(None, lv.ALIGN.CENTER, 0, 0)
-slider.set_event_cb(slider_event_cb)
-slider.set_range(0, 100)
-
-# Create a label below the slider
-slider_label = lv.label(lv.scr_act())
-slider_label.set_text("0")
-slider_label.set_auto_realign(True)
-slider_label.align(slider, lv.ALIGN.OUT_BOTTOM_MID, 0, 10)
-
-# Create an informative label
-info = lv.label(lv.scr_act())
-info.set_text("""Welcome to the slider+label demo!
-Move the slider and see that the label
-updates to match it.""")
-info.align(None, lv.ALIGN.IN_TOP_LEFT, 10, 10)
+slider.remove_style_all()                   # Remove the styles coming from the theme
+
+slider.add_style(style_main, lv.PART.MAIN)
+slider.add_style(style_indicator, lv.PART.INDICATOR)
+slider.add_style(style_pressed_color, lv.PART.INDICATOR | lv.STATE.PRESSED)
+slider.add_style(style_knob, lv.PART.KNOB)
+slider.add_style(style_pressed_color, lv.PART.KNOB | lv.STATE.PRESSED)
+
+slider.center()
+
diff --git a/examples/widgets/slider/lv_example_slider_3.py b/examples/widgets/slider/lv_example_slider_3.py
new file mode 100644
index 000000000..792d72a01
--- /dev/null
+++ b/examples/widgets/slider/lv_example_slider_3.py
@@ -0,0 +1,43 @@
+def slider_event_cb(e):
+    code = e.get_code()
+    obj = lv.slider.__cast__(e.get_target())
+
+    # Provide some extra space for the value
+    if code == lv.EVENT.REFR_EXT_DRAW_SIZE:
+        e.set_ext_draw_size(50)
+        
+    elif code == lv.EVENT.DRAW_PART_END:
+        # print("DRAW_PART_END")
+        dsc = lv.obj_draw_part_dsc_t.cast(e.get_param())
+        # print(dsc)
+        if dsc.part == lv.PART.INDICATOR:
+            label_text = "{:d} - {:d}".format(obj.get_left_value(),slider.get_value())
+            label_size = lv.point_t()
+            lv.txt_get_size(label_size, label_text, lv.font_default(), 0, 0, lv.COORD.MAX, 0)
+            # print(label_size.x,label_size.y)
+            label_area = lv.area_t()
+            label_area.x1 = dsc.draw_area.x1 + dsc.draw_area.get_width() // 2 - label_size.x // 2
+            label_area.x2 = label_area.x1 + label_size.x
+            label_area.y2 = dsc.draw_area.y1 - 10
+            label_area.y1 = label_area.y2 - label_size.y
+
+            label_draw_dsc = lv.draw_label_dsc_t()
+            label_draw_dsc.init()
+
+            lv.draw_label(label_area, dsc.clip_area, label_draw_dsc, label_text, None)
+#
+# Show the current value when the slider if pressed by extending the drawer
+#
+#
+#Create a slider in the center of the display
+
+slider = lv.slider(lv.scr_act())
+slider.center()
+
+slider.set_mode(lv.slider.MODE.RANGE)
+slider.set_value(70, lv.ANIM.OFF)
+slider.set_left_value(20, lv.ANIM.OFF)
+
+slider.add_event_cb(slider_event_cb, lv.EVENT.ALL, None)
+slider.refresh_ext_draw_size()
+
diff --git a/examples/widgets/span/lv_example_span_1.py b/examples/widgets/span/lv_example_span_1.py
index e69de29bb..c479d0533 100644
--- a/examples/widgets/span/lv_example_span_1.py
+++ b/examples/widgets/span/lv_example_span_1.py
@@ -0,0 +1,53 @@
+#
+# Create span
+#
+style = lv.style_t()
+style.init()
+style.set_border_width(1)
+style.set_border_color(lv.palette_main(lv.PALETTE.ORANGE))
+style.set_pad_all(2)
+
+spans = lv.spangroup(lv.scr_act())
+spans.set_width(300)
+spans.set_height(300)
+spans.center()
+spans.add_style(style, 0)
+
+spans.set_align(lv.TEXT_ALIGN.LEFT)
+spans.set_overflow(lv.SPAN_OVERFLOW.CLIP)
+spans.set_indent(20)
+spans.set_mode(lv.SPAN_MODE.BREAK)
+
+span = spans.new_span()
+span.set_text("china is a beautiful country.")
+span.style.set_text_color(lv.palette_main(lv.PALETTE.RED))
+span.style.set_text_decor(lv.TEXT_DECOR.STRIKETHROUGH | lv.TEXT_DECOR.UNDERLINE)
+span.style.set_text_opa(lv.OPA._30)
+
+span = spans.new_span()
+span.set_text_static("good good study, day day up.");
+#if LV_FONT_MONTSERRAT_24
+#    lv_style_set_text_font(&span->style,  &lv_font_montserrat_24);
+#endif
+span.style.set_text_color(lv.palette_main(lv.PALETTE.GREEN))
+
+span = spans.new_span()
+span.set_text_static("LVGL is an open-source graphics library.")
+span.style.set_text_color(lv.palette_main(lv.PALETTE.BLUE))
+
+span = spans.new_span()
+span.set_text_static("the boy no name.")
+span.style.set_text_color(lv.palette_main(lv.PALETTE.GREEN))
+#if LV_FONT_MONTSERRAT_20
+#    lv_style_set_text_font(&span->style, &lv_font_montserrat_20);
+#endif
+span.style.set_text_decor(lv.TEXT_DECOR.UNDERLINE)
+
+span = spans.new_span()
+span.set_text("I have a dream that hope to come true.")
+
+spans.refr_mode()
+
+# lv_span_del(spans, span);
+# lv_obj_del(spans);
+
diff --git a/examples/widgets/spinbox/lv_example_spinbox_1.py b/examples/widgets/spinbox/lv_example_spinbox_1.py
index 052ab7779..fa00f9b5c 100644
--- a/examples/widgets/spinbox/lv_example_spinbox_1.py
+++ b/examples/widgets/spinbox/lv_example_spinbox_1.py
@@ -1,13 +1,30 @@
-def event_handler(obj, event):
-    if event == lv.EVENT.VALUE_CHANGED:
-        print("Value: %d" % obj.get_value())
-    elif event == lv.EVENT.CLICKED:
-        # For simple test: Click the spinbox to increment its value
-        obj.increment()
+def increment_event_cb(e):
+    code = e.get_code()
+    if code == lv.EVENT.SHORT_CLICKED or code  == lv.EVENT.LONG_PRESSED_REPEAT:
+        spinbox.increment()
+
+def decrement_event_cb(e):
+    code = e.get_code()
+    if code == lv.EVENT.SHORT_CLICKED or code == lv.EVENT.LONG_PRESSED_REPEAT:
+        spinbox.decrement()
 
 spinbox = lv.spinbox(lv.scr_act())
-spinbox.set_digit_format(5, 3)
+spinbox.set_range(-1000, 25000)
+spinbox.set_digit_format(5, 2)
 spinbox.step_prev()
 spinbox.set_width(100)
-spinbox.align(None, lv.ALIGN.CENTER, 0, 0)
-spinbox.set_event_cb(event_handler)
\ No newline at end of file
+spinbox.center()
+
+h = spinbox.get_height()
+
+btn = lv.btn(lv.scr_act())
+btn.set_size(h, h)
+btn.align_to(spinbox, lv.ALIGN.OUT_RIGHT_MID, 5, 0)
+btn.set_style_bg_img_src(lv.SYMBOL.PLUS, 0)
+btn.add_event_cb(increment_event_cb, lv.EVENT.ALL,  None)
+
+btn = lv.btn(lv.scr_act())
+btn.set_size(h, h)
+btn.align_to(spinbox, lv.ALIGN.OUT_LEFT_MID, -5, 0)
+btn.set_style_bg_img_src(lv.SYMBOL.MINUS, 0)
+btn.add_event_cb(decrement_event_cb, lv.EVENT.ALL, None)
diff --git a/examples/widgets/spinner/lv_example_spinner_1.py b/examples/widgets/spinner/lv_example_spinner_1.py
index b2e187cc0..8c342f358 100644
--- a/examples/widgets/spinner/lv_example_spinner_1.py
+++ b/examples/widgets/spinner/lv_example_spinner_1.py
@@ -1,15 +1,6 @@
-# Create a style for the Preloader
-style = lv.style_t()
-lv.style_copy(style, lv.style_plain)
-style.line.width = 10                          # 10 px thick arc
-style.line.color = lv.color_hex3(0x258)        # Blueish arc color
+# Create a spinner
+spinner = lv.spinner(lv.scr_act(), 1000, 60)
+spinner.set_size(100, 100)
+spinner.center()
 
-style.body.border.color = lv.color_hex3(0xBBB) # Gray background color
-style.body.border.width = 10
-style.body.padding.left = 0
 
-# Create a Preloader object
-preload = lv.preload(lv.scr_act())
-preload.set_size(100, 100)
-preload.align(None, lv.ALIGN.CENTER, 0, 0)
-preload.set_style(lv.preload.STYLE.MAIN, style)
\ No newline at end of file
diff --git a/examples/widgets/switch/lv_example_switch_1.py b/examples/widgets/switch/lv_example_switch_1.py
index 39fb3744d..fbb0807a3 100644
--- a/examples/widgets/switch/lv_example_switch_1.py
+++ b/examples/widgets/switch/lv_example_switch_1.py
@@ -1,48 +1,28 @@
-def event_handler(obj, event):
-    if event == lv.EVENT.VALUE_CHANGED:
-        print("State: %s" % ("On" if obj.get_state() else "Off"))
+def event_handler(e):
+    code = e.get_code()
+    obj = lv.switch.__cast__(e.get_target())
+    if code == lv.EVENT.VALUE_CHANGED:
+        if obj.has_state(lv.STATE.CHECKED):
+            print("State: on")
+        else:
+            print("State: off")
 
-# Create styles for the switch
-bg_style = lv.style_t()
-indic_style = lv.style_t()
-knob_on_style = lv.style_t()
-knob_off_style = lv.style_t()
 
-lv.style_copy(bg_style, lv.style_pretty)
-bg_style.body.radius = 800
-bg_style.body.padding.top = 6
-bg_style.body.padding.bottom = 6
+lv.scr_act().set_flex_flow(lv.FLEX_FLOW.COLUMN)
+lv.scr_act().set_flex_align(lv.FLEX_ALIGN.CENTER, lv.FLEX_ALIGN.CENTER, lv.FLEX_ALIGN.CENTER)
 
-lv.style_copy(indic_style, lv.style_pretty_color)
-indic_style.body.radius = 800
-indic_style.body.main_color = lv.color_hex(0x9fc8ef)
-indic_style.body.grad_color = lv.color_hex(0x9fc8ef)
-indic_style.body.padding.left = 0
-indic_style.body.padding.right = 0
-indic_style.body.padding.top = 0
-indic_style.body.padding.bottom = 0
+sw = lv.switch(lv.scr_act())
+sw.add_event_cb(event_handler,lv.EVENT.ALL, None)
 
-lv.style_copy(knob_off_style, lv.style_pretty)
-knob_off_style.body.radius = 800
-knob_off_style.body.shadow.width = 4
-knob_off_style.body.shadow.type = lv.SHADOW.BOTTOM
+sw = lv.switch(lv.scr_act())
+sw.add_state(lv.STATE.CHECKED)
+sw.add_event_cb(event_handler, lv.EVENT.ALL, None)
 
-lv.style_copy(knob_on_style, lv.style_pretty_color)
-knob_on_style.body.radius = 800
-knob_on_style.body.shadow.width = 4
-knob_on_style.body.shadow.type = lv.SHADOW.BOTTOM
+sw = lv.switch(lv.scr_act())
+sw.add_state(lv.STATE.DISABLED)
+sw.add_event_cb(event_handler, lv.EVENT.ALL, None)
 
-# Create a switch and apply the styles
-sw1 = lv.sw(lv.scr_act())
-sw1.set_style(lv.sw.STYLE.BG, bg_style)
-sw1.set_style(lv.sw.STYLE.INDIC, indic_style)
-sw1.set_style(lv.sw.STYLE.KNOB_ON, knob_on_style)
-sw1.set_style(lv.sw.STYLE.KNOB_OFF, knob_off_style)
-sw1.align(None, lv.ALIGN.CENTER, 0, -50)
-sw1.set_event_cb(event_handler)
+sw = lv.switch(lv.scr_act())
+sw.add_state(STATE.CHECKED | lv.STATE.DISABLED)
+sw.add_event_cb(event_handler, lv.EVENT.ALL, None)
 
-# Copy the first switch and turn it ON
-sw2 = lv.sw(lv.scr_act(), sw1)
-sw2.on(lv.ANIM.ON)
-sw2.align(None, lv.ALIGN.CENTER, 0, 50)
-sw2.set_event_cb(lambda o,e: None)
\ No newline at end of file
diff --git a/examples/widgets/table/lv_example_table_1.py b/examples/widgets/table/lv_example_table_1.py
index e0959943f..e035168cd 100644
--- a/examples/widgets/table/lv_example_table_1.py
+++ b/examples/widgets/table/lv_example_table_1.py
@@ -1,41 +1,53 @@
-# Create a normal cell style
-style_cell1 = lv.style_t()
-lv.style_copy(style_cell1, lv.style_plain)
-style_cell1.body.border.width = 1
-style_cell1.body.border.color = lv.color_make(0,0,0)
-
-# Crealte a header cell style
-style_cell2 = lv.style_t()
-lv.style_copy(style_cell2, lv.style_plain)
-style_cell2.body.border.width = 1
-style_cell2.body.border.color = lv.color_make(0,0,0)
-style_cell2.body.main_color = lv.color_make(0xC0, 0xC0, 0xC0)
-style_cell2.body.grad_color = lv.color_make(0xC0, 0xC0, 0xC0)
+def draw_part_event_cb(e):
+    obj = lv.table.__cast__(e.get_target())
+    dsc = lv.obj_draw_part_dsc_t.cast(e.get_param())
+    # If the cells are drawn../
+    if dsc.part == lv.PART.ITEMS:
+        row = dsc.id //  obj.get_col_cnt()
+        col = dsc.id - row * obj.get_col_cnt()
 
-table = lv.table(lv.scr_act())
-table.set_style(lv.table.STYLE.CELL1, style_cell1)
-table.set_style(lv.table.STYLE.CELL2, style_cell2)
-table.set_style(lv.table.STYLE.BG, lv.style_transp_tight)
-table.set_col_cnt(2)
-table.set_row_cnt(4)
-table.align(None, lv.ALIGN.CENTER, 0, 0)
+    # Make the texts in the first cell center aligned
+    if row == 0:
+        dsc.label_dsc.align = lv.TEXT_ALIGN.CENTER
+        dsc.rect_dsc.bg_color = lv.palette_main(lv.PALETTE.BLUE).color_mix(dsc.rect_dsc.bg_color, lv.OPA._20)
+        dsc.rect_dsc.bg_opa = lv.OPA.COVER
+
+    # In the first column align the texts to the right
+    elif col == 0:
+        dsc.label_dsc.flag = lv.TEXT_ALIGN.RIGHT
 
-# Make the cells of the first row center aligned
-table.set_cell_align(0, 0, lv.label.ALIGN.CENTER)
-table.set_cell_align(0, 1, lv.label.ALIGN.CENTER)
+    # Make every 2nd row grayish
+    if row != 0 and (row % 2) == 0:
+        dsc.rect_dsc.bg_color = lv.palette_main(lv.PALETTE.GREY).color_mix(dsc.rect_dsc.bg_color, lv.OPA._10)
+        dsc.rect_dsc.bg_opa = lv.OPA.COVER
 
-# Make the cells of the first row TYPE = 2 (use `style_cell2`)
-table.set_cell_type(0, 0, 2)
-table.set_cell_type(0, 1, 2)
+
+table = lv.table(lv.scr_act())
 
 # Fill the first column
-table.set_cell_value(0, 0, "Name")
-table.set_cell_value(1, 0, "Apple")
-table.set_cell_value(2, 0, "Banana")
-table.set_cell_value(3, 0, "Citron")
+table.set_cell_value(0, 0, "Name");
+table.set_cell_value(1, 0, "Apple");
+table.set_cell_value(2, 0, "Banana");
+table.set_cell_value(3, 0, "Lemon");
+table.set_cell_value(4, 0, "Grape");
+table.set_cell_value(5, 0, "Melon");
+table.set_cell_value(6, 0, "Peach");
+table.set_cell_value(7, 0, "Nuts");
 
 # Fill the second column
-table.set_cell_value(0, 1, "Price")
-table.set_cell_value(1, 1, "$7")
-table.set_cell_value(2, 1, "$4")
-table.set_cell_value(3, 1, "$6")
\ No newline at end of file
+table.set_cell_value(0, 1, "Price");
+table.set_cell_value(1, 1, "$7");
+table.set_cell_value(2, 1, "$4");
+table.set_cell_value(3, 1, "$6");
+table.set_cell_value(4, 1, "$2");
+table.set_cell_value(5, 1, "$5");
+table.set_cell_value(6, 1, "$1");
+table.set_cell_value(7, 1, "$9");
+
+# Set a smaller height to the table. It'll make it scrollable
+table.set_height(200)
+table.center()
+
+# Add an event callback to to apply some custom drawing
+table.add_event_cb(draw_part_event_cb, lv.EVENT.DRAW_PART_BEGIN, None)
+
diff --git a/examples/widgets/table/lv_example_table_2.py b/examples/widgets/table/lv_example_table_2.py
new file mode 100644
index 000000000..4eb6abe99
--- /dev/null
+++ b/examples/widgets/table/lv_example_table_2.py
@@ -0,0 +1,96 @@
+from utime import ticks_ms
+import gc
+
+ITEM_CNT = 200
+
+def draw_event_cb(e):
+    obj = lv.table.__cast__(e.get_target())
+    dsc = lv.obj_draw_part_dsc_t.cast(e.get_param())
+    # If the cells are drawn...
+    if dsc.part == lv.PART.ITEMS:
+        chk = obj.has_cell_ctrl(dsc.id, 0, lv.table.CELL_CTRL.CUSTOM_1)
+
+        rect_dsc = lv.draw_rect_dsc_t()
+        rect_dsc.init()
+
+        if chk:
+            rect_dsc.bg_color = lv.theme_get_color_primary(obj)
+        else:
+            rect_dsc.bg_color = lv.palette_lighten(lv.PALETTE.GREY,2)
+            
+        rect_dsc.radius = lv.RADIUS.CIRCLE
+
+        sw_area = lv.area_t()
+        sw_area.x1 = dsc.draw_area.x2 - 50;
+        sw_area.x2 = sw_area.x1 + 40;
+        sw_area.y1 =  dsc.draw_area.y1 + dsc.draw_area.get_height() // 2 - 10
+        sw_area.y2 = sw_area.y1 + 20;
+        lv.draw_rect(sw_area, dsc.clip_area, rect_dsc)
+         
+        rect_dsc.bg_color = lv.color_white()
+        
+        if chk:
+            sw_area.x2 -= 2
+            sw_area.x1 = sw_area.x2 - 16
+        else:
+            sw_area.x1 += 2
+            sw_area.x2 = sw_area.x1 + 16
+        sw_area.y1 += 2;
+        sw_area.y2 -= 2;
+        lv.draw_rect(sw_area, dsc.clip_area, rect_dsc)
+
+def change_event_cb(e):
+    obj = lv.table.__cast__(e.get_target())
+    row = lv.C_Pointer()
+    col = lv.C_Pointer()
+    table.get_selected_cell(row, col)
+    # print("row: ",row.uint_val)
+
+    chk = table.has_cell_ctrl(row.uint_val, 0, lv.table.CELL_CTRL.CUSTOM_1)
+    if chk:
+        table.clear_cell_ctrl(row.uint_val, 0, lv.table.CELL_CTRL.CUSTOM_1)
+    else:
+        table.add_cell_ctrl(row.uint_val, 0, lv.table.CELL_CTRL.CUSTOM_1)
+
+#
+# A very light-weighted list created from table
+#
+
+# Measure memory usage
+gc.enable()
+gc.collect()
+mem_free = gc.mem_free()
+print("mem_free: ",mem_free)
+t = ticks_ms()
+print("ticks: ", t)
+table = lv.table(lv.scr_act())
+
+# Set a smaller height to the table. It'll make it scrollable
+table.set_size(150, 200)
+
+table.set_col_width(0, 150)
+table.set_row_cnt(ITEM_CNT)  # Not required but avoids a lot of memory reallocation lv_table_set_set_value
+table.set_col_cnt(1)
+
+# Don't make the cell pressed, we will draw something different in the event
+table.remove_style(None, lv.PART.ITEMS | lv.STATE.PRESSED)
+
+for i in range(ITEM_CNT):
+    table.set_cell_value(i, 0, "Item " + str(i+1))
+
+table.align(lv.ALIGN.CENTER, 0, -20);
+
+# Add an event callback to to apply some custom drawing
+table.add_event_cb(draw_event_cb, lv.EVENT.DRAW_PART_END, None)
+table.add_event_cb(change_event_cb, lv.EVENT.VALUE_CHANGED, None)
+
+gc.collect()
+mem_used = mem_free - gc.mem_free()
+elaps = ticks_ms()-t
+
+label = lv.label(lv.scr_act())
+label.set_text(str(ITEM_CNT) + " items were created in " + str(elaps) + " ms\n using " + str(mem_used) + " bytes of memory")
+#label.set_text(str(ITEM_CNT) + " items were created in " + str(elaps) + " ms")
+
+label.align(lv.ALIGN.BOTTOM_MID, 0, -10)
+
diff --git a/examples/widgets/tabview/lv_example_tabview_1.py b/examples/widgets/tabview/lv_example_tabview_1.py
index 5dc302517..d5e219a7f 100644
--- a/examples/widgets/tabview/lv_example_tabview_1.py
+++ b/examples/widgets/tabview/lv_example_tabview_1.py
@@ -1,5 +1,5 @@
 # Create a Tab view object
-tabview = lv.tabview(lv.scr_act())
+tabview = lv.tabview(lv.scr_act(), lv.DIR.TOP, 50)
 
 # Add 3 tabs (the tabs are page (lv_page) and can be scrolled
 tab1 = tabview.add_tab("Tab 1")
@@ -12,14 +12,24 @@ label.set_text("""This the first tab
 
 If the content
 of a tab
-become too long
-the it 
+becomes too
+longer
+than the
+container
+then it
 automatically
-become
-scrollable.""")
+becomes
+scrollable.
+
+
+
+Can you see it?""")
 
 label = lv.label(tab2)
 label.set_text("Second tab")
 
 label = lv.label(tab3)
-label.set_text("Third tab")
\ No newline at end of file
+label.set_text("Third tab");
+
+label.scroll_to_view_recursive(lv.ANIM.ON)
+
diff --git a/examples/widgets/textarea/lv_example_textarea_1.py b/examples/widgets/textarea/lv_example_textarea_1.py
index 079b7f973..f06435e4e 100644
--- a/examples/widgets/textarea/lv_example_textarea_1.py
+++ b/examples/widgets/textarea/lv_example_textarea_1.py
@@ -1,13 +1,32 @@
-def event_handler(obj, event):
-    if event == lv.EVENT.VALUE_CHANGED:
-        print("Value: %s" % obj.get_text())
-    elif event == lv.EVENT.LONG_PRESSED_REPEAT:
-        # For simple test: Long press the Text are to add the text below
-        ta1.add_text("\n\nYou can scroll it if the text is long enough.\n")
-
-ta1 = lv.ta(lv.scr_act())
-ta1.set_size(200, 100)
-ta1.align(None, lv.ALIGN.CENTER, 0, 0)
-ta1.set_cursor_type(lv.CURSOR.BLOCK)
-ta1.set_text("A text in a Text Area")     # Set an initial text
-ta1.set_event_cb(event_handler)
\ No newline at end of file
+def textarea_event_handler(e,ta):
+    print("Enter was pressed. The current text is: " + ta.get_text())
+    
+def btnm_event_handler(e,ta):
+
+    obj = lv.btnmatrix.__cast__(e.get_target())
+    txt = obj.get_btn_text(obj.get_selected_btn())
+    if txt == lv.SYMBOL.BACKSPACE:
+        ta.del_char()
+    elif txt == lv.SYMBOL.NEW_LINE:
+        lv.event_send(ta,lv.EVENT.READY,None)
+    else:
+        ta.add_text(txt)
+
+ta = lv.textarea(lv.scr_act())
+ta.set_one_line(True)
+ta.align(lv.ALIGN.TOP_MID, 0, 10)
+ta.add_event_cb(lambda e: textarea_event_handler(e,ta), lv.EVENT.READY, None)
+ta.add_state(lv.STATE.FOCUSED)   # To be sure the cursor is visible
+
+btnm_map = ["1", "2", "3", "\n",
+            "4", "5", "6", "\n",
+            "7", "8", "9", "\n",
+            lv.SYMBOL.BACKSPACE, "0", lv.SYMBOL.NEW_LINE, ""]
+         
+btnm = lv.btnmatrix(lv.scr_act())
+btnm.set_size(200, 150)
+btnm.align(lv.ALIGN.BOTTOM_MID, 0, -10)
+btnm.add_event_cb(lambda e: btnm_event_handler(e,ta), lv.EVENT.VALUE_CHANGED, None)
+btnm.clear_flag(lv.obj.FLAG.CLICK_FOCUSABLE)    # To keep the text area focused on button clicks
+btnm.set_map(btnm_map)
+
diff --git a/examples/widgets/textarea/lv_example_textarea_2.py b/examples/widgets/textarea/lv_example_textarea_2.py
index 554f87f15..44bfee59d 100644
--- a/examples/widgets/textarea/lv_example_textarea_2.py
+++ b/examples/widgets/textarea/lv_example_textarea_2.py
@@ -1,51 +1,49 @@
-HOR_RES = lv.disp_get_hor_res(lv.disp_get_default())
-
-def kb_event_cb(event_kb, event):
-    # Just call the regular event handler
-    event_kb.def_event_cb(event)
-
-def ta_event_cb(ta, event):
-    if event == lv.EVENT.INSERT:
-        # get inserted value
-        ptr = lv.C_Pointer()
-        ptr.ptr_val = lv.event_get_data()
-        if ptr.str_val == "\n":
-            print("Ready")
-    elif event == lv.EVENT.CLICKED:
+def ta_event_cb(e):
+    code = e.get_code()
+    ta = lv.textarea.__cast__(e.get_target())
+    if code == lv.EVENT.CLICKED or code == lv.EVENT.FOCUSED:
         # Focus on the clicked text area
-        kb.set_ta(ta)
+        if kb != None:
+            kb.set_textarea(ta)
+
+    elif code == lv.EVENT.READY:
+        print("Ready, current text: " + ta.get_text())
+
 
 # Create the password box
-pwd_ta = lv.ta(lv.scr_act())
-pwd_ta.set_text("");
-pwd_ta.set_pwd_mode(True)
+LV_HOR_RES = lv.scr_act().get_disp().driver.hor_res
+LV_VER_RES = lv.scr_act().get_disp().driver.ver_res
+
+pwd_ta = lv.textarea(lv.scr_act())
+pwd_ta.set_text("")
+pwd_ta.set_password_mode(True)
 pwd_ta.set_one_line(True)
-pwd_ta.set_width(HOR_RES // 2 - 20)
+pwd_ta.set_width(LV_HOR_RES // 2 - 20)
 pwd_ta.set_pos(5, 20)
-pwd_ta.set_event_cb(ta_event_cb)
+pwd_ta.add_event_cb(ta_event_cb, lv.EVENT.ALL, None)
 
 # Create a label and position it above the text box
 pwd_label = lv.label(lv.scr_act())
 pwd_label.set_text("Password:")
-pwd_label.align(pwd_ta, lv.ALIGN.OUT_TOP_LEFT, 0, 0)
+pwd_label.align_to(pwd_ta, lv.ALIGN.OUT_TOP_LEFT, 0, 0)
 
 # Create the one-line mode text area
-oneline_ta = lv.ta(lv.scr_act(), pwd_ta)
-oneline_ta.set_pwd_mode(False)
-oneline_ta.set_cursor_type(lv.CURSOR.LINE | lv.CURSOR.HIDDEN)
-oneline_ta.align(None, lv.ALIGN.IN_TOP_RIGHT, -5, 20)
-oneline_ta.set_event_cb(ta_event_cb)
+text_ta = lv.textarea(lv.scr_act())
+text_ta.set_width(LV_HOR_RES // 2 - 20)
+text_ta.set_one_line(True)
+text_ta.add_event_cb(ta_event_cb, lv.EVENT.ALL, None)
+text_ta.set_password_mode(False)
+
+text_ta.align(lv.ALIGN.TOP_RIGHT, -5, 20)
 
 # Create a label and position it above the text box
 oneline_label = lv.label(lv.scr_act())
 oneline_label.set_text("Text:")
-oneline_label.align(oneline_ta, lv.ALIGN.OUT_TOP_LEFT, 0, 0)
+oneline_label.align_to(text_ta, lv.ALIGN.OUT_TOP_LEFT, 0, 0)
+
+# Create a keyboard
+kb = lv.keyboard(lv.scr_act())
+kb.set_size(LV_HOR_RES, LV_VER_RES // 2)
 
-# Create a keyboard and make it fill the width of the above text areas
-kb = lv.kb(lv.scr_act())
-kb.set_pos(5, 90)
-kb.set_event_cb(kb_event_cb) # Setting a custom event handler stops the keyboard from closing automatically
-kb.set_size(HOR_RES - 10, 140)
+kb.set_textarea(pwd_ta)  # Focus it on one of the text areas to start
 
-kb.set_ta(pwd_ta) # Focus it on one of the text areas to start
-kb.set_cursor_manage(True) # Automatically show/hide cursors on text areas
\ No newline at end of file
diff --git a/examples/widgets/textarea/lv_example_textarea_3.py b/examples/widgets/textarea/lv_example_textarea_3.py
new file mode 100644
index 000000000..13cfa169f
--- /dev/null
+++ b/examples/widgets/textarea/lv_example_textarea_3.py
@@ -0,0 +1,50 @@
+def ta_event_cb(e):
+    ta = lv.textarea.__cast__(e.get_target())
+    txt = ta.get_text()
+    # print(txt)
+    pos = ta.get_cursor_pos()
+    # print("cursor pos: ",pos)
+    # find position of ":" in text
+    colon_pos= txt.find(":")
+    # if there are more than 2 digits before the colon, remove the last one entered
+    if colon_pos == 3:
+        ta.del_char()
+    if colon_pos != -1:
+        # if there are more than 3 digits after the ":" remove the last one entered
+        rest = txt[colon_pos:]
+        if len(rest) > 3:
+            ta.del_char()
+            
+    if len(txt) < 2:
+        return
+    if ":" in txt:
+        return
+    if  txt[0] >= '0' and txt[0] <= '9' and \
+        txt[1] >= '0' and txt[1] <= '9':
+        if len(txt) == 2 or txt[2] != ':' :
+            ta.set_cursor_pos(2)
+            ta.add_char(ord(':'))
+#
+# Automatically format text like a clock. E.g. "12:34"
+# Add the ':' automatically
+#
+# Create the text area
+
+LV_HOR_RES = lv.scr_act().get_disp().driver.hor_res
+LV_VER_RES = lv.scr_act().get_disp().driver.ver_res
+
+ta = lv.textarea(lv.scr_act())
+ta.add_event_cb(ta_event_cb, lv.EVENT.VALUE_CHANGED, None)
+ta.set_accepted_chars("0123456789:")
+ta.set_max_length(5)
+ta.set_one_line(True)
+ta.set_text("")
+ta.add_state(lv.STATE.FOCUSED)
+
+# Create a keyboard
+kb = lv.keyboard(lv.scr_act())
+kb.set_size(LV_HOR_RES, LV_VER_RES // 2)
+kb.set_mode(lv.keyboard.MODE.NUMBER)
+kb.set_textarea(ta)
+
+
diff --git a/examples/widgets/tileview/lv_example_tileview_1.py b/examples/widgets/tileview/lv_example_tileview_1.py
index 520490814..cf1767c9b 100644
--- a/examples/widgets/tileview/lv_example_tileview_1.py
+++ b/examples/widgets/tileview/lv_example_tileview_1.py
@@ -1,62 +1,40 @@
-valid_pos = [{"x":0, "y": 0}, {"x": 0, "y": 1}, {"x": 1,"y": 1}]
-
-# resolution of the screen
-HOR_RES = lv.disp_get_hor_res(lv.disp_get_default())
-VER_RES = lv.disp_get_ver_res(lv.disp_get_default())
-
-tileview = lv.tileview(lv.scr_act())
-tileview.set_valid_positions(valid_pos, len(valid_pos))
-tileview.set_edge_flash(True)
-
-tile1 = lv.obj(tileview)
-tile1.set_size(HOR_RES, VER_RES)
-tile1.set_style(lv.style_pretty)
-tileview.add_element(tile1)
+#
+# Create a 2x2 tile view and allow scrolling only in an "L" shape.
+# Demonstrate scroll chaining with a long list that
+# scrolls the tile view when it cant't be scrolled further.
+#
+tv = lv.tileview(lv.scr_act())
 
 # Tile1: just a label
+tile1 = tv.add_tile(0, 0, lv.DIR.BOTTOM)
 label = lv.label(tile1)
-label.set_text("Tile 1")
-label.align(None, lv.ALIGN.CENTER, 0, 0)
-
-# Tile2: a list
-lst = lv.list(tileview)
-lst.set_size(HOR_RES, VER_RES)
-lst.set_pos(0, VER_RES)
-lst.set_scroll_propagation(True)
-lst.set_sb_mode(lv.SB_MODE.OFF)
-tileview.add_element(lst)
-
-list_btn = lst.add_btn(None, "One")
-tileview.add_element(list_btn)
-
-list_btn = lst.add_btn(None, "Two")
-tileview.add_element(list_btn)
-
-list_btn = lst.add_btn(None, "Three")
-tileview.add_element(list_btn)
+label.set_text("Scroll down")
+label.center()
 
-list_btn = lst.add_btn(None, "Four")
-tileview.add_element(list_btn)
+# Tile2: a button
+tile2 = tv.add_tile(0, 1, lv.DIR.TOP | lv.DIR.RIGHT)
 
-list_btn = lst.add_btn(None, "Five")
-tileview.add_element(list_btn)
-
-list_btn = lst.add_btn(None, "Six")
-tileview.add_element(list_btn)
-
-list_btn = lst.add_btn(None, "Seven")
-tileview.add_element(list_btn)
-
-list_btn = lst.add_btn(None, "Eight")
-tileview.add_element(list_btn)
-
-# Tile3: a button
-tile3 = lv.obj(tileview, tile1)
-tile3.set_pos(HOR_RES, VER_RES)
-tileview.add_element(tile3)
-
-btn = lv.btn(tile3)
-btn.align(None, lv.ALIGN.CENTER, 0, 0)
+btn = lv.btn(tile2)
 
 label = lv.label(btn)
-label.set_text("Button")
\ No newline at end of file
+label.set_text("Scroll up or right")
+
+btn.set_size(lv.SIZE.CONTENT, lv.SIZE.CONTENT)
+btn.center()
+
+# Tile3: a list
+tile3 =  tv.add_tile(1, 1, lv.DIR.LEFT)
+list = lv.list(tile3)
+list.set_size(lv.pct(100), lv.pct(100))
+
+list.add_btn(None, "One")
+list.add_btn(None, "Two")
+list.add_btn(None, "Three")
+list.add_btn(None, "Four")
+list.add_btn(None, "Five")
+list.add_btn(None, "Six")
+list.add_btn(None, "Seven")
+list.add_btn(None, "Eight")
+list.add_btn(None, "Nine")
+list.add_btn(None, "Ten")
+
diff --git a/examples/widgets/win/lv_example_win_1.py b/examples/widgets/win/lv_example_win_1.py
new file mode 100644
index 000000000..aac716b9e
--- /dev/null
+++ b/examples/widgets/win/lv_example_win_1.py
@@ -0,0 +1,36 @@
+def event_handler(e):
+    code = e.get_code()
+    obj = lv.obj.__cast__(e.get_target())
+    if code == lv.EVENT.CLICKED:
+        print("Button {:d} clicked".format(obj.get_child_id()))
+
+win = lv.win(lv.scr_act(), 60)
+btn1 = win.add_btn(lv.SYMBOL.LEFT, 40)
+btn1.add_event_cb(event_handler,lv.EVENT.ALL, None)
+win.add_title("A title")
+btn2=win.add_btn(lv.SYMBOL.RIGHT, 40)
+btn2.add_event_cb(event_handler,lv.EVENT.ALL, None)
+btn3 = win.add_btn(lv.SYMBOL.CLOSE, 60)
+btn3.add_event_cb(event_handler,lv.EVENT.ALL, None)
+
+cont = win.get_content()  #Content can be aded here
+label =  lv.label(cont)
+label.set_text("""This is
+a pretty
+long text
+to see how
+the window
+becomes
+scrollable.
+
+
+We need
+quite some text
+and we will 
+even put
+some more
+text to be
+sure it
+overflows.
+""")
+