convert lvgl from submodule to a plain old directory

30 files changed, 1086 insertions, 0 deletions

diff --git a/lib/lvgl b/lib/lvgl
deleted file mode 160000
-Subproject 0732400e7b564dd0e7dc4a924619d8e19c5b23a
diff --git a/lib/lvgl/examples/layouts/flex/index.rst b/lib/lvgl/examples/layouts/flex/index.rst
new file mode 100644
index 00000000..2ff931c0
--- /dev/null
+++ b/lib/lvgl/examples/layouts/flex/index.rst
@@ -0,0 +1,37 @@
+A simple row and a column layout with flexbox
+"""""""""""""""""""""""""""""""""""""""""""""""
+
+.. lv_example:: layouts/flex/lv_example_flex_1
+  :language: c
+
+Arrange items in rows with wrap and even spacing
+"""""""""""""""""""""""""""""""""""""""""""""""""
+
+.. lv_example:: layouts/flex/lv_example_flex_2
+  :language: c
+
+Demonstrate flex grow
+"""""""""""""""""""""""
+
+.. lv_example:: layouts/flex/lv_example_flex_3
+  :language: c
+
+Demonstrate flex grow.
+"""""""""""""""""""""""
+
+.. lv_example:: layouts/flex/lv_example_flex_4
+  :language: c
+
+Demonstrate column and row gap style properties
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+
+.. lv_example:: layouts/flex/lv_example_flex_5
+  :language: c
+
+RTL base direction changes order of the items
+"""""""""""""""""""""""""""""""""""""""""""""""
+
+.. lv_example:: layouts/flex/lv_example_flex_6
+  :language: c
+
+
diff --git a/lib/lvgl/examples/layouts/flex/lv_example_flex.h b/lib/lvgl/examples/layouts/flex/lv_example_flex.h
new file mode 100644
index 00000000..10fabbdc
--- /dev/null
+++ b/lib/lvgl/examples/layouts/flex/lv_example_flex.h
@@ -0,0 +1,43 @@
+/**
+ * @file lv_example_flex.h
+ *
+ */
+
+#ifndef LV_EXAMPLE_FLEX_H
+#define LV_EXAMPLE_FLEX_H
+
+#ifdef __cplusplus
+extern "C" {
+#endif
+
+/*********************
+ *      INCLUDES
+ *********************/
+
+/*********************
+ *      DEFINES
+ *********************/
+
+/**********************
+ *      TYPEDEFS
+ **********************/
+
+/**********************
+ * GLOBAL PROTOTYPES
+ **********************/
+void lv_example_flex_1(void);
+void lv_example_flex_2(void);
+void lv_example_flex_3(void);
+void lv_example_flex_4(void);
+void lv_example_flex_5(void);
+void lv_example_flex_6(void);
+
+/**********************
+ *      MACROS
+ **********************/
+
+#ifdef __cplusplus
+} /*extern "C"*/
+#endif
+
+#endif /*LV_EXAMPLE_FLEX_H*/
diff --git a/lib/lvgl/examples/layouts/flex/lv_example_flex_1.c b/lib/lvgl/examples/layouts/flex/lv_example_flex_1.c
new file mode 100644
index 00000000..6363d37e
--- /dev/null
+++ b/lib/lvgl/examples/layouts/flex/lv_example_flex_1.c
@@ -0,0 +1,44 @@
+#include "../../lv_examples.h"
+#if LV_USE_FLEX && LV_BUILD_EXAMPLES
+
+/**
+ * A simple row and a column layout with flexbox
+ */
+void lv_example_flex_1(void)
+{
+    /*Create a container with ROW flex direction*/
+    lv_obj_t * cont_row = lv_obj_create(lv_scr_act());
+    lv_obj_set_size(cont_row, 300, 75);
+    lv_obj_align(cont_row, LV_ALIGN_TOP_MID, 0, 5);
+    lv_obj_set_flex_flow(cont_row, LV_FLEX_FLOW_ROW);
+
+    /*Create a container with COLUMN flex direction*/
+    lv_obj_t * cont_col = lv_obj_create(lv_scr_act());
+    lv_obj_set_size(cont_col, 200, 150);
+    lv_obj_align_to(cont_col, cont_row, LV_ALIGN_OUT_BOTTOM_MID, 0, 5);
+    lv_obj_set_flex_flow(cont_col, LV_FLEX_FLOW_COLUMN);
+
+    uint32_t i;
+    for(i = 0; i < 10; i++) {
+        lv_obj_t * obj;
+        lv_obj_t * label;
+
+        /*Add items to the row*/
+        obj = lv_btn_create(cont_row);
+        lv_obj_set_size(obj, 100, LV_PCT(100));
+
+        label = lv_label_create(obj);
+        lv_label_set_text_fmt(label, "Item: %u", i);
+        lv_obj_center(label);
+
+        /*Add items to the column*/
+        obj = lv_btn_create(cont_col);
+        lv_obj_set_size(obj, LV_PCT(100), LV_SIZE_CONTENT);
+
+        label = lv_label_create(obj);
+        lv_label_set_text_fmt(label, "Item: %"LV_PRIu32, i);
+        lv_obj_center(label);
+    }
+}
+
+#endif
diff --git a/lib/lvgl/examples/layouts/flex/lv_example_flex_1.py b/lib/lvgl/examples/layouts/flex/lv_example_flex_1.py
new file mode 100644
index 00000000..8dc23851
--- /dev/null
+++ b/lib/lvgl/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/lib/lvgl/examples/layouts/flex/lv_example_flex_2.c b/lib/lvgl/examples/layouts/flex/lv_example_flex_2.c
new file mode 100644
index 00000000..dc60744b
--- /dev/null
+++ b/lib/lvgl/examples/layouts/flex/lv_example_flex_2.c
@@ -0,0 +1,32 @@
+#include "../../lv_examples.h"
+#if LV_USE_FLEX && LV_BUILD_EXAMPLES
+
+/**
+ * Arrange items in rows with wrap and place the items to get even space around them.
+ */
+void lv_example_flex_2(void)
+{
+    static lv_style_t style;
+    lv_style_init(&style);
+    lv_style_set_flex_flow(&style, LV_FLEX_FLOW_ROW_WRAP);
+    lv_style_set_flex_main_place(&style, LV_FLEX_ALIGN_SPACE_EVENLY);
+    lv_style_set_layout(&style, LV_LAYOUT_FLEX);
+
+    lv_obj_t * cont = lv_obj_create(lv_scr_act());
+    lv_obj_set_size(cont, 300, 220);
+    lv_obj_center(cont);
+    lv_obj_add_style(cont, &style, 0);
+
+    uint32_t i;
+    for(i = 0; i < 8; i++) {
+        lv_obj_t * obj = lv_obj_create(cont);
+        lv_obj_set_size(obj, 70, LV_SIZE_CONTENT);
+        lv_obj_add_flag(obj, LV_OBJ_FLAG_CHECKABLE);
+
+        lv_obj_t * label = lv_label_create(obj);
+        lv_label_set_text_fmt(label, "%"LV_PRIu32, i);
+        lv_obj_center(label);
+    }
+}
+
+#endif
diff --git a/lib/lvgl/examples/layouts/flex/lv_example_flex_2.py b/lib/lvgl/examples/layouts/flex/lv_example_flex_2.py
new file mode 100644
index 00000000..7a8012c1
--- /dev/null
+++ b/lib/lvgl/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/lib/lvgl/examples/layouts/flex/lv_example_flex_3.c b/lib/lvgl/examples/layouts/flex/lv_example_flex_3.c
new file mode 100644
index 00000000..65e0f8a3
--- /dev/null
+++ b/lib/lvgl/examples/layouts/flex/lv_example_flex_3.c
@@ -0,0 +1,30 @@
+#include "../../lv_examples.h"
+#if LV_USE_FLEX && LV_BUILD_EXAMPLES
+
+/**
+ * Demonstrate flex grow.
+ */
+void lv_example_flex_3(void)
+{
+    lv_obj_t * cont = lv_obj_create(lv_scr_act());
+    lv_obj_set_size(cont, 300, 220);
+    lv_obj_center(cont);
+    lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW);
+
+    lv_obj_t * obj;
+    obj = lv_obj_create(cont);
+    lv_obj_set_size(obj, 40, 40);           /*Fix size*/
+
+    obj = lv_obj_create(cont);
+    lv_obj_set_height(obj, 40);
+    lv_obj_set_flex_grow(obj, 1);           /*1 portion from the free space*/
+
+    obj = lv_obj_create(cont);
+    lv_obj_set_height(obj, 40);
+    lv_obj_set_flex_grow(obj, 2);           /*2 portion from the free space*/
+
+    obj = lv_obj_create(cont);
+    lv_obj_set_size(obj, 40, 40);           /*Fix size. It is flushed to the right by the "grow" items*/
+}
+
+#endif
diff --git a/lib/lvgl/examples/layouts/flex/lv_example_flex_3.py b/lib/lvgl/examples/layouts/flex/lv_example_flex_3.py
new file mode 100644
index 00000000..fb60ce91
--- /dev/null
+++ b/lib/lvgl/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/lib/lvgl/examples/layouts/flex/lv_example_flex_4.c b/lib/lvgl/examples/layouts/flex/lv_example_flex_4.c
new file mode 100644
index 00000000..7aa387f8
--- /dev/null
+++ b/lib/lvgl/examples/layouts/flex/lv_example_flex_4.c
@@ -0,0 +1,26 @@
+#include "../../lv_examples.h"
+#if LV_USE_FLEX && LV_BUILD_EXAMPLES
+
+/**
+ * Reverse the order of flex items
+ */
+void lv_example_flex_4(void)
+{
+
+    lv_obj_t * cont = lv_obj_create(lv_scr_act());
+    lv_obj_set_size(cont, 300, 220);
+    lv_obj_center(cont);
+    lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_COLUMN_REVERSE);
+
+    uint32_t i;
+    for(i = 0; i < 6; i++) {
+        lv_obj_t * obj = lv_obj_create(cont);
+        lv_obj_set_size(obj, 100, 50);
+
+        lv_obj_t * label = lv_label_create(obj);
+        lv_label_set_text_fmt(label, "Item: %"LV_PRIu32, i);
+        lv_obj_center(label);
+    }
+}
+
+#endif
diff --git a/lib/lvgl/examples/layouts/flex/lv_example_flex_4.py b/lib/lvgl/examples/layouts/flex/lv_example_flex_4.py
new file mode 100644
index 00000000..4958e938
--- /dev/null
+++ b/lib/lvgl/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/lib/lvgl/examples/layouts/flex/lv_example_flex_5.c b/lib/lvgl/examples/layouts/flex/lv_example_flex_5.c
new file mode 100644
index 00000000..2b505184
--- /dev/null
+++ b/lib/lvgl/examples/layouts/flex/lv_example_flex_5.c
@@ -0,0 +1,51 @@
+#include "../../lv_examples.h"
+#if LV_USE_FLEX && LV_BUILD_EXAMPLES
+
+static void row_gap_anim(void * obj, int32_t v)
+{
+    lv_obj_set_style_pad_row(obj, v, 0);
+}
+
+static void column_gap_anim(void * obj, int32_t v)
+{
+    lv_obj_set_style_pad_column(obj, v, 0);
+}
+
+/**
+ * Demonstrate the effect of column and row gap style properties
+ */
+void lv_example_flex_5(void)
+{
+    lv_obj_t * cont = lv_obj_create(lv_scr_act());
+    lv_obj_set_size(cont, 300, 220);
+    lv_obj_center(cont);
+    lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW_WRAP);
+
+    uint32_t i;
+    for(i = 0; i < 9; i++) {
+        lv_obj_t * obj = lv_obj_create(cont);
+        lv_obj_set_size(obj, 70, LV_SIZE_CONTENT);
+
+        lv_obj_t * label = lv_label_create(obj);
+        lv_label_set_text_fmt(label, "%"LV_PRIu32, i);
+        lv_obj_center(label);
+    }
+
+    lv_anim_t a;
+    lv_anim_init(&a);
+    lv_anim_set_var(&a, cont);
+    lv_anim_set_values(&a, 0, 10);
+    lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
+
+    lv_anim_set_exec_cb(&a, row_gap_anim);
+    lv_anim_set_time(&a, 500);
+    lv_anim_set_playback_time(&a, 500);
+    lv_anim_start(&a);
+
+    lv_anim_set_exec_cb(&a, column_gap_anim);
+    lv_anim_set_time(&a, 3000);
+    lv_anim_set_playback_time(&a, 3000);
+    lv_anim_start(&a);
+}
+
+#endif
diff --git a/lib/lvgl/examples/layouts/flex/lv_example_flex_5.py b/lib/lvgl/examples/layouts/flex/lv_example_flex_5.py
new file mode 100644
index 00000000..11e11f96
--- /dev/null
+++ b/lib/lvgl/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/lib/lvgl/examples/layouts/flex/lv_example_flex_6.c b/lib/lvgl/examples/layouts/flex/lv_example_flex_6.c
new file mode 100644
index 00000000..a481af07
--- /dev/null
+++ b/lib/lvgl/examples/layouts/flex/lv_example_flex_6.c
@@ -0,0 +1,26 @@
+#include "../../lv_examples.h"
+#if LV_USE_FLEX && LV_BUILD_EXAMPLES
+
+/**
+ * RTL base direction changes order of the items.
+ * Also demonstrate how horizontal scrolling works with RTL.
+ */
+void lv_example_flex_6(void)
+{
+    lv_obj_t * cont = lv_obj_create(lv_scr_act());
+    lv_obj_set_style_base_dir(cont, LV_BASE_DIR_RTL, 0);
+    lv_obj_set_size(cont, 300, 220);
+    lv_obj_center(cont);
+    lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW_WRAP);
+
+    uint32_t i;
+    for(i = 0; i < 20; i++) {
+        lv_obj_t * obj = lv_obj_create(cont);
+        lv_obj_set_size(obj, 70, LV_SIZE_CONTENT);
+
+        lv_obj_t * label = lv_label_create(obj);
+        lv_label_set_text_fmt(label, "%"LV_PRIu32, i);
+        lv_obj_center(label);
+    }
+}
+#endif
diff --git a/lib/lvgl/examples/layouts/flex/lv_example_flex_6.py b/lib/lvgl/examples/layouts/flex/lv_example_flex_6.py
new file mode 100644
index 00000000..1f50433d
--- /dev/null
+++ b/lib/lvgl/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/lib/lvgl/examples/layouts/grid/index.rst b/lib/lvgl/examples/layouts/grid/index.rst
new file mode 100644
index 00000000..fca02189
--- /dev/null
+++ b/lib/lvgl/examples/layouts/grid/index.rst
@@ -0,0 +1,37 @@
+A simple grid
+"""""""""""""""
+
+.. lv_example:: layouts/grid/lv_example_grid_1
+  :language: c
+
+Demonstrate cell placement and span
+"""""""""""""""""""""""""""""""""""""""""""""""""
+
+.. lv_example:: layouts/grid/lv_example_grid_2
+  :language: c
+
+Demonstrate grid's "free unit"
+""""""""""""""""""""""""""""""
+
+.. lv_example:: layouts/grid/lv_example_grid_3
+  :language: c
+
+Demonstrate track placement
+"""""""""""""""""""""""""""
+
+.. lv_example:: layouts/grid/lv_example_grid_4
+  :language: c
+
+Demonstrate column and row gap
+""""""""""""""""""""""""""""""
+
+.. lv_example:: layouts/grid/lv_example_grid_5
+  :language: c
+
+Demonstrate RTL direction on grid
+""""""""""""""""""""""""""""""""""
+
+.. lv_example:: layouts/grid/lv_example_grid_6
+  :language: c
+
+
diff --git a/lib/lvgl/examples/layouts/grid/lv_example_grid.h b/lib/lvgl/examples/layouts/grid/lv_example_grid.h
new file mode 100644
index 00000000..c0b8bae5
--- /dev/null
+++ b/lib/lvgl/examples/layouts/grid/lv_example_grid.h
@@ -0,0 +1,43 @@
+/**
+ * @file lv_example_grid.h
+ *
+ */
+
+#ifndef LV_EXAMPLE_GRID_H
+#define LV_EXAMPLE_GRID_H
+
+#ifdef __cplusplus
+extern "C" {
+#endif
+
+/*********************
+ *      INCLUDES
+ *********************/
+
+/*********************
+ *      DEFINES
+ *********************/
+
+/**********************
+ *      TYPEDEFS
+ **********************/
+
+/**********************
+ * GLOBAL PROTOTYPES
+ **********************/
+void lv_example_grid_1(void);
+void lv_example_grid_2(void);
+void lv_example_grid_3(void);
+void lv_example_grid_4(void);
+void lv_example_grid_5(void);
+void lv_example_grid_6(void);
+
+/**********************
+ *      MACROS
+ **********************/
+
+#ifdef __cplusplus
+} /*extern "C"*/
+#endif
+
+#endif /*LV_EXAMPLE_GRID_H*/
diff --git a/lib/lvgl/examples/layouts/grid/lv_example_grid_1.c b/lib/lvgl/examples/layouts/grid/lv_example_grid_1.c
new file mode 100644
index 00000000..47fbf74a
--- /dev/null
+++ b/lib/lvgl/examples/layouts/grid/lv_example_grid_1.c
@@ -0,0 +1,40 @@
+#include "../../lv_examples.h"
+#if LV_USE_GRID && LV_BUILD_EXAMPLES
+
+/**
+ * A simple grid
+ */
+void lv_example_grid_1(void)
+{
+    static lv_coord_t col_dsc[] = {70, 70, 70, LV_GRID_TEMPLATE_LAST};
+    static lv_coord_t row_dsc[] = {50, 50, 50, LV_GRID_TEMPLATE_LAST};
+
+    /*Create a container with grid*/
+    lv_obj_t * cont = lv_obj_create(lv_scr_act());
+    lv_obj_set_style_grid_column_dsc_array(cont, col_dsc, 0);
+    lv_obj_set_style_grid_row_dsc_array(cont, row_dsc, 0);
+    lv_obj_set_size(cont, 300, 220);
+    lv_obj_center(cont);
+    lv_obj_set_layout(cont, LV_LAYOUT_GRID);
+
+    lv_obj_t * label;
+    lv_obj_t * obj;
+
+    uint32_t i;
+    for(i = 0; i < 9; i++) {
+        uint8_t col = i % 3;
+        uint8_t row = i / 3;
+
+        obj = lv_btn_create(cont);
+        /*Stretch the cell horizontally and vertically too
+         *Set span to 1 to make the cell 1 column/row sized*/
+        lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, col, 1,
+                             LV_GRID_ALIGN_STRETCH, row, 1);
+
+        label = lv_label_create(obj);
+        lv_label_set_text_fmt(label, "c%d, r%d", col, row);
+        lv_obj_center(label);
+    }
+}
+
+#endif
diff --git a/lib/lvgl/examples/layouts/grid/lv_example_grid_1.py b/lib/lvgl/examples/layouts/grid/lv_example_grid_1.py
new file mode 100644
index 00000000..433ffc67
--- /dev/null
+++ b/lib/lvgl/examples/layouts/grid/lv_example_grid_1.py
@@ -0,0 +1,29 @@
+#
+# A simple grid
+#
+
+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_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/lib/lvgl/examples/layouts/grid/lv_example_grid_2.c b/lib/lvgl/examples/layouts/grid/lv_example_grid_2.c
new file mode 100644
index 00000000..f992c57a
--- /dev/null
+++ b/lib/lvgl/examples/layouts/grid/lv_example_grid_2.c
@@ -0,0 +1,63 @@
+#include "../../lv_examples.h"
+#if LV_USE_GRID && LV_BUILD_EXAMPLES
+
+
+/**
+ * Demonstrate cell placement and span
+ */
+void lv_example_grid_2(void)
+{
+    static lv_coord_t col_dsc[] = {70, 70, 70, LV_GRID_TEMPLATE_LAST};
+    static lv_coord_t row_dsc[] = {50, 50, 50, LV_GRID_TEMPLATE_LAST};
+
+    /*Create a container with grid*/
+    lv_obj_t * cont = lv_obj_create(lv_scr_act());
+    lv_obj_set_grid_dsc_array(cont, col_dsc, row_dsc);
+    lv_obj_set_size(cont, 300, 220);
+    lv_obj_center(cont);
+
+    lv_obj_t * label;
+    lv_obj_t * obj;
+
+    /*Cell to 0;0 and align to to the start (left/top) horizontally and vertically too*/
+    obj = lv_obj_create(cont);
+    lv_obj_set_size(obj, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
+    lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_START, 0, 1,
+                         LV_GRID_ALIGN_START, 0, 1);
+    label = lv_label_create(obj);
+    lv_label_set_text(label, "c0, r0");
+
+    /*Cell to 1;0 and align to to the start (left) horizontally and center vertically too*/
+    obj = lv_obj_create(cont);
+    lv_obj_set_size(obj, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
+    lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_START, 1, 1,
+                         LV_GRID_ALIGN_CENTER, 0, 1);
+    label = lv_label_create(obj);
+    lv_label_set_text(label, "c1, r0");
+
+    /*Cell to 2;0 and align to to the start (left) horizontally and end (bottom) vertically too*/
+    obj = lv_obj_create(cont);
+    lv_obj_set_size(obj, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
+    lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_START, 2, 1,
+                         LV_GRID_ALIGN_END, 0, 1);
+    label = lv_label_create(obj);
+    lv_label_set_text(label, "c2, r0");
+
+    /*Cell to 1;1 but 2 column wide (span = 2).Set width and height to stretched.*/
+    obj = lv_obj_create(cont);
+    lv_obj_set_size(obj, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
+    lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, 1, 2,
+                         LV_GRID_ALIGN_STRETCH, 1, 1);
+    label = lv_label_create(obj);
+    lv_label_set_text(label, "c1-2, r1");
+
+    /*Cell to 0;1 but 2 rows tall (span = 2).Set width and height to stretched.*/
+    obj = lv_obj_create(cont);
+    lv_obj_set_size(obj, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
+    lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, 0, 1,
+                         LV_GRID_ALIGN_STRETCH, 1, 2);
+    label = lv_label_create(obj);
+    lv_label_set_text(label, "c0\nr1-2");
+}
+
+#endif
diff --git a/lib/lvgl/examples/layouts/grid/lv_example_grid_2.py b/lib/lvgl/examples/layouts/grid/lv_example_grid_2.py
new file mode 100644
index 00000000..c713406a
--- /dev/null
+++ b/lib/lvgl/examples/layouts/grid/lv_example_grid_2.py
@@ -0,0 +1,52 @@
+#
+# 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 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 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 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/lib/lvgl/examples/layouts/grid/lv_example_grid_3.c b/lib/lvgl/examples/layouts/grid/lv_example_grid_3.c
new file mode 100644
index 00000000..17e4dd90
--- /dev/null
+++ b/lib/lvgl/examples/layouts/grid/lv_example_grid_3.c
@@ -0,0 +1,44 @@
+#include "../../lv_examples.h"
+#if LV_USE_GRID && LV_BUILD_EXAMPLES
+
+/**
+ * Demonstrate grid's "free unit"
+ */
+void lv_example_grid_3(void)
+{
+    /*Column 1: fix width 60 px
+     *Column 2: 1 unit from the remaining free space
+     *Column 3: 2 unit from the remaining free space*/
+    static lv_coord_t col_dsc[] = {60, LV_GRID_FR(1), LV_GRID_FR(2), LV_GRID_TEMPLATE_LAST};
+
+    /*Row 1: fix width 50 px
+     *Row 2: 1 unit from the remaining free space
+     *Row 3: fix width 50 px*/
+    static lv_coord_t row_dsc[] = {50, LV_GRID_FR(1), 50, LV_GRID_TEMPLATE_LAST};
+
+    /*Create a container with grid*/
+    lv_obj_t * cont = lv_obj_create(lv_scr_act());
+    lv_obj_set_size(cont, 300, 220);
+    lv_obj_center(cont);
+    lv_obj_set_grid_dsc_array(cont, col_dsc, row_dsc);
+
+    lv_obj_t * label;
+    lv_obj_t * obj;
+    uint32_t i;
+    for(i = 0; i < 9; i++) {
+        uint8_t col = i % 3;
+        uint8_t row = i / 3;
+
+        obj = lv_obj_create(cont);
+        /*Stretch the cell horizontally and vertically too
+         *Set span to 1 to make the cell 1 column/row sized*/
+        lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, col, 1,
+                             LV_GRID_ALIGN_STRETCH, row, 1);
+
+        label = lv_label_create(obj);
+        lv_label_set_text_fmt(label, "%d,%d", col, row);
+        lv_obj_center(label);
+    }
+}
+
+#endif
diff --git a/lib/lvgl/examples/layouts/grid/lv_example_grid_3.py b/lib/lvgl/examples/layouts/grid/lv_example_grid_3.py
new file mode 100644
index 00000000..e820bdac
--- /dev/null
+++ b/lib/lvgl/examples/layouts/grid/lv_example_grid_3.py
@@ -0,0 +1,36 @@
+#
+# 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.GRID_TEMPLATE.LAST]
+
+# 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.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)
+    # 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/lib/lvgl/examples/layouts/grid/lv_example_grid_4.c b/lib/lvgl/examples/layouts/grid/lv_example_grid_4.c
new file mode 100644
index 00000000..51414779
--- /dev/null
+++ b/lib/lvgl/examples/layouts/grid/lv_example_grid_4.c
@@ -0,0 +1,41 @@
+#include "../../lv_examples.h"
+#if LV_USE_GRID && LV_BUILD_EXAMPLES
+
+/**
+ * Demonstrate track placement
+ */
+void lv_example_grid_4(void)
+{
+    static lv_coord_t col_dsc[] = {60, 60, 60, LV_GRID_TEMPLATE_LAST};
+    static lv_coord_t row_dsc[] = {45, 45, 45, LV_GRID_TEMPLATE_LAST};
+
+
+    /*Add space between the columns and move the rows to the bottom (end)*/
+
+    /*Create a container with grid*/
+    lv_obj_t * cont = lv_obj_create(lv_scr_act());
+    lv_obj_set_grid_align(cont, LV_GRID_ALIGN_SPACE_BETWEEN, LV_GRID_ALIGN_END);
+    lv_obj_set_grid_dsc_array(cont, col_dsc, row_dsc);
+    lv_obj_set_size(cont, 300, 220);
+    lv_obj_center(cont);
+
+    lv_obj_t * label;
+    lv_obj_t * obj;
+    uint32_t i;
+    for(i = 0; i < 9; i++) {
+        uint8_t col = i % 3;
+        uint8_t row = i / 3;
+
+        obj = lv_obj_create(cont);
+        /*Stretch the cell horizontally and vertically too
+         *Set span to 1 to make the cell 1 column/row sized*/
+        lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, col, 1,
+                             LV_GRID_ALIGN_STRETCH, row, 1);
+
+        label = lv_label_create(obj);
+        lv_label_set_text_fmt(label, "%d,%d", col, row);
+        lv_obj_center(label);
+    }
+}
+
+#endif
diff --git a/lib/lvgl/examples/layouts/grid/lv_example_grid_4.py b/lib/lvgl/examples/layouts/grid/lv_example_grid_4.py
new file mode 100644
index 00000000..cc2185b7
--- /dev/null
+++ b/lib/lvgl/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/lib/lvgl/examples/layouts/grid/lv_example_grid_5.c b/lib/lvgl/examples/layouts/grid/lv_example_grid_5.c
new file mode 100644
index 00000000..af96ff82
--- /dev/null
+++ b/lib/lvgl/examples/layouts/grid/lv_example_grid_5.c
@@ -0,0 +1,63 @@
+#include "../../lv_examples.h"
+#if LV_USE_GRID && LV_BUILD_EXAMPLES
+
+static void row_gap_anim(void * obj, int32_t v)
+{
+    lv_obj_set_style_pad_row(obj, v, 0);
+}
+
+static void column_gap_anim(void * obj, int32_t v)
+{
+    lv_obj_set_style_pad_column(obj, v, 0);
+}
+
+/**
+ * Demonstrate column and row gap
+ */
+void lv_example_grid_5(void)
+{
+
+    /*60x60 cells*/
+    static lv_coord_t col_dsc[] = {60, 60, 60, LV_GRID_TEMPLATE_LAST};
+    static lv_coord_t row_dsc[] = {45, 45, 45, LV_GRID_TEMPLATE_LAST};
+
+    /*Create a container with grid*/
+    lv_obj_t * cont = lv_obj_create(lv_scr_act());
+    lv_obj_set_size(cont, 300, 220);
+    lv_obj_center(cont);
+    lv_obj_set_grid_dsc_array(cont, col_dsc, row_dsc);
+
+    lv_obj_t * label;
+    lv_obj_t * obj;
+    uint32_t i;
+    for(i = 0; i < 9; i++) {
+        uint8_t col = i % 3;
+        uint8_t row = i / 3;
+
+        obj = lv_obj_create(cont);
+        lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, col, 1,
+                             LV_GRID_ALIGN_STRETCH, row, 1);
+        label = lv_label_create(obj);
+        lv_label_set_text_fmt(label, "%d,%d", col, row);
+        lv_obj_center(label);
+    }
+
+    lv_anim_t a;
+    lv_anim_init(&a);
+    lv_anim_set_var(&a, cont);
+    lv_anim_set_values(&a, 0, 10);
+    lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
+
+    lv_anim_set_exec_cb(&a, row_gap_anim);
+    lv_anim_set_time(&a, 500);
+    lv_anim_set_playback_time(&a, 500);
+    lv_anim_start(&a);
+
+    lv_anim_set_exec_cb(&a, column_gap_anim);
+    lv_anim_set_time(&a, 3000);
+    lv_anim_set_playback_time(&a, 3000);
+    lv_anim_start(&a);
+}
+
+#endif
+
diff --git a/lib/lvgl/examples/layouts/grid/lv_example_grid_5.py b/lib/lvgl/examples/layouts/grid/lv_example_grid_5.py
new file mode 100644
index 00000000..83f500b8
--- /dev/null
+++ b/lib/lvgl/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/lib/lvgl/examples/layouts/grid/lv_example_grid_6.c b/lib/lvgl/examples/layouts/grid/lv_example_grid_6.c
new file mode 100644
index 00000000..1c06c980
--- /dev/null
+++ b/lib/lvgl/examples/layouts/grid/lv_example_grid_6.c
@@ -0,0 +1,39 @@
+#include "../../lv_examples.h"
+#if LV_USE_GRID && LV_BUILD_EXAMPLES
+
+/**
+ * Demonstrate RTL direction on grid
+ */
+void lv_example_grid_6(void)
+{
+
+    static lv_coord_t col_dsc[] = {60, 60, 60, LV_GRID_TEMPLATE_LAST};
+    static lv_coord_t row_dsc[] = {45, 45, 45, LV_GRID_TEMPLATE_LAST};
+
+    /*Create a container with grid*/
+    lv_obj_t * cont = lv_obj_create(lv_scr_act());
+    lv_obj_set_size(cont, 300, 220);
+    lv_obj_center(cont);
+    lv_obj_set_style_base_dir(cont, LV_BASE_DIR_RTL, 0);
+    lv_obj_set_grid_dsc_array(cont, col_dsc, row_dsc);
+
+    lv_obj_t * label;
+    lv_obj_t * obj;
+    uint32_t i;
+    for(i = 0; i < 9; i++) {
+        uint8_t col = i % 3;
+        uint8_t row = i / 3;
+
+        obj = lv_obj_create(cont);
+        /*Stretch the cell horizontally and vertically too
+         *Set span to 1 to make the cell 1 column/row sized*/
+        lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, col, 1,
+                             LV_GRID_ALIGN_STRETCH, row, 1);
+
+        label = lv_label_create(obj);
+        lv_label_set_text_fmt(label, "%d,%d", col, row);
+        lv_obj_center(label);
+    }
+}
+
+#endif
diff --git a/lib/lvgl/examples/layouts/grid/lv_example_grid_6.py b/lib/lvgl/examples/layouts/grid/lv_example_grid_6.py
new file mode 100644
index 00000000..436c6e4c
--- /dev/null
+++ b/lib/lvgl/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/lib/lvgl/examples/layouts/lv_example_layout.h b/lib/lvgl/examples/layouts/lv_example_layout.h
new file mode 100644
index 00000000..2de368bc
--- /dev/null
+++ b/lib/lvgl/examples/layouts/lv_example_layout.h
@@ -0,0 +1,39 @@
+/**
+ * @file lv_example_layout.h
+ *
+ */
+
+#ifndef LV_EXAMPLE_LAYOUT_H
+#define LV_EXAMPLE_LAYOUT_H
+
+#ifdef __cplusplus
+extern "C" {
+#endif
+
+/*********************
+ *      INCLUDES
+ *********************/
+#include "flex/lv_example_flex.h"
+#include "grid/lv_example_grid.h"
+
+/*********************
+ *      DEFINES
+ *********************/
+
+/**********************
+ *      TYPEDEFS
+ **********************/
+
+/**********************
+ * GLOBAL PROTOTYPES
+ **********************/
+
+/**********************
+ *      MACROS
+ **********************/
+
+#ifdef __cplusplus
+} /*extern "C"*/
+#endif
+
+#endif /*LV_EXAMPLE_LAYOUT_H*/