release v8.1

* fix some errors in  bidi algorithm when displaying arabic

* fix some errors in  bidi algorithm when displaying arabic

* fix format error

Co-authored-by: liuxinh <liuxinh@landicorp.com>

.codecov.yml

@@ -0,0 +1,8 @@
+codecov:
+  notify:
+    require_ci_to_pass: true
+comment: off
+coverage:
+  status:
+    patch: off
+    project: off

.github/workflows/build_micropython.yml

@@ -1,43 +1,72 @@
-name: Build Micropython with LVGL submodule
+name: Micropython CI
 
 on:
   push:
-    branches: [ master, dev ]
   pull_request:
-    branches: [ master, dev ]
 
 jobs:
   build:
-
+    name: Build ${{ matrix.port }} port
     runs-on: ubuntu-latest
-
+    strategy:
+      matrix:
+        port: ['unix', 'esp32', 'stm32', 'rp2']
     steps:
-    - name: Install SDL
+    - uses: ammaraskar/gcc-problem-matcher@master
+    - name: Install Dependencies
       run: |
         sudo add-apt-repository -y "deb http://archive.ubuntu.com/ubuntu `lsb_release -sc` main universe restricted multiverse"
         sudo apt-get update -y -qq
-        sudo apt-get install libsdl2-dev
+        sudo apt-get install libsdl2-dev parallel
     - name: Clone lv_micropython
       run: |
         git clone https://github.com/lvgl/lv_micropython.git .
-        git checkout dev-8.0
-    - name: Update submodules
-      run: git submodule update --init --recursive
+        git checkout master
+    - name: Initialize lv_bindings submodule
+      run: git submodule update --init --recursive lib/lv_bindings
+    - name: Update ${{ matrix.port }} port submodules
+      if: matrix.port != 'esp32'
+      # VARIANT needed for unix
+      run: make -C ports/${{ matrix.port }} VARIANT=dev DEBUG=1 USER_C_MODULES=../../lib/lv_bindings/bindings.cmake submodules 
     - name: Checkout LVGL submodule
       working-directory: ./lib/lv_bindings/lvgl
       run: |
-        git fetch --force ${{ github.event.repository.git_url }} "+refs/heads/*:refs/remotes/origin/*"
-        git fetch --force ${{ github.event.repository.git_url }} "+refs/pull/*:refs/remotes/origin/pr/*"
+        git fetch --force ${{ github.event.repository.html_url }} "+refs/heads/*:refs/remotes/origin/*"
+        git fetch --force ${{ github.event.repository.html_url }} "+refs/pull/*:refs/remotes/origin/pr/*"
         git checkout ${{ github.sha }} || git checkout ${{ github.event.pull_request.head.sha }}
         git submodule update --init --recursive
     - name: Build mpy-cross
       run: make -j $(nproc) -C mpy-cross
-    - name: Build the unix port
-      run: make -j $(nproc) -C ports/unix
-    - name: Run advanced_demo
-      run: >
-        echo "import gc,utime;
-        utime.sleep(5);
-        gc.collect();
-        utime.sleep(5)" |
-        ports/unix/micropython -i lib/lv_bindings/examples/advanced_demo.py
+
+    # ESP32 port
+    - name: Setup ESP-IDF
+      if: matrix.port == 'esp32'
+      run: |
+        source tools/ci.sh && ci_esp32_idf43_setup
+    - name: Build ESP32 port
+      if: matrix.port == 'esp32'
+      run: |
+        source tools/ci.sh && ci_esp32_build
+
+    # STM32 & RPi Pico port
+    - name: arm-none-eabi-gcc
+      if: matrix.port == 'stm32' || matrix.port == 'rp2'
+      uses: fiam/arm-none-eabi-gcc@v1
+      with:
+        release: '9-2019-q4' # The arm-none-eabi-gcc release to use.
+    - name: Build STM32 port
+      if: matrix.port == 'stm32'
+      run: make -j $(nproc) -C ports/stm32 BOARD=STM32F7DISC
+    - name: Build Raspberry Pi PICO port
+      if: matrix.port == 'rp2'
+      run: make -j $(nproc) -C ports/rp2 BOARD=PICO USER_C_MODULES=../../lib/lv_bindings/bindings.cmake
+    # Unix port
+    - name: Build Unix port
+      if: matrix.port == 'unix'
+      run: make -j $(nproc) -C ports/unix VARIANT=dev DEBUG=1
+    - name: Run tests
+      if: success() && matrix.port == 'unix'
+      run: |
+        export XDG_RUNTIME_DIR=/tmp
+        lib/lv_bindings/tests/run.sh
+        

.github/workflows/ccpp.yml

@@ -2,17 +2,44 @@ name: C/C++ CI
 
 on:
   push:
-    branches: [ master, dev ]
+    branches: [ master, release/v8.* ]
   pull_request:
-    branches: [master, dev ]
+    branches: [ master, release/v8.* ]
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
-
+    strategy:
+      matrix:
+        # A valid option parameter to the cmake file.
+        # See BUILD_OPTIONS in tests/CMakeLists.txt.
+        build_option: ['OPTIONS_MINIMAL_MONOCHROME',
+                       'OPTIONS_NORMAL_8BIT',
+                       'OPTIONS_16BIT',
+                       'OPTIONS_16BIT_SWAP',
+                       'OPTIONS_FULL_32BIT']
+    name: Build ${{ matrix.build_option }}
     steps:
     - uses: actions/checkout@v2
     - uses: ammaraskar/gcc-problem-matcher@master
+    - name: Install prerequisites
+      run: scripts/install-prerequisites.sh
+    - name: Building ${{ matrix.build_option }}
+      run: python tests/main.py --build-option=${{ matrix.build_option }} build
+
+  test:
+    runs-on: ubuntu-latest
+    name: Executable Tests
+    steps:
+    - uses: actions/checkout@v2
+    - uses: ammaraskar/gcc-problem-matcher@master
+    - name: Install prerequisites
+      run: scripts/install-prerequisites.sh
     - name: Run tests
-      run: sudo apt-get install libpng-dev; cd tests; python ./build.py
+      run: python tests/main.py --report test
+    - name: Upload coverage to Codecov
+      uses: codecov/codecov-action@v1
+      if: github.event_name == 'push'
+      with:
+        fail_ci_if_error: true
+        verbose: true

.github/workflows/check_conf.yml

@@ -0,0 +1,23 @@
+name: Verify that lv_conf_internal.h matches repository state
+on:
+  push:
+  pull_request:
+
+jobs:
+  verify-conf-internal:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          persist-credentials: false
+          fetch-depth: 0
+      - name: Setup Python
+        uses: actions/setup-python@v1
+        with:
+          python-version: 3.7
+      - name: Generate lv_conf_internal.h
+        run: python lv_conf_internal_gen.py
+        working-directory: scripts
+      - name: Check that repository is clean
+        run: git diff --exit-code >/dev/null 2>&1 || (echo "Please regenerate lv_conf_internal.h using scripts/lv_conf_internal_gen.py"; false)

.github/workflows/close_old_issues.yml

@@ -6,6 +6,7 @@ on:
 
 jobs:
   stale:
+    if: github.repository == 'lvgl/lvgl'
     runs-on: ubuntu-latest
     steps:
       - uses: actions/stale@v3

.github/workflows/compile_docs.yml

@@ -36,7 +36,9 @@ jobs:
             !${{ env.pythonLocation }}/lib/python*/site-packages/setuptools*
           key: ${{ env.pythonLocation }}-${{ hashFiles('docs/requirements.txt') }}
       - name: Install Doxygen and Latex dependencies
-        run: sudo apt-get install doxygen texlive-xetex texlive-binaries texlive-lang-english latexmk fonts-freefont-otf
+        run: |
+          sudo apt-get update
+          sudo apt-get install doxygen texlive-xetex texlive-binaries texlive-lang-english latexmk fonts-freefont-otf
       - name: Install requirements
         run: |
           pip install -r docs/requirements.txt
@@ -62,7 +64,7 @@ jobs:
         run: |
           echo "::set-output name=VERSION_NAME::$(scripts/find_version.sh)"
         id: version
-      - name: Deploy
+      - name: Deploy to subfolder
         uses: JamesIves/github-pages-deploy-action@3.7.1
         with:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/esp_upload_component.yml

@@ -0,0 +1,19 @@
+name: Push LVGL release to Espressif Component Service
+
+# Upload on successful release
+on:
+  release:
+    types:
+      - released
+
+jobs:
+  upload_components:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@master
+      - name: Upload component to component service
+        uses: espressif/github-actions/upload_components@master
+        with:
+          name: "lvgl"
+          namespace: "lvgl"
+          api_token: ${{ secrets.ESP_IDF_COMPONENT_API_TOKEN }}

.github/workflows/release.yml

@@ -2,7 +2,7 @@ on:
   push:
     # Sequence of patterns matched against refs/tags
     tags:
-      - 'v*' # Push events to matching v*, i.e. v1.0, v20.15.10
+      - "v[0-9]+.[0-9]+.[0-9]+" # Push events to matching v*, i.e. v1.0, v20.15.10
 
 name: Create Release
 

.gitignore

@@ -2,12 +2,15 @@
 **/*bin
 **/*.swp
 **/*.swo
+**/*.gcda
+**/*.gcno
 tags
 docs/api_doc
 scripts/cppcheck_res.txt
 scripts/built_in_font/lv_font_*
 docs/doxygen_html
 docs/xml
+docs/examples.md
 docs/out_latex
 docs/_static/built_lv_examples
 docs/LVGL.pdf
@@ -15,3 +18,7 @@ docs/env
 out_html
 __pycache__
 /emscripten_builder
+test_screenshot_error.h
+build/
+tests/build_*/
+tests/report/

CMakeLists.txt

@@ -1,99 +1,94 @@
 if(ESP_PLATFORM)
 
-file(GLOB_RECURSE SOURCES src/*.c)
+    file(GLOB_RECURSE SOURCES src/*.c)
 
-idf_component_register(SRCS ${SOURCES}
-                       INCLUDE_DIRS . src ../
-                       REQUIRES main)
+    idf_build_get_property(LV_MICROPYTHON LV_MICROPYTHON)
 
-target_compile_definitions(${COMPONENT_LIB} PUBLIC "-DLV_CONF_INCLUDE_SIMPLE")
-
-if (CONFIG_LV_MEM_CUSTOM)
-    if (CONFIG_LV_MEM_CUSTOM_ALLOC)
-        target_compile_definitions(${COMPONENT_LIB} PUBLIC "-DLV_MEM_CUSTOM_ALLOC=${CONFIG_LV_MEM_CUSTOM_ALLOC}")
+    if (LV_MICROPYTHON)
+        idf_component_register(SRCS ${SOURCES}
+                               INCLUDE_DIRS . src ../
+                               REQUIRES main)
+    else()
+        idf_component_register(SRCS ${SOURCES}
+                               INCLUDE_DIRS . src ../)
     endif()
 
-    if (CONFIG_LV_MEM_CUSTOM_FREE)
-        target_compile_definitions(${COMPONENT_LIB} PUBLIC "-DLV_MEM_CUSTOM_FREE=${CONFIG_LV_MEM_CUSTOM_FREE}")
+    target_compile_definitions(${COMPONENT_LIB} PUBLIC "-DLV_CONF_INCLUDE_SIMPLE")
+
+    if (CONFIG_LV_ATTRIBUTE_FAST_MEM_USE_IRAM)
+        target_compile_definitions(${COMPONENT_LIB} PUBLIC "-DLV_ATTRIBUTE_FAST_MEM=IRAM_ATTR")
     endif()
-endif()
-
-if (CONFIG_LV_TICK_CUSTOM)
-    if (CONFIG_LV_TICK_CUSTOM_SYS_TIME_EXPR)
-        target_compile_definitions(${COMPONENT_LIB} PUBLIC "-DLV_TICK_CUSTOM_SYS_TIME_EXPR=${CONFIG_LV_TICK_CUSTOM_SYS_TIME_EXPR}")
-    endif()
-endif()
-
-if (CONFIG_LV_USER_DATA_FREE)
-    target_compile_definitions(${COMPONENT_LIB} PUBLIC "-DLV_USER_DATA_FREE=${CONFIG_LV_USER_DATA_FREE}")
-endif()
-
-if (CONFIG_LV_ATTRIBUTE_FAST_MEM_USE_IRAM)
-    target_compile_definitions(${COMPONENT_LIB} PUBLIC "-DLV_ATTRIBUTE_FAST_MEM=IRAM_ATTR")
-endif()
 
 elseif(ZEPHYR_BASE)
 
-if(CONFIG_LVGL)
+    if(CONFIG_LVGL)
 
-zephyr_include_directories(${ZEPHYR_BASE}/lib/gui/lvgl)
+        zephyr_include_directories(${ZEPHYR_BASE}/lib/gui/lvgl)
 
-target_include_directories(lvgl INTERFACE ${CMAKE_CURRENT_SOURCE_DIR})
+        target_include_directories(lvgl INTERFACE ${CMAKE_CURRENT_SOURCE_DIR})
 
-zephyr_compile_definitions(LV_CONF_KCONFIG_EXTERNAL_INCLUDE=<autoconf.h>)
+        zephyr_compile_definitions(LV_CONF_KCONFIG_EXTERNAL_INCLUDE=<autoconf.h>)
 
-zephyr_compile_definitions_ifdef(CONFIG_LV_MEM_CUSTOM
-    LV_MEM_CUSTOM_ALLOC=${CONFIG_LV_MEM_CUSTOM_ALLOC}
-    )
-zephyr_compile_definitions_ifdef(CONFIG_LV_MEM_CUSTOM
-    LV_MEM_CUSTOM_FREE=${CONFIG_LV_MEM_CUSTOM_FREE}
-    )
-zephyr_compile_definitions_ifdef(CONFIG_LV_TICK_CUSTOM
-    LV_TICK_CUSTOM_SYS_TIME_EXPR=${CONFIG_LV_TICK_CUSTOM_SYS_TIME_EXPR}
-    )
+        zephyr_library()
 
-zephyr_library()
+        file(GLOB_RECURSE SOURCES src/*.c)
+        zephyr_library_sources(${SOURCES})
 
-file(GLOB_RECURSE SOURCES src/*.c)
-zephyr_library_sources(${SOURCES})
-
-endif() # CONFIG_LVGL
+    endif(CONFIG_LVGL)
 
 else()
 
-file(GLOB_RECURSE SOURCES src/*.c)
-add_library(lvgl STATIC ${SOURCES})
+    file(GLOB_RECURSE SOURCES ${CMAKE_CURRENT_LIST_DIR}/src/*.c)
+    file(GLOB_RECURSE EXAMPLE_SOURCES ${CMAKE_CURRENT_LIST_DIR}/examples/*.c)
+
+    if(MICROPY_DIR)
+        # with micropython, build lvgl as interface library
+        # link chain is: lvgl_interface [lvgl] → usermod_lvgl_bindings [lv_bindings] → usermod [micropython] → firmware [micropython]
+        add_library(lvgl_interface INTERFACE)
+        # ${SOURCES} must NOT be given to add_library directly for some reason (won't be built)
+        target_sources(lvgl_interface INTERFACE ${SOURCES})
+        # Micropython builds with -Werror; we need to suppress some warnings, such as:
+        #
+        # /home/test/build/lv_micropython/ports/rp2/build-PICO/lv_mp.c:29316:16: error: 'lv_style_transition_dsc_t_path_xcb_callback' defined but not used [-Werror=unused-function]
+        # 29316 | STATIC int32_t lv_style_transition_dsc_t_path_xcb_callback(const struct _lv_anim_t * arg0)
+        #       |                ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+        target_compile_options(lvgl_interface INTERFACE -Wno-unused-function)
+    else(MICROPY_DIR)
+        # without micropython, build lvgl and examples libs normally
+        # default linux build uses this scope
+        add_library(lvgl STATIC ${SOURCES})
+        add_library(lvgl_examples STATIC ${EXAMPLE_SOURCES})
+
+        include_directories(${CMAKE_SOURCE_DIR})
+
+        # Lbrary and headers can be installed to system using make install
+        file(GLOB LVGL_PUBLIC_HEADERS
+          "${CMAKE_SOURCE_DIR}/lv_conf.h"
+          "${CMAKE_SOURCE_DIR}/lvgl.h")
+
+        if("${LIB_INSTALL_DIR}" STREQUAL "")
+            set(LIB_INSTALL_DIR "lib")
+        endif()
+        if("${INC_INSTALL_DIR}" STREQUAL "")
+            set(INC_INSTALL_DIR "include/lvgl")
+        endif()
+
+        install(DIRECTORY "${CMAKE_SOURCE_DIR}/src"
+            DESTINATION "${CMAKE_INSTALL_PREFIX}/${INC_INSTALL_DIR}/"
+            FILES_MATCHING
+            PATTERN "*.h")
+
+        set_target_properties(lvgl PROPERTIES
+            OUTPUT_NAME lvgl
+            ARCHIVE_OUTPUT_DIRECTORY "${CMAKE_BINARY_DIR}/lib"
+            PUBLIC_HEADER "${LVGL_PUBLIC_HEADERS}")
+
+        install(TARGETS lvgl
+            ARCHIVE DESTINATION "${LIB_INSTALL_DIR}"
+            PUBLIC_HEADER DESTINATION "${INC_INSTALL_DIR}")
+
+    endif(MICROPY_DIR)
 
 endif()
 
-option(install "Enable install to system" OFF)
-if(install)
-include_directories(${CMAKE_SOURCE_DIR})
 
-file(GLOB LVGL_PUBLIC_HEADERS
-  "${CMAKE_SOURCE_DIR}/lv_conf.h"
-  "${CMAKE_SOURCE_DIR}/lvgl.h")
-
-
-if("${LIB_INSTALL_DIR}" STREQUAL "")
-    set(LIB_INSTALL_DIR "lib")
-endif()
-
-if("${INC_INSTALL_DIR}" STREQUAL "")
-    set(INC_INSTALL_DIR "include/lvgl")
-endif()
-
-install(DIRECTORY "${CMAKE_SOURCE_DIR}/src"
-    DESTINATION "${CMAKE_INSTALL_PREFIX}/${INC_INSTALL_DIR}/"
-    FILES_MATCHING
-    PATTERN "*.h")
-
-set_target_properties(lvgl PROPERTIES
-    OUTPUT_NAME lvgl
-    ARCHIVE_OUTPUT_DIRECTORY "${CMAKE_BINARY_DIR}/lib"
-    PUBLIC_HEADER "${LVGL_PUBLIC_HEADERS}")
-
-install(TARGETS lvgl
-    ARCHIVE DESTINATION "${LIB_INSTALL_DIR}"
-    PUBLIC_HEADER DESTINATION "${INC_INSTALL_DIR}")
-endif(install)

Kconfig

@@ -2,14 +2,6 @@
 
 menu "LVGL configuration"
 
-    config LV_ATTRIBUTE_FAST_MEM_USE_IRAM
-        bool "Set IRAM as LV_ATTRIBUTE_FAST_MEM"
-        help
-            Set this option to configure IRAM as LV_ATTRIBUTE_FAST_MEM
-
-    config LV_CONF_MINIMAL
-        bool "LVGL minimal configuration."
-
     # Define CONFIG_LV_CONF_SKIP so we can use LVGL
     # without lv_conf.h file, the lv_conf_internal.h and
     # lv_conf_kconfig.h files are used instead.
@@ -17,6 +9,9 @@ menu "LVGL configuration"
         bool
         default y
 
+    config LV_CONF_MINIMAL
+        bool "LVGL minimal configuration."
+
     menu "Color settings"
         choice
             prompt "Color depth."
@@ -42,7 +37,7 @@ menu "LVGL configuration"
             default 32 if LV_COLOR_DEPTH_32
 
         config LV_COLOR_16_SWAP
-            bool "Swap the 2 bytes of RGB565 color. Useful if the display has a 8 bit interface (e.g. SPI)."
+            bool "Swap the 2 bytes of RGB565 color. Useful if the display has an 8-bit interface (e.g. SPI)."
             depends on LV_COLOR_DEPTH_16
 
         config LV_COLOR_SCREEN_TRANSP
@@ -53,6 +48,18 @@ menu "LVGL configuration"
                 Requires `LV_COLOR_DEPTH = 32` colors and the screen's `bg_opa` should be set to
                 non LV_OPA_COVER value
 
+        config LV_COLOR_MIX_ROUND_OFS
+            int "Adjust color mix functions rounding"
+            default 128 if !LV_COLOR_DEPTH_32
+            default 0 if LV_COLOR_DEPTH_32
+            range 0 254
+            help
+                0: no adjustment, get the integer part of the result (round down)
+                64: round up from x.75
+                128: round up from half
+                192: round up from x.25
+                254: round up
+
         config LV_COLOR_CHROMA_KEY_HEX
             hex "Images pixels with this color will not be drawn (if they are chroma keyed)."
             range 0x000000 0xFFFFFF
@@ -71,11 +78,24 @@ menu "LVGL configuration"
             default 32
             depends on !LV_MEM_CUSTOM
 
+        config LV_MEM_ADDR
+            hex "Address for the memory pool instead of allocating it as a normal array"
+            default 0x0
+            depends on !LV_MEM_CUSTOM
+
         config LV_MEM_CUSTOM_INCLUDE
             string "Header to include for the custom memory function"
             default "stdlib.h"
             depends on LV_MEM_CUSTOM
 
+        config LV_MEM_BUF_MAX_NUM
+            int "Number of the memory buffer"
+            default 16
+            help
+                Number of the intermediate memory buffer used during rendering and other
+                internal processing mechanisms.  You will see an error log message if
+                there wasn't enough buffers.
+
         config LV_MEMCPY_MEMSET_STD
             bool "Use the standard memcpy and memset instead of LVGL's own functions"
     endmenu
@@ -92,12 +112,10 @@ menu "LVGL configuration"
             default 30
 
         config LV_TICK_CUSTOM
-            bool
-            prompt "Use a custom tick source"
+            bool "Use a custom tick source"
 
         config LV_TICK_CUSTOM_INCLUDE
-            string
-            prompt "Header for the system time function"
+            string "Header for the system time function"
             default "Arduino.h"
             depends on LV_TICK_CUSTOM
 
@@ -128,6 +146,16 @@ menu "LVGL configuration"
                     shadow size is `shadow_width + radius`.
                     Caching has LV_SHADOW_CACHE_SIZE^2 RAM cost.
 
+            config LV_CIRCLE_CACHE_SIZE
+                int "Set number of maximally cached circle data"
+                depends on LV_DRAW_COMPLEX
+                default 4
+                help
+                    The circumference of 1/4 circle are saved for anti-aliasing
+                    radius * 4 bytes are used per circle (the most often used
+                    radiuses are saved).
+                    Set to 0 to disable caching.
+
             config LV_IMG_CACHE_DEF_SIZE
                 int "Default image cache size. 0 to disable caching."
                 default 0
@@ -147,6 +175,9 @@ menu "LVGL configuration"
         endmenu
 
         menu "GPU"
+            config LV_USE_EXTERNAL_RENDERER
+                bool
+
             config LV_USE_GPU_STM32_DMA2D
                 bool "Enable STM32 DMA2D (aka Chrom Art) GPU."
             config LV_GPU_DMA2D_CMSIS_INCLUDE
@@ -171,8 +202,18 @@ menu "LVGL configuration"
                     selected.
                     0: lv_gpu_nxp_pxp_init() has to be called manually before
                     lv_init().
+
             config LV_USE_GPU_NXP_VG_LITE
                 bool "Use NXP's VG-Lite GPU iMX RTxxx platforms."
+
+            config LV_USE_GPU_SDL
+                bool "Use SDL renderer API"
+                select LV_USE_EXTERNAL_RENDERER
+                default n
+            config LV_GPU_SDL_INCLUDE_PATH
+                string "include path of SDL header"
+                depends on LV_USE_GPU_SDL
+                default "SDL2/SDL.h"
         endmenu
 
         menu "Logging"
@@ -272,6 +313,10 @@ menu "LVGL configuration"
 
             config LV_USE_ASSERT_OBJ
                 bool "Check NULL, the object's type and existence (e.g. not deleted). (Slow)."
+
+            config LV_ASSERT_HANDLER_INCLUDE
+                string "Header to include for the custom assert function"
+                default "assert.h"
         endmenu
 
         menu "Others"
@@ -279,7 +324,8 @@ menu "LVGL configuration"
                 bool "Show CPU usage and FPS count in the right bottom corner."
 
             config LV_USE_MEM_MONITOR
-                bool "Show the used memory and the memory fragmentation in the left bottom corner. Requires LV_MEM_CUSTOM = 0"
+                bool "Show the used memory and the memory fragmentation in the left bottom corner."
+                depends on !LV_MEM_CUSTOM
 
             config LV_USE_REFR_DEBUG
                 bool "Draw random colored rectangles over the redrawn areas."
@@ -287,6 +333,11 @@ menu "LVGL configuration"
             config LV_SPRINTF_CUSTOM
                 bool "Change the built-in (v)snprintf functions"
 
+            config LV_SPRINTF_INCLUDE
+                string "Header to include for the custom sprintf function"
+                depends on LV_SPRINTF_CUSTOM
+                default "stdio.h"
+
             config LV_SPRINTF_USE_FLOAT
                 bool "Enable float in built-in (v)snprintf functions"
                 depends on !LV_SPRINTF_CUSTOM
@@ -294,33 +345,32 @@ menu "LVGL configuration"
             config LV_USE_USER_DATA
                 bool "Add a 'user_data' to drivers and objects."
                 default y
+
+            config LV_ENABLE_GC
+                bool "Enable garbage collector"
+
+            config LV_GC_INCLUDE
+                string "Header to include for the garbage collector related things"
+                depends on LV_ENABLE_GC
+                default "gc.h"
         endmenu
 
         menu "Compiler settings"
             config LV_BIG_ENDIAN_SYSTEM
                 bool "For big endian systems set to 1"
 
+            config LV_ATTRIBUTE_MEM_ALIGN_SIZE
+                int "Required alignment size for buffers"
+                default 1
+
+            config LV_ATTRIBUTE_FAST_MEM_USE_IRAM
+                bool "Set IRAM as LV_ATTRIBUTE_FAST_MEM"
+                help
+                    Set this option to configure IRAM as LV_ATTRIBUTE_FAST_MEM
+
             config LV_USE_LARGE_COORD
                 bool "Extend the default -32k..32k coordinate range to -4M..4M by using int32_t for coordinates instead of int16_t"
         endmenu
-
-        config LV_USE_USER_DATA_FREE
-            bool "Free the user data field upon object deletion"
-            depends on LV_USE_USER_DATA
-        config LV_USER_DATA_FREE_INCLUDE
-            string "Header for user data free function"
-            default "something.h"
-            depends on LV_USE_USER_DATA_FREE
-        config LV_USER_DATA_FREE
-            string "Invoking for user data free function. It has the lv_obj_t pointer as single parameter."
-            default "(user_data_free)"
-            depends on LV_USE_USER_DATA_FREE
-        config LV_USE_API_EXTENSION_V6
-            bool "Use the functions and types from the older (v6) API if possible."
-            default y if !LV_CONF_MINIMAL
-        config LV_USE_API_EXTENSION_V7
-            bool "Use the functions and types from the older (v7) API if possible."
-            default y if !LV_CONF_MINIMAL
     endmenu
 
     menu "Font usage"
@@ -369,46 +419,31 @@ menu "LVGL configuration"
             config LV_FONT_MONTSERRAT_48
                 bool "Enable Montserrat 48"
 
+            config LV_FONT_MONTSERRAT_12_SUBPX
+                bool "Enable Montserrat 12 sub-pixel"
+            config LV_FONT_MONTSERRAT_28_COMPRESSED
+                bool "Enable Montserrat 28 compressed"
+            config LV_FONT_DEJAVU_16_PERSIAN_HEBREW
+                bool "Enable Dejavu 16 Persian, Hebrew, Arabic letters"
+            config LV_FONT_SIMSUN_16_CJK
+                bool "Enable Simsun 16 CJK"
+
             config LV_FONT_UNSCII_8
                 bool "Enable UNSCII 8 (Perfect monospace font)"
                 default y if LV_CONF_MINIMAL
             config LV_FONT_UNSCII_16
                 bool "Enable UNSCII 16 (Perfect monospace font)"
 
-            config LV_FONT_MONTSERRAT12SUBPX
-                bool "Enable Montserrat 12 sub-pixel"
-            config LV_FONT_MONTSERRAT28COMPRESSED
-                bool "Enable Montserrat 28 compressed"
-            config LV_FONT_DEJAVU_16_PERSIAN_HEBREW
-                bool "Enable Dejavu 16 Persian, Hebrew, Arabic letters"
-            config LV_FONT_SIMSUN_16_CJK
-                bool "Enable Simsun 16 CJK"
+            config LV_FONT_CUSTOM
+                bool "Enable the custom font"
+            config LV_FONT_CUSTOM_DECLARE
+                string "Header to include for the custom font"
+                depends on LV_FONT_CUSTOM
         endmenu
 
-        config LV_FONT_FMT_TXT_LARGE
-            bool "Enable it if you have fonts with a lot of characters."
-            help
-                The limit depends on the font size, font face and bpp
-                but with > 10,000 characters if you see issues probably you
-                need to enable it.
-
-        config LV_USE_FONT_COMPRESSED
-            bool "Sets support for compressed fonts."
-
-        config LV_USE_FONT_SUBPX
-            bool "Enable subpixel rendering."
-
-        config LV_FONT_SUBPX_BGR
-            bool "Use BGR instead RGB for sub-pixel rendering."
-            depends on LV_USE_FONT_SUBPX
-            help
-                Set the pixel order of the display.
-                Important only if "subpx fonts" are used.
-                With "normal" font it doesn't matter.
-
         choice LV_FONT_DEFAULT
             prompt "Select theme default title font"
-            default LV_FONT_DEFAULT_MONTSERRAT_16 if !LV_CONF_MINIMAL
+            default LV_FONT_DEFAULT_MONTSERRAT_14 if !LV_CONF_MINIMAL
             default LV_FONT_DEFAULT_UNSCII_8 if LV_CONF_MINIMAL
             help
                 Select theme default title font
@@ -473,46 +508,46 @@ menu "LVGL configuration"
             config LV_FONT_DEFAULT_MONTSERRAT_48
                 bool "Montserrat 48"
                 select LV_FONT_MONTSERRAT_48
-            config LV_FONT_DEFAULT_UNSCII_8
-                bool "UNSCII 8 (Perfect monospace font)"
-                select LV_FONT_UNSCII_8
-            config LV_FONT_DEFAULT_UNSCII_16
-                bool "UNSCII 16 (Perfect monospace font)"
-                select LV_FONT_UNSCII_16
-            config LV_FONT_DEFAULT_MONTSERRAT12SUBPX
+            config LV_FONT_DEFAULT_MONTSERRAT_12_SUBPX
                 bool "Montserrat 12 sub-pixel"
-                select LV_FONT_MONTSERRAT12SUBPX
-            config LV_FONT_DEFAULT_MONTSERRAT28COMPRESSED
+                select LV_FONT_MONTSERRAT_12_SUBPX
+            config LV_FONT_DEFAULT_MONTSERRAT_28_COMPRESSED
                 bool "Montserrat 28 compressed"
-                select LV_FONT_MONTSERRAT28COMPRESSED
+                select LV_FONT_MONTSERRAT_28_COMPRESSED
             config LV_FONT_DEFAULT_DEJAVU_16_PERSIAN_HEBREW
                 bool "Dejavu 16 Persian, Hebrew, Arabic letters"
                 select LV_FONT_DEJAVU_16_PERSIAN_HEBREW
             config LV_FONT_DEFAULT_SIMSUN_16_CJK
                 bool "Simsun 16 CJK"
                 select LV_FONT_SIMSUN_16_CJK
+            config LV_FONT_DEFAULT_UNSCII_8
+                bool "UNSCII 8 (Perfect monospace font)"
+                select LV_FONT_UNSCII_8
+            config LV_FONT_DEFAULT_UNSCII_16
+                bool "UNSCII 16 (Perfect monospace font)"
+                select LV_FONT_UNSCII_16
         endchoice
-    endmenu
 
-    menu "Themes"
-        config LV_USE_THEME_DEFAULT
-            bool "A simple, impressive and very complete theme"
-            default y
-        config LV_THEME_DEFAULT_PALETTE_LIGHT
-            bool "Yes to set light mode, No to set dark mode"
-            default y
-            depends on LV_USE_THEME_DEFAULT
-        config LV_THEME_DEFAULT_GROW
-            bool "Enable grow on press"
-            default y
-            depends on LV_USE_THEME_DEFAULT
-        config LV_THEME_DEFAULT_TRANSITION_TIME
-            int "Default transition time in [ms]"
-            default 80
-            depends on LV_USE_THEME_DEFAULT
-        config LV_USE_THEME_BASIC
-            bool "A very simple theme that is a good starting point for a custom theme"
-            default y
+        config LV_FONT_FMT_TXT_LARGE
+            bool "Enable it if you have fonts with a lot of characters."
+            help
+                The limit depends on the font size, font face and bpp
+                but with > 10,000 characters if you see issues probably you
+                need to enable it.
+
+        config LV_USE_FONT_COMPRESSED
+            bool "Sets support for compressed fonts."
+
+        config LV_USE_FONT_SUBPX
+            bool "Enable subpixel rendering."
+
+        config LV_FONT_SUBPX_BGR
+            bool "Use BGR instead RGB for sub-pixel rendering."
+            depends on LV_USE_FONT_SUBPX
+            help
+                Set the pixel order of the display.
+                Important only if "subpx fonts" are used.
+                With "normal" font it doesn't matter.
     endmenu
 
     menu "Text Settings"
@@ -604,9 +639,6 @@ menu "LVGL configuration"
         config LV_USE_CHECKBOX
             bool "Check Box"
             default y if !LV_CONF_MINIMAL
-        config LV_USE_CHART
-            bool "Chart."
-            default y if !LV_CONF_MINIMAL
         config LV_USE_DROPDOWN
             bool "Drop down list. Requires: lv_label."
             select LV_USE_LABEL
@@ -618,18 +650,17 @@ menu "LVGL configuration"
         config LV_USE_LABEL
             bool "Label."
             default y if !LV_CONF_MINIMAL
-        config LV_LABEL_TEXT_SEL
+        config LV_LABEL_TEXT_SELECTION
             bool "Enable selecting text of the label."
             depends on LV_USE_LABEL
+            default y
         config LV_LABEL_LONG_TXT_HINT
             bool "Store extra some info in labels (12 bytes) to speed up drawing of very long texts."
             depends on LV_USE_LABEL
+            default y
         config LV_USE_LINE
             bool "Line."
             default y if !LV_CONF_MINIMAL
-        config LV_USE_METER
-            bool "Meter."
-            default y if !LV_CONF_MINIMAL
         config LV_USE_ROLLER
             bool "Roller. Requires: lv_label."
             select LV_USE_LABEL
@@ -643,15 +674,14 @@ menu "LVGL configuration"
             select LV_USE_BAR
             default y if !LV_CONF_MINIMAL
         config LV_USE_SWITCH
-            bool "Switch. Dependencies: lv_slider."
-            select LV_USE_SLIDER
+            bool "Switch."
             default y if !LV_CONF_MINIMAL
         config LV_USE_TEXTAREA
             bool "Text area. Requires: lv_label."
             select LV_USE_LABEL
             default y if !LV_CONF_MINIMAL
-        config LV_TEXTAREA_DEF_PWN_SHOW_TIME
-            int "Text area def. pwn show time [ms]."
+        config LV_TEXTAREA_DEF_PWD_SHOW_TIME
+            int "Text area def. pwd show time [ms]."
             default 1500
             depends on LV_USE_TEXTAREA
         config LV_USE_TABLE
@@ -659,10 +689,9 @@ menu "LVGL configuration"
             default y if !LV_CONF_MINIMAL
     endmenu
 
-    menu "Extra components"
-	config LV_USE_ANIMIMG
+    menu "Extra Widgets"
+        config LV_USE_ANIMIMG
             bool "Anim image."
-            select LV_USE_IMG
             default y if !LV_CONF_MINIMAL
         config LV_USE_CALENDAR
             bool "Calendar."
@@ -672,43 +701,155 @@ menu "LVGL configuration"
             depends on LV_USE_CALENDAR
         config LV_USE_CALENDAR_HEADER_ARROW
             bool "Use calendar header arrow"
+            depends on LV_USE_CALENDAR
             default y
         config LV_USE_CALENDAR_HEADER_DROPDOWN
             bool "Use calendar header dropdown"
+            depends on LV_USE_CALENDAR
             default y
+        config LV_USE_CHART
+            bool "Chart."
+            default y if !LV_CONF_MINIMAL
         config LV_USE_COLORWHEEL
             bool "Colorwheel."
+            default y if !LV_CONF_MINIMAL
         config LV_USE_IMGBTN
             bool "Imgbtn."
+            default y if !LV_CONF_MINIMAL
         config LV_USE_KEYBOARD
             bool "Keyboard."
+            default y if !LV_CONF_MINIMAL
         config LV_USE_LED
             bool "LED."
+            default y if !LV_CONF_MINIMAL
         config LV_USE_LIST
             bool "List."
+            default y if !LV_CONF_MINIMAL
+        config LV_USE_METER
+            bool "Meter."
+            default y if !LV_CONF_MINIMAL
         config LV_USE_MSGBOX
             bool "Msgbox."
+            default y if !LV_CONF_MINIMAL
         config LV_USE_SPINBOX
             bool "Spinbox."
+            default y if !LV_CONF_MINIMAL
         config LV_USE_SPINNER
             bool "Spinner."
+            default y if !LV_CONF_MINIMAL
         config LV_USE_TABVIEW
             bool "Tabview."
+            default y if !LV_CONF_MINIMAL
         config LV_USE_TILEVIEW
             bool "Tileview"
+            default y if !LV_CONF_MINIMAL
         config LV_USE_WIN
             bool "Win"
+            default y if !LV_CONF_MINIMAL
         config LV_USE_SPAN
             bool "span"
+            default y if !LV_CONF_MINIMAL
+        config LV_SPAN_SNIPPET_STACK_SIZE
+            int "Maximum number of span descriptor"
+            default 64
+            depends on LV_USE_SPAN
+    endmenu
+
+    menu "Themes"
+        config LV_USE_THEME_DEFAULT
+            bool "A simple, impressive and very complete theme"
+            default y if !LV_CONF_MINIMAL
+        config LV_THEME_DEFAULT_DARK
+            bool "Yes to set dark mode, No to set light mode"
+            depends on LV_USE_THEME_DEFAULT
+        config LV_THEME_DEFAULT_GROW
+            bool "Enable grow on press"
+            default y
+            depends on LV_USE_THEME_DEFAULT
+        config LV_THEME_DEFAULT_TRANSITION_TIME
+            int "Default transition time in [ms]"
+            default 80
+            depends on LV_USE_THEME_DEFAULT
+        config LV_USE_THEME_BASIC
+            bool "A very simple theme that is a good starting point for a custom theme"
+            default y if !LV_CONF_MINIMAL
     endmenu
 
     menu "Layouts"
         config LV_USE_FLEX
             bool "A layout similar to Flexbox in CSS."
-            default y
+            default y if !LV_CONF_MINIMAL
         config LV_USE_GRID
             bool "A layout similar to Grid in CSS."
-            default y
+            default y if !LV_CONF_MINIMAL
     endmenu
 
+    menu "3rd Party Libraries"
+        config LV_USE_FS_STDIO
+            int "File system on top of stdio API"
+            default 0
+        config LV_FS_STDIO_PATH
+            string "Set the working directory"
+            depends on LV_USE_FS_STDIO
+
+        config LV_USE_FS_POSIX
+            int "File system on top of posix API"
+            default 0
+        config LV_FS_POSIX_PATH
+            string "Set the working directory"
+            depends on LV_USE_FS_POSIX
+
+        config LV_USE_FS_WIN32
+            int "File system on top of Win32 API"
+            default 0
+        config LV_FS_WIN32_PATH
+            string "Set the working directory"
+            depends on LV_USE_FS_WIN32
+
+        config LV_USE_FS_FATFS
+            int "File system on top of FatFS"
+            default 0
+
+        config LV_USE_PNG
+            bool "PNG decoder library"
+
+        config LV_USE_BMP
+            bool "BMP decoder library"
+
+        config LV_USE_SJPG
+            bool "JPG + split JPG decoder library"
+
+        config LV_USE_GIF
+            bool "GIF decoder library"
+
+        config LV_USE_QRCODE
+            bool "QR code library"
+
+        config LV_USE_FREETYPE
+            bool "FreeType library"
+        config LV_FREETYPE_CACHE_SIZE
+            int "Memory used by FreeType to cache characters [bytes] (-1: no caching)"
+            depends on LV_USE_FREETYPE
+            default 16384
+
+        config LV_USE_RLOTTIE
+            bool "Lottie library"
+    endmenu
+
+    menu "Others"
+        config LV_USE_SNAPSHOT
+            bool "Enable API to take snapshot"
+            default y if !LV_CONF_MINIMAL
+    endmenu
+
+    menu "Examples"
+        config LV_BUILD_EXAMPLES
+            bool "Enable the examples to be built"
+            default y if !LV_CONF_MINIMAL
+    endmenu
+
+    config LV_BUILD_EXAMPLES
+        bool "Enable the examples to be built with the library."
+        default y
+
 endmenu

LICENCE.txt

@@ -1,5 +1,5 @@
 MIT licence
-Copyright (c) 2020 LVGL LLC
+Copyright (c) 2021 LVGL Kft
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -1,46 +1,52 @@
-**The master branch now contains the test version of v8. For the last v7 version use the release/v7 branch.** 
-
-
 <h1 align="center"> LVGL - Light and Versatile Graphics Library</h1>
 
 <p align="center">
-<img src="https://lvgl.io/assets/images/img_1.png">
+<img src="https://lvgl.io/assets/images/lvgl_widgets_demo.gif">
 </p>
 
 <p align="center">
-LVGL provides everything you need to create embedded GUI with easy-to-use graphical elements, beautiful visual effects and low memory footprint.
+LVGL provides everything you need to create an embedded GUI with easy-to-use graphical elements, beautiful visual effects and a low memory footprint.
 </p>
 
 <h4 align="center">
 <a href="https://lvgl.io">Website </a> &middot;
-<a href="https://lvgl.io/demos">Online demo</a> &middot;
-<a href="https://lvgl.github.io/lv_examples/">Nightly demos</a> &middot;
 <a href="https://docs.lvgl.io/">Docs</a> &middot;
-<a href="https://forum.lvgl.io">Forum</a>
+<a href="https://forum.lvgl.io">Forum</a>  &middot;
+<a href="https://lvgl.io/services">Services</a>  &middot;
+<a href="https://docs.lvgl.io/master/examples.html">Interactive examples</a>
 </h4>
 
 ---
 
-## Features
-* Powerful [building blocks](https://docs.lvgl.io/latest/en/html/widgets/index.html): buttons, charts, lists, sliders, images, etc.
-* Advanced graphics: animations, anti-aliasing, opacity, smooth scrolling
-* Use [various input devices](https://docs.lvgl.io/latest/en/html/overview/indev.html): touchscreen, mouse, keyboard, encoder, buttons, etc.
-* Use [multiple displays](https://docs.lvgl.io/latest/en/html/overview/display.html): e.g. monochrome and color display
-* Hardware independent to use with any microcontroller or display
-* Scalable to operate with little memory (64 kB Flash, 10 kB RAM)
-* Multi-language support with UTF-8 handling, Bidirectional and Arabic script support
-* Fully customizable graphical elements via [CSS-like styles](https://docs.lvgl.io/latest/en/html/overview/style.html)
-* OS, External memory and GPU are supported but not required
-* Smooth rendering even with a [single frame buffer](https://docs.lvgl.io/latest/en/html/porting/display.html)
-* Written in C for maximal compatibility (C++ compatible)
+#### Table of content
+- [Overview](#overview)
+- [Get started](#get-started)
+- [Examples](#examples)
+- [Services](#services)
+- [Contributing](#contributing)
+
+
+## Overview
+### Features
+* Powerful [building blocks](https://docs.lvgl.io/master/widgets/index.html): buttons, charts, lists, sliders, images, etc.
+* Advanced graphics engine: animations, anti-aliasing, opacity, smooth scrolling, blending modes, etc
+* Supports [various input devices](https://docs.lvgl.io/master/overview/indev.html): touchscreen, mouse, keyboard, encoder, buttons, etc.
+* Supports [multiple displays](https://docs.lvgl.io/master/overview/display.html)
+* Hardware independent, can be use with any microcontroller and display
+* Scalable to operate with little memory (64 kB Flash, 16 kB RAM)
+* Multi-language support with UTF-8 handling, CJK, Bidirectional and Arabic script support
+* Fully customizable graphical elements via [CSS-like styles](https://docs.lvgl.io/master/overview/style.html)
+* Powerful layouts inspired by CSS: [Flexbox](https://docs.lvgl.io/master/layouts/flex.html) and [Grid](https://docs.lvgl.io/master/layouts/grid.html)
+* OS, External memory and GPU are supported but not required. (built in support for STM32 DMA2D, and NXP PXP and VGLite)
+* Smooth rendering even with a [single frame buffer](https://docs.lvgl.io/master/porting/display.html)
+* Written in C and compatibile with C++
 * Micropython Binding exposes [LVGL API in Micropython](https://blog.lvgl.io/2019-02-20/micropython-bindings)
-* [Simulator](https://docs.lvgl.io/latest/en/html/get-started/pc-simulator.html) to develop on PC without embedded hardware
-* [Examples](lv_examples) and tutorials for rapid development
-* [Documentation](http://docs.lvgl.io/) and API references
+* [Simulator](https://docs.lvgl.io/master/get-started/pc-simulator.html) to develop on PC without embedded hardware
+* 100+ simple [Examples](https://github.com/lvgl/lvgl/tree/master/examples)
+* [Documentation](http://docs.lvgl.io/) and API references online and in PDF
 
-## Requirements
+### Requirements
 Basically, every modern controller (which is able to drive a display) is suitable to run LVGL. The minimal requirements are:
-
 <table>
   <tr>
     <td> <strong>Name</strong> </td>
@@ -65,26 +71,14 @@ Basically, every modern controller (which is able to drive a display) is suitabl
 
   <tr>
     <td> <strong>Static RAM</strong></td>
-    <td> &gt; 2 kB </td>
-    <td> &gt; 4 kB</td>
+    <td> &gt; 16 kB </td>
+    <td> &gt; 48 kB</td>
   </tr>
 
   <tr>
-    <td> <strong>Stack</strong></td>
-    <td> &gt; 2 kB </td>
-    <td> &gt; 8 kB</td>
-  </tr>
-
-  <tr>
-    <td> <strong>Heap</strong></td>
-    <td> &gt; 2 kB </td>
-    <td> &gt; 8 kB</td>
-  </tr>
-
-  <tr>
-    <td> <strong>Display buffer</strong></td>
+    <td> <strong>Draw buffer</strong></td>
     <td> &gt; 1 &times; <em>hor. res.</em> pixels </td>
-    <td> &gt; 10 &times; <em>hor. res.</em> pixels </td>
+    <td> &gt; 1/10 screen size </td>
   </tr>
 
   <tr>
@@ -95,10 +89,12 @@ Basically, every modern controller (which is able to drive a display) is suitabl
 
 *Note that the memory usage might vary depending on the architecture, compiler and build options.*
 
+### Supported platforms
+LVGL is completely platform independent and can be used with any MCU that fulfills the requirements. 
 Just to mention some platforms:
+- NXP: Kinetis, LPC, iMX, iMX RT
 - STM32F1, STM32F3, STM32F4, STM32F7, STM32L4, STM32L5, STM32H7
 - Microchip dsPIC33, PIC24, PIC32MX, PIC32MZ
-- NXP: Kinetis, LPC, iMX, iMX RT
 - [Linux frame buffer](https://blog.lvgl.io/2018-01-03/linux_fb) (/dev/fb)
 - [Raspberry Pi](http://www.vk3erw.com/index.php/16-software/63-raspberry-pi-official-7-touchscreen-and-littlevgl)
 - [Espressif ESP32](https://github.com/lvgl/lv_port_esp32)
@@ -106,59 +102,80 @@ Just to mention some platforms:
 - Nordic NRF52 Bluetooth modules
 - Quectel modems
 
+LVGL is also avaiable as:
+- [Arduino library](https://docs.lvgl.io/master/get-started/arduino.html)
+- [PlatformIO package](https://platformio.org/lib/show/12440/lvgl)
+- [Zephyr library](https://docs.zephyrproject.org/latest/reference/kconfig/CONFIG_LVGL.html)
+- [ESP32 component](https://docs.lvgl.io/master/get-started/espressif.html)
+- [NXP MCUXpresso component](https://www.nxp.com/design/software/embedded-software/lvgl-open-source-graphics-library:LITTLEVGL-OPEN-SOURCE-GRAPHICS-LIBRARY)
+- [NuttX library](https://docs.lvgl.io/master/get-started/nuttx.html)
+
+
 ## Get started
 This list shows the recommended way of learning the library:
 1. Check the [Online demos](https://lvgl.io/demos) to see LVGL in action (3 minutes)
-2. Read the [Introduction](https://docs.lvgl.io/latest/en/html/intro/index.html) page of the documentation (5 minutes)
-3. Get familiar with the basics on the [Quick overview](https://docs.lvgl.io/latest/en/html/get-started/quick-overview.html) page (15 minutes)
-4. Set up a [Simulator](https://docs.lvgl.io/latest/en/html/get-started/pc-simulator.html) (10 minutes)
-5. Try out some [Examples](https://github.com/lvgl/lv_examples/)
-6. Port LVGL to a board. See the [Porting](https://docs.lvgl.io/latest/en/html/porting/index.html) guide or check the ready to use [Projects](https://github.com/lvgl?q=lv_port_&type=&language=)
-7. Read the [Overview](https://docs.lvgl.io/latest/en/html/overview/index.html) page to get a better understanding of the library (2-3 hours)
-8. Check the documentation of the [Widgets](https://docs.lvgl.io/latest/en/html/widgets/index.html) to see their features and usage
+2. Read the [Introduction](https://docs.lvgl.io/master/intro/index.html) page of the documentation (5 minutes)
+3. Get familiar with the basics on the [Quick overview](https://docs.lvgl.io/master/get-started/quick-overview.html) page (15 minutes)
+4. Set up a [Simulator](https://docs.lvgl.io/master/get-started/pc-simulator.html) (10 minutes)
+5. Try out some [Examples](https://github.com/lvgl/lvgl/tree/master/examples)
+6. Port LVGL to a board. See the [Porting](https://docs.lvgl.io/master/porting/index.html) guide or check the ready to use [Projects](https://github.com/lvgl?q=lv_port_)
+7. Read the [Overview](https://docs.lvgl.io/master/overview/index.html) page to get a better understanding of the library (2-3 hours)
+8. Check the documentation of the [Widgets](https://docs.lvgl.io/master/widgets/index.html) to see their features and usage
 9. If you have questions go to the [Forum](http://forum.lvgl.io/)
-10. Read the [Contributing](https://docs.lvgl.io/latest/en/html/contributing/index.html) guide to see how you can help to improve LVGL (15 minutes)
+10. Read the [Contributing](https://docs.lvgl.io/master/CONTRIBUTING.html) guide to see how you can help to improve LVGL (15 minutes)
 
 ## Examples
 
-For more examples see the [lv_examples](https://github.com/lvgl/lv_examples) repository.
+For more examples see the [examples](https://github.com/lvgl/lvgl/tree/master/examples) folder.
 
-### Button with label
+![LVGL button with label example](https://github.com/lvgl/lvgl/raw/master/docs/misc/btn_example.png)
+
+### C
 ```c
-lv_obj_t * btn = lv_btn_create(lv_scr_act(), NULL);     /*Add a button to the current screen*/
-lv_obj_set_pos(btn, 10, 10);                            /*Set its position*/
-lv_obj_set_size(btn, 100, 50);                          /*Set its size*/
-lv_obj_set_event_cb(btn, btn_event_cb);                 /*Assign a callback to the button*/
-
-lv_obj_t * label = lv_label_create(btn, NULL);          /*Add a label to the button*/
-lv_label_set_text(label, "Button");                     /*Set the labels text*/
+lv_obj_t * btn = lv_btn_create(lv_scr_act());                   /*Add a button to the current screen*/
+lv_obj_set_pos(btn, 10, 10);                                    /*Set its position*/
+lv_obj_set_size(btn, 100, 50);                                  /*Set its size*/
+lv_obj_add_event_cb(btn, btn_event_cb, LV_EVENT_CLICKED, NULL); /*Assign a callback to the button*/
 
+lv_obj_t * label = lv_label_create(btn);                        /*Add a label to the button*/
+lv_label_set_text(label, "Button");                             /*Set the labels text*/
+lv_obj_center(label);                                           /*Align the label to the center*/
 ...
 
-void btn_event_cb(lv_obj_t * btn, lv_event_t event)
+void btn_event_cb(lv_event_t * e)
 {
-    if(event == LV_EVENT_CLICKED) {
-        printf("Clicked\n");
-    }
+  printf("Clicked\n");
 }
 ```
-![LVGL button with label example](https://raw.githubusercontent.com/lvgl/docs/latest/misc/simple_button_example.gif)
-
-### LVGL from Micropython
-Learn more about [Micropython](https://docs.lvgl.io/latest/en/html/get-started/micropython.html).
+### Micropython
+Learn more about [Micropython](https://docs.lvgl.io/master/get-started/micropython.html).
 ```python
+def btn_event_cb(e):
+  print("Clicked")
+
 # Create a Button and a Label
-scr = lv.obj()
-btn = lv.btn(scr)
-btn.align(lv.scr_act(), lv.ALIGN.CENTER, 0, 0)
+btn = lv.btn(lv.scr_act())
+btn.set_pos(10, 10)
+btn.set_size(100, 50)
+btn.add_event_cb(btn_event_cb, lv.EVENT.CLICKED, None)
+
 label = lv.label(btn)
 label.set_text("Button")
-
-# Load the screen
-lv.scr_load(scr)
+label.center()
 ```
 
-## Contributing
-LVGL is an open project and contribution is very welcome. There are many ways to contribute from simply speaking about your project, through writing examples, improving the documentation, fixing bugs to hosing your own project under in LVGL.
+## Services
+LVGL Kft was established to provide a solid background for LVGL library. We offer several type of services to help you in UI development:
+- Graphics design
+- UI implementation
+- Consulting/Support
+
+For more information see https://lvgl.io/services
+Feel free to contact us if you have any questions.
+
+
+## Contributing
+LVGL is an open project and contribution is very welcome. There are many ways to contribute from simply speaking about your project, through writing examples, improving the documentation, fixing bugs to hosting your own project under the LVGL organization.
+
+For a detailed description of contribution opportunities visit the [Contributing](https://docs.lvgl.io/master/CONTRIBUTING.html) section of the documentation.
  
-For a detailed description of contribution opportunities visit the [Contributing](https://docs.lvgl.io/latest/en/html/contributing/index.html) section of the documentation.

SConscript

@@ -0,0 +1,11 @@
+# RT-Thread building script for bridge
+
+import os
+from building import *
+
+objs = []
+cwd  = GetCurrentDir()
+
+objs = objs + SConscript(cwd + '/rt-thread/SConscript')
+
+Return('objs')

docs/CHANGELOG.md

@@ -1,5 +1,612 @@
 # Changelog
 
+## [v8.1.0](https://github.com/lvgl/lvgl/compare/v8.0.2...v8.1.0) 10 November 2021
+
+### Overview
+v8.1 is minor release so besides many fixes it contains a lot of new features too. 
+
+Some of the most important features are
+- Built in support for SDL based GPU drawing
+- Much faster circle drawing in the software renderer
+- Several [3rd party libraries](https://docs.lvgl.io/master/libs/index.html) are merged directly into LVGL. 
+- Add LVGL as an [RT-Thread](https://packages.rt-thread.org/en/detail.html?package=LVGL) and [ESP32](https://components.espressif.com/component/lvgl/lvgl) component
+
+### Breaking Changes
+
+- :warning: feat(calendar): add the header directly into the calendar widget [`2e08f80`](https://github.com/lvgl/lvgl/commit/2e08f80361a9d7e5b97f49af6afc3549ffbf2758)
+
+### Architectural
+
+- arch add small 3rd party libs to lvgl  [`2569`](https://github.com/lvgl/lvgl/pull/2569)
+
+### New Features
+
+- feat(display) add direct_mode drawing mode [`2460`](https://github.com/lvgl/lvgl/pull/2460)
+- feat(conf): make LV_MEM_BUF_MAX_NUM configurable [`2747`](https://github.com/lvgl/lvgl/pull/2747)
+- feat(disp): add non-fullscreen display utilities [`2724`](https://github.com/lvgl/lvgl/pull/2724)
+- feat(rlottie) add LVGL-Rlottie interface as 3rd party lib [`2700`](https://github.com/lvgl/lvgl/pull/2700)
+- feat(rtthread): prepare for porting the device-driver of rt-thread [`2719`](https://github.com/lvgl/lvgl/pull/2719)
+- feat(fsdrv) add driver based on Win32 API [`2701`](https://github.com/lvgl/lvgl/pull/2701)
+- feat(span) indent supports percent for fix and break mode [`2693`](https://github.com/lvgl/lvgl/pull/2693)
+- feat(rt-thread): implement rt-thread sconscirpt [`2674`](https://github.com/lvgl/lvgl/pull/2674)
+- feat(lv_spinbox) support both right-to-left and left-to-right digit steps when clicking encoder button [`2644`](https://github.com/lvgl/lvgl/pull/2644)
+- feat add support for rt-thread RTOS [`2660`](https://github.com/lvgl/lvgl/pull/2660)
+- feat(disp): Enable rendering to display subsection [`2583`](https://github.com/lvgl/lvgl/pull/2583)
+- feat(keyboard): add user-defined modes [`2651`](https://github.com/lvgl/lvgl/pull/2651)
+- feat(event) add LV_EVENT_CHILD_CREATED/DELETED [`2618`](https://github.com/lvgl/lvgl/pull/2618)
+- feat(btnmatrix/keyboard): add option to show popovers on button press [`2537`](https://github.com/lvgl/lvgl/pull/2537)
+- feat(msgbox) add a content area for custom content [`2561`](https://github.com/lvgl/lvgl/pull/2561)
+- feat(tests): Include debug information to test builds [`2568`](https://github.com/lvgl/lvgl/pull/2568)
+- feat(drawing) hardware accelerated rendering by SDL2 [`2484`](https://github.com/lvgl/lvgl/pull/2484)
+- feat(msgbox): omit title label unless needed [`2539`](https://github.com/lvgl/lvgl/pull/2539)
+- feat(msgbox): add function to get selected button index [`2538`](https://github.com/lvgl/lvgl/pull/2538)
+- feat(make) add lvgl interface target for micropython [`2529`](https://github.com/lvgl/lvgl/pull/2529)
+- feat(obj) add lv_obj_move_to_index(obj, index), renamed lv_obj_get_child_id(obj) to lv_obj_get_index(obj) [`2514`](https://github.com/lvgl/lvgl/pull/2514)
+- feat(obj) add lv_obj_swap() function [`2461`](https://github.com/lvgl/lvgl/pull/2461)
+- feat(mem) LV_MEM_POOL_ALLOC [`2458`](https://github.com/lvgl/lvgl/pull/2458)
+- feat(switch) add smooth animation when changing state [`2442`](https://github.com/lvgl/lvgl/pull/2442)
+- feat(anim) add interface for handling lv_anim user data. [`2415`](https://github.com/lvgl/lvgl/pull/2415)
+- feat(obj) add lv_is_initialized [`2402`](https://github.com/lvgl/lvgl/pull/2402)
+- feat(obj) Backport keypad and encoder scrolling from v7 `lv_page` to v8 `lv_obj` [`2390`](https://github.com/lvgl/lvgl/pull/2390)
+- feat(snapshot) add API to take snapshot for object [`2353`](https://github.com/lvgl/lvgl/pull/2353)
+- feat(anim) add anim timeline [`2309`](https://github.com/lvgl/lvgl/pull/2309)
+- feat(span) Add missing spangroup functions  [`2379`](https://github.com/lvgl/lvgl/pull/2379)
+- feat(img) add img_size property [`2284`](https://github.com/lvgl/lvgl/pull/2284)
+- feat(calendar) improve MicroPython example [`2366`](https://github.com/lvgl/lvgl/pull/2366)
+- feat(spinbox ) add function to set cursor to specific position [`2314`](https://github.com/lvgl/lvgl/pull/2314)
+
+- feat(timer) check if lv_tick_inc is called [`aa6641a`](https://github.com/lvgl/lvgl/commit/aa6641a6f1c1311ce7e0f94783ee7f582452a88f)
+- feat(event, widgets) improve the paramter of LV_EVENT_DRAW_PART_BEGIN/END [`88c4859`](https://github.com/lvgl/lvgl/commit/88c485949fca2686357a7dee88d5730678ba9bc7)
+- feat(docs) improvements to examples [`4b8c73a`](https://github.com/lvgl/lvgl/commit/4b8c73a5770657ab55bbe825f7887e28c55a8a4a)
+- feat(obj) send LV_EVENT_DRAW_PART_BEGIN/END for MAIN and SCROLLBAR parts [`b203167`](https://github.com/lvgl/lvgl/commit/b203167c7583905e2cb4006e57a16432841a2353)
+- feat(led) send LV_EVENT_DRAW_PART_BEGIN/END [`fcd4aa3`](https://github.com/lvgl/lvgl/commit/fcd4aa3924469c2a92ab6a04b7bc6de6304cc54a)
+- feat(chart) send LV_EVENT_DRAW_PART_BEGIN/END before/after the division line drawing section. [`e0ae2aa`](https://github.com/lvgl/lvgl/commit/e0ae2aa106874b1cf60ba54dd043cde8f834f7e9)
+- feat(tests) upload coverage to codecov [`4fff99d`](https://github.com/lvgl/lvgl/commit/4fff99da1dd2f8bd0c1e0012d81d46aaadb0d5a3)
+- feat(conf) add better check for Kconfig default [`f8fe536`](https://github.com/lvgl/lvgl/commit/f8fe5366bb051cd5090e4a06658eb0d32decc0b3)
+- feat(draw) add LV_BLEND_MODE_MULTIPLY [`cc78ef4`](https://github.com/lvgl/lvgl/commit/cc78ef450649a10f260649dc3ba19ac8a6b88e86)
+- feat(test) add assert for screenshot compare [`2f7a005`](https://github.com/lvgl/lvgl/commit/2f7a005bd31c10d0a048f55641e4af11bcb5bbfa)
+- feat(event) pass the scroll aniamtion to LV_EVENT_SCROLL_BEGIN [`ca54ecf`](https://github.com/lvgl/lvgl/commit/ca54ecfe0eac880203d23b2d2244b9b63b9f7b77)
+- feat(obj) place the scrollbar to the left with RTL base dir. [`906448e`](https://github.com/lvgl/lvgl/commit/906448ef6321f160859f21c5937180bb89d8ef1e)
+- feat(log) allow overwriting LV_LOG_... macros [`17b8a76`](https://github.com/lvgl/lvgl/commit/17b8a76c4a887c9cf464484406a6631ea0194ad5)
+- feat(arc) add support to LV_OBJ_FLAG_ADV_HITTEST [`dfa4f5c`](https://github.com/lvgl/lvgl/commit/dfa4f5cff561a60b4ffcec17e025f1e056854fff)
+- feat(event) add LV_SCREEN_(UN)LOAD_START [`7bae9e3`](https://github.com/lvgl/lvgl/commit/7bae9e3ddde9d6bdc06ae437f20a789cd330a556)
+- feat(obj) add lv_obj_del_delayed() [`c6a2e15`](https://github.com/lvgl/lvgl/commit/c6a2e15ec23c8e96f71bafa8e43ef67fc4a73d0a)
+- feat(docs) add view on GitHub link [`a716ac6`](https://github.com/lvgl/lvgl/commit/a716ac6ed267e0a2e019fe7d2fda1bef0046cdc7)
+- feat(event) add LV_EVENT_SCREEN_LOADED/UNLOADED events [`ee5369e`](https://github.com/lvgl/lvgl/commit/ee5369e2d2ce12f47c78a2bf339aa6fb2421ba2b)
+- feat(textarea) remove the need of lv_textarea_set_align [`56ebb1a`](https://github.com/lvgl/lvgl/commit/56ebb1a4c8cc988482ac9f118fa3c654553db941)
+- feat(rt-thread): support LVGL projects with GCC/Keil(AC5)/Keil(AC6)/IAR [`32d33fe`](https://github.com/lvgl/lvgl/commit/32d33fe4d9a38f6c215a6b9a631eb987339677ae)
+- feat(docs) lazy load individual examples as well [`918d948`](https://github.com/lvgl/lvgl/commit/918d94801f2ee4ad7b6c075d96d2e9195459fbb8)
+
+- feat: add LV_USE_MEM_PERF/MONITOR_POS [`acd0f4f`](https://github.com/lvgl/lvgl/commit/acd0f4fbc71ffbfeb382b7af1fa52caf3cdcda6c)
+- feat(canvas) add lv_canvas_set_px_opa [`b3b3ffc`](https://github.com/lvgl/lvgl/commit/b3b3ffc2b3b322f7401d15c4ba2ef0cdb00e2990)
+- feat(event) add lv_obj_remove_event_cb_with_user_data [`4eddeb3`](https://github.com/lvgl/lvgl/commit/4eddeb35abee1f9cd2d1fd210f11cc096cb609c7)
+- feat(obj) add lv_obj_get_x/y_aligned [`98bc1fe`](https://github.com/lvgl/lvgl/commit/98bc1fe09e12a64333e91b4c25327c283a700af5)
+
+### Performance
+
+- perf(draw) reimplement circle drawing algorithms [`2374`](https://github.com/lvgl/lvgl/pull/2374)
+- perf(anim_timeline) add lv_anim_timeline_stop() [`2411`](https://github.com/lvgl/lvgl/pull/2411)
+
+- perf(obj) remove lv_obj_get_child_cnt from cycle limit checks [`ebb9ce9`](https://github.com/lvgl/lvgl/commit/ebb9ce913e604055724fd5f72562c9de0933ff73)
+- perf(draw) reimplement rectangle drawing algorithms [`5b3d3dc`](https://github.com/lvgl/lvgl/commit/5b3d3dc8b35bdd16e5dea00ffc40b7a20471079d)
+- perf(draw) ignore masks if they don't affect the current draw area [`a842791`](https://github.com/lvgl/lvgl/commit/a8427915c747dfe562f7f7e80adb6d1be5b2eeae)
+- perf(refresh) optimize where to wait for lv_disp_flush_ready with 2 buffers [`d0172f1`](https://github.com/lvgl/lvgl/commit/d0172f14a454c98e6979322e7c2622a7001bb3e6)
+- perf(draw) speed up additive blending [`3abe517`](https://github.com/lvgl/lvgl/commit/3abe517abf3b62366f2eb4bed77d5c7a691f7ed5)
+
+### Fixes
+
+- fix(bidi): add weak characters to the previous strong character's run [`2777`](https://github.com/lvgl/lvgl/pull/2777)
+- fix(draw_img): radius mask doesn't work in specific condition [`2786`](https://github.com/lvgl/lvgl/pull/2786)
+- fix(border_post): ignore bg_img_opa draw when draw border_post [`2788`](https://github.com/lvgl/lvgl/pull/2788)
+- fix(refresh) switch to portable format specifiers [`2781`](https://github.com/lvgl/lvgl/pull/2781)
+- fix(stm32) Mark unused variable in stm32 DMA2D driver [`2782`](https://github.com/lvgl/lvgl/pull/2782)
+- fix(conf): Make LV_COLOR_MIX_ROUND_OFS configurable  [`2766`](https://github.com/lvgl/lvgl/pull/2766)
+- fix(misc): correct the comment and code style [`2769`](https://github.com/lvgl/lvgl/pull/2769)
+- fix(draw_map) use existing variables instead function calls  [`2776`](https://github.com/lvgl/lvgl/pull/2776)
+- fix(draw_img): fix typos in API comments [`2773`](https://github.com/lvgl/lvgl/pull/2773)
+- fix(draw_img):radius Mask doesn't work in Specific condition [`2775`](https://github.com/lvgl/lvgl/pull/2775)
+- fix(proto) Remove redundant prototype declarations [`2771`](https://github.com/lvgl/lvgl/pull/2771)
+- fix(conf) better support bool option from Kconfign [`2555`](https://github.com/lvgl/lvgl/pull/2555)
+- fix(draw_border):draw error if radius == 0 and parent clip_corner == true [`2764`](https://github.com/lvgl/lvgl/pull/2764)
+- fix(msgbox) add declaration for lv_msgbox_content_class [`2761`](https://github.com/lvgl/lvgl/pull/2761)
+- fix(core) add L suffix to enums to ensure 16-bit compatibility [`2760`](https://github.com/lvgl/lvgl/pull/2760)
+- fix(anim): add lv_anim_get_playtime [`2745`](https://github.com/lvgl/lvgl/pull/2745)
+- fix(area) minor fixes [`2749`](https://github.com/lvgl/lvgl/pull/2749)
+- fix(mem): ALIGN_MASK should equal 0x3 on 32bit platform [`2748`](https://github.com/lvgl/lvgl/pull/2748)
+- fix(template) prototype error [`2755`](https://github.com/lvgl/lvgl/pull/2755)
+- fix(anim): remove time_orig from lv_anim_t [`2744`](https://github.com/lvgl/lvgl/pull/2744)
+- fix(draw_rect):bottom border lost if enable clip_corner [`2742`](https://github.com/lvgl/lvgl/pull/2742)
+- fix(anim) and improvement [`2738`](https://github.com/lvgl/lvgl/pull/2738)
+- fix(draw border):border draw error if border width > radius [`2739`](https://github.com/lvgl/lvgl/pull/2739)
+- fix(fsdrv): remove the seek call in fs_open [`2736`](https://github.com/lvgl/lvgl/pull/2736)
+- fix(fsdrv): skip the path format if LV_FS_xxx_PATH not defined [`2726`](https://github.com/lvgl/lvgl/pull/2726)
+- fix: mark unused variable with LV_UNUSED(xxx) instead of (void)xxx [`2734`](https://github.com/lvgl/lvgl/pull/2734)
+- fix(fsdrv): fix typo error in commit 752fba34f677ad73aee [`2732`](https://github.com/lvgl/lvgl/pull/2732)
+- fix(fsdrv): return error in case of the read/write failure [`2729`](https://github.com/lvgl/lvgl/pull/2729)
+- fix(refr) silence compiler warning due to integer type mismatch [`2722`](https://github.com/lvgl/lvgl/pull/2722)
+- fix(fs): fix the off-by-one error in the path function [`2725`](https://github.com/lvgl/lvgl/pull/2725)
+- fix(timer): remove the code duplication in lv_timer_exec [`2708`](https://github.com/lvgl/lvgl/pull/2708)
+- fix(async): remove the wrong comment from lv_async_call [`2707`](https://github.com/lvgl/lvgl/pull/2707)
+- fix(kconfig): change CONFIG_LV_THEME_DEFAULT_FONT to CONFIG_LV_FONT_DEFAULT [`2703`](https://github.com/lvgl/lvgl/pull/2703)
+- fix add MP support for LVGL 3rd party libraries [`2666`](https://github.com/lvgl/lvgl/pull/2666)
+- fix(png) memory leak for sjpg and use lv_mem_... in lv_png [`2704`](https://github.com/lvgl/lvgl/pull/2704)
+- fix(gif) unified whence and remove off_t [`2690`](https://github.com/lvgl/lvgl/pull/2690)
+- fix(rt-thread): include the rt-thread configuration header file [`2692`](https://github.com/lvgl/lvgl/pull/2692)
+- fix(rt-thread): fix the ci error [`2691`](https://github.com/lvgl/lvgl/pull/2691)
+- fix(fsdrv) minor fs issue [`2682`](https://github.com/lvgl/lvgl/pull/2682)
+- fix(hal) fix typos and wording in docs for lv_hal_indev.h [`2685`](https://github.com/lvgl/lvgl/pull/2685)
+- fix(hal tick): add precompile !LV_TICK_CUSTOM for global variables and lv_tick_inc() [`2675`](https://github.com/lvgl/lvgl/pull/2675)
+- fix(anim_timeline) avoid calling lv_anim_del(NULL, NULL) [`2628`](https://github.com/lvgl/lvgl/pull/2628)
+- fix(kconfig) sync Kconfig with the latest lv_conf_template.h [`2662`](https://github.com/lvgl/lvgl/pull/2662)
+- fix(log) reduce the stack usage in log function [`2649`](https://github.com/lvgl/lvgl/pull/2649)
+- fix(conf) make a better style alignment in lv_conf_internal.h [`2652`](https://github.com/lvgl/lvgl/pull/2652)
+- fix(span) eliminate warning in lv_get_snippet_cnt() [`2659`](https://github.com/lvgl/lvgl/pull/2659)
+- fix(config): remove the nonexistent Kconfig [`2654`](https://github.com/lvgl/lvgl/pull/2654)
+- fix(Kconfig): add LV_MEM_ADDR config [`2653`](https://github.com/lvgl/lvgl/pull/2653)
+- fix(log): replace printf with fwrite to save the stack size [`2655`](https://github.com/lvgl/lvgl/pull/2655)
+- fix typos [`2634`](https://github.com/lvgl/lvgl/pull/2634)
+- fix LV_FORMAT_ATTRIBUTE fix for gnu > 4.4 [`2631`](https://github.com/lvgl/lvgl/pull/2631)
+- fix(meter) make lv_meter_indicator_type_t of type uint8_t [`2632`](https://github.com/lvgl/lvgl/pull/2632)
+- fix(span):crash if span->txt = "" [`2616`](https://github.com/lvgl/lvgl/pull/2616)
+- fix(disp) set default theme also for non-default displays [`2596`](https://github.com/lvgl/lvgl/pull/2596)
+- fix(label):LONG_DOT mode crash if text Utf-8 encode > 1 [`2591`](https://github.com/lvgl/lvgl/pull/2591)
+- fix( example) in lv_example_scroll_3.py float_btn should only be created once [`2602`](https://github.com/lvgl/lvgl/pull/2602)
+- fix lv_deinit when LV_USE_GPU_SDL is enabled [`2598`](https://github.com/lvgl/lvgl/pull/2598)
+- fix add missing LV_ASSERT_OBJ checks [`2575`](https://github.com/lvgl/lvgl/pull/2575)
+- fix(lv_conf_internal_gen.py)  formatting fixes on the generated file [`2542`](https://github.com/lvgl/lvgl/pull/2542)
+- fix(span) opa bug [`2584`](https://github.com/lvgl/lvgl/pull/2584)
+- fix(snapshot) snapshot is affected by parent's style because of wrong coords [`2579`](https://github.com/lvgl/lvgl/pull/2579)
+- fix(label):make draw area contain ext_draw_size [`2587`](https://github.com/lvgl/lvgl/pull/2587)
+- fix(btnmatrix): make ORed values work correctly with lv_btnmatrix_has_btn_ctrl [`2571`](https://github.com/lvgl/lvgl/pull/2571)
+- fix compiling of examples when cmake is used [`2572`](https://github.com/lvgl/lvgl/pull/2572)
+- fix(lv_textarea) fix crash while delete non-ascii character in pwd mode [`2549`](https://github.com/lvgl/lvgl/pull/2549)
+- fix(lv_log.h): remove the duplicated semicolon from LV_LOG_xxx [`2544`](https://github.com/lvgl/lvgl/pull/2544)
+- fix(zoom) multiplication overflow on 16-bit platforms [`2536`](https://github.com/lvgl/lvgl/pull/2536)
+- fix(printf) use __has_include for more accurate limits information [`2532`](https://github.com/lvgl/lvgl/pull/2532)
+- fix(font) add assert in lv_font.c if the font is NULL [`2533`](https://github.com/lvgl/lvgl/pull/2533)
+- fix(lv_types.h): remove c/c++ compiler version check [`2525`](https://github.com/lvgl/lvgl/pull/2525)
+- fix(lv_utils.c): remove the unneeded header inclusion [`2526`](https://github.com/lvgl/lvgl/pull/2526)
+- fix(Kconfig) fix the comment in LV_THEME_DEFAULT_DARK [`2524`](https://github.com/lvgl/lvgl/pull/2524)
+- fix(sprintf) add format string for rp2 port [`2512`](https://github.com/lvgl/lvgl/pull/2512)
+- fix(span) fix some bugs (overflow,decor,align) [`2518`](https://github.com/lvgl/lvgl/pull/2518)
+- fix(color) Bad cast in lv_color_mix() caused UB with 16bpp or less [`2509`](https://github.com/lvgl/lvgl/pull/2509)
+- fix(imgbtn)  displayed incorrect when the coordinate is negative [`2501`](https://github.com/lvgl/lvgl/pull/2501)
+- fix(event) be sure to move all elements in copy “lv_obj_remove_event_cb” [`2492`](https://github.com/lvgl/lvgl/pull/2492)
+- fix(draw) use correct pointer in lv_draw_mask assertion [`2483`](https://github.com/lvgl/lvgl/pull/2483)
+- feat(mem) LV_MEM_POOL_ALLOC [`2458`](https://github.com/lvgl/lvgl/pull/2458)
+- fix(cmake) require 'main' for Micropython [`2444`](https://github.com/lvgl/lvgl/pull/2444)
+- fix(docs) add static keyword to driver declaration [`2452`](https://github.com/lvgl/lvgl/pull/2452)
+- fix(build) remove main component dependency [`2420`](https://github.com/lvgl/lvgl/pull/2420)
+- fix circle drawing algorithms [`2413`](https://github.com/lvgl/lvgl/pull/2413)
+- fix(docs) wrong spelling of words in pictures [`2409`](https://github.com/lvgl/lvgl/pull/2409)
+- fix(chart) fixed point-following cursor during vertical scroll in charts [`2400`](https://github.com/lvgl/lvgl/pull/2400)
+- fix(chart) fixed cursor positioning with large Y rescaling without LV_USE_LARGE_COORD [`2399`](https://github.com/lvgl/lvgl/pull/2399)
+- fix(grid.h) typos [`2395`](https://github.com/lvgl/lvgl/pull/2395)
+- fix(anim_timeline) heap use after free [`2394`](https://github.com/lvgl/lvgl/pull/2394)
+- fix(snapshot) add missing import on MicroPython example [`2389`](https://github.com/lvgl/lvgl/pull/2389)
+- fix(disp) Fix assert failure in lv_disp_remove [`2382`](https://github.com/lvgl/lvgl/pull/2382)
+- fix(span) modify the underline position [`2376`](https://github.com/lvgl/lvgl/pull/2376)
+- fix(color) remove extraneous _LV_COLOR_MAKE_TYPE_HELPER [`2372`](https://github.com/lvgl/lvgl/pull/2372)
+- fix(spinner) should not be clickable [`2373`](https://github.com/lvgl/lvgl/pull/2373)
+- fix(workflow) silence SDL warning for MicroPython [`2367`](https://github.com/lvgl/lvgl/pull/2367)
+- fix (span) fill LV_EVENT_GET_SELF_SIZE [`2360`](https://github.com/lvgl/lvgl/pull/2360)
+- fix(workflow) change MicroPython workflow to use master [`2358`](https://github.com/lvgl/lvgl/pull/2358)
+- fix(disp) fix memory leak in lv_disp_remove [`2355`](https://github.com/lvgl/lvgl/pull/2355)
+- fix(lv_obj.h)typos [`2350`](https://github.com/lvgl/lvgl/pull/2350)
+- fix(obj) delete useless type conversion [`2343`](https://github.com/lvgl/lvgl/pull/2343)
+- fix(lv_obj_scroll.h) typos [`2345`](https://github.com/lvgl/lvgl/pull/2345)
+- fix(txt) enhance the function of break_chars [`2327`](https://github.com/lvgl/lvgl/pull/2327)
+
+- fix(vglite): update for v8 [`e3e3eea`](https://github.com/lvgl/lvgl/commit/e3e3eeaf8c1593d384c6537244a301cdc1abd3d9)
+- fix(widgets) use lv_obj_class for all the widgets [`3fb8baf`](https://github.com/lvgl/lvgl/commit/3fb8baf503411e006765020f60f295a4be16ba2d)
+- fix(refr) reduce the nesting level in lv_refr_area [`2df1282`](https://github.com/lvgl/lvgl/commit/2df12827dda3f217fa26d2c98445a9b3f1ff22ab)
+- fix(pxp): update for v8 [`8a2a4a1`](https://github.com/lvgl/lvgl/commit/8a2a4a11c81d029ff737980b883c62dfbb4b44c6)
+- fix(obj) move clean ups from lv_obj_del to lv_obj_destructor [`b063937`](https://github.com/lvgl/lvgl/commit/b06393747f61e36996a0cb22f9309c951f900ded)
+- fix (draw) fix arc bg image drawing with full arcs [`c3b6c6d`](https://github.com/lvgl/lvgl/commit/c3b6c6dc64735e1bde492a8d5570f3e3a9500a0b)
+- fix(pxp): update RTOS macro for SDK 2.10 [`00c3eb1`](https://github.com/lvgl/lvgl/commit/00c3eb197cb85e480809d97eb722589d75d81d94)
+- fix(textarea) style update in oneline mode + improve sroll to cursor [`60d9a5e`](https://github.com/lvgl/lvgl/commit/60d9a5e493bf17ee9887ba44890d00905bc55970)
+- feat(led) send LV_EVENT_DRAW_PART_BEGIN/END [`fcd4aa3`](https://github.com/lvgl/lvgl/commit/fcd4aa3924469c2a92ab6a04b7bc6de6304cc54a)
+- fix warnigs introduced by 3fb8baf5 [`e302403`](https://github.com/lvgl/lvgl/commit/e3024032dc5de2ece4fa17059ebad4189a5fa670)
+- fix(roller) fix partial redraw of the selected area [`6bc40f8`](https://github.com/lvgl/lvgl/commit/6bc40f8c4417a94ab26b25220324e471e03ce443)
+- fix(flex) fix layout update and invalidation issues [`5bd82b0`](https://github.com/lvgl/lvgl/commit/5bd82b038b841c0f7c93bbdacdbd61d6b9585846)
+- fix(indev) focus on objects on release instead of press [`76a8293`](https://github.com/lvgl/lvgl/commit/76a8293375b705a5e02e4f9c8f8a42d99db762e2)
+- fix tests [`449952e`](https://github.com/lvgl/lvgl/commit/449952e3b78d02802960dabb0207b960c82e8e5a)
+- fix(dropdown) forget the selected option on encoder longpress [`e66b935`](https://github.com/lvgl/lvgl/commit/e66b9350617eee15e94fb6a353283433e4c2c494)
+- fix(obj) improve how the focusing indev is determined [`a04f2de`](https://github.com/lvgl/lvgl/commit/a04f2dea644787ea25ef988a43e10c5005c57066)
+- fix(workflow) speed up MicroPython workflow [`38ad5d5`](https://github.com/lvgl/lvgl/commit/38ad5d548b2024f0f742ba769a6715fc376541a1)
+- fix(test) do not including anything in test files when not running tests [`9043860`](https://github.com/lvgl/lvgl/commit/90438603ad020799b14bc9839a51dceedfdabd7a)
+- fix tests [`36b9db3`](https://github.com/lvgl/lvgl/commit/36b9db38b728b40096b9ee613f4482ef9654d570)
+- fix(scroll) fire LV_EVENT_SCROLL_BEGIN in the same spot for both axes [`b158932`](https://github.com/lvgl/lvgl/commit/b1589326d41924292fbc2c62b474dec288bc9da5)
+- fix(btnmatrix) fix button invalidation on focus change [`77cedfa`](https://github.com/lvgl/lvgl/commit/77cedfa08f3f8aec67c6a2fe8e5ae9bab5a0e7c7)
+- fix(tlsf) do not use <assert.h> [`c9745b9`](https://github.com/lvgl/lvgl/commit/c9745b9c4ea9e7c6de4bd8ad9a0d8001bfb91165)
+- fix(template) include lvgl.h in lv_port_*_template.c files [`0ae15bd`](https://github.com/lvgl/lvgl/commit/0ae15bd470548ff159f44e7c3f4b225ab3eec928)
+- fix(docs) add margin for example description [`b5f632e`](https://github.com/lvgl/lvgl/commit/b5f632ee7a265ce4f2472522b422b8cd5366aaa9)
+- fix(imgbtn) use the correct src in LV_EVENT_GET_SELF_SIZE [`04c515a`](https://github.com/lvgl/lvgl/commit/04c515adac764761e60094db789269130ac89b36)
+- fix(color) remove extraneous cast for 8-bit color [`157534c`](https://github.com/lvgl/lvgl/commit/157534cdbfaa7b769114126f74c38661b99d025b)
+- fix(workflow) use same Unix port variant for MicroPython submodules [`ac68b10`](https://github.com/lvgl/lvgl/commit/ac68b10e539ddb8bde47ec453a99f2b876e12c65)
+- fix(README) improve grammar [`de81889`](https://github.com/lvgl/lvgl/commit/de81889cbdc889360e8bc00684f9ca77ff97d89f)
+- fix(printf) skip defining attribute if pycparser is used [`ee9bbea`](https://github.com/lvgl/lvgl/commit/ee9bbea29c807707353e8b9ec09048990de18e4e)
+- fix(README) spelling correction [`41869f2`](https://github.com/lvgl/lvgl/commit/41869f238e773e599959c9ef2fee0b7206712ee2)
+- fix(color) overflow with 16 bit color depth [`fe6d8d7`](https://github.com/lvgl/lvgl/commit/fe6d8d7636ae283afda68e85b2d1f143d8d05462)
+- fix(docs) consider an example to be visible over a wider area [`145a0fa`](https://github.com/lvgl/lvgl/commit/145a0fad0857dad7f2066e7d22436827e0d3fd7d)
+- fix(codecov) disable uploading coverage for pull requests [`27d88de`](https://github.com/lvgl/lvgl/commit/27d88de899e91cd5bb9fc69fe9d71cb180cfb44b)
+- fix(arc) disable LV_OBJ_FLAG_SCROLL_CHAIN by default [`f172eb3`](https://github.com/lvgl/lvgl/commit/f172eb3fd78481d6076ead395abfd765646ad21e)
+- fix(template) udpate lv_objx_template to v8 [`38bb8af`](https://github.com/lvgl/lvgl/commit/38bb8afc16720e8d8fe6e72be6fae4f9da593bbc)
+- fix(align) avoid circular references with LV_SIZE_CONTENT [`038b781`](https://github.com/lvgl/lvgl/commit/038b78122e72db67cec886d09eb2d21aaa019df7)
+- fix(draw) with additive blending with 32 bit color depth [`786db2a`](https://github.com/lvgl/lvgl/commit/786db2afe6458e24681b8a40fa798429956d3420)
+- fix(arc) fix arc invalidation again [`5ced080`](https://github.com/lvgl/lvgl/commit/5ced08001c384bf7c840750c0e254b5f0115a070)
+- fix(align) fix lv_obj_align_to [`93b38e9`](https://github.com/lvgl/lvgl/commit/93b38e92be9ed3ae050a1ee6e5b680ab43fd4850)
+- fix(scroll) keep the scroll position on object deleted [`52edbb4`](https://github.com/lvgl/lvgl/commit/52edbb46b0741d2761a11ef1b3d516ec96a7c8b3)
+- fix(dropdown) handle LV_KEY_ENTER [`8a50edd`](https://github.com/lvgl/lvgl/commit/8a50edd0689c7133ca18fd476596ddc4088f86a9)
+- fix various minor warnings [`924bc75`](https://github.com/lvgl/lvgl/commit/924bc754adcbabaf3518bac6067e7ea37f2f0f04)
+- fix(textarea) various cursor darwing fixes [`273a0eb`](https://github.com/lvgl/lvgl/commit/273a0eb32f04e81f326288a71682bea1c812c76a)
+- fix(label) consider base dir lv_label_get_letter_pos in special cases [`6df5122`](https://github.com/lvgl/lvgl/commit/6df51225c261b252f0935804b0357d6e585da53d)
+- fix(imgbtn) add lv_imgbtn_set_state [`26e15fa`](https://github.com/lvgl/lvgl/commit/26e15fa577f97d510b218fb95fc9a4bd440b00bc)
+- fix(printf) add (int) casts to log messages to avoid warnings on %d [`d9d3f27`](https://github.com/lvgl/lvgl/commit/d9d3f271267e760c8459b65c392914143a58b89c)
+- fix(test) silence make [`7610d38`](https://github.com/lvgl/lvgl/commit/7610d38bb044b1bd95dd68ab57f79f82e2527cca)
+- fix(test) silence make [`37fd9d8`](https://github.com/lvgl/lvgl/commit/37fd9d8a24c276079ed26b5d6704bcefc9f8dc70)
+- fix(calendar) update the MP example [`0bab4a7`](https://github.com/lvgl/lvgl/commit/0bab4a72cf769872a9adfd5bfa1c4536e6f909a8)
+- fix(scroll) fix scroll_area_into_view with objects larger than the parent [`5240fdd`](https://github.com/lvgl/lvgl/commit/5240fdda5ccc33d166f8201818868add5d1d6d0d)
+- fix(msgbox) handle NULL btn map paramter [`769c4a3`](https://github.com/lvgl/lvgl/commit/769c4a30cf962be1f74e0b1cd7ebaefbd6ba8a8b)
+- fix (scroll) do not send unnecessary scroll end events [`3ce5226`](https://github.com/lvgl/lvgl/commit/3ce5226c9d9db279904c4f076ae77e6e03572e4c)
+- fix(obj_pos) consider all alignements in contnt size calculation but only if x and y = 0 [`5b27ebb`](https://github.com/lvgl/lvgl/commit/5b27ebb4097166f8c4a50ee5d39249939bf79814)
+- fix(img decoder) add error handling if the dsc->data = NULL [`d0c1c67`](https://github.com/lvgl/lvgl/commit/d0c1c673a8ec17b842ebf97d5f21938ec8901346)
+- fix(txt): skip basic arabic vowel characters when processing conjunction [`5b54800`](https://github.com/lvgl/lvgl/commit/5b548006eda0695cabf2ee237a7faee8c69e4659)
+- fix(typo) rename LV_OBJ_FLAG_SNAPABLE to LV_OBJ_FLAG_SNAPPABLE [`e697807`](https://github.com/lvgl/lvgl/commit/e697807cf5c01be2531fc52df78ecad75ce39a7a)
+- fix(lv_printf.h): to eliminate the errors in Keil and IAR [`f6d7dc7`](https://github.com/lvgl/lvgl/commit/f6d7dc7f00d0a20f7f1966ed890a225b1fc87107)
+- fix(draw) fix horizontal gradient drawing [`4c034e5`](https://github.com/lvgl/lvgl/commit/4c034e56e049ad3d9bca5eb4b3e8721e60c11d36)
+- fix(dropdown) use LV_EVENT_READY/CANCEL on list open/close [`4dd1d56`](https://github.com/lvgl/lvgl/commit/4dd1d566fc30bbaf1424dda8b78df97c6bf07402)
+- fix(table) clip overflowing content [`8c15933`](https://github.com/lvgl/lvgl/commit/8c15933030cad6cdbfe4967f566ed6959547fada)
+- fix(test) add #if guard to exclude test related files from the build [`c12a22e`](https://github.com/lvgl/lvgl/commit/c12a22ee87681d1344696a3b9531e9100808eb85)
+- fix(test) add #if guard to exclude test related files from the build [`fc364a4`](https://github.com/lvgl/lvgl/commit/fc364a466c0693aefa0401f5eddee2bbc3037ef0)
+- fix(freetype) fix underline calculation [`76c8ee6`](https://github.com/lvgl/lvgl/commit/76c8ee6b7e81d8640aa5ba620947660a1c90482b)
+- fix(style) refresh ext. draw pad for padding and bg img [`37a5d0c`](https://github.com/lvgl/lvgl/commit/37a5d0c85ac28718f4f32eadff3ddaf6b474cf75)
+- fix(draw) underflow in subpixel font drawing [`6d5ac70`](https://github.com/lvgl/lvgl/commit/6d5ac702ad20ac3092c224ca36e412b0d6cec321)
+- fix(scrollbar) hide the scrollbar if the scrollble flag is removed [`188a946`](https://github.com/lvgl/lvgl/commit/188a9467b1bd45d42368a687736a9151d081c1e8)
+- fix(color): minor fixes(#2767) [`a4978d0`](https://github.com/lvgl/lvgl/commit/a4978d0913be705caffe3c080524bb7915a5e3e2)
+- fix(group) skip object if an of the parents is hidden [`5799c10`](https://github.com/lvgl/lvgl/commit/5799c1084398b365c7a9669406d4fbe258a501ef)
+- fix(obj) fix size invalidation issue on padding change [`33ba722`](https://github.com/lvgl/lvgl/commit/33ba7225f55f0cb17f73ce891466c7ebe1327898)
+- fix(label) do not bidi process text in lv_label_ins_text [`e95efc1`](https://github.com/lvgl/lvgl/commit/e95efc152f52b7495acb011353a55b3663f7860e)
+- fix(refr) set disp_drv->draw_buf->flushing_last correctly with sw rotation [`c514bdd`](https://github.com/lvgl/lvgl/commit/c514bddd9b4064e2eba0c3ec4c7a51415acd74e4)
+- fix(draw) fix drawing small arcs [`8081599`](https://github.com/lvgl/lvgl/commit/8081599e9b65c758bbdc0168f857515bebaf1c80)
+- fix(chart) invalidation with LV_CHART_UPDATE_MODE_SHIFT [`d61617c`](https://github.com/lvgl/lvgl/commit/d61617cd67f792908a1554a44c663c73a41bb357)
+- fix(build) fix micropython build error [`54338f6`](https://github.com/lvgl/lvgl/commit/54338f6e57518a59615bdd191fcf5af1365eabea)
+- fix(draw) fix border width of simple (radius=0, no masking) borders [`20f1867`](https://github.com/lvgl/lvgl/commit/20f186759664f31f07d6613ea8d77df256cd4597)
+- fix(calendar) fix caluclation today and highlighted day [`8f0b5ab`](https://github.com/lvgl/lvgl/commit/8f0b5ab0230007fa72127b78db500b9ceb84bf35)
+- fix(style) initialize colors to black instead of zero [`524f8dd`](https://github.com/lvgl/lvgl/commit/524f8dd50b4407c78fa6cd947c42e73eab401da1)
+- fix(sjpg) remove unnecessary typedefs [`c2d93f7`](https://github.com/lvgl/lvgl/commit/c2d93f78b98ba347001bd29d58b6654492bb8d70)
+- fix(label) fix clipped italic letters [`2efa6dc`](https://github.com/lvgl/lvgl/commit/2efa6dce78604cdf422ff233a99f7dd5f06b821c)
+- fix(draw) shadow darwing with large shadow width [`f810265`](https://github.com/lvgl/lvgl/commit/f810265c0d91135b71ae110d33d43841ec0e44f8)
+- fix(fropdown) add missing invalifations [`33b5d4a`](https://github.com/lvgl/lvgl/commit/33b5d4a4fe6f28962ee7988f74d5ae842dc49b04)
+- fix(dropdown) adjust the handling of keys sent to the dropdown [`e41c507`](https://github.com/lvgl/lvgl/commit/e41c50780495c7d6ac6a2b0edf12fc98c9d85a6b)
+- fix(disp) be sure the pending scr load animation is finished in lv_scr_load_anim [`eb6ae52`](https://github.com/lvgl/lvgl/commit/eb6ae526432453e4b9dbc7a760cd65d164050548)
+- fix(color) fox color premult precision with 16 bit color depth [`f334226`](https://github.com/lvgl/lvgl/commit/f3342269f272c474265700527f52d3ba92111531)
+- fix(obj_pos) save x,y even if the object is on a layout [`a9b660c`](https://github.com/lvgl/lvgl/commit/a9b660c278658224f05fbe43d0199c48711db9fd)
+- fix(scrollbar) hide the scrollbar if the scrollble flag is removed [`d9c6ad0`](https://github.com/lvgl/lvgl/commit/d9c6ad0425e761d605124e4555adc72854fec4a6)
+- fix(dropdown) fix list position with RTL base direction [`79edb37`](https://github.com/lvgl/lvgl/commit/79edb37b0ab5015111bade6074fda81ae101b91b)
+- fix(obj) fix lv_obj_align_to with RTL base direction [`531afcc`](https://github.com/lvgl/lvgl/commit/531afcc6cec7f67df06e369a185aef6fdc85af7b)
+- fix(chart) fix sending LV_EVENT_DRAW_PART_BEGIN/END for the cursor [`34b8cd9`](https://github.com/lvgl/lvgl/commit/34b8cd9c12604bc1029efa39bd66322b8b771dbe)
+- fix(arduino) fix the prototype of my_touchpad_read in the LVGL_Arduino.ino [`1a62f7a`](https://github.com/lvgl/lvgl/commit/1a62f7a619faa93406bc5895ac3338c232de2226)
+- fix(checkbox) consider the bg border when positioning the indicator [`a39dac9`](https://github.com/lvgl/lvgl/commit/a39dac9e5c82ecabd135953acafa335941ca0a89)
+- fix(dropdown) send LV_EVENT_VALUE_CHANGED to allow styling of the list [`dae7039`](https://github.com/lvgl/lvgl/commit/dae7039803030f908986602b3ce308dc1c3974af)
+- fix(group) fix infinite loop [`bdce0bc`](https://github.com/lvgl/lvgl/commit/bdce0bc60cb6e938ce39a0defe5b24249bc66a99)
+- fix(keyboard) use LVGL heap functions instead of POSIX [`b20a706`](https://github.com/lvgl/lvgl/commit/b20a706112a3107db13bbd405991ece4cbe00a88)
+- fix(blend) fix green channel with additive blending [`78158f0`](https://github.com/lvgl/lvgl/commit/78158f039f19eb17bf1b7c173922c1af26c1e528)
+- fix(btnmatrix) do not show pressed, focused or focus key states on disabled buttons [`3df2a74`](https://github.com/lvgl/lvgl/commit/3df2a7444758d2df023f321ccb5931de44af2a48)
+- fix(font) handle the last pixel of the glyphs in font loader correctly [`fa98989`](https://github.com/lvgl/lvgl/commit/fa9898941f8efa1966cb6f326d1eebdd31211d04)
+- fix(table) fix an off-by-one issue in self size calculation [`ea2545a`](https://github.com/lvgl/lvgl/commit/ea2545ae5dade0845889174737d072137bbb6591)
+- fix shadowed variable [`e209260`](https://github.com/lvgl/lvgl/commit/e20926056b28bb64f38abc764a4fca045757e800)
+- fix shadowed wariable [`df60018`](https://github.com/lvgl/lvgl/commit/df600183f211bde0ff34add973a7a401a1da9af1)
+- fix(chart) be sure the chart doesn't remain scrolled out on zoom out [`ad5b1bd`](https://github.com/lvgl/lvgl/commit/ad5b1bdc00a4a44e775a280f8b686353ef4f2a38)
+- fix(docs) commit to meta repo as lvgl-bot instead of actual commit author [`f0e8549`](https://github.com/lvgl/lvgl/commit/f0e8549fe14d4e95aedcc98a63acce5a4ad1145b)
+- fix(table) invalidate the table on cell value change [`cb3692e`](https://github.com/lvgl/lvgl/commit/cb3692e3029ae452eab04dce21715b7863a9f2a1)
+- fix(group) allow refocusing obejcts [`1520208`](https://github.com/lvgl/lvgl/commit/1520208b14c38713719f507273024624a0f54f1a)
+- fix(tabview) fix with left and right tabs [`17c5744`](https://github.com/lvgl/lvgl/commit/17c57449eeae8a693ad5601cf4169cf44d57d5c9)
+- fix(msgbox) create modals on top layer instead of act screen [`5cf6303`](https://github.com/lvgl/lvgl/commit/5cf6303e741ec22e2e87f69af4109855eb637e63)
+- fix(theme) show disabled state on buttons of btnmatrix, msgbox and kayboard [`0be582b`](https://github.com/lvgl/lvgl/commit/0be582b391e60774d6158411b835b679b010a99b)
+- fix(label) update lv_label_get_letter_pos to work with LV_BASE_DIR_AUTO too [`580e05a`](https://github.com/lvgl/lvgl/commit/580e05a0e1531d86d5229ade4ced2c336fbce634)
+- fix(label) fix in lv_label_get_letter_pos with when pos==line_start [`58f3f56`](https://github.com/lvgl/lvgl/commit/58f3f5625c2b29278c3e122d8eeba4d9bc597db9)
+- fix(gif) replace printf statement with LVGL logging [`56f62b8`](https://github.com/lvgl/lvgl/commit/56f62b8d7356017319d21d44a8f450705ec6486b)
+- fix(docs) add fsdrv back [`64527a5`](https://github.com/lvgl/lvgl/commit/64527a5a1ba9d37883c1303a3d4ee1a41e9b4ed3)
+- fix(table) remove unnecessary invalidation on pressing [`6f90f9c`](https://github.com/lvgl/lvgl/commit/6f90f9cefba0bc1ea74e737e0e659402f0309cf7)
+- fix(chart) draw line chart indicator (bullet) [`fba37a3`](https://github.com/lvgl/lvgl/commit/fba37a30abd1b4d7af78a288fb61dccacc99da08)
+- fix(anim) return the first anim if exec_cb is NULL in lv_anim_get() [`fb7ea10`](https://github.com/lvgl/lvgl/commit/fb7ea1040153bd0f2d5c282f9fb31add32c55ce9)
+- fix(label) fix lv_label_get_letter_on with BIDI enabled [`192419e`](https://github.com/lvgl/lvgl/commit/192419e7bb300bd64b51d684827719fe1c22cfdb)
+- fix(checkbox) add missing invalifations [`bb39e9d`](https://github.com/lvgl/lvgl/commit/bb39e9d6f95235445e3ea1bc52b0d5a1b7a2e24a)
+- fix(draw) fix gradent calculation of the rectangle is clipped [`13e3470`](https://github.com/lvgl/lvgl/commit/13e347055bd54c37e7fcb645120ea9ab3134ebec)
+- fix(chart) fix typo in 655f42b8 [`6118d63`](https://github.com/lvgl/lvgl/commit/6118d63c2f23e2a157c84a010dcfa0d1fa851382)
+- fix(eaxmple) fix lv_example_chart_2 [`89081c2`](https://github.com/lvgl/lvgl/commit/89081c2d6ee418b326538e1f39345d43864993c8)
+- fix(calendar) fix the position calculation today [`ad05e19`](https://github.com/lvgl/lvgl/commit/ad05e196fb3937ebcba211495013700c0022f777)
+- fix(tick) minor optmization on lv_tick_inc call test [`b4305df`](https://github.com/lvgl/lvgl/commit/b4305df5745684a785be071149de8dd342817db4)
+- fix(docs) use let instead of const for variable which gets changed [`3cf5751`](https://github.com/lvgl/lvgl/commit/3cf5751461d6a85974da4e5c66593736ae140a1a)
+- fix(theme) fix the switch style in the default theme [`0c0dc8e`](https://github.com/lvgl/lvgl/commit/0c0dc8ea30289254732cbba7ada7fd4f092caf22)
+- fix(tlsf) undef printf before define-ing it [`cc935b8`](https://github.com/lvgl/lvgl/commit/cc935b87f69e6107d12d9ba4a2c83103f7dd4356)
+- fix(msgbox) prevent the buttons being wider than the msbgox [`73e036b`](https://github.com/lvgl/lvgl/commit/73e036bba748e8677f219f573cba5f82c4158a17)
+- fix(chart) don't draw series lines with < 1 points [`655f42b`](https://github.com/lvgl/lvgl/commit/655f42b852669f27ab8bfde84bf70cf0b7ea027d)
+- fix(tests) remove src/test_runners when cleaning [`6726b0f`](https://github.com/lvgl/lvgl/commit/6726b0f5df3f4689368782b601bb01f76498123b)
+- fix(label) remove dupliacted lv_obj_refresh_self_size [`a070ecf`](https://github.com/lvgl/lvgl/commit/a070ecfe8c1cf7c07c035ba6c35c3ffaef56d6e1)
+- fix(colowheel) disable LV_OBJ_FLAG_SCROLL_CHAIN by default [`48d1c29`](https://github.com/lvgl/lvgl/commit/48d1c292a3c19380d5669baf911954cc1b083d43)
+
+- fix(obj) do not set the child's position in lv_obj_set_parent [`d89a5fb`](https://github.com/lvgl/lvgl/commit/d89a5fbbd2af33cf759c120e6a14b334099c4c98)
+- feat: add LV_USE_MEM_PERF/MONITOR_POS [`acd0f4f`](https://github.com/lvgl/lvgl/commit/acd0f4fbc71ffbfeb382b7af1fa52caf3cdcda6c)
+- fix(scroll) in scroll to view functions respect disabled LV_OBJ_FLAG_SCROLLABLE [`9318e02`](https://github.com/lvgl/lvgl/commit/9318e02ef5e29d2f6ce0ab4b2aa67c6542752822)
+- fix(flex) remove unused variable [`747b6a2`](https://github.com/lvgl/lvgl/commit/747b6a2a9af9bafe4e6c778cca23e278cb7e4ea4)
+- feat(canvas) add lv_canvas_set_px_opa [`b3b3ffc`](https://github.com/lvgl/lvgl/commit/b3b3ffc2b3b322f7401d15c4ba2ef0cdb00e2990)
+- fix(textarea) allow using cursor with not full bg_opa [`c9d3965`](https://github.com/lvgl/lvgl/commit/c9d396571d0726aab5d011f37df648d337e5bc12)
+- fix(txt) _lv_txt_get_next_line return 0 on empty texts [`82f3fbc`](https://github.com/lvgl/lvgl/commit/82f3fbcad7b710a89b876c32f3583090c99e847c)
+- fix(btnmatrix) always udpate row_cnt [`86012ae`](https://github.com/lvgl/lvgl/commit/86012aefc7197209357290c780029aa39b3738dc)
+- fix(scroll) minor fixes on obj scroll handling [`a4128a8`](https://github.com/lvgl/lvgl/commit/a4128a83562e0daacd949333ba7cbfec650f8050)
+- fix(table) consider border width for cell positions [`f2987b6`](https://github.com/lvgl/lvgl/commit/f2987b6591046f1384b0089187fd81da10834021)
+- fix(log) be sure LV_LOG_... is not empty if logs are disabled [`47734c4`](https://github.com/lvgl/lvgl/commit/47734c4abedf6b6005069d15a8c4c2fcff73f85e)
+- fix(arc) fix LV_ARC_MODE_REVERSE [`df3b969`](https://github.com/lvgl/lvgl/commit/df3b96900b1266ed4856438d9121e39905d510bb)
+- fix(obj) in lv_obj_move_to_index() do not send LV_EVENT_CHILD_CHANGED on all changed child [`32e8276`](https://github.com/lvgl/lvgl/commit/32e8276db7403d8dc9c9b9f0c77d331049e8c07d)
+- feat(event) add lv_obj_remove_event_cb_with_user_data [`4eddeb3`](https://github.com/lvgl/lvgl/commit/4eddeb35abee1f9cd2d1fd210f11cc096cb609c7)
+- fix(draw) fix shdow drawing with readius=0 [`4250e3c`](https://github.com/lvgl/lvgl/commit/4250e3c62737697cd8bc78d991a3d66216efa437)
+- fix(msgbox) directly store the pointer of all children [`eb5eaa3`](https://github.com/lvgl/lvgl/commit/eb5eaa39406473cd90a7f78d710ce950cbf47548)
+- fix(draw) use the filtered colors in lv_obj_init_draw_xxx_dsc() functions [`78725f2`](https://github.com/lvgl/lvgl/commit/78725f23da24fe22543ab3388c87bf3cfbd0e51a)
+- fix(arc) fix full arc invalidation [`98b9ce5`](https://github.com/lvgl/lvgl/commit/98b9ce599751c9de0421acd419430cc6ccd7cad9)
+- chore(led) expose LV_LED_BRIGHT_MIN/MAX in led.h [`3f18b23`](https://github.com/lvgl/lvgl/commit/3f18b234f601edefb16b1ffdb0c539e823b1c025)
+- fix(group) keep the focused object in lv_group_swap_obj [`a997147`](https://github.com/lvgl/lvgl/commit/a9971471ba34352a1d7b307977cb2f635b28a031)
+- fix(obj) swap objects in the group too in  lv_obj_swap() [`52c7558`](https://github.com/lvgl/lvgl/commit/52c7558ab46a7024e05499edb483f115b13086f0)
+- fix(theme) use opacity on button's shadow in the default theme [`c5342e9`](https://github.com/lvgl/lvgl/commit/c5342e9324c492c70b65f8c228d44b7a290cf110)
+- fix(win) enable  clip_corner and border_post by default [`493ace3`](https://github.com/lvgl/lvgl/commit/493ace352fea0eaa37abccaa0938c0c4a12a995a)
+- fix(draw) fix rectangle drawing with clip_corner enabled [`01237da`](https://github.com/lvgl/lvgl/commit/01237da474b9703fb544163db5f66645c2b6935c)
+- fix(arc) fix other invalidation issues [`b0a7337`](https://github.com/lvgl/lvgl/commit/b0a733766daee1edfabaec8df4a5fedd0180ccaf)
+- feat(obj) add lv_obj_get_x/y_aligned [`98bc1fe`](https://github.com/lvgl/lvgl/commit/98bc1fe09e12a64333e91b4c25327c283a700af5)
+- fix(calendar) fix incorrect highlight of today [`adbac52`](https://github.com/lvgl/lvgl/commit/adbac5220b2d75f08de110b3f426066e24f46998)
+- fix(arc, merter) fix invaidation in special cases [`0f14f49`](https://github.com/lvgl/lvgl/commit/0f14f49465ca701c98f76ac95bda4a537c0fadfa)
+- fix(canvas) invalidate the image on delete [`a1b362c`](https://github.com/lvgl/lvgl/commit/a1b362c98622ecbc063cfb17fb091fdab4522e8a)
+- fix(msgbox) return the correct pointer from lv_msgbox_get_text [`50ea6fb`](https://github.com/lvgl/lvgl/commit/50ea6fb3fefb3a6edc958154c575dcdcacbfdb3a)
+- fix(bidi) fix the handling of LV_BASE_DIR_AUTO in several widgets [`7672847`](https://github.com/lvgl/lvgl/commit/7672847ce325e909981582b4153993025da7fe50)
+- fix(build) remove main component dependency (#2420) [`f2c2393`](https://github.com/lvgl/lvgl/commit/f2c2393b305cd71d2fc01ff8945965dccb8488b4)
+- fix(meter) fix inner mask usage [`c28c146`](https://github.com/lvgl/lvgl/commit/c28c14631040fd08da122e192458cb0c65bc9faf)
+- fix(log) fix warning for empty log macros [`4dba8df`](https://github.com/lvgl/lvgl/commit/4dba8df2a196fc7a2b7a8686efb6e47fc6cf0fc6)
+- fix(theme) improve button focus of keyboard [`2504b7e`](https://github.com/lvgl/lvgl/commit/2504b7e4361ad8009e005faf112987585c2e8356)
+- fix(tabview) send LV_EVENT_VALUE_CHANGED only once [`933d282`](https://github.com/lvgl/lvgl/commit/933d2829aca8bc269c0b481f2a535274626374bc)
+- fix(obj style) fix children reposition if the parent's padding changes. [`57cf661`](https://github.com/lvgl/lvgl/commit/57cf6610a9ec2e6458035abfdaa5554f4296c89c)
+- fix(template) update indev template for v8 [`d8a3d3d`](https://github.com/lvgl/lvgl/commit/d8a3d3d0d759ad0145f134a3f08433f3fdffcb75)
+- fix(obj) detecting which indev sent LV_EVENT_FOCUS [`f03d4b8`](https://github.com/lvgl/lvgl/commit/f03d4b8cb9928077a04b839db0bd5c625919d903)
+- fix(roller) adjust the size of the selected area correctly [`01d1c87`](https://github.com/lvgl/lvgl/commit/01d1c873e19d0d77e1444ba79468db63f26a448a)
+- fix(imgbtn) consider width==LV_SIZE_CONTENT if only mid. img is set [`7e49f48`](https://github.com/lvgl/lvgl/commit/7e49f48894c5c3eb9793dbf1c8630f3cfdc3c091)
+- fix(flex) fix NULL pointer dereference [`97ba12f`](https://github.com/lvgl/lvgl/commit/97ba12f280f0fa5400ff18c5317b9736063d8391)
+- fix(obj, switch) do not send LV_EVENT_VALUE_CHANGED twice [`713b39e`](https://github.com/lvgl/lvgl/commit/713b39ecdb7e8e219cc295bad7d953ff2136f138)
+- fix(coords) fix using large coordinates [`428db94`](https://github.com/lvgl/lvgl/commit/428db9494dc43d65026a9c1fb42c50daede82fc2)
+- fix(chart) fix crash if no series are added [`c728b5c`](https://github.com/lvgl/lvgl/commit/c728b5ceda0a5a93d5a0859eb88261db582cf1eb)
+- fix(meter) fix needle image invalidation [`54d8e81`](https://github.com/lvgl/lvgl/commit/54d8e8170bd4964909cee15a256408e7f08ccf21)
+- fix(mem) add lv_ prefix to tlsf functions and types [`0d52b59`](https://github.com/lvgl/lvgl/commit/0d52b59cb16dda377f8a1ac581a851b830b7bf53)
+- fix(pxp) change LV_COLOR_TRANSP to LV_COLOR_CHROMA_KEY to v8 compatibility [`81f3068`](https://github.com/lvgl/lvgl/commit/81f3068dd77d47e7079e6697ea5d00f69202c1bd)
+
+### Examples
+
+- example(chart)  add area chart example [`2507`](https://github.com/lvgl/lvgl/pull/2507)
+- example(anim) add demo to use cubic-bezier [`2393`](https://github.com/lvgl/lvgl/pull/2393)
+- feat(example) add lv_example_chart_9.py [`2604`](https://github.com/lvgl/lvgl/pull/2604)
+- feat(example) add lv_example_chart_8.py [`2611`](https://github.com/lvgl/lvgl/pull/2611)
+- feat(example) chart example to add gap between the old and new data  [`2565`](https://github.com/lvgl/lvgl/pull/2565)
+- feat(example) add lv example list 2 [`2545`](https://github.com/lvgl/lvgl/pull/2545)
+- feat(examples) add MicroPython version of lv_example_anim_3 and allow loading roller font dynamically [`2412`](https://github.com/lvgl/lvgl/pull/2412)
+- feat(examples) added MP version of second tabview example [`2347`](https://github.com/lvgl/lvgl/pull/2347)
+- fix(example):format codes [`2731`](https://github.com/lvgl/lvgl/pull/2731)
+- fix(example) minor fixes in lv_example_chart_2.py [`2601`](https://github.com/lvgl/lvgl/pull/2601)
+- feat(example) add text with gradient example [`462fbcb`](https://github.com/lvgl/lvgl/commit/462fbcbf49f47b9f329b6c15d2ca04ef09806cd9)
+- fix(example_roller_3) mask free param bug [`2553`](https://github.com/lvgl/lvgl/pull/2553)
+- fix(examples) don't compile assets unless needed [`2523`](https://github.com/lvgl/lvgl/pull/2523)
+- fix(example) scroll example sqort types [`2498`](https://github.com/lvgl/lvgl/pull/2498)
+- fix(examples) join usage [`2425`](https://github.com/lvgl/lvgl/pull/2425)
+- fix(examples) add missing lv.PART.INDICATOR [`2423`](https://github.com/lvgl/lvgl/pull/2423)
+- fix(examples) use lv.grid_fr for MicroPython [`2419`](https://github.com/lvgl/lvgl/pull/2419)
+- fix(examples) remove symlinks [`2406`](https://github.com/lvgl/lvgl/pull/2406)
+- fix(examples) import 'u'-prefixed versions of modules [`2365`](https://github.com/lvgl/lvgl/pull/2365)
+- fix(examples) remove cast in MP scripts [`2354`](https://github.com/lvgl/lvgl/pull/2354)
+- fix(examples) fix MicroPython examples and run the examples with CI [`2339`](https://github.com/lvgl/lvgl/pull/2339)
+- fix(examples) align with renamed Micropython APIs [`2338`](https://github.com/lvgl/lvgl/pull/2338)
+
+- fix(examples) adjust canvas example for MicroPython API change [`52d1c2e`](https://github.com/lvgl/lvgl/commit/52d1c2e5b53eda4270abc0caa0eb309b35c010c8)
+- fix(example) revert test code [`77e2c1f`](https://github.com/lvgl/lvgl/commit/77e2c1ff3d3ff035a3613f2ed0e5538513e8b4a1)
+- feat(example) add checkbox example for radio buttons [`d089b36`](https://github.com/lvgl/lvgl/commit/d089b364e700d1216813106f7b4dfa6cee9aa806)
+- feat(example) add text with gradient example [`462fbcb`](https://github.com/lvgl/lvgl/commit/462fbcbf49f47b9f329b6c15d2ca04ef09806cd9)
+- fix(examples) exclude example animimg images if animimg is disabled [`4d7d306`](https://github.com/lvgl/lvgl/commit/4d7d30677af9ef158fe51fb1d8900d234ea5e181)
+- fix(example) adjust the object sizes in lv_example_anim_timeline_1() [`71a10e4`](https://github.com/lvgl/lvgl/commit/71a10e4ecd4acfddcea279a0b5da219dfb002ff7)
+- fix(example) revert text code from lv_example_checkbox_2 [`28e9593`](https://github.com/lvgl/lvgl/commit/28e9593e5802a2e7d493515059c6327e60ccbf28)
+
+
+### Docs
+
+- docs: fix typo [`2765`](https://github.com/lvgl/lvgl/pull/2765)
+- docs(colorwheel) fix old API names [`2643`](https://github.com/lvgl/lvgl/pull/2643)
+- docs(display) fix typo [`2624`](https://github.com/lvgl/lvgl/pull/2624)
+- docs add static for lv_indev_drv_t [`2605`](https://github.com/lvgl/lvgl/pull/2605)
+- docs(animimg) add to extra widgets index and fix example [`2610`](https://github.com/lvgl/lvgl/pull/2610)
+- docs(animimg) Add missing animation image page [`2609`](https://github.com/lvgl/lvgl/pull/2609)
+- docs(group) remove reference to lv_cont which is gone in v8 [`2580`](https://github.com/lvgl/lvgl/pull/2580)
+- docs(style) use correct API name for local styles [`2550`](https://github.com/lvgl/lvgl/pull/2550)
+- docs(all) Proofread, fix typos and add clarifications in confusing areas [`2528`](https://github.com/lvgl/lvgl/pull/2528)
+- docs(flex) update flex.md [`2517`](https://github.com/lvgl/lvgl/pull/2517)
+- docs more spelling fixes [`2499`](https://github.com/lvgl/lvgl/pull/2499)
+- docs fix typo: arae -> area [`2488`](https://github.com/lvgl/lvgl/pull/2488)
+- docs(readme) fix typo: hosing → hosting. [`2477`](https://github.com/lvgl/lvgl/pull/2477)
+- docs update company name and year [`2476`](https://github.com/lvgl/lvgl/pull/2476)
+- docs fix typos [`2472`](https://github.com/lvgl/lvgl/pull/2472)
+- docs(overview) fix typo [`2465`](https://github.com/lvgl/lvgl/pull/2465)
+- docs(bar) fix typos in widget examples [`2463`](https://github.com/lvgl/lvgl/pull/2463)
+- docs(overview) fix typo [`2454`](https://github.com/lvgl/lvgl/pull/2454)
+- docs(chart) typos [`2427`](https://github.com/lvgl/lvgl/pull/2427)
+- docs(layout) add internal padding paragraph to grid and flex layout p… [`2392`](https://github.com/lvgl/lvgl/pull/2392)
+- docs(porting) fix indev example to remove v7 bool return [`2381`](https://github.com/lvgl/lvgl/pull/2381)
+- docs(README) fix broken references [`2329`](https://github.com/lvgl/lvgl/pull/2329)
+- docs(grid) typo fix [`2310`](https://github.com/lvgl/lvgl/pull/2310)
+- docs(color) language fixes [`2302`](https://github.com/lvgl/lvgl/pull/2302)
+- docs(lv_obj_style) update add_style and remove_style function headers [`2287`](https://github.com/lvgl/lvgl/pull/2287)
+
+- docs(contributing) add commit message format section [`3668e54`](https://github.com/lvgl/lvgl/commit/3668e54f06b9e51f407b6f6eb24829c03e3d0ac5)
+- docs minor typo fixes [`84c0086`](https://github.com/lvgl/lvgl/commit/84c00862ae0213a54469e08900da7acf435ed5fe)
+- docs(arduino) update some outdated information [`9a77102`](https://github.com/lvgl/lvgl/commit/9a77102c40f68140d0ba2c6c5e493e51a8773f64)
+- docs(keyboard) add note regarding event handler [`255f729`](https://github.com/lvgl/lvgl/commit/255f7294d387d65bbc56c0f8af84f7fa2f3cfdfa)
+- docs minor CSS fix [`acbb680`](https://github.com/lvgl/lvgl/commit/acbb680683fc726e942f59d4296501838e90bde1)
+- docs minor CSS improvements [`7f367d6`](https://github.com/lvgl/lvgl/commit/7f367d6956c4d87b75a90cf1798550e986c5c248)
+- docs(keyboard) change `LV_KEYBOARD_MODE_NUM` to `LV_KEYBOARD_MODE_NUMBER` [`6e83d37`](https://github.com/lvgl/lvgl/commit/6e83d378e933c426550a7d6bc8fd0dd7fa9ba051)
+- docs(textarea) clarify the use of text selection bg_color [`65673c0`](https://github.com/lvgl/lvgl/commit/65673c0e15c48b5926da26ae1a1b8d0a0a8161a3)
+- docs list all examples on one page [`25acaf4`](https://github.com/lvgl/lvgl/commit/25acaf45ca87271106b23b52d0d941228e117859)
+- docs(examples) add MicroPython examples [`6f37c4f`](https://github.com/lvgl/lvgl/commit/6f37c4fc560c13545177e15576c5b3085c8f2c2a)
+- docs(filesystem) update to v8 [`7971ade`](https://github.com/lvgl/lvgl/commit/7971ade47b15898efb6fca17d34ca30f1ee5c926)
+- docs(style) complete the description of style the properties [`55e8846`](https://github.com/lvgl/lvgl/commit/55e8846871f812f888c8354e4ec8974ac0650165)
+- docs example list fixes [`cd600d1`](https://github.com/lvgl/lvgl/commit/cd600d105650bae08f9732a654c6a2c85e610cd5)
+- docs(style) complete the description of style the properties [`ff087da`](https://github.com/lvgl/lvgl/commit/ff087dafb4ecd016ee4920bfe4f162b1db58f7cb)
+- docs(README) update links, examples, and add services menu [`3471bd1`](https://github.com/lvgl/lvgl/commit/3471bd1c698ee58f6632415559dcc34e9d2ee3c0)
+- docs(color) update colors' docs [`9056b5e`](https://github.com/lvgl/lvgl/commit/9056b5ee1bfea6796307bdf983a4a00ea47fe9f0)
+- docs update lv_fs.h, layer and align.png to v8 [`31ab062`](https://github.com/lvgl/lvgl/commit/31ab0628d5cfc57e55f42e5f59689388b034177c)
+- docs(color) minor fix [`ac8f453`](https://github.com/lvgl/lvgl/commit/ac8f4534a51b418377c2eac62dbd731b9be71977)
+- docs update changelog [`c386110`](https://github.com/lvgl/lvgl/commit/c386110e2390399ab97936622e59c510ba414e19)
+- docs(extra) add extra/README.md [`8cd504d`](https://github.com/lvgl/lvgl/commit/8cd504d58bb679fe1f260e3eee59fcb0b85cb589)
+- docs add lazy load to the iframes of the examples [`c49e830`](https://github.com/lvgl/lvgl/commit/c49e830aad2c847611f3398767e85c193909559a)
+- docs(os) add example and clarify some poinits [`d996453`](https://github.com/lvgl/lvgl/commit/d996453207caa50a90a66d05565431fa288be96b)
+- docs(rlottie) fix build error [`ce0b564`](https://github.com/lvgl/lvgl/commit/ce0b56458846daa65288f901e9b8ef1083eab468)
+- docs include paths in libs [`f5f9562`](https://github.com/lvgl/lvgl/commit/f5f956233657f95b45a45d872e5d6e68c05eecd4)
+- docs libs fixes [`8e7bba6`](https://github.com/lvgl/lvgl/commit/8e7bba6acec66a4f6b80496de9fd21a8e3c4c6ee)
+- docs(obj) add comment lv_obj_get_x/y/width/height about postponed layout recalculation [`533066e`](https://github.com/lvgl/lvgl/commit/533066e6accbe2cbe1b60556eb61ebb2a07185a2)
+- docs fix eaxmple list [`ed77ed1`](https://github.com/lvgl/lvgl/commit/ed77ed1dae088ef29194cf3c6bb552e1ee67d78b)
+- docs describe the options to include or skip lv_conf.h [`174ef66`](https://github.com/lvgl/lvgl/commit/174ef6692e0b05338890a1cf524d9dcbf5c25f6c)
+- docs(overview) spelling fixes [`d2efb8c`](https://github.com/lvgl/lvgl/commit/d2efb8c6e5ceedbb9d9c1a1c89ef709e6570e360)
+- docs(table) describe keypad/encoder navigation [`749d1b3`](https://github.com/lvgl/lvgl/commit/749d1b3ec31ec2ef27f594ed0a4af93edb2c10f0)
+- docs update CHANGELOG [`0f8bc18`](https://github.com/lvgl/lvgl/commit/0f8bc18f6aacb6a74e0bda59068d3d178fa66434)
+- docs(image) mention the frame_id paramter of lv_img_decoder_open [`2433732`](https://github.com/lvgl/lvgl/commit/2433732570a817f566308e025d89227a8c650f5f)
+- docs(arduino) update how to use the examples  [`06962a5`](https://github.com/lvgl/lvgl/commit/06962a564fd668eced22b2e9bc19e7732abf94ec)
+- docs(rlottie): fix typo in commands [`ed9169c`](https://github.com/lvgl/lvgl/commit/ed9169c56dc1f34b1f021457b78c9f3eccba13cf)
+- docs(indev, layer) update lv_obj_set_click() to lv_obj_add_flag() [`bcd99e8`](https://github.com/lvgl/lvgl/commit/bcd99e8e438cc1b63762f8933d26bbb38fd42a2d)
+- docs update version support table [`e6e98ab`](https://github.com/lvgl/lvgl/commit/e6e98abbc25cc4aa20b05d1002a651e4012ebff7)
+- docs fix example list [`c6f99ad`](https://github.com/lvgl/lvgl/commit/c6f99ad200c7862c2f3cca3811bc2bdc2c95e971)
+- docs(examples) add <hr/> to better separate examples [`a1b59e3`](https://github.com/lvgl/lvgl/commit/a1b59e34dd23fb12bd6e9ab0ffa92b2bfcec66b3)
+- docs(checkbox) update the comment lv_checkbox_set_text_static [`3e0ddd0`](https://github.com/lvgl/lvgl/commit/3e0ddd028511c6c4a0ba33a15526f404b31a50b8)
+- docs(grid) fix missing article [`da0c97a`](https://github.com/lvgl/lvgl/commit/da0c97a367746573fa2385d0ddd184f27ca20dbd)
+- docs(display) fix grammar in one spot [`5dbea7d`](https://github.com/lvgl/lvgl/commit/5dbea7d72522e78f66fb468e1d5a98fa28179ed1)
+- docs(style) fix typo in style property descriptions [`4e3b860`](https://github.com/lvgl/lvgl/commit/4e3b86020fdc8e183335c6c9b8604129e3e3ddcc)
+- docs(flex) fix typo in flex grow section [`e5fafc4`](https://github.com/lvgl/lvgl/commit/e5fafc412214ab01d46ebd37e272e3ffc3164ea4)
+- docs(indev) clarify purpose of `continue_reading` flag [`706f81e`](https://github.com/lvgl/lvgl/commit/706f81e5862af27fb0b60cdaf02c650c31787c78)
+- docs(license) update company name and year [`7c1eb00`](https://github.com/lvgl/lvgl/commit/7c1eb0064535f2d914b9dc885ebb2a2d0d73381d)
+- docs fix typo [`8ab8064`](https://github.com/lvgl/lvgl/commit/8ab806459c1b99990b91b4cd6a656ff6736c1b63)
+- docs add libs to the main index [`1a8fed5`](https://github.com/lvgl/lvgl/commit/1a8fed5df02545fe97845e3acd86e33f7048cd8e)
+- docs add btn_example.png [`8731ef1`](https://github.com/lvgl/lvgl/commit/8731ef141e2ad2f022b1c01e1bf7605f983b013f)
+
+- docs(btnmatrix) fix typo with set_all/clear_all parameters [`51a82a1`](https://github.com/lvgl/lvgl/commit/51a82a17ffe938d07d94660f49fd18962060943a)
+
+### CI and tests
+
+- ci(micropython) fix git fetch [`2757`](https://github.com/lvgl/lvgl/pull/2757)
+- test(txt) initial unit tests and general code cleanup/fixes [`2623`](https://github.com/lvgl/lvgl/pull/2623)
+- test add setUp and tearDown to test template [`2648`](https://github.com/lvgl/lvgl/pull/2648)
+- test(arc) add initial unit tests [`2617`](https://github.com/lvgl/lvgl/pull/2617)
+- ci(micropython) add ESP32 and STM32 tests [`2629`](https://github.com/lvgl/lvgl/pull/2629)
+- test(checkbox) add initial tests [`2551`](https://github.com/lvgl/lvgl/pull/2551)
+- test(ci) build and run tests in parallel. [`2515`](https://github.com/lvgl/lvgl/pull/2515)
+- ci(tests) run tests using ctest [`2503`](https://github.com/lvgl/lvgl/pull/2503)
+- ci(tests) add dependency on GNU parallel [`2510`](https://github.com/lvgl/lvgl/pull/2510)
+- ci(tests) use common script to install development prereqs [`2504`](https://github.com/lvgl/lvgl/pull/2504)
+- test convert Makefile to CMake [`2495`](https://github.com/lvgl/lvgl/pull/2495)
+- test Refactor unit test scripts. [`2473`](https://github.com/lvgl/lvgl/pull/2473)
+
+- test(font_loader) migrate the exisiting font loader test [`bc5b3be`](https://github.com/lvgl/lvgl/commit/bc5b3be61f7751852dc99509a6ab83faaf6d1235)
+- test add build test again, add dropdown test, integrate gcov and gvocr [`e35b1d0`](https://github.com/lvgl/lvgl/commit/e35b1d04bdc7d531d72ebce7d1f031be2631e776)
+- test(dropdown) add tess for keypad and encoder [`4143b80`](https://github.com/lvgl/lvgl/commit/4143b804c8f4b4324141ad0f529bac4e9acf1442)
+- test add keypad and encoder emulators [`e536bb6`](https://github.com/lvgl/lvgl/commit/e536bb6325728db21ef5c729a99f2161a8125625)
+- tests add mosue emulator [`2ba810b`](https://github.com/lvgl/lvgl/commit/2ba810b8de19afc3e9ac18e5bd8ab16af10a4433)
+- tests add README [`b765643`](https://github.com/lvgl/lvgl/commit/b765643e4902de359e88fdf6d314e9afdb2daa9a)
+- test add move tests to test_cases and test_runners directories [`e9e010a`](https://github.com/lvgl/lvgl/commit/e9e010a8468ee307c350e071251f22459173e601)
+- test fix CI build error [`c38cae2`](https://github.com/lvgl/lvgl/commit/c38cae22fbf6cef7564fbebe2145a7def20d52e1)
+- ci add config for 8bpp [`3eacc59`](https://github.com/lvgl/lvgl/commit/3eacc5923c0a554e7ff4489776a8982dfc142115)
+- test move more source files to src folder [`3672f87`](https://github.com/lvgl/lvgl/commit/3672f873328b4471ac9d5d23696f7bc99a87bc43)
+- test update CI for the new tests [`a3898b9`](https://github.com/lvgl/lvgl/commit/a3898b931e81860acf197bc88fd3dd6f8885eb2c)
+- test cleant up report folder [`b9b4ba5`](https://github.com/lvgl/lvgl/commit/b9b4ba5b2608f5709678463f62b3d3f937780235)
+- test fix build error [`61cda59`](https://github.com/lvgl/lvgl/commit/61cda59cbe8569326ef9d366c520b89be292f5ea)
+- test(font_loader) migrate the exisiting font loader test [`d6dbbaa`](https://github.com/lvgl/lvgl/commit/d6dbbaaa34304b4c889415439ab562056e0840a5)
+- test add move tests to test_cases and test_runners directories [`d2e735e`](https://github.com/lvgl/lvgl/commit/d2e735ef36bd99c16ccaa281dcaa5f418e2dec98)
+- test add 3rd party libs to all tests and also fix them [`7a95fa9`](https://github.com/lvgl/lvgl/commit/7a95fa9e2de9639a3c2f1990ff63b467be54a7aa)
+- test(arc): add test case for adv_hittest [`e83df6f`](https://github.com/lvgl/lvgl/commit/e83df6f14de1a9eb1d137b123fac96c25a1b7715)
+- ci create check for lv_conf_internal.h [`5d8285e`](https://github.com/lvgl/lvgl/commit/5d8285e2d37e19670c1daeff229e1dc331f053c4)
+- test fix warning and docs build error [`d908f31`](https://github.com/lvgl/lvgl/commit/d908f31f8f50024d8b3c8d0a11aff9cc1b011049)
+- ci(micropython) add rp2 port [`1ab5c96`](https://github.com/lvgl/lvgl/commit/1ab5c9689f61fd2991653beec7d023472fc96239)
+- test(dropdown) remove dummy test case [`9fb98da`](https://github.com/lvgl/lvgl/commit/9fb98da8a280dc3d5753da1d2aa79eeb1cba47e0)
+- ci(codecov) hide statuses on commits for now [`0b7be77`](https://github.com/lvgl/lvgl/commit/0b7be778a29412fe5562a736855121d19350889c)
+- ci(docs) run apt-get update before installation [`f215174`](https://github.com/lvgl/lvgl/commit/f215174999a18b0e5904e97bfda48f3b81271aa1)
+- test fix LV_USE_LOG_LEVEL -> LV_LOG_LEVEL typo [`80f0b09`](https://github.com/lvgl/lvgl/commit/80f0b09e34596564ca6ec7c23d148f4ce2e17ca3)
+- ci(micropython) add GCC problem matcher [`ab316a0`](https://github.com/lvgl/lvgl/commit/ab316a07bc4d89a633fdd00bc7ff8c5db4b00ad8)
+
+- test convert Makefile to CMake (#2495) [`9c846ee`](https://github.com/lvgl/lvgl/commit/9c846ee493862ef11b46942a6e5af3c1ed8468d1)
+
+### Others
+
+- chore: replace (void)xxx with LV_UNUSED(xxx) [`2779`](https://github.com/lvgl/lvgl/pull/2779)
+- animation improvement [`2743`](https://github.com/lvgl/lvgl/pull/2743)
+- Improve LV_FORMAT_ATTRIBUTE usage [`2673`](https://github.com/lvgl/lvgl/pull/2673)
+- Fix typo in commands to build rlottie [`2723`](https://github.com/lvgl/lvgl/pull/2723)
+- del(.gitmodules): delete .gitmodules [`2718`](https://github.com/lvgl/lvgl/pull/2718)
+- lv_obj_draw_part_dsc_t.text_length added [`2694`](https://github.com/lvgl/lvgl/pull/2694)
+- expose LV_COLOR_DEPTH and LV_COLOR_16_SWAP in micropython [`2679`](https://github.com/lvgl/lvgl/pull/2679)
+- sync lvgl/lv_fs_if [`2676`](https://github.com/lvgl/lvgl/pull/2676)
+- build: always enable CMake install rule in default configuration [`2636`](https://github.com/lvgl/lvgl/pull/2636)
+- build: fix lib name in CMakeLists [`2641`](https://github.com/lvgl/lvgl/pull/2641)
+- build: remove use of 'project' keyword in CMakeLists [`2640`](https://github.com/lvgl/lvgl/pull/2640)
+- build add install rule to CMakeList.txt [`2621`](https://github.com/lvgl/lvgl/pull/2621)
+- Fixed row size calculation [`2633`](https://github.com/lvgl/lvgl/pull/2633)
+- arch add small 3rd party libs to lvgl  [`2569`](https://github.com/lvgl/lvgl/pull/2569)
+- Kconfig: Add missing options [`2597`](https://github.com/lvgl/lvgl/pull/2597)
+- Espressif IDF component manager [`2521`](https://github.com/lvgl/lvgl/pull/2521)
+- chore(btnmatrix) removed unnecessary semicolon [`2520`](https://github.com/lvgl/lvgl/pull/2520)
+- Update README.md [`2516`](https://github.com/lvgl/lvgl/pull/2516)
+- Corrected a function name in obj.md [`2511`](https://github.com/lvgl/lvgl/pull/2511)
+- Simple spelling fixes [`2496`](https://github.com/lvgl/lvgl/pull/2496)
+- added lv_obj_move_up() and lv_obj_move_down() [`2467`](https://github.com/lvgl/lvgl/pull/2467)
+- Fix buf name error for "lv_port_disp_template.c" and optimize the arduino example  [`2475`](https://github.com/lvgl/lvgl/pull/2475)
+- Fix two examples in the docs with new v8 api [`2486`](https://github.com/lvgl/lvgl/pull/2486)
+- kconfig: minor fix for default dark theme option [`2426`](https://github.com/lvgl/lvgl/pull/2426)
+- doc(table) update doc on cell merging [`2397`](https://github.com/lvgl/lvgl/pull/2397)
+- added example lv_example_anim_timeline_1.py [`2387`](https://github.com/lvgl/lvgl/pull/2387)
+- refactor(printf) add printf-like function attribute to _lv_txt_set_text_vfmt and lv_label_set_text_fmt [`2332`](https://github.com/lvgl/lvgl/pull/2332)
+- Update win.md [`2352`](https://github.com/lvgl/lvgl/pull/2352)
+- Nxp pxp vglite v8 dev [`2313`](https://github.com/lvgl/lvgl/pull/2313)
+- More Snapable --> Snappable replacements [`2304`](https://github.com/lvgl/lvgl/pull/2304)
+- Spelling and other language fixes to documentation [`2293`](https://github.com/lvgl/lvgl/pull/2293)
+- Update quick-overview.md [`2295`](https://github.com/lvgl/lvgl/pull/2295)
+- adding micropython examples [`2286`](https://github.com/lvgl/lvgl/pull/2286)
+
+- format run code-formtter.sh [`d67dd94`](https://github.com/lvgl/lvgl/commit/d67dd943cadb3d21a3d9488b6354f669e2e58c65)
+- Update ROADMAP.md [`2b1ae3c`](https://github.com/lvgl/lvgl/commit/2b1ae3c107539dec130b988cddca5ddb2b5af652)
+- Create .codecov.yml [`e53aa82`](https://github.com/lvgl/lvgl/commit/e53aa82658a1d7324f328c986cb5b7b669803ba2)
+- refactor(examples) drop JS-specific code from header.py [`ef41450`](https://github.com/lvgl/lvgl/commit/ef41450ed87f4f4dd936b63349b5a0c9ce880618)
+- make test run on mseter and release/v8.* [`227402a`](https://github.com/lvgl/lvgl/commit/227402a81a1cdd34cd57ec04682166d3961c4481)
+- Update release.yml [`0838f12`](https://github.com/lvgl/lvgl/commit/0838f1296b2c55c0b265650ee4310a79730536dd)
+- refactor(examples) drop usys import from header.py [`ad1f91a`](https://github.com/lvgl/lvgl/commit/ad1f91ab32c38cab7f0d1448ce3c4e67b47f4526)
+- Update ROADMAP.md [`a38fcf2`](https://github.com/lvgl/lvgl/commit/a38fcf2c7aa5fd156d3f2b6965ec4f81d7ff5503)
+- Revert "feat(conf) add better check for Kconfig default" [`a5793c7`](https://github.com/lvgl/lvgl/commit/a5793c70a9a60340a5f1c5d33ba1d118af0a76e2)
+- remove temorary test file [`a958c29`](https://github.com/lvgl/lvgl/commit/a958c29af7df66f84520036766929232e0c437c4)
+- start to implement release/patch [`1626a0c`](https://github.com/lvgl/lvgl/commit/1626a0c029504f26e568677debcb7ab0f6053f83)
+- chore(indev) minor formatting [`79ab3d2`](https://github.com/lvgl/lvgl/commit/79ab3d29b01e5f0bff1c754fdc36230584aeaaae)
+- add basic patch release script [`1c3ecf1`](https://github.com/lvgl/lvgl/commit/1c3ecf1cc14f5501a345472278cc485a24b8ab9c)
+- chore(example) minor improvements on lv_example_list_2 [`bb6d6b7`](https://github.com/lvgl/lvgl/commit/bb6d6b77999fde33f560bde92b394a8811303868)
+- tool: add changelog_gen.sh to automatically generate changelog [`6d95521`](https://github.com/lvgl/lvgl/commit/6d955210765de972f78b8c307df2f2387e4580ed)
+- update version numbers to v8.1.0-dev [`8691611`](https://github.com/lvgl/lvgl/commit/8691611de2206669cd22e3e97c844fdf2bf494b0)
+- chore(test) improve prints [`ea8bed3`](https://github.com/lvgl/lvgl/commit/ea8bed34b49343a4e881bdd42096f69d245ef66e)
+- chore(test) improve prints [`0c4bca0`](https://github.com/lvgl/lvgl/commit/0c4bca0f9cbeefaf20fd41e3a561d0e1799bc6b0)
+- chore: update lv_conf_internal.h [`41c2dd1`](https://github.com/lvgl/lvgl/commit/41c2dd16ee87f85338603399bb92e1f6eab84bf6)
+- chore(format) lv_conf_template.h minor formatting [`3c86d77`](https://github.com/lvgl/lvgl/commit/3c86d777c10c80ec9a4c5d3d403bd1395834004a)
+- chore(docs) always deploy master to docs/master as well [`6d05692`](https://github.com/lvgl/lvgl/commit/6d05692d7820a2b833751d6881704b283f1fe618)
+- Update CHANGELOG.md [`48fd73d`](https://github.com/lvgl/lvgl/commit/48fd73d20da4f19556660a9fca7faf042c965f56)
+- Fix compile errors [`6c956cc`](https://github.com/lvgl/lvgl/commit/6c956cc0f402b96512ed07f8a93003a0319fc49c)
+- Update textarea.md [`6d8799f`](https://github.com/lvgl/lvgl/commit/6d8799fbbfb1477ad2e0887644fb4cd900817199)
+- chore(assert) add warnign about higher memory usage if LV_USE_ASSERT_STYLE is enabled [`33e4330`](https://github.com/lvgl/lvgl/commit/33e433008e23b48540e83bc5399fd0ccb9e90630)
+- Update page.html [`9573bab`](https://github.com/lvgl/lvgl/commit/9573bab5cbe2da643f5146e62c176bdd0113d954)
+- chore(docs) force docs rebuild [`4a0f413`](https://github.com/lvgl/lvgl/commit/4a0f4139eb98e73b37abf62f66e2cf1c5d4e58db)
+- Fix typo error in color.md [`572880c`](https://github.com/lvgl/lvgl/commit/572880ccd3374ccbe81cf09a0620bf95659ca883)
+- Update arc.md [`2a9b9e6`](https://github.com/lvgl/lvgl/commit/2a9b9e6e1119db8294fdc63d93548fe06e2b6aa2)
+- Update index.rst [`9ce2c77`](https://github.com/lvgl/lvgl/commit/9ce2c7702d15d74f64b7d4bf6273cba442b48c09)
+- chore(docs) minor formatting on example's GitHub link [`75209e8`](https://github.com/lvgl/lvgl/commit/75209e893e89b6aa9d6a231af4661ce6a6dd6161)
+- chore(lv_conf_template) fix spelling mistake [`9d134a9`](https://github.com/lvgl/lvgl/commit/9d134a99e3f59412ee4a941f20bf70053dd4326d)
+- Update CHANGELOG.md [`8472360`](https://github.com/lvgl/lvgl/commit/847236044da01096beae4a586c874b4980f21a55)
+- chore(stale) disable on forks [`93c1303`](https://github.com/lvgl/lvgl/commit/93c1303ee7989d25216262e1d0ea244b59b975f6)
+- Revert "fix(tests) remove src/test_runners when cleaning" [`ae15a1b`](https://github.com/lvgl/lvgl/commit/ae15a1bbfe122115e5c8ac1f707929673843ad37)
+
+- style fix usage of clang-format directives [`2122583`](https://github.com/lvgl/lvgl/commit/2122583ec23d82422e1e3d6f2b5a20745fa5dd6d)
+- Revert "fix(indev) focus on objects on release instead of press" [`f61b2ca`](https://github.com/lvgl/lvgl/commit/f61b2ca45502472cde8ac0983b73dbf153de2b20)
+
 ## v8.0.2 (16.07.2021)
 - fix(theme) improve button focus of keyboard
 - fix(tabview) send LV_EVENT_VALUE_CHANGED only once
@@ -38,20 +645,21 @@
 - fix(flex) fix layout update and invalidation issues 
 - fix(flex) fix NULL pointer dereference 
 - fix(obj, switch) do not send LV_EVENT_VALUE_CHANGED twice  
-- fix(color) overflow with 16 bit color depth  
+- fix(color) overflow with 16-bit color depth  
 - fix(coords) fix using large coordinates  
 - fix(chart) fix crash if no series are added 
 - fix(chart) invalidation with LV_CHART_UPDATE_MODE_SHIFT 
 - fix(align) fix lv_obj_align_to  G
 - fix(table) invalidate the table on cell value change  
-- fix(label) remove dupliacted lv_obj_refresh_self_size 
+- fix(label) remove duplicated lv_obj_refresh_self_size 
 - fix(draw) underflow in subpixel font drawing 
 - fix (scroll) do not send unnecessary scroll end events  
 
+
 ## v8.0.1 (14.06.2021)
 - docs(filesystem) update to v8 <a href="https://github.com/lvgl/lvgl/commit/7971ade4">7971ade4</a> 
 - fix(msgbox) create modals on top layer instead of act screen <a href="https://github.com/lvgl/lvgl/commit/5cf6303e">5cf6303e</a> 
-- fix(colowheel) disable LV_OBJ_FLAG_SCROLL_CHAIN by default <a href="https://github.com/lvgl/lvgl/commit/48d1c292">48d1c292</a> 
+- fix(colorwheel) disable LV_OBJ_FLAG_SCROLL_CHAIN by default <a href="https://github.com/lvgl/lvgl/commit/48d1c292">48d1c292</a> 
 - docs(grid) typo fix (#2310) <a href="https://github.com/lvgl/lvgl/commit/69d109d2">69d109d2</a> 
 - fix(arduino) fix the prototype of my_touchpad_read in the LVGL_Arduino.ino <a href="https://github.com/lvgl/lvgl/commit/1a62f7a6">1a62f7a6</a> 
 - fix(meter) fix needle image invalidation <a href="https://github.com/lvgl/lvgl/commit/54d8e817">54d8e817</a> 
@@ -59,12 +667,12 @@
 - fix(calendar) fix the position calculation today <a href="https://github.com/lvgl/lvgl/commit/ad05e196">ad05e196</a> 
 - fix(typo) rename LV_OBJ_FLAG_SNAPABLE to LV_OBJ_FLAG_SNAPPABLE <a href="https://github.com/lvgl/lvgl/commit/e697807c">e697807c</a> 
 - docs(color) language fixes (#2302) <a href="https://github.com/lvgl/lvgl/commit/07ecc9f1">07ecc9f1</a> 
-- fix(tick) minor optmization on lv_tick_inc call test <a href="https://github.com/lvgl/lvgl/commit/b4305df5">b4305df5</a> 
+- fix(tick) minor optimization on lv_tick_inc call test <a href="https://github.com/lvgl/lvgl/commit/b4305df5">b4305df5</a> 
 - Spelling and other language fixes to documentation (#2293) <a href="https://github.com/lvgl/lvgl/commit/d0aaacaf">d0aaacaf</a> 
-- fix(theme) show disabled state on buttons of btnmatrix, msgbox and kayboard <a href="https://github.com/lvgl/lvgl/commit/0be582b3">0be582b3</a> 
+- fix(theme) show disabled state on buttons of btnmatrix, msgbox and keyboard <a href="https://github.com/lvgl/lvgl/commit/0be582b3">0be582b3</a> 
 - fix(scroll) keep the scroll position on object deleted <a href="https://github.com/lvgl/lvgl/commit/52edbb46">52edbb46</a> 
-- fix(msgbox) handle NULL btn map paramter <a href="https://github.com/lvgl/lvgl/commit/769c4a30">769c4a30</a> 
-- fix(group) allow refocusing obejcts <a href="https://github.com/lvgl/lvgl/commit/1520208b">1520208b</a> 
+- fix(msgbox) handle NULL btn map parameter <a href="https://github.com/lvgl/lvgl/commit/769c4a30">769c4a30</a> 
+- fix(group) allow refocusing objects <a href="https://github.com/lvgl/lvgl/commit/1520208b">1520208b</a> 
 - docs(overview) spelling fixes <a href="https://github.com/lvgl/lvgl/commit/d2efb8c6">d2efb8c6</a> 
 - Merge branch 'master' of https://github.com/lvgl/lvgl <a href="https://github.com/lvgl/lvgl/commit/45960838">45960838</a> 
 - feat(timer) check if lv_tick_inc is called <a href="https://github.com/lvgl/lvgl/commit/aa6641a6">aa6641a6</a> 
@@ -72,11 +680,11 @@
 - fix(theme) fix the switch style in the default theme <a href="https://github.com/lvgl/lvgl/commit/0c0dc8ea">0c0dc8ea</a> 
 - docs fix typo <a href="https://github.com/lvgl/lvgl/commit/8ab80645">8ab80645</a> 
 - Merge branch 'master' of https://github.com/lvgl/lvgl <a href="https://github.com/lvgl/lvgl/commit/e796448f">e796448f</a> 
-- feat(event) pass the scroll aniamtion to LV_EVENT_SCROLL_BEGIN <a href="https://github.com/lvgl/lvgl/commit/ca54ecfe">ca54ecfe</a> 
+- feat(event) pass the scroll animation to LV_EVENT_SCROLL_BEGIN <a href="https://github.com/lvgl/lvgl/commit/ca54ecfe">ca54ecfe</a> 
 - fix(tabview) fix with left and right tabs <a href="https://github.com/lvgl/lvgl/commit/17c57449">17c57449</a> 
 - chore(docs) force docs rebuild <a href="https://github.com/lvgl/lvgl/commit/4a0f4139">4a0f4139</a> 
 - chore(docs) always deploy master to docs/master as well <a href="https://github.com/lvgl/lvgl/commit/6d05692d">6d05692d</a> 
-- fix(template) udpate lv_objx_template to v8 <a href="https://github.com/lvgl/lvgl/commit/38bb8afc">38bb8afc</a> 
+- fix(template) update lv_objx_template to v8 <a href="https://github.com/lvgl/lvgl/commit/38bb8afc">38bb8afc</a> 
 - docs(extra) add extra/README.md <a href="https://github.com/lvgl/lvgl/commit/8cd504d5">8cd504d5</a> 
 - Update CHANGELOG.md <a href="https://github.com/lvgl/lvgl/commit/48fd73d2">48fd73d2</a> 
 - Update quick-overview.md (#2295) <a href="https://github.com/lvgl/lvgl/commit/5616471c">5616471c</a> 
@@ -84,15 +692,15 @@
 - adding micropython examples (#2286) <a href="https://github.com/lvgl/lvgl/commit/c60ed68e">c60ed68e</a> 
 - docs(color) minor fix <a href="https://github.com/lvgl/lvgl/commit/ac8f4534">ac8f4534</a> 
 - fix(example) revert test code <a href="https://github.com/lvgl/lvgl/commit/77e2c1ff">77e2c1ff</a> 
-- fix(draw) with additive blending with 32 bit color depth <a href="https://github.com/lvgl/lvgl/commit/786db2af">786db2af</a> 
+- fix(draw) with additive blending with 32-bit color depth <a href="https://github.com/lvgl/lvgl/commit/786db2af">786db2af</a> 
 - docs(color) update colors' docs <a href="https://github.com/lvgl/lvgl/commit/9056b5ee">9056b5ee</a> 
 - Merge branch 'master' of https://github.com/lvgl/lvgl <a href="https://github.com/lvgl/lvgl/commit/a711a1dd">a711a1dd</a> 
 - perf(refresh) optimize where to wait for lv_disp_flush_ready with 2 buffers <a href="https://github.com/lvgl/lvgl/commit/d0172f14">d0172f14</a> 
 - docs(lv_obj_style) update add_style and remove_style function headers (#2287) <a href="https://github.com/lvgl/lvgl/commit/60f7bcbf">60f7bcbf</a> 
 - fix memory leak of spangroup (#2285) <a href="https://github.com/lvgl/lvgl/commit/33e0926a">33e0926a</a> 
-- fix make lv_img_cache.h public becasue cache invalidation is public <a href="https://github.com/lvgl/lvgl/commit/38ebcd81">38ebcd81</a> 
+- fix make lv_img_cache.h public because cache invalidation is public <a href="https://github.com/lvgl/lvgl/commit/38ebcd81">38ebcd81</a> 
 - Merge branch 'master' of https://github.com/lvgl/lvgl <a href="https://github.com/lvgl/lvgl/commit/2b292495">2b292495</a> 
-- fix(btnmamatrix) fix focus event handling <a href="https://github.com/lvgl/lvgl/commit/3b58ef14">3b58ef14</a> 
+- fix(btnmatrix) fix focus event handling <a href="https://github.com/lvgl/lvgl/commit/3b58ef14">3b58ef14</a> 
 - Merge pull request #2280 from lvgl/dependabot/pip/docs/urllib3-1.26.5 <a href="https://github.com/lvgl/lvgl/commit/a2f45b26">a2f45b26</a> 
 - fix(label) calculating the clip area <a href="https://github.com/lvgl/lvgl/commit/57e211cc">57e211cc</a> 
 - chore(deps): bump urllib3 from 1.26.4 to 1.26.5 in /docs <a href="https://github.com/lvgl/lvgl/commit/b2f77dfc">b2f77dfc</a> 
@@ -117,8 +725,8 @@ v8 is a major change and therefore it's not backward compatible with v7.
 - `lv_cont` removed, layout features are moved to `lv_obj`
 - `lv_page` removed, scroll features are moved to `lv_obj`
 - `lv_objmask` the same can be achieved by events
-- `lv_meter` added as the unioin of `lv_linemeter` and `lv_gauge`
-- `lv_span` new widget mimicing HTML `<span>`
+- `lv_meter` added as the union of `lv_linemeter` and `lv_gauge`
+- `lv_span` new widget mimicking HTML `<span>`
 - `lv_animing` new widget for simple slideshow animations
 - \+ many minor changes and improvements
 
@@ -144,7 +752,7 @@ v8 is a major change and therefore it's not backward compatible with v7.
 
 ### Driver changes
 - `lv_disp_drv_t`, `lv_indev_drv_t`, `lv_fs_drv_t` needs to be `static`
-- `...disp_buf...` is renamed to `draw_buf`. See an initialization example [here](https://github.com/lvgl/lv_sim_eclipse_sdl/blob/e164e3591c3e1e3bf3464d19e0dcdc67b2e6a791/main.c#L87-L97).
+- `...disp_buf...` is renamed to `draw_buf`. See an initialization example [here](https://github.com/lvgl/lv_sim_eclipse_sdl/blob/release/v8.0/main.c#L128-L141).
 - No partial update if two screen sized buffers are set
 - `disp_drv->full_refresh = 1` makes always the whole display redraw. 
 - `hor_res` and `ver_res` need to be set in `disp_drv`
@@ -174,6 +782,7 @@ v8 is a major change and therefore it's not backward compatible with v7.
   - Update the events
   - Use the new layouts instead of `lv_cont` features
   - Use `lv_obj` instead of `lv_page`
+  - See the changes in [Colors](https://docs.lvgl.io/8.0/overview/color.html)
   - The other parts are mainly minor renames and refactoring. See the functions' documentation for descriptions. 
 
 ## v7.11.0 (16.03.2021)
@@ -221,7 +830,7 @@ v8 is a major change and therefore it's not backward compatible with v7.
 
 ### New features
 - feat(chart) add lv_chart_remove_series and lv_chart_hide_series
-- feat(img_cahce) allow disabling image caching
+- feat(img_cache) allow disabling image caching
 - calendar: make get_day_of_week() public
 - Added support for Zephyr integration
 
@@ -240,8 +849,8 @@ v8 is a major change and therefore it's not backward compatible with v7.
 ## v7.8.1 (15.12.2020)
 
 ### Bugfixes
-- fix(lv_scr_load_anim) fix when multiple screen are loaded at tsame time with delay
-- fix(page) fix LV_SCOLLBAR_MODE_DRAG
+- fix(lv_scr_load_anim) fix when multiple screens are loaded at the same time with delay
+- fix(page) fix LV_SCROLLBAR_MODE_DRAG
 
 ## v7.8.0 (01.12.2020)
 
@@ -274,14 +883,14 @@ v8 is a major change and therefore it's not backward compatible with v7.
 - fix(arc) fix and improve arc dragging
 - label: Repair calculate back `dot` character logical error which cause infinite loop.
 - fix(theme_material): remove the bottom border from tabview header
-- fix(imgbtn) guess a the closest available state with valid src
+- fix(imgbtn) guess the closest available state with valid src
 - fix(spinbox) update cursor position in lv_spinbox_set_step 
 
 ## v7.7.1 (03.11.2020)
 ### Bugfixes
 - Respect btnmatrix's `one_check` in `lv_btnmatrix_set_btn_ctrl`
 - Gauge: make the needle images to use the styles from `LV_GAUGE_PART_PART`
-- Group: fix in `lv_group_remove_obj` to handle deleting hidden obejcts correctly
+- Group: fix in `lv_group_remove_obj` to handle deleting hidden objects correctly
 
 ## v7.7.0 (20.10.2020)
 
@@ -336,7 +945,7 @@ v8 is a major change and therefore it's not backward compatible with v7.
 - Adjust button matrix button width to include padding when spanning multiple units.
 - Add rounding to btnmatrix line height calculation
 - Add `decmopr_buf` to GC roots
-- Fix divisioin by zero in draw_pattern (lv_draw_rect.c) if the image or letter is not found
+- Fix division by zero in draw_pattern (lv_draw_rect.c) if the image or letter is not found
 - Fix drawing images with 1 px height or width
 
 ## v7.4.0 (01.09.2020)
@@ -354,8 +963,8 @@ The main new features of v7.4 are run-time font loading, style caching and arc k
 ### Bugfixes
 - Fix color bleeding on border drawing
 - Fix using 'LV_SCROLLBAR_UNHIDE' after 'LV_SCROLLBAR_ON'
-- Fix croping of last column/row if an image is zoomed
-- Fix zooming and rotateing mosaic images
+- Fix cropping of last column/row if an image is zoomed
+- Fix zooming and rotating mosaic images
 - Fix deleting tabview with LEFT/RIGHT tab position
 - Fix btnmatrix to not send event when CLICK_TRIG = true and the cursor slid from a pressed button
 - Fix roller width if selected text is larger than the normal
@@ -366,13 +975,13 @@ The main new features of v7.4 are run-time font loading, style caching and arc k
 - Fix drawing value string twice
 - Rename  `lv_chart_clear_serie` to `lv_chart_clear_series` and `lv_obj_align_origo` to `lv_obj_align_mid`
 - Add linemeter's mirror feature again
-- Fix text decor (udnerline strikethrough) with older versions of font converter
+- Fix text decor (underline strikethrough) with older versions of font converter
 - Fix setting local style property multiple times 
 - Add missing background drawing and radius handling to image button
 - Allow adding extra label to list buttons
 - Fix crash if `lv_table_set_col_cnt` is called before `lv_table_set_row_cnt` for the first time
 - Fix overflow in large image transformations
-- Limit extra button click area of button matrix's buttons. With large paddings it was counter intuitive. (Gaps are mapped to button when clicked).
+- Limit extra button click area of button matrix's buttons. With large paddings it was counter-intuitive. (Gaps are mapped to button when clicked).
 - Fix `lv_btnmatrix_set_one_check` not forcing exactly one button to be checked
 - Fix color picker invalidation in rectangle mode
 - Init disabled days to gray color in calendar
@@ -392,8 +1001,8 @@ The main new features of v7.4 are run-time font loading, style caching and arc k
 - Prevent duplicated sending of `LV_EVENT_INSERT` from text area
 - Tidy outer edges of cpicker widget.
 - Remove duplicated lines from `lv_tabview_add_tab`
-- btnmatrix: hadle combined states of buttons (e.g. chacked + disabled)
-- textarea: fix typo in lv_textarea_set_sscrollbar_mode
+- btnmatrix: handle combined states of buttons (e.g. checked + disabled)
+- textarea: fix typo in lv_textarea_set_scrollbar_mode
 - gauge: fix image needle drawing
 - fix using freed memory in _lv_style_list_remove_style
 
@@ -410,7 +1019,7 @@ The main new features of v7.4 are run-time font loading, style caching and arc k
 - Add `lv_chart_get_point_id()` function - Get an individual point value in the chart series directly based on index
 - Add `ext_buf_assigned` bit field to `lv_chart_series_t` structure - it's true if external buffer is assigned to series
 - Add `lv_chart_set_series_axis()` to assign series to primary or secondary axis
-- Add `lv_chart_set_y_range()` to allow setting range of secondary y axis (based on `lv_chart_set_range` but extended with an axis parameter)
+- Add `lv_chart_set_y_range()` to allow setting range of secondary y-axis (based on `lv_chart_set_range` but extended with an axis parameter)
 - Allow setting different font for the selected text in `lv_roller`
 - Add `theme->apply_cb` to replace `theme->apply_xcb` to make it compatible with the MicroPython binding
 - Add `lv_theme_set_base()` to allow easy extension of built-in (or any) themes
@@ -422,7 +1031,7 @@ The main new features of v7.4 are run-time font loading, style caching and arc k
 - Use 14px font by default to for better compatibility with smaller displays 
 - `linemeter` fix conversation of current value to "level"
 - Fix drawing on right border
-- Set the cursor image non clickable by default
+- Set the cursor image non-clickable by default
 - Improve mono theme when used with keyboard or encoder
 
 ## v7.1.0 (07.07.2020)
@@ -455,7 +1064,7 @@ The main new features of v7.4 are run-time font loading, style caching and arc k
 - Fix gestures
 - Do not call `set_px_cb` for transparent pixel
 - Fix list button focus in material theme
-- Fix crash when the a text area is cleared with the backspace of a keyboard
+- Fix crash when a text area is cleared with the backspace of a keyboard
 - Add version number to `lv_conf_template.h`
 - Add log in true double buffering mode with `set_px_cb`
 - `lv_dropdown`: fix missing `LV_EVENT_VALUE_CHANGED` event when used with encoder
@@ -475,7 +1084,7 @@ The main new features of v7.4 are run-time font loading, style caching and arc k
 ## v7.0.1 (01.06.2020)
 
 ### Bugfixes
-- Make the Microptyhon working by adding the required variables as GC_ROOT
+- Make Micropython working by adding the required variables as GC_ROOT
 - Prefix some internal API functions with `_` to reduce the API of LVGL 
 - Fix built-in SimSun CJK font
 - Fix UTF-8 encoding when `LV_USE_ARABIC_PERSIAN_CHARS` is enabled
@@ -513,7 +1122,7 @@ The API in this regard remained the same but some new functions were added:
 - `lv_img_set_angle`: set image object's angle without using canvas
 - `lv_img_set_pivot`: set the pivot point of rotation
 
-The new drawing engine brought new drawing features too. They are highlighted in the "style" section.
+The new drawing engine brought new drawing features too. They are highlighted in the "style" section.
 
 ### New style system
 The old style system is replaced with a new more flexible and lightweighted one. 
@@ -528,8 +1137,8 @@ As part of these updates, a lot of objects were reworked and the APIs have been
 - dashed vertical and horizontal lines (*dash gap*, *dash_width*)
 - *outline*: a border-like part drawn out of the background. Can have spacing to the background.
 - *pattern*: display and image in the middle of the background or repeat it
-- *value* display a text which is stored in the style. It can be used e.g. as a lighweighted text on buttons too.
-- *margin*: similar to *padding* but used to keep space outside of the object
+- *value* display a text which is stored in the style. It can be used e.g. as a light-weighted text on buttons too.
+- *margin*: similar to *padding* but used to keep space outside the object
 
 Read the [Style](https://docs.littlevgl.com/v7/en/html/overview/style.html) section of the documentation to learn how the new styles system works.
 
@@ -558,7 +1167,7 @@ The following object types are renamed:
 ### Reworked and improved object
 - `dropdown`: Completely reworked. Now creates a separate list when opened and can be dropped to down/up/left/right.
 - `label`: `body_draw` is removed, instead, if its style has a visible background/border/shadow etc it will be drawn. Padding really makes the object larger (not just virtually as before)
-- `arc`: can draw bacground too.
+- `arc`: can draw background too.
 - `btn`: doesn't store styles for each state because it's done naturally in the new style system.
 - `calendar`: highlight the pressed datum. The used styles are changed: use `LV_CALENDAR_PART_DATE` normal for normal dates, checked for highlighted, focused for today, pressed for the being pressed. (checked+pressed, focused+pressed also work)
 - `chart`: only has `LINE` and `COLUMN` types because with new styles all the others can be described. LV_CHART_PART_SERIES sets the style of the series. bg_opa > 0 draws an area in LINE mode. `LV_CHART_PART_SERIES_BG` also added to set a different style for the series area. Padding in `LV_CHART_PART_BG` makes the series area smaller, and it ensures space for axis labels/numbers.

docs/CONTRIBUTING.md

@@ -9,7 +9,7 @@
 
 Join LVGL's community and leave your footprint in the library!
 
-There are a lot of ways to contribute to LVGL even if you are are new to the library or even new to programming. 
+There are a lot of ways to contribute to LVGL even if you are new to the library or even new to programming. 
 
 It might be scary to make the first step but you have nothing to be afraid of. 
 A friendly and helpful community is waiting for you. Get to know like-minded people and make something great together.
@@ -58,6 +58,33 @@ It will "copy" the `lvgl` repository to your GitHub account (`https://github.com
 8. Describe what is in the update. An example code is welcome if applicable.
 9. If you need to make more changes, just update your forked `lvgl` repo with new commits. They will automatically appear in the PR.
 
+### Commit message format
+In commit messages please follow the [Angular Commit Format](https://gist.github.com/brianclements/841ea7bffdb01346392c).
+
+Some examples:
+```
+fix(img) update size if a new source is set
+```
+
+```
+fix(bar) fix memory leak
+
+The animations weren't deleted in the destructor.
+
+Fixes: #1234
+```
+
+```
+feat add span widget
+
+The span widget allows mixing different font sizes, colors and styles.
+It's similar to HTML <span>
+```
+
+```
+docs(porting) fix typo
+```
+
 ## Developer Certification of Origin (DCO)
 
 ### Overview
@@ -188,16 +215,19 @@ Just read the titles and if you are familiar with the topic don't hesitate to sh
 Participating in the discussions is one of the best ways to become part of the project and get to know like-minded people!
 
 ### Add features
-We collect the planned features in GitHub on the [Roadmap](/ROADMAP) page. If you are interested in any of them feel free to share your opinion and/or participate in the the implementation.
+If you have created a cool widget, or added useful feature to LVGL feel free to open a new PR for it. 
+We collect the optional features (a.k.a. plugins) in [lvgl/src/extra](https://github.com/lvgl/lvgl/tree/master/src/extra) folder so if you are interested in adding a new features please use this folder. 
+The [README](https://github.com/lvgl/lvgl/blob/master/src/extra/README.md) file describes the basics rules of contribution and also lists some ideas.
+
+For further ideas take a look at the [Roadmap](/ROADMAP) page. If you are interested in any of them feel free to share your opinion and/or participate in the implementation.
 
 Other features which are (still) not on the road map are listed in the [Feature request](https://forum.lvgl.io/c/feature-request/9) category of the Forum. 
-If you have a feature idea for LVGL please use the Forum to share it! 
-Make sure to check that there isn't an existing post; if there is, you should comment on it to show that there is increased interest in an existing request.
 
 When adding a new features the followings also needs to be updated:
-- Add a line to [CHANGELOG.md](https://github.com/lvgl/lvgl/blob/master/CHANGELOG.md).
-- Update the documentation. 
-- Add an example if applicable.  See this [guide](#write-examples).
+- Update [lv_conf_template.h](https://github.com/lvgl/lvgl/blob/master/lv_conf_template.h)
+- Add description in the [docs](https://github.com/lvgl/lvgl/tree/master/docs) 
+- Add [examples](https://github.com/lvgl/lvgl/tree/master/examples)
+- Update the [changelog](https://github.com/lvgl/lvgl/tree/master/docs/CHANGELOG.md)
 
 ### Become a maintainer
 

docs/ROADMAP.md

@@ -3,16 +3,35 @@
 This is a summary for planned new features and a collection of ideas.
 This list indicates only the current intention and it can be changed.
 
-## v8.X
-- `lv_snapshot`: buffer a widget and all of its children into an image. he source widget can be on a different screen too. The result image can be transformed.
-- Add radio button support
-- Unit testing (gtest?). See [#1658](https://github.com/lvgl/lvgl/issues/1658)
-- Benchmarking (gem5?). See [#1660](https://github.com/lvgl/lvgl/issues/1660)
-- chart: pre-delete `X` pint after the lastly set
-- chart: autoscroll to the right
-- 9-patch support for `lv_imgbtn`.
-- Handle stride. See [#1858](https://github.com/lvgl/lvgl/issues/1858)
-- Optimize line and circle drawing and masking 
+## v8.1
+### Features
+- [x] Unit testing (gtest?). See #1658
+- [ ] Benchmarking (gem5 or qemu?). See #1660  
+- [ ] lv_snapshot: buffer a widget and all of its children into an image. The source widget can be on a different screen too. The resulting image can be transformed.
+- [ ] High level GPU support. See #2058
+
+#### New features
+- [x] merge MicroPython examples
+- [x] add a "Try out yourself" button to the Micropython examples
+  
+### Discuss
+- [ ] CPP binding  
+- [ ] Plugins. In v8 core and extra widgets are separated. With the new flexible events, the behavior of the widgets can be modified in a modular way. E.g. a plugin to add faded area to a line chart (as in the widgets demo)
+
+### Docs
+- [x] Display the Micropytohn examples too.
+- [x] Add a link to the example C and py files
+- [x] List of all examples on a page. All in iframes grouped by category (e.g. flex, style, button)
+
+### Others
+- [ ] Add automatic rebuild to get binary directly. Similarly to [STM32F746 project](https://github.com/lvgl/lv_port_stm32f746_disco#try-it-with-just-a-few-clicks).
+- [ ] Implement release scripts. I've added a basic specification [here](https://github.com/lvgl/lvgl/tree/master/scripts/release), but we should discuss it.
+- [ ] Unit test for the core widgets
+
+## v8.2
+- [ ] Optimize line and circle drawing and masking
+- [ ] Handle stride. See [#1858](https://github.com/lvgl/lvgl/issues/1858)
+- [ ] Support LV_STATE_HOVERED
 
 ## Ideas
 - Reconsider color format management for run time color format setting, and custom color format usage. (Also [RGB888](https://github.com/lvgl/lvgl/issues/1722))
@@ -57,7 +76,7 @@ This list indicates only the current intention and it can be changed.
   - Work in progress
 - Remove the align parameter from `lv_canvas_draw_text`
 - Remove the copy parameter from create functions
-- Optimize and simplifie styles [#1832](https://github.com/lvgl/lvgl/issues/1832)
-- Use a more generic inheritenace [#1919](https://github.com/lvgl/lvgl/issues/1919)
-- Allow adding multiple events to an obejct
+- Optimize and simplify styles [#1832](https://github.com/lvgl/lvgl/issues/1832)
+- Use a more generic inheritance [#1919](https://github.com/lvgl/lvgl/issues/1919)
+- Allow adding multiple events to an object
 

docs/_ext/lv_example.py

@@ -1,30 +1,40 @@
 import os
 
 from docutils import nodes
-from docutils.parsers.rst import Directive
+from docutils.parsers.rst import Directive, directives
 from docutils.parsers.rst.directives.images import Image
 from sphinx.directives.code import LiteralInclude
 
 
+def excluded_list(argument):
+    return argument.split(',')
+
+
+
+
 class LvExample(Directive):
-    required_arguments = 3
-    def run(self):
-        example_path = self.arguments[0]
-        example_name = os.path.split(example_path)[1]
-        language = self.arguments[2]
-        node_list = []
-
-        env = self.state.document.settings.env
-
-        if self.arguments[2] == 'py':
-            paragraph_node = nodes.raw(text=f"Click to try in the simulator!<br/><a target='_blank' href='https://sim.lvgl.io/v7/micropython/ports/javascript/bundle_out/index.html?script_startup=https://raw.githubusercontent.com/lvgl/lv_examples/{env.config.example_commit_hash}/src/header.py&script=https://raw.githubusercontent.com/lvgl/lv_examples/{env.config.built_example_commit_hash}/{example_name}/{example_name}.py'><img alt='{example_name}' src='https://raw.githubusercontent.com/lvgl/lv_examples/{env.config.built_example_commit_hash}/{example_name}/{example_name}.png'/></a>", format='html')
+    required_arguments = 1
+    option_spec = {
+        'excluded_languages': excluded_list,
+        'language': directives.unchanged,
+        'description': directives.unchanged
+    }
+    def get_example_code_path(self, example_path, language):
+        return os.path.abspath("../examples/" + example_path + "." + language)
+    def human_language_name(self, language):
+        if language == 'py':
+            return 'MicroPython'
+        elif language == 'c':
+            return 'C'
         else:
-            paragraph_node = nodes.raw(text=f"<iframe class='lv-example' src='/{env.config.version}/_static/built_lv_examples?example={example_name}&w=320&h=240'></iframe>", format='html')
+            return language
+    def github_path(self, example_path, language):
+        env = self.state.document.settings.env
+        return f"https://github.com/lvgl/lvgl/blob/{env.config.repo_commit_hash}/examples/{example_path}.{language}"
+    def embed_code(self, example_file, example_path, language, buttons={}):
         toggle = nodes.container('', literal_block=False, classes=['toggle'])
         header = nodes.container('', literal_block=False, classes=['header'])
         toggle.append(header)
-        example_file = os.path.abspath("../examples/" + example_path + "." + self.arguments[2])
-
         try:
             with open(example_file) as f:
                 contents = f.read()
@@ -33,10 +43,48 @@ class LvExample(Directive):
         literal_list = nodes.literal_block(contents, contents)
         literal_list['language'] = language
         toggle.append(literal_list)
-        header.append(nodes.raw(text=f"<p>code &nbsp; <a class='fa fa-github' href='https://github.com/lvgl/lvgl/blob/{env.config.repo_commit_hash}/examples/{example_path}.{language}'>&nbsp; view on GitHub</a></p>", format='html'))
-        if env.app.tags.has('html'):
-            node_list.append(paragraph_node)
-        node_list.append(toggle)
+        paragraph_node = nodes.raw(text=f"<p>{self.human_language_name(language)} code &nbsp;</p>", format='html')
+        for text, url in buttons.items():
+            paragraph_node.append(nodes.raw(text=f"<a class='lv-example-link-button' onclick=\"event.stopPropagation();\" href='{url}'>{text}</a>", format='html'))
+        header.append(paragraph_node)
+        return toggle
+    def run(self):
+        example_path = self.arguments[0]
+        example_name = os.path.split(example_path)[1]
+        excluded_languages = self.options.get('excluded_languages', [])
+        node_list = []
+
+        env = self.state.document.settings.env
+
+        iframe_html = ""
+        
+        c_path = self.get_example_code_path(example_path, 'c')
+        py_path = self.get_example_code_path(example_path, 'py')
+
+        c_code = self.embed_code(c_path, example_path, 'c', buttons={
+            '<i class="fa fa-github"></i>&nbsp;GitHub': self.github_path(example_path, 'c')
+        })
+        py_code = self.embed_code(py_path, example_path, 'py', buttons={
+            '<i class="fa fa-github"></i>&nbsp;GitHub': self.github_path(example_path, 'py'),
+            '<i class="fa fa-play"></i>&nbsp;Simulator': f"https://sim.lvgl.io/v{env.config.version}/micropython/ports/javascript/index.html?script_startup=https://raw.githubusercontent.com/lvgl/lvgl/{env.config.repo_commit_hash}/examples/header.py&script=https://raw.githubusercontent.com/lvgl/lvgl/{env.config.repo_commit_hash}/examples/{example_path}.py"
+        })
+
+        if not 'c' in excluded_languages:   
+            if env.app.tags.has('html'):
+                iframe_html = f"<div class='lv-example' data-real-src='/{env.config.version}/_static/built_lv_examples?example={example_name}&w=320&h=240'></div>"
+
+        description_html = f"<div class='lv-example-description'>{self.options.get('description', '')}</div>"
+        layout_node = nodes.raw(text=f"<div class='lv-example-container'>{iframe_html}{description_html}</div>", format='html')
+
+        node_list.append(layout_node)
+        if not 'c' in excluded_languages:
+            node_list.append(c_code)
+        if not 'py' in excluded_languages:
+            node_list.append(py_code)
+
+        trailing_node = nodes.raw(text=f"<hr/>", format='html')
+        node_list.append(trailing_node)
+
         return node_list
 
 def setup(app):

docs/_static/css/custom.css

@@ -19,7 +19,7 @@ span.pre:first-child
 
 code.sig-name
 {
-  //margin-left:8px;
+  /*margin-left:8px;*/
 }
 
 .toggle .header {
@@ -64,11 +64,45 @@ code.sig-name
   transform: translate(0, -10px);
 }
 
-.lv-example {
+.lv-example, .lv-example > iframe {
   border: none;
   outline: none;
   padding: none;
   display: block;
   width: 320px;
   height: 240px;
+  flex: none;
+  position: relative;
+}
+
+.lv-example > iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.lv-example-container {
+    display: flex;
+    padding-bottom: 16px;
+}
+.lv-example-description {
+    flex: 1 1 auto;
+    margin-left: 1rem;
+}
+
+.lv-example-link-button {
+    display: inline-block;
+    padding: 4px 8px;
+    border-radius: 4px;
+    background-color: #2980b9;
+    color: white;
+    margin: 0 4px;
+}
+.lv-example-link-button:hover {
+    color: white;
+    filter: brightness(120%);
+}
+
+.lv-example-link-button:visited {
+    color: white;
 }

docs/_templates/page.html

@@ -29,7 +29,9 @@ function add_version_selector()
             p.innerHTML = `
             <select name="versions" id="versions" onchange="ver_sel()" style="border-radius:5px; margin-bottom:15px">
             ${versions.map(version => {
-                const versionName = "v" + ((version.indexOf(".") != -1) ? version : (version + " (latest minor)"));
+                let versionName = "";  
+                if(version == "master") versionName = "master (latest)";
+                else versionName = "v" + ((version.indexOf(".") != -1) ? version : (version + " (latest minor)"));
                 return `<option value="${version}">${versionName}</option>`;
             })}
             </select>` + p.innerHTML;
@@ -49,5 +51,32 @@ document.addEventListener('DOMContentLoaded', (event) => {
     });
     
 })
+document.addEventListener('DOMContentLoaded', (event) => {
+    function onIntersection(entries) {
+        entries.forEach(entry => {
+            let currentlyLoaded = entry.target.getAttribute("data-is-loaded") == "true";
+            let shouldBeLoaded = entry.intersectionRatio > 0;
+            if(currentlyLoaded != shouldBeLoaded) {
+                entry.target.setAttribute("data-is-loaded", shouldBeLoaded);
+                if(shouldBeLoaded) {
+                    let iframe = document.createElement("iframe");
+                    iframe.src = entry.target.getAttribute("data-real-src");
+                    entry.target.appendChild(iframe);
+                } else {
+                    let iframe = entry.target.querySelector("iframe");
+                    iframe.parentNode.removeChild(iframe);
+                }
+            }
+        });
+    }
+    const config = {
+        rootMargin: '600px 0px',
+        threshold: 0.01
+    };
+    let observer = new IntersectionObserver(onIntersection, config);
+    document.querySelectorAll(".lv-example").forEach(iframe => {
+        observer.observe(iframe);
+    });
+});
 </script>
 {% endblock %}

docs/build.py

@@ -4,6 +4,7 @@ import sys
 import os
 import subprocess
 import re
+import example_list as ex
 
 langs = ['en']
 
@@ -25,6 +26,10 @@ def cmd(s):
 status, br = subprocess.getstatusoutput("git branch | grep '*'")
 _, gitcommit = subprocess.getstatusoutput("git rev-parse HEAD")
 br = re.sub('\* ', '', br)
+
+# Generate the list of examples
+ex.exec()
+
 urlpath = re.sub('release/', '', br)
  
 # Be sure the github links point to the right branch

docs/conf.py

@@ -66,7 +66,7 @@ master_doc = 'index'
 
 # General information about the project.
 project = 'LVGL'
-copyright = '2020, LVGL LLC'
+copyright = '2021, LVGL Kft'
 author = 'LVGL community'
 
 # The version info for the project you're documenting, acts as replacement for

docs/example_list.py

@@ -0,0 +1,125 @@
+#!/usr/bin/env python3
+import os
+
+
+def process_index_rst(path):
+#  print(path)
+  with open(path) as fp:
+    last_line=""
+    line=""
+    title_tmp=""
+    line = fp.readline()
+    d = {}
+    while line:
+      if line[0:3] == '"""':
+        title_tmp = last_line
+      elif line[0:15] ==".. lv_example::":
+        name = line[16:].strip()
+        title_tmp = title_tmp.strip()
+        d[name] = title_tmp
+      last_line = line
+      line = fp.readline()
+
+    return(d)
+      
+h1= {
+  "get_started":"Get started", 
+  "styles":"Styles", 
+  "anim":"Animations", 
+  "event":"Events", 
+  "layouts":"Layouts", 
+  "scroll":"Scrolling",
+  "widgets":"Widgets"
+}
+
+widgets = {
+"obj":"Base object",
+"arc":"Arc",
+"bar":"Bar",
+"btn":"Button",
+"btnmatrix":"Button matrix",
+"calendar":"Calendar",
+"canvas":"Canvas",
+"chart":"Chart",
+"checkbox":"Checkbox",
+"colorwheel":"Colorwheel",
+"dropdown":"Dropdown",
+"img":"Image",
+"imgbtn":"Image button",
+"keyboard":"Keyboard",
+"label":"Label",
+"led":"LED",
+"line":"Line",
+"list":"List",
+"meter":"Meter",
+"msgbox":"Message box",
+"roller":"Roller",
+"slider":"Slider",
+"span":"Span",
+"spinbox":"Spinbox",
+"spinner":"Spinner",
+"switch":"Switch",
+"table":"Table",
+"tabview":"Tabview",
+"textarea":"Textarea",
+"tileview":"Tabview",
+"win":"Window",
+}
+
+layouts = {
+"flex":"Flex",
+"grid":"Grid",
+}
+
+
+def print_item(path, lvl, d, fout):
+  for k in d:
+    v = d[k]
+    if k.startswith(path + "/lv_example_"):
+     fout.write("#"*lvl + " " + v + "\n")
+     fout.write('```eval_rst\n')
+     fout.write(f".. lv_example:: {k}\n")
+     fout.write('```\n')
+     fout.write("\n")
+
+def exec():
+  path ="../examples/"
+  fout = open("examples.md", "w")
+  filelist = []
+
+  for root, dirs, files in os.walk(path):
+	  for f in files:
+      #append the file name to the list
+		  filelist.append(os.path.join(root,f))
+
+  filelist = [ fi for fi in filelist if fi.endswith("index.rst") ]
+
+  d_all = {}
+  #print all the file names
+  for fn in filelist:
+     d_act = process_index_rst(fn)
+     d_all.update(d_act)
+
+  fout.write("```eval_rst\n")
+  fout.write(".. include:: /header.rst\n") 
+  fout.write(":github_url: |github_link_base|/examples.md\n")
+  fout.write("```\n")
+  fout.write("\n")
+  fout.write("# Examples\n")
+
+  for h in h1:
+    fout.write("## " + h1[h] + "\n")
+    
+    if h == "widgets":
+      for w in widgets:
+        fout.write("### " + widgets[w] + "\n")
+        print_item(h + "/" + w, 4, d_all, fout)
+    elif h == "layouts":
+      for l in layouts:
+        fout.write("### " + layouts[l] + "\n")
+        print_item(h + "/" + l, 4, d_all, fout)
+    else:
+      print_item(h, 3, d_all, fout)   
+      
+    fout.write("")
+  

docs/get-started/arduino.md

@@ -5,22 +5,21 @@
 
 # Arduino
 
-The [core LVGL library](https://github.com/lvgl/lvgl) and the [examples](https://github.com/lvgl/lv_examples) are directly available as Arduino libraries.
+The [core LVGL library](https://github.com/lvgl/lvgl) and the [demos](https://github.com/lvgl/lv_demos) are directly available as Arduino libraries.
 
 Note that you need to choose a powerful enough board to run LVGL and your GUI.  See the [requirements of LVGL](https://docs.lvgl.io/latest/en/html/intro/index.html#requirements). 
 
 For example ESP32 is a good candidate to create your UI with LVGL.
 
 
-## Get the LVGL Ardunio library
+## Get the LVGL Arduino library
 
 LVGL can be installed via the Arduino IDE Library Manager or as a .ZIP library.
-It will also install [lv_exmaples](https://github.com/lvgl/lv_examples) which contains a lot of examples and demos to try LVGL.
 
 ## Set up drivers
 
 To get started it's recommended to use [TFT_eSPI](https://github.com/Bodmer/TFT_eSPI) library as a TFT driver to simplify testing. 
-To make it work setup `TFT_eSPI` according to your TFT display type via editing either
+To make it work, setup `TFT_eSPI` according to your TFT display type via editing either
 - `User_Setup.h` 
 - or by selecting a configuration in the `User_Setup_Select.h`
 
@@ -28,36 +27,30 @@ Both files are located in `TFT_eSPI` library's folder.
 
 ## Configure LVGL
 
-LVGL has its own configuration file called `lv_conf.h`. When LVGL is installed the followings needs to be done to configure it:
+LVGL has its own configuration file called `lv_conf.h`. When LVGL is installed, follow these configuration steps:
 1. Go to directory of the installed Arduino libraries
 2. Go to `lvgl` and copy `lv_conf_template.h` as `lv_conf.h` into the Arduino Libraries directory next to the `lvgl` library folder.
 3. Open `lv_conf.h` and change the first `#if 0` to `#if 1`
-4. Set the resolution of your display in `LV_HOR_RES_MAX` and `LV_VER_RES_MAX`
-5. Set the color depth of you display in `LV_COLOR_DEPTH`
-6. Set `LV_TICK_CUSTOM 1`
-
-## Configure the examples
-`lv_examples` can be configures similarly to LVGL but it's configuration file is called `lv_ex_conf.h`. 
-1. Go to directory of the installed Arduino libraries
-2. Go to `lv_examples` and copy `lv_ex_template.h` as `lv_ex_conf.h` next to the `lv_examples` folder.
-3. Open `lv_ex_conf.h` and change the first `#if 0` to `#if 1`
-4. Enable the demos you want to use. (The small examples starting with `lv_ex_...()` are always enabled.)
+4. Set the color depth of you display in `LV_COLOR_DEPTH`
+5. Set `LV_TICK_CUSTOM 1`
 
 ## Initialize LVGL and run an example
 
-Take a look at [LVGL_Arduino.ino](https://github.com/lvgl/lvgl/blob/master/examples/LVGL_Arduino.ino) to see how to initialize LVGL.
+Take a look at [LVGL_Arduino.ino](https://github.com/lvgl/lvgl/blob/master/examples/arduino/LVGL_Arduino/LVGL_Arduino.ino) to see how to initialize LVGL.
 TFT_eSPI is used as the display driver.
 
-In the INO file you can see how to register a display and a touch pad for LVGL and call an example.
+In the INO file you can see how to register a display and a touchpad for LVGL and call an example.
 
-Note that, there is no dedicated INO file for every example but you can call functions like `lv_ex_btn1()` or `lv_ex_slider1()` to run an example.
-For the full list of examples see the [README of lv_examples](https://github.com/lvgl/lv_examples/blob/master/README.md).
+Note that, there is no dedicated INO file for every example, but you can open the examples in `lvgl/examples` folder and copy-paste them to your INO file. 
+You can NOT call the examples like `lv_example_btn_1()` because the Arduino doesn't compile the examples.
+
+You can the [lv_demos](https://github.com/lvgl/lv_demos) library which needs to be installed and configured separately.
 
 ## Debugging and logging
 
-In case of trouble LVGL can display debug information. 
-In the `LVGL_Arduino.ino` example there is `my_print` method, which allow to send this debug information to the serial interface. 
-To enable this feature you have to edit `lv_conf.h` file and enable logging in the section `log settings`:
+LVGL can display debug information in case of trouble. 
+In the `LVGL_Arduino.ino` example there is a `my_print` method, which sends this debug information to the serial interface. 
+To enable this feature you have to edit the `lv_conf.h` file and enable logging in the section `log settings`:
 
 ```c
 /*Log settings*/
@@ -73,5 +66,5 @@ To enable this feature you have to edit `lv_conf.h` file and enable logging in t
 #  define LV_LOG_LEVEL    LV_LOG_LEVEL_WARN
 ```
 
-After enabling the log module and setting LV_LOG_LEVEL accordingly the output log is sent to the `Serial` port @ 115200 bps.
+After enabling the log module and setting LV_LOG_LEVEL accordingly, the output log is sent to the `Serial` port @ 115200 bps.
 

docs/get-started/espressif.md

@@ -20,7 +20,7 @@ ESP-IDF v4 framework is the suggested version to use.
 
 ### Get LVGL
 
-You are suggested to add LVGL as a "component". This component can be located inside a directory named "components" on your project root directory.
+It is suggested that you add LVGL as a "component" to your project. This component can be located inside a directory named "components" in the project root directory.
 
 When your project is a git repository you can include LVGL as a git submodule:
 
@@ -30,11 +30,11 @@ git submodule add https://github.com/lvgl/lvgl.git components/lvgl
 
 The above command will clone LVGL's main repository into the `components/lvgl` directory. LVGL includes a `CMakeLists.txt` file that sets some configuration options so you can use LVGL right away.
 
-When you are ready to configure LVGL launch the configuration menu with `idf.py menuconfig` on your project root directory, go to `Component config` and then `LVGL configuration`.
+When you are ready to configure LVGL, launch the configuration menu with `idf.py menuconfig` on your project root directory, go to `Component config` and then `LVGL configuration`.
 
 ## Use lvgl_esp32_drivers in your project
 
-You are suggested to add `lvgl_esp32_drivers` as a "component". This component can be located inside a directory named "components" on your project root directory.
+You can also add `lvgl_esp32_drivers` as a "component". This component can be located inside a directory named "components" on your project root directory.
 
 When your project is a git repository you can include `lvgl_esp32_drivers` as a git submodule:
 

docs/get-started/micropython.md

@@ -14,7 +14,7 @@ Using Micropython, you can write Python3 code and run it even on a bare metal ar
 - **Compact** - Fits and runs within just 256k of code space and 16k of RAM. No OS is needed, although you can also run it with an OS, if you want.
 - **Compatible** - Strives to be as compatible as possible with normal Python (known as CPython).
 - **Versatile** - Supports many architectures (x86, x86-64, ARM, ARM Thumb, Xtensa).
-- **Interactive** - No need for the compile-flash-boot cycle. With the REPL (interactive prompt) you can type commands and execute them immediately, run scripts etc.
+- **Interactive** - No need for the compile-flash-boot cycle. With the REPL (interactive prompt) you can type commands and execute them immediately, run scripts, etc.
 - **Popular** - Many platforms are supported. The user base is growing bigger. Notable forks: [MicroPython](https://github.com/micropython/micropython), [CircuitPython](https://github.com/adafruit/circuitpython), [MicroPython_ESP32_psRAM_LoBo](https://github.com/loboris/MicroPython_ESP32_psRAM_LoBo)
 - **Embedded Oriented** - Comes with modules specifically for embedded systems, such as the [machine module](https://docs.micropython.org/en/latest/library/machine.html#classes) for accessing low-level hardware (I/O pins, ADC, UART, SPI, I2C, RTC, Timers etc.)
 
@@ -26,7 +26,7 @@ Currently, Micropython [does not have a good high-level GUI library](https://for
 
 ### Here are some advantages of using LVGL in Micropython:
 
-- Develop GUI in Python, a very popular high level language. Use paradigms such as Object Oriented Programming.
+- Develop GUI in Python, a very popular high level language. Use paradigms such as Object-Oriented Programming.
 - Usually, GUI development requires multiple iterations to get things right. With C, each iteration consists of **`Change code` > `Build` > `Flash` > `Run`**.  
 In Micropython it's just **`Change code` > `Run`** ! You can even run commands interactively using the [REPL](https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop) (the interactive prompt)
 
@@ -35,7 +35,7 @@ In Micropython it's just **`Change code` > `Run`** ! You can even run commands i
 - Fast prototyping GUI.  
 - Shortening the cycle of changing and fine-tuning the GUI.
 - Modelling the GUI in a more abstract way by defining reusable composite objects, taking advantage of Python's language features such as Inheritance, Closures, List Comprehension, Generators, Exception Handling, Arbitrary Precision Integers and others.
-- Make LVGL accessible to a larger audience. No need to know C in order to create a nice GUI on an embedded system.  
+- Make LVGL accessible to a larger audience. No need to know C to create a nice GUI on an embedded system.  
 This goes well with [CircuitPython vision](https://learn.adafruit.com/welcome-to-circuitpython/what-is-circuitpython). CircuitPython was designed with education in mind, to make it easier for new or unexperienced users to get started with embedded development.
 - Creating tools to work with LVGL at a higher level (e.g. drag-and-drop designer).
 
@@ -44,7 +44,7 @@ This goes well with [CircuitPython vision](https://learn.adafruit.com/welcome-to
 ## So what does it look like?
 
 > TL;DR:
-> It's very much like the C API, but Object Oriented for LVGL components.
+> It's very much like the C API, but Object-Oriented for LVGL components.
 
 Let's dive right into an example!  
 

docs/get-started/nuttx.md

@@ -12,9 +12,9 @@ The best way to think about NuttX is to think of it as a small Unix/Linux for mi
 
 ### Highlights of NuttX
 
-- **Small** - Fits and runs in microcontrollers as small as 32KB Flash and 8KB of RAM.
+- **Small** - Fits and runs in microcontrollers as small as 32 kB Flash and 8 kB of RAM.
 - **Compliant** - Strives to be as compatible as possible with POSIX and Linux.
-- **Versatile** - Supports many architectures (ARM, ARM Thumb, AVR, MIPS, OpenRISC, RISC-V 32-bit and 64-bit, RX65N, x86-64, Xtensa, Z80/Z180, etc).
+- **Versatile** - Supports many architectures (ARM, ARM Thumb, AVR, MIPS, OpenRISC, RISC-V 32-bit and 64-bit, RX65N, x86-64, Xtensa, Z80/Z180, etc.).
 - **Modular** - Its modular design allows developers to select only what really matters and use modules to include new features.
 - **Popular** - NuttX is used by many companies around the world. Probably you already used a product with NuttX without knowing it was running NuttX.
 - **Predictable** - NuttX is a preemptible Realtime kernel, so you can use it to create predictable applications for realtime control.
@@ -45,10 +45,10 @@ Using LVGL, Linux and NuttX you can reduce this process and just test everything
 
 ## How to get started with NuttX and LVGL?
 
-There are many boards in the NuttX mainline (https://github.com/apache/incubator-nuttx) with support for LVGL.
-Let's use the [STM32F429IDISCOVERY](https://www.st.com/en/evaluation-tools/32f429idiscovery.html) as example because it is a very popular board.
+There are many boards in the [NuttX mainline](https://github.com/apache/incubator-nuttx) with support for LVGL.
+Let's use the [STM32F429IDISCOVERY](https://www.st.com/en/evaluation-tools/32f429idiscovery.html) as an example because it is a very popular board.
 
-### First you need to install the pre-requisite on your system
+### First you need to install the pre-requisites on your system
 
 Let's use the [Windows Subsystem for Linux](https://acassis.wordpress.com/2018/01/10/how-to-build-nuttx-on-windows-10/)
 
@@ -56,7 +56,7 @@ Let's use the [Windows Subsystem for Linux](https://acassis.wordpress.com/2018/0
 $ sudo apt-get install automake bison build-essential flex gcc-arm-none-eabi gperf git libncurses5-dev libtool libusb-dev libusb-1.0.0-dev pkg-config kconfig-frontends openocd
 ```
 
-### Now let's to create a workspace to save our files
+### Now let's create a workspace to save our files
 
 ```shell
 $ mkdir ~/nuttxspace

docs/get-started/nxp.md

@@ -14,9 +14,7 @@ configured with LVGL (and with PXP support if module is present), no additional
 work is required.
 
 ## Adding HW acceleration for NXP iMX RT platforms using PXP (PiXel Pipeline) engine for existing projects
-Several drawing features in LVGL can be offloaded to PXP engine. In order to use CPU time while PXP
-is running, RTOS is required to block the LVGL drawing thread and switch to another task, or simply to
-idle task, where CPU could be suspended to save power.
+Several drawing features in LVGL can be offloaded to the PXP engine. The CPU is available for other operations while the PXP is running. An RTOS is required to block the LVGL drawing thread and switch to another task or suspend the CPU for power savings.
 
 #### Features supported:
   - RGB565 color format
@@ -59,13 +57,13 @@ idle task, where CPU could be suspended to save power.
       - fsl_cache.c, fsl_cache.h: CPU cache handling functions
 
 #### Advanced configuration:
-  - Implementation depends on multiple OS-specific functions. Structure `lv_nxp_pxp_cfg_t` with callback pointers is used
-    as a parameter for `lv_gpu_nxp_pxp_init()` function. Default implementation for FreeRTOS and baremetal is provided in lv_gpu_nxp_osa.c
+  - Implementation depends on multiple OS-specific functions. The struct `lv_nxp_pxp_cfg_t` with callback pointers is used
+    as a parameter for the `lv_gpu_nxp_pxp_init()` function. Default implementation for FreeRTOS and baremetal is provided in lv_gpu_nxp_osa.c
       - `pxp_interrupt_init()`: Initialize PXP interrupt (HW setup, OS setup)
       - `pxp_interrupt_deinit()`: Deinitialize PXP interrupt (HW setup, OS setup)
       - `pxp_run()`: Start PXP job. Use OS-specific mechanism to block drawing thread. PXP must finish drawing before leaving this function.
-  - There are configurable area thresholds which are used to decide whether the area will be processed by CPU, or by PXP. Areas smaller than
-    defined value will be processed by CPU, areas bigger than the threshold will be processed by PXP. These thresholds may be defined as a
+  - There are configurable area thresholds which are used to decide whether the area will be processed by CPU, or by PXP. Areas smaller than a
+    defined value will be processed by CPU and those bigger than the threshold will be processed by PXP. These thresholds may be defined as
     preprocessor variables. Default values are defined lv_gpu/lv_gpu_nxp_pxp.h
       - `GPU_NXP_PXP_BLIT_SIZE_LIMIT`: size threshold for image BLIT, BLIT with color keying, and BLIT with recolor (OPA > LV_OPA_MAX)
       - `GPU_NXP_PXP_BLIT_OPA_SIZE_LIMIT`: size threshold for image BLIT and BLIT with color keying with transparency (OPA < LV_OPA_MAX)

docs/get-started/pc-simulator.md

@@ -5,13 +5,13 @@
 # Simulator on PC
 
 
-You can try out LVGL **using only your PC** (i.e. without any development boards). LVGL will run on a simulator environment on the PC where anyone can write and experiment the real LVGL applications.
+You can try out LVGL **using only your PC** (i.e. without any development boards). LVGL will run on a simulator environment on the PC where anyone can write and experiment with real LVGL applications.
 
-Using the simulator on the PC has the following advantages:
-- Hardware independent - Write code, run it on the PC and see the result on the PC monitor.
-- Cross-platform - Any Windows, Linux or MacOS system can run the PC simulator.  
-- Portability - the written code is portable, which means you can simply copy it when using an embedded hardware.
-- Easy Validation - The simulator is also very useful to report bugs because it means common platform for every user. So it's a good idea to reproduce a bug in the simulator and use the code snippet in the [Forum](https://forum.lvgl.io).
+Using the simulator on a PC has the following advantages:
+- Hardware independent - Write code, run it on the PC and see the result on a monitor.
+- Cross-platform - Any Windows, Linux or macOS system can run the PC simulator.  
+- Portability - The written code is portable, which means you can simply copy it when migrating to embedded hardware.
+- Easy Validation - The simulator is also very useful to report bugs because it provides a common platform for every user. So it's a good idea to reproduce a bug in the simulator and use that code snippet in the [Forum](https://forum.lvgl.io).
 
 ## Select an IDE
 
@@ -23,8 +23,8 @@ The simulator is ported to various IDEs (Integrated Development Environments). C
 - [VSCode with SDL driver](https://github.com/lvgl/lv_sim_vscode_sdl): Recommended on Linux and Mac
 - [PlatformIO with SDL driver](https://github.com/lvgl/lv_platformio): Recommended on Linux and Mac
 
-You can use any IDE for the development but, for simplicity, the configuration for Eclipse CDT is what we'll focus on in this tutorial.
-The following section describes the set-up guide of Eclipse CDT in more details.
+You can use any IDE for development but, for simplicity, the configuration for Eclipse CDT is what we'll focus on in this tutorial.
+The following section describes the set-up guide of Eclipse CDT in more detail.
 
 **Note: If you are on Windows, it's usually better to use the Visual Studio or CodeBlocks projects instead. They work out of the box without requiring extra steps.**
 
@@ -34,18 +34,18 @@ The following section describes the set-up guide of Eclipse CDT in more details.
 
 [Eclipse CDT](https://eclipse.org/cdt/) is a C/C++ IDE.
 
-Eclipse is a Java based software therefore be sure **Java Runtime Environment** is installed on your system.   
+Eclipse is a Java-based tool so be sure **Java Runtime Environment** is installed on your system.   
 
 On Debian-based distros (e.g. Ubuntu): `sudo apt-get install default-jre`
 
-Note: If you are using other distros, then please refer and install 'Java Runtime Environment' suitable to your distro.
+Note: If you are using other distros, then please install a 'Java Runtime Environment' suitable to your distro.
 Note: If you are using macOS and get a "Failed to create the Java Virtual Machine" error, uninstall any other Java JDK installs and install Java JDK 8u. This should fix the problem.
 
 You can download Eclipse's CDT from: [https://www.eclipse.org/cdt/downloads.php](https://www.eclipse.org/cdt/downloads.php). Start the installer and choose *Eclipse CDT* from the list.
 
 ### Install SDL 2
 
-The PC simulator uses the [SDL 2](https://www.libsdl.org/download-2.0.php) cross platform library to simulate a TFT display and a touch pad. 
+The PC simulator uses the [SDL 2](https://www.libsdl.org/download-2.0.php) cross-platform library to simulate a TFT display and a touchpad. 
 
 #### Linux
 On **Linux** you can easily install SDL2 using a terminal:
@@ -80,19 +80,19 @@ You can find the latest one on [GitHub](https://github.com/lvgl/lv_sim_eclipse_s
 
 ### Add the pre-configured project to Eclipse CDT
 
-Run Eclipse CDT. It will show a dialogue about the **workspace path**. Before accepting the path, check that path and copy (and unzip) the downloaded pre-configured project there. After that, you can accept the workspace path. Of course you can modify this path but, in that case copy the project to the corresponding location.
+Run Eclipse CDT. It will show a dialogue about the **workspace path**. Before accepting the path, check that path and copy (and unzip) the downloaded pre-configured project there. After that, you can accept the workspace path. Of course you can modify this path but in that case copy the project to the corresponding location.
 
-Close the start up window and go to **File->Import** and choose **General->Existing project into Workspace**. **Browse the root directory** of the project and click **Finish**
+Close the start-up window and go to **File->Import** and choose **General->Existing project into Workspace**. **Browse the root directory** of the project and click **Finish**
 
 On **Windows** you have to do two additional things:
 
 - Copy the **SDL2.dll** into the project's Debug folder 
-- Right click on the project -> Project properties -> C/C++ Build -> Settings -> Libraries -> Add ... and add _mingw32_ above SDLmain and SDL. (The order is important: mingw32, SDLmain, SDL)
+- Right-click on the project -> Project properties -> C/C++ Build -> Settings -> Libraries -> Add ... and add _mingw32_ above SDLmain and SDL. (The order is important: mingw32, SDLmain, SDL)
 
 ### Compile and Run
 
-Now you are ready to run LVGL on your PC. Click on the Hammer Icon on the top menu bar to Build the project. If you have done everything right, then you will not get any errors. Note that on some systems additional steps might be required to "see" SDL 2 from Eclipse but, in most of cases the configurations in the downloaded project is enough.
+Now you are ready to run LVGL on your PC. Click on the Hammer Icon on the top menu bar to Build the project. If you have done everything right, then you will not get any errors. Note that on some systems additional steps might be required to "see" SDL 2 from Eclipse but in most cases the configuration in the downloaded project is enough.
 
-After a success build, click on the Play button on the top menu bar to run the project. Now a window should appear in the middle of your screen.
+After a successful build, click on the Play button on the top menu bar to run the project. Now a window should appear in the middle of your screen.
 
 Now you are ready to use LVGL and begin development on your PC.

docs/get-started/quick-overview.md

@@ -38,7 +38,7 @@ lv_disp_draw_buf_init(&draw_buf, buf1, NULL, MY_DISP_HOR_RES * MY_DISP_VER_SER /
 static lv_disp_drv_t disp_drv;        /*Descriptor of a display driver*/
 lv_disp_drv_init(&disp_drv);          /*Basic initialization*/
 disp_drv.flush_cb = my_disp_flush;    /*Set your driver function*/
-disp_drv.buffer = &draw_buf;          /*Assign the buffer to the display*/
+disp_drv.draw_buf = &draw_buf;        /*Assign the buffer to the display*/
 disp_drv.hor_res = MY_DISP_HOR_RES;   /*Set the horizontal resolution of the display*/
 disp_drv.ver_res = MY_DISP_VER_RES;   /*Set the vertical resolution of the display*/
 lv_disp_drv_register(&disp_drv);      /*Finally register the driver*/
@@ -59,7 +59,7 @@ void my_disp_flush(lv_disp_drv_t * disp, const lv_area_t * area, lv_color_t * co
 }
 
 ```
-- Implement and register a function which can read an input device. E.g. for a touch pad:
+- Implement and register a function which can read an input device. E.g. for a touchpad:
 ```c
 static lv_indev_drv_t indev_drv;           /*Descriptor of a input device driver*/
 lv_indev_drv_init(&indev_drv);             /*Basic initialization*/
@@ -90,11 +90,11 @@ For a more detailed guide go to the [Porting](/porting/index) section.
 
 The graphical elements like Buttons, Labels, Sliders, Charts etc. are called objects or widgets. Go to [Widgets](/widgets/index) to see the full list of available widgets.
 
-Every object has a parent object where it is created. For example if a label is created on a button, the button is the parent of label. 
+Every object has a parent object where it is created. For example, if a label is created on a button, the button is the parent of label. 
 
 The child object moves with the parent and if the parent is deleted the children will be deleted too. 
 
-Children can be visible only on their parent. It other words, the parts of the children outside of the parent are clipped.
+Children can be visible only within their parent's bounding area. In other words, the parts of the children outside the parent are clipped.
 
 A Screen is the "root" parent. You can have any number of screens. 
 
@@ -114,7 +114,7 @@ lv_obj_set_y(btn1, 10);
 lv_obj_set_size(btn1, 200, 50);
 ```
 
-The widgets have type specific parameters too which can be set by `lv_<widget_type>_set_<parameter_name>(obj, <value>)` functions. For example:
+Along with the basic attributes, widgets can have type specific parameters which are set by `lv_<widget_type>_set_<parameter_name>(obj, <value>)` functions. For example:
 ```c
 lv_slider_set_value(slider1, 70, LV_ANIM_ON);
 ```
@@ -125,7 +125,7 @@ To see the full API visit the documentation of the widgets or the related header
 
 ### Events
 Events are used to inform the user that something has happened with an object. 
-You can assign one or more callbacks to an object which will be called if the object is clicked, released, dragged, being deleted etc. 
+You can assign one or more callbacks to an object which will be called if the object is clicked, released, dragged, being deleted, etc. 
 
 A callback is assigned like this:
 
@@ -140,14 +140,14 @@ void btn_event_cb(lv_event_t * e)
 }
 ```
 
-Instead of `LV_EVENT_CLICKED` `LV_EVENT_ALL` can be used too to call the callback for any event. 
+`LV_EVENT_ALL` can be used instead of `LV_EVENT_CLICKED` to invoke the callback for any event. 
 
-From `lv_event_t * e` the current event code can be get with
+From `lv_event_t * e` the current event code can be retrieved with:
 ```c
 lv_event_code_t code = lv_event_get_code(e);
 ```
 
-The object that triggered the event can be retrieved with
+The object that triggered the event can be retrieved with:
 ```c
 lv_obj_t * obj = lv_event_get_target(e);
 ```
@@ -155,15 +155,15 @@ lv_obj_t * obj = lv_event_get_target(e);
 To learn all features of the events go to the [Event overview](/overview/event) section.
 
 ### Parts
-Widgets might be built from one or more *parts*. For example a button has only one part called `LV_PART_MAIN`.
+Widgets might be built from one or more *parts*. For example, a button has only one part called `LV_PART_MAIN`.
 However, a [Slider](/widgets/core/slider) has `LV_PART_MAIN`, `LV_PART_INDICATOR` and `LV_PART_KNOB`.
 
-By using parts you can apply different styles to different parts. (See below)
+By using parts you can apply different styles to sub-elements of a widget. (See below)
 
-To learn which parts are used by which object read the widgets' documentation.
+Read the widgets' documentation to learn which parts each uses.
 
 ### States
-The objects can be in a combination of the following states:
+LVGL objects can be in a combination of the following states:
 - `LV_STATE_DEFAULT`  Normal, released state
 - `LV_STATE_CHECKED`  Toggled or checked state
 - `LV_STATE_FOCUSED` Focused via keypad or encoder or clicked via touchpad/mouse 
@@ -174,21 +174,21 @@ The objects can be in a combination of the following states:
 - `LV_STATE_SCROLLED` Being scrolled
 - `LV_STATE_DISABLED` Disabled 
 
-For example, if you press an object it will automatically go to `LV_STATE_FOCUSED` and `LV_STATE_PRESSED` state and when you release it, the  `LV_STATE_PRESSED` state will be removed.
+For example, if you press an object it will automatically go to the `LV_STATE_FOCUSED` and `LV_STATE_PRESSED` states and when you release it the `LV_STATE_PRESSED` state will be removed while focus remains active.
 
-To check if an object is in a given state use `lv_obj_has_state(obj, LV_STATE_...)`. It will return `true` if the object is in that state at that time.
+To check if an object is in a given state use `lv_obj_has_state(obj, LV_STATE_...)`. It will return `true` if the object is currently in that state.
 
-To manually add or remove states use
+To manually add or remove states use:
 ```c
 lv_obj_add_state(obj, LV_STATE_...);
 lv_obj_clear_state(obj, LV_STATE_...);
 ```
 
 ### Styles
-Styles contains properties such as background color, border width, font, etc to describe the appearance of the objects.
+A style instance contains properties such as background color, border width, font, etc. that describe the appearance of objects.
 
-The styles are `lv_style_t` variables. Only their pointer is saved in the objects so they need to be static or global.
-Before using a style it needs to be initialized with `lv_style_init(&style1)`. After that properties can be added. For example:
+Styles are represented with `lv_style_t` variables. Only their pointer is saved in the objects so they need to be defined as static or global.
+Before using a style it needs to be initialized with `lv_style_init(&style1)`. After that, properties can be added to configure the style. For example:
 ```
 static lv_style_t style1;
 lv_style_init(&style1);
@@ -198,7 +198,7 @@ lv_style_set_border_width(&style1, 2))
 See the full list of properties [here](/overview/style.html#properties).
 
 
-The styles are assigned to an object's part and state. For example to *"Use this style on the slider's indicator when the slider is pressed"*:
+Styles are assigned using the ORed combination of an object's part and state. For example to use this style on the slider's indicator when the slider is pressed:
 ```c
 lv_obj_add_style(slider1, &style1, LV_PART_INDICATOR | LV_STATE_PRESSED);
 ```
@@ -219,7 +219,7 @@ lv_obj_add_style(btn1, &style1, 0); /*Equal to LV_PART_MAIN | LV_STATE_DEFAULT*/
 ```
 
 
-The styles can be cascaded (similarly to CSS). It means you can add more styles to a part of an object. 
+Styles can be cascaded (similarly to CSS). It means you can add more styles to a part of an object. 
 For example `style_btn` can set a default button appearance, and `style_btn_red` can overwrite the background color to make the button red: 
 ```c
 lv_obj_add_style(btn1, &style_btn, 0);
@@ -227,13 +227,13 @@ lv_obj_add_style(btn1, &style1_btn_red, 0);
 ```
 
 
-If a property is not set on for the current state the style with `LV_STATE_DEFAULT` will be used. If the property is not defined even in the default state a default value is used.
+If a property is not set on for the current state, the style with `LV_STATE_DEFAULT` will be used. A default value is used if the property is not defined in the default state.
 
-Some properties (typically the text-related ones) can be inherited. It means if a property is not set in an object it will be searched in its parents too. 
+Some properties (typically the text-related ones) can be inherited. This means if a property is not set in an object it will be searched for in its parents too. 
 For example, you can set the font once in the screen's style and all text on that screen will inherit it by default. 
 
 
-Local style properties also can be added to the objects. It creates a style which resides inside the object and which is used only by the object:
+Local style properties also can be added to objects. This creates a style which resides inside the object and is used only by the object:
 ```c
 lv_obj_set_style_bg_color(slider1, lv_color_hex(0x2080bb), LV_PART_INDICATOR | LV_STATE_PRESSED);
 ``` 
@@ -242,10 +242,10 @@ To learn all the features of styles see the [Style overview](/overview/style) se
 
 
 ### Themes
-Themes are the default styles of the objects. 
-The styles from the themes are applied automatically when the objects are created. 
 
-You can select the theme to use in `lv_conf.h`. 
+Themes are the default styles for objects. Styles from a theme are applied automatically when objects are created. 
+
+The theme for your application is a compile time configuration set in `lv_conf.h`. 
 
 ## Examples
 

docs/header.rst

@@ -1 +1 @@
-.. |github_link_base| replace:: https://github.com/lvgl/docs/blob/master
+.. |github_link_base| replace:: https://github.com/lvgl/lvgl/blob/c6f99ad200c7862c2f3cca3811bc2bdc2c95e971/docs

docs/index.md

@@ -28,11 +28,14 @@ PDF version: :download:`LVGL.pdf <LVGL.pdf>`
    :maxdepth: 2
    
    intro/index
+   examples
    get-started/index
    porting/index
    overview/index
    widgets/index
    layouts/index
+   libs/index
+   others/index
    CONTRIBUTING
    CHANGELOG
    ROADMAP

docs/intro/index.md

@@ -5,7 +5,7 @@
 
 # Introduction
 
-LVGL (Light and Versatile Graphics Library) is a free and open-source graphics library providing everything you need to create embedded GUI with easy-to-use graphical elements, beautiful visual effects and a low memory footprint.
+LVGL (Light and Versatile Graphics Library) is a free and open-source graphics library providing everything you need to create an embedded GUI with easy-to-use graphical elements, beautiful visual effects and a low memory footprint.
 
 
 ## Key features
@@ -17,29 +17,29 @@ LVGL (Light and Versatile Graphics Library) is a free and open-source graphics l
 - Fully customizable graphic elements with CSS-like styles
 - Hardware independent: use with any microcontroller or display
 - Scalable: able to operate with little memory (64 kB Flash, 16 kB RAM)
-- OS, external memory and GPU supported but not required
+- OS, external memory and GPU are supported but not required
 - Single frame buffer operation even with advanced graphic effects
 - Written in C for maximal compatibility (C++ compatible)
 - Simulator to start embedded GUI design on a PC without embedded hardware
 - Binding to MicroPython
 - Tutorials, examples, themes for rapid GUI design
-- Documentation is available online and PDF
+- Documentation is available online and as PDF
 - Free and open-source under MIT license
 
 ## Requirements
-Basically, every modern controller  (which is able to drive a display) is suitable to run LVGL. The minimal requirements are:
+Basically, every modern controller which is able to drive a display is suitable to run LVGL. The minimal requirements are:
 <ul>
 <li> 16, 32 or 64 bit microcontroller or processor</li>
 <li>&gt; 16 MHz clock speed is recommended</li>
 <li> Flash/ROM: &gt; 64 kB for the very essential components (&gt; 180 kB is recommended)</li>
 <li> RAM: 
   <ul>
-    <li> Static RAM usage: ~2 kB depending on the used features and objects types</li>
+    <li> Static RAM usage: ~2 kB depending on the used features and object types</li>
     <li> Stack: &gt; 2kB (&gt; 8 kB is recommended)</li>
     <li> Dynamic data (heap): &gt; 4 KB (&gt; 32 kB is recommended if using several objects).
 	    Set by <em>LV_MEM_SIZE</em> in <em>lv_conf.h</em>. </li>
     <li> Display buffer:  &gt; <em>"Horizontal resolution"</em> pixels (&gt; 10 &times; <em>"Horizontal resolution"</em> is recommended) </li>
-    <li> One frame buffer in the MCU or in external display controller</li>
+    <li> One frame buffer in the MCU or in an external display controller</li>
 	</ul>
 </li>
 <li> C99 or newer compiler</li>
@@ -52,7 +52,7 @@ Basically, every modern controller  (which is able to drive a display) is suita
 
 ## License
 The LVGL project (including all repositories) is licensed under [MIT license](https://github.com/lvgl/lvgl/blob/master/LICENCE.txt). 
-It means you can use it even in commercial projects.
+This means you can use it even in commercial projects.
 
 It's not mandatory but we highly appreciate it if you write a few words about your project in the [My projects](https://forum.lvgl.io/c/my-projects/10) category of the forum or a private message to [lvgl.io](https://lvgl.io/#contact).
 
@@ -85,16 +85,16 @@ The core repositories follow the rules of [Semantic versioning](https://semver.o
 Tags like `vX.Y.Z` are created for every release.
 
 ### Release cycle
-- Bugfixes: Released on demand even weekly
+- Bug fixes: Released on demand even weekly
 - Minor releases: Every 3-4 months
-- Major releases: Approximatelly yearly
+- Major releases: Approximately yearly
 
 ### Branches
 The core repositories have at least the following branches:
 - `master` latest version, patches are merged directly here. 
 - `release/vX.Y` stable versions of the minor releases
-- `fix/some-description` temporal branches for bug fixes
-- `feat/some-description` temporal branches for features
+- `fix/some-description` temporary branches for bug fixes
+- `feat/some-description` temporary branches for features
 
 
 ### Changelog
@@ -103,14 +103,15 @@ The changes are recorded in [CHANGELOG.md](/CHANGELOG).
 
 ### Version support
 Before v8 every minor release of major releases is supported for 1 year.
-From v8 every minor release is supported for 1 year.
+Starting from v8, every minor release is supported for 1 year.
 
 | Version | Release date | Support end | Active |
 |---------|--------------|-------------|--------|
 | v5.3    | Feb 1, 2019  |Feb 1, 2020  | No     |
 | v6.1    | Nov 26, 2019 |Nov 26, 2020 | No     |
 | v7.11   | Mar 16, 2021 |Mar 16, 2022 | Yes    |
-| v8.0    | In progress  |             |        |
+| v8.0    | 1 Jun, 2021  |1 Jun, 2022  | Yes    |
+| v8.1    | In progress  |   |     |
 
 
 ## FAQ
@@ -119,24 +120,24 @@ From v8 every minor release is supported for 1 year.
 You can ask questions in the forum: [https://forum.lvgl.io/](https://forum.lvgl.io/).
 
 We use [GitHub issues](https://github.com/lvgl/lvgl/issues) for development related discussion. 
-So you should use them only if your question or issue is tightly related to the development of the library. 
+You should use them only if your question or issue is tightly related to the development of the library. 
 
 ### Is my MCU/hardware supported?
-Every MCU which is capable of driving a display via Parallel port, SPI, RGB interface or anything else and fulfills the [Requirements](#requirements) is supported by LLVGL.
+Every MCU which is capable of driving a display via parallel port, SPI, RGB interface or anything else and fulfills the [Requirements](#requirements) is supported by LVGL.
 
 This includes:
 - "Common" MCUs like STM32F, STM32H, NXP Kinetis, LPC, iMX, dsPIC33, PIC32 etc. 
-- Bluetooth, GSM, WiFi modules like Nordic NRF and Espressif ESP32
+- Bluetooth, GSM, Wi-Fi modules like Nordic NRF and Espressif ESP32
 - Linux with frame buffer device such as /dev/fb0. This includes Single-board computers like the Raspberry Pi
-- And anything else with a strong enough MCU and a periphery to drive a display
+- Anything else with a strong enough MCU and a peripheral to drive a display
 
 ### Is my display supported?
 LVGL needs just one simple driver function to copy an array of pixels into a given area of the display. 
-If you can do this with your display then you can use that display with LVGL.
+If you can do this with your display then you can use it with LVGL.
 
 Some examples of the supported display types:
 - TFTs with 16 or 24 bit color depth 
-- Monitors with HDMI port
+- Monitors with an HDMI port
 - Small monochrome displays
 - Gray-scale displays
 - even LED matrices
@@ -147,7 +148,7 @@ See the [Porting](/porting/display) section to learn more.
 ### Nothing happens, my display driver is not called. What have I missed?
 Be sure you are calling `lv_tick_inc(x)` in an interrupt and `lv_timer_handler()` in your main `while(1)`.
 
-Learn more in the [Tick](/porting/tick) and [Task handler](/porting/task-handler) section.
+Learn more in the [Tick](/porting/tick) and [Task handler](/porting/task-handler) sections.
 
 ### Why is the display driver called only once? Only the upper part of the display is refreshed. 
 Be sure you are calling `lv_disp_flush_ready(drv)` at the end of your "*display flush callback*". 
@@ -178,35 +179,31 @@ a.y2 = a.y1 + BUF_H - 1;
 my_flush_cb(NULL, &a, buf);
 ```
 
-### Why I see nonsense colors on the screen? 
-Probably LVGL's color format is not compatible with your displays color format. Check `LV_COLOR_DEPTH` in *lv_conf.h*.
+### Why do I see nonsense colors on the screen? 
+Probably LVGL's color format is not compatible with your display's color format. Check `LV_COLOR_DEPTH` in *lv_conf.h*.
 
-If you are using 16 bit colors with SPI (or other byte-oriented interface) probably you need to set `LV_COLOR_16_SWAP  1` in *lv_conf.h*. 
+If you are using 16-bit colors with SPI (or another byte-oriented interface) you probably need to set `LV_COLOR_16_SWAP  1` in *lv_conf.h*. 
 It swaps the upper and lower bytes of the pixels.
 
 ### How to speed up my UI?
-- Turn on compiler optimization and enable cache if your MCU has
+- Turn on compiler optimization and enable cache if your MCU has it
 - Increase the size of the display buffer
-- Use 2 display buffers and flush the buffer with DMA (or similar periphery) in the background 
-- Increase the clock speed of the SPI or Parallel port if you use them to drive the display
-- If your display has SPI port consider changing to a model with parallel because it has much higher throughput
-- Keep the display buffer in the internal RAM (not in external SRAM) because LVGL uses it a lot and it should have a small access time
+- Use two display buffers and flush the buffer with DMA (or similar peripheral) in the background 
+- Increase the clock speed of the SPI or parallel port if you use them to drive the display
+- If your display has a SPI port consider changing to a model with a parallel interface because it has much higher throughput
+- Keep the display buffer in internal RAM (not in external SRAM) because LVGL uses it a lot and it should have a fast access time
  
 ### How to reduce flash/ROM usage?
 You can disable all the unused features (such as animations, file system, GPU etc.) and object types in *lv_conf.h*.
 
-If you are using GCC you can add 
-- `-fdata-sections -ffunction-sections` compiler flags 
-- `--gc-sections` linker flag
-
-to remove unused functions and variables from the final binary
+If you are using GCC you can add `-fdata-sections -ffunction-sections` compiler flags and `--gc-sections` linker flag to remove unused functions and variables from the final binary.
 
 ### How to reduce the RAM usage
 - Lower the size of the *Display buffer* 
-- Reduce `LV_MEM_SIZE` in *lv_conf.h*. This memory used when you create objects like buttons, labels, etc.
-- To work with lower `LV_MEM_SIZE` you can create the objects only when required and deleted them when they are not required anymore
+- Reduce `LV_MEM_SIZE` in *lv_conf.h*. This memory is used when you create objects like buttons, labels, etc.
+- To work with lower `LV_MEM_SIZE` you can create objects only when required and delete them when they are not needed anymore
  
 ### How to work with an operating system?
 
-To work with an operating system where tasks can interrupt each other (preemptive) you should protect LVGL related function calls with a mutex.
+To work with an operating system where tasks can interrupt each other (preemptively) you should protect LVGL related function calls with a mutex.
 See the [Operating system and interrupts](/porting/os) section to learn more.

docs/layouts/flex.md

@@ -19,9 +19,9 @@ Note that the flex layout feature of LVGL needs to be globally enabled with `LV_
 - tracks: the rows or columns
 - main direction: row or column, the direction in which the items are placed
 - cross direction: perpendicular to the main direction
-- wrap: if there there is no more space in the track a new track is started
+- wrap: if there is no more space in the track a new track is started
 - grow: if set on an item it will grow to fill the remaining space on the track. 
-The available space will be distributed among items respective to the their grow value (larger value means more space)
+The available space will be distributed among items respective to their grow value (larger value means more space)
 - gap: the space between the rows and columns or the items on a track
 
 ## Simple interface
@@ -39,8 +39,8 @@ The possible values for `flex_flow` are:
 - `LV_FLEX_FLOW_COLUMN_WRAP` Place the children in a column with wrapping
 - `LV_FLEX_FLOW_ROW_REVERSE` Place the children in a row without wrapping but in reversed order
 - `LV_FLEX_FLOW_COLUMN_REVERSE` Place the children in a column without wrapping but in reversed order
-- `LV_FLEX_FLOW_ROW_WRAP_REVERSE` Place the children in a row without wrapping but in reversed order
-- `LV_FLEX_FLOW_COLUMN_WRAP_REVERSE` Place the children in a column without wrapping but in reversed order
+- `LV_FLEX_FLOW_ROW_WRAP_REVERSE` Place the children in a row with wrapping but in reversed order
+- `LV_FLEX_FLOW_COLUMN_WRAP_REVERSE` Place the children in a column with wrapping but in reversed order
 
 ### Flex align
 To manage the placement of the children use `lv_obj_set_flex_align(obj,  main_place, cross_place, track_cross_place)`
@@ -62,15 +62,15 @@ The first item will have one unit of space against the container edge, but two u
 
 ### Flex grow
 
-Flex grow can be used to make one or more children fill the available space on the track. If more children has grow the available space will be distributed proportionally to the grow values.
-For example let's there is 400 px remaining space and 4 object with grow:
+Flex grow can be used to make one or more children fill the available space on the track. When more children have grow parameters, the available space will be distributed proportionally to the grow values.
+For example, there is 400 px remaining space and 4 objects with grow:
 - `A` with grow = 1
 - `B` with grow = 1
 - `C` with grow = 2
 
 `A` and `B` will have 100 px size, and `C` will have 200 px size.
 
-Flex grow can be set on a child with `lv_obj_set_flex_flow(child, value)`. `value` needs to be > 1 or 0 to disable grow on the child.
+Flex grow can be set on a child with `lv_obj_set_flex_grow(child, value)`. `value` needs to be > 1 or 0 to disable grow on the child.
 
 
 ## Style interface
@@ -83,6 +83,16 @@ All the Flex-related values are style properties under the hood and you can use
 - `FLEX_TRACK_PLACE`
 - `FLEX_GROW`
 
+### Internal padding
+
+To modify the minimum space flexbox inserts between objects, the following properties can be set on the flex container style:
+
+- `pad_row` Sets the padding between the rows. 
+
+- `pad_column` Sets the padding between the columns.
+
+These can for example be used if you don't want any padding between your objects: `lv_style_set_pad_column(&row_container_style,0)`
+
 ## Other features 
 
 ### RTL

docs/layouts/grid.md

@@ -9,7 +9,7 @@
 
 The Grid layout is a subset of [CSS Flexbox](https://css-tricks.com/snippets/css/complete-guide-grid/).
 
-It can arrange items into 2D "table" that has rows or columns (tracks). The item can span through multiple columns or rows.
+It can arrange items into a 2D "table" that has rows or columns (tracks). The item can span through multiple columns or rows.
 The track's size can be set in pixel, to the largest item (`LV_GRID_CONTENT`) or in "Free unit" (FR) to distribute the free space proportionally.
 
 To make an object a grid container call `lv_obj_set_layout(obj, LV_LAYOUT_GRID)`.
@@ -42,7 +42,7 @@ Besides simple settings the size in pixel you can use two special values:
 - `LV_GRID_FR(X)` tell what portion of the remaining space should be used by this track. Larger value means larger space.
 
 ### Grid items
-By default the children are not added to the grid. They need to be added manually to a cell. 
+By default, the children are not added to the grid. They need to be added manually to a cell. 
 
 To do this call `lv_obj_set_grid_cell(child, column_align, column_pos, column_span, row_align, row_pos, row_span)`.
 
@@ -84,6 +84,13 @@ All the Grid related values are style properties under the hood and you can use
 - `GRID_CELL_ROW_POS`
 - `GRID_CELL_ROW_SPAN`
 
+### Internal padding
+
+To modify the minimum space Grid inserts between objects, the following properties can be set on the Grid container style:
+
+- `pad_row` Sets the padding between the rows. 
+- `pad_column` Sets the padding between the columns.
+
 ## Other features 
 
 ### RTL

docs/libs/bmp.md

@@ -0,0 +1,42 @@
+```eval_rst
+.. include:: /header.rst 
+:github_url: |github_link_base|/libs/bmp.md
+```
+
+# BMP decoder 
+
+This extension allows the use of BMP images in LVGL. 
+This implementation uses [bmp-decoder](https://github.com/caj-johnson/bmp-decoder) library.
+The pixel are read on demand (not the whole image is loaded) so using BMP images requires very little RAM. 
+
+If enabled in `lv_conf.h` by `LV_USE_BMP` LVGL will register a new image decoder automatically so BMP files can be directly used as image sources. For example:
+```
+lv_img_set_src(my_img, "S:path/to/picture.bmp");
+```
+
+Note that, a file system driver needs to registered to open images from files. Read more about it [here](https://docs.lvgl.io/master/overview/file-system.html) or just enable one in `lv_conf.h` with `LV_USE_FS_...` 
+
+## Limitations
+- Only BMP files are supported and BMP images as C array (`lv_img_dsc_t`) are not. It's because there is no practical differences between how the BMP files and LVGL's image format stores the image data. 
+- BMP files can be loaded only from file. If you want to store them in flash it's better to convert them to C array with [LVGL's image converter](https://lvgl.io/tools/imageconverter).
+- The BMP files color format needs to match with `LV_COLOR_DEPTH`. Use GIMP to save the image in the required format.
+  Both RGB888 and ARGB888 works with `LV_COLOR_DEPTH 32`
+- Palette is not supported.
+- Because not the whole image is read in can not be zoomed or rotated.
+
+
+## Example
+```eval_rst
+
+.. include:: ../../examples/libs/bmp/index.rst
+
+```
+
+## API
+
+```eval_rst
+
+.. doxygenfile:: lv_bmp.h
+  :project: lvgl
+
+```

docs/libs/freetype.md

@@ -0,0 +1,39 @@
+```eval_rst
+.. include:: /header.rst 
+:github_url: |github_link_base|/libs/bmp.md
+```
+
+# FreeType support
+Interface to [FreeType](https://www.freetype.org/) to generate font bitmaps run time.
+
+## Install FreeType
+- Download Freetype from [here](https://sourceforge.net/projects/freetype/files/)
+- `make`
+- `sudo make install`
+
+## Add FreeType to your project
+- Add include path: `/usr/include/freetype2` (for GCC: `-I/usr/include/freetype2 -L/usr/local/lib`)
+- Add library: `freetype` (for GCC: `-L/usr/local/lib -lfreetype`)
+
+## Usage
+
+Enable `LV_USE_FREETYPE` in `lv_conf.h`.
+
+See the examples below.
+
+Note that, the FreeType extension doesn't use LVGL's file system. 
+You can simply pass the path to the font as usual on your operating system or platform.
+
+## Learn more
+- FreeType [tutorial](https://www.freetype.org/freetype2/docs/tutorial/step1.html) 
+- LVGL's [font interface](https://docs.lvgl.io/v7/en/html/overview/font.html#add-a-new-font-engine)
+
+
+## API
+
+```eval_rst
+
+.. doxygenfile:: lv_freetype.h
+  :project: lvgl
+
+```

docs/libs/fsdrv.md

@@ -0,0 +1,20 @@
+```eval_rst
+.. include:: /header.rst 
+:github_url: |github_link_base|/libs/fsdrv.md
+```
+
+# File System Interfaces
+
+LVGL has a [File system](https://docs.lvgl.io/master/overview/file-system.html) module to provides an abstraction layer for various file system drivers.
+
+LVG has build in support for
+- [FATFS](http://elm-chan.org/fsw/ff/00index_e.html)
+- STDIO (Linux and Windows using C standard function .e.g fopen, fread)
+- POSIX (Linux and Windows using POSIX function .e.g open, read)
+- WIN32 (Windows using Win32 API function .e.g CreateFileA, ReadFile)
+
+You still need to provide the drivers and libraries, this extensions provide only the bridge between FATFS, STDIO, POSIX, WIN32 and LVGL.
+
+## Usage
+
+In `lv_conf.h` set a driver letter for one or more `LV_FS_USE_...` define(s). After that you can access files using that driver letter. Setting `'\0'` will disable use of that interface.  

docs/libs/gif.md

@@ -0,0 +1,48 @@
+```eval_rst
+.. include:: /header.rst 
+:github_url: |github_link_base|/libs/gif.md
+```
+
+# GIF decoder
+Allow to use of GIF images in LVGL. Based on https://github.com/lecram/gifdec
+
+When enabled in `lv_conf.h` with `LV_USE_GIF` `lv_gif_create(parent)` can be used to create a gif widget.
+
+`lv_gif_set_src(obj, src)` works very similarly to `lv_img_set_src`. As source It also accepts images as variables (`lv_img_dsc_t`) or files.
+
+
+## Convert GIF files to C array
+To convert a GIF file to byte values array use [LVGL's online converter](https://lvgl.io/tools/imageconverter). Select "Raw" color format and "C array" Output format.
+ 
+
+## Use GIF images from file
+
+For example:
+```c
+lv_gif_set_src(obj, "S:path/to/example.gif");
+```
+
+Note that, a file system driver needs to regsitered to open images from files. Read more about it [here](https://docs.lvgl.io/master/overview/file-system.html) or just enable one in `lv_conf.h` with `LV_USE_FS_...` 
+
+
+## Memory requirements
+To decode and display a GIF animation the following amount of RAM is required:
+- `LV_COLOR_DEPTH 8`: 3 x image width x image height 
+- `LV_COLOR_DEPTH 16`: 4 x image width x image height 
+- `LV_COLOR_DEPTH 32`: 5 x image width x image height 
+
+## Example
+```eval_rst
+
+.. include:: ../../examples/libs/gif/index.rst
+
+```
+
+## API
+
+```eval_rst
+
+.. doxygenfile:: lv_gif.h
+  :project: lvgl
+
+```

docs/libs/index.md

@@ -0,0 +1,22 @@
+```eval_rst
+.. include:: /header.rst 
+:github_url: |github_link_base|/libs/index.md
+```
+# 3rd party libraries
+
+
+```eval_rst
+
+.. toctree::
+   :maxdepth: 1
+   
+   fsdrv
+   bmp
+   sjpg
+   png
+   gif
+   freetype
+   qrcode
+   rlottie
+```
+

docs/libs/png.md

@@ -0,0 +1,31 @@
+```eval_rst
+.. include:: /header.rst 
+:github_url: |github_link_base|/libs/png.md
+```
+
+# PNG decoder
+
+Allow the use of PNG images in LVGL. This implementation uses [lodepng](https://github.com/lvandeve/lodepng) library.
+
+If enabled in `lv_conf.h` by `LV_USE_PNG` LVGL will register a new image decoder automatically so PNG files can be directly used as any other image  sources.
+
+Note that, a file system driver needs to registered to open images from files. Read more about it [here](https://docs.lvgl.io/master/overview/file-system.html) or just enable one in `lv_conf.h` with `LV_USE_FS_...` 
+
+The whole PNG image is decoded so during decoding RAM equals to `image width x image height x 4` bytes are required.
+
+As it might take significant time to decode PNG images LVGL's [images caching](https://docs.lvgl.io/master/overview/image.html#image-caching) feature can be useful. 
+
+## Example
+```eval_rst
+
+.. include:: ../../examples/libs/png/index.rst
+
+```
+
+## API
+
+```eval_rst
+
+.. doxygenfile:: lv_png.h
+  :project: lvgl
+

docs/libs/qrcode.md

@@ -0,0 +1,42 @@
+```eval_rst
+.. include:: /header.rst 
+:github_url: |github_link_base|/libs/qrcode.md
+```
+
+# QR code
+
+QR code generation with LVGL. Uses [QR-Code-generator](https://github.com/nayuki/QR-Code-generator) by [nayuki](https://github.com/nayuki).
+
+## Get started
+- Download or clone this repository
+  - [Download](https://github.com/lvgl/lv_lib_qrcode.git) from GitHub
+  - Clone: git clone https://github.com/lvgl/lv_lib_qrcode.git
+- Include the library: `#include "lv_lib_qrcode/lv_qrcode.h"`
+- Test with the following code:
+```c
+const char * data = "Hello world";
+
+/*Create a 100x100 QR code*/
+lv_obj_t * qr = lv_qrcode_create(lv_scr_act(), 100, lv_color_hex3(0x33f), lv_color_hex3(0xeef));
+
+/*Set data*/
+lv_qrcode_update(qr, data, strlen(data));
+```
+
+## Notes
+- QR codes with less data are smaller but they scaled by an integer numbers number to best fit to the given size
+
+
+## Example
+```eval_rst
+
+.. include:: ../../examples/libs/qrcode/index.rst
+
+```
+
+## API
+
+```eval_rst
+
+.. doxygenfile:: lv_qrcode.h
+  :project: lvgl

docs/libs/rlottie.md

@@ -0,0 +1,86 @@
+```eval_rst
+.. include:: /header.rst
+:github_url: |github_link_base|/libs/rlottie.md
+```
+
+
+# Lottie player
+Allows to use Lottie animations in LVGL. Taken from this [base repository](https://github.com/ValentiWorkLearning/lv_rlottie)
+
+LVGL provides the interface to [Samsung/rlottie](https://github.com/Samsung/rlottie) library's C API. That is the actual Lottie player is not part of LVGL, it needs to be built separately.
+
+## Build Rlottie
+To build Samsung's Rlottie C++14-compatible compiler and optionally CMake 3.14 or higher is required.
+
+To build on desktop you can follow the instrutions from Rlottie's [README](https://github.com/Samsung/rlottie/blob/master/README.md). In the most basic case it looks like this:
+```
+mkdir rlottie_workdir
+cd rlottie_workdir
+git clone https://github.com/Samsung/rlottie.git
+mkdir build
+cd build
+cmake ../rlottie
+make -j
+sudo make install
+```
+
+And finally add the `-lrlottie` flag to your linker.
+
+On embedded systems you need to take care of integrating Rlottie to the given build system.
+
+
+## Usage
+
+You can use animation from files or raw data (text). In either case first you need to enable `LV_USE_RLOTTIE` in `lv_conf.h`.
+
+
+The `width` and `height` of the object be set in the *create* function and the animation will be scaled accordingly.
+
+### Use Rlottie from file
+
+To create a Lottie animation from file use:
+```c
+  lv_obj_t * lottie = lv_rlottie_create_from_file(parent, width, height, "path/to/lottie.json");
+```
+
+Note that, Rlottie uses the standard STDIO C file API, so you can use the path "normally" and no LVGL specific driver letter is required.
+
+
+### Use Rlottie from raw string data
+
+`lv_example_rlottie_approve.c` contains an example animation in raw format. Instead storing the JSON string a hex array is stored for the following reasons:
+- avoid escaping `"` in the JSON file
+- some compilers don't support very long strings
+
+`lvgl/scripts/filetohex.py` can be used to convert a Lottie file a hex array. E.g.:
+```
+./filetohex.py path/to/lottie.json > out.txt
+```
+
+To create an animation from raw data:
+
+```c
+extern const uint8_t lottie_data[];
+lv_obj_t* lottie = lv_rlottie_create_from_raw(parent, width, height, (const char *)lottie_data);
+```
+
+## Getting animations
+
+Lottie is standard and popular format so you can find many animation files on the web.
+For example: https://lottiefiles.com/
+
+You can also create your own animations with Adobe After Effects or similar software.
+
+## Example
+```eval_rst
+
+.. include:: ../../examples/libs/rlottie/index.rst
+
+```
+
+## API
+
+```eval_rst
+
+.. doxygenfile:: lv_rlottie.h
+  :project: lvgl

docs/libs/sjpg.md

@@ -0,0 +1,77 @@
+```eval_rst
+.. include:: /header.rst 
+:github_url: |github_link_base|/libs/sjpg.md
+```
+
+# JPG decoder
+
+Allow the use of JPG images in LVGL. Besides that it also allows the use of a custom format, called Split JPG (SJPG), which can be decided in more optimal way on embedded systems.
+
+## Overview
+  - Supports both normal JPG and the custom SJPG formats.
+  - Decoding normal JPG consumes RAM with the size fo the whole uncompressed image (recommended only for devices with more RAM)
+  - SJPG is a custom format based on "normal" JPG and specially made for LVGL.
+  - SJPG is 'split-jpeg' which is a bundle of small jpeg fragments with an sjpg header.
+  - SJPG size will be almost comparable to the jpg file or might be a slightly larger.
+  - File read from file and c-array are implemented.
+  - SJPEG frame fragment cache enables fast fetching of lines if availble in cache.
+  - By default the sjpg image cache will be image width * 2 * 16 bytes (can be modified)
+  - Currently only 16 bit image format is supported (TODO)
+  - Only the required partion of the JPG and SJPG images are decoded, therefore they can't be zoomed or rotated.
+
+## Usage
+
+If enabled in `lv_conf.h` by `LV_USE_SJPG` LVGL will register a new image decoder automatically so JPG and SJPG files can be directly used as image sources. For example:
+```
+lv_img_set_src(my_img, "S:path/to/picture.jpg");
+```
+
+Note that, a file system driver needs to registered to open images from files. Read more about it [here](https://docs.lvgl.io/master/overview/file-system.html) or just enable one in `lv_conf.h` with `LV_USE_FS_...` 
+
+
+
+## Converter
+
+### Converting JPG to C array
+  - Use lvgl online tool https://lvgl.io/tools/imageconverter 
+  - Color format = RAW, output format = C Array
+  
+### Converting JPG to SJPG  
+python3 and the PIL library required. (PIL can be installed with `pip3 install pillow`)
+
+To create SJPG from JPG:
+- Copy the image to convert into `lvgl/scripts`
+- `cd lvgl/scripts`
+- `python3 jpg_to_sjpg.py image_to_convert.jpg`. It creates both a C files and an SJPG image.
+
+The expected result is:
+```sh
+Conversion started...
+
+Input:
+        image_to_convert.jpg
+        RES = 640 x 480
+
+Output:
+        Time taken = 1.66 sec
+        bin size = 77.1 KB
+        walpaper.sjpg           (bin file)
+        walpaper.c              (c array)
+
+All good!
+```
+
+
+## Example
+```eval_rst
+
+.. include:: ../../examples/libs/sjpg/index.rst
+
+```
+
+## API
+
+```eval_rst
+
+.. doxygenfile:: lv_sjpg.h
+  :project: lvgl

docs/others/index.md

@@ -0,0 +1,16 @@
+```eval_rst
+.. include:: /header.rst 
+:github_url: |github_link_base|/others/index.md
+```
+# Others
+
+
+```eval_rst
+
+.. toctree::
+   :maxdepth: 1
+   
+   snapshot
+   
+```
+

docs/others/snapshot.md

@@ -0,0 +1,67 @@
+```eval_rst
+.. include:: /header.rst 
+:github_url: |github_link_base|/others/snapshot.md
+```
+# Snapshot
+
+Snapshot provides APIs to take snapshot image for LVGL object together with its children. The image will look exactly like the object.
+
+## Usage
+
+Simply call API `lv_snapshot_take` to generate the image descriptor which can be set as image object src using `lv_img_set_src`.
+
+
+Note, only below color formats are supported for now:
+ - LV_IMG_CF_TRUE_COLOR_ALPHA
+ - LV_IMG_CF_ALPHA_1BIT
+ - LV_IMG_CF_ALPHA_2BIT
+ - LV_IMG_CF_ALPHA_4BIT
+ - LV_IMG_CF_ALPHA_8BIT
+
+
+### Free the Image
+The memory `lv_snapshot_take` uses are dynamically allocated using `lv_mem_alloc`. Use API `lv_snapshot_free` to free the memory it takes. This will firstly free memory the image data takes, then the image descriptor.
+
+
+Take caution to free the snapshot but not delete the image object. Before free the memory, be sure to firstly unlink it from image object, using `lv_img_set_src(NULL)` and `lv_img_cache_invalidate_src(src)`.
+
+
+Below code snippet explains usage of this API.
+
+```c
+void update_snapshot(lv_obj_t * obj, lv_obj_t * img_snapshot)
+{
+    lv_img_dsc_t* snapshot = (void*)lv_img_get_src(img_snapshot);
+    if(snapshot) {
+        lv_snapshot_free(snapshot);
+    }
+    snapshot = lv_snapshot_take(obj, LV_IMG_CF_TRUE_COLOR_ALPHA);
+    lv_img_set_src(img_snapshot, snapshot);
+}
+```
+
+### Use Existing Buffer
+If the snapshot needs update now and then, or simply caller provides memory, use API `lv_res_t lv_snapshot_take_to_buf(lv_obj_t * obj, lv_img_cf_t cf, lv_img_dsc_t * dsc, void * buf, uint32_t buff_size);` for this case. It's caller's responsibility to alloc/free the memory.
+
+
+If snapshot is generated successfully, the image descriptor is updated and image data will be stored to provided `buf`.
+
+
+Note that snapshot may fail if provided buffer is not enough, which may happen when object size changes. It's recommended to use API `lv_snapshot_buf_size_needed` to check the needed buffer size in byte firstly and resize the buffer accordingly.
+
+## Example
+
+```eval_rst
+
+.. include:: ../../examples/others/snapshot/index.rst
+
+```
+## API
+
+
+```eval_rst
+
+.. doxygenfile:: lv_snapshot.h
+  :project: lvgl
+
+```

docs/overview/animation.md

@@ -5,13 +5,13 @@
 # Animations
 
 You can automatically change the value of a variable between a start and an end value using animations.
-The animation will happen by periodically calling an "animator" function with the corresponding value parameter.
+Animation will happen by periodically calling an "animator" function with the corresponding value parameter.
 
 The *animator* functions have the following prototype:
 ```c
 void func(void * var, lv_anim_var_t value);
 ```
-This prototype is compatible with the majority of the *set* functions of LVGL. For example `lv_obj_set_x(obj, value)` or `lv_obj_set_width(obj, value)`
+This prototype is compatible with the majority of the property *set* functions in LVGL. For example `lv_obj_set_x(obj, value)` or `lv_obj_set_width(obj, value)`
 
 
 ## Create an animation
@@ -31,7 +31,7 @@ lv_anim_init(&a);
 /*Set the "animator" function*/
 lv_anim_set_exec_cb(&a, (lv_anim_exec_xcb_t) lv_obj_set_x); 
 
-/*Set the "animator" function*/
+/*Set target of the animation*/
 lv_anim_set_var(&a, obj); 
 
 /*Length of the animation [ms]*/
@@ -49,25 +49,25 @@ lv_anim_set_delay(&a, delay);
 /*Set path (curve). Default is linear*/
 lv_anim_set_path(&a, lv_anim_path_ease_in);
 
-/*Set a callback to call when animation is ready.*/
+/*Set a callback to indicate when the animation is ready (idle).*/
 lv_anim_set_ready_cb(&a, ready_cb);
 
-/*Set a callback to call when animation is started (after delay).*/
+/*Set a callback to indicate when the animation is started (after delay).*/
 lv_anim_set_start_cb(&a, start_cb);
 
-/*Play the animation backward too with this duration. Default is 0 (disabled) [ms]*/
-lv_anim_set_playback_time(&a, wait_time); 
+/*When ready, play the animation backward with this duration. Default is 0 (disabled) [ms]*/
+lv_anim_set_playback_time(&a, time);
 
 /*Delay before playback. Default is 0 (disabled) [ms]*/
-lv_anim_set_playback_delay(&a, wait_time);
+lv_anim_set_playback_delay(&a, delay);
 
-/*Number of repetitions. Default is 1.  LV_ANIM_REPEAT_INFINIT for infinite repetition*/
-lv_anim_set_repeat_count(&a, wait_time);
+/*Number of repetitions. Default is 1. LV_ANIM_REPEAT_INFINITE for infinite repetition*/
+lv_anim_set_repeat_count(&a, cnt);
 
 /*Delay before repeat. Default is 0 (disabled) [ms]*/
-lv_anim_set_repeat_delay(&a, wait_time);
+lv_anim_set_repeat_delay(&a, delay);
 
-/*true (default): apply the start vale immediately, false: apply start vale after delay when then anim. really starts. */
+/*true (default): apply the start value immediately, false: apply start value after delay when the anim. really starts. */
 lv_anim_set_early_apply(&a, true/false);
 
 /* START THE ANIMATION
@@ -77,33 +77,56 @@ lv_anim_start(&a);                             /*Start the animation*/
 
 
 You can apply multiple different animations on the same variable at the same time.
-For example, animate the x and y coordinates with `lv_obj_set_x` and `lv_obj_set_y`. However, only one animation can exist with a given variable and function pair.
-Therefore `lv_anim_start()` will delete the already existing variable-function animations.
+For example, animate the x and y coordinates with `lv_obj_set_x` and `lv_obj_set_y`. However, only one animation can exist with a given variable and function pair and `lv_anim_start()` will remove any existing animations for such a pair.
 
 ## Animation path
 
-You can determinate the path of animation. The most simple case is linear, meaning the current value between *start* and *end* is changed with fixed steps.
-A *path* is a function which calculates the next value to set based on the current state of the animation. Currently, there are the following built-in paths functions:
+You can control the path of an animation. The most simple case is linear, meaning the current value between *start* and *end* is changed with fixed steps.
+A *path* is a function which calculates the next value to set based on the current state of the animation. Currently, there are the following built-in path functions:
 
 - `lv_anim_path_linear` linear animation
 - `lv_anim_path_step` change in one step at the end
 - `lv_anim_path_ease_in` slow at the beginning
 - `lv_anim_path_ease_out` slow at the end
-- `lv_anim_path_ease_in_out` slow at the beginning and at the end
+- `lv_anim_path_ease_in_out` slow at the beginning and end
 - `lv_anim_path_overshoot` overshoot the end value
 - `lv_anim_path_bounce` bounce back a little from the end value (like hitting a wall)
 
 
 ## Speed vs time
-By default, you set the animation time. But in some cases, setting the animation speed is more practical.
+By default, you set the animation time directly. But in some cases, setting the animation speed is more practical.
 
 The `lv_anim_speed_to_time(speed, start, end)` function calculates the required time in milliseconds to reach the end value from a start value with the given speed.
-The speed is interpreted in _unit/sec_ dimension. For example,  `lv_anim_speed_to_time(20,0,100)` will yield 5000 milliseconds. For example, in case of `lv_obj_set_x` *unit* is pixels so *20* means *20 px/sec* speed.
+The speed is interpreted in _unit/sec_ dimension. For example,  `lv_anim_speed_to_time(20,0,100)` will yield 5000 milliseconds. For example, in the case of `lv_obj_set_x` *unit* is pixels so *20* means *20 px/sec* speed.
 
 ## Delete animations
 
 You can delete an animation with `lv_anim_del(var, func)` if you provide the animated variable and its animator function.
 
+## Timeline
+A timeline is a collection of multiple animations which makes it easy to create complex composite animations.
+
+Firstly, create an animation element but don’t call `lv_anim_start()`.
+
+Secondly, create an animation timeline object by calling `lv_anim_timeline_create()`.
+
+Thirdly, add animation elements to the animation timeline by calling `lv_anim_timeline_add(at, start_time, &a)`. `start_time` is the start time of the animation on the timeline. Note that `start_time` will override the value of `delay`.
+
+Finally, call `lv_anim_timeline_start(at)` to start the animation timeline.
+
+It supports forward and backward playback of the entire animation group, using `lv_anim_timeline_set_reverse(at, reverse)`.
+
+Call `lv_anim_timeline_stop(at)` to stop the animation timeline.
+
+Call `lv_anim_timeline_set_progress(at, progress)` function to set the state of the object corresponding to the progress of the timeline.
+
+Call `lv_anim_timeline_get_playtime(at)` function to get the total duration of the entire animation timeline.
+
+Call `lv_anim_timeline_get_reverse(at)` function to get whether to reverse the animation timeline.
+
+Call `lv_anim_timeline_del(at)` function to delete the animation timeline.
+
+![](/misc/anim-timeline.png "timeline diagram")
 
 ## Examples
 

docs/overview/color.md

@@ -6,14 +6,14 @@
 
 The color module handles all color-related functions like changing color depth, creating colors from hex code, converting between color depths, mixing colors, etc.
 
-`lv_color_t` is used to store a color, its fileds are set according to `LV_COLOR_DEPTH` in `lv_conf.h`. (See below)
+The type `lv_color_t` is used to store a color. Its fields are set according to `LV_COLOR_DEPTH` in `lv_conf.h`. (See below)
 
-You may set `LV_COLOR_16_SWAP` in `lv_conf.h` to swap the bytes of *RGB565* colors. You may need this to send the 16-bit colors via a byte-oriented interface like SPI. As 16-bit numbers are stored in Little Endian format (lower byte on the lower address), the interface will send the lower byte first. However, displays usually need the higher byte first. A mismatch in the byte order will result in highly distorted colors.
+You may set `LV_COLOR_16_SWAP` in `lv_conf.h` to swap bytes of *RGB565* colors. You may need this when sending 16-bit colors via a byte-oriented interface like SPI. As 16-bit numbers are stored in little-endian format (lower byte at the lower address), the interface will send the lower byte first. However, displays usually need the higher byte first. A mismatch in the byte order will result in highly distorted colors.
 
 ## Creating colors
 
 ### RGB
-Create colors from Red, Green and Blue channel values
+Create colors from Red, Green and Blue channel values:
 ```c
 //All channels are 0-255
 lv_color_t c = lv_color_make(red, green, blue);
@@ -26,7 +26,7 @@ lv_color_t c = lv_color_hex3(0x123);
 ```
 
 ### HSV
-Create colors from Hue, Saturation and Value values
+Create colors from Hue, Saturation and Value values:
 
 ```c
 //h = 0..359, s = 0..100, v = 0..100
@@ -41,7 +41,7 @@ lv_color_hsv_t c_hsv = lv_color_to_hsv(color);
 ```
 
 ### Palette
-LVGL includes [material design's palette](https://vuetifyjs.com/en/styles/colors/#material-colors). In this all color have a main as well as four darker and five lighter variants.
+LVGL includes [Material Design's palette](https://vuetifyjs.com/en/styles/colors/#material-colors) of colors. In this system all named colors have a nominal main color as well as four darker and five lighter variants.
 
 The names of the colors are as follows:
 - `LV_PALETTE_RED`
@@ -79,11 +79,11 @@ lv_color_t c = lv_color_lighten(c, lvl);
 // Darken a color. 0: no change, 255: black
 lv_color_t c = lv_color_darken(lv_color_t c, lv_opa_t lvl);
 
-// Lighten or darken a color. 0: black, 128: no change 255: black
+// Lighten or darken a color. 0: black, 128: no change 255: white
 lv_color_t c = lv_color_change_lightness(lv_color_t c, lv_opa_t lvl);
 
 
-// Mix 2 colors with a given ratio 0: full c2, 255: full c1, 128: half c1 and half c2
+// Mix two colors with a given ratio 0: full c2, 255: full c1, 128: half c1 and half c2
 lv_color_t c = lv_color_mix(c1, c2, ratio);
 ```
 
@@ -91,15 +91,15 @@ lv_color_t c = lv_color_mix(c1, c2, ratio);
 `lv_color_white()` and `lv_color_black()` return `0xFFFFFF` and `0x000000` respectively.
 
 ## Opacity
-To describe opacity the `lv_opa_t` type is created as a wrapper to `uint8_t`. Some defines are also introduced:
+To describe opacity the `lv_opa_t` type is created from `uint8_t`. Some special purpose defines are also introduced:
 
-- `LV_OPA_TRANSP` Value: 0, means the opacity makes the color completely transparent
+- `LV_OPA_TRANSP` Value: 0, means no opacity making the color completely transparent
 - `LV_OPA_10` Value: 25, means the color covers only a little
-- `LV_OPA_20 ... OPA_80` come logically
+- `LV_OPA_20 ... OPA_80` follow logically
 - `LV_OPA_90` Value: 229, means the color near completely covers
-- `LV_OPA_COVER` Value: 255, means the color completely covers
+- `LV_OPA_COVER` Value: 255, means the color completely covers (full opacity)
 
-You can also use the `LV_OPA_*` defines in `lv_color_mix()` as a *ratio*.
+You can also use the `LV_OPA_*` defines in `lv_color_mix()` as a mixing *ratio*.
 
 
 ## Color types
@@ -109,8 +109,8 @@ The following variable types are defined by the color module:
 - `lv_color8_t` A structure to store R (3 bit),G (3 bit),B (2 bit) components for 8-bit colors (1 byte)
 - `lv_color16_t` A structure to store R (5 bit),G (6 bit),B (5 bit) components for 16-bit colors (2 byte)
 - `lv_color32_t` A structure to store R (8 bit),G (8 bit), B (8 bit) components for 24-bit colors (4 byte)
-- `lv_color_t` Equal to `lv_color1/8/16/24_t` depending on current color depth setting
-- `lv_color_int_t` `uint8_t`, `uint16_t` or `uint32_t` depending on color depth setting. Used to build color arrays from plain numbers.
+- `lv_color_t` Equal to `lv_color1/8/16/24_t` depending on the configured color depth setting
+- `lv_color_int_t` `uint8_t`, `uint16_t` or `uint32_t` depending on the color depth setting. Used to build color arrays from plain numbers.
 - `lv_opa_t` A simple `uint8_t` type to describe opacity.
 
 The `lv_color_t`, `lv_color1_t`, `lv_color8_t`, `lv_color16_t` and `lv_color32_t` types have four fields:
@@ -124,7 +124,7 @@ You can set the current color depth in *lv_conf.h*, by setting the `LV_COLOR_DEP
 
 
 ### Convert color
-You can convert a color from the current color depth to another. The converter functions return with a number, so you have to use the `full` field:
+You can convert a color from the current color depth to another. The converter functions return with a number, so you have to use the `full` field to map a converted color back into a structure:
 
 ```c
 lv_color_t c;

docs/overview/coords.md

@@ -5,19 +5,20 @@
 # Positions, sizes, and layouts
 
 ## Overview
-Similarly to many other parts of LVGL, the concept of setting the coordinates was inspired by CSS. By no means a complete implementation of the standard but subsets of CSS were implemented (sometimes with minor adjustments).
-In shorts this means:
-- the set coordinates (size, position, layouts, etc) are stored in styles
+Similarly to many other parts of LVGL, the concept of setting the coordinates was inspired by CSS. LVGL has by no means a complete implementation of CSS but a comparable subset is implemented (sometimes with minor adjustments).
+
+In short this means:
+- Explicitly set coordinates are stored in styles (size, position, layouts, etc.)
 - support min-width, max-width, min-height, max-height
 - have pixel, percentage, and "content" units 
-- x=0; y=0 coordinate means the to top-left corner of the parent plus the left/top padding plus border width
+- x=0; y=0 coordinate means the top-left corner of the parent plus the left/top padding plus border width
 - width/height means the full size, the "content area" is smaller with padding and border width 
 - a subset of flexbox and grid layouts are supported
  
 ###  Units
-- pixel: Simply a position in pixels. A simple integer always means pixel. E.g. `lv_obj_set_x(btn, 10)`
-- percentage: The percentage of the size of the object or its parent (depending on the property). The `lv_pct(value)` converts a value to percentage. E.g. `lv_obj_set_width(btn, lv_pct(50))`
-- `LV_SIZE_CONTENT`: Special value to set the width/height of an object to involve all the children. Its similar to `auto` in CSS. E.g. `lv_obj_set_width(btn, LV_SIZE_CONTENT)`.
+- pixel: Simply a position in pixels. An integer always means pixels. E.g. `lv_obj_set_x(btn, 10)`
+- percentage: The percentage of the size of the object or its parent (depending on the property). `lv_pct(value)` converts a value to percentage. E.g. `lv_obj_set_width(btn, lv_pct(50))`
+- `LV_SIZE_CONTENT`: Special value to set the width/height of an object to involve all the children. It's similar to `auto` in CSS. E.g. `lv_obj_set_width(btn, LV_SIZE_CONTENT)`.
 
 ### Boxing model
 LVGL follows CSS's [border-box](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) model.
@@ -25,13 +26,13 @@ An object's "box" is built from the following parts:
 - bounding box: the width/height of the elements.
 - border width: the width of the border. 
 - padding: space between the sides of the object and its children. 
-- content: the content area which size if the bounding box reduced by the border width and the size of the paddings.
+- content: the content area which is the size of the bounding box reduced by the border width and padding.
 
-![The box models of LVGL: The content area is smaller then the bounding box with the padding and border width](/misc/boxmodel.png)
+![The box models of LVGL: The content area is smaller than the bounding box with the padding and border width](/misc/boxmodel.png)
 
-The border is drawn inside the bounding box. Inside the border LVGL keeps "padding size" to place the children. 
+The border is drawn inside the bounding box. Inside the border LVGL keeps a "padding margin" when placing an object's children. 
 
-The outline is drawn outside of the bounding box.
+The outline is drawn outside the bounding box.
 
 ### Important notes
 This section describes special cases in which LVGL's behavior might be unexpected.
@@ -40,16 +41,16 @@ This section describes special cases in which LVGL's behavior might be unexpecte
 LVGL doesn't recalculate all the coordinate changes immediately. This is done to improve performance. 
 Instead, the objects are marked as "dirty" and before redrawing the screen LVGL checks if there are any "dirty" objects. If so it refreshes their position, size and layout.
 
-In other words, if you need to get the any coordinate of an object and it the coordinates were just changed LVGL's needs to be forced to recalculate the coordinates. 
+In other words, if you need to get the coordinate of an object and the coordinates were just changed, LVGL needs to be forced to recalculate the coordinates. 
 To do this call `lv_obj_update_layout(obj)`.
 
 The size and position might depend on the parent or layout. Therefore `lv_obj_update_layout` recalculates the coordinates of all objects on the screen of `obj`.
 
 #### Removing styles
-As it's described in the [Using styles](#using-styles) section the coordinates can be set via style properties too. 
-To be more precise under the hood every style coordinate related property is stored as style a property. If you use `lv_obj_set_x(obj, 20)` LVGL saves `x=20` in the local style of the object.
+As it's described in the [Using styles](#using-styles) section, coordinates can also be set via style properties. 
+To be more precise, under the hood every style coordinate related property is stored as a style property. If you use `lv_obj_set_x(obj, 20)` LVGL saves `x=20` in the local style of the object.
 
-It's an internal mechanism and doesn't matter much as you use LVGL. However, there is one case in which you need to aware of that. If the style(s) of an object are removed by 
+This is an internal mechanism and doesn't matter much as you use LVGL. However, there is one case in which you need to be aware of the implementation. If the style(s) of an object are removed by 
 ```c
 lv_obj_remove_style_all(obj)
 ```
@@ -75,23 +76,23 @@ lv_obj_set_size(obj2, 200, 100);
 ## Position
 
 ### Simple way
-To simple set the x and y coordinates of an object use 
+To simply set the x and y coordinates of an object use:
 ```c
-lv_obj_set_x(obj, 10);
+lv_obj_set_x(obj, 10);        //Separate...
 lv_obj_set_y(obj, 20);
 lv_obj_set_pos(obj, 10, 20); 	//Or in one function
 ```
 
-By default the the x and y coordinates are measured from the top left corner of the parent's content area. 
-For example if the parent has 5 pixels padding on every side, the above code will place `obj` at (15, 25) because the content area starts after the padding.
+By default, the x and y coordinates are measured from the top left corner of the parent's content area. 
+For example if the parent has five pixels of padding on every side the above code will place `obj` at (15, 25) because the content area starts after the padding.
 
-If percentage values are calculated from the parents content area size. 
+Percentage values are calculated from the parent's content area size. 
 ```c
-lv_obj_set_x(btn, lv_pct(10)); //x = 10 % of parant content area width
+lv_obj_set_x(btn, lv_pct(10)); //x = 10 % of parent content area width
 ```
 
 ### Align
-In some cases it's convenient to change the origin of the positioning from the the default top left. If the origin is changed e.g. to bottom-right, the (0,0) position means: align to the bottom-right corner. 
+In some cases it's convenient to change the origin of the positioning from the default top left. If the origin is changed e.g. to bottom-right, the (0,0) position means: align to the bottom-right corner. 
 To change the origin use:
 ```c
 lv_obj_set_align(obj, align);
@@ -113,7 +114,7 @@ The following alignment options can be used:
 - `LV_ALIGN_RIGHT_MID`
 - `LV_ALIGN_CENTER`
 
-It quite common to align a children to the center of its parent, there fore is a dedicated function for it:
+It's quite common to align a child to the center of its parent, therefore a dedicated function exists:
 ```c
 lv_obj_center(obj);
 
@@ -121,14 +122,14 @@ lv_obj_center(obj);
 lv_obj_align(obj, LV_ALIGN_CENTER, 0, 0);
 ```
 
-If the parent's size changes the set alignment and position of the children is applied again automatically.
+If the parent's size changes, the set alignment and position of the children is updated automatically.
 
-The functions introduced above aligns the object to its parent. However it's also possible to align an object to an arbitrary object.
+The functions introduced above align the object to its parent. However, it's also possible to align an object to an arbitrary reference object.
 ```c
 lv_obj_align_to(obj_to_align, reference_obj, align, x, y);
 ```
 
-Besides the alignments options above the following can be used to align the object outside of the reference object:
+Besides the alignments options above, the following can be used to align an object outside the reference object:
 
 - `LV_ALIGN_OUT_TOP_LEFT`
 - `LV_ALIGN_OUT_TOP_MID`
@@ -148,14 +149,14 @@ For example to align a label above a button and center the label horizontally:
 lv_obj_align_to(label, btn, LV_ALIGN_OUT_TOP_MID, 0, -10);
 ```
 
-Note that - unlike with `lv_obj_align()` - `lv_obj_align_to()` can not realign the object if its coordinates or the reference object's coordinates changes. 
+Note that, unlike with `lv_obj_align()`, `lv_obj_align_to()` can not realign the object if its coordinates or the reference object's coordinates change. 
 
 ## Size
 
 ### Simple way
 The width and the height of an object can be set easily as well:
 ```c
-lv_obj_set_width(obj, 200);
+lv_obj_set_width(obj, 200);       //Separate...
 lv_obj_set_height(obj, 100);
 lv_obj_set_size(obj, 200, 100); 	//Or in one function
 ```
@@ -165,18 +166,18 @@ Percentage values are calculated based on the parent's content area size. For ex
 lv_obj_set_height(obj, lv_pct(100));
 ```
 
-Size setting supports a value: `LV_SIZE_CONTENT`. It means the object's size in the respective direction will be set to the size of its children. 
-Note that only children on the right and bottom will be considered and children on the top and left remain cropped. This limitation makes the behavior more predictable.
+The size settings support a special value: `LV_SIZE_CONTENT`. It means the object's size in the respective direction will be set to the size of its children. 
+Note that only children on the right and bottom sides will be considered and children on the top and left remain cropped. This limitation makes the behavior more predictable.
 
 Objects with `LV_OBJ_FLAG_HIDDEN` or `LV_OBJ_FLAG_FLOATING` will be ignored by the `LV_SIZE_CONTENT` calculation.
 
-The above functions set the size of the bounding box of the object but the size of the content area can be set as well. It means the object's bounding box will be larger with the paddings than the set size. 
+The above functions set the size of an object's bounding box but the size of the content area can be set as well. This means an object's bounding box will be enlarged with the addition of padding.
 ```c
 lv_obj_set_content_width(obj, 50); //The actual width: padding left + 50 + padding right
 lv_obj_set_content_height(obj, 30); //The actual width: padding top + 30 + padding bottom
 ```
 
-The size of the bounding box and the content area can be get with the following functions:
+The size of the bounding box and the content area can be retrieved with the following functions:
 ```c
 lv_coord_t w = lv_obj_get_width(obj);
 lv_coord_t h = lv_obj_get_height(obj);
@@ -186,13 +187,13 @@ lv_coord_t content_h = lv_obj_get_content_height(obj);
 
 ## Using styles
 Under the hood the position, size and alignment properties are style properties. 
-The above described "simple functions" hide the style related code for the sake of simplicity and set the position, size, and alignment properties in the local styles of the obejct.
+The above described "simple functions" hide the style related code for the sake of simplicity and set the position, size, and alignment properties in the local styles of the object.
 
-However, using styles as to set the coordinates has some great advantages:
-- It makes it easy to set the width/height/etc for several objects together. E.g. make all the sliders 100x10 pixels sized. 
+However, using styles to set the coordinates has some great advantages:
+- It makes it easy to set the width/height/etc. for several objects together. E.g. make all the sliders 100x10 pixels sized. 
 - It also makes possible to modify the values in one place.
-- The values can be overwritten by other styles. For example `style_btn` makes the object `100x50` by default but adding `style_full_width` overwrites only the width of the object.
-- The object can have different position or size in different state. E.g. 100 px wide in `LV_STATE_DEFAULT` but 120 px in `LV_STATE_PRESSED`.
+- The values can be partially overwritten by other styles. For example `style_btn` makes the object `100x50` by default but adding `style_full_width` overwrites only the width of the object.
+- The object can have different position or size depending on state. E.g. 100 px wide in `LV_STATE_DEFAULT` but 120 px in `LV_STATE_PRESSED`.
 - Style transitions can be used to make the coordinate changes smooth. 
 
 
@@ -207,14 +208,14 @@ lv_obj_add_style(btn, &style, LV_PART_MAIN);
 ```
 
 As you will see below there are some other great features of size and position setting. 
-However, to keep the LVGL's API lean only the most common coordinate setting features have a "simple" version and the more complex features can be used via styles. 
+However, to keep the LVGL API lean, only the most common coordinate setting features have a "simple" version and the more complex features can be used via styles. 
 
 ## Translation
 
 Let's say the there are 3 buttons next to each other. Their position is set as described above. 
-Now you want to move a buttons up a little when it's pressed. 
+Now you want to move a button up a little when it's pressed. 
 
-One way to achieve this is setting a new Y coordinate for pressed state:
+One way to achieve this is by setting a new Y coordinate for the pressed state:
 ```c
 static lv_style_t style_normal;
 lv_style_init(&style_normal);
@@ -234,7 +235,7 @@ lv_obj_add_style(btn3, &style_normal, LV_STATE_DEFAULT);
 lv_obj_add_style(btn3, &style_pressed, LV_STATE_PRESSED);
 ```
 
-It works but it's not really flexible because the pressed coordinate is hard-coded. If the buttons are not at y=100 `style_pressed` won't work as expected. To solve this translations can be used:
+This works, but it's not really flexible because the pressed coordinate is hard-coded. If the buttons are not at y=100, `style_pressed` won't work as expected. Translations can be used to solve this:
 ```c
 static lv_style_t style_normal;
 lv_style_init(&style_normal);
@@ -258,19 +259,19 @@ Translation is applied from the current position of the object.
 
 Percentage values can be used in translations as well. The percentage is relative to the size of the object (and not to the size of the parent). For example `lv_pct(50)` will move the object with half of its width/height.
 
-The translation is applied after the layouts are calculated. Therefore, even the layouted objects' position can be translated.
+The translation is applied after the layouts are calculated. Therefore, even laid out objects' position can be translated.
 
-The translation actually moves the object. It means it makes the scrollbars and `LV_SIZE_CONTENT` sized objects react to the position change.
+The translation actually moves the object. That means it makes the scrollbars and `LV_SIZE_CONTENT` sized objects react to the position change.
 
 
 ## Transformation
-Similarly to the position the size can be changed relative to the current size as well. 
-The transformed width and height are added on both sides of the object. This means 10 px transformed width makes the object 2x10 pixel wider.
+Similarly to position, an object's size can be changed relative to the current size as well. 
+The transformed width and height are added on both sides of the object. This means a 10 px transformed width makes the object 2x10 pixels wider.
 
-Unlike position translation, the size transformation doesn't make the object "really" larger. In other words scrollbars, layouts, `LV_SIZE_CONTENT` will not consider the transformed size. 
-Hence size transformation if "only" a visual effect. 
+Unlike position translation, the size transformation doesn't make the object "really" larger. In other words scrollbars, layouts, and `LV_SIZE_CONTENT` will not react to the transformed size. 
+Hence, size transformation is "only" a visual effect. 
 
-This code makes the a button larger when it's pressed:
+This code enlarges a button when it's pressed:
 ```c
 static lv_style_t style_pressed;
 lv_style_init(&style_pressed);
@@ -281,7 +282,7 @@ lv_obj_add_style(btn, &style_pressed, LV_STATE_PRESSED);
 ```
 
 ### Min and Max size
-Similarly to CSS, LVGL also support `min-width`, `max-width`, `min-height` and `max-height`. These are limits preventing an object's size to be smaller/larger then these values. 
+Similarly to CSS, LVGL also supports `min-width`, `max-width`, `min-height` and `max-height`. These are limits preventing an object's size from becoming smaller/larger than these values. 
 They are especially useful if the size is set by percentage or `LV_SIZE_CONTENT`.
 ```c
 static lv_style_t style_max_height;
@@ -292,7 +293,7 @@ lv_obj_set_height(obj, lv_pct(100));
 lv_obj_add_style(obj, &style_max_height, LV_STATE_DEFAULT); //Limit the  height to 200 px
 ```
 
-Percentage values can be used as well which are relative to the size of the parent's content area size.
+Percentage values can be used as well which are relative to the size of the parent's content area.
 ```c
 static lv_style_t style_max_height;
 lv_style_init(&style_max_height);
@@ -310,7 +311,7 @@ Layouts can update the position and size of an object's children. They can be us
 The position and size set by the layout overwrites the "normal" x, y, width, and height settings. 
 
 There is only one function that is the same for every layout: `lv_obj_set_layout(obj, <LAYOUT_NAME>)` sets the layout on an object.
-For the further settings of the parent and children see the documentations of the given layout.
+For further settings of the parent and children see the documentation of the given layout.
 
 ### Built-in layout
 LVGL comes with two very powerful layouts:
@@ -320,16 +321,16 @@ LVGL comes with two very powerful layouts:
 Both are heavily inspired by the CSS layouts with the same name.
 
 ### Flags
-There are some flags that can be used on object to affect how they behave with layouts:
-- `LV_OBJ_FLAG_HIDDEN` Hidden object are ignored from layout calculations.
+There are some flags that can be used on objects to affect how they behave with layouts:
+- `LV_OBJ_FLAG_HIDDEN` Hidden objects are ignored in layout calculations.
 - `LV_OBJ_FLAG_IGNORE_LAYOUT` The object is simply ignored by the layouts. Its coordinates can be set as usual.
-- `LV_OBJ_FLAG_FLOATING` Same as `LV_OBJ_FLAG_IGNORE_LAYOUT` but the object with `LV_OBJ_FLAG_FLOATING` will be ignored from `LV_SIZE_CONTENT` calculations.
+- `LV_OBJ_FLAG_FLOATING` Same as `LV_OBJ_FLAG_IGNORE_LAYOUT` but the object with `LV_OBJ_FLAG_FLOATING` will be ignored in `LV_SIZE_CONTENT` calculations.
 
 These flags can be added/removed with `lv_obj_add/clear_flag(obj, FLAG);`
 
 ### Adding new layouts
 
-LVGL can be freely extended by a custom layouts like this:
+LVGL can be freely extended by a custom layout like this:
 ```c
 uint32_t MY_LAYOUT;
 
@@ -341,11 +342,11 @@ MY_LAYOUT = lv_layout_register(my_layout_update, &user_data);
 
 void my_layout_update(lv_obj_t * obj, void * user_data)
 {
-	/*Will be called automatically if required to reposition/resize the children of "obj" */	
+	/*Will be called automatically if it's required to reposition/resize the children of "obj" */	
 }
 ```
 
-Custom style properties can be added too that can be get and used in the update callback. For example:
+Custom style properties can be added which can be retrieved and used in the update callback. For example:
 ```c
 uint32_t MY_PROP;
 ...
@@ -364,5 +365,3 @@ static inline void lv_style_set_my_prop(lv_style_t * style, uint32_t value)
 ```
 
 ## Examples
-
-

docs/overview/display.md

@@ -4,12 +4,12 @@
 ```
 # Displays
 
-``` important:: The basic concept of *display* in LVGL is explained in the [Porting](/porting/display) section. So before reading further, please read the [Porting](/porting/display) section first.
+``` important:: The basic concept of a *display* in LVGL is explained in the [Porting](/porting/display) section. So before reading further, please read the [Porting](/porting/display) section first.
 ```
 
 ## Multiple display support
 
-In LVGL, you can have multiple displays, each with their own driver and objects. The only limitation is that every display needs to be have same color depth (as defined in `LV_COLOR_DEPTH`). 
+In LVGL you can have multiple displays, each with their own driver and objects. The only limitation is that every display needs to have the same color depth (as defined in `LV_COLOR_DEPTH`). 
 If the displays are different in this regard the rendered image can be converted to the correct format in the drivers `flush_cb`.
 
 Creating more displays is easy: just initialize more display buffers and register another driver for every display.
@@ -22,26 +22,26 @@ Why would you want multi-display support? Here are some examples:
 - Have two large TFT displays: one for a customer and one for the shop assistant.
 
 ### Using only one display
-Using more displays can be useful but in most cases it's not required. Therefore, the whole concept of multi-display is completely hidden if you register only one display.
-By default, the lastly created (and only) display is used.
+Using more displays can be useful but in most cases it's not required. Therefore, the whole concept of multi-display handling is completely hidden if you register only one display.
+By default, the last created (and only) display is used.
 
-`lv_scr_act()`, `lv_scr_load(scr)`, `lv_layer_top()`, `lv_layer_sys()`, `LV_HOR_RES` and `LV_VER_RES` are always applied on the most recently created (default) screen.
-If you pass `NULL` as `disp` parameter to display related function, usually the default display will be used.
-E.g. `lv_disp_trig_activity(NULL)` will trigger a user activity on the default screen. (See below in [Inactivity](#Inactivity)).
+`lv_scr_act()`, `lv_scr_load(scr)`, `lv_layer_top()`, `lv_layer_sys()`, `LV_HOR_RES` and `LV_VER_RES` are always applied on the most recently created (default) display.
+If you pass `NULL` as `disp` parameter to display related functions the default display will usually be used.
+E.g. `lv_disp_trig_activity(NULL)` will trigger a user activity on the default display. (See below in [Inactivity](#Inactivity)).
 
 ### Mirror display
 
-To mirror the image of the display to another display, you don't need to use the multi-display support. Just transfer the buffer received in `drv.flush_cb` to the other display too.
+To mirror the image of a display to another display, you don't need to use multi-display support. Just transfer the buffer received in `drv.flush_cb` to the other display too.
 
 ### Split image
-You can create a larger display from smaller ones. You can create it as below:
+You can create a larger virtual display from an array of smaller ones. You can create it as below:
 1. Set the resolution of the displays to the large display's resolution.
 2. In `drv.flush_cb`, truncate and modify the `area` parameter for each display.
-3. Send the buffer's content to each display with the truncated area.
+3. Send the buffer's content to each real display with the truncated area.
 
 ## Screens
 
-Every display has each set of [Screens](overview/object#screen-the-most-basic-parent) and the object on the screens.
+Every display has its own set of [screens](overview/object#screen-the-most-basic-parent) and the objects on each screen.
 
 Be sure not to confuse displays and screens:
 
@@ -49,52 +49,52 @@ Be sure not to confuse displays and screens:
 * **Screens** are the high-level root objects associated with a particular display. One display can have multiple screens associated with it, but not vice versa.
 
 Screens can be considered the highest level containers which have no parent.
-The screen's size is always equal to its display and size their position is (0;0). Therefore, the screens coordinates can't be changed, i.e. `lv_obj_set_pos()`, `lv_obj_set_size()` or similar functions can't be used on screens.
+A screen's size is always equal to its display and their origin is (0;0). Therefore, a screen's coordinates can't be changed, i.e. `lv_obj_set_pos()`, `lv_obj_set_size()` or similar functions can't be used on screens.
 
-A screen can be created from any object type but the two most typical types are the [Base object](/widgets/obj) and the [Image](/widgets/core/img) (to create a wallpaper).
+A screen can be created from any object type but the two most typical types are [Base object](/widgets/obj) and [Image](/widgets/core/img) (to create a wallpaper).
 
-To create a screen, use `lv_obj_t * scr = lv_<type>_create(NULL, copy)`. `copy` can be an other screen to copy it.
+To create a screen, use `lv_obj_t * scr = lv_<type>_create(NULL, copy)`. `copy` can be an existing screen copied into the new screen.
 
-To load a screen, use `lv_scr_load(scr)`. To get the active screen, use `lv_scr_act()`. These functions works on the default display. If you want to to specify which display to work on, use `lv_disp_get_scr_act(disp)` and `lv_disp_load_scr(disp, scr)`. Screen can be loaded with animations too. Read more [here](object.html#load-screens).
+To load a screen, use `lv_scr_load(scr)`. To get the active screen, use `lv_scr_act()`. These functions work on the default display. If you want to specify which display to work on, use `lv_disp_get_scr_act(disp)` and `lv_disp_load_scr(disp, scr)`. A screen can be loaded with animations too. Read more [here](object.html#load-screens).
 
 Screens can be deleted with `lv_obj_del(scr)`, but ensure that you do not delete the currently loaded screen.
 
 ### Transparent screens
 
-Usually, the opacity of the screen is `LV_OPA_COVER` to provide a solid background for its children. If it's not the case (opacity &lt; 100%) the display's background color or image will be visible. 
+Usually, the opacity of the screen is `LV_OPA_COVER` to provide a solid background for its children. If this is not the case (opacity &lt; 100%) the display's background color or image will be visible. 
 See the [Display background](#display-background) section for more details. If the display's background opacity is also not `LV_OPA_COVER` LVGL has no solid background to draw. 
 
 This configuration (transparent screen and display) could be used to create for example OSD menus where a video is played on a lower layer, and a menu is overlayed on an upper layer.
  
-To handle transparent displays special (slower) color mixing algorithms need to be used by LVGL so this feature needs to enabled with `LV_COLOR_SCREEN_TRANSP` in `lv_conf.h`. 
+To handle transparent displays, special (slower) color mixing algorithms need to be used by LVGL so this feature needs to enabled with `LV_COLOR_SCREEN_TRANSP` in `lv_conf.h`. 
 As this mode operates on the Alpha channel of the pixels `LV_COLOR_DEPTH = 32` is also required. The Alpha channel of 32-bit colors will be 0 where there are no objects and 255 where there are solid objects.
 
-In summary, to enable transparent screen and displays to create OSD menu-like UIs:
+In summary, to enable transparent screens and displays for OSD menu-like UIs:
 - Enable `LV_COLOR_SCREEN_TRANSP` in `lv_conf.h`
 - Be sure to use `LV_COLOR_DEPTH 32`
-- Set the screens opacity to `LV_OPA_TRANSP` e.g. with `lv_obj_set_style_local_bg_opa(lv_scr_act(), LV_OBJMASK_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_TRANSP)`
+- Set the screen's opacity to `LV_OPA_TRANSP` e.g. with `lv_obj_set_style_local_bg_opa(lv_scr_act(), LV_OBJMASK_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_TRANSP)`
 - Set the display opacity to `LV_OPA_TRANSP` with `lv_disp_set_bg_opa(NULL, LV_OPA_TRANSP);`
 
 ## Features of displays
 
 ### Inactivity
 
-The user's inactivity is measured on each display. Every use of an [Input device](/overview/indev) (if [associated with the display](/porting/indev#other-features)) counts as an activity.
-To get time elapsed since the last activity, use `lv_disp_get_inactive_time(disp)`. If `NULL` is passed, the overall smallest inactivity time will be returned from all displays (**not the default display**).
+A user's inactivity time is measured on each display. Every use of an [Input device](/overview/indev) (if [associated with the display](/porting/indev#other-features)) counts as an activity.
+To get time elapsed since the last activity, use `lv_disp_get_inactive_time(disp)`. If `NULL` is passed, the lowest inactivity time among all displays will be returned (**NULL isn't just the default display**).
 
 You can manually trigger an activity using `lv_disp_trig_activity(disp)`. If `disp` is `NULL`, the default screen will be used (**and not all displays**).
 
 ### Background
-Every display has background color, a background image and background opacity properties. They become visible when the current screen is transparent or not positioned to cover the whole display.
+Every display has a background color, background image and background opacity properties. They become visible when the current screen is transparent or not positioned to cover the whole display.
 
-Background color is a simple color to fill the display. It can be adjusted with `lv_disp_set_bg_color(disp, color)`;
+The background color is a simple color to fill the display. It can be adjusted with `lv_disp_set_bg_color(disp, color)`;
 
-Background image is a path to a file or a pointer to an `lv_img_dsc_t` variable (converted image) to be used as wallpaper. It can be set with `lv_disp_set_bg_color(disp, &my_img)`;
-If the background image is set (not `NULL`) the background won't be filled with `bg_color`.
+The display background image is a path to a file or a pointer to an `lv_img_dsc_t` variable (converted image data) to be used as wallpaper. It can be set with `lv_disp_set_bg_image(disp, &my_img)`;
+If a background image is configured the background won't be filled with `bg_color`.
 
 The opacity of the background color or image can be adjusted with `lv_disp_set_bg_opa(disp, opa)`. 
 
-The `disp` parameter of these functions can be `NULL` to refer it to the default display.
+The `disp` parameter of these functions can be `NULL` to select the default display.
 
 
 

docs/overview/drawing.md

@@ -4,22 +4,22 @@
 ```
 # Drawing
 
-With LVGL, you don't need to draw anything manually. Just create objects (like buttons, labels, arc, etc), move and change them, and LVGL will refresh and redraw what is required.
+With LVGL, you don't need to draw anything manually. Just create objects (like buttons, labels, arc, etc.), move and change them, and LVGL will refresh and redraw what is required.
 
-However, it might be useful to have a basic understanding of how drawing happens in LVGL to add customization, make it easier to find bugs or just out of curiosity.
+However, it can be useful to have a basic understanding of how drawing happens in LVGL to add customization, make it easier to find bugs or just out of curiosity.
 
-The basic concept is to not draw directly to the screen, but draw to an internal draw buffer first. When drawing (rendering) is ready, that buffer is copied to the screen. 
+The basic concept is to not draw directly onto the display but rather to first draw on an internal draw buffer. When a drawing (rendering) is ready that buffer is copied to the display. 
 
-The draw buffer can be smaller than the screen's size. LVGL will simply render in "tiles" that fit into the given draw buffer.
+The draw buffer can be smaller than a display's size. LVGL will simply render in "tiles" that fit into the given draw buffer.
 
-This approach has two main advantages compared to directly drawing to the screen:
-1. It avoids flickering while the layers of the UI are drawn. For example, if LVGL drawn directly into the display, when drawing a *background + button + text*, each "stage" would be visible for a short time .
+This approach has two main advantages compared to directly drawing to the display:
+1. It avoids flickering while the layers of the UI are drawn. For example, if LVGL drew directly onto the display, when drawing a *background + button + text*, each "stage" would be visible for a short time.
 2. It's faster to modify a buffer in internal RAM and finally write one pixel only once than reading/writing the display directly on each pixel access. 
 (e.g. via a display controller with SPI interface). 
 
-Note that this concept is different from "traditional" double buffering where there are 2 screen sized frame buffers: 
+Note that this concept is different from "traditional" double buffering where there are two display sized frame buffers: 
 one holds the current image to show on the display, and rendering happens to the other (inactive) frame buffer, and they are swapped when the rendering is finished. 
-The main difference is that with LVGL you don't have to store 2 frame buffers (which usually requires external RAM) but only smaller draw buffer(s) that can easily fit into the internal RAM too.
+The main difference is that with LVGL you don't have to store two frame buffers (which usually requires external RAM) but only smaller draw buffer(s) that can easily fit into internal RAM.
 
 
 ## Mechanism of screen refreshing
@@ -27,73 +27,92 @@ The main difference is that with LVGL you don't have to store 2 frame buffers (w
 Be sure to get familiar with the [Buffering modes of LVGL](/porting/display) first.
 
 LVGL refreshes the screen in the following steps:
-1. Something happens on the UI which requires redrawing. For example, a button is pressed, a chart is changed, an animation happened, etc.
+1. Something happens in the UI which requires redrawing. For example, a button is pressed, a chart is changed, an animation happened, etc.
 2. LVGL saves the changed object's old and new area into a buffer, called an *Invalid area buffer*. For optimization, in some cases, objects are not added to the buffer:
     - Hidden objects are not added.
     - Objects completely out of their parent are not added.
     - Areas partially out of the parent are cropped to the parent's area.
-    - The objects on other screens are not added.
-3. In every `LV_DISP_DEF_REFR_PERIOD` (set in `lv_conf.h`) the followings happen:
-    - LVGL checks the invalid areas and joins the adjacent or intersecting areas.
-    - Takes the first joined area, if it's smaller than the *draw buffer*, then simply render the area's content into the *draw buffer*. 
+    - Objects on other screens are not added.
+3. In every `LV_DISP_DEF_REFR_PERIOD` (set in `lv_conf.h`) the following happens:
+    - LVGL checks the invalid areas and joins those that are adjacent or intersecting.
+    - Takes the first joined area, if it's smaller than the *draw buffer*, then simply renders the area's content into the *draw buffer*. 
       If the area doesn't fit into the buffer, draw as many lines as possible to the *draw buffer*.
     - When the area is rendered, call `flush_cb` from the display driver to refresh the display.
     - If the area was larger than the buffer, render the remaining parts too.
-    - Do the same with all the joined areas.
+    - Repeat the same with remaining joined areas.
 
-When an area is redrawn, the library searches the top most object which covers that area, and starts drawing from that object.
-For example, if a button's label has changed, the library will see that it's enough to draw the button under the text, and that it's not required to draw the screen under the button too.
+When an area is redrawn the library searches the top-most object which covers that area and starts drawing from that object.
+For example, if a button's label has changed, the library will see that it's enough to draw the button under the text and it's not necessary to redraw the display under the rest of the button too.
 
 The difference between buffering modes regarding the drawing mechanism is the following:
 1. **One buffer** - LVGL needs to wait for `lv_disp_flush_ready()` (called from `flush_cb`) before starting to redraw the next part.
 2. **Two buffers** -  LVGL can immediately draw to the second buffer when the first is sent to `flush_cb` because the flushing should be done by DMA (or similar hardware) in the background.
-3. **Double buffering** -  `flush_cb` should only swap the address of the frame buffer.
+3. **Double buffering** -  `flush_cb` should only swap the addresses of the frame buffers.
 
 ## Masking
 *Masking* is the basic concept of LVGL's draw engine. 
-To use LVGL it's not required to know about the mechanisms described here, but you might find interesting to know how drawing works under hood. 
+To use LVGL it's not required to know about the mechanisms described here but you might find interesting to know how drawing works under hood. 
 Knowing about masking comes in handy if you want to customize drawing.
 
-To learn masking let's learn the steps of drawing first. 
+To learn about masking let's see the steps of drawing first. 
 LVGL performs the following steps to render any shape, image or text. It can be considered as a drawing pipeline.
 
-1. **Prepare the draw descriptors** Create a draw descriptor from an object's styles (e.g. `lv_draw_rect_dsc_t`).  This gives us the parameters for drawing, for example the colors, widths, opacity, fonts, radius, etc. 
-2. **Call the draw function** Call the draw function with the draw descriptor and some other parameters (e.g. `lv_draw_rect()`).  It renders the primitive shape to the current draw buffer. 
-3. **Create masks** If the shape is very simple and doesn't require masks go to #5.  Else create the required masks (e.g. a rounded rectangle mask)
-4. **Calculate all the added mask**. It creates 0..255 values into a *mask buffer* with the "shape" of the created masks. 
+1. **Prepare the draw descriptors** Create a draw descriptor from an object's styles (e.g. `lv_draw_rect_dsc_t`).  This gives us the parameters for drawing, for example colors, widths, opacity, fonts, radius, etc. 
+2. **Call the draw function** Call the draw function with the draw descriptor and some other parameters (e.g. `lv_draw_rect()`).  It will render the primitive shape to the current draw buffer. 
+3. **Create masks** If the shape is very simple and doesn't require masks, go to #5. Otherwise, create the required masks in the draw function. (e.g. a rounded rectangle mask)
+4. **Calculate all the added mask** It composites opacity values into a *mask buffer* with the "shape" of the created masks. 
 E.g. in case of a "line mask" according to the parameters of the mask, keep one side of the buffer as it is (255 by default) and set the rest to 0 to indicate that this side should be removed.
-5. **Blend a color or image** During blending masks (make some pixels transparent or opaque), blending modes (additive, subtractive, etc) and opacity are handled.
+5. **Blend a color or image** During blending, masking (make some pixels transparent or opaque), blending modes (additive, subtractive, etc.) and color/image opacity are handled.
 
 LVGL has the following built-in mask types which can be calculated and applied real-time:
-- `LV_DRAW_MASK_TYPE_LINE` Removes a side from a line (top, bottom, left or right). `lv_draw_line` uses 4 of it. 
-Essentially, every (skew) line is bounded with 4 line masks by forming a rectangle.
-- `LV_DRAW_MASK_TYPE_RADIUS` Removes the inner or outer parts of a rectangle which can have radius. It's also used to create circles by setting the radius to large value (`LV_RADIUS_CIRCLE`) 
-- `LV_DRAW_MASK_TYPE_ANGLE` Removes a circle sector. It is used by `lv_draw_arc` to remove the "empty" sector. 
+- `LV_DRAW_MASK_TYPE_LINE` Removes a side from a line (top, bottom, left or right). `lv_draw_line` uses four instances of it. 
+Essentially, every (skew) line is bounded with four line masks forming a rectangle.
+- `LV_DRAW_MASK_TYPE_RADIUS` Removes the inner or outer corners of a rectangle with a radiused transition. It's also used to create circles by setting the radius to large value (`LV_RADIUS_CIRCLE`) 
+- `LV_DRAW_MASK_TYPE_ANGLE` Removes a circlular sector. It is used by `lv_draw_arc` to remove the "empty" sector. 
 - `LV_DRAW_MASK_TYPE_FADE` Create a vertical fade (change opacity) 
-- `LV_DRAW_MASK_TYPE_MAP` The mask is stored in an array and the necessary parts are applied 
+- `LV_DRAW_MASK_TYPE_MAP` The mask is stored in a bitmap array and the necessary parts are applied 
 
-Masks are used the create almost every basic primitives:
-- **letters** Create a mask from the letter and draw a rectangle with the letter's color considering the mask.
-- **line** Created from 4 "line masks", to mask out the left, right, top and bottom part of the line to get perfectly perpendicular line ending.
-- **rounded rectangle** A mask is created real-time to add radius to the corners.
-- **clip corner** To clip to overflowing content (usually children) on the rounded corners also a rounded rectangle mask is applied.
-- **rectangle border** Same as a rounded rectangle, but inner part is masked out too.
-- **arc drawing** A circle border is drawn, but an arc mask is applied too.
+Masks are used to create almost every basic primitive:
+- **letters** Create a mask from the letter and draw a rectangle with the letter's color using the mask.
+- **line** Created from four "line masks" to mask out the left, right, top and bottom part of the line to get a perfectly perpendicular perimeter.
+- **rounded rectangle** A mask is created real-time to add a radius to the corners.
+- **clip corner** To clip overflowing content (usually children) on rounded corners, a rounded rectangle mask is also applied.
+- **rectangle border** Same as a rounded rectangle but the inner part is masked out too.
+- **arc drawing** A circular border is drawn but an arc mask is applied too.
 - **ARGB images** The alpha channel is separated into a mask and the image is drawn as a normal RGB image.
 
+### Using masks
+
+Every mask type has a related parameter structure to describe the mask's data. The following parameter types exist:
+- `lv_draw_mask_line_param_t`
+- `lv_draw_mask_radius_param_t`
+- `lv_draw_mask_angle_param_t`
+- `lv_draw_mask_fade_param_t`
+- `lv_draw_mask_map_param_t`
+
+1. Initialize a mask parameter with `lv_draw_mask_<type>_init`. See `lv_draw_mask.h` for the whole API.
+2. Add the mask parameter to the draw engine with `int16_t mask_id = lv_draw_mask_add(&param, ptr)`. `ptr` can be any pointer to identify the mask, (`NULL` if unused). 
+3. Call the draw functions
+4. Remove the mask from the draw engine with `lv_draw_mask_remove_id(mask_id)` or `lv_draw_mask_remove_custom(ptr)`.
+5. Free the parameter with `lv_draw_mask_free_param(&param)`.
+
+A parameter can be added and removed any number of times, but it needs to be freed when not required anymore. 
+
+`lv_draw_mask_add` saves only the pointer of the mask so the parameter needs to be valid while in use. 
+
 ## Hook drawing
-Although widgets can be very well customized by styles there might be cases when something really custom is required. 
-To ensure a great level of flexibility LVGL sends a lot events during drawing with parameters that tell what LVGL is about to draw. 
-Some fields of these parameters can be modified to draw something else or any custom drawing can be added manually.
+Although widgets can be easily customized by styles there might be cases when something more custom is required. 
+To ensure a great level of flexibility LVGL sends a lot of events during drawing with parameters that tell what LVGL is about to draw. 
+Some fields of these parameters can be modified to draw something else or any custom drawing operations can be added manually.
 
-A good use case for it is the [Button matrix](/widgets/core/btnmatrix) widget. By default its buttons can be styled in different states but you can't style the buttons one by one. 
-However, an event is sent for every button and you can for example tell LVGL to use different colors on a specific button or to manually draw an image on some buttons.
+A good use case for this is the [Button matrix](/widgets/core/btnmatrix) widget. By default, its buttons can be styled in different states, but you can't style the buttons one by one.
+However, an event is sent for every button and you can, for example, tell LVGL to use different colors on a specific button or to manually draw an image on some buttons.
 
-Below each of these events are described in detail.
+Each of these events is described in detail below.
 
 ### Main drawing
 
-These events are related to the actual drawing of the object. E.g. drawing of buttons, texts, etc happens here.
+These events are related to the actual drawing of an object. E.g. the drawing of buttons, texts, etc. happens here.
 
 `lv_event_get_clip_area(event)` can be used to get the current clip area. The clip area is required in draw functions to make them draw only on a limited area. 
 
@@ -103,16 +122,16 @@ Sent before starting to draw an object. This is a good place to add masks manual
 
 #### LV_EVENT_DRAW_MAIN
 
-The actual drawing of the object happens in this event. E.g. a rectangle for a button is drawn here. First, the widgets' internal events are called to perform drawing and after that you can draw anything on top of them.
+The actual drawing of an object happens in this event. E.g. a rectangle for a button is drawn here. First, the widgets' internal events are called to perform drawing and after that you can draw anything on top of them.
 For example you can add a custom text or an image.
 
 #### LV_EVENT_DRAW_MAIN_END
 
-Called when the main drawing is finished. You can draw anything here as well and it's also good place to remove the masks created in `LV_EVENT_DRAW_MAIN_BEGIN`.
+Called when the main drawing is finished. You can draw anything here as well and it's also a good place to remove any masks created in `LV_EVENT_DRAW_MAIN_BEGIN`.
 
 ### Post drawing
 
-Post drawing events are called when all the children of an object are drawn. For example LVGL use the post drawing phase to draw the scrollbars because they should be above all the children. 
+Post drawing events are called when all the children of an object are drawn. For example LVGL use the post drawing phase to draw scrollbars because they should be above all of the children. 
 
 `lv_event_get_clip_area(event)` can be used to get the current clip area.
 
@@ -126,15 +145,15 @@ The actual drawing should happen here.
 
 #### LV_EVENT_DRAW_POST_END
 
-Called when post drawing has finished. If the masks were not removed in `LV_EVENT_DRAW_MAIN_END` they should be removed here.
+Called when post drawing has finished. If masks were not removed in `LV_EVENT_DRAW_MAIN_END` they should be removed here.
 
 ### Part drawing
 
 When LVGL draws a part of an object (e.g. a slider's indicator, a table's cell or a button matrix's button) it sends events before and after drawing that part with some context of the drawing.
-It allows changing the parts on a very low level with masks, extra drawing, or changing the parameters that LVGL is planning to use for drawing.
+This allows changing the parts on a very low level with masks, extra drawing, or changing the parameters that LVGL is planning to use for drawing.
 
 In these events an `lv_obj_draw_part_t` structure is used to describe the context of the drawing. Not all fields are set for every part and widget. 
-To see which fields are set for a widget see the widget's documentation.
+To see which fields are set for a widget refer to the widget's documentation.
 
 `lv_obj_draw_part_t` has the following fields:
 
@@ -153,8 +172,8 @@ lv_draw_arc_dsc_t *  arc_dsc;       // A draw descriptor that can be modified to
 
 // Other paramters 
 lv_area_t * draw_area;              // The area of the part being drawn
-const lv_point_t * p1;              // A point calculated during drawing. E.g. a point of chart or the center of an arc.
-const lv_point_t * p2;              // A point calculated during drawing. E.g. a point of chart.
+const lv_point_t * p1;              // A point calculated during drawing. E.g. a point of a chart or the center of an arc.
+const lv_point_t * p2;              // A point calculated during drawing. E.g. a point of a chart.
 char text[16];                      // A text calculated during drawing. Can be modified. E.g. tick labels on a chart axis.
 lv_coord_t radius;                  // E.g. the radius of an arc (not the corner radius).
 int32_t value;                      // A value calculated during drawing. E.g. Chart's tick line value.
@@ -169,7 +188,7 @@ Start the drawing of a part. This is a good place to modify the draw descriptors
  
 #### LV_EVENT_DRAW_PART_END
  
-Finish the drawing of a part. This is a good place to draw extra content on the part, or remove the masks added in `LV_EVENT_DRAW_PART_BEGIN`.
+Finish the drawing of a part. This is a good place to draw extra content on the part or remove masks added in `LV_EVENT_DRAW_PART_BEGIN`.
 
 ### Others
 
@@ -177,30 +196,30 @@ Finish the drawing of a part. This is a good place to draw extra content on the
 
 This event is used to check whether an object fully covers an area or not. 
 
-`lv_event_get_cover_area(event)` returns an pointer to an area to check and `lv_event_set_cover_res(event, res)` can be used to set one of these results:
-- `LV_COVER_RES_COVER` the areas is fully covered by the object
-- `LV_COVER_RES_NOT_COVER` the areas is not covered by the object
-- `LV_COVER_RES_MASKED` there is a mask on the object so it can not cover the area
+`lv_event_get_cover_area(event)` returns a pointer to an area to check and `lv_event_set_cover_res(event, res)` can be used to set one of these results:
+- `LV_COVER_RES_COVER` the area is fully covered by the object
+- `LV_COVER_RES_NOT_COVER` the area is not covered by the object
+- `LV_COVER_RES_MASKED` there is a mask on the object, so it does not fully cover the area
 
 Here are some reasons why an object would be unable to fully cover an area:
 - It's simply not fully in area
 - It has a radius
-- It has not 100% background opacity
+- It doesn't have 100% background opacity
 - It's an ARGB or chroma keyed image
-- It does not have normal blending mode. In this case LVGL needs to know the colors under the object to do the blending properly
+- It does not have normal blending mode. In this case LVGL needs to know the colors under the object to apply blending properly
 - It's a text, etc 
 
-In short if for any reason the area below the object is visible than it doesn't cover that area.
+In short if for any reason the area below an object is visible than the object doesn't cover that area.
 
 Before sending this event LVGL checks if at least the widget's coordinates fully cover the area or not. If not the event is not called.
 
-You need to check only the drawing you have added. The existing properties known by widget are handled in the widget's internal events. 
-E.g. if a widget has &gt; 0 radius it might not cover an area but you need to handle `radius` only if you will modify it and the widget can't know about it. 
+You need to check only the drawing you have added. The existing properties known by a widget are handled in its internal events. 
+E.g. if a widget has &gt; 0 radius it might not cover an area, but you need to handle `radius` only if you will modify it and the widget won't know about it. 
 
 #### LV_EVENT_REFR_EXT_DRAW_SIZE
 
-If you need to draw outside of a widget LVGL needs to know about it to provide the extra space for drawing. 
-Let's say you create an event the writes the current value of a slider above its knob. In this case LVGL needs to know that the slider's draw area should be larger with the size required for the text.
+If you need to draw outside a widget, LVGL needs to know about it to provide extra space for drawing. 
+Let's say you create an event which writes the current value of a slider above its knob. In this case LVGL needs to know that the slider's draw area should be larger with the size required for the text.
 
-You can simple set the required draw area with `lv_event_set_ext_draw_size(e, size)`. 
+You can simply set the required draw area with `lv_event_set_ext_draw_size(e, size)`. 
 

docs/overview/event.md

@@ -25,7 +25,7 @@ static void my_event_cb(lv_event_t * event)
 }
 ```
 In the example `LV_EVENT_CLICKED` means that only the click event will call `my_event_cb`. See the [list of event codes](#event-codes) for all the options.
-`LV_EVENT_ALL` can be used to receive all the events.
+`LV_EVENT_ALL` can be used to receive all events.
 
 The last parameter of `lv_obj_add_event_cb` is a pointer to any custom data that will be available in the event. It will be described later in more detail.
 
@@ -45,7 +45,7 @@ lv_obj_add_event_cb(obj, increment_on_click, LV_EVENT_CLICKED, &num2);
 The events will be called in the order as they were added. 
 
 
-More objects can use the same *event callback*.
+Other objects can use the same *event callback*.
 
 
 ## Remove event(s) from an object
@@ -63,35 +63,35 @@ The event codes can be grouped into these categories:
 
 All objects (such as Buttons/Labels/Sliders etc.) regardless their type receive the *Input device*, *Drawing* and *Other* events. 
 
-However the *Special events* are specific to a particular widget type. See the [widgets' documentation](/widgets/index) to learn when they are sent, 
+However, the *Special events* are specific to a particular widget type. See the [widgets' documentation](/widgets/index) to learn when they are sent, 
 
-*Custom events* are added by the user and therefore these are never sent by LVGL.
+*Custom events* are added by the user and are never sent by LVGL.
 
 The following event codes exist:
 
 ### Input device events
-- `LV_EVENT_PRESSED`      The object has been pressed
-- `LV_EVENT_PRESSING`     The object is being pressed (called continuously while pressing)
-- `LV_EVENT_PRESS_LOST`   The object is still being pressed but slid cursor/finger off of the object 
-- `LV_EVENT_SHORT_CLICKED`    The object was pressed for a short period of time, then released it. Not called if scrolled.
-- `LV_EVENT_LONG_PRESSED` Object has been pressed for at least the `long_press_time` specified in the input device driver.  Not called if scrolled.
+- `LV_EVENT_PRESSED`      An object has been pressed
+- `LV_EVENT_PRESSING`     An object is being pressed (called continuously while pressing)
+- `LV_EVENT_PRESS_LOST`   An object is still being pressed but slid cursor/finger off of the object 
+- `LV_EVENT_SHORT_CLICKED`    An object was pressed for a short period of time, then released. Not called if scrolled.
+- `LV_EVENT_LONG_PRESSED` An object has been pressed for at least the `long_press_time` specified in the input device driver.  Not called if scrolled.
 - `LV_EVENT_LONG_PRESSED_REPEAT`  Called after `long_press_time` in every `long_press_repeat_time` ms.  Not called if scrolled.
-- `LV_EVENT_CLICKED`      Called on release if the object did not scroll (regardless of long press)
-- `LV_EVENT_RELEASED`     Called in every case when the object has been released
-- `LV_EVENT_SCROLL_BEGIN` Scrolling begins. The event paramter is `NULL` or an `lv_anim_t *` with the scroll animation descriptor to modify if required. 
+- `LV_EVENT_CLICKED`      Called on release if an object did not scroll (regardless of long press)
+- `LV_EVENT_RELEASED`     Called in every case when an object has been released
+- `LV_EVENT_SCROLL_BEGIN` Scrolling begins. The event parameter is `NULL` or an `lv_anim_t *` with a scroll animation descriptor that can be modified if required. 
 - `LV_EVENT_SCROLL_END`   Scrolling ends.
-- `LV_EVENT_SCROLL`       The object was scrolled
+- `LV_EVENT_SCROLL`       An object was scrolled
 - `LV_EVENT_GESTURE`      A gesture is detected. Get the gesture with `lv_indev_get_gesture_dir(lv_indev_get_act());`
-- `LV_EVENT_KEY`          A key is sent to the object. Get the key with `lv_indev_get_key(lv_indev_get_act());`
-- `LV_EVENT_FOCUSED`      The object is focused 
-- `LV_EVENT_DEFOCUSED`    The object is defocused
-- `LV_EVENT_LEAVE`        The object is defocused but still selected
+- `LV_EVENT_KEY`          A key is sent to an object. Get the key with `lv_indev_get_key(lv_indev_get_act());`
+- `LV_EVENT_FOCUSED`      An object is focused 
+- `LV_EVENT_DEFOCUSED`    An object is unfocused
+- `LV_EVENT_LEAVE`        An object is unfocused but still selected
 - `LV_EVENT_HIT_TEST`     Perform advanced hit-testing. Use `lv_hit_test_info_t * a = lv_event_get_hit_test_info(e)` and check if `a->point` can click the object or not. If not set `a->res = false` 
 
 
 ### Drawing events
-- `LV_EVENT_COVER_CHECK` Check if the object fully covers an area. The event parameter is `lv_cover_check_info_t *`.
-- `LV_EVENT_REFR_EXT_DRAW_SIZE`  Get the required extra draw area around the object (e.g. for shadow). The event parameter is `lv_coord_t *` to store the size. Overwrite it only with a larger value.
+- `LV_EVENT_COVER_CHECK` Check if an object fully covers an area. The event parameter is `lv_cover_check_info_t *`.
+- `LV_EVENT_REFR_EXT_DRAW_SIZE`  Get the required extra draw area around an object (e.g. for a shadow). The event parameter is `lv_coord_t *` to store the size. Only overwrite it with a larger value.
 - `LV_EVENT_DRAW_MAIN_BEGIN` Starting the main drawing phase.
 - `LV_EVENT_DRAW_MAIN`   Perform the main drawing
 - `LV_EVENT_DRAW_MAIN_END`   Finishing the main drawing phase
@@ -104,14 +104,20 @@ The following event codes exist:
 ### Other events
 - `LV_EVENT_DELETE`       Object is being deleted
 - `LV_EVENT_CHILD_CHANGED`    Child was removed/added
+- `LV_EVENT_CHILD_CREATED`    Child was created, always bubbles up to all parents
+- `LV_EVENT_CHILD_DELETED`    Child was deleted, always bubbles up to all parents
 - `LV_EVENT_SIZE_CHANGED`    Object coordinates/size have changed
 - `LV_EVENT_STYLE_CHANGED`    Object's style has changed
 - `LV_EVENT_BASE_DIR_CHANGED` The base dir has changed
 - `LV_EVENT_GET_SELF_SIZE`    Get the internal size of a widget
+- `LV_EVENT_SCREEN_UNLOAD_START` A screen unload started, fired immediately when lv_scr_load/lv_scr_load_anim is called
+- `LV_EVENT_SCREEN_LOAD_START` A screen load started, fired when the screen change delay is expired
+- `LV_EVENT_SCREEN_LOADED`    A screen was loaded, called when all animations are finished
+- `LV_EVENT_SCREEN_UNLOADED`  A screen was unloaded, called when all animations are finished
 
 ### Special events
 - `LV_EVENT_VALUE_CHANGED`    The object's value has changed (i.e. slider moved)
-- `LV_EVENT_INSERT`       A text is being inserted to the object. The event data is `char *` being inserted.
+- `LV_EVENT_INSERT`       Text is being inserted into the object. The event data is `char *` being inserted.
 - `LV_EVENT_REFRESH`      Notify the object to refresh something on it (for the user)
 - `LV_EVENT_READY`        A process has finished
 - `LV_EVENT_CANCEL`       A process has been canceled 
@@ -120,7 +126,7 @@ The following event codes exist:
 ### Custom events
 Any custom event codes can be registered by `uint32_t MY_EVENT_1 = lv_event_register_id();` 
 
-And can be sent to any object with `lv_event_send(obj, MY_EVENT_1, &some_data)`
+They can be sent to any object with `lv_event_send(obj, MY_EVENT_1, &some_data)`
 
 ## Sending events
 
@@ -135,7 +141,7 @@ lv_event_send(mbox, LV_EVENT_VALUE_CHANGED, &btn_id);
 
 ### Refresh event
 
-`LV_EVENT_REFRESH` is special event because it's designed to be used by the user to notify an object to refresh itself. Some examples:
+`LV_EVENT_REFRESH` is a special event because it's designed to let the user notify an object to refresh itself. Some examples:
 - notify a label to refresh its text according to one or more variables (e.g. current time)
 - refresh a label when the language changes
 - enable a button if some conditions are met (e.g. the correct PIN is entered)
@@ -143,17 +149,17 @@ lv_event_send(mbox, LV_EVENT_VALUE_CHANGED, &btn_id);
 
 ## Fields of lv_event_t
 
-`lv_event_t` is the only parameter passed to event callback and it contains all the data about the event. The following values can be gotten from it:
+`lv_event_t` is the only parameter passed to the event callback and it contains all data about the event. The following values can be gotten from it:
 - `lv_event_get_code(e)` get the event code
-- `lv_event_get_target(e)` get the object to which the event is sent
-- `lv_event_get_original_target(e)` get the object to which the event is sent originally sent (different from `lv_event_get_target` if [event bubbling](#event-bubbling) is enabled)
+- `lv_event_get_target(e)` get the object to which an event was sent
+- `lv_event_get_original_target(e)` get the object to which an event was originally sent (different from `lv_event_get_target` if [event bubbling](#event-bubbling) is enabled)
 - `lv_event_get_user_data(e)` get the pointer passed as the last parameter of `lv_obj_add_event_cb`.
 - `lv_event_get_param(e)` get the parameter passed as the last parameter of `lv_event_send` 
 
 
 ## Event bubbling
 
-If `lv_obj_add_flag(obj, LV_OBJ_FLAG_EVENT_BUBBLE)` is enabled all events will be sent to the object's parent too. If the parent also has `LV_OBJ_FLAG_EVENT_BUBBLE` enabled the event will be sent to its parent too, and so on. 
+If `lv_obj_add_flag(obj, LV_OBJ_FLAG_EVENT_BUBBLE)` is enabled all events will be sent to an object's parent too. If the parent also has `LV_OBJ_FLAG_EVENT_BUBBLE` enabled the event will be sent to its parent and so on. 
 
 The *target* parameter of the event is always the current target object, not the original object. To get the original target call `lv_event_get_original_target(e)` in the event handler.  
 

docs/overview/file-system.md

@@ -5,17 +5,17 @@
 # File system
 
 LVGL has a 'File system' abstraction module that enables you to attach any type of file system.
-The file system is identified by a drive letter.
-For example, if the SD card is associated with the letter `'S'`, a file can be reached like `"S:path/to/file.txt"`.
+A file system is identified by an assigned drive letter.
+For example, if an SD card is associated with the letter `'S'`, a file can be reached using `"S:path/to/file.txt"`.
 
 ## Ready to use drivers
-The [lv_fs_if](https://github.com/lvgl/lv_fs_if) repository contains ready to use drivers using POSIX, standard C and [FATFS](http://elm-chan.org/fsw/ff/00index_e.html) API.
-See it's [README](https://github.com/lvgl/lv_fs_if#readme) for the details.
+The [lv_fs_if](https://github.com/lvgl/lv_fs_if) repository contains prepared drivers using POSIX, standard C and the [FATFS](http://elm-chan.org/fsw/ff/00index_e.html) API.
+See its [README](https://github.com/lvgl/lv_fs_if#readme) for the details.
 
-## Add a driver
+## Adding a driver
 
 ### Registering a driver
-To add a driver, `lv_fs_drv_t` needs to be initialized like below. `lv_fs_drv_t` needs to be static, global or dynamically allocated and not a local varaible.
+To add a driver, a `lv_fs_drv_t` needs to be initialized like below. The `lv_fs_drv_t` needs to be static, global or dynamically allocated and not a local variable.
 ```c
 static lv_fs_drv_t drv;                   /*Needs to be static or global*/
 lv_fs_drv_init(&drv);                     /*Basic initialization*/
@@ -50,10 +50,10 @@ The prototype of `open_cb` looks like this:
 void * (*open_cb)(lv_fs_drv_t * drv, const char * path, lv_fs_mode_t mode);
 ```
 
-`path` is path after the driver letter (e.g. "S:path/to/file.txt" -> "path/to/file.txt"). `mode` can be `LV_FS_MODE_WR` or `LV_FS_MODE_RD` to open for write or read.
+`path` is the path after the drive letter (e.g. "S:path/to/file.txt" -> "path/to/file.txt"). `mode` can be `LV_FS_MODE_WR` or `LV_FS_MODE_RD` to open for writes or reads.
 
-The return value is a pointer the *file object* the describes the opened file or `NULL` if there were any issues (e.g. the file wasn't found). 
-The returned file object will be passed to to other file system related callbacks. (see below)
+The return value is a pointer to a *file object* that describes the opened file or `NULL` if there were any issues (e.g. the file wasn't found). 
+The returned file object will be passed to other file system related callbacks. (see below)
 
 ### Other callbacks
 The other callbacks are quite similar. For example `write_cb` looks like this:
@@ -61,9 +61,9 @@ The other callbacks are quite similar. For example `write_cb` looks like this:
 lv_fs_res_t (*write_cb)(lv_fs_drv_t * drv, void * file_p, const void * buf, uint32_t btw, uint32_t * bw);
 ```
 
-As `file_p` LVGL passes the return value of `open_cb`, `buf` is the data to write, `btw` is the Bytes To Write, `bw` is the actually written bytes. 
+For `file_p`, LVGL passes the return value of `open_cb`, `buf` is the data to write, `btw` is the Bytes To Write, `bw` is the actually written bytes. 
 
-For a template to the callbacks see [lv_fs_template.c](https://github.com/lvgl/lvgl/blob/master/examples/porting/lv_port_fs_template.c).
+For a template of these callbacks see [lv_fs_template.c](https://github.com/lvgl/lvgl/blob/master/examples/porting/lv_port_fs_template.c).
 
 
 ## Usage example
@@ -82,9 +82,9 @@ if(res != LV_FS_RES_OK || read_num != 8) my_error_handling();
 
 lv_fs_close(&f);
 ```
-*The mode in `lv_fs_open` can be `LV_FS_MODE_WR` to open for write or `LV_FS_MODE_RD | LV_FS_MODE_WR` for both*
+*The mode in `lv_fs_open` can be `LV_FS_MODE_WR` to open for writes only or `LV_FS_MODE_RD | LV_FS_MODE_WR` for both*
 
-This example shows how to read a directory's content. It's up to the driver how to mark the directories, but it can be a good practice to insert a `'/'` in front of the directory name.
+This example shows how to read a directory's content. It's up to the driver how to mark directories in the result but it can be a good practice to insert a `'/'` in front of each directory name.
 ```c
 lv_fs_dir_t dir;
 lv_fs_res_t res;
@@ -110,9 +110,9 @@ while(1) {
 lv_fs_dir_close(&dir);
 ```
 
-## Use drivers for images
+## Use drives for images
 
-[Image](/widgets/core/img) objects can be opened from files too (besides variables stored in the flash).
+[Image](/widgets/core/img) objects can be opened from files too (besides variables stored in the compiled program).
 
 To use files in image widgets the following callbacks are required:
 - open

docs/overview/font.md

@@ -4,21 +4,21 @@
 ```
 # Fonts
 
-In LVGL fonts are collections of bitmaps and other information required to render the images of the letters (glyph). 
+In LVGL fonts are collections of bitmaps and other information required to render images of individual letters (glyph). 
 A font is stored in a `lv_font_t` variable and can be set in a style's *text_font* field. For example:
 ```c
 lv_style_set_text_font(&my_style, LV_STATE_DEFAULT, &lv_font_montserrat_28);  /*Set a larger font*/
 ```
 
-The fonts have a **bpp (bits per pixel)** property. It shows how many bits are used to describe a pixel in the font. The value stored for a pixel determines the pixel's opacity.
-This way, with higher *bpp*, the edges of the letter can be smoother. The possible *bpp* values are 1, 2, 4 and 8 (higher value means better quality).
+Fonts have a **bpp (bits per pixel)** property. It shows how many bits are used to describe a pixel in a font. The value stored for a pixel determines the pixel's opacity.
+This way, with higher *bpp*, the edges of the letter can be smoother. The possible *bpp* values are 1, 2, 4 and 8 (higher values mean better quality).
 
-The *bpp* also affects the required memory size to store the font. For example, *bpp = 4* makes the font nearly 4 times larger compared to *bpp = 1*.  
+The *bpp* property also affects the amount of memory needed to store a font. For example, *bpp = 4* makes a font nearly four times larger compared to *bpp = 1*.  
 
 ## Unicode support
 
 LVGL supports **UTF-8** encoded Unicode characters.
-Your editor needs to be configureed to save your code/text as UTF-8 (usually this the default) and be sure that, `LV_TXT_ENC` is set to `LV_TXT_ENC_UTF8` in *lv_conf.h*. (This is the default value)
+Your editor needs to be configured to save your code/text as UTF-8 (usually this the default) and be sure that, `LV_TXT_ENC` is set to `LV_TXT_ENC_UTF8` in *lv_conf.h*. (This is the default value)
 
 To test it try
 ```c
@@ -30,7 +30,7 @@ If all works well, a ✓ character should be displayed.
 
 ## Built-in fonts
 
-There are several built-in fonts in different sizes, which can be enabled in `lv_conf.h` by *LV_FONT_...* defines.
+There are several built-in fonts in different sizes, which can be enabled in `lv_conf.h` with *LV_FONT_...* defines.
 ### Normal fonts
 Containing all the ASCII characters, the degree symbol (U+00B0), the bullet symbol (U+2022) and the built-in symbols (see below).
 - `LV_FONT_MONTSERRAT_12` 12 px font
@@ -55,14 +55,14 @@ Containing all the ASCII characters, the degree symbol (U+00B0), the bullet symb
 
 ### Special fonts
 - `LV_FONT_MONTSERRAT_12_SUBPX` Same as normal 12 px font but with [subpixel rendering](#subpixel-rendering) 
-- `LV_FONT_MONTSERRAT_28_COMPRESSED` Same as normal 28 px font but  [compressed font](#compress-fonts) with 3 bpp
+- `LV_FONT_MONTSERRAT_28_COMPRESSED` Same as normal 28 px font but stored as a [compressed font](#compress-fonts) with 3 bpp
 - `LV_FONT_DEJAVU_16_PERSIAN_HEBREW` 16 px font with normal range + Hebrew, Arabic, Persian letters and all their forms
-- `LV_FONT_SIMSUN_16_CJK`16 px font with normal range + 1000 most common CJK radicals
+- `LV_FONT_SIMSUN_16_CJK`16 px font with normal range plus 1000 of the most common CJK radicals
 - `LV_FONT_UNSCII_8` 8 px pixel perfect font with only ASCII characters
 - `LV_FONT_UNSCII_16` 16 px pixel perfect font with only ASCII characters
 
 
-The built-in fonts are **global variables** with names like `lv_font_montserrat_16` for a 16 px hight font. To use them in a style, just add a pointer to a font variable like shown above.
+The built-in fonts are **global variables** with names like `lv_font_montserrat_16` for a 16 px height font. To use them in a style, just add a pointer to a font variable like shown above.
 
 The built-in fonts with *bpp = 4* contain the ASCII characters and use the [Montserrat](https://fonts.google.com/specimen/Montserrat) font.
 
@@ -70,12 +70,12 @@ In addition to the ASCII range, the following symbols are also added to the buil
 
 ![](/misc/symbols.png "Built-in Symbols in LVGL")
 
-The symbols can be used as:
+The symbols can be used singly as:
 ```c
 lv_label_set_text(my_label, LV_SYMBOL_OK);
 ```
 
-Or with together with strings:
+Or with together with strings (compile time string concatenation):
 ```c
 lv_label_set_text(my_label, LV_SYMBOL_OK "Apply");
 ```
@@ -88,7 +88,7 @@ lv_label_set_text(my_label, LV_SYMBOL_OK LV_SYMBOL_WIFI LV_SYMBOL_PLAY);
 ## Special features
 
 ### Bidirectional support
-Most of the languages use Left-to-Right (LTR for short) writing direction, however some languages (such as Hebrew, Persian or Arabic) uses Right-to-Left (RTL for short) direction. 
+Most languages use a Left-to-Right (LTR for short) writing direction, however some languages (such as Hebrew, Persian or Arabic) use Right-to-Left (RTL for short) direction. 
 
 LVGL not only supports RTL texts but supports mixed (a.k.a. bidirectional, BiDi) text rendering too. Some examples:
 
@@ -97,94 +97,94 @@ LVGL not only supports RTL texts but supports mixed (a.k.a. bidirectional, BiDi)
 BiDi support is enabled by `LV_USE_BIDI` in *lv_conf.h*
 
 All texts have a base direction (LTR or RTL) which determines some rendering rules and the default alignment of the text (Left or Right).
-However, in LVGL, base direction is applied not only for labels. It's a general property which can be set for every object. 
-If unset then it will be inherited from the parent. 
-So it's enough to set the base direction of the screen and every object will inherit it.
+However, in LVGL, the base direction is not only applied to labels. It's a general property which can be set for every object. 
+If not set then it will be inherited from the parent. 
+This means it's enough to set the base direction of a screen and every object will inherit it.
 
-The default base direction of screen can be set by `LV_BIDI_BASE_DIR_DEF` in *lv_conf.h* and other objects inherit the base direction from their parent.
+The default base direction for screens can be set by `LV_BIDI_BASE_DIR_DEF` in *lv_conf.h* and other objects inherit the base direction from their parent.
 
-To set an object's base direction use `lv_obj_set_base_dir(obj, base_dir)`.  The possible base direction are:
+To set an object's base direction use `lv_obj_set_base_dir(obj, base_dir)`.  The possible base directions are:
 - `LV_BIDI_DIR_LTR`: Left to Right base direction
 - `LV_BIDI_DIR_RTL`: Right to Left base direction
 - `LV_BIDI_DIR_AUTO`: Auto detect base direction
-- `LV_BIDI_DIR_INHERIT`: Inherit the base direction from the parent (default for non-screen objects)
+- `LV_BIDI_DIR_INHERIT`: Inherit base direction from the parent (or a default value for non-screen objects)
 
 This list summarizes the effect of RTL base direction on objects:
 - Create objects by default on the right
-- `lv_tabview`: displays tabs from right to left
-- `lv_checkbox`: Show the box on the right
-- `lv_btnmatrix`: Show buttons from right to left
-- `lv_list`: Show the icon on the right
-- `lv_dropdown`: Align the options to the right
+- `lv_tabview`: Displays tabs from right to left
+- `lv_checkbox`: Shows the box on the right
+- `lv_btnmatrix`: Shows buttons from right to left
+- `lv_list`: Shows icons on the right
+- `lv_dropdown`: Aligns options to the right
 - The texts in `lv_table`, `lv_btnmatrix`, `lv_keyboard`, `lv_tabview`, `lv_dropdown`, `lv_roller` are "BiDi processed" to be displayed correctly
 
 ### Arabic and Persian support
-There are some special rules to display Arabic and Persian characters: the *form* of the character depends on their position in the text. 
-A different form of the same letter needs to be used if it isolated, start, middle or end position. Besides these some conjunction rules also should be taken into account.
+There are some special rules to display Arabic and Persian characters: the *form* of a character depends on its position in the text. 
+A different form of the same letter needs to be used if is isolated, at start, middle or end positions. Besides these, some conjunction rules should also be taken into account.
 
-LVGL supports to apply these rules if `LV_USE_ARABIC_PERSIAN_CHARS` is enabled.  
+LVGL supports these rules if `LV_USE_ARABIC_PERSIAN_CHARS` is enabled.
 
 However, there some limitations:
-- Only displaying texts is supported (e.g. on labels), text inputs (e.g. text area) don't support this feature.
+- Only displaying text is supported (e.g. on labels), text inputs (e.g. text area) don't support this feature.
 - Static text (i.e. const) is not processed. E.g. texts set by `lv_label_set_text()` will be "Arabic processed" but `lv_lable_set_text_static()` won't.
 - Text get functions (e.g. `lv_label_get_text()`) will return the processed text.
 
 ### Subpixel rendering
 
-Subpixel rendering allows for tripling the horizontal resolution by rendering on Red, Green and Blue channel instead of pixel level. This takes advantage of the position of physical color channels of each pixel, resulting in higher quality letter anti-aliasing. Learn more [here](https://en.wikipedia.org/wiki/Subpixel_rendering).
+Subpixel rendering allows for tripling the horizontal resolution by rendering anti-aliased edges on Red, Green and Blue channels instead of at pixel level granularity. This takes advantage of the position of physical color channels of each pixel, resulting in higher quality letter anti-aliasing. Learn more [here](https://en.wikipedia.org/wiki/Subpixel_rendering).
 
-For subpixel rendering the fonts need to be generated with special settings: 
+For subpixel rendering, the fonts need to be generated with special settings: 
 - In the online converter tick the `Subpixel` box
-- In the command line tool use `--lcd` flag. Note that the generated font needs about 3 times more memory.
+- In the command line tool use `--lcd` flag. Note that the generated font needs about three times more memory.
 
 Subpixel rendering works only if the color channels of the pixels have a horizontal layout. That is the R, G, B channels are next each other and not above each other. 
-The order of color channels also needs to match with the library settings. By default LVGL assumes `RGB` order, however this can be swapped by setting `LV_SUBPX_BGR  1` in *lv_conf.h*.
+The order of color channels also needs to match with the library settings. By default, LVGL assumes `RGB` order, however this can be swapped by setting `LV_SUBPX_BGR  1` in *lv_conf.h*.
 
-### Compress fonts
-The bitmaps of the fonts can be compressed by 
+### Compressed fonts
+The bitmaps of fonts can be compressed by 
 - ticking the `Compressed` check box in the online converter
-- not passing `--no-compress` flag to the offline converter (compression is applied by default) 
+- not passing the `--no-compress` flag to the offline converter (compression is applied by default) 
 
-The compression is more effective with larger fonts and higher bpp. However, it's about 30% slower to render the compressed fonts.
-Therefore it's recommended to compress only the largest fonts of user interface, because
+Compression is more effective with larger fonts and higher bpp. However, it's about 30% slower to render compressed fonts.
+Therefore it's recommended to compress only the largest fonts of a user interface, because
 - they need the most memory 
 - they can be compressed better
-- and probably they are used less frequently then the medium sized fonts, so the performance cost is smaller.
+- and probably they are used less frequently then the medium-sized fonts, so the performance cost is smaller.
 
-## Add new font
+## Add a new font
 
 There are several ways to add a new font to your project:
 1. The simplest method is to use the [Online font converter](https://lvgl.io/tools/fontconverter). Just set the parameters, click the *Convert* button, copy the font to your project and use it. **Be sure to carefully read the steps provided on that site or you will get an error while converting.**
 2. Use the [Offline font converter](https://github.com/lvgl/lv_font_conv). (Requires Node.js to be installed)
-3. If you want to create something like the built-in fonts (Roboto font and symbols) but in different size and/or ranges, you can use the `built_in_font_gen.py` script in `lvgl/scripts/built_in_font` folder.
+3. If you want to create something like the built-in fonts (Montserrat font and symbols) but in a different size and/or ranges, you can use the `built_in_font_gen.py` script in `lvgl/scripts/built_in_font` folder.
 (This requires Python and `lv_font_conv` to be installed)
 
-To declare the font in a file, use `LV_FONT_DECLARE(my_font_name)`.
+To declare a font in a file, use `LV_FONT_DECLARE(my_font_name)`.
 
-To make the fonts globally available (like the builtin fonts), add them to `LV_FONT_CUSTOM_DECLARE` in *lv_conf.h*.
+To make fonts globally available (like the builtin fonts), add them to `LV_FONT_CUSTOM_DECLARE` in *lv_conf.h*.
 
 ## Add new symbols
 The built-in symbols are created from the [FontAwesome](https://fontawesome.com/) font. 
 
-1. Search symbol on [https://fontawesome.com](https://fontawesome.com). For example the [USB symbol](https://fontawesome.com/icons/usb?style=brands). Copy it's Unicode ID which is `0xf287` in this case.
-2. Open the [Online font converter](https://lvgl.io/tools/fontconverter). Add Add [FontAwesome.woff](https://lvgl.io/assets/others/FontAwesome5-Solid+Brands+Regular.woff). . 
+1. Search for a symbol on [https://fontawesome.com](https://fontawesome.com). For example the [USB symbol](https://fontawesome.com/icons/usb?style=brands). Copy its Unicode ID which is `0xf287` in this case.
+2. Open the [Online font converter](https://lvgl.io/tools/fontconverter). Add [FontAwesome.woff](https://lvgl.io/assets/others/FontAwesome5-Solid+Brands+Regular.woff). . 
 3. Set the parameters such as Name, Size, BPP. You'll use this name to declare and use the font in your code.
 4. Add the Unicode ID of the symbol to the range field. E.g.` 0xf287` for the USB symbol. More symbols can be enumerated with `,`.
-5. Convert the font and copy it to your project. Make sure to compile the .c file of your font.
-6. Declare the font using `extern lv_font_t my_font_name;` or simply `LV_FONT_DECLARE(my_font_name);`.
+5. Convert the font and copy the generated source code to your project. Make sure to compile the .c file of your font.
+6. Declare the font using `extern lv_font_t my_font_name;` or simply use `LV_FONT_DECLARE(my_font_name);`.
 
 **Using the symbol**
 1. Convert the Unicode value to UTF8, for example on [this site](http://www.ltg.ed.ac.uk/~richard/utf-8.cgi?input=f287&mode=hex). For `0xf287` the *Hex UTF-8 bytes* are `EF 8A 87`.
-2. Create a `define` from the UTF8 values: `#define MY_USB_SYMBOL "\xEF\x8A\x87"`
+2. Create a `define` string from the UTF8 values: `#define MY_USB_SYMBOL "\xEF\x8A\x87"`
 3. Create a label and set the text. Eg. `lv_label_set_text(label, MY_USB_SYMBOL)`
 
 Note - `lv_label_set_text(label, MY_USB_SYMBOL)` searches for this symbol in the font defined in `style.text.font` properties. To use the symbol you may need to change it. Eg ` style.text.font = my_font_name` 
 
-## Load font at run-time
-`lv_font_load` can be used to load a font from a file. The font to load needs to have a special binary format. (Not TTF or WOFF). 
-Use [lv_font_conv](https://github.com/lvgl/lv_font_conv/) with `--format bin` option to generate an LVGL compatible font file.
+## Load a font at run-time
+`lv_font_load` can be used to load a font from a file. The font needs to have a special binary format. (Not TTF or WOFF). 
+Use [lv_font_conv](https://github.com/lvgl/lv_font_conv/) with the `--format bin` option to generate an LVGL compatible font file.
 
-Note that to load a font [LVGL's filesystem](/overview/file-system) needs to be enabled and a driver needs to be added.
+Note that to load a font [LVGL's filesystem](/overview/file-system) needs to be enabled and a driver must be added.
 
 Example
 ```c
@@ -200,13 +200,12 @@ lv_font_free(my_font);
 
 ## Add a new font engine
 
-LVGL's font interface is designed to be very flexible.
-But even so you don't need to use LVGL's internal font engine: you can add your own.
-For example, use [FreeType](https://www.freetype.org/) to real-time render glyphs from TTF fonts or use an external flash to store the font's bitmap and read them when the library needs them.
+LVGL's font interface is designed to be very flexible but, even so, you can add your own font engine in place of LVGL's internal one.
+For example, you can use [FreeType](https://www.freetype.org/) to real-time render glyphs from TTF fonts or use an external flash to store the font's bitmap and read them when the library needs them.
 
 A ready to use FreeType can be found in [lv_freetype](https://github.com/lvgl/lv_lib_freetype) repository.
 
-To do this a custom `lv_font_t` variable needs to be created:
+To do this, a custom `lv_font_t` variable needs to be created:
 ```c
 /*Describe the properties of a font*/
 lv_font_t my_font;

docs/overview/image.md

@@ -4,15 +4,15 @@
 ```
 # Images
 
-An image can be a file or variable which stores the bitmap itself and some metadata.
+An image can be a file or a variable which stores the bitmap itself and some metadata.
 
 ## Store images
 You can store images in two places
-- as a variable in the internal memory (RAM or ROM)
+- as a variable in internal memory (RAM or ROM)
 - as a file
 
 ### Variables
-The images stored internally in a variable are composed mainly of an `lv_img_dsc_t` structure with the following fields:
+Images stored internally in a variable are composed mainly of an `lv_img_dsc_t` structure with the following fields:
 - **header**
   - *cf* Color format. See [below](#color-format)
   - *w* width in pixels (<= 2048)
@@ -25,22 +25,22 @@ The images stored internally in a variable are composed mainly of an `lv_img_dsc
 These are usually stored within a project as C files. They are linked into the resulting executable like any other constant data.
 
 ### Files
-To deal with files you need to add a *Drive* to LVGL. In short, a *Drive* is a collection of functions (*open*, *read*, *close*, etc.) registered in LVGL to make file operations.
+To deal with files you need to add a storage *Drive* to LVGL. In short, a *Drive* is a collection of functions (*open*, *read*, *close*, etc.) registered in LVGL to make file operations.
 You can add an interface to a standard file system (FAT32 on SD card) or you create your simple file system to read data from an SPI Flash memory.
 In every case, a *Drive* is just an abstraction to read and/or write data to memory.
 See the [File system](/overview/file-system) section to learn more.
 
-Images stored as files are not linked into the resulting executable, and must be read to RAM before being drawn. As a result, they are not as resource-friendly as variable images. However, they are easier to replace without needing to recompile the main program.
+Images stored as files are not linked into the resulting executable, and must be read into RAM before being drawn. As a result, they are not as resource-friendly as images linked at compile time. However, they are easier to replace without needing to rebuild the main program.
 
 ## Color formats
 Various built-in color formats are supported:
 - **LV_IMG_CF_TRUE_COLOR** Simply stores the RGB colors (in whatever color depth LVGL is configured for).
 - **LV_IMG_CF_TRUE_COLOR_ALPHA** Like `LV_IMG_CF_TRUE_COLOR` but it also adds an alpha (transparency) byte for every pixel.
-- **LV_IMG_CF_TRUE_COLOR_CHROMA_KEYED** Like `LV_IMG_CF_TRUE_COLOR` but if a pixel has `LV_COLOR_TRANSP` (set in *lv_conf.h*) color the pixel will be transparent.
+- **LV_IMG_CF_TRUE_COLOR_CHROMA_KEYED** Like `LV_IMG_CF_TRUE_COLOR` but if a pixel has the `LV_COLOR_TRANSP` color (set in *lv_conf.h*) it will be transparent.
 - **LV_IMG_CF_INDEXED_1/2/4/8BIT** Uses a palette with 2, 4, 16 or 256 colors and stores each pixel in 1, 2, 4 or 8 bits.
-- **LV_IMG_CF_ALPHA_1/2/4/8BIT** **Only stores the Alpha value on 1, 2, 4 or 8 bits.** The pixels take the color of `style.image.color` and the set opacity. The source image has to be an alpha channel. This is ideal for bitmaps similar to fonts (where the whole image is one color but you'd like to be able to change it).
+- **LV_IMG_CF_ALPHA_1/2/4/8BIT** **Only stores the Alpha value with 1, 2, 4 or 8 bits.** The pixels take the color of `style.img_recolor` and the set opacity. The source image has to be an alpha channel. This is ideal for bitmaps similar to fonts where the whole image is one color that can be altered.
 
-The bytes of the `LV_IMG_CF_TRUE_COLOR` images are stored in the following order.
+The bytes of `LV_IMG_CF_TRUE_COLOR` images are stored in the following order.
 
 For 32-bit color depth:
 - Byte 0: Blue
@@ -60,8 +60,8 @@ For 8-bit color depth:
 
 You can store images in a *Raw* format to indicate that it's not encoded with one of the built-in color formats and an external [Image decoder](#image-decoder) needs to be used to decode the image.
 - **LV_IMG_CF_RAW** Indicates a basic raw image (e.g. a PNG or JPG image).
-- **LV_IMG_CF_RAW_ALPHA** Indicates that the image has alpha and an alpha byte is added for every pixel.
-- **LV_IMG_CF_RAW_CHROME_KEYED** Indicates that the image is chroma-keyed as described in `LV_IMG_CF_TRUE_COLOR_CHROMA_KEYED` above.
+- **LV_IMG_CF_RAW_ALPHA** Indicates that an image has alpha and an alpha byte is added for every pixel.
+- **LV_IMG_CF_RAW_CHROMA_KEYED** Indicates that an image is chroma-keyed as described in `LV_IMG_CF_TRUE_COLOR_CHROMA_KEYED` above.
 
 
 ## Add and use images
@@ -73,7 +73,7 @@ You can add images to LVGL in two ways:
 ### Online converter
 The online Image converter is available here: https://lvgl.io/tools/imageconverter
 
-Adding an image to LVGL via online converter is easy.
+Adding an image to LVGL via the online converter is easy.
 
 1. You need to select a *BMP*, *PNG* or *JPG* image first.
 2. Give the image a name that will be used within LVGL.
@@ -81,9 +81,9 @@ Adding an image to LVGL via online converter is easy.
 4. Select the type of image you want. Choosing a binary will generate a `.bin` file that must be stored separately and read using the [file support](#files). Choosing a variable will generate a standard C file that can be linked into your project.
 5. Hit the *Convert* button. Once the conversion is finished, your browser will automatically download the resulting file.
 
-In the converter C arrays (variables), the bitmaps for all the color depths (1, 8, 16 or 32) are included in the C file, but only the color depth that matches `LV_COLOR_DEPTH` in *lv_conf.h* will actually be linked into the resulting executable.
+In the generated C arrays (variables), bitmaps for all the color depths (1, 8, 16 or 32) are included in the C file, but only the color depth that matches `LV_COLOR_DEPTH` in *lv_conf.h* will actually be linked into the resulting executable.
 
-In case of binary files, you need to specify the color format you want:
+In the case of binary files, you need to specify the color format you want:
 - RGB332 for 8-bit color depth
 - RGB565 for 16-bit color depth
 - RGB565 Swap for 16-bit color depth (two bytes are swapped)
@@ -132,11 +132,11 @@ As you can see in the [Color formats](#color-formats) section, LVGL supports sev
 
 To handle non-built-in image formats, you need to use external libraries and attach them to LVGL via the *Image decoder* interface.
 
-The image decoder consists of 4 callbacks:
+An image decoder consists of 4 callbacks:
 - **info** get some basic info about the image (width, height and color format).
-- **open** open the image: either store the decoded image or set it to `NULL` to indicate the image can be read line-by-line.
-- **read** if *open* didn't fully open the image this function should give some decoded data (max 1 line) from a given position.
-- **close** close the opened image, free the allocated resources.
+- **open** open an image: either store a decoded image or set it to `NULL` to indicate the image can be read line-by-line.
+- **read** if *open* didn't fully open an image this function should give some decoded data (max 1 line) from a given position.
+- **close** close an opened image, free the allocated resources.
 
 You can add any number of image decoders. When an image needs to be drawn, the library will try all the registered image decoders until it finds one which can open the image, i.e. one which knows that format.
 
@@ -144,15 +144,15 @@ The `LV_IMG_CF_TRUE_COLOR_...`, `LV_IMG_INDEXED_...` and `LV_IMG_ALPHA_...` form
 
 ### Custom image formats
 
-The easiest way to create a custom image is to use the online image converter and set `Raw`, `Raw with alpha` or `Raw with chroma-keyed` format. It will just take every byte of the binary file you uploaded and write it as the image "bitmap". You then need to attach an image decoder that will parse that bitmap and generate the real, renderable bitmap.
+The easiest way to create a custom image is to use the online image converter and select `Raw`, `Raw with alpha` or `Raw with chroma-keyed` format. It will just take every byte of the binary file you uploaded and write it as an image "bitmap". You then need to attach an image decoder that will parse that bitmap and generate the real, renderable bitmap.
 
-`header.cf` will be `LV_IMG_CF_RAW`, `LV_IMG_CF_RAW_ALPHA` or `LV_IMG_CF_RAW_CHROME_KEYED` accordingly. You should choose the correct format according to your needs: fully opaque image, use alpha channel or use chroma keying.
+`header.cf` will be `LV_IMG_CF_RAW`, `LV_IMG_CF_RAW_ALPHA` or `LV_IMG_CF_RAW_CHROMA_KEYED` accordingly. You should choose the correct format according to your needs: a fully opaque image, using an alpha channel or using a chroma key.
 
-After decoding, the *raw* formats are considered *True color* by the library. In other words, the image decoder must decode the *Raw* images to *True color* according to the format described in [#color-formats](Color formats) section.
+After decoding, the *raw* formats are considered *True color* by the library. In other words, the image decoder must decode the *Raw* images to *True color* according to the format described in the [Color formats](#color-formats) section.
 
-If you want to create a custom image, you should use `LV_IMG_CF_USER_ENCODED_0..7` color formats. However, the library can draw the images only in *True color* format (or *Raw* but finally it's supposed to be in *True color* format).
-The `LV_IMG_CF_USER_ENCODED_...` formats are not known by the library and therefore they should be decoded to one of the known formats from [#color-formats](Color formats) section.
-It's possible to decode the image to a non-true color format first (for example: `LV_IMG_INDEXED_4BITS`) and then call the built-in decoder functions to convert it to *True color*.
+If you want to create a custom image, you should use `LV_IMG_CF_USER_ENCODED_0..7` color formats. However, the library can draw images only in *True color* format (or *Raw* but ultimately it will be in *True color* format).
+The `LV_IMG_CF_USER_ENCODED_...` formats are not known by the library and therefore they should be decoded to one of the known formats from the [Color formats](#color-formats) section.
+It's possible to decode an image to a non-true color format first (for example: `LV_IMG_INDEXED_4BITS`) and then call the built-in decoder functions to convert it to *True color*.
 
 With *User encoded* formats, the color format in the open function (`dsc->header.cf`) should be changed according to the new format.
 
@@ -161,7 +161,7 @@ With *User encoded* formats, the color format in the open function (`dsc->header
 
 Here's an example of getting LVGL to work with PNG images.
 
-First, you need to create a new image decoder and set some functions to open/close the PNG files. It should looks like this:
+First, you need to create a new image decoder and set some functions to open/close the PNG files. It should look like this:
 
 ```c
 /*Create a new decoder and register functions */
@@ -256,22 +256,26 @@ So in summary:
 - In `decoder_open`, you should try to open the image source pointed by `dsc->src`. Its type is already in `dsc->src_type == LV_IMG_SRC_FILE/VARIABLE`.
 If this format/type is not supported by the decoder, return `LV_RES_INV`.
 However, if you can open the image, a pointer to the decoded *True color* image should be set in `dsc->img_data`.
-If the format is known but you don't want to decode the entire image (e.g. no memory for it) set `dsc->img_data = NULL` to call `read_line` to get the pixels.
-- In `decoder_close` you should free all the allocated resources.
+If the format is known, but you don't want to decode the entire image (e.g. no memory for it), set `dsc->img_data = NULL` and use `read_line` to get the pixel data.
+- In `decoder_close` you should free all allocated resources.
 - `decoder_read` is optional. Decoding the whole image requires extra memory and some computational overhead.
-However, if can decode one line of the image without decoding the whole image, you can save memory and time.
+However, it can decode one line of the image without decoding the whole image, you can save memory and time.
 To indicate that the *line read* function should be used, set `dsc->img_data = NULL` in the open function.
 
 
 ### Manually use an image decoder
 
-LVGL will use the registered image decoder automatically if you try and draw a raw image (i.e. using the `lv_img` object) but you can use them manually too. Create a `lv_img_decoder_dsc_t` variable to describe the decoding session and call `lv_img_decoder_open()`.
+LVGL will use registered image decoders automatically if you try and draw a raw image (i.e. using the `lv_img` object) but you can use them manually too. Create an `lv_img_decoder_dsc_t` variable to describe the decoding session and call `lv_img_decoder_open()`.
+
+The `color` paramter is used only with `LV_IMG_CF_ALPHA_1/2/4/8BIT` images to tell color of the image. 
+`frame_id` can be used if the image to open is an animation. 
+
 
 ```c
 
 lv_res_t res;
 lv_img_decoder_dsc_t dsc;
-res = lv_img_decoder_open(&dsc, &my_img_dsc, LV_COLOR_WHITE);
+res = lv_img_decoder_open(&dsc, &my_img_dsc, color, frame_id);
 
 if(res == LV_RES_OK) {
   /*Do something with `dsc->img_data`*/
@@ -287,32 +291,32 @@ Continuously decoding a PNG image or loading images from a slow external memory
 
 Therefore, LVGL caches a given number of images. Caching means some images will be left open, hence LVGL can quickly access them from `dsc->img_data` instead of needing to decode them again.
 
-Of course, caching images is resource-intensive as it uses more RAM (to store the decoded image). LVGL tries to optimize the process as much as possible (see below), but you will still need to evaluate if this would be beneficial for your platform or not. If you have a deeply embedded target which decodes small images from a relatively fast storage medium, image caching may not be worth it.
+Of course, caching images is resource intensive as it uses more RAM to store the decoded image. LVGL tries to optimize the process as much as possible (see below), but you will still need to evaluate if this would be beneficial for your platform or not. Image caching may not be worth it if you have a deeply embedded target which decodes small images from a relatively fast storage medium.
 
 ### Cache size
-The number of cache entries can be defined in `LV_IMG_CACHE_DEF_SIZE` in *lv_conf.h*. The default value is 1 so only the most recently used image will be left open.
+The number of cache entries can be defined with `LV_IMG_CACHE_DEF_SIZE` in *lv_conf.h*. The default value is 1 so only the most recently used image will be left open.
 
 The size of the cache can be changed at run-time with `lv_img_cache_set_size(entry_num)`.
 
 ### Value of images
-When you use more images than cache entries, LVGL can't cache all of the images. Instead, the library will close one of the cached images (to free space).
+When you use more images than cache entries, LVGL can't cache all of the images. Instead, the library will close one of the cached images to free space.
 
 To decide which image to close, LVGL uses a measurement it previously made of how long it took to open the image. Cache entries that hold slower-to-open images are considered more valuable and are kept in the cache as long as possible.
 
-If you want or need to override LVGL's measurement, you can manually set the *time to open* value in the decoder open function in `dsc->time_to_open = time_ms` to give a higher or lower value. (Leave it unchanged to let LVGL set it.)
+If you want or need to override LVGL's measurement, you can manually set the *time to open* value in the decoder open function in `dsc->time_to_open = time_ms` to give a higher or lower value. (Leave it unchanged to let LVGL control it.)
 
-Every cache entry has a *"life"* value. Every time an image opening happens through the cache, the *life* value of all entries is decreased to make them older.
+Every cache entry has a *"life"* value. Every time an image is opened through the cache, the *life* value of all entries is decreased to make them older.
 When a cached image is used, its *life* value is increased by the *time to open* value to make it more alive.
 
-If there is no more space in the cache, the entry with the smallest life value will be closed.
+If there is no more space in the cache, the entry with the lowest life value will be closed.
 
 ### Memory usage
-Note that the cached image might continuously consume memory. For example, if 3 PNG images are cached, they will consume memory while they are open.
+Note that a cached image might continuously consume memory. For example, if three PNG images are cached, they will consume memory while they are open.
 
 Therefore, it's the user's responsibility to be sure there is enough RAM to cache even the largest images at the same time.
 
 ### Clean the cache
-Let's say you have loaded a PNG image into a `lv_img_dsc_t my_png` variable and use it in an `lv_img` object. If the image is already cached and you then change the underlying PNG file, you need to notify LVGL to cache the image again. Otherwise, there is no easy way of detecting that the underlying file changed and LVGL will still draw the old image.
+Let's say you have loaded a PNG image into a `lv_img_dsc_t my_png` variable and use it in an `lv_img` object. If the image is already cached and you then change the underlying PNG file, you need to notify LVGL to cache the image again. Otherwise, there is no easy way of detecting that the underlying file changed and LVGL will still draw the old image from cache.
 
 To do this, use `lv_img_cache_invalidate_src(&my_png)`. If `NULL` is passed as a parameter, the whole cache will be cleaned.
 

docs/overview/indev.md

@@ -23,27 +23,27 @@ Pointer input devices (like a mouse) can have a cursor.
 lv_indev_t * mouse_indev = lv_indev_drv_register(&indev_drv);
 
 LV_IMG_DECLARE(mouse_cursor_icon);                          /*Declare the image file.*/
-lv_obj_t * cursor_obj =  lv_img_create(lv_scr_act(), NULL); /*Create an image object for the cursor */
+lv_obj_t * cursor_obj =  lv_img_create(lv_scr_act());       /*Create an image object for the cursor */
 lv_img_set_src(cursor_obj, &mouse_cursor_icon);             /*Set the image source*/
 lv_indev_set_cursor(mouse_indev, cursor_obj);               /*Connect the image  object to the driver*/
 
 ```
 
-Note that the cursor object should have `lv_obj_set_click(cursor_obj, false)`.
+Note that the cursor object should have `lv_obj_clear_flag(cursor_obj, LV_OBJ_FLAG_CLICKABLE)`.
 For images, *clicking* is disabled by default.
 
 ## Keypad and encoder
 
-You can fully control the user interface without touchpad or mouse using a keypad or encoder(s). It works similar to the *TAB* key on the PC to select the element in an application or a web page.
+You can fully control the user interface without a touchpad or mouse by using a keypad or encoder(s). It works similar to the *TAB* key on the PC to select an element in an application or a web page.
 
 ### Groups
 
-The objects, you want to control with keypad or encoder, needs to be added to a *Group*.
-In every group, there is exactly one focused object which receives the pressed keys or the encoder actions.
+Objects you want to control with a keypad or encoder need to be added to a *Group*.
+In every group there is exactly one focused object which receives the pressed keys or the encoder actions.
 For example, if a [Text area](/widgets/core/textarea) is focused and you press some letter on a keyboard, the keys will be sent and inserted into the text area.
 Similarly, if a [Slider](/widgets/core/slider) is focused and you press the left or right arrows, the slider's value will be changed.
 
-You need to associate an input device with a group. An input device can send the keys to only one group but, a group can receive data from more than one input device too.
+You need to associate an input device with a group. An input device can send key events to only one group but a group can receive data from more than one input device.
 
 To create a group use `lv_group_t * g = lv_group_create()` and to add an object to the group use `lv_group_add_obj(g, obj)`.
 
@@ -56,45 +56,45 @@ There are some predefined keys which have special meaning:
 - **LV_KEY_ENTER** Triggers `LV_EVENT_PRESSED/CLICKED/LONG_PRESSED` etc. events
 - **LV_KEY_UP** Increase value or move upwards
 - **LV_KEY_DOWN** Decrease value or move downwards
-- **LV_KEY_RIGHT** Increase value or move the the right
-- **LV_KEY_LEFT** Decrease value or move the the left
+- **LV_KEY_RIGHT** Increase value or move to the right
+- **LV_KEY_LEFT** Decrease value or move to the left
 - **LV_KEY_ESC**  Close or exit (E.g. close a [Drop down list](/widgets/core/dropdown))
 - **LV_KEY_DEL**  Delete (E.g. a character on the right in a [Text area](/widgets/core/textarea))
 - **LV_KEY_BACKSPACE** Delete a character on the left (E.g. in a [Text area](/widgets/core/textarea))
 - **LV_KEY_HOME** Go to the beginning/top (E.g. in a [Text area](/widgets/core/textarea))
-- **LV_KEY_END** Go to the end (E.g. in a [Text area](/widgets/core/textarea)))
+- **LV_KEY_END** Go to the end (E.g. in a [Text area](/widgets/core/textarea))
 
 The most important special keys are `LV_KEY_NEXT/PREV`, `LV_KEY_ENTER` and `LV_KEY_UP/DOWN/LEFT/RIGHT`.
-In your `read_cb` function, you should translate some of your keys to these special keys to navigate in the group and interact with the selected object.
+In your `read_cb` function, you should translate some of your keys to these special keys to support navigation in a group and interact with selected objects.
 
-Usually, it's enough to use only `LV_KEY_LEFT/RIGHT` because most of the objects can be fully controlled with them.
+Usually, it's enough to use only `LV_KEY_LEFT/RIGHT` because most objects can be fully controlled with them.
 
-With an encoder, you should use only `LV_KEY_LEFT`, `LV_KEY_RIGHT`, and `LV_KEY_ENTER`.
+With an encoder you should use only `LV_KEY_LEFT`, `LV_KEY_RIGHT`, and `LV_KEY_ENTER`.
 
 #### Edit and navigate mode
 
-Since a keypad has plenty of keys, it's easy to navigate between the objects and edit them using the keypad. But the encoders have a limited number of "keys" and hence it is difficult to navigate using the default options. *Navigate* and *Edit* are created to avoid this problem with the encoders.
+Since a keypad has plenty of keys, it's easy to navigate between objects and edit them using the keypad. But encoders have a limited number of "keys" and hence it is difficult to navigate using the default options. *Navigate* and *Edit* modes are used to avoid this problem with encoders.
 
-In *Navigate* mode, the encoders `LV_KEY_LEFT/RIGHT` is translated to `LV_KEY_NEXT/PREV`. Therefore the next or previous object will be selected by turning the encoder.
+In *Navigate* mode, an encoder's `LV_KEY_LEFT/RIGHT` is translated to `LV_KEY_NEXT/PREV`. Therefore, the next or previous object will be selected by turning the encoder.
 Pressing `LV_KEY_ENTER` will change to *Edit* mode.
 
-In *Edit* mode, `LV_KEY_NEXT/PREV` is usually used to edit the object.
+In *Edit* mode, `LV_KEY_NEXT/PREV` is usually used to modify an object.
 Depending on the object's type, a short or long press of `LV_KEY_ENTER` changes back to *Navigate* mode.
-Usually, an object which can not be pressed (like a [Slider](/widgets/core/slider)) leaves *Edit* mode on short click. But with objects where short click has meaning (e.g. [Button](/widgets/core/btn)), a long press is required.
+Usually, an object which cannot be pressed (like a [Slider](/widgets/core/slider)) leaves *Edit* mode upon a short click. But with objects where a short click has meaning (e.g. [Button](/widgets/core/btn)), a long press is required.
 
 #### Default group
-Interactive widgets - such as buttons, checkboxes, sliders, etc - can be automatically added to a default group.
+Interactive widgets - such as buttons, checkboxes, sliders, etc. - can be automatically added to a default group.
 Just create a group with `lv_group_t * g = lv_group_create();` and set the default group with `lv_group_set_default(g);`
 
-Don't forget to assign the input device(s) to the default group with ` lv_indev_set_group(my_indev, g);`.
+Don't forget to assign one or more input devices to the default group with ` lv_indev_set_group(my_indev, g);`.
 
 ### Styling
 
-If an object is focused either by clicking it via touchpad, or focused via an encoder or keypad it goes to `LV_STATE_FOCUSED`. Hence focused styles will be applied on it. 
+If an object is focused either by clicking it via touchpad or focused via an encoder or keypad it goes to the `LV_STATE_FOCUSED` state. Hence, focused styles will be applied to it. 
 
-If the object goes to edit mode it goes to `LV_STATE_FOCUSED | LV_STATE_EDITED` state so these style properties will be shown. 
+If an object switches to edit mode it enters the `LV_STATE_FOCUSED | LV_STATE_EDITED` states so these style properties will be shown. 
 
-For a more detaild description read the [Style](https://docs.lvgl.io/v7/en/html/overview/style.html) section.
+For a more detailed description read the [Style](https://docs.lvgl.io/v7/en/html/overview/style.html) section.
 
 ## API
 

docs/overview/layer.md

@@ -9,10 +9,10 @@
 
 By default, LVGL draws new objects on top of old objects.
 
-For example, assume we added a button to a parent object named button1 and then another button named button2. Then button1 (with its child object(s)) will be in the background and can be covered by button2 and its children.
+For example, assume we add a button to a parent object named button1 and then another button named button2. Then button1 (along with its child object(s)) will be in the background and can be covered by button2 and its children.
 
 
-![](/misc/layers.png "Creating graphical objects in Littlev Graphics Library")  
+![](/misc/layers.png "Creating graphical objects in LVGL")  
 
 ```c
 /*Create a screen*/
@@ -21,7 +21,7 @@ lv_scr_load(scr);          /*Load the screen*/
 
 /*Create 2 buttons*/
 lv_obj_t * btn1 = lv_btn_create(scr, NULL);         /*Create a button on the screen*/
-lv_btn_set_fit(btn1, true, true);                   /*Enable to automatically set the size according to the content*/
+lv_btn_set_fit(btn1, true, true);                   /*Enable automatically setting the size according to content*/
 lv_obj_set_pos(btn1, 60, 40);              	   /*Set the position of the button*/
 
 lv_obj_t * btn2 = lv_btn_create(scr, btn1);         /*Copy the first button*/
@@ -40,21 +40,21 @@ lv_obj_del(label2);
 
 ## Bring to the foreground
 
-There are several ways to bring an object to the foreground:
-- Use `lv_obj_set_top(obj, true)`. If `obj` or any of its children is clicked, then LVGL will automatically bring the object to the foreground.
-It works similarly to a typical GUI on a PC. When a window in the background is clicked, it will come to the foreground automatically.
-- Use `lv_obj_move_foreground(obj)` to explicitly tell the library to bring an object to the foreground. Similarly, use `lv_obj_move_background(obj)` to move to the background.
-- When `lv_obj_set_parent(obj, new_parent)` is used, `obj` will be on the foreground on the `new_parent`.
+There are four explicit ways to bring an object to the foreground:
+- Use `lv_obj_move_foreground(obj)` to bring an object to the foreground. Similarly, use `lv_obj_move_background(obj)` to move it to the background.
+- Use `lv_obj_move_up(obj)` to move an object one position up in the hierarchy, Similarly, use `lv_obj_move_down(obj)` to move an object one position down in the hierarchy. 
+- Use `lv_obj_swap(obj1, obj2)` to swap the relative layer position of two objects.
+- When `lv_obj_set_parent(obj, new_parent)` is used, `obj` will be on the foreground of the `new_parent`.
 
 
 ## Top and sys layers
 
-LVGL uses two special layers named as `layer_top` and `layer_sys`.
+LVGL uses two special layers named `layer_top` and `layer_sys`.
 Both are visible and common on all screens of a display. **They are not, however, shared among multiple physical displays.** The `layer_top` is always on top of the default screen (`lv_scr_act()`), and `layer_sys` is on top of `layer_top`.
 
-The `layer_top` can be used by the user to create some content visible everywhere. For example, a menu bar, a pop-up, etc. If the `click` attribute is enabled, then `layer_top` will absorb all user click and acts as a modal.
+The `layer_top` can be used by the user to create some content visible everywhere. For example, a menu bar, a pop-up, etc. If the `click` attribute is enabled, then `layer_top` will absorb all user clicks and acts as a modal.
 ```c
-lv_obj_set_click(lv_layer_top(), true);
+lv_obj_add_flag(lv_layer_top(), LV_OBJ_FLAG_CLICKABLE);
 ```
 
-The `layer_sys` is also used for similar purposes on LVGL. For example, it places the mouse cursor above all layers to be sure it's always visible.
+The `layer_sys` is also used for similar purposes in LVGL. For example, it places the mouse cursor above all layers to be sure it's always visible.

docs/overview/object.md

@@ -54,12 +54,12 @@ The API of the widgets is described in their [Documentation](/widgets/index) but
 ### Parent-child structure
 
 A parent object can be considered as the container of its children. Every object has exactly one parent object (except screens), but a parent can have any number of children.
-There is no limitation for the type of the parent but, there are typical parent (e.g. button) and typical child (e.g. label) objects.
+There is no limitation for the type of the parent but there are objects which are typically a parent (e.g. button) or a child (e.g. label).
 
 ### Moving together
 
-If the position of the parent changes the children will move with the parent.
-Therefore all positions are relative to the parent.
+If the position of a parent changes, the children will move along with it.
+Therefore, all positions are relative to the parent.
 
 ![](/misc/par_child1.png "Objects are moving together 1")
 
@@ -83,7 +83,7 @@ lv_obj_set_pos(parent, 50, 50);	/*Move the parent. The child will move with it.*
 
 ### Visibility only on the parent
 
-If a child is partially or fully out of its parent then the parts outside will not be visible.
+If a child is partially or fully outside of its parent then the parts outside will not be visible.
 
 ![](/misc/par_child3.png "A graphical object is visible on its parent")  
 
@@ -93,7 +93,7 @@ lv_obj_set_x(obj1, -30);	/*Move the child a little bit off the parent*/
 
 ### Create and delete objects
 
-In LVGL objects can be created and deleted dynamically in run time. It means only the currently created (existing) objects consume RAM.
+In LVGL, objects can be created and deleted dynamically at run time. It means only the currently created (existing) objects consume RAM.
 
 This allows for the creation of a screen just when a button is clicked to open it, and for deletion of screens when a new screen is loaded.
 
@@ -101,10 +101,10 @@ UIs can be created based on the current environment of the device. For example o
  
 Every widget has its own **create** function with a prototype like this:
 ```c
-lv_obj_t * lv_<widget>_create(lv_obj_t * parent, <other paramaters if any>);
+lv_obj_t * lv_<widget>_create(lv_obj_t * parent, <other parameters if any>);
 ```
 
-In most of the cases the create functions have only a *parent* parameter that tells on which object create the new widget.
+Typically, the create functions only have a *parent* parameter telling them on which object to create the new widget.
 
 The return value is a pointer to the created object with `lv_obj_t *` type.
 
@@ -116,11 +116,13 @@ void lv_obj_del(lv_obj_t * obj);
 ```
 
 `lv_obj_del` will delete the object immediately.
-If for any reason you can't delete the object immediately you can use `lv_obj_del_async(obj)` that will perform the deletion on the next call of `lv_timer_handler()`.
+If for any reason you can't delete the object immediately you can use `lv_obj_del_async(obj)` which will perform the deletion on the next call of `lv_timer_handler()`.
 This is useful e.g. if you want to delete the parent of an object in the child's `LV_EVENT_DELETE` handler.
 
 You can remove all the children of an object (but not the object itself) using `lv_obj_clean(obj)`.
 
+You can use `lv_obj_del_delayed(obj, 1000)` to delete an object after some time. The delay is expressed in milliseconds. 
+
 
 ## Screens
 
@@ -146,8 +148,8 @@ There are two automatically generated layers:
 - top layer
 - system layer
 
-They are independent of the screens and they will be shown on every screen. The *top layer* is above every object on the screen and the *system layer* is above the *top layer* too.
-You can add any pop-up windows to the *top layer* freely. But, the *system layer* is restricted to system-level things (e.g. mouse cursor will be placed here in `lv_indev_set_cursor()`).
+They are independent of the screens and they will be shown on every screen. The *top layer* is above every object on the screen and the *system layer* is above the *top layer*.
+You can add any pop-up windows to the *top layer* freely. But, the *system layer* is restricted to system-level things (e.g. mouse cursor will be placed there with `lv_indev_set_cursor()`).
 
 The `lv_layer_top()` and `lv_layer_sys()` functions return pointers to the top and system layers respectively.
 
@@ -156,19 +158,19 @@ Read the [Layer overview](/overview/layer) section to learn more about layers.
 
 #### Load screen with animation
 
-A new screen can be loaded with animation too using `lv_scr_load_anim(scr, transition_type, time, delay, auto_del)`. The following transition types exist:
-- `LV_SCR_LOAD_ANIM_NONE`: switch immediately after `delay` milliseconds
-- `LV_SCR_LOAD_ANIM_OVER_LEFT/RIGHT/TOP/BOTTOM` move the new screen over the current towards the given direction
-- `LV_SCR_LOAD_ANIM_MOVE_LEFT/RIGHT/TOP/BOTTOM` move both the current and new screens towards the given direction
-- `LV_SCR_LOAD_ANIM_FADE_ON` fade the new screen over the old screen
+A new screen can be loaded with animation by using `lv_scr_load_anim(scr, transition_type, time, delay, auto_del)`. The following transition types exist:
+- `LV_SCR_LOAD_ANIM_NONE` Switch immediately after `delay` milliseconds
+- `LV_SCR_LOAD_ANIM_OVER_LEFT/RIGHT/TOP/BOTTOM` Move the new screen over the current towards the given direction
+- `LV_SCR_LOAD_ANIM_MOVE_LEFT/RIGHT/TOP/BOTTOM` Move both the current and new screens towards the given direction
+- `LV_SCR_LOAD_ANIM_FADE_ON` Fade the new screen over the old screen
 
 Setting `auto_del` to `true` will automatically delete the old screen when the animation is finished.
 
-The new screen will become active (returned by `lv_scr_act()`) when the animations starts after `delay` time.
+The new screen will become active (returned by `lv_scr_act()`) when the animation starts after `delay` time.
 
 ### Handling multiple displays
 Screens are created on the currently selected *default display*.
-The *default display* is the last registered display with `lv_disp_drv_register` or you can explicitly select a new default display using `lv_disp_set_default(disp)`.
+The *default display* is the last registered display with `lv_disp_drv_register`. You can also explicitly select a new default display using `lv_disp_set_default(disp)`.
 
 `lv_scr_act()`, `lv_scr_load()` and `lv_scr_load_anim()` operate on the default screen.
 
@@ -176,22 +178,22 @@ Visit [Multi-display support](/overview/display) to learn more.
 
 ## Parts
 
-The widgets are built from multiple parts. For example a [Base object](/widgets/obj) uses the main and scrollbar parts but a [Slider](/widgets/core/slider) uses the main, the indicator and the knob parts. 
-Parts are similar to *pseudo elements* in CSS.
+The widgets are built from multiple parts. For example a [Base object](/widgets/obj) uses the main and scrollbar parts but a [Slider](/widgets/core/slider) uses the main, indicator and knob parts. 
+Parts are similar to *pseudo-elements* in CSS.
 
 The following predefined parts exist in LVGL:
-- `LV_PART_MAIN` A background like rectangle*/``
+- `LV_PART_MAIN` A background like rectangle
 - `LV_PART_SCROLLBAR`  The scrollbar(s)
 - `LV_PART_INDICATOR` Indicator, e.g. for slider, bar, switch, or the tick box of the checkbox
-- `LV_PART_KNOB` Like a handle to grab to adjust the value*/
+- `LV_PART_KNOB` Like a handle to grab to adjust the value
 - `LV_PART_SELECTED` Indicate the currently selected option or section
-- `LV_PART_ITEMS` Used if the widget has multiple similar elements (e.g. tabel cells)*/
+- `LV_PART_ITEMS` Used if the widget has multiple similar elements (e.g. table cells)
 - `LV_PART_TICKS` Ticks on scales e.g. for a chart or meter
 - `LV_PART_CURSOR` Mark a specific place e.g. text area's or chart's cursor
 - `LV_PART_CUSTOM_FIRST` Custom parts can be added from here.
 
-The main purpose of parts to allow styling the "components" of the widgets. 
-Therefore the parts are described in more detail in the [Style overview](/overview/style) section.
+The main purpose of parts is to allow styling the "components" of the widgets. 
+They are described in more detail in the [Style overview](/overview/style) section.
 
 ## States
 The object can be in a combination of the following states:
@@ -209,10 +211,12 @@ The object can be in a combination of the following states:
 - `LV_STATE_USER_3` Custom state
 - `LV_STATE_USER_4` Custom state
 
-The states are usually automatically changed by the library as the user presses, releases, focuses etc an object. 
+The states are usually automatically changed by the library as the userinteracts qith an object (presses, releases, focuses, etc.). 
 However, the states can be changed manually too. 
 To set or clear given state (but leave the other states untouched) use `lv_obj_add/clear_state(obj, LV_STATE_...)`
-In both cases ORed state values can be used as well. E.g. `lv_obj_add_state(obj, part, LV_STATE_PRESSED | LV_PRESSED_CHECKED)`.
+In both cases OR-ed state values can be used as well. E.g. `lv_obj_add_state(obj, part, LV_STATE_PRESSED | LV_PRESSED_CHECKED)`.
 
 To learn more about the states read the related section of the [Style overview](/overview/style).
 
+## Snapshot
+A snapshot image can be generated for an object together with its children. Check details in [Snapshot](/others/snapshot).

docs/overview/scroll.md

@@ -5,26 +5,26 @@
 # Scroll
 
 ## Overview
-In LVGL scrolling works very intuitively: if an object is out of its parent content area (the size without paddings), the parent becomes scrollable and scrollbar(s) will appear. That's it.
+In LVGL scrolling works very intuitively: if an object is outside of its parent content area (the size without padding), the parent becomes scrollable and scrollbar(s) will appear. That's it.
 
 Any object can be scrollable including `lv_obj_t`, `lv_img`, `lv_btn`, `lv_meter`, etc
 
-The object can either be scrolled either horizontally or vertically in one stroke; diagonal scrolling is not possible.
+The object can either be scrolled horizontally or vertically in one stroke; diagonal scrolling is not possible.
 
 ### Scrollbar
  
 #### Mode
-The scrollbars are displayed according to the set `mode`. The following `mode`s exist:
+Scrollbars are displayed according to a configured `mode`. The following `mode`s exist:
 - `LV_SCROLLBAR_MODE_OFF`  Never show the scrollbars
 - `LV_SCROLLBAR_MODE_ON`  Always show the scrollbars
-- `LV_SCROLLBAR_MODE_ACTIVE` Show scroll bars while object is being scrolled
+- `LV_SCROLLBAR_MODE_ACTIVE` Show scroll bars while a object is being scrolled
 - `LV_SCROLLBAR_MODE_AUTO`  Show scroll bars when the content is large enough to be scrolled
 
-`lv_obj_set_scrollbar_mode(obj, LV_SCROLLBAR_MODE_...)` set the scrollbar mode on an object.
+`lv_obj_set_scrollbar_mode(obj, LV_SCROLLBAR_MODE_...)` sets the scrollbar mode on an object.
 
 
 #### Styling
-The scrollbars have their own dedicated part, called `LV_PART_SCROLLBAR`. For example a scrollbar can turned to red like this:
+The scrollbars have their own dedicated part, called `LV_PART_SCROLLBAR`. For example a scrollbar can turn to red like this:
 ```c
 static lv_style_t style_red;
 lv_style_init(&style_red);
@@ -35,18 +35,22 @@ lv_style_set_bg_color(&style_red, lv_color_red());
 lv_obj_add_style(obj, &style_red, LV_PART_SCROLLBAR);
 ```
 
-The object goes to `LV_STATE_SCROLLED` state while it's being scrolled. It allows adding different style to the scrollbar or the object itself when scrolled.
+An object goes to the `LV_STATE_SCROLLED` state while it's being scrolled. This allows adding different styles to the scrollbar or the object itself when scrolled.
 This code makes the scrollbar blue when the object is scrolled:
 ```c
 static lv_style_t style_blue;
 lv_style_init(&style_blue);
-lv_style_set_bg_color(&style_red, lv_color_blue());
+lv_style_set_bg_color(&style_blue, lv_color_blue());
 
 ...
 
 lv_obj_add_style(obj, &style_blue, LV_STATE_SCROLLED | LV_PART_SCROLLBAR);
 ```
 
+If the base direction of the `LV_PART_SCROLLBAR` is RTL (`LV_BASE_DIR_RTL`) the vertical scrollbar will be placed on the left. 
+Note that, the `base_dir` style property is inherited. Therefore, it can be set directly on the `LV_PART_SCROLLBAR` part of an object
+or on the object's or any parent's main part to make a scrollbar inherit the base direction. 
+
 ### Events
 The following events are related to scrolling:
 - `LV_EVENT_SCROLL_BEGIN` Scrolling begins
@@ -59,16 +63,16 @@ TODO
 
 ## Features of scrolling
 
-Besides managing "normal" scrolling there are many interesting and useful additional features too.
+Besides, managing "normal" scrolling there are many interesting and useful additional features.
 
 
 ### Scrollable
 
 It's possible to make an object non-scrollable with `lv_obj_clear_flag(obj, LV_OBJ_FLAG_SCROLLABLE)`.
 
-Non-scrollable object can still propagate the scrolling (chain) to the parents.
+Non-scrollable objects can still propagate the scrolling (chain) to their parents.
 
-The direction in which scrolling can happen can be controlled by `lv_obj_set_scroll_dir(obj, LV_DIR_...)`.
+The direction in which scrolling happens can be controlled by `lv_obj_set_scroll_dir(obj, LV_DIR_...)`.
 The following values are possible for the direction:
 - `LV_DIR_TOP` only scroll up
 - `LV_DIR_LEFT` only scroll left
@@ -82,32 +86,33 @@ OR-ed values are also possible. E.g. `LV_DIR_TOP | LV_DIR_LEFT`.
 
 
 ### Scroll chain
-If an object can't be scrolled further (e.g. it's content has reached the bottom most position) the scrolling is propagated to it's parent. If the parent an be scrolled in that direction than it will be scrolled instead.
-It propagets to the grandparent and grand-grandparents too.
+If an object can't be scrolled further (e.g. its content has reached the bottom-most position) additional scrolling is propagated to its parent. If the parent can be scrolled in that direction than it will be scrolled instead.
+It continues propagating to the grandparent and grand-grandparents as well.
 
 The propagation on scrolling is called "scroll chaining" and it can be enabled/disabled with the `LV_OBJ_FLAG_SCROLL_CHAIN` flag. 
 If chaining is disabled the propagation stops on the object and the parent(s) won't be scrolled.
 
 ### Scroll momentum
-When the user scrolls an object and releases it, LVGL can emulate a momentum for the scrolling. It's like the object was thrown and scrolling slows down smoothly. 
+When the user scrolls an object and releases it, LVGL can emulate inertial momentum for the scrolling. It's like the object was thrown and scrolling slows down smoothly. 
 
 The scroll momentum can be enabled/disabled with the `LV_OBJ_FLAG_SCROLL_MOMENTUM` flag. 
 
 ### Elastic scroll
-Normally the content can't be scrolled inside the object. That is the top side of the content can't be below the top side of the object. 
+Normally an object can't be scrolled past the extremeties of its content. That is the top side of the content can't be below the top side of the object. 
 
-However, with `LV_OBJ_FLAG_SCROLL_ELASTIC` a fancy effect can be added when the user "over-scrolls" the content. The scrolling slows down, and the content can be scrolled inside the object. 
+However, with `LV_OBJ_FLAG_SCROLL_ELASTIC` a fancy effect is added when the user "over-scrolls" the content. The scrolling slows down, and the content can be scrolled inside the object. 
 When the object is released the content scrolled in it will be animated back to the valid position. 
 
 ### Snapping
-The children of an object can be snapped according to specific rules when scrolling ends. Children can be made snappable individually with the `LV_OBJ_FLAG_SNAPABLE` flag. (Note misspelling of the flag name: your code needs to spell it with one P.)
-The object can align the snapped children in 4 ways: 
-- `LV_SCROLL_SNAP_NONE` Snapping is disabled. (default)
-- `LV_SCROLL_SNAP_START` Align the children to the left/top side of the scrolled object
-- `LV_SCROLL_SNAP_END` Align the children to the right/bottom side of the scrolled object
-- `LV_SCROLL_SNAP_CENTER` Align the children to the center of the scrolled object
+The children of an object can be snapped according to specific rules when scrolling ends. Children can be made snappable individually with the `LV_OBJ_FLAG_SNAPPABLE` flag.
 
-The alignment can be set with `lv_obj_set_scroll_snap_x/y(obj, LV_SCROLL_SNAP_...)`:
+An object can align snapped children in four ways:
+- `LV_SCROLL_SNAP_NONE` Snapping is disabled. (default)
+- `LV_SCROLL_SNAP_START` Align the children to the left/top side of a scrolled object
+- `LV_SCROLL_SNAP_END` Align the children to the right/bottom side of a scrolled object
+- `LV_SCROLL_SNAP_CENTER` Align the children to the center of a scrolled object
+  
+Snap alignment is set with `lv_obj_set_scroll_snap_x/y(obj, LV_SCROLL_SNAP_...)`:
  
 Under the hood the following happens:
 1. User scrolls an object and releases the screen
@@ -117,34 +122,34 @@ Under the hood the following happens:
  
 ### Scroll one
 The "scroll one" feature tells LVGL to allow scrolling only one snappable child at a time. 
-So this requires to make the children snappable (LV_OBJ_FLAG_SNAPABLE spelled with one P in code) and and set a scroll snap alignment different from `LV_SCROLL_SNAP_NONE`.
+This requires making the children snappable and setting a scroll snap alignment different from `LV_SCROLL_SNAP_NONE`.
 
 This feature can be enabled by the `LV_OBJ_FLAG_SCROLL_ONE` flag.
 
 ### Scroll on focus
-Imagine that there a lot of objects in a group that are on scrollable object. Pressing the "Tab" button focuses the next object but it might be out of the visible area of the scrollable object. 
-If the "scroll on focus" features is enabled LVGL will automatically scroll to the objects to bring the children into the view. 
-The scrolling happens recursively therefore even nested scrollable object are handled properly. 
-The object will be scrolled to the view even if it's on a different page of a tabview. 
+Imagine that there a lot of objects in a group that are on a scrollable object. Pressing the "Tab" button focuses the next object but it might be outside the visible area of the scrollable object. 
+If the "scroll on focus" feature is enabled LVGL will automatically scroll objects to bring their children into view. 
+The scrolling happens recursively therefore even nested scrollable objects are handled properly. 
+The object will be scrolled into view even if it's on a different page of a tabview. 
 
 ## Scroll manually
-The following API functions allow to manually scroll objects:
+The following API functions allow manual scrolling of objects:
 - `lv_obj_scroll_by(obj, x, y, LV_ANIM_ON/OFF)` scroll by `x` and `y` values
 - `lv_obj_scroll_to(obj, x, y, LV_ANIM_ON/OFF)` scroll to bring the given coordinate to the top left corner
 - `lv_obj_scroll_to_x(obj, x, LV_ANIM_ON/OFF)` scroll to bring the given coordinate to the left side
-- `lv_obj_scroll_to_y(obj, y, LV_ANIM_ON/OFF)` scroll to bring the given coordinate to the left side
+- `lv_obj_scroll_to_y(obj, y, LV_ANIM_ON/OFF)` scroll to bring the given coordinate to the top side
 
 ## Self size
 
 Self size is a property of an object. Normally, the user shouldn't use this parameter but if a custom widget is created it might be useful.
 
-In short, self size tell the size of the content. To understand it better take the example of a table. 
+In short, self size establishes the size of an object's content. To understand it better take the example of a table. 
 Let's say it has 10 rows each with 50 px height. So the total height of the content is 500 px. In other words the "self height" is 500 px. 
 If the user sets only 200 px height for the table LVGL will see that the self size is larger and make the table scrollable.
 
-It means not only the children can make an object scrollable but a larger self size too.
+This means not only the children can make an object scrollable but a larger self size will too.
 
-LVGL uses the `LV_EVENT_GET_SELF_SIZE` event to get the self size of an object. Here is an example to see how to handle the event
+LVGL uses the `LV_EVENT_GET_SELF_SIZE` event to get the self size of an object. Here is an example to see how to handle the event:
 ```c
 if(event_code == LV_EVENT_GET_SELF_SIZE) {
 	lv_point_t * p = lv_event_get_param(e);

docs/overview/style-props.md

@@ -1,15 +1,15 @@
 # Style properties
 
 ## Size and position
-TODO
+Properties related to size, position, alignment and layout of the objects.
 
 
 ### width
 Sets the width of object. Pixel, percentage and `LV_SIZE_CONTENT` values can be used. Percentage values are relative to the width of the parent's content area.
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> widget dependent</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> Yes</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
 </ul>
 
@@ -20,7 +20,7 @@ Sets a minimal width. Pixel and percentage values can be used. Percentage values
 <ul>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> Yes</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
 </ul>
 
@@ -29,9 +29,9 @@ Sets a minimal width. Pixel and percentage values can be used. Percentage values
 ### max_width
 Sets a maximal width. Pixel and percentage values can be used. Percentage values are relative to the width of the parent's content area.
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> LV_COORD_MAX</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> Yes</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
 </ul>
 
@@ -40,9 +40,9 @@ Sets a maximal width. Pixel and percentage values can be used. Percentage values
 ### height
 Sets the height of object. Pixel, percentage and `LV_SIZE_CONTENT` can be used. Percentage values are relative to the height of the parent's content area.
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> widget dependent</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> Yes</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
 </ul>
 
@@ -53,7 +53,7 @@ Sets a minimal height. Pixel and percentage values can be used. Percentage value
 <ul>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> Yes</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
 </ul>
 
@@ -62,9 +62,9 @@ Sets a minimal height. Pixel and percentage values can be used. Percentage value
 ### max_height
 Sets a maximal height. Pixel and percentage values can be used. Percentage values are relative to the height of the parent's content area.
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> LV_COORD_MAX</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> Yes</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
 </ul>
 
@@ -75,7 +75,7 @@ Set the X coordinate of the object considering the set `align`. Pixel and percen
 <ul>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> Yes</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
 </ul>
 
@@ -86,16 +86,16 @@ Set the Y coordinate of the object considering the set `align`. Pixel and percen
 <ul>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> Yes</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
 </ul>
 
 
 
 ### align
-Set the alignment which determines from which point of the parent the X and Y coordinates should be interpreted. The possible values are: `LV_ALIGN_TOP_LEFT/MID/RIGHT`, `LV_ALIGN_BOTTOM_LEFT/MID/RIGHT`, `LV_ALIGN_LEFT/RIGHT_MID`, `LV_ALIGN_CENTER`
+Set the alignment which tells from which point of the parent the X and Y coordinates should be interpreted. The possible values are: `LV_ALIGN_DEFAULT`, `LV_ALIGN_TOP_LEFT/MID/RIGHT`, `LV_ALIGN_BOTTOM_LEFT/MID/RIGHT`, `LV_ALIGN_LEFT/RIGHT_MID`, `LV_ALIGN_CENTER`. `LV_ALIGN_DEFAULT` means `LV_ALIGN_TOP_LEFT` with LTR base direction and `LV_ALIGN_TOP_RIGHT` with RTL base direction.
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `LV_ALIGN_DEFAULT`</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
@@ -109,7 +109,7 @@ Make the object wider on both sides with this value. Pixel and percentage (with
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> Yes</li>
 </ul>
 
 
@@ -120,7 +120,7 @@ Make the object higher on both sides with this value. Pixel and percentage (with
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> Yes</li>
 </ul>
 
 
@@ -130,7 +130,7 @@ Move the object with this value in X direction. Applied after layouts, aligns an
 <ul>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> Yes</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
 </ul>
 
@@ -141,7 +141,7 @@ Move the object with this value in Y direction. Applied after layouts, aligns an
 <ul>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> Yes</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
 </ul>
 
@@ -152,8 +152,8 @@ Zoom image-like objects. Multiplied with the zoom set on the object. The value 2
 <ul>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> Yes</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> Yes</li>
 </ul>
 
 
@@ -163,13 +163,13 @@ Zoom image-like objects. Multiplied with the zoom set on the object. The value 2
 <ul>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> Yes</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> Yes</li>
 </ul>
 
 
 ## Padding
-TODO
+Properties to describe spacing betwwen the parent's sides and the children and among the children. Very similar to the padding properties in HTML.
 
 
 ### pad_top
@@ -177,7 +177,7 @@ Sets the padding on the top. It makes the content area smaller in this direction
 <ul>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> Yes</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
 </ul>
 
@@ -188,7 +188,7 @@ Sets the padding on the bottom. It makes the content area smaller in this direct
 <ul>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> Yes</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
 </ul>
 
@@ -210,7 +210,7 @@ Sets the padding on the right. It makes the content area smaller in this directi
 <ul>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> Yes</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
 </ul>
 
@@ -221,7 +221,7 @@ Sets the padding between the rows. Used by the layouts.
 <ul>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> Yes</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
 </ul>
 
@@ -232,13 +232,13 @@ Sets the padding between the columns. Used by the layouts.
 <ul>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> Yes</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
 </ul>
 
 
 ## Miscellaneous
-TODO
+Mixed proprites for various purposes.
 
 
 ### radius
@@ -264,10 +264,10 @@ Enable to clip the overflowed content on the rounded corner. Can be `true` or `f
 
 
 ### opa
-Scale down all opacity values of the object by this factor. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc indicate semi-transparency.
+Scale down all opacity values of the object by this factor. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency.
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `LV_OPA_COVER`</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> Yes</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
 </ul>
@@ -277,7 +277,7 @@ Scale down all opacity values of the object by this factor. Value 0, `LV_OPA_0`
 ### color_filter_dsc
 Mix a color to all colors of the object.
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `NULL`</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
@@ -288,7 +288,7 @@ Mix a color to all colors of the object.
 ### color_filter_opa
 The intensity of mixing of color filter.
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `LV_OPA_TRANSP`</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
@@ -297,7 +297,7 @@ The intensity of mixing of color filter.
 
 
 ### anim_time
-The animation time in milliseconds. Its meaning is widget specific. E.g. blink time of the cursor on the text area or scroll time of a roller. See the widgets' documentation to learn more.
+The animation time in milliseconds. It's meaning is widget specific. E.g. blink time of the cursor on the text area or scroll time of a roller. See the widgets' documentation to learn more.
 <ul>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
@@ -308,7 +308,7 @@ The animation time in milliseconds. Its meaning is widget specific. E.g. blink t
 
 
 ### anim_speed
-The animation speed in pixel/sec. Its meaning is widget specific. E.g. scroll speed of label. See the widgets' documentation to learn more.
+The animation speed in pixel/sec. It's meaning is widget specific. E.g. scroll speed of label. See the widgets' documentation to learn more.
 <ul>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
@@ -321,7 +321,7 @@ The animation speed in pixel/sec. Its meaning is widget specific. E.g. scroll sp
 ### transition
 An initialized `lv_style_transition_dsc_t` to describe a transition.
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `NULL`</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
@@ -330,9 +330,9 @@ An initialized `lv_style_transition_dsc_t` to describe a transition.
 
 
 ### blend_mode
-Describes how to blend the colors to the background. The possible values are `LV_BLEND_MODE_NORMAL/ADDITIVE/SUBTRACTIVE`
+Describes how to blend the colors to the background. The possibel values are `LV_BLEND_MODE_NORMAL/ADDITIVE/SUBTRACTIVE/MULTIPLY`
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `LV_BLEND_MODE_NORMAL`</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
@@ -345,30 +345,30 @@ Set the layout if the object. The children will be repositioned and resized acco
 <ul>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> Yes</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
 </ul>
 
 
 
 ### base_dir
-Set the base direction of the object. The possible values are `LV_BIDI_DIR_LTR/RTL/AUTO`.
+Set the base direction of the obejct. The possible values are `LV_BIDI_DIR_LTR/RTL/AUTO`.
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `LV_BASE_DIR_AUTO`</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> Yes</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> Yes</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
 </ul>
 
 
 ## Background
-TODO
+Properties for to describe the background color and image of the objects.
 
 
 ### bg_color
 Set the background color of the object.
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `0xffffff`</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
@@ -377,9 +377,9 @@ Set the background color of the object.
 
 
 ### bg_opa
-Set the opacity of the background. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc indicate semi-transparency.
+Set the opacity of the background. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency.
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `LV_OPA_TRANSP`</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
@@ -390,7 +390,7 @@ Set the opacity of the background. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means
 ### bg_grad_color
 Set the gradient color of the background. Used only if `grad_dir` is not `LV_GRAD_DIR_NONE`
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `LV_OPA_TRANSP`</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
@@ -401,7 +401,7 @@ Set the gradient color of the background. Used only if `grad_dir` is not `LV_GRA
 ### bg_grad_dir
 Set the direction of the gradient of the background. The possible values are `LV_GRAD_DIR_NONE/HOR/VER`.
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `LV_GRAD_DIR_NONE`</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
@@ -423,7 +423,7 @@ Set the point from which the background color should start for gradients. 0 mean
 ### bg_grad_stop
 Set the point from which the background's gradient color should start. 0 means to top/left side, 255 the bottom/right side, 128 the center, and so on
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 255</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
@@ -434,7 +434,7 @@ Set the point from which the background's gradient color should start. 0 means t
 ### bg_img_src
 Set a background image. Can be a pointer to `lv_img_dsc_t`, a path to a file or an `LV_SYMBOL_...`
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `NULL`</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
@@ -443,9 +443,9 @@ Set a background image. Can be a pointer to `lv_img_dsc_t`, a path to a file or
 
 
 ### bg_img_opa
-Set the opacity of the background image. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc indicate semi-transparency.
+Set the opacity of the background image. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency.
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `LV_OPA_COVER`</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
@@ -456,7 +456,7 @@ Set the opacity of the background image. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP`
 ### bg_img_recolor
 Set a color to mix to the background image.
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `0x000000`</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
@@ -467,7 +467,7 @@ Set a color to mix to the background image.
 ### bg_img_recolor_opa
 Set the intensity of background image recoloring. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means no mixing, 256, `LV_OPA_100` or `LV_OPA_COVER` means full recoloring, other values or LV_OPA_10, LV_OPA_20, etc are interpreted proportionally.
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `LV_OPA_TRANSP`</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
@@ -476,7 +476,7 @@ Set the intensity of background image recoloring. Value 0, `LV_OPA_0` or `LV_OPA
 
 
 ### bg_img_tiled
-If enabled the background image will be tiled. The possible values are `true` or `false`.
+If enbaled the background image will be tiled. The possible values are `true` or `false`.
 <ul>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
@@ -486,13 +486,13 @@ If enabled the background image will be tiled. The possible values are `true` or
 
 
 ## Border
-TODO
+Properties to describe the borders
 
 
 ### border_color
 Set the color of the border
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `0x000000`</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
@@ -501,9 +501,9 @@ Set the color of the border
 
 
 ### border_opa
-Set the opcitiy of the border. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc indicate semi-transparency.
+Set the opcitiy of the border. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency.
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `LV_OPA_COVER`</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
@@ -512,20 +512,20 @@ Set the opcitiy of the border. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means full
 
 
 ### border_width
-Set the width of the border. Only pixel values can be used.
+Set hte width of the border. Only pixel values can be used.
 <ul>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> Yes</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
 </ul>
 
 
 
 ### border_side
-Set which side(s) the border should be drawn. The possible values are `LV_BORDER_SIDE_NONE/TOP/BOTTOM/LEFT/RIGHT/INTERNAL`. OR-ed calues an be used as well, e.g. `LV_BORDER_SIDE_TOP | LV_BORDER_SIDE_LEFT`.
+Set ony which side(s) the border should be drawn. The possible values are `LV_BORDER_SIDE_NONE/TOP/BOTTOM/LEFT/RIGHT/INTERNAL`. OR-ed calues an be used as well, e.g. `LV_BORDER_SIDE_TOP | LV_BORDER_SIDE_LEFT`.
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `LV_BORDER_SIDE_NONE`</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
@@ -534,7 +534,7 @@ Set which side(s) the border should be drawn. The possible values are `LV_BORDER
 
 
 ### border_post
-Sets wheter the border should be drawn before or after the children ar drawn. `true`: after children, `false`: before children
+Sets whether the the border should be drawn before or after the children ar drawn. `true`: after children, `false`: before children
 <ul>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
@@ -544,14 +544,14 @@ Sets wheter the border should be drawn before or after the children ar drawn. `t
 
 
 ## Text
-TODO
+Properties to describe the propeties of text. All these properties are inherited.
 
 
 ### text_color
 Sets the color of the text.
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `0x000000`</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> Yes</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
 </ul>
@@ -559,10 +559,10 @@ Sets the color of the text.
 
 
 ### text_opa
-Set the opacity of the text. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc indicate semi-transparency.
+Set the opacity of the text. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency.
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `LV_OPA_COVER`</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> Yes</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
 </ul>
@@ -572,9 +572,9 @@ Set the opacity of the text. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully
 ### text_font
 Set the font of the text (a pointer `lv_font_t *`). 
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `LV_FONT_DEFAULT`</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> Yes</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> Yes</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
 </ul>
 
@@ -584,8 +584,8 @@ Set the font of the text (a pointer `lv_font_t *`).
 Set the letter space in pixels
 <ul>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> Yes</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> Yes</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
 </ul>
 
@@ -595,8 +595,8 @@ Set the letter space in pixels
 Set the line space in pixels.
 <ul>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> Yes</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> Yes</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
 </ul>
 
@@ -605,8 +605,8 @@ Set the line space in pixels.
 ### text_decor
 Set decoration for the text. The possible values are `LV_TEXT_DECOR_NONE/UNDERLINE/STRIKETHROUGH`. OR-ed values can be used as well.
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `LV_TEXT_DECOR_NONE`</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> Yes</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
 </ul>
@@ -616,21 +616,21 @@ Set decoration for the text. The possible values are `LV_TEXT_DECOR_NONE/UNDERLI
 ### text_align
 Set how to align the lines of the text. Note that it doesn't align the object itself, only the lines inside the object. The possible values are `LV_TEXT_ALIGN_LEFT/CENTER/RIGHT/AUTO`. `LV_TEXT_ALIGN_AUTO` detect the text base direction and uses left or right alignment accordingly
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `LV_TEXT_ALIGN_AUTO`</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> Yes</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> Yes</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
 </ul>
 
 
 ## Image
-TODO
+Properties to describe the images
 
 
 ### img_opa
-Set the opacity of an image. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc indicate semi-transparency.
+Set the opacity of an image. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency.
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `LV_OPA_COVER`</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
@@ -639,9 +639,9 @@ Set the opacity of an image. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully
 
 
 ### img_recolor
-Set color to mix to the image.
+Set color to mixt to the image.
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `0x000000`</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
@@ -650,7 +650,7 @@ Set color to mix to the image.
 
 
 ### img_recolor_opa
-Set the intensity of the color mixing. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc indicate semi-transparency.
+Set the intensity of the color mixing. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency.
 <ul>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
@@ -660,7 +660,7 @@ Set the intensity of the color mixing. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` me
 
 
 ## Outline
-TODO
+Properties to describe the outline. It's like a border but drawn outside of the rectangles.
 
 
 ### outline_width
@@ -669,7 +669,7 @@ Set the width of the outline in pixels.
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> Yes</li>
 </ul>
 
 
@@ -677,7 +677,7 @@ Set the width of the outline in pixels.
 ### outline_color
 Set the color of the outline.
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `0x000000`</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
@@ -686,12 +686,12 @@ Set the color of the outline.
 
 
 ### outline_opa
-Set the opacity of the outline. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc indicate semi-transparency.
+Set the opacity of the outline. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency.
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `LV_OPA_COVER`</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> Yes</li>
 </ul>
 
 
@@ -702,12 +702,12 @@ Set the padding of the outline, i.e. the gap between object and the outline.
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> Yes</li>
 </ul>
 
 
 ## Shadow
-TODO
+Properties to describe the shadow drawn under the rectangles.
 
 
 ### shadow_width
@@ -716,7 +716,7 @@ Set the width of the shadow in pixels. The value should be >= 0.
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> Yes</li>
 </ul>
 
 
@@ -727,7 +727,7 @@ Set an offset on the shadow in pixels in X direction.
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> Yes</li>
 </ul>
 
 
@@ -738,18 +738,18 @@ Set an offset on the shadow in pixels in Y direction.
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> Yes</li>
 </ul>
 
 
 
 ### shadow_spread
-Make the shadow calculation to use a larger or smaller rectangle as base. The value can be in pixel to make the area larger/smaller
+Make the shadow calcuation to use a larger or smaller rectangle as base. The value can be in pixel to make the area larger/smaller
 <ul>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> Yes</li>
 </ul>
 
 
@@ -757,7 +757,7 @@ Make the shadow calculation to use a larger or smaller rectangle as base. The va
 ### shadow_color
 Set the color of the shadow
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `0x000000`</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
@@ -766,17 +766,17 @@ Set the color of the shadow
 
 
 ### shadow_opa
-Set the opacity of the shadow. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc indicate semi-transparency.
+Set the opacity of the shadow. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency.
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `LV_OPA_COVER`</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> Yes</li>
 </ul>
 
 
 ## Line
-TODO
+Properties to describe line-like objects
 
 
 ### line_width
@@ -785,7 +785,7 @@ Set the width of the lines in pixel.
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> Yes</li>
 </ul>
 
 
@@ -826,7 +826,7 @@ Make the end points of the lines rounded. `true`: rounded, `false`: perpendicula
 ### line_color
 Set the color fo the lines.
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `0x000000`</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
@@ -837,7 +837,7 @@ Set the color fo the lines.
 ### line_opa
 Set the opacity of the lines.
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `LV_OPA_COVER`</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
@@ -849,7 +849,7 @@ TODO
 
 
 ### arc_width
-Set the width (thickness) of the arcs in pixel.
+Set the width (ticjkness) of the arcs in pixel.
 <ul>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
@@ -873,7 +873,7 @@ Make the end points of the arcs rounded. `true`: rounded, `false`: perpendicular
 ### arc_color
 Set the color of the arc.
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `0x000000`</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
@@ -884,7 +884,7 @@ Set the color of the arc.
 ### arc_opa
 Set the opacity of the arcs.
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `LV_OPA_COVER`</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>
@@ -895,7 +895,7 @@ Set the opacity of the arcs.
 ### arc_img_src
 Set an image from which the arc will be masked out. It's useful to display complex effects on the arcs. Can be a pointer to `lv_img_dsc_t` or a path to a file
 <ul>
-<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> 0</li>
+<li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Default</strong> `NULL`</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Inherited</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Layout</strong> No</li>
 <li style='display:inline; margin-right: 20px; margin-left: 0px'><strong>Ext. draw</strong> No</li>

docs/overview/style.md

@@ -4,17 +4,17 @@
 ```
 # Styles
 
-*Styles* are used to set the appearance of the objects. Styles in lvgl are heavily inspired by CSS. The concept in nutshell is as follows:
+*Styles* are used to set the appearance of objects. Styles in lvgl are heavily inspired by CSS. The concept in a nutshell is as follows:
 - A style is an `lv_style_t` variable which can hold properties like border width, text color and so on. It's similar to a `class` in CSS. 
-- Styles can be assigned to objects to change their appearance. During the assignment the target part (*pseudo element* in CSS) and target state (*pseudo class*) can be specified.
+- Styles can be assigned to objects to change their appearance. Upon assignment, the target part (*pseudo-element* in CSS) and target state (*pseudo class*) can be specified.
 For example one can add `style_blue` to the knob of a slider when it's in pressed state.
 - The same style can be used by any number of objects.
-- Styles can be cascaded which means multiple styles can be assigned to an object and each style can have different properties. 
-Therefore not all properties have to be specified in style. LVLG will look for a property until a style defines it or use a default if it's not spefied by any of the styles.
+- Styles can be cascaded which means multiple styles may be assigned to an object and each style can have different properties. 
+Therefore, not all properties have to be specified in a style. LVGL will search for a property until a style defines it or use a default if it's not specified by any of the styles.
 For example `style_btn` can result in a default gray button and `style_btn_red` can add only a `background-color=red` to overwrite the background color.
-- Later added styles have higher precedence. It means if a property is specified in two styles the later added will be used.
-- Some properties (e.g. text color) can be inherited from the parent(s) if it's not specified in the object. 
-- Objects can have local styles that have higher precedence than "normal" styles.
+- The most recently added style has higher precedence. This means if a property is specified in two styles the newest style in the object will be used.
+- Some properties (e.g. text color) can be inherited from a parent(s) if it's not specified in an object. 
+- Objects can also have local styles with higher precedence than "normal" styles.
 - Unlike CSS (where pseudo-classes describe different states, e.g. `:focus`), in LVGL a property is assigned to a given state. 
 - Transitions can be applied when the object changes state.
 
@@ -35,10 +35,10 @@ The objects can be in the combination of the following states:
 - `LV_STATE_USER_3` (0x4000) Custom state
 - `LV_STATE_USER_4` (0x8000) Custom state
   
-The combination states the object can be focused and pressed at the same time. This is represented as `LV_STATE_FOCUSED | LV_STATE_PRESSED`. 
+An object can be in a combination of states such as being focused and pressed at the same time. This is represented as `LV_STATE_FOCUSED | LV_STATE_PRESSED`. 
 
-The style can be added to any state and state combination. 
-For example, setting a different background color for default and pressed state. 
+A style can be added to any state or state combination. 
+For example, setting a different background color for the default and pressed states. 
 If a property is not defined in a state the best matching state's property will be used. Typically this means the property with `LV_STATE_DEFAULT` is used.˛
 If the property is not set even for the default state the default value will be used. (See later)
 
@@ -49,74 +49,74 @@ To determine which state's property to use let's take an example. Imagine the ba
 - `LV_STATE_PRESSED`: gray
 - `LV_STATE_FOCUSED`: red
 
-1. By the default the object is in default state, so it's a simple case: the property is perfectly defined in the object's current state as white.
+1. Initially the object is in the default state, so it's a simple case: the property is perfectly defined in the object's current state as white.
 2. When the object is pressed there are 2 related properties: default with white (default is related to every state) and pressed with gray. 
 The pressed state has 0x0020 precedence which is higher than the default state's 0x0000 precedence, so gray color will be used.
 3. When the object is focused the same thing happens as in pressed state and red color will be used. (Focused state has higher precedence than default state).
 4. When the object is focused and pressed both gray and red would work, but the pressed state has higher precedence than focused so gray color will be used.
-5. It's possible to set e.g rose color for `LV_STATE_PRESSED | LV_STATE_FOCUSED`. 
+5. It's possible to set e.g. rose color for `LV_STATE_PRESSED | LV_STATE_FOCUSED`. 
 In this case, this combined state has 0x0020 + 0x0002 = 0x0022 precedence, which is higher than the pressed state's precedence so rose color would be used.
-6. When the object is in checked state there is no property to set the background color for this state. So for lack of a better option, the object remains white from the default state's property.
+6. When the object is in the checked state there is no property to set the background color for this state. So for lack of a better option, the object remains white from the default state's property.
 
 Some practical notes:
-- The precedence (value) of states is quite intuitive and it's something the user would expect naturally. E.g. if an object is focused the user will still want to see if it's pressed, therefore pressed state has a higher precedence. 
+- The precedence (value) of states is quite intuitive, and it's something the user would expect naturally. E.g. if an object is focused the user will still want to see if it's pressed, therefore the pressed state has a higher precedence. 
 If the focused state had a higher precedence it would overwrite the pressed color.
 - If you want to set a property for all states (e.g. red background color) just set it for the default state. If the object can't find a property for its current state it will fall back to the default state's property.
 - Use ORed states to describe the properties for complex cases. (E.g. pressed + checked + focused)
 - It might be a good idea to use different style elements for different states. 
-For example, finding background colors for released, pressed, checked + pressed, focused, focused + pressed, focused + pressed + checked, etc states is quite difficult. 
+For example, finding background colors for released, pressed, checked + pressed, focused, focused + pressed, focused + pressed + checked, etc. states is quite difficult. 
 Instead, for example, use the background color for pressed and checked states and indicate the focused state with a different border color. 
 
 ## Cascading styles
-It's not required to set all the properties in one style. It's possible to add more styles to an object and let the later added style to modify or extend appearance.
-For example, create a general gray button style and create a new for red buttons where only the new background color is set. 
+It's not required to set all the properties in one style. It's possible to add more styles to an object and have the later added style modify or extend appearance.
+For example, create a general gray button style and create a new one for red buttons where only the new background color is set. 
 
 This is much like in CSS when used classes are listed like `<div class=".btn .btn-red">`.
 
 Styles added later have precedence over ones set earlier. So in the gray/red button example above, the normal button style should be added first and the red style second. 
-However, the precedence coming from states are still taken into account. 
+However, the precedence of the states are still taken into account. 
 So let's examine the following case:
-- the basic button style defines dark-gray color for default state and light-gray color pressed state
+- the basic button style defines dark-gray color for the default state and light-gray color for the pressed state
 - the red button style defines the background color as red only in the default state
 
 In this case, when the button is released (it's in default state) it will be red because a perfect match is found in the most recently added style (red). 
-When the button is pressed the light-gray color is a better match because it describes the current state perfectly, so the button will be light-gray. 
+When the button is pressed the light-gray color is a better match because it describes the current state perfectly, so the button will be light-gray. 
 
 ## Inheritance 
-Some properties (typically that are related to texts) can be inherited from the parent object's styles. 
+Some properties (typically those related to text) can be inherited from the parent object's styles. 
 Inheritance is applied only if the given property is not set in the object's styles (even in default state). 
-In this case, if the property is inheritable, the property's value will be searched in the parents too until an object specifies a value for the property. The parents will use their own state to detemine the value. 
+In this case, if the property is inheritable, the property's value will be searched in the parents until an object specifies a value for the property. The parents will use their own state to determine the value. 
 So if a button is pressed, and the text color comes from here, the pressed text color will be used.
 
 
 ## Parts
-Objects can have *parts* which can have their own styles. 
+Objects can be composed of *parts* which may each have their own styles. 
 
 The following predefined parts exist in LVGL:
 - `LV_PART_MAIN` A background like rectangle*/
 - `LV_PART_SCROLLBAR`  The scrollbar(s)
 - `LV_PART_INDICATOR` Indicator, e.g. for slider, bar, switch, or the tick box of the checkbox
-- `LV_PART_KNOB` Like a handle to grab to adjust the value*/
+- `LV_PART_KNOB` Like a handle to grab to adjust a value
 - `LV_PART_SELECTED` Indicate the currently selected option or section
-- `LV_PART_ITEMS` Used if the widget has multiple similar elements (e.g. table cells)*/
+- `LV_PART_ITEMS` Used if the widget has multiple similar elements (e.g. table cells)
 - `LV_PART_TICKS` Ticks on scales e.g. for a chart or meter
 - `LV_PART_CURSOR` Mark a specific place e.g. text area's or chart's cursor
-- `LV_PART_CUSTOM_FIRST` Custom parts can be added from here.
+- `LV_PART_CUSTOM_FIRST` Custom part identifiers can be added starting from here.
 
 
 For example a [Slider](/widgets/core/slider) has three parts:
 - Background
-- Indiactor
+- Indicator
 - Knob
 
-It means the all three parts of the slider can have their own styles. See later how to add style styles to objects and parts.
+This means all three parts of the slider can have their own styles. See later how to add styles to objects and parts.
 
 ## Initialize styles and set/get properties
 
 Styles are stored in `lv_style_t` variables. Style variables should be `static`, global or dynamically allocated. 
-In other words they can not be local variables in functions which are destroyed when the function exists. 
+In other words they cannot be local variables in functions which are destroyed when the function exits. 
 Before using a style it should be initialized with `lv_style_init(&my_style)`. 
-After initializing the style properties can be set or added to it.
+After initializing a style, properties can be added or changed.
 
 Property set functions looks like this: `lv_style_set_<property_name>(&style, <value>);` For example: 
 ```c
@@ -142,7 +142,7 @@ lv_style_remove_prop(&style, LV_STYLE_BG_COLOR);
 To get a property's value from a style:
 ```c
 lv_style_value_t v;
-lv_res_t res = lv_style_rget_prop(&style, LV_STYLE_BG_COLOR, &v);
+lv_res_t res = lv_style_get_prop(&style, LV_STYLE_BG_COLOR, &v);
 if(res == LV_RES_OK) {	/*Found*/
 	do_something(v.color);
 }
@@ -153,13 +153,13 @@ if(res == LV_RES_OK) {	/*Found*/
 - `color` for color properties
 - `ptr` for pointer properties
 
-To reset a style (free all its data) use 
+To reset a style (free all its data) use:
 ```c
 lv_style_reset(&style);
 ```
 
 ## Add and remove styles to a widget
-A style on its own is not that useful, it needs to be assigned to an object to take effect.
+A style on its own is not that useful. It must be assigned to an object to take effect.
 
 ### Add styles
 To add a style to an object use `lv_obj_add_style(obj, &style, <selector>)`. `<selector>` is an OR-ed value of parts and state to which the style should be added. Some examples:
@@ -173,50 +173,50 @@ To add a style to an object use `lv_obj_add_style(obj, &style, <selector>)`. `<s
 Using `lv_obj_add_style`: 
 ```c
 lv_obj_add_style(btn, &style_btn, 0);      				  /*Default button style*/
-lv_obj_add_style(btn, &btn_red, LV_STATE_PRESSED);  /*Overwrite only a some colors to red when pressed*/
+lv_obj_add_style(btn, &btn_red, LV_STATE_PRESSED);  /*Overwrite only some colors to red when pressed*/
 ```
 
 ### Remove styles
 To remove all styles from an object use `lv_obj_remove_style_all(obj)`.
 
 To remove specific styles use `lv_obj_remove_style(obj, style, selector)`. This function will remove `style` only if the `selector` matches with the `selector` used in `lv_obj_add_style`. 
-`style` can be `NULL` to check only the `selector` and remove all matching styles. The `selector` can use the `LV_STATE_ANY` and `LV_PART_ANY` values to remove the style with any state or part.
+`style` can be `NULL` to check only the `selector` and remove all matching styles. The `selector` can use the `LV_STATE_ANY` and `LV_PART_ANY` values to remove the style from any state or part.
 
 
 ### Report style changes
-If a style which is already assigned to object changes (i.e. a property is added or changed) the objects using that style should be notified. There are 3 options to do this:
-1. If you know that the changed properties can be applied by a simple redraw (e.g. color or opacity changes) just call `lv_obj_invalidate(obj)` or `lv_obj_invalideate(lv_scr_act())`. 
+If a style which is already assigned to an object changes (i.e. a property is added or changed), the objects using that style should be notified. There are 3 options to do this:
+1. If you know that the changed properties can be applied by a simple redraw (e.g. color or opacity changes) just call `lv_obj_invalidate(obj)` or `lv_obj_invalidate(lv_scr_act())`. 
 2. If more complex style properties were changed or added, and you know which object(s) are affected by that style call `lv_obj_refresh_style(obj, part, property)`. 
 To refresh all parts and properties use `lv_obj_refresh_style(obj, LV_PART_ANY, LV_STYLE_PROP_ANY)`.
-3. To make LVGL check all objects to see whether they use the style and refresh them when needed call `lv_obj_report_style_change(&style)`. If `style` is `NULL` all objects will be notified about the style change.
+3. To make LVGL check all objects to see if they use a style and refresh them when needed, call `lv_obj_report_style_change(&style)`. If `style` is `NULL` all objects will be notified about a style change.
 
 ### Get a property's value on an object
-To get a final value of property - considering cascading, inheritance, local styles and transitions (see below) - get functions like this can be used: 
+To get a final value of property - considering cascading, inheritance, local styles and transitions (see below) - property get functions like this can be used: 
 `lv_obj_get_style_<property_name>(obj, <part>)`. 
-These functions uses the object's current state and if no better candidate returns a default value.  
+These functions use the object's current state and if no better candidate exists they return a default value.  
 For example:
 ```c
 lv_color_t color = lv_obj_get_style_bg_color(btn, LV_PART_MAIN);
 ```
 
 ## Local styles
-Besides "normal" styles, the objects can store local styles too. This concept is similar to inline styles in CSS (e.g. `<div style="color:red">`) with some modification. 
+In addition to "normal" styles, objects can also store local styles. This concept is similar to inline styles in CSS (e.g. `<div style="color:red">`) with some modification. 
 
-So local styles are like normal styles but they can't be shared among other objects. If used, local styles are allocated automatically, and freed when the object is deleted.
-They are useful to add local customization to the object.
+Local styles are like normal styles, but they can't be shared among other objects. If used, local styles are allocated automatically, and freed when the object is deleted.
+They are useful to add local customization to an object.
 
-Unlike in CSS, in LVGL local styles can be assigned to states (*pseudo-classes*) and parts (*pseudo-elements*).
+Unlike in CSS, LVGL local styles can be assigned to states (*pseudo-classes*) and parts (*pseudo-elements*).
 
-To set a local property use functions like `lv_obj_set_style_local_<property_name>(obj, <value>, <selector>);`  
+To set a local property use functions like `lv_obj_set_style_<property_name>(obj, <value>, <selector>);`  
 For example:
 ```c
-lv_obj_set_style_local_bg_color(slider, lv_color_red(), LV_PART_INDICATOR | LV_STATE_FOCUSED);
+lv_obj_set_style_bg_color(slider, lv_color_red(), LV_PART_INDICATOR | LV_STATE_FOCUSED);
 ```
 ## Properties
 For the full list of style properties click [here](/overview/style-props).
 
 ### Typical background properties
-In the documentation of the widgets you will see sentences like "The widget use the typical background properties". The "typical background properties" are the ones related to:
+In the documentation of the widgets you will see sentences like "The widget uses the typical background properties". These "typical background properties" are the ones related to:
 - Background
 - Border
 - Outline
@@ -233,14 +233,14 @@ For example, on pressing a button its background color can be animated to the pr
 The parameters of the transitions are stored in the styles. It's possible to set 
 - the time of the transition
 - the delay before starting the transition 
-- the animation path (also known as timing or easing function)
+- the animation path (also known as the timing or easing function)
 - the properties to animate 
 
-The transition properties can be defined for each state. For example, setting 500 ms transition time in default state will mean that when the object goes to the default state a 500 ms transition time will be applied. 
-Setting 100 ms transition time in the pressed state will mean a 100 ms transition time when going to pressed state.
-So this example configuration will result in going to pressed state quickly and then going back to default slowly. 
+The transition properties can be defined for each state. For example, setting a 500 ms transition time in the default state means that when the object goes to the default state a 500 ms transition time is applied. 
+Setting a 100 ms transition time in the pressed state causes a 100 ms transition when going to the pressed state.
+This example configuration results in going to the pressed state quickly and then going back to default slowly. 
 
-To describe a transition an `lv_transition_dsc_t` variable needs to initialized and added to a style:
+To describe a transition an `lv_transition_dsc_t` variable needs to be initialized and added to a style:
 ```c
 /*Only its pointer is saved so must static, global or dynamically allocated */
 static const lv_style_prop_t trans_props[] = {
@@ -262,13 +262,13 @@ TODO
 Themes are a collection of styles. If there is an active theme LVGL applies it on every created widget.
 This will give a default appearance to the UI which can then be modified by adding further styles.
 
-Every display can have a different theme. For example you could have a colorful theme on a TFT and monochrome theme on a secondary monochrome display.
+Every display can have a different theme. For example, you could have a colorful theme on a TFT and monochrome theme on a secondary monochrome display.
 
-To set a theme for a display, 2 steps are required:
+To set a theme for a display, two steps are required:
 1. Initialize a theme
 2. Assign the initialized theme to a display.
 
-Theme initialization functions can have different prototype. This example shows how to set the "default" theme:
+Theme initialization functions can have different prototypes. This example shows how to set the "default" theme:
 ```c
 lv_theme_t * th = lv_theme_default_init(display,  /*Use the DPI, size, etc from this display*/ 
                                         LV_COLOR_PALETTE_BLUE, LV_COLOR_PALETTE_CYAN,   /*Primary and secondary palette*/
@@ -279,12 +279,12 @@ lv_disp_set_theme(display, th); /*Assign the theme to the display*/
 ```
 
 
-The themes can be enabled in `lv_conf.h`. If the default theme is enabled by `LV_USE_THEME_DEFAULT 1` LVGL automatically initializes and sets it when a display is created. 
+The included themes are enabled in `lv_conf.h`. If the default theme is enabled by `LV_USE_THEME_DEFAULT 1` LVGL automatically initializes and sets it when a display is created.
 
 ### Extending themes
 
 Built-in themes can be extended. 
-If a custom theme is created a parent theme can be selected. The parent theme's styles will be added before the custom theme's styles. 
+If a custom theme is created, a parent theme can be selected. The parent theme's styles will be added before the custom theme's styles. 
 Any number of themes can be chained this way. E.g. default theme -> custom theme -> dark theme.
 
 `lv_theme_set_parent(new_theme, base_theme)` extends the `base_theme` with the `new_theme`.

docs/overview/timer.md

@@ -7,14 +7,14 @@
 LVGL has a built-in timer system. You can register a function to have it be called periodically. The timers are handled and called in `lv_timer_handler()`, which needs to be called every few milliseconds.
 See [Porting](/porting/task-handler) for more information.
 
-The timers are non-preemptive, which means a timer cannot interrupt another timer. Therefore, you can call any LVGL related function in a timer.
+Timers are non-preemptive, which means a timer cannot interrupt another timer. Therefore, you can call any LVGL related function in a timer.
 
 
 ## Create a timer
 To create a new timer, use `lv_timer_create(timer_cb, period_ms, user_data)`. It will create an `lv_timer_t *` variable, which can be used later to modify the parameters of the timer.
 `lv_timer_create_basic()` can also be used. This allows you to create a new timer without specifying any parameters.
 
-A timer callback should have `void (*lv_timer_cb_t)(lv_timer_t *);` prototype.
+A timer callback should have a `void (*lv_timer_cb_t)(lv_timer_t *);` prototype.
 
 For example:
 ```c
@@ -40,19 +40,19 @@ lv_timer_t * timer = lv_timer_create(my_timer, 500,  &user_data);
 
 ## Ready and Reset
 
-`lv_timer_ready(timer)` makes the timer run on the next call of `lv_timer_handler()`.
+`lv_timer_ready(timer)` makes a timer run on the next call of `lv_timer_handler()`.
 
 `lv_timer_reset(timer)` resets the period of a timer. It will be called again after the defined period of milliseconds has elapsed.
 
 
 ## Set parameters
-You can modify some parameters of the timers later:
+You can modify some timer parameters later:
 - `lv_timer_set_cb(timer, new_cb)`
 - `lv_timer_set_period(timer, new_period)`
 
 ## Repeat count
 
-You can make a timer repeat only a given number of times with `lv_timer_set_repeat_count(timer, count)`. The timer will automatically be deleted after being called the defined number of times. Set the count to `-1` to repeat indefinitely. 
+You can make a timer repeat only a given number of times with `lv_timer_set_repeat_count(timer, count)`. The timer will automatically be deleted after it's called the defined number of times. Set the count to `-1` to repeat indefinitely. 
 
 
 ## Measure idle time
@@ -62,9 +62,9 @@ It can be misleading if you use an operating system and call `lv_timer_handler`
 
 ## Asynchronous calls
 
-In some cases, you can't do an action immediately. For example, you can't delete an object because something else is still using it or you don't want to block the execution now.
-For these cases, `lv_async_call(my_function, data_p)` can be used to make `my_function` be called on the next call of `lv_timer_handler`. `data_p` will be passed to function when it's called.
-Note that, only the pointer of the data is saved so you need to ensure that the variable will be "alive" while the function is called. It can be *static*, global or dynamically allocated data.
+In some cases, you can't perform an action immediately. For example, you can't delete an object because something else is still using it, or you don't want to block the execution now.
+For these cases, `lv_async_call(my_function, data_p)` can be used to call `my_function` on the next invocation of `lv_timer_handler`. `data_p` will be passed to the function when it's called.
+Note that only the data pointer is saved, so you need to ensure that the variable will be "alive" while the function is called. It can be *static*, global or dynamically allocated data.
 
 For example:
 ```c
@@ -78,16 +78,16 @@ void my_screen_clean_up(void * scr)
 
 ...
 
-/*Do somethings with the object on the current screen*/
+/*Do something with the object on the current screen*/
 
-/*Delete screen on next call of `lv_timer_handler`, so not now.*/
+/*Delete screen on next call of `lv_timer_handler`, not right now.*/
 lv_async_call(my_screen_clean_up, lv_scr_act());
 
 /*The screen is still valid so you can do other things with it*/
 
 ```
 
-If you just want to delete an object, and don't need to clean anything up in `my_screen_cleanup`, you could just use `lv_obj_del_async`, which will delete the object on the next call to `lv_timer_handler`.
+If you just want to delete an object and don't need to clean anything up in `my_screen_cleanup` you could just use `lv_obj_del_async` which will delete the object on the next call to `lv_timer_handler`.
 
 ## API
 

docs/porting/display.md

@@ -4,16 +4,16 @@
 ```
 # Display interface
 
-To register a display for LVGL a `lv_disp_draw_buf_t` and a `lv_disp_drv_t` variable have to be initialized.
+To register a display for LVGL, a `lv_disp_draw_buf_t` and a `lv_disp_drv_t` variable have to be initialized.
 - `lv_disp_draw_buf_t` contains internal graphic buffer(s) called draw buffer(s).
-- `lv_disp_drv_t` contains callback functions to interact with the display and manipulate drawing related things.
+- `lv_disp_drv_t` contains callback functions to interact with the display and manipulate low level drawing behavior.
 
 ## Draw buffer
 
-Draw buffer(s) are simple array(s) that LVGL uses to render the content of the screen. 
+Draw buffer(s) are simple array(s) that LVGL uses to render the screen content. 
 Once rendering is ready the content of the draw buffer is sent to the display using the `flush_cb` function set in the display driver (see below).
 
-A draw draw buffer can be initialized via a `lv_disp_draw_buf_t` variable like this:
+A draw buffer can be initialized via a `lv_disp_draw_buf_t` variable like this:
 ```c
 /*A static or global variable to store the buffers*/
 static lv_disp_draw_buf_t disp_buf;
@@ -26,37 +26,59 @@ static lv_color_t buf_2[MY_DISP_HOR_RES * 10];
 lv_disp_draw_buf_init(&disp_buf, buf_1, buf_2, MY_DISP_HOR_RES*10);
 ```
 
-Note that `lv_disp_draw_buf_t` needs to be static, global or dynamically allocated and not a local variable destroyed if goes out of the scope. 
+Note that `lv_disp_draw_buf_t` must be a static, global or dynamically allocated variable. It cannot be a local variable as they are destroyed upon end of scope.
 
-As you can see the draw buffer can be smaller than the screen. In this case, the larger areas will be redrawn in smaller parts that fit into the draw buffer(s).
+As you can see above, the draw buffer may be smaller than the screen. In this case, larger areas are redrawn in smaller segments that fit into the draw buffer(s).
 If only a small area changes (e.g. a button is pressed) then only that area will be refreshed.
 
 A larger buffer results in better performance but above 1/10 screen sized buffer(s) there is no significant performance improvement. 
-Therefore it's recommended to choose the size of the draw buffer(s) to at least 1/10 screen sized.
+Therefore it's recommended to choose the size of the draw buffer(s) to be at least 1/10 screen sized.
 
-If only **one buffer** is used LVGL draws the content of the screen into that draw buffer and sends it to the display. 
-This way LVGL needs to wait until the content of the buffer is sent to the display before drawing something new in it.
+## Buffering modes
 
-If **two buffers**  are used LVGL can draw into one buffer while the content of the other buffer is sent to display in the background. 
-DMA or other hardware should be used to transfer the data to the display to let the MCU draw meanwhile.
-This way, the rendering and refreshing of the display become parallel. 
+There are several settings to adjust the number draw buffers and buffering/refreshing modes.
 
-In the display driver (`lv_disp_drv_t`) the `full_refresh` bit can be enabled to force LVGL to always redraw the whole screen. This works in both *one buffer* and *two buffers* modes.
+You can measure the performance of different configurations using the [benchmark example](https://github.com/lvgl/lv_demos/tree/master/src/lv_demo_benchmark).
 
-If `full_refresh` is enabled and 2 screen sized draw buffers are provided, LVGL's display handling works like "traditional" double buffering. 
-This means in `flush_cb` only the address of the frame buffer needs to be changed to the provided pointer (`color_p` parameter).
-This configuration should be used if the MCU has LCD controller periphery and not with an external display controller (e.g. ILI9341 or SSD1963). 
+### One buffer
+If only one buffer is used LVGL draws the content of the screen into that draw buffer and sends it to the display. 
+LVGL then needs to wait until the content of the buffer is sent to the display before drawing something new in it.
 
-You can measure the performance of different draw buffer configurations using the [benchmark example](https://github.com/lvgl/lv_demos/tree/master/src/lv_demo_benchmark).
+### Two buffers
+If two buffers  are used LVGL can draw into one buffer while the content of the other buffer is sent to the display in the background. 
+DMA or other hardware should be used to transfer data to the display so the MCU can continue drawing.
+This way, the rendering and refreshing of the display become parallel operations. 
+
+### Full refresh
+In the display driver (`lv_disp_drv_t`) enabling the `full_refresh` bit will force LVGL to always redraw the whole screen. This works in both *one buffer* and *two buffers* modes.
+If `full_refresh` is enabled and two screen sized draw buffers are provided, LVGL's display handling works like "traditional" double buffering. 
+This means the `flush_cb` callback only has to update the address of the framebuffer (`color_p` parameter).
+This configuration should be used if the MCU has an LCD controller peripheral and not with an external display controller (e.g. ILI9341 or SSD1963) accessed via serial link. The latter will generally be too slow to maintain high frame rates with full screen redraws.
+
+### Direct mode
+If the `direct mode` flag is enabled in the display driver LVGL will draw directly into a **screen sized frame buffer**. That is the draw buffer(s) needs to be screen sized. 
+It this case `flush_cb` will be called only once when all dirty areas are redrawn.
+With `direct_mode` the frame buffer always contains the current frame as it should be displayed on the screen. 
+If 2 frame buffers are provided as draw buffers LVGL will alter the buffers but always draw only the dirty areas. 
+Therefore the the 2 buffers needs to synchronized in `flush_cb` like this:
+1. Display the frame buffer pointed by `color_p`
+2. Copy the redrawn areas from `color_p` to the other buffer.
+
+The get the redrawn areas to copy use the following functions
+`_lv_refr_get_disp_refreshing()` returns the display being refreshed
+`disp->inv_areas[LV_INV_BUF_SIZE]` contains the invalidated areas
+`disp->inv_area_joined[LV_INV_BUF_SIZE]` if 1 that area was joined into an other one and should be ignored
+`disp->inv_p` number of valid elements in `inv_areas`
+```
 
 ## Display driver
 
-Once the buffer initialization is ready a `lv_disp_drv_t` display driver needs to be
+Once the buffer initialization is ready a `lv_disp_drv_t` display driver needs to be:
 1. initialized with `lv_disp_drv_init(&disp_drv)`
 2. its fields need to be set
 3. it needs to be registered in LVGL with `lv_disp_drv_register(&disp_drv)`
 
-Note that `lv_disp_drv_t` also needs to be static, global or dynamically allocated and not a local variable destroyed if goes out of the scope. 
+Note that `lv_disp_drv_t` also needs to be a static, global or dynamically allocated variable. 
 
 ### Mandatory fields
 In the most simple case only the following fields of `lv_disp_drv_t` need to be set:
@@ -68,19 +90,27 @@ In the most simple case only the following fields of `lv_disp_drv_t` need to be
 LVGL might render the screen in multiple chunks and therefore call `flush_cb` multiple times. To see if the current one is the last chunk of rendering use `lv_disp_flush_is_last(&disp_drv)`.
 
 ### Optional fields 
-There are some optional data fields:
-- `color_chroma_key` A color which will be drawn as transparent on chrome keyed images. Set to `LV_COLOR_CHROMA_KEY` by default from `lv_conf.h`.
+There are some optional display driver data fields:
+- `physical_hor_res` horizontal resolution of the full / physical display in pixels. Only set this when _not_ using the full screen (defaults to -1 / same as `hor_res`).
+- `physical_ver_res` vertical resolution of the full / physical display in pixels. Only set this when _not_ using the full screen (defaults to -1 / same as `ver_res`).
+- `offset_x` horizontal offset from the the full / physical display in pixels. Only set this when _not_ using the full screen (defaults to 0).
+- `offset_y` vertical offset from the the full / physical display in pixels. Only set this when _not_ using the full screen (defaults to 0).
+- `color_chroma_key` A color which will be drawn as transparent on chrome keyed images. Set to `LV_COLOR_CHROMA_KEY` from `lv_conf.h` by default.
 - `anti_aliasing` use anti-aliasing (edge smoothing). Enabled by default if `LV_COLOR_DEPTH` is set to at least 16 in `lv_conf.h`.
 - `rotated` and `sw_rotate` See the [Rotation](#rotation) section below.
-- `screen_transp` if `1` the screen itself can have transparency as well. `LV_COLOR_SCREEN_TRANSP` needs to enabled in `lv_conf.h` and requires `LV_COLOR_DEPTH 32`.
+- `screen_transp` if `1` the screen itself can have transparency as well. `LV_COLOR_SCREEN_TRANSP` must be enabled in `lv_conf.h` and `LV_COLOR_DEPTH` must be 32.
+- `user_data` A custom `void` user data for the driver.
+- `full_refresh` always redrawn the whole screen (see above)
+- `direct_mode` drive directly into the frame buffer (see above)
 - `user_data` A custom `void `user data for the driver..
 
-Some other optional callbacks to make easier and more optimal to work with monochrome, grayscale or other non-standard RGB displays:
+
+Some other optional callbacks to make it easier and more optimal to work with monochrome, grayscale or other non-standard RGB displays:
 - `rounder_cb` Round the coordinates of areas to redraw. E.g. a 2x2 px can be converted to 2x8.
 It can be used if the display controller can refresh only areas with specific height or width (usually 8 px height with monochrome displays).
 - `set_px_cb` a custom function to write the draw buffer. It can be used to store the pixels more compactly in the draw buffer if the display has a special color format. (e.g. 1-bit monochrome, 2-bit grayscale etc.)
-This way the buffers used in `lv_disp_draw_buf_t` can be smaller to hold only the required number of bits for the given area size. Note that, rendering with `set_px_cb` is slower than normal rendering.
-- `monitor_cb` A callback function that tells how many pixels were refreshed in how much time. Called when the last chunk is rendered and sent to the display. 
+This way the buffers used in `lv_disp_draw_buf_t` can be smaller to hold only the required number of bits for the given area size. Note that rendering with `set_px_cb` is slower than normal rendering.
+- `monitor_cb` A callback function that tells how many pixels were refreshed and in how much time. Called when the last chunk is rendered and sent to the display. 
 - `clean_dcache_cb` A callback for cleaning any caches related to the display.
 
 LVGL has built-in support to several GPUs (see `lv_conf.h`) but if something else is required these functions can be used to make LVGL use a GPU:
@@ -110,7 +140,7 @@ void my_flush_cb(lv_disp_drv_t * disp_drv, const lv_area_t * area, lv_color_t *
     int32_t x, y;
     for(y = area->y1; y <= area->y2; y++) {
         for(x = area->x1; x <= area->x2; x++) {
-            put_px(x, y, *color_p)
+            put_px(x, y, *color_p);
             color_p++;
         }
     }
@@ -170,7 +200,7 @@ LVGL supports rotation of the display in 90 degree increments. You can select wh
 
 If you select software rotation (`sw_rotate` flag set to 1), LVGL will perform the rotation for you. Your driver can and should assume that the screen width and height have not changed. Simply flush pixels to the display as normal. Software rotation requires no additional logic in your `flush_cb` callback.
 
-There is a noticeable amount of overhead to performing rotation in software, which is why hardware rotation is also available. In this mode, LVGL draws into the buffer as though your screen now has the width and height inverted. You are responsible for rotating the provided pixels yourself.
+There is a noticeable amount of overhead to performing rotation in software. Hardware rotation is  available to avoid unwanted slow downs. In this mode, LVGL draws into the buffer as if your screen width and height were swapped. You are responsible for rotating the provided pixels yourself. 
 
 The default rotation of your display when it is initialized can be set using the `rotated` flag. The available options are `LV_DISP_ROT_NONE`, `LV_DISP_ROT_90`, `LV_DISP_ROT_180`, or `LV_DISP_ROT_270`. The rotation values are relative to how you would rotate the physical display in the clockwise direction. Thus, `LV_DISP_ROT_90` means you rotate the hardware 90 degrees clockwise, and the display rotates 90 degrees counterclockwise to compensate.
 

docs/porting/indev.md

@@ -9,7 +9,7 @@
 To register an input device an `lv_indev_drv_t` variable has to be initialized:
 
 ```c
-lv_indev_drv_t indev_drv;
+static lv_indev_drv_t indev_drv;
 lv_indev_drv_init(&indev_drv);      /*Basic initialization*/
 indev_drv.type =...                 /*See below.*/
 indev_drv.read_cb =...              /*See below.*/
@@ -17,7 +17,7 @@ indev_drv.read_cb =...              /*See below.*/
 lv_indev_t * my_indev = lv_indev_drv_register(&indev_drv);
 ```
 
-`type` can be
+The `type` member can be:
 - `LV_INDEV_TYPE_POINTER` touchpad or mouse
 - `LV_INDEV_TYPE_KEYPAD` keyboard or keypad
 - `LV_INDEV_TYPE_ENCODER` encoder with left/right turn and push options
@@ -75,7 +75,7 @@ void keyboard_read(lv_indev_drv_t * drv, lv_indev_data_t*data){
 ```
 
 ### Encoder
-With an encoder you can do 4 things:
+With an encoder you can do the following:
 1. Press its button
 2. Long-press its button
 3. Turn left
@@ -84,8 +84,8 @@ With an encoder you can do 4 things:
 In short, the Encoder input devices work like this:
 - By turning the encoder you can focus on the next/previous object.
 - When you press the encoder on a simple object (like a button), it will be clicked.
-- If you press the encoder on a complex object (like a list, message box, etc.) the object will go to edit mode whereby turning the encoder you can navigate inside the object.
-- To leave edit mode press long the button.
+- If you press the encoder on a complex object (like a list, message box, etc.) the object will go to edit mode whereby you can navigate inside the object by turning the encoder.
+- To leave edit mode, long press the button.
 
 
 To use an *Encoder* (similarly to the *Keypads*) the objects should be added to groups.
@@ -115,7 +115,7 @@ You need to have 3 buttons available:
 - `LV_KEY_RIGHT` will simulate turning encoder right
 - other keys will be passed to the focused widget
 
-If you hold the keys it will simulate encoder click with period specified in `indev_drv.long_press_rep_time`.
+If you hold the keys it will simulate an encoder advance with period specified in `indev_drv.long_press_rep_time`.
 
 ```c
 indev_drv.type = LV_INDEV_TYPE_ENCODER;
@@ -123,7 +123,7 @@ indev_drv.read_cb = encoder_with_keys_read;
 
 ...
 
-bool encoder_with_keys_read(lv_indev_drv_t * drv, lv_indev_data_t*data){
+void encoder_with_keys_read(lv_indev_drv_t * drv, lv_indev_data_t*data){
   data->key = last_key();            /*Get the last pressed or released key*/
                                      /* use LV_KEY_ENTER for encoder press */
   if(key_pressed()) data->state = LV_INDEV_STATE_PRESSED;
@@ -132,8 +132,6 @@ bool encoder_with_keys_read(lv_indev_drv_t * drv, lv_indev_data_t*data){
       /* Optionally you can also use enc_diff, if you have encoder*/
       data->enc_diff = enc_get_new_moves();
   }
-
-  return false; /*No buffering now so no more data read*/
 }
 ```
 
@@ -171,7 +169,7 @@ void button_read(lv_indev_drv_t * drv, lv_indev_data_t*data){
 
 ### Parameters
 
-The default value of the following parameters can changed in `lv_indev_drv_t`:
+The default value of the following parameters can be changed in `lv_indev_drv_t`:
 - `scroll_limit` Number of pixels to slide before actually scrolling the object.
 - `scroll_throw`  Scroll throw (momentum) slow-down in [%]. Greater value means faster slow-down.
 - `long_press_time` Press time to send `LV_EVENT_LONG_PRESSED` (in milliseconds)
@@ -181,18 +179,18 @@ The default value of the following parameters can changed in `lv_indev_drv_t`:
 ### Feedback
 
 Besides `read_cb` a `feedback_cb` callback can be also specified in `lv_indev_drv_t`.
-`feedback_cb` is called when any type of event is sent by the input devices (independently from its type). This allows generating feedback for the user, e.g. to play a sound on `LV_EVENT_CLICKED`.
+`feedback_cb` is called when any type of event is sent by the input devices (independently of its type). This allows generating feedback for the user, e.g. to play a sound on `LV_EVENT_CLICKED`.
 
 
 ### Associating with a display
-Every input device is associated with a display. By default, a new input device is added to the lastly created or the explicitly selected (using `lv_disp_set_default()`) display.
+Every input device is associated with a display. By default, a new input device is added to the last  display created or explicitly selected (using `lv_disp_set_default()`).
 The associated display is stored and can be changed in `disp` field of the driver.
 
 ### Buffered reading
-By default LVGL calls `read_cb` periodically. This way there is a chance that some user gestures are missed. 
+By default, LVGL calls `read_cb` periodically. Because of this intermittent polling there is a chance that some user gestures are missed. 
 
-To solve this you can write an event driven driver for your input device that buffers measured data. In `read_cb` you can set the buffered data instead of reading the input device. 
-You can set the `data->continue_reading` flag to tell that LVGL there is more data to read and it should call the `read_cb` again.
+To solve this you can write an event driven driver for your input device that buffers measured data. In `read_cb` you can report the buffered data instead of directly reading the input device. 
+Setting the `data->continue_reading` flag will tell LVGL there is more data to read and it should call `read_cb` again.
 
 ## Further reading
 

docs/porting/log.md

@@ -4,7 +4,7 @@
 ```
 # Logging
 
-LVGL has built-in *Log* module to inform the user about what is happening in the library.
+LVGL has a built-in *Log* module to inform the user about what is happening in the library.
 
 ## Log level
 To enable logging, set `LV_USE_LOG  1` in `lv_conf.h` and set `LV_LOG_LEVEL` to one of the following values:

docs/porting/os.md

@@ -16,6 +16,39 @@ If you need to use real tasks or threads, you need a mutex which should be invok
 Also, you have to use the same mutex in other tasks and threads around every LVGL (`lv_...`) related function call and code.
 This way you can use LVGL in a real multitasking environment. Just make use of a mutex to avoid the concurrent calling of LVGL functions.
 
+Here is some pseudocode to illustrate the concept:
+
+```c
+static mutex_t lvgl_mutex;
+
+void lvgl_thread(void)
+{
+    while(1) {
+        mutex_lock(&lvgl_mutex);
+        lv_task_handler();
+        mutex_unlock(&lvgl_mutex);
+        thread_sleep(10); /* sleep for 10 ms */
+    }
+}
+
+void other_thread(void)
+{
+    /* You must always hold the mutex while using LVGL APIs */
+    mutex_lock(&lvgl_mutex);
+    lv_obj_t *img = lv_img_create(lv_scr_act());
+    mutex_unlock(&lvgl_mutex);
+    
+    while(1) {
+        mutex_lock(&lvgl_mutex);
+        /* change to the next image */
+        lv_img_set_src(img, next_image);
+        mutex_unlock(&lvgl_mutex);
+        thread_sleep(2000);
+    }
+}
+```
+
 ## Interrupts
 Try to avoid calling LVGL functions from interrupt handlers (except `lv_tick_inc()` and `lv_disp_flush_ready()`). But if you need to do this you have to disable the interrupt which uses LVGL functions while `lv_timer_handler` is running.
-It's a better approach to set a flag or some value and periodically check it in an `lv_timer`.
+
+It's a better approach to simply set a flag or some value in the interrupt, and periodically check it in an LVGL timer (which is run by `lv_timer_handler`).

docs/porting/project.md

@@ -3,7 +3,7 @@
 :github_url: |github_link_base|/porting/project.md
 ```
 
-# Set-up a project
+# Set up a project
 
 ## Get the library
 
@@ -15,21 +15,30 @@ The graphics library itself is the **lvgl** directory which should be copied int
 
 ## Configuration file
 
-There is a configuration header file for LVGL called **lv_conf.h**. In this you can set the library's basic behavior, disable unused modules and features, adjust the size of memory buffers in compile-time, etc.
+There is a configuration header file for LVGL called **lv_conf.h**. You modify this header to set the library's basic behavior, disable unused modules and features, adjust the size of memory buffers in compile-time, etc.
 
 Copy **lvgl/lv_conf_template.h** next to the *lvgl* directory and rename it to *lv_conf.h*. Open the file and change the `#if 0` at the beginning to `#if 1` to enable its content.
 
-*lv_conf.h* can be copied to another place as well but then you should add `LV_CONF_INCLUDE_SIMPLE` define to your compiler options (e.g. `-DLV_CONF_INCLUDE_SIMPLE` for gcc compiler) and set the include path manually. 
+Comments in the config file explain the meaning of the options. Be sure to set at least `LV_COLOR_DEPTH` according to your display's color depth.
+
+Alternatively, `lv_conf.h` can be copied to another place but then you should add the `LV_CONF_INCLUDE_SIMPLE` define to your compiler options (e.g. `-DLV_CONF_INCLUDE_SIMPLE` for GCC compiler) and set the include path manually (e.g. `-I../include/gui`). 
 In this case LVGL will attempt to include `lv_conf.h` simply with `#include "lv_conf.h"`.
 
-In the config file comments explain the meaning of the options. Be sure to set at least `LV_COLOR_DEPTH` according to your display's color depth.
+You can even use a different name for `lv_conf.h`. The custom path can be set via the `LV_CONF_PATH` define.
+For example `-DLV_CONF_PATH="/home/joe/my_project/my_custom_conf.h"`
+
+If `LV_CONF_SKIP` is defined, LVGL will not try to include `lv_conf.h`. Instead you can pass the config defines using build options. For example `"-DLV_COLOR_DEPTH=32 -DLV_USE_BTN 1"`. The unset options will get a default value which is the same as the ones in `lv_conf_template.h`.
+
+LVGL also can be used via `Kconfig` and `menuconfig`.  You can use `lv_conf.h` together with Kconfig, but keep in mind that the value from `lv_conf.h` or build settings (`-D...`) overwrite the values set in Kconfig. To ignore the configs from `lv_conf.h` simply remove its content, or define `LV_CONF_SKIP`. 
+
+
 
 ## Initialization
 
-To use the graphics library you have to initialize it and the other components too. The order of the initialization is:
+To use the graphics library you have to initialize it and setup required components. The order of the initialization is:
 
 1. Call `lv_init()`.
 2. Initialize your drivers.
-3. Register the display and input devices drivers in LVGL.  Lear more about [Display](/porting/display) and [Input device](/porting/indev) registration.
-4. Call `lv_tick_inc(x)` every `x` milliseconds in an interrupt to tell the elapsed time. [Learn more](/porting/tick).
+3. Register the display and input devices drivers in LVGL.  Learn more about [Display](/porting/display) and [Input device](/porting/indev) registration.
+4. Call `lv_tick_inc(x)` every `x` milliseconds in an interrupt to report the elapsed time to LVGL. [Learn more](/porting/tick).
 5. Call `lv_timer_handler()` every few milliseconds to handle LVGL related tasks. [Learn more](/porting/task-handler).

docs/porting/sleep.md

@@ -21,7 +21,7 @@ while(1) {
 }
 ```
 
-You should also add the below lines to your input device read function to signal a wake-up (press, touch or click etc.) happened:
+You should also add the following lines to your input device read function to signal a wake-up (press, touch or click etc.) has happened:
 ```c
 lv_tick_inc(LV_DISP_DEF_REFR_PERIOD);  /*Force task execution on wake-up*/
 timer_start();                         /*Restart the timer where lv_tick_inc() is called*/

docs/porting/tick.md

@@ -12,7 +12,7 @@ You need to call the `lv_tick_inc(tick_period)` function periodically and provid
 
 With FreeRTOS `lv_tick_inc` can be called in `vApplicationTickHook`.
 
-On Linux based operating system (e.g. on Raspberry Pi) `lv_tick_inc` can be called in a thread like below:
+On Linux based operating systems (e.g. on Raspberry Pi) `lv_tick_inc` can be called in a thread like below:
 ```c
 void * tick_thread (void *args)
 {

docs/widgets/core/arc.md

@@ -6,11 +6,11 @@
 
 ## Overview
 
-The Arc consists of a background and a foreground arc. The foregrond (indicator) can be touch-adjusted.
+The Arc consists of a background and a foreground arc. The foreground (indicator) can be touch-adjusted.
 
 ## Parts and Styles
 - `LV_PART_MAIN`  Draws a background using the typical background style properties and an arc using the arc style properties. The arc's size and position will respect the *padding* style properties.
-- `LV_PART_INDICATOR` Draws an other arc using the *arc* style properties. Its padding values are interpreted relative to the background arc. 
+- `LV_PART_INDICATOR` Draws another arc using the *arc* style properties. Its padding values are interpreted relative to the background arc. 
 - `LV_PART_KNOB` Draws a handle on the end of the indicator using all background properties and padding values. With zero padding the knob size is the same as the indicator's width. 
 Larger padding makes it larger, smaller padding makes it smaller. 
 
@@ -20,7 +20,7 @@ Larger padding makes it larger, smaller padding makes it smaller.
 
 A new value can be set using `lv_arc_set_value(arc, new_value)`. 
 The value is interpreted in a range (minimum and maximum values) which can be modified with `lv_arc_set_range(arc, min, max)`.
-The default range is 1..100.
+The default range is 0..100.
 
 The indicator arc is drawn on the main part's arc. This if the value is set to maximum the indicator arc will cover the entire "background" arc.
 To set the start and end angle of the background arc use the `lv_arc_set_bg_angles(arc, start_angle, end_angle)` functions or `lv_arc_set_bg_start/end_angle(arc, angle)`. 
@@ -47,24 +47,43 @@ The change rate is defined in degree/second unit and can be set with `lv_arc_set
 
 
 ### Setting the indicator manually
-It also possible to set the angles of the indicator arc directly with `lv_arc_set_angles(arc, start_angle, end_angle)` function or `lv_arc_set_start/end_angle(arc, start_angle)`.
-In this case the set "value" and "mode" is ignored.
+It's also possible to set the angles of the indicator arc directly with `lv_arc_set_angles(arc, start_angle, end_angle)` function or `lv_arc_set_start/end_angle(arc, start_angle)`.
+In this case the set "value" and "mode" are ignored.
 
-In other words, settings angles and values are independent. You should use either value and angle settings. Mixing the two might result in unintended behavior. 
+In other words, the angle and value settings are independent. You should exclusively use one or the other. Mixing the two might result in unintended behavior.
 
-To make the arc non-adjustabe remove the style of the knob and make the object non-clickable:
+To make the arc non-adjustable, remove the style of the knob and make the object non-clickable:
 ```c
 lv_obj_remove_style(arc, NULL, LV_PART_KNOB);
 lv_obj_clear_flag(arc, LV_OBJ_FLAG_CLICKABLE);
 ```
 
+### Advanced hit test
+
+If the `LV_OBJ_FLAG_ADV_HITTEST` flag is enabled the arc can be clicked through in the middle. Clicks are recognized only on the ring of the background arc. `lv_obj_set_ext_click_size()` makes the sensitive area larger inside and outside with the given number of pixels. 
+
+
+
+
 ## Events
 - `LV_EVENT_VALUE_CHANGED` sent when the arc is pressed/dragged to set a new value.
-- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` are sent for the background rectangle, the background arc, the foreground arc and the knob to allow hooking the drawing. 
-For more detail on the backround rectangle part see the [Base object](/widgets/obj#events)'s documentation. The fields of `lv_obj_draw_dsc_t` are set as follows:
-  - For both arcs: `clip_area`, `p1` (center of the arc), `radius`, `arc_dsc`, `part`. 
-  - For the knob: `clip_area`, `draw_area`, `rect_dsc`, `part`.
+- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` are sent with the following types:
+    - `LV_ARC_DRAW_PART_BACKGROUND` The background arc. 
+        - `part`: `LV_PART_MAIN`
+        - `p1`: center of the arc
+        - `radius`: radius of the arc
+        - `arc_dsc`
+    - `LV_ARC_DRAW_PART_FOREGROUND` The foreground arc.  
+        - `part`: `LV_PART_INDICATOR`
+        - `p1`: center of the arc
+        - `radius`: radius of the arc
+        - `arc_dsc`
+    - LV_ARC_DRAW_PART_KNOB The knob
+        - `part`: `LV_PART_KNOB`
+        - `draw_area`: the area of the knob
+        - `rect_dsc`:
     
+See the events of the [Base object](/widgets/obj) too.
     
 Learn more about [Events](/overview/event).
 

docs/widgets/core/bar.md

@@ -15,7 +15,7 @@ Not only the end, but also the start value of the bar can be set, which changes
 
 ## Parts and Styles
 - `LV_PART_MAIN` The background of the bar and it uses the typical background style properties. Adding padding makes the indicator smaller or larger. The `anim_time` style property sets the animation time if the values set with `LV_ANIM_ON`.
-- `LV_PART_INDICATOR` The indicator itself; also also uses all the typical background properties.
+- `LV_PART_INDICATOR` The indicator itself; also uses all the typical background properties.
  
 ## Usage
 
@@ -27,14 +27,19 @@ The default range is 1..100.
 The new value in `lv_bar_set_value` can be set with or without an animation depending on the last parameter (`LV_ANIM_ON/OFF`).
 
 ### Modes
-The bar can be one the following modes:
+The bar can be one of the following modes:
 - `LV_BAR_MODE_NORMAL` A normal bar as described above
 - `LV_BAR_SYMMETRICAL` Draw the indicator from the zero value to current value. Requires a negative minimum range and positive maximum range.
 - `LV_BAR_RANGE` Allows setting the start value too by `lv_bar_set_start_value(bar, new_value, LV_ANIM_ON/OFF)`. The start value always has to be smaller than the end value.
 
 ## Events
-- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` are sent for both main and indicator parts to allow hooking the drawing. For more detail on the main part see the [Base object](/widgets/obj#events)'s documentation.
-For the indicator the following fields are used: `clip_area`, `draw_area`, `rect_dsc`, `part`. 
+- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` are sent for the following parts:
+    - `LV_BAR_DRAW_PART_INDICATOR` The indicator of the bar
+        - `part`: `LV_PART_INDICATOR` 
+        - `draw_area`: area of the indicator
+        - `rect_dsc`
+        
+See the events of the [Base object](/widgets/obj) too.
 
 Learn more about [Events](/overview/event).
 

docs/widgets/core/btn.md

@@ -27,10 +27,10 @@ There are no new features compared to [Base object](/widgets/obj).
 Learn more about [Events](/overview/event).
 
 ## Keys
-If `LV_OBJ_FLAG_CHECKABLE` is enabled `LV_KEY_RIGHT` and `LV_KEY_UP` make the object checked, and `LV_KEY_LEFT` and `LV_KEY_DOWN` make it unchecked.
-
 Note that the state of `LV_KEY_ENTER` is translated to `LV_EVENT_PRESSED/PRESSING/RELEASED` etc.
 
+See the events of the [Base object](/widgets/obj) too.
+
 Learn more about [Keys](/overview/indev).
 
 ## Example

docs/widgets/core/btnmatrix.md

@@ -36,19 +36,20 @@ In addition to the width, each button can be customized with the following param
 - `LV_BTNMATRIX_CTRL_NO_REPEAT` Disable repeating when the button is long pressed
 - `LV_BTNMATRIX_CTRL_DISABLED` Makes a button disabled Like `LV_STATE_DISABLED` on normal objects
 - `LV_BTNMATRIX_CTRL_CHECKABLE` Enable toggling of a button. I.e. `LV_STATE_CHECHED` will be added/removed as the button is clicked
-- `LV_BTNMATRIX_CTRL_CHECKED` MAke the button checked. It will use the `LV_STATE_CHECHKED` styles.
-- `LV_BTNMATRIX_CTRL_CLICK_TRIG` Enabled: send LV_EVENT_VALUE_CHANGE on CLICK, Disabled: send LV_EVENT_VALUE_CHANGE on PRESS*/
+- `LV_BTNMATRIX_CTRL_CHECKED` Make the button checked. It will use the `LV_STATE_CHECHKED` styles.
+- `LV_BTNMATRIX_CTRL_CLICK_TRIG` Enabled: send LV_EVENT_VALUE_CHANGE on CLICK, Disabled: send LV_EVENT_VALUE_CHANGE on PRESS
+- `LV_BTNMATRIX_CTRL_POPOVER` Show the button label in a popover when pressing this key
 - `LV_BTNMATRIX_CTRL_RECOLOR` Enable recoloring of button texts with `#`. E.g. `"It's #ff0000 red#"`
 - `LV_BTNMATRIX_CTRL_CUSTOM_1` Custom free to use flag
 - `LV_BTNMATRIX_CTRL_CUSTOM_2` Custom free to use flag
 
-By default all flags are disabled.
+By default, all flags are disabled.
 
 To set or clear a button's control attribute, use `lv_btnmatrix_set_btn_ctrl(btnm, btn_id, LV_BTNM_CTRL_...)` and 
 `lv_btnmatrix_clear_btn_ctrl(btnm, btn_id, LV_BTNMATRIX_CTRL_...)` respectively. More `LV_BTNM_CTRL_...` values can be OR-ed
 
-To set/clear the same control attribute for all buttons of a button matrix, use `lv_btnmatrix_set_btn_ctrl_all(btnm, btn_id, LV_BTNM_CTRL_...)` and 
-`lv_btnmatrix_clear_btn_ctrl_all(btnm, btn_id, LV_BTNMATRIX_CTRL_...)`.
+To set/clear the same control attribute for all buttons of a button matrix, use `lv_btnmatrix_set_btn_ctrl_all(btnm, LV_BTNM_CTRL_...)` and 
+`lv_btnmatrix_clear_btn_ctrl_all(btnm, LV_BTNMATRIX_CTRL_...)`.
 
 The set a control map for a button matrix (similarly to the map for the text), use `lv_btnmatrix_set_ctrl_map(btnm, ctrl_map)`.
 An element of `ctrl_map` should look like `ctrl_map[0] = width | LV_BTNM_CTRL_NO_REPEAT |  LV_BTNM_CTRL_CHECHKABLE`. 
@@ -59,9 +60,14 @@ The "One check" feature can be enabled with `lv_btnmatrix_set_one_check(btnm, tr
 
 ## Events
 - `LV_EVENT_VALUE_CHANGED` Sent when a button is pressed/released or repeated after long press. The event parameter is set to the ID of the pressed/released button.
-- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` are sent for both the main and the items (buttons) parts to allow hooking the drawing. 
-For more detail on the main part see the [Base object](/widgets/obj#events)'s documentation.
-For the buttons the following fields are used: `clip_area`, `draw_area`, `rect_dsc`, `rect_dsc`, `part`, `id` (index of the button being drawn). 
+- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` are sent for the following types:
+    - `LV_BTNMATRIX_DRAW_PART_BTN` The individual buttons.
+        - `part`: `LV_PART_ITEMS`
+        - `id`:index of the button being drawn 
+        - `draw_area`: the area of teh button
+        - `rect_dsc`
+
+See the events of the [Base object](/widgets/obj) too.
 
 `lv_btnmatrix_get_selected_btn(btnm)` returns the index of the most recently released or focused button or `LV_BTNMATRIX_BTN_NONE` if no such button.
 

docs/widgets/core/canvas.md

@@ -33,10 +33,13 @@ For `LV_IMG_CF_INDEXED_1/2/4/8` color formats a palette needs to be
 initialized with  `lv_canvas_set_palette(canvas, 3, LV_COLOR_RED)`. It sets pixels with *index=3* to red.
 
 ### Drawing
-To set a pixel on the canvas, use `lv_canvas_set_px(canvas, x, y, LV_COLOR_RED)`.
-With `LV_IMG_CF_INDEXED_...` or `LV_IMG_CF_ALPHA_...`, the index of the color or the alpha value needs to be passed as color. 
+To set a pixel's color on the canvas, use `lv_canvas_set_px_color(canvas, x, y, LV_COLOR_RED)`.
+With `LV_IMG_CF_INDEXED_...`  the index of the color needs to be passed as color. 
 E.g. `lv_color_t c; c.full = 3;`
 
+To set a pixel's opacity with `LV_IMG_CF_TRUE_COLOR_ALPHA` or `LV_IMG_CF_ALPHA_...` format on the canvas, use `lv_canvas_set_px_opa(canvas, x, y, opa)`.
+
+
 `lv_canvas_fill_bg(canvas, LV_COLOR_BLUE, LV_OPA_50)` fills the whole canvas to blue with 50% opacity. Note that if the current color format doesn't support colors (e.g. `LV_IMG_CF_ALPHA_2BIT`) the color will be ignored. 
 Similarly, if opacity is not supported (e.g. `LV_IMG_CF_TRUE_COLOR`) it will be ignored.
 
@@ -59,7 +62,7 @@ The draw function can draw to any color format. For example, it's possible to dr
 `lv_canvas_transform()` can be used to rotate and/or scale the image of an image and store the result on the canvas. 
 The function needs the following parameters:
 - `canvas` pointer to a canvas object to store the result of the transformation.
-- `img pointer` to an image descriptor to transform. Can be the image descriptor of an other canvas too (`lv_canvas_get_img()`).
+- `img pointer` to an image descriptor to transform. Can be the image descriptor of another canvas too (`lv_canvas_get_img()`).
 - `angle` the angle of rotation (0..3600), 0.1 deg resolution
 - `zoom` zoom factor (256: no zoom, 512: double size, 128: half size);
 - `offset_x` offset X to tell where to put the result data on destination canvas
@@ -75,7 +78,10 @@ A given area of the canvas can be blurred horizontally with `lv_canvas_blur_hor(
 `r` is the radius of the blur (greater value means more intensive burring). `area` is the area where the blur should be applied (interpreted relative to the canvas).
 
 ## Events
-The same events are sent as for the [Images](/widgets/core/img).
+No special events are sent by canvas objects.
+The same events are sent as for the 
+
+See the events of the [Images](/widgets/core/img) too.
 
 Learn more about [Events](/overview/event).
 

docs/widgets/core/checkbox.md

@@ -7,13 +7,13 @@
 
 ## Overview
 
-The Checkbox object is created from a "tick box" and a label. When the Chackbox is clicked the tick box is toggled.
+The Checkbox object is created from a "tick box" and a label. When the Checkbox is clicked the tick box is toggled.
 
 ## Parts and Styles
-- `LV_PART_MAIN` The is the background of the Checkbox and it uses the text and all the typical backround style properties. 
+- `LV_PART_MAIN` The is the background of the Checkbox and it uses the text and all the typical background style properties. 
 `pad_column` adjusts the spacing between the tickbox and the label
-- `LV_PART_INDICATOR` The "tick box" is a square that uses all the typical backround style properties. 
-By default its size is equal to the height of the main part's font. Padding properties make the tick box larger in the respective directions.
+- `LV_PART_INDICATOR` The "tick box" is a square that uses all the typical background style properties. 
+By default, its size is equal to the height of the main part's font. Padding properties make the tick box larger in the respective directions.
 
 The Checkbox is added to the default group (if it is set). 
 
@@ -36,9 +36,13 @@ lv_obj_add_state(cb, LV_STATE_CHECKED | LV_STATE_DISABLED); /*Make the checkbox
 
 ## Events
 - `LV_EVENT_VALUE_CHANGED` Sent when the checkbox is toggled.
-- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` are sent for both main and indicator parts to allow hooking the drawing. 
-For more detail on the main part see the [Base object](/widgets/obj#events)'s documentation.
-For the indicator the following fields are used: `clip_area`, `draw_area`, `rect_dsc`, `part`. 
+- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` are sent for the following types:
+    - `LV_CHECKBOX_DRAW_PART_BOX` The tickbox of the checkbox
+        - `part`: `LV_PART_INDICATOR` 
+        - `draw_area`: the area of the tickbox
+        - `rect_dsc`
+
+See the events of the [Base object](/widgets/obj) too.
 
 Learn more about [Events](/overview/event).
 

docs/widgets/core/dropdown.md

@@ -22,7 +22,7 @@ The Dropdown widget is built from the elements: "button" and "list" (both not re
 - `LV_PART_MAIN` The background of the button. Uses the typical background properties and text properties for the text on it.
 - `LV_PART_INDICATOR` Typically an arrow symbol that can be an image or a text (`LV_SYMBOL`).
 
-The button goes to `LV_STATE_CHECKED` when its opened.
+The button goes to `LV_STATE_CHECKED` when it's opened.
 
 ### List
 - `LV_PART_MAIN` The list itself. Uses the typical background properties. `max_height` can be used to limit the height of the list. 
@@ -30,10 +30,11 @@ The button goes to `LV_STATE_CHECKED` when its opened.
 - `LV_PART_SELECTED` Refers to the currently pressed, checked or pressed+checked option. Also uses the typical background properties. 
 
 As list does not exist when the drop-down list is closed it's not possible to simply add styles to it.
-Instead the following should be done:
-1. Ad an event handler to the button for `LV_EVENT_VALUE_CHANGED` (triggered when the list is opened/closed)
-2. Use `lv_obj_t * list = lv_dropdown_get_list(dropdown)`
-3. `if(list != NULL) {/*Add the styles to the list*/}`
+Insteada add an event handler to the button for `LV_EVENT_READY` (triggered when the list is opened) and add styles to the list in it like this:
+```c
+lv_obj_t * list = lv_dropdown_get_list(dropdown) /*Get the list*/
+lv_obj_add_style(list, &my_style, ...)           /*Add the styles to the list*/}`
+```
 
 Alternatively the theme can be extended with the new styles. 
  
@@ -62,7 +63,7 @@ The list can be created on any side. The default `LV_DIR_BOTTOM` can be modified
 If the list would be vertically out of the screen, it will be aligned to the edge.
 
 ### Symbol
-A symbol (typically an arrow) can be added to the drop down list with `lv_dropdown_set_symbol(dropdown, LV_SYMBOL_...)`
+A symbol (typically an arrow) can be added to the dropdown list with `lv_dropdown_set_symbol(dropdown, LV_SYMBOL_...)`
 
 If the direction of the drop-down list is  `LV_DIR_LEFT` the symbol will be shown on the left, otherwise on the right.
 
@@ -76,6 +77,10 @@ To manually open or close the drop-down list the `lv_dropdown_open/close(dropdow
 ## Events
 Apart from the [Generic events](../overview/event.html#generic-events), the following [Special events](../overview/event.html#special-events) are sent by the drop-down list:
 - `LV_EVENT_VALUE_CHANGED` Sent when the new option is selected or the list is opened/closed.
+- `LV_EVENT_APPLY` Sent when the list is opened
+- `LV_EVENT_CANCEL`  Sent when the list is closed
+
+See the events of the [Base object](/widgets/obj) too.
 
 Learn more about [Events](/overview/event).
 

docs/widgets/core/img.md

@@ -92,9 +92,21 @@ In other words transformations work only on true color images stored as C array,
 
 Note that the real coordinates of image objects won't change during transformation. That is `lv_obj_get_width/height/x/y()` will return the original, non-zoomed coordinates.
 
+### Size mode
+
+By default, when the image is zoomed or rotated the real coordinates of the image object are not changed. 
+The larger content simply overflows the object's boundaries. 
+It also means the layouts are not affected the by the transformations. 
+
+If you need the object size to be updated to the transformed size set `lv_img_set_size_mode(img, LV_IMG_SIZE_MODE_REAL)`. (The previous mode is the default and called `LV_IMG_SIZE_MODE_VIRTUAL`).
+In this case if the width/height of the object is set to `LV_SIZE_CONTENT` the object's size will be set to the zoomed and rotated size.
+If an explicit size is set then the overflowing content will be cropped. 
+
 ## Events
 No special events are sent by image objects.
 
+See the events of the [Base object](/widgets/obj) too.
+
 Learn more about [Events](/overview/event).
 
 ## Keys

docs/widgets/core/label.md

@@ -38,7 +38,7 @@ Similary, the policies can be applied if the height of the text is greater than
 - `LV_LABEL_LONG_DOT` Replaces the last 3 characters from bottom right corner of the label with dots (`.`) 
 - `LV_LABEL_LONG_SCROLL` If the text is wider than the label scroll it horizontally back and forth. If it's higher, scroll vertically. Only one direction is scrolled and horizontal scrolling has higher precedence.
 - `LV_LABEL_LONG_SCROLL_CIRCULAR` If the text is wider than the label scroll it horizontally continously. If it's higher, scroll vertically. Only one direction is scrolled and horizontal scrolling has higher precedence.
-- `LV_LABEL_LONG_CLIP` Simply clip the parts of the text outside of the label.
+- `LV_LABEL_LONG_CLIP` Simply clip the parts of the text outside the label.
 
 You can specify the long mode with `lv_label_set_long_mode(label, LV_LABEL_LONG_...)`
 
@@ -51,7 +51,7 @@ In the text, you can use commands to recolor parts of the text. For example: `"W
 This feature can be enabled individually for each label by `lv_label_set_recolor()` function. 
 
 ### Text selection
-If enabled by `LV_LABEL_TEXT_SELECTION` part of the text can be selected. It's similar when on PC a you use your mouse to select a text. 
+If enabled by `LV_LABEL_TEXT_SELECTION` part of the text can be selected. It's similar to when you use your mouse on a PC to select a text. 
 The whole mechanism (click and select the text as you drag your finger/mouse) is implemented in [Text area](/widgets/core/textarea) and the Label widget only allows manual text selection with
 `lv_label_get_text_selection_start(label, start_char_index)` and `lv_label_get_text_selection_start(label, end_char_index)`.
  
@@ -64,6 +64,8 @@ The labels can display symbols alongside letters (or on their own). Read the [Fo
 ## Events
 No special events are sent by the Label.
 
+See the events of the [Base object](/widgets/obj) too.
+
 Learn more about [Events](/overview/event).
 
 ## Keys

docs/widgets/core/line.md

@@ -16,15 +16,17 @@ The Line object is capable of drawing straight lines between a set of points.
 The points have to be stored in an `lv_point_t` array and passed to the object by the `lv_line_set_points(lines, point_array, point_cnt)` function. 
 
 ### Auto-size
-By default the Line's width and height are set to `LV_SIZE_CONTENT`. This means it will automatically set its size to fit all the points. If the size is set explicitly, parts on the line may not be visible.
+By default, the Line's width and height are set to `LV_SIZE_CONTENT`. This means it will automatically set its size to fit all the points. If the size is set explicitly, parts on the line may not be visible.
 
 ### Invert y
-By default, the *y == 0* point is in the top of the object. It might be conter-intuitive in some cases so the y coordinates can be inverted with `lv_line_set_y_invert(line, true)`. In this case,  *y == 0* will be the bottom of the object. 
+By default, the *y == 0* point is in the top of the object. It might be counter-intuitive in some cases so the y coordinates can be inverted with `lv_line_set_y_invert(line, true)`. In this case,  *y == 0* will be the bottom of the object. 
 *y invert* is disabled by default.
 
 ## Events
 Only the [Generic events](../overview/event.html#generic-events) are sent by the object type.
 
+See the events of the [Base object](/widgets/obj) too.
+
 Learn more about [Events](/overview/event).
 
 ## Keys

docs/widgets/core/roller.md

@@ -23,18 +23,20 @@ Options are passed to the Roller as a string with `lv_roller_set_options(roller,
 You can select an option manually with `lv_roller_set_selected(roller, id, LV_ANIM_ON/OFF)`, where *id* is the index of an option.
 
 ### Get selected option
-The get the *index* of the currently selected option use `lv_roller_get_selected(roller)`.
+To get the *index* of the currently selected option use `lv_roller_get_selected(roller)`.
 
 `lv_roller_get_selected_str(roller, buf, buf_size)` will copy the name of the selected option to `buf`.
 
 ### Visible rows
 The number of visible rows can be adjusted with `lv_roller_set_visible_row_count(roller, num)`.
 
-This function calculates the height with the current style. If the font, line space, border width, etc of the roller changes this function needs to be called again. 
+This function calculates the height with the current style. If the font, line space, border width, etc. of the roller changes this function needs to be called again. 
 
 ## Events
 - `LV_EVENT_VALUE_CHANGED` Sent when a new option is selected.
 
+See the events of the [Base object](/widgets/obj) too.
+
 Learn more about [Events](/overview/event).
 
 ## Keys

docs/widgets/core/slider.md

@@ -12,7 +12,7 @@ The Slider object looks like a [Bar](/widgets/core/bar) supplemented with a knob
 ## Parts and Styles 
 - `LV_PART_MAIN` The background of the slider. Uses all the typical background style properties. `padding` makes the indicator smaller in the respective direction.
 - `LV_PART_INDICATOR` The indicator that shows the current state of the slider. Also uses all the typical background style properties.
-- `LV_PART_KNOB` A rectangle (or circle) drawn at the current value. Also uses all the typical background properties to describe the knob(s). By default the knob is square (with a optional corner radius) with side length equal to the smaller side of the slider. The knob can be made larger with the `padding` values. Padding values can be asymmetric too. 
+- `LV_PART_KNOB` A rectangle (or circle) drawn at the current value. Also uses all the typical background properties to describe the knob(s). By default, the knob is square (with an optional corner radius) with side length equal to the smaller side of the slider. The knob can be made larger with the `padding` values. Padding values can be asymmetric too. 
 
 ## Usage
 
@@ -22,9 +22,9 @@ To set an initial value use `lv_slider_set_value(slider, new_value, LV_ANIM_ON/O
 To specify the range (min, max values), `lv_slider_set_range(slider, min , max)` can be used.
 
 ### Modes
-The slider can be one the following modes:
+The slider can be one of the following modes:
 - `LV_SLIDER_MODE_NORMAL` A normal slider as described above
-- `LV_SLIDER_SYMMETRICAL` Draw the indicator form the zero value to current value. Requires negaitve minimum range and positive maximum range.
+- `LV_SLIDER_SYMMETRICAL` Draw the indicator form the zero value to current value. Requires negative minimum range and positive maximum range.
 - `LV_SLIDER_RANGE` Allows setting the start value too by `lv_bar_set_start_value(bar, new_value, LV_ANIM_ON/OFF)`. The start value has to be always smaller than the end value.
 
 The mode can be changed with `lv_slider_set_mode(slider, LV_SLIDER_MODE_...)`
@@ -35,9 +35,23 @@ In the latter case the knob moves to the point clicked and slider value changes
 
 ## Events
 - `LV_EVENT_VALUE_CHANGED` Sent while the slider is being dragged or changed with keys. 
-The event is sent continuously while the slider is dragged and once when released. Use `lv_slider_is_dragged` to detemine whether the Slider is still being dragged or has just been released.
+The event is sent continuously while the slider is dragged and once when released. Use `lv_slider_is_dragged` to determine whether the Slider is still being dragged or has just been released.
+- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` are sent for the following parts. 
+    - `LV_SLIDER_DRAW_PART_KNOB` The main (right) knob of the slider
+        - `part`: `LV_PART_KNOB` 
+        - `draw_area`: area of the indicator
+        - `rect_dsc`
+        - `id`: 0
+    - `LV_SLIDER_DRAW_PART_KNOB`  The left knob of the slider
+        - `part`: `LV_PART_KNOB` 
+        - `draw_area`: area of the indicator
+        - `rect_dsc`
+        - `id`: 1
+
+See the events of the [Bar](/widgets/core/bar) too.
 
 Learn more about [Events](/overview/event).
+
 ## Keys
 - `LV_KEY_UP/RIGHT` Increment the slider's value by 1
 - `LV_KEY_DOWN/LEFT` Decrement the slider's value by 1

docs/widgets/core/switch.md

@@ -25,6 +25,8 @@ To manually turn the switch on/off call `lvobj_add/clear_state(switch, LV_STATE_
 ## Events
 - `LV_EVENT_VALUE_CHANGED` Sent when the switch changes state.
 
+See the events of the [Base object](/widgets/obj) too.
+
 Learn more about [Events](/overview/event).
 
 ## Keys

docs/widgets/core/table.md

@@ -10,6 +10,7 @@ Tables, as usual, are built from rows, columns, and cells containing texts.
 
 The Table object is very lightweight because only the texts are stored. No real objects are created for cells but they are just drawn on the fly.
 
+The Table is added to the default group (if it is set). Besides the Table is an editable object to allow selecting a cell with encoder navigation too.
 
 ## Parts and Styles
 - `LV_PART_MAIN` The background of the table uses all the typical background style properties.
@@ -40,7 +41,7 @@ The height is calculated automatically from the cell styles (font, padding etc)
 
 ### Merge cells
 
-Cells can be merged horizontally with `lv_table_set_cell_merge_right(table, col, row, true)`. To merge more adjacent cells call this function for each cell.
+Cells can be merged horizontally with `lv_table_add_cell_ctrl(table, row, col, LV_TABLE_CELL_CTRL_MERGE_RIGHT)`. To merge more adjacent cells call this function for each cell.
 
 ### Scroll
 If the label's width or height is set to `LV_SIZE_CONTENT` that size will be used to show the whole table in the respective direction. 
@@ -49,16 +50,27 @@ E.g. `lv_obj_set_size(table, LV_SIZE_CONTENT, LV_SIZE_CONTENT)` automatically se
 If the width or height is set to a smaller number than the "intrinsic" size then the table becomes scrollable.
 
 ## Events
-- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` are sent for both main and items parts to allow hooking the drawing. 
-For more detail on the main part see the [Base object](/widgets/obj#events)'s documentation.
-For the items (cells) the following fields are used: `clip_area`, `draw_area`, `part`, `rect_dsc`, `label_dsc` `id` (current row × col count + current column). 
+- `LV_EVENT_VALUE_CHANGED` Sent when a new cell is selected with keys.
+- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` are sent for the following types:
+    - `LV_TABLE_DRAW_PART_CELL` The individual cells of the table
+        - `part`: `LV_PART_ITEMS` 
+        - `draw_area`: area of the indicator
+        - `rect_dsc`
+        - `label_dsc`
+        - `id`: current row × col count + current column 
 
+See the events of the [Base object](/widgets/obj) too.
 
 Learn more about [Events](/overview/event).
 
 ## Keys
 
-No *Keys* are processed by the object type.
+The following *Keys* are processed by the Tables:
+- `LV_KEY_RIGHT/LEFT/UP/DOWN/` Select a cell.
+
+Note that, as usual, the state of `LV_KEY_ENTER` is translated to `LV_EVENT_PRESSED/PRESSING/RELEASED` etc.
+
+`lv_table_get_selected_cell(table, &row, &col)` can be sued the get currentéy selected cell. Row and column eill be set to `LV_TABLE_CELL_NONE` no cell is celected.
 
 Learn more about [Keys](/overview/indev).
 

docs/widgets/core/textarea.md

@@ -15,7 +15,7 @@ One line mode and password modes are supported.
 ## Parts and Styles
 - `LV_PART_MAIN` The background of the text area. Uses all the typical backgrond style properties and the text related style properties including `text_align` to align the text to the left, right or center.
 - `LV_PART_SCROLLBAR` The scrollbar that is shown when the text is too long.
-- `LV_PART_SELECTED` Detemines the style of the [selected text](#text-selection). Only `text_color` and `bg_color` style properties can be used.
+- `LV_PART_SELECTED` Detemines the style of the [selected text](/widgets/core/label.html#text-selection). Only `text_color` and `bg_color` style properties can be used. `bg_color` should be set directly on the label of the text area.
 - `LV_PART_CURSOR` Marks the position where the characters are inserted. The cursor's area is always the bounding box of the current character. 
 A block cursor can be created by adding a background color and background opacity to `LV_PART_CURSOR`'s style. The create line cursor leave the cursor transparent and set a left border. 
 The `anim_time` style property sets the cursor's blink time. 
@@ -75,12 +75,13 @@ In password mode `lv_textarea_get_text(textarea)` returns the actual text entere
 The visibility time can be adjusted with `LV_TEXTAREA_DEF_PWD_SHOW_TIME)` in `lv_conf.h`.
 
 ### Accepted characters
-You can set a list of accepted characters with `lv_textarae_set_accepted_chars(textarea, "0123456789.+-")`. 
+You can set a list of accepted characters with `lv_textarea_set_accepted_chars(textarea, "0123456789.+-")`. 
 Other characters will be ignored. 
 
 ### Max text length
 The maximum number of characters can be limited with `lv_textarea_set_max_length(textarea, max_char_num)`
 
+
 ### Very long texts
 If there is a very long text in the Text area (e. g. > 20k characters), scrolling and drawing might be slow. 
 However, by enabling `LV_LABEL_LONG_TXT_HINT   1` in `lv_conf.h` the performance can be hugely improved. 
@@ -98,6 +99,8 @@ The new text cannot be in a local variable which is destroyed when the event cal
 - `LV_EVENT_VALUE_CHANGED` Sent when the content of the text area has been changed. 
 - `LV_EVENT_APPLY` Sent when `LV_KEY_ENTER` is pressed (or(sent) to a one line text area.
 
+See the events of the [Base object](/widgets/obj) too.
+
 Learn more about [Events](/overview/event).
 
 ## Keys

docs/widgets/extra/animimg.md

@@ -0,0 +1,53 @@
+```eval_rst
+.. include:: /header.rst 
+:github_url: |github_link_base|/widgets/animimg.md
+```
+# Animation Image (lv_animimg)
+
+## Overview
+
+The animation image is similar to the norlmal 'Image' object. The only difference is that instead of one source image, you set an array of multiple source images.
+
+You can specify a duration and repeat count.
+
+
+## Parts and Styles
+- `LV_PART_MAIN` A background rectangle that uses the typical background style properties and the image itself using the image style properties.
+ 
+
+## Usage
+
+### Image sources
+To set the image in a state, use the `lv_animimg_set_src(imgbtn, dsc[], num)`.
+ 
+
+## Events
+No special events are sent by image objects.
+
+See the events of the Base object too.
+
+Learn more about [Events](/overview/event).
+
+
+## Keys
+No Keys are processed by the object type.
+
+Learn more about [Keys](/overview/indev).
+
+
+## Example
+
+```eval_rst
+
+.. include:: ../../../examples/widgets/animimg/index.rst
+
+```
+
+## API
+
+```eval_rst
+
+.. doxygenfile:: lv_animimg.h
+  :project: lvgl
+
+```

docs/widgets/extra/calendar.md

@@ -14,7 +14,7 @@ The Calendar object is a classic calendar which can:
 
 The Calendar is added to the default group (if it is set). Calendar is an editable object which allow selecting and clicking the dates with encoder navigation too.
 
-To make the Calendar flexible, by default it doesn't show the current year or month. Instead, there are external "headers" that can be attached to the calendar.
+To make the Calendar flexible, by default it doesn't show the current year or month. Instead, there are optional "headers" that can be attached to the calendar.
 
 ## Parts and Styles
 The calendar object uses the [Button matrix](/widgets/core/btnmatrix) object under the hood to arrange the days into a matrix.
@@ -57,14 +57,15 @@ Learn more about [Keys](/overview/indev).
 
 ## Headers
 
+**From v8.1 the header is added directly into the Calendar widget and the API of the headers has been changed. **
+
 ### Arrow buttons
 
-`lv_calendar_header_arrow_create(parent, calendar, button_size)` creates a header that contains a left and right arrow on the sides and a text with the current year and month between them.
+`lv_calendar_header_arrow_create(calendar)` creates a header that contains a left and right arrow on the sides and a text with the current year and month between them.
 
 
 ### Drop-down
-`lv_calendar_header_dropdown_create(parent, calendar)` creates a header that contains 2 drop-drown lists: one for the year and another for the month.
- 
+`lv_calendar_header_dropdown_create(calendar)` creates a header that contains 2 drop-drown lists: one for the year and another for the month.
  
 
 ## Example

docs/widgets/extra/chart.md

@@ -39,7 +39,7 @@ You can specify the display type with `lv_chart_set_type(chart, LV_CHART_TYPE_..
 
 
 ### Data series
-You can add any number of series to the charts by `lv_chart_add_series(chart, color, axis)`. This will allocates a `lv_chart_series_t` structure which contains the chosen `color` and an array for the data points.
+You can add any number of series to the charts by `lv_chart_add_series(chart, color, axis)`. This allocates an `lv_chart_series_t` structure which contains the chosen `color` and an array for the data points.
 `axis` can have the following values:
 - `LV_CHART_AXIS_PRIMARY_Y` Left axis
 - `LV_CHART_AXIS_SECONDARY_Y` Right axis
@@ -65,7 +65,7 @@ You have several options to set the data of series:
 3. Use the `lv_chart_set_next_value(chart, ser, value)`.
 4. Initialize all points to a given value with: `lv_chart_set_all_value(chart, ser, value)`.
 
-Use `LV_CHART_POINT_DEF` as value to make the library skip drawing that point, column, or line segment.
+Use `LV_CHART_POINT_NONE` as value to make the library skip drawing that point, column, or line segment.
 
 For `LV_CHART_TYPE_SCATTER` type  `lv_chart_set_value_by_id2(chart, ser, id, value)` and `lv_chart_set_next_value2(chart, ser, x_valuem y_value)` can be used as well.
 
@@ -73,7 +73,7 @@ For `LV_CHART_TYPE_SCATTER` type  `lv_chart_set_value_by_id2(chart, ser, id, val
 ### Update modes
 `lv_chart_set_next_value` can behave in two ways depending on *update mode*:
 - `LV_CHART_UPDATE_MODE_SHIFT` Shift old data to the left and add the new one to the right.
-- `LV_CHART_UPDATE_MODE_CIRCULAR` - Add the new data in circular fashion, like an ECG diagram).
+- `LV_CHART_UPDATE_MODE_CIRCULAR` - Add the new data in circular fashion, like an ECG diagram.
 
 The update mode can be changed with `lv_chart_set_update_mode(chart, LV_CHART_UPDATE_MODE_...)`.
 
@@ -82,7 +82,7 @@ The number of points in the series can be modified by `lv_chart_set_point_count(
 Note: this also affects the number of points processed when an external buffer is assigned to a series, so you need to be sure the external array is large enough. 
 
 #### Handling large number of points
-On line charts if the number of points is greater than the pixels horizontally, the Chart will draw only vertical lines to make the drawing of large amount of data effective. 
+On line charts, if the number of points is greater than the pixels horizontally, the Chart will draw only vertical lines to make the drawing of large amount of data effective. 
 If there are, let's say, 10 points to a pixel, LVGL searches the smallest and the largest value and draws a vertical lines between them to ensure no peaks are missed.
 
 ### Vertical range
@@ -131,16 +131,46 @@ The possible values of `dir`  `LV_DIR_NONE/RIGHT/UP/LEFT/DOWN/HOR/VER/ALL` or th
 
 ## Events
 - `LV_EVENT_VALUE_CHANGED` Sent when a new point is clicked pressed.  `lv_chart_get_pressed_point(chart)` returns the zero-based index of the pressed point.
-- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` are sent for multiple parts. The fields of `lv_obj_draw_part_dsc_t` are set as follows:
-   - `LV_PART_ITEMS` (the series)
-       - *Line chart* `clip_area`, `id` (index of the point), `value` (value of `id`th point), `p1`, `p2` (points of the line), `draw_area` (area of the point), `line_dsc`, `rect_dsc`, `sub_part_ptr` (pointer to the series), `part`
-       - *Bar chart* `clip_area`, `id` (index of the point), `value` (value of `id`th point), `draw_area` (area of the point), `rect_dsc`, `sub_part_ptr` (pointer to the series), `part`
-   - `LV_PART_TICKS` (major tick lines and label)  `clip_area`, `id` (axis), `value` (scaled value of the tick), `text` (`value` converted to decimal), `line_dsc`, `label_dsc`, `part`
-   - `LV_PART_CURSOR` These events are sent at three times:
-      - vertical line `clip_area`, `p1`, `p2` (points of the line), `line_dsc`, `part`
-      - horizontal line `clip_area`, `p1`, `p2` (points of the line), `line_dsc`, `part`
-      - point `clip_area`, `draw_area` (points of the line), `rect_dsc`, `part`
-  - `LV_PART_MAIN` (the division lines)  `clip_area`, `id` (index of the line), `p1`, `p2` (points of the line), `line_dsc`, `part`
+- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` are sent with the following types:
+   - `LV_CHART_DRAW_PART_DIV_LINE_INIT`  Used before/after drawn the div lines to add masks to any extra drawings. The following fields are set:
+       -  `part`: `LV_PART_MAIN`
+       - `line_dsc`
+   - `LV_CHART_DRAW_PART_DIV_LINE_HOR`, `LV_CHART_DRAW_PART_DIV_LINE_VER` Used for each horizontal and vertical division lines.  
+       - `part`: `LV_PART_MAIN` 
+       - `id`: index of the line
+       - `p1`, `p2`: points of the line
+       - `line_dsc`
+   - `LV_CHART_DRAW_PART_LINE_AND_POINT` Used on line and scatter charts for lines and points. 
+       - `part`: `LV_PART_ITEMS`
+       - `id`: index of the point
+       - `value`: value of `id`th point
+       - `p1`, `p2`: points of the line
+       - `draw_area`: area of the point
+       - `line_dsc`
+       - `rect_dsc`
+       - `sub_part_ptr`: pointer to the series
+   - `LV_CHART_DRAW_PART_BAR` Used on bar charts for the rectangles. 
+        - `part`: `LV_PART_ITEMS`
+        - `id`: index of the point
+        - `value`: value of `id`th point 
+        - `draw_area`: area of the point
+        - `rect_dsc`:
+        - `sub_part_ptr`: pointer to the series
+   - `LV_CHART_DRAW_PART_CURSOR`  Used on cursor lines and points.
+        - `part`: `LV_PART_CURSOR` 
+        - `p1`, `p2`: points of the line
+        - `line_dsc`
+        - `rect_dsc`
+        - `draw_area`: area of the points
+   - `LV_CHART_DRAW_PART_TICK_LABEL`  Used on tick lines and labels.
+        - `part`: `LV_PART_TICKS`  
+        - `id`: axis
+        - `value`: value of the tick
+        - `text`: `value` converted to decimal or `NULL` for minor ticks
+        - `line_dsc`,
+        - `label_dsc`,
+  
+See the events of the [Base object](/widgets/obj) too.
   
 Learn more about [Events](/overview/event).
 

docs/widgets/extra/colorwheel.md

@@ -25,9 +25,9 @@ The color can be set manually with `lv_colorwheel_set_hue/saturation/value(color
 
 ### Color mode
 
-The current color mode can be manually selected with `lv_colorwheel_set_color_mode(colorwheel, LV_COLORWHEEL_MODE_HUE/SATURATION/VALUE)`.
+The current color mode can be manually selected with `lv_colorwheel_set_mode(colorwheel, LV_COLORWHEEL_MODE_HUE/SATURATION/VALUE)`.
 
-The color mode can be fixed (so as to not change with long press) using `lv_colorwheel_set_color_mode_fixed(colorwheel, true)`
+The color mode can be fixed (so as to not change with long press) using `lv_colorwheel_set_mode_fixed(colorwheel, true)`
 
 ## Events
 - `LV_EVENT_VALUE_CHANGED` Sent if a new color is selected.
@@ -36,7 +36,7 @@ Learn more about [Events](/overview/event).
 
 ## Keys
 - `LV_KEY_UP`, `LV_KEY_RIGHT` Increment the current parameter's value by 1
-- `LV_KEY_DOWN`, `LV_KEY_LEFT` Decrement the current parameter's by 1
+- `LV_KEY_DOWN`, `LV_KEY_LEFT` Decrement the current parameter's value by 1
 - `LV_KEY_ENTER` A long press will show the next mode. Double click to reset the current parameter.
 
 Learn more about [Keys](/overview/indev).

docs/widgets/extra/imgbtn.md

@@ -34,6 +34,11 @@ The possible states are:
 If you set sources only in `LV_IMGBTN_STATE_RELEASED`, these sources will be used in other states too. 
 If you set e.g. `LV_IMGBTN_STATE_PRESSED` they will be used in pressed state instead of the released images.
 
+
+### States
+Instead of the regular `lv_obj_add/clear_state()` functions the `lv_imgbtn_set_state(imgbtn, LV_IMGBTN_STATE_...)` functions should be used to manually set a state.
+
+
 ## Events
 - `LV_EVENT_VALUE_CHANGED` Sent when the button is toggled.
 

docs/widgets/extra/index.md

@@ -9,6 +9,7 @@
 .. toctree::
    :maxdepth: 1
    
+   animimg
    calendar
    chart
    colorwheel

docs/widgets/extra/keyboard.md

@@ -22,7 +22,8 @@ The Keyboards have the following modes:
 - `LV_KEYBOARD_MODE_TEXT_LOWER`  Display lower case letters
 - `LV_KEYBOARD_MODE_TEXT_UPPER`  Display upper case letters
 - `LV_KEYBOARD_MODE_TEXT_SPECIAL` Display special characters
-- `LV_KEYBOARD_MODE_NUM` Display numbers, +/- sign, and decimal dot.
+- `LV_KEYBOARD_MODE_NUMBER` Display numbers, +/- sign, and decimal dot
+- `LV_KEYBOARD_MODE_USER_1` through `LV_KEYBOARD_MODE_USER_4` User-defined modes.
 
 The `TEXT` modes' layout contains buttons to change mode.
 
@@ -32,6 +33,12 @@ To set the mode manually, use `lv_keyboard_set_mode(kb, mode)`. The default mode
 You can assign a [Text area](/widgets/core/textarea) to the Keyboard to automatically put the clicked characters there.
 To assign the text area, use `lv_keyboard_set_textarea(kb, ta)`.
 
+### Key Popovers
+To enable key popovers on press, like on common Android and iOS keyboards, use `lv_keyboard_set_popovers(kb, true)`. The default control maps are preconfigured to only show the popovers on keys that produce a symbol and not on e.g. space. If you use a custom keymap, set the `LV_BTNMATRIX_CTRL_POPOVER` flag for all keys that you want to show a popover.
+
+Note that popovers for keys in the top row will draw outside the widget boundaries. To account for this, reserve extra free space on top of the keyboard or ensure that the keyboard is added _after_ any widgets adjacent to its top boundary so that the popovers can draw over those.
+
+The popovers currently are merely a visual effect and don't allow selecting additional characters such as accents yet.
 
 ### New Keymap
 You can specify a new map (layout) for the keyboard with `lv_keyboard_set_map(kb, map)` and `lv_keyboard_set_ctrl_map(kb, ctrl_map)`.
@@ -54,6 +61,13 @@ Keep in mind that using following keywords will have the same effect as with the
 
 The keyboard has a **default event handler** callback called `lv_keyboard_def_event_cb`, which handles the button pressing, map changing, the assigned text area, etc. You can remove it and replace it with a custom event handler if you wish.
 
+```eval_rst
+.. note::
+   In 8.0 and newer, adding an event handler to the keyboard does not remove the default event handler.
+   This behavior differs from v7, where adding an event handler would always replace the previous one.
+```
+
+
 Learn more about [Events](/overview/event).
 
 ## Keys

docs/widgets/extra/led.md

@@ -24,7 +24,14 @@ You can set their brightness with `lv_led_set_bright(led, bright)`. The brightne
 Use `lv_led_on(led)` and `lv_led_off(led)` to set the brightness to a predefined ON or OFF value. The `lv_led_toggle(led)` toggles between the ON and OFF state.
 
 ## Events
-No special event are sent by the LED object.
+- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` is sent for the following types:
+    - `LV_LED_DRAW_PART_RECTANGLE` The main rectangle. `LV_OBJ_DRAW_PART_RECTANGLE` is not sent by the base object. 
+       - `part`: `LV_PART_MAIN`
+       - `rect_dsc`
+       - `draw_area`: the area of the rectangle
+       
+
+See the events of the [Base object](/widgets/obj) too.
 
 Learn more about [Events](/overview/event).
 

docs/widgets/extra/list.md

@@ -21,10 +21,10 @@ See the [Button](/widgets/core/btn)'s and [Label](/widgets/core/label)'s documen
 ### Buttons
 `lv_list_add_btn(list, icon, text)` adds a full-width button with an icon - that can be an image or symbol - and a text.
 
-The text starts to scroll horizontally if its too long.
+The text starts to scroll horizontally if it's too long.
 
 ### Texts
-`lv_list_add_text(list, text)` adds a text.
+`lv_list_add_text(list, icon, text)` adds a text.
 
 
 ## Events

docs/widgets/extra/meter.md

@@ -32,13 +32,13 @@ Labels are added automatically on major ticks with `label_gap` distance from the
 
 ### Add indicators
 
-Indicators needs to be added to a Scale and their value is interpreted in the range of the Scale.
+Indicators need to be added to a Scale and their value is interpreted in the range of the Scale.
 
 All the indicator add functions return `lv_meter_indicator_t *`.
 
 #### Needle line
 
-`indic = lv_meter_add_needle_line(meter, scale, line_width, line_color, r_mod)` adds a needle line to a Scale. By default the length of the line is the same as the scale's radius but `r_mod` changes the length.
+`indic = lv_meter_add_needle_line(meter, scale, line_width, line_color, r_mod)` adds a needle line to a Scale. By default, the length of the line is the same as the scale's radius but `r_mod` changes the length.
 
 `lv_meter_set_indicator_value(meter, indic, value)` sets the value of the indicator.
 
@@ -50,7 +50,7 @@ All the indicator add functions return `lv_meter_indicator_t *`.
 `lv_meter_set_indicator_value(meter, inidicator, value)` sets the value of the indicator.
 
 #### Arc
-`indic = lv_meter_add_arc(meter, scale, arc_width, arc_color, r_mod)` adds and arc indicator. . By default the radius of the arc is the same as the scale's radius but `r_mod` changes the radius.
+`indic = lv_meter_add_arc(meter, scale, arc_width, arc_color, r_mod)` adds and arc indicator. . By default, the radius of the arc is the same as the scale's radius but `r_mod` changes the radius.
 
 `lv_meter_set_indicator_start_value(meter, indic, value)` and `lv_meter_set_indicator_end_value(meter, inidicator, value)` sets the value of the indicator. 
 
@@ -63,8 +63,33 @@ If `local` is `false` `color_start` and `color_end` will be mapped to the start
 `lv_meter_set_indicator_start_value(meter, inidicator, value)` and `lv_meter_set_indicator_end_value(meter, inidicator, value)` sets the value of the indicator. 
 
 ## Events
-- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` is sent for the tick labels to allow overwriting the texts. The following fields of `lv_obj_draw_part_dsc_t` is set:
-`clip_area`, `part` (to `LV_PART_TICK`), `id` (the index of the major tick line), `value` (the value of the tick line), `label_dsc`, `text` (value converted to decimal)
+- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` is sent for the following types:
+    - `LV_METER_DRAW_PART_ARC` The arc indicator
+       - `part`: `LV_PART_ITEMS`
+       - `sub_part_ptr`: pointer to the indicator
+       - `arc_dsc`
+       - `radius`: radius of the arc
+       - `p1` center of the arc
+    - `LV_METER_DRAW_PART_NEEDLE_LINE` The needle lines
+       - `part`: `LV_PART_ITEMS`
+       - `p1`, `p2` points of the line
+       - `line_dsc`
+       - `sub_part_ptr`: pointer to the indicator
+    - `LV_METER_DRAW_PART_NEEDLE_IMG`  The needle images
+       - `part`: `LV_PART_ITEMS`
+       - `p1`, `p2` points of the line
+       - `img_dsc`
+       - `sub_part_ptr`: pointer to the indicator
+    - `LV_METER_DRAW_PART_TICK` The tick lines and labels
+       - `part`: `LV_PART_TICKS`
+       - `value`: the value of the line
+       - `text`: `value` converted to decimal or `NULL` on minor lines
+       - `label_dsc`: label draw descriptor or `NULL` on minor lines
+       - `line_dsc`: 
+       - `id`: the index of the line      
+    
+    
+See the events of the [Base object](/widgets/obj) too.
     
 Learn more about [Events](/overview/event).
 

docs/widgets/extra/msgbox.md

@@ -13,7 +13,7 @@ The text will be broken into multiple lines automatically and the height will be
 The message box can be modal (blocking clicks on the rest of the screen) or not modal.
 
 ## Parts and Styles
-The mesasge box is built from other widgets so you can check these widget's documentation for details.
+The message box is built from other widgets, so you can check these widgets' documentation for details.
 - Background: [lv_obj](/widgets/obj)
 - Close button: [lv_btn](/widgets/core/btn)
 - Title and text: [lv_label](/widgets/core/label)
@@ -43,7 +43,7 @@ lv_obj_t * lv_msgbox_get_btns(lv_obj_t * mbox);
 
 ## Events
 - `LV_EVENT_VALUE_CHANGED` is sent by the buttons if one of them is clicked. `LV_OBJ_FLAG_EVENT_BUBBLE` is enabled on the buttons so you can add events to the message box itself. 
-In the event handler, `lv_event_get_target(e)` will return the button matrix and `lv_event_get_current_target(e)` will givreturn the message box. `lv_msgbox_get_active_btn_text(msgbox)` can be used to get the text of the clicked button. 
+In the event handler, `lv_event_get_target(e)` will return the button matrix and `lv_event_get_current_target(e)` will return the message box. `lv_msgbox_get_active_btn(msgbox)` and `lv_msgbox_get_active_btn_text(msgbox)` can be used to get the index and text of the clicked button.
 
 Learn more about [Events](/overview/event).
 

docs/widgets/extra/span.md

@@ -6,7 +6,7 @@
 
 ## Overview
 
-A spangroup is the object that is used to display rich text. Different from the label object, `spangroup` can automatically organize text of different fonts, colors, and sizes into the spangroup obj.
+A spangroup is the object that is used to display rich text. Different from the label object, `spangroup` can render text styled with different fonts, colors, and sizes into the spangroup object.
 
 ## Parts and Styles
 - `LV_PART_MAIN` The spangroup has only one part.
@@ -15,10 +15,22 @@ A spangroup is the object that is used to display rich text. Different from the
 
 ### Set text and style
 
-The spangroup object uses span to describe text and text style. so, first we need to create `span` descriptor using `lv_span_t * span = lv_spangroup_new_span(spangroup)`. Then use `lv_span_set_text(span, "text")` to set text.The style of the modified text is the same as the normal style used, eg:`lv_style_set_text_color(&span->style, lv_palette_main(LV_PALETTE_RED))`.
+The spangroup object uses span to describe text and text style. so, first we need to create `span` descriptor using `lv_span_t * span = lv_spangroup_new_span(spangroup)`. Then use `lv_span_set_text(span, "text")` to set text. The style of the span is configured as with a normal style object by using its `style` member, eg:`lv_style_set_text_color(&span->style, lv_palette_main(LV_PALETTE_RED))`.
 
 If spangroup object `mode != LV_SPAN_MODE_FIXED` you must call `lv_spangroup_refr_mode()` after you have modified `span` style(eg:set text, changed the font size, del span).
 
+### Retreiving a span child
+Spangroups store their children differently from normal objects, so normal functions for getting children won't work.
+
+`lv_spangroup_get_child(spangroup, id)` will return a pointer to the child span at index `id`. In addition, `id` can be negative to index from the end of the spangroup where `-1` is the youngest child, `-2` is second youngest, etc.
+
+e.g. `lv_span_t* span = lv_spangroup_get_child(spangroup, 0)` will return the first child of the spangroup. `lv_span_t* span = lv_spangroup_get_child(spangroup, -1)` will return the last (or most recent) child.
+
+### Child Count
+Use the function `lv_spangroup_get_child_cnt(spangroup)` to get back the number of spans the group is maintaining.
+
+e.g. `uint32_t size = lv_spangroup_get_child_cnt(spangroup)`
+
 ### Text align
 like label object, the spangroup can be set to one the following modes:
 - `LV_TEXT_ALIGN_LEFT` Align text to left.
@@ -44,7 +56,7 @@ The spangroup can be set to one the following modes:
 Use `lv_spangroup_set_overflow(spangroup, LV_SPAN_OVERFLOW_CLIP)` to set object overflow mode.
 
 ### first line indent
-Use `lv_spangroup_set_indent(spangroup, 20)` to set the indent of the first line, in pixels.
+Use `lv_spangroup_set_indent(spangroup, 20)` to set the indent of the first line. all modes support pixel units, in addition to LV_SPAN_MODE_FIXED and LV_SPAN_MODE_BREAK mode supports percentage units too.
 
 ## Events
 No special events are sent by this widget. 

docs/widgets/extra/spinbox.md

@@ -20,17 +20,23 @@ The parts of the Spinbox are identical to the [Text area](/widgets/core/textarea
 
 `lv_spinbox_set_step(spinbox, 100)` sets which digits to change on increment/decrement. Only multiples of ten can be set, and not for example 3. 
 
+`lv_spinbox_set_pos(spinbox, 1)` sets the cursor to a specific digit to change on increment/decrement. For example position '0' sets the cursor to the least significant digit.
+
+If an encoder is used as input device, the selected digit is shifted to the right by default whenever the encoder button is clicked. To change this behaviour to shifting to the left, the `lv_spinbox_set_digit_step_direction(spinbox, LV_DIR_LEFT)` can be used
+
 ### Format
 
 `lv_spinbox_set_digit_format(spinbox, digit_count, separator_position)` sets the number format. `digit_count` is the number of digits excluding the decimal separator and the sign.
 `separator_position` is the number of digits before the decimal point. If 0, no decimal point is displayed.
 
 ### Rollover
-`lv_spinbox_set_rollover(spinbox, true/false)` enables/disabled rollover mode. If either the minimum or maximum value is reached with rollover enabled, the value will change to the other limit. If rollover is disabled the value will be remain at the minimum or maximum value. 
+`lv_spinbox_set_rollover(spinbox, true/false)` enables/disabled rollover mode. If either the minimum or maximum value is reached with rollover enabled, the value will change to the other limit. If rollover is disabled the value will remain at the minimum or maximum value. 
 
 ## Events
 - `LV_EVENT_VALUE_CHANGED` Sent when the value has changed.
 
+See the events of the [Text area](/widgets/core/textarea) too.
+
 Learn more about [Events](/overview/event).
 
 ## Keys