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>

.clang-format

@@ -1,97 +0,0 @@
----
-Language:        Cpp
-# BasedOnStyle:  LLVM
-AccessModifierOffset: -2
-AlignAfterOpenBracket: Align
-AlignConsecutiveAssignments: true
-AlignConsecutiveDeclarations: false
-AlignEscapedNewlinesLeft: false
-AlignOperands:   true
-AlignTrailingComments: true
-AllowAllParametersOfDeclarationOnNextLine: true
-AllowShortBlocksOnASingleLine: false
-AllowShortCaseLabelsOnASingleLine: true
-AllowShortFunctionsOnASingleLine: None
-AllowShortIfStatementsOnASingleLine: true
-AllowShortLoopsOnASingleLine: true
-AlwaysBreakAfterDefinitionReturnType: None
-AlwaysBreakAfterReturnType: None
-AlwaysBreakBeforeMultilineStrings: false
-AlwaysBreakTemplateDeclarations: false
-BinPackArguments: true
-BinPackParameters: true
-BreakBeforeBraces: Custom
-BraceWrapping:   
-  AfterClass:      false
-  AfterControlStatement: false
-  AfterEnum:       false
-  AfterFunction:   true
-  AfterNamespace:  false
-  AfterObjCDeclaration: false
-  AfterStruct:     true
-  AfterUnion:      true
-  BeforeCatch:     false
-  BeforeElse:      false
-  IndentBraces:    false
-  SplitEmptyFunction: false
-BreakBeforeBinaryOperators: None
-BreakBeforeTernaryOperators: true
-BreakConstructorInitializersBeforeComma: false
-BreakAfterJavaFieldAnnotations: false
-BreakStringLiterals: true
-ColumnLimit:     120
-CommentPragmas:  '^ IWYU pragma:'
-ConstructorInitializerAllOnOneLineOrOnePerLine: false
-ConstructorInitializerIndentWidth: 4
-ContinuationIndentWidth: 4
-Cpp11BracedListStyle: true
-DerivePointerAlignment: false
-DisableFormat:   false
-ExperimentalAutoDetectBinPacking: false
-ForEachMacros:   [ foreach, Q_FOREACH, BOOST_FOREACH ]
-IncludeCategories: 
-  - Regex:           '^"(llvm|llvm-c|clang|clang-c)/'
-    Priority:        2
-  - Regex:           '^(<|"(gtest|isl|json)/)'
-    Priority:        3
-  - Regex:           '.*'
-    Priority:        1
-IncludeIsMainRegex: '$'
-IndentCaseLabels: true
-IndentWidth:     4
-IndentWrappedFunctionNames: false
-JavaScriptQuotes: Leave
-JavaScriptWrapImports: true
-KeepEmptyLinesAtTheStartOfBlocks: true
-MacroBlockBegin: ''
-MacroBlockEnd:   ''
-MaxEmptyLinesToKeep: 1
-NamespaceIndentation: None
-ObjCBlockIndentWidth: 2
-ObjCSpaceAfterProperty: false
-ObjCSpaceBeforeProtocolList: true
-PenaltyBreakBeforeFirstCallParameter: 19
-PenaltyBreakComment: 300
-PenaltyBreakFirstLessLess: 120
-PenaltyBreakString: 1000
-PenaltyExcessCharacter: 1000000
-PenaltyReturnTypeOnItsOwnLine: 60
-PointerAlignment: Middle
-ReflowComments:  true
-SortIncludes:    false
-SpaceAfterCStyleCast: false
-SpaceAfterTemplateKeyword: true
-SpaceBeforeAssignmentOperators: true
-SpaceBeforeParens: Never
-SpaceInEmptyParentheses: false
-SpacesBeforeTrailingComments: 1
-SpacesInAngles:  false
-SpacesInContainerLiterals: false
-SpacesInCStyleCastParentheses: false
-SpacesInParentheses: false
-SpacesInSquareBrackets: false
-Standard:        Cpp11
-TabWidth:        4
-UseTab:          Never
-...
-

.codecov.yml

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

.editorconfig

@@ -1,7 +1,6 @@
-[*.{c,h}]
+[*.{c,h,ino}]
 indent_style = space
 indent_size = 4
 end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
-

.github/FUNDING.yml

@@ -0,0 +1 @@
+open_collective: lvgl

.github/ISSUE_TEMPLATE/all-other-issues.md

@@ -1,14 +0,0 @@
----
-name: All other issues
-about: Questions and enhancement requests should go to the forum.
-title: ''
-labels: not-template
-assignees: ''
-
----
-
-# All enhancement requests or questions should be directed to the Forum.
-
-
-We use GitHub issues for development related discussions.
-Please use the [forum](https://forum.littlevgl.com/) to ask questions.

.github/ISSUE_TEMPLATE/bug-report.md

@@ -1,27 +1,43 @@
 ---
 name: Bug report
-about: Create a report to help us improve
+about: Create a bug report to help us improve
 title: ''
 labels: ''
 assignees: ''
 
 ---
 
-**Describe the bug**
+<!--
+IMPORTANT
+Issues that don't use this template will be ignored and closed.
+-->
 
+### Perform all steps below and tick them with [x]
+- [ ] Check the related part of the [Documentation](https://docs.lvgl.io/)
+- [ ] Update lvgl to the latest version
+- [ ] Reproduce the issue in a [Simulator](https://docs.lvgl.io/latest/en/html/get-started/pc-simulator.html)
+
+### Describe the bug
+<!--
 A clear and concise description of what the bug is.
+-->
 
-**To Reproduce**
-
-Please provide a small, independent code sample that can be used to reproduce the issue. Ideally this should work in the PC simulator unless the problem is specific to one platform.
-
-**Expected behavior**
+### To Reproduce
+<!--
+Provide a small, independent code sample that can be used to reproduce the issue.
+Ideally this should work in the PC simulator unless the problem is specific to a platform.
+Format the code like this:
+```c
+your code here
+```
+-->
 
+### Expected behavior
+<!--
 A clear and concise description of what you expected to happen.
+-->
 
-**Screenshots**
+### Screenshots or video
+<!--
 If applicable, add screenshots to help explain your problem.
-
-**Additional context**
-
-Add any other context about the problem here.
+-->

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,14 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Documentation
+    url: https://docs.lvgl.io
+    about: Be sure to read to documentation first
+  - name: Forum
+    url: https://forum.lvgl.io
+    about: For topics like How-to, Getting started, Feature request
+  - name: CONTIBUTING.md
+    url: https://github.com/lvgl/lvgl/blob/master/docs/CONTRIBUTING.md#faq-about-contributing
+    about: The basic rules of contributing
+  - name: CODING_STYLE.md
+    url: https://github.com/lvgl/lvgl/blob/master/docs/CODING_STYLE.md
+    about: Quick summary of LVGL's code style

.github/ISSUE_TEMPLATE/dev-discussion.md

@@ -0,0 +1,29 @@
+---
+name: Development discussion
+about: Discussion strictly related to the development of the LVGL.
+title: ''
+labels: ''
+assignees: ''
+
+---
+<!--
+IMPORTANT
+Issues that don't use this template will be ignored and closed.
+
+Normal Feature requests should go to the Forum: https://forum.lvgl.io/c/feature-request/9
+-->
+
+### Introduce the problem
+<!--
+A clear and concise description of the problem.
+-->
+
+### Examples and cases
+<!--
+Mention some examples and cases where the problem or the missing feature is relevant
+-->
+
+### Suggested solution
+<!--
+If you already have an idea about the solution share it here
+-->

.github/auto-comment.yml

@@ -0,0 +1,12 @@
+# Comment to a new issue.
+pullRequestOpened: |
+  Thank you for raising your pull request.
+
+  To ensure that all licensing criteria is met all repositories of the LVGL project apply a process called DCO (Developer's Certificate of Origin).
+
+  The text of DCO can be read here: https://developercertificate.org/
+  For a more detailed description see the [Documentation](https://docs.lvgl.io/latest/en/html/contributing/index.html#developer-certification-of-origin-dco) site.
+
+  By contributing to any repositories of the LVGL project you state that your contribution corresponds with the DCO.
+
+  No further action is required if your contribution fulfills the DCO. If you are not sure about it feel free to ask us in a comment.

.github/pull_request_template.md

@@ -0,0 +1,8 @@
+### Description of the feature or fix
+
+A clear and concise description of what the bug or new feature is.
+
+### Checkpoints
+- [ ] Follow the [styling guide](https://github.com/lvgl/lvgl/blob/master/docs/CODING_STYLE.md)
+- [ ] Update [CHANGELOG.md](https://github.com/lvgl/lvgl/blob/master/docs/CHANGELOG.md)
+- [ ] Update the documentation

.github/stale.yml

@@ -1,17 +0,0 @@
-# Number of days of inactivity before an issue becomes stale
-daysUntilStale: 21
-# Number of days of inactivity before a stale issue is closed
-daysUntilClose: 7
-# Issues with these labels will never be considered stale
-exemptLabels:
-  - architecture
-  - pinned
-# Label to use when marking an issue as stale
-staleLabel: stale 
-# Comment to post when marking an issue as stale. Set to `false` to disable
-markComment: >
-  This issue or pull request has been automatically marked as stale because it has not had
-  recent activity. It will be closed if no further activity occurs. Thank you
-  for your contributions.
-# Comment to post when closing a stale issue. Set to `false` to disable
-closeComment: false

.github/workflows/build_micropython.yml

@@ -0,0 +1,72 @@
+name: Micropython CI
+
+on:
+  push:
+  pull_request:
+
+jobs:
+  build:
+    name: Build ${{ matrix.port }} port
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        port: ['unix', 'esp32', 'stm32', 'rp2']
+    steps:
+    - 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 parallel
+    - name: Clone lv_micropython
+      run: |
+        git clone https://github.com/lvgl/lv_micropython.git .
+        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.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
+
+    # 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

@@ -0,0 +1,45 @@
+name: C/C++ CI
+
+on:
+  push:
+    branches: [ master, release/v8.* ]
+  pull_request:
+    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: 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

@@ -0,0 +1,21 @@
+name: 'Close stale issues and PRs'
+on:
+  schedule:
+    - cron: '30 1 * * *'
+  workflow_dispatch:
+
+jobs:
+  stale:
+    if: github.repository == 'lvgl/lvgl'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v3
+        with:
+          repo-token: ${{ secrets.LVGL_BOT_TOKEN }}
+          stale-issue-message: 'This issue is stale because it has been open 14 days with no activity. Remove stale label or comment or this will be closed in 7 days.'
+          stale-pr-message: 'This PR is stale because it has been open 14 days with no activity. Remove stale label or comment or this will be closed in 7 days.'
+          close-issue-message: 'This issue was closed because it has been stalled for 7 days with no activity.'
+          days-before-stale: 14
+          days-before-close: 7
+          exempt-issue-labels: 'pinned'
+          exempt-pr-labels: 'pinned'

.github/workflows/compile_docs.yml

@@ -0,0 +1,93 @@
+name: Build docs
+on:
+  push:
+    branches:
+    - master
+    - 'release/*'
+env:
+  EM_VERSION: 2.0.4
+  EM_CACHE_FOLDER: 'emsdk-cache'
+jobs:
+  build-and-deploy:
+    if: github.repository == 'lvgl/lvgl'
+    runs-on: ubuntu-latest
+    concurrency: docs-build-and-deploy
+    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: Cache Python packages
+        uses: actions/cache@v2
+        with:
+          # Cache the Python package environment, excluding pip and setuptools installed by setup-python
+          path: |
+            ~/.cache/pip
+            ${{ env.pythonLocation }}/bin/*
+            ${{ env.pythonLocation }}/include
+            ${{ env.pythonLocation }}/lib/python*/site-packages/*
+            !${{ env.pythonLocation }}/bin/pip*
+            !${{ env.pythonLocation }}/lib/python*/site-packages/pip*
+            !${{ env.pythonLocation }}/lib/python*/site-packages/setuptools*
+          key: ${{ env.pythonLocation }}-${{ hashFiles('docs/requirements.txt') }}
+      - name: Install Doxygen and Latex dependencies
+        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
+      - name: Setup Emscripten cache
+        id: cache-system-libraries
+        uses: actions/cache@v2
+        with:
+          path: ${{env.EM_CACHE_FOLDER}}
+          key: ${{env.EM_VERSION}}-${{ runner.os }}
+      - uses: mymindstorm/setup-emsdk@v9
+        with:
+          version: ${{env.EM_VERSION}}
+          actions-cache-folder: ${{env.EM_CACHE_FOLDER}}
+      - name: ccache
+        uses: hendrikmuhs/ccache-action@v1
+      - name: Build examples (with cache)
+        run: scripts/build_html_examples.sh
+      - name: Build docs
+        run: docs/build.py
+      - name: Remove .doctrees
+        run: rm -rf out_html/.doctrees
+      - name: Retrieve version
+        run: |
+          echo "::set-output name=VERSION_NAME::$(scripts/find_version.sh)"
+        id: version
+      - name: Deploy to subfolder
+        uses: JamesIves/github-pages-deploy-action@3.7.1
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          ACCESS_TOKEN: ${{ secrets.LVGL_BOT_TOKEN }}
+          REPOSITORY_NAME: lvgl/docs
+          BRANCH: gh-pages # The branch the action should deploy to.
+          FOLDER: out_html  # The folder the action should deploy.
+          TARGET_FOLDER: ${{ steps.version.outputs.VERSION_NAME }}
+          GIT_CONFIG_NAME: lvgl-bot
+          GIT_CONFIG_EMAIL: lvgl-bot@users.noreply.github.com
+          PRESERVE: true
+          SINGLE_COMMIT: true
+      - name: Deploy to master
+        if: github.ref == 'refs/heads/master'
+        uses: JamesIves/github-pages-deploy-action@3.7.1
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          ACCESS_TOKEN: ${{ secrets.LVGL_BOT_TOKEN }}
+          REPOSITORY_NAME: lvgl/docs
+          BRANCH: gh-pages # The branch the action should deploy to.
+          FOLDER: out_html  # The folder the action should deploy.
+          TARGET_FOLDER: master
+          GIT_CONFIG_NAME: lvgl-bot
+          GIT_CONFIG_EMAIL: lvgl-bot@users.noreply.github.com
+          PRESERVE: true
+          SINGLE_COMMIT: true

.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/main.yml

@@ -0,0 +1,16 @@
+on:
+  issues:
+    types: [opened, edited]
+
+jobs:
+  auto_close_issues:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v1
+      - name: Automatically close issues that don't follow the issue template
+        uses: lucasbento/auto-close-issues@v1.0.2
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          issue-close-message: "@${issue.user.login}: hello! :wave:\n\nThis issue is being automatically closed because it does not follow the issue template." # optional property
+          closed-issues-label: "not-template"

.github/workflows/release.yml

@@ -0,0 +1,27 @@
+on:
+  push:
+    # Sequence of patterns matched against refs/tags
+    tags:
+      - "v[0-9]+.[0-9]+.[0-9]+" # Push events to matching v*, i.e. v1.0, v20.15.10
+
+name: Create Release
+
+jobs:
+  build:
+    name: Create Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - name: Create Release
+        id: create_release
+        uses: actions/create-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # This token is provided by Actions, you do not need to create your own token
+        with:
+          tag_name: ${{ github.ref }}
+          release_name: Release ${{ github.ref }}
+          body: |
+            See the [CHANGELOG](https://github.com/lvgl/lvgl/blob/master/docs/CHANGELOG.md)
+          draft: false
+          prerelease: false

.gitignore

@@ -1,5 +1,24 @@
 **/*.o
+**/*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
+docs/env
+out_html
+__pycache__
+/emscripten_builder
+test_screenshot_error.h
+build/
+tests/build_*/
+tests/report/

CMakeLists.txt

@@ -0,0 +1,94 @@
+if(ESP_PLATFORM)
+
+    file(GLOB_RECURSE SOURCES src/*.c)
+
+    idf_build_get_property(LV_MICROPYTHON LV_MICROPYTHON)
+
+    if (LV_MICROPYTHON)
+        idf_component_register(SRCS ${SOURCES}
+                               INCLUDE_DIRS . src ../
+                               REQUIRES main)
+    else()
+        idf_component_register(SRCS ${SOURCES}
+                               INCLUDE_DIRS . src ../)
+    endif()
+
+    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()
+
+elseif(ZEPHYR_BASE)
+
+    if(CONFIG_LVGL)
+
+        zephyr_include_directories(${ZEPHYR_BASE}/lib/gui/lvgl)
+
+        target_include_directories(lvgl INTERFACE ${CMAKE_CURRENT_SOURCE_DIR})
+
+        zephyr_compile_definitions(LV_CONF_KCONFIG_EXTERNAL_INCLUDE=<autoconf.h>)
+
+        zephyr_library()
+
+        file(GLOB_RECURSE SOURCES src/*.c)
+        zephyr_library_sources(${SOURCES})
+
+    endif(CONFIG_LVGL)
+
+else()
+
+    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()
+
+

Kconfig

@@ -0,0 +1,855 @@
+# Kconfig file for LVGL v8.0
+
+menu "LVGL 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.
+    config LV_CONF_SKIP
+        bool
+        default y
+
+    config LV_CONF_MINIMAL
+        bool "LVGL minimal configuration."
+
+    menu "Color settings"
+        choice
+            prompt "Color depth."
+            default LV_COLOR_DEPTH_16
+            help
+                Color depth to be used.
+
+            config LV_COLOR_DEPTH_32
+                bool "32: ARGB8888"
+            config LV_COLOR_DEPTH_16
+                bool "16: RGB565"
+            config LV_COLOR_DEPTH_8
+                bool "8: RGB232"
+            config LV_COLOR_DEPTH_1
+                bool "1: 1 byte per pixel"
+        endchoice
+
+        config LV_COLOR_DEPTH
+            int
+            default 1 if LV_COLOR_DEPTH_1
+            default 8 if LV_COLOR_DEPTH_8
+            default 16 if LV_COLOR_DEPTH_16
+            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 an 8-bit interface (e.g. SPI)."
+            depends on LV_COLOR_DEPTH_16
+
+        config LV_COLOR_SCREEN_TRANSP
+            bool "Enable more complex drawing routines to manage screens transparency."
+            depends on LV_COLOR_DEPTH_32
+            help
+                Can be used if the UI is above another layer, e.g. an OSD menu or video player.
+                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
+            default 0x00FF00
+            help
+                See misc/lv_color.h for some color values examples.
+    endmenu
+
+    menu "Memory settings"
+        config LV_MEM_CUSTOM
+            bool "If true use custom malloc/free, otherwise use the built-in `lv_mem_alloc()` and `lv_mem_free()`"
+
+        config LV_MEM_SIZE_KILOBYTES
+            int "Size of the memory used by `lv_mem_alloc` in kilobytes (>= 2kB)"
+            range 2 128
+            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
+
+    menu "HAL Settings"
+        config LV_DISP_DEF_REFR_PERIOD
+            int "Default display refresh period (ms)."
+            default 30
+            help
+                Can be changed in the display driver (`lv_disp_drv_t`).
+
+        config LV_INDEV_DEF_READ_PERIOD
+            int "Input device read period [ms]."
+            default 30
+
+        config LV_TICK_CUSTOM
+            bool "Use a custom tick source"
+
+        config LV_TICK_CUSTOM_INCLUDE
+            string "Header for the system time function"
+            default "Arduino.h"
+            depends on LV_TICK_CUSTOM
+
+        config LV_DPI_DEF
+            int "Default Dots Per Inch (in px)."
+            default 130
+            help
+                Used to initialize default sizes such as widgets sized, style paddings.
+                (Not so important, you can adjust it to modify default sizes and spaces)
+    endmenu
+
+    menu "Feature configuration"
+
+        menu "Drawing"
+            config LV_DRAW_COMPLEX
+                bool "Enable complex draw engine"
+                default y
+                help
+                    Required to draw shadow, gradient, rounded corners, circles, arc, skew lines,
+                    image transformations or any masks.
+
+            config LV_SHADOW_CACHE_SIZE
+                int "Allow buffering some shadow calculation"
+                depends on LV_DRAW_COMPLEX
+                default 0
+                help
+                    LV_SHADOW_CACHE_SIZE is the max shadow size to buffer, where
+                    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
+                help
+                    If only the built-in image formats are used there is no real advantage of caching.
+                    (I.e. no new image decoder is added).
+
+                    With complex image decoders (e.g. PNG or JPG) caching can
+                    save the continuous open/decode of images.
+                    However the opened images might consume additional RAM.
+
+            config LV_DISP_ROT_MAX_BUF
+                int "Maximum buffer size to allocate for rotation"
+                default 10240
+                help
+                    Only used if software rotation is enabled in the display driver.
+        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
+                string "include path of CMSIS header of target processor"
+                depends on LV_USE_GPU_STM32_DMA2D
+                default ""
+                help
+                    Must be defined to include path of CMSIS header of target processor
+                    e.g. "stm32f769xx.h" or "stm32f429xx.h"
+
+            config LV_USE_GPU_NXP_PXP
+                bool "Use NXP's PXP GPU iMX RTxxx platforms."
+            config LV_USE_GPU_NXP_PXP_AUTO_INIT
+                bool "Call lv_gpu_nxp_pxp_init() automatically or manually."
+                depends on LV_USE_GPU_NXP_PXP
+                help
+                    1: Add default bare metal and FreeRTOS interrupt handling
+                    routines for PXP (lv_gpu_nxp_pxp_osa.c) and call
+                    lv_gpu_nxp_pxp_init() automatically during lv_init().
+                    Note that symbol SDK_OS_FREE_RTOS has to be defined in order
+                    to use FreeRTOS OSA, otherwise bare-metal implementation is
+                    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"
+            config LV_USE_LOG
+                bool "Enable the log module"
+
+            choice
+                bool "Default log verbosity" if LV_USE_LOG
+                default LV_LOG_LEVEL_WARN
+                help
+                    Specify how important log should be added.
+
+                config LV_LOG_LEVEL_TRACE
+                    bool "A lot of logs to give detailed information"
+                config LV_LOG_LEVEL_INFO
+                    bool "Log important events"
+                config LV_LOG_LEVEL_WARN
+                    bool "Log if something unwanted happened but didn't cause a problem"
+                config LV_LOG_LEVEL_ERROR
+                    bool "Only critical issues, when the system may fail"
+                config LV_LOG_LEVEL_USER
+                    bool "Only logs added by the user"
+                config LV_LOG_LEVEL_NONE
+                    bool "Do not log anything"
+            endchoice
+
+            config LV_LOG_LEVEL
+                int
+                default 0 if LV_LOG_LEVEL_TRACE
+                default 1 if LV_LOG_LEVEL_INFO
+                default 2 if LV_LOG_LEVEL_WARN
+                default 3 if LV_LOG_LEVEL_ERROR
+                default 4 if LV_LOG_LEVEL_USER
+                default 5 if LV_LOG_LEVEL_NONE
+
+            config LV_LOG_PRINTF
+                bool "Print the log with 'printf'" if LV_USE_LOG
+                help
+                    Use printf for log output.
+                    If not set the user needs to register a callback with `lv_log_register_print_cb`.
+
+            config LV_LOG_TRACE_MEM
+                bool "Enable/Disable LV_LOG_TRACE in mem module"
+                default y
+                depends on LV_USE_LOG
+
+            config LV_LOG_TRACE_TIMER
+                bool "Enable/Disable LV_LOG_TRACE in timer module"
+                default y
+                depends on LV_USE_LOG
+
+            config LV_LOG_TRACE_INDEV
+                bool "Enable/Disable LV_LOG_TRACE in indev module"
+                default y
+                depends on LV_USE_LOG
+
+            config LV_LOG_TRACE_DISP_REFR
+                bool "Enable/Disable LV_LOG_TRACE in disp refr module"
+                default y
+                depends on LV_USE_LOG
+
+            config LV_LOG_TRACE_EVENT
+                bool "Enable/Disable LV_LOG_TRACE in event module"
+                default y
+                depends on LV_USE_LOG
+
+            config LV_LOG_TRACE_OBJ_CREATE
+                bool "Enable/Disable LV_LOG_TRACE in obj create module"
+                default y
+                depends on LV_USE_LOG
+
+            config LV_LOG_TRACE_LAYOUT
+                bool "Enable/Disable LV_LOG_TRACE in layout module"
+                default y
+                depends on LV_USE_LOG
+
+            config LV_LOG_TRACE_ANIM
+                bool "Enable/Disable LV_LOG_TRACE in anim module"
+                default y
+                depends on LV_USE_LOG
+        endmenu
+
+        menu "Asserts"
+            config LV_USE_ASSERT_NULL
+                bool "Check if the parameter is NULL. (Very fast, recommended)"
+                default y if !LV_CONF_MINIMAL
+
+            config LV_USE_ASSERT_MALLOC
+                bool "Checks if the memory is successfully allocated or no. (Very fast, recommended)"
+                default y if !LV_CONF_MINIMAL
+
+            config LV_USE_ASSERT_STYLE
+                bool "Check if the styles are properly initialized. (Very fast, recommended)"
+
+            config LV_USE_ASSERT_MEM_INTEGRITY
+                bool "Check the integrity of `lv_mem` after critical operations. (Slow)"
+
+            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"
+            config LV_USE_PERF_MONITOR
+                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."
+                depends on !LV_MEM_CUSTOM
+
+            config LV_USE_REFR_DEBUG
+                bool "Draw random colored rectangles over the redrawn areas."
+
+            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
+
+            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
+    endmenu
+
+    menu "Font usage"
+        menu "Enable built-in fonts"
+            config LV_FONT_MONTSERRAT_8
+                bool "Enable Montserrat 8"
+            config LV_FONT_MONTSERRAT_10
+                bool "Enable Montserrat 10"
+            config LV_FONT_MONTSERRAT_12
+                bool "Enable Montserrat 12"
+            config LV_FONT_MONTSERRAT_14
+                bool "Enable Montserrat 14"
+                default y if !LV_CONF_MINIMAL
+            config LV_FONT_MONTSERRAT_16
+                bool "Enable Montserrat 16"
+            config LV_FONT_MONTSERRAT_18
+                bool "Enable Montserrat 18"
+            config LV_FONT_MONTSERRAT_20
+                bool "Enable Montserrat 20"
+            config LV_FONT_MONTSERRAT_22
+                bool "Enable Montserrat 22"
+            config LV_FONT_MONTSERRAT_24
+                bool "Enable Montserrat 24"
+            config LV_FONT_MONTSERRAT_26
+                bool "Enable Montserrat 26"
+            config LV_FONT_MONTSERRAT_28
+                bool "Enable Montserrat 28"
+            config LV_FONT_MONTSERRAT_30
+                bool "Enable Montserrat 30"
+            config LV_FONT_MONTSERRAT_32
+                bool "Enable Montserrat 32"
+            config LV_FONT_MONTSERRAT_34
+                bool "Enable Montserrat 34"
+            config LV_FONT_MONTSERRAT_36
+                bool "Enable Montserrat 36"
+            config LV_FONT_MONTSERRAT_38
+                bool "Enable Montserrat 38"
+            config LV_FONT_MONTSERRAT_40
+                bool "Enable Montserrat 40"
+            config LV_FONT_MONTSERRAT_42
+                bool "Enable Montserrat 42"
+            config LV_FONT_MONTSERRAT_44
+                bool "Enable Montserrat 44"
+            config LV_FONT_MONTSERRAT_46
+                bool "Enable Montserrat 46"
+            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_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
+
+        choice LV_FONT_DEFAULT
+            prompt "Select theme default title font"
+            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
+
+            config LV_FONT_DEFAULT_MONTSERRAT_8
+                bool "Montserrat 8"
+                select LV_FONT_MONTSERRAT_8
+            config LV_FONT_DEFAULT_MONTSERRAT_12
+                bool "Montserrat 12"
+                select LV_FONT_MONTSERRAT_12
+            config LV_FONT_DEFAULT_MONTSERRAT_14
+                bool "Montserrat 14"
+                select LV_FONT_MONTSERRAT_14
+            config LV_FONT_DEFAULT_MONTSERRAT_16
+                bool "Montserrat 16"
+                select LV_FONT_MONTSERRAT_16
+            config LV_FONT_DEFAULT_MONTSERRAT_18
+                bool "Montserrat 18"
+                select LV_FONT_MONTSERRAT_18
+            config LV_FONT_DEFAULT_MONTSERRAT_20
+                bool "Montserrat 20"
+                select LV_FONT_MONTSERRAT_20
+            config LV_FONT_DEFAULT_MONTSERRAT_22
+                bool "Montserrat 22"
+                select LV_FONT_MONTSERRAT_22
+            config LV_FONT_DEFAULT_MONTSERRAT_24
+                bool "Montserrat 24"
+                select LV_FONT_MONTSERRAT_24
+            config LV_FONT_DEFAULT_MONTSERRAT_26
+                bool "Montserrat 26"
+                select LV_FONT_MONTSERRAT_26
+            config LV_FONT_DEFAULT_MONTSERRAT_28
+                bool "Montserrat 28"
+                select LV_FONT_MONTSERRAT_28
+            config LV_FONT_DEFAULT_MONTSERRAT_30
+                bool "Montserrat 30"
+                select LV_FONT_MONTSERRAT_30
+            config LV_FONT_DEFAULT_MONTSERRAT_32
+                bool "Montserrat 32"
+                select LV_FONT_MONTSERRAT_32
+            config LV_FONT_DEFAULT_MONTSERRAT_34
+                bool "Montserrat 34"
+                select LV_FONT_MONTSERRAT_34
+            config LV_FONT_DEFAULT_MONTSERRAT_36
+                bool "Montserrat 36"
+                select LV_FONT_MONTSERRAT_36
+            config LV_FONT_DEFAULT_MONTSERRAT_38
+                bool "Montserrat 38"
+                select LV_FONT_MONTSERRAT_38
+            config LV_FONT_DEFAULT_MONTSERRAT_40
+                bool "Montserrat 40"
+                select LV_FONT_MONTSERRAT_40
+            config LV_FONT_DEFAULT_MONTSERRAT_42
+                bool "Montserrat 42"
+                select LV_FONT_MONTSERRAT_42
+            config LV_FONT_DEFAULT_MONTSERRAT_44
+                bool "Montserrat 44"
+                select LV_FONT_MONTSERRAT_44
+            config LV_FONT_DEFAULT_MONTSERRAT_46
+                bool "Montserrat 46"
+                select LV_FONT_MONTSERRAT_46
+            config LV_FONT_DEFAULT_MONTSERRAT_48
+                bool "Montserrat 48"
+                select LV_FONT_MONTSERRAT_48
+            config LV_FONT_DEFAULT_MONTSERRAT_12_SUBPX
+                bool "Montserrat 12 sub-pixel"
+                select LV_FONT_MONTSERRAT_12_SUBPX
+            config LV_FONT_DEFAULT_MONTSERRAT_28_COMPRESSED
+                bool "Montserrat 28 compressed"
+                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
+
+        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"
+        choice LV_TXT_ENC
+            prompt "Select a character encoding for strings"
+            help
+                Select a character encoding for strings. Your IDE or editor should have the same character encoding.
+            default LV_TXT_ENC_UTF8 if !LV_CONF_MINIMAL
+            default LV_TXT_ENC_ASCII if LV_CONF_MINIMAL
+
+            config LV_TXT_ENC_UTF8
+                bool "UTF8"
+            config LV_TXT_ENC_ASCII
+                bool "ASCII"
+        endchoice
+
+        config LV_TXT_BREAK_CHARS
+            string "Can break (wrap) texts on these chars"
+            default " ,.;:-_"
+
+        config LV_TXT_LINE_BREAK_LONG_LEN
+            int "Line break long length"
+            default 0
+            help
+                If a word is at least this long, will break wherever 'prettiest'.
+                To disable, set to a value <= 0.
+
+        config LV_TXT_LINE_BREAK_LONG_PRE_MIN_LEN
+            int "Min num chars before break"
+            default 3
+            depends on LV_TXT_LINE_BREAK_LONG_LEN > 0
+            help
+                Minimum number of characters in a long word to put on a line before a break.
+
+        config LV_TXT_LINE_BREAK_LONG_POST_MIN_LEN
+            int "Min num chars after break"
+            default 3
+            depends on LV_TXT_LINE_BREAK_LONG_LEN > 0
+            help
+                Minimum number of characters in a long word to put on a line after a break.
+
+        config LV_TXT_COLOR_CMD
+            string "The control character to use for signalling text recoloring"
+            default "#"
+
+        config LV_USE_BIDI
+            bool "Support bidirectional texts"
+            help
+                Allows mixing Left-to-Right and Right-to-Left texts.
+                The direction will be processed according to the Unicode Bidirectional Algorithm:
+                https://www.w3.org/International/articles/inline-bidi-markup/uba-basics
+
+        choice
+            prompt "Set the default BIDI direction"
+            default LV_BIDI_DIR_AUTO
+            depends on LV_USE_BIDI
+
+            config LV_BIDI_DIR_LTR
+                bool "Left-to-Right"
+            config LV_BIDI_DIR_RTL
+                bool "Right-to-Left"
+            config LV_BIDI_DIR_AUTO
+                bool "Detect texts base direction"
+        endchoice
+
+        config LV_USE_ARABIC_PERSIAN_CHARS
+            bool "Enable Arabic/Persian processing"
+            help
+                In these languages characters should be replaced with
+                an other form based on their position in the text.
+    endmenu
+
+    menu "Widget usage"
+        config LV_USE_ARC
+            bool "Arc."
+            default y if !LV_CONF_MINIMAL
+        config LV_USE_BAR
+            bool "Bar."
+            default y if !LV_CONF_MINIMAL
+        config LV_USE_BTN
+            bool "Button."
+            default y if !LV_CONF_MINIMAL
+        config LV_USE_BTNMATRIX
+            bool "Button matrix."
+            default y if !LV_CONF_MINIMAL
+        config LV_USE_CANVAS
+            bool "Canvas. Dependencies: lv_img."
+            default y if !LV_CONF_MINIMAL
+        config LV_USE_CHECKBOX
+            bool "Check Box"
+            default y if !LV_CONF_MINIMAL
+        config LV_USE_DROPDOWN
+            bool "Drop down list. Requires: lv_label."
+            select LV_USE_LABEL
+            default y if !LV_CONF_MINIMAL
+        config LV_USE_IMG
+            bool "Image. Requires: lv_label."
+            select LV_USE_LABEL
+            default y if !LV_CONF_MINIMAL
+        config LV_USE_LABEL
+            bool "Label."
+            default y if !LV_CONF_MINIMAL
+        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_ROLLER
+            bool "Roller. Requires: lv_label."
+            select LV_USE_LABEL
+            default y if !LV_CONF_MINIMAL
+        config LV_ROLLER_INF_PAGES
+            int "Number of extra 'pages' when the controller is infinite."
+            default 7
+            depends on LV_USE_ROLLER
+        config LV_USE_SLIDER
+            bool "Slider. Requires: lv_bar."
+            select LV_USE_BAR
+            default y if !LV_CONF_MINIMAL
+        config LV_USE_SWITCH
+            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_PWD_SHOW_TIME
+            int "Text area def. pwd show time [ms]."
+            default 1500
+            depends on LV_USE_TEXTAREA
+        config LV_USE_TABLE
+            bool "Table."
+            default y if !LV_CONF_MINIMAL
+    endmenu
+
+    menu "Extra Widgets"
+        config LV_USE_ANIMIMG
+            bool "Anim image."
+            default y if !LV_CONF_MINIMAL
+        config LV_USE_CALENDAR
+            bool "Calendar."
+            default y if !LV_CONF_MINIMAL
+        config LV_CALENDAR_WEEK_STARTS_MONDAY
+            bool "Calendar week starts monday."
+            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 if !LV_CONF_MINIMAL
+        config LV_USE_GRID
+            bool "A layout similar to Grid in CSS."
+            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) 2016 Gábor Kiss-Vámosi
+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,221 +1,181 @@
-<h1 align="center"> LittlevGL - Open-source Embedded GUI Library</h1>
+<h1 align="center"> LVGL - Light and Versatile Graphics Library</h1>
+
 <p align="center">
-<a href="https://github.com/littlevgl/lvgl/blob/master/LICENCE.txt"><img src="https://img.shields.io/badge/licence-MIT-blue.svg"></a>
-<a href="https://github.com/littlevgl/lvgl/releases/tag/v5.3"><img src="https://img.shields.io/badge/version-5.3-blue.svg"></a>
-<br>
-<img src="https://littlevgl.com/github/cover_ori_reduced_2.gif">
+<img src="https://lvgl.io/assets/images/lvgl_widgets_demo.gif">
 </p>
 
 <p align="center">
-LittlevGL provides everything you need to create a Graphical User Interface (GUI) on embedded systems 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://littlevgl.com">Website </a> &middot; 
-<a href="https://littlevgl.com/live-demo">Live demo</a> &middot; 
-<a href="https://docs.littlevgl.com/#PC-simulator">Simulator</a> &middot; 
-<a href="https://docs.littlevgl.com/">Docs</a> &middot;
-<a href="https://blog.littlevgl.com/">Blog</a>
+<a href="https://lvgl.io">Website </a> &middot;
+<a href="https://docs.lvgl.io/">Docs</a> &middot;
+<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>
 
-<!--
-<p align="center">
-:star: Star the project if you like it! And share with your friends <a href="https://twitter.com/intent/tweet?text=LittlevGL%20is%20a%20free%20and%20open%20source%20embedded%20GUI%20library%20with%20easy-to-use%20graphical%20elements,%20beautiful%20visual%20effects%20and%20low%20memory%20footprint.&url=https://littlevgl.com/&hashtags=littlevgl,embedded,gui,free,opensource"><img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social"></a>
-</p>
--->
+---
 
+#### Table of content
+- [Overview](#overview)
+- [Get started](#get-started)
+- [Examples](#examples)
+- [Services](#services)
+- [Contributing](#contributing)
+
+
+## Overview
 ### Features
-* **Powerful building blocks** buttons, charts, lists, sliders, images, etc.
-* **Advanced graphics** with animations, anti-aliasing, opacity, smooth scrolling
-* **Various input devices** touch pad, mouse, keyboard, encoder, buttons, etc.
-* **Multi-language support** with UTF-8 encoding
-* **Fully customizable** graphical elements
-* **Hardware independent** to use with any microcontroller or display
-* **Scalable** to operate with little memory (64 kB Flash, 10 kB RAM)
-* **OS, External memory and GPU** supported but not required
-* **Single frame buffer** operation even with advances graphical effects
-* **Written in C** for maximal compatibility
-* **Micropython Binding** exposes [LittlevGL API in Micropython](https://blog.littlevgl.com/2019-02-20/micropython-bindings)
-* **Simulator** to develop on PC without embedded hardware
-* **Tutorials, examples, themes** for rapid development
-* **Documentation** and API references online
+* 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/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
 
-### Supported devices
-Basically, every modern controller - which is able to drive a display - is suitable to run LittlevGL. The minimal requirements:
-- **16, 32 or 64-bit** microcontroller or processor
-- **&gt; 16 MHz** clock speed
-- **&gt; 8 kB RAM for static data** and **&gt; 2 KB RAM for dynamic data** (graphical objects)
-- **&gt; 64 kB flash** program memory
-- **Optionally ~1/10 screen sized memory** for buffered drawing (on 240 × 320, 16-bit colors it's 15 kB)
+### 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>
+    <td><strong>Minimal</strong></td>
+    <td><strong>Recommended</strong></td>
+  </tr>
+  <tr>
+    <td><strong>Architecture</strong></td>
+    <td colspan="2">16, 32 or 64 bit microcontroller or processor</td>
+  </tr>
+  <tr>
+    <td> <strong>Clock</strong></td>
+    <td> &gt; 16 MHz </td>
+    <td> &gt; 48 MHz</td>
+  </tr>
 
-Just to mention some **platforms**:
-- STM32F1, STM32F3, [STM32F4](https://blog.littlevgl.com/2017-07-15/stm32f429_disco_port), [STM32F7](https://github.com/littlevgl/stm32f746_disco_no_os_sw4stm32)
+  <tr>
+    <td> <strong>Flash/ROM</strong></td>
+    <td> &gt; 64 kB </td>
+    <td> &gt; 180 kB</td>
+  </tr>
+
+  <tr>
+    <td> <strong>Static RAM</strong></td>
+    <td> &gt; 16 kB </td>
+    <td> &gt; 48 kB</td>
+  </tr>
+
+  <tr>
+    <td> <strong>Draw buffer</strong></td>
+    <td> &gt; 1 &times; <em>hor. res.</em> pixels </td>
+    <td> &gt; 1/10 screen size </td>
+  </tr>
+
+  <tr>
+    <td> <strong>Compiler</strong></td>
+    <td colspan="2"> C99 or newer </td>
+  </tr>
+</table>
+
+*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
-- [Linux frame buffer](https://blog.littlevgl.com/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/littlevgl/esp32_ili9431)
-- Nordic nrf52
-- Quectell M66
+- [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)
+- [Infineon Aurix](https://github.com/lvgl/lv_port_aurix)
+- Nordic NRF52 Bluetooth modules
+- Quectel modems
 
-### Quick start in a simulator
-The easiest way to get started with LittlevGL is to run it in a simulator on your PC without any embedded hardware. 
+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)
 
-Choose a project with your favourite IDE:
 
-|   Eclipse   |  CodeBlocks | Visual Studio | PlatformIO | Qt Creator |
-|-------------|-------------|---------------|-----------|------------|
-|  [![Eclipse](https://littlevgl.com/logo/ide/eclipse.jpg)](https://github.com/littlevgl/pc_simulator_sdl_eclipse) | [![CodeBlocks](https://littlevgl.com/logo/ide/codeblocks.jpg)](https://github.com/littlevgl/pc_simulator_win_codeblocks) | [![VisualStudio](https://littlevgl.com/logo/ide/visualstudio.jpg)](https://github.com/littlevgl/visual_studio_2017_sdl_x64)   |   [![PlatformIO](https://littlevgl.com/logo/ide/platformio.jpg)](https://github.com/littlevgl/pc_simulator_sdl_platformio) | [![QtCreator](https://littlevgl.com/logo/ide/qtcreator.jpg)](https://blog.littlevgl.com/2019-01-03/qt-creator) |
-| Cross-platform<br>with SDL | Native Windows | Cross-platform<br>with SDL | Cross-platform<br>with SDL | Cross-platform<br>with SDL |
+## 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/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/master/CONTRIBUTING.html) guide to see how you can help to improve LVGL (15 minutes)
 
-### Porting to an embedded hardware
-In the most simple case you need to do these steps:
-1. Copy `lv_conf_templ.h` as `lv_conf.h` next to `lvgl` and set at least `LV_HOR_RES`, `LV_VER_RES` and `LV_COLOR_DEPTH`. 
-2. Call `lv_tick_inc(x)` every `x` milliseconds **in a Timer or Task** (`x` should be between 1 and 10). It is required for the internal timing of LittlevGL. **It's very important that you don't call `lv_task_handler` in the same loop.**
-3. Call `lv_init()`
-4. Create a buffer for LittlevGL
+## Examples
+
+For more examples see the [examples](https://github.com/lvgl/lvgl/tree/master/examples) folder.
+
+![LVGL button with label example](https://github.com/lvgl/lvgl/raw/master/docs/misc/btn_example.png)
+
+### C
 ```c
-static lv_disp_buf_t disp_buf;
-static lv_color_t buf[LV_HOR_RES_MAX * 10];                     /*Declare a buffer for 10 lines*/
-lv_disp_buf_init(&disp_buf, buf, NULL, LV_HOR_RES_MAX * 10);    /*Initialize the display buffer*/
-```
-4. Implement and register a function which can **copy a pixel array** to an area of your diplay:
-```c
-lv_disp_drv_t disp_drv;               /*Descriptor of a display driver*/
-lv_disp_drv_init(&disp_drv);          /*Basic initialization*/
-disp_drv.hor_res = 480;               /*Set the horizontal resolution*/
-disp_drv.ver_res = 320;               /*Set the vertical resolution*/
-disp_drv.flush_cb = my_disp_flush;    /*Set your driver function*/
-disp_drv.buffer = &disp_buf;          /*Assign the buffer to teh display*/
-lv_disp_drv_register(&disp_drv);      /*Finally register the driver*/
-    
-void my_disp_flush(lv_disp_t * disp, const lv_area_t * area, lv_color_t * color_p)
+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_event_t * e)
 {
-    int32_t x, y;
-    for(y = area->y1; y <= area->y2; y++) {
-        for(x = area->x1; x <= area->x2; x++) {
-            set_pixel(x, y, *color_p);  /* Put a pixel to the display.*/
-            color_p++;
-        }
-    }
-
-    lv_disp_flush_ready(disp);                  /* Tell you are ready with the flushing*/
-}
-    
-```
-5. Register a function which can **read an input device**. E.g. for a touch pad:
-```c
-lv_indev_drv_init(&indev_drv);             /*Descriptor of a input device driver*/
-indev_drv.type = LV_INDEV_TYPE_POINTER;    /*Touch pad is a pointer-like device*/
-indev_drv.read_cb = my_touchpad_read;      /*Set your driver function*/
-lv_indev_drv_register(&indev_drv);         /*Finally register the driver*/
-
-bool my_touchpad_read(lv_indev_t * indev, lv_indev_data_t * data)
-{
-    static lv_coord_t last_x = 0;
-    static lv_coord_t last_y = 0;
-
-    /*Save the state and save the pressed coordinate*/
-    data->state = touchpad_is_pressed() ? LV_INDEV_STATE_PR : LV_INDEV_STATE_REL; 
-    if(data->state == LV_INDEV_STATE_PR) touchpad_get_xy(&last_x, &last_y);
-   
-    /*Set the coordinates (if released use the last pressed coordinates)*/
-    data->point.x = last_x;
-    data->point.y = last_y;
-
-    return false; /*Return `false` because we are not buffering and no more data to read*/
+  printf("Clicked\n");
 }
 ```
-6. Call `lv_task_handler()` periodically every few milliseconds in the main `while(1)` loop, in Timer interrupt or in an Operation system task. It will redraw the screen if required, handle input devices etc. **It's very important that you don't call `lv_tick_inc` in the same loop.**
-
-For a detailed description check the [Documentation](https://docs.littlevgl.com/#Porting) or the [Porting examples](https://github.com/littlevgl/lvgl/tree/multi-disp/lv_porting).
- 
- 
-### Code examples
-#### Create a button with a label and assign a click callback
-```c
-lv_obj_t * btn = lv_btn_create(lv_scr_act(), NULL);     /*Add a button the current screen*/
-lv_obj_set_pos(btn, 10, 10);                            /*Set its position*/
-lv_obj_set_size(btn, 100, 50);                          /*Set its size*/
-
-lv_btn_set_action(btn, LV_BTN_ACTION_CLICK, btn_action);/*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_res_t btn_action(lv_obj_t * btn)
-{
-    printf("Clicked\n");
-    return LV_RES_OK;
-}
-```
-![Simple button with LittelvGL](https://littlevgl.com/github/btn1.gif)
-
-#### Modify the styles
-```c
-static lv_style_t style_btn_rel;                        /*A variable to store the released style*/
-lv_style_copy(&style_btn_rel, &lv_style_plain);         /*Initialize from a built-in style*/
-style_btn_rel.body.border.color = LV_COLOR_HEX3(0x269);
-style_btn_rel.body.border.width = 1;
-style_btn_rel.body.main_color = LV_COLOR_HEX3(0xADF);
-style_btn_rel.body.grad_color = LV_COLOR_HEX3(0x46B);
-style_btn_rel.body.shadow.width = 4;
-style_btn_rel.body.shadow.type = LV_SHADOW_BOTTOM;
-style_btn_rel.body.radius = LV_RADIUS_CIRCLE;
-style_btn_rel.text.color = LV_COLOR_HEX3(0xDEF);
-
-static lv_style_t style_btn_pr;                         /*A variable to store the pressed style*/
-lv_style_copy(&style_btn_pr, &style_btn_rel);           /*Initialize from the released style*/
-style_btn_pr.body.border.color = LV_COLOR_HEX3(0x46B);
-style_btn_pr.body.main_color = LV_COLOR_HEX3(0x8BD);
-style_btn_pr.body.grad_color = LV_COLOR_HEX3(0x24A);
-style_btn_pr.body.shadow.width = 2;
-style_btn_pr.text.color = LV_COLOR_HEX3(0xBCD);
-
-lv_btn_set_style(btn, LV_BTN_STYLE_REL, &style_btn_rel);    /*Set the button's released style*/
-lv_btn_set_style(btn, LV_BTN_STYLE_PR, &style_btn_pr);      /*Set the button's pressed style*/
-```
-
-![Simple button with LittelvGL](https://littlevgl.com/github/btn2.gif)
-
-#### Enable a fancy effect
-```c
-/*Add some effects when the button is clicked*/
-lv_btn_set_ink_in_time(btn, 300);
-lv_btn_set_ink_wait_time(btn, 100);
-lv_btn_set_ink_out_time(btn, 300);
-```
-
-![Simple button with LittelvGL](https://littlevgl.com/github/btn3.gif)
-
-#### Use LittlevGL from Micropython
+### 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()
 ```
 
-Check out the [Documentation](https://docs.littlevgl.com/) for more!
+## 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
 
-### Contributing
-To ask questions please use the [Forum](https://forum.littlevgl.com).
-FOr development related things (bug reports, feature suggestions) use [GitHub's Issue tracker](https://github.com/littlevgl/lvgl/issues). 
-You can contribute in several ways:
-- **Answer other's question** in the Forum
-- **Report and/or fix bugs** using the issue tracker and in Pull-request
-- **Suggest and/or implement new features** using the issue tracker and in Pull-request
-- **Improve and/or translate the documentation** learn more [here](https://github.com/littlevgl/docs)
-- **Write a blog post about your experiences** learn more [here](https://github.com/littlevgl/blog)
-- **Upload your project or product as a reference** to [this site](https://blog.littlevgl.com/2018-12-26/references)
+For more information see https://lvgl.io/services
+Feel free to contact us if you have any questions.
 
-Before contributing, please read [CONTRIBUTING.md](https://github.com/littlevgl/lvgl/blob/master/docs/CONTRIBUTING.md).  
 
-### Donate
-If you are pleased with the library, found it useful, or you are happy with the support you got, please help its further development:
+## 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.
 
-[![Donate](https://littlevgl.com/donate_dir/donate_btn.png)](https://littlevgl.com/donate)
+For a detailed description of contribution opportunities visit the [Contributing](https://docs.lvgl.io/master/CONTRIBUTING.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')

component.mk

@@ -0,0 +1,34 @@
+# ESP-IDF component file for make based commands
+
+COMPONENT_SRCDIRS := . \
+                  src \
+                  src/core \
+                  src/draw \
+                  src/extra \
+                  src/font \
+                  src/gpu \
+                  src/hal \
+                  src/misc \
+                  src/widgets \
+                  src/extra/layouts \
+                  src/extra/layouts/flex \
+                  src/extra/layouts/grid \
+                  src/extra/themes \
+                  src/extra/themes/basic \
+                  src/extra/themes/default \
+                  src/extra/widgets/calendar \
+                  src/extra/widgets/colorwheel \
+                  src/extra/widgets \
+                  src/extra/widgets/imgbtn \
+                  src/extra/widgets/keyboard \
+                  src/extra/widgets/led \
+                  src/extra/widgets/list \
+                  src/extra/widgets/msgbox \
+                  src/extra/widgets/spinbox \
+                  src/extra/widgets/spinner \
+                  src/extra/widgets/tabview \
+                  src/extra/widgets/tileview \
+                  src/extra/widgets/win
+
+
+COMPONENT_ADD_INCLUDEDIRS := $(COMPONENT_SRCDIRS) .

docs/CODE_OF_CONDUCT.md

@@ -34,7 +34,7 @@ This Code of Conduct applies both within project spaces and in public spaces whe
 
 ## Enforcement
 
-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at [atom@github.com](mailto:atom@github.com). All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team using the [contact form](https://lvgl.io/about). All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
 
 Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
 

docs/CODING_STYLE.md

@@ -0,0 +1,89 @@
+# Coding style
+
+## File format
+Use [misc/lv_templ.c](https://github.com/lvgl/lvgl/blob/master/src/misc/lv_templ.c) and [misc/lv_templ.h](https://github.com/lvgl/lvgl/blob/master/src/misc/lv_templ.h)
+
+## Naming conventions
+* Words are separated by '_'
+* In variable and function names use only lower case letters (e.g. *height_tmp*)
+* In enums and defines use only upper case letters (e.g. *e.g. MAX_LINE_NUM*)
+* Global names (API):
+  * start with *lv*
+  * followed by module name: *btn*, *label*, *style* etc.
+  * followed by the action (for functions): *set*, *get*, *refr* etc.
+  * closed with the subject: *name*, *size*, *state* etc.
+* Typedefs
+  * prefer `typedef struct` and `typedef enum` instead of  `struct name` and `enum name`
+  * always end `typedef struct` and `typedef enum` type names with `_t`
+* Abbreviations:
+  * Only words longer or equal than 6 characters can be abbreviated.
+  * Abbreviate only if it makes the word at least half as long
+  * Use only very straightforward and well-known abbreviations (e.g. pos: position, def: default, btn: button)
+
+## Coding guide
+* Functions:
+  * Try to write function shorter than is 50 lines
+  * Always shorter than 200 lines (except very straightforwards)
+* Variables:
+  * One line, one declaration (BAD: char x, y;)
+  * Use `<stdint.h>` (*uint8_t*, *int32_t* etc)
+  * Declare variables where needed (not all at function start)
+  * Use the smallest required scope
+  * Variables in a file (outside functions) are always *static*
+  * Do not use global variables (use functions to set/get static variables)
+
+## Comments
+Before every function have a comment like this:
+
+```c
+/**
+ * Return with the screen of an object
+ * @param obj pointer to an object
+ * @return pointer to a screen
+ */
+lv_obj_t * lv_obj_get_scr(lv_obj_t * obj);
+```
+
+Always use `/*Something*/` format and NOT `//Something`
+
+Write readable code to avoid descriptive comments like:
+`x++; /*Add 1 to x*/`.
+The code should show clearly what you are doing.
+
+You should write **why** have you done this:
+`x++; /*Because of closing '\0' of the string*/`
+
+Short "code summaries" of a few lines are accepted. E.g. `/*Calculate the new coordinates*/`
+
+In comments use \` \` when referring to a variable. E.g. ``/*Update the value of `x_act`*/``
+
+### Formatting
+Here is example to show bracket placing and using of white spaces:
+```c
+/**
+ * Set a new text for a label. Memory will be allocated to store the text by the label.
+ * @param label pointer to a label object
+ * @param text '\0' terminated character string. NULL to refresh with the current text.
+ */
+void lv_label_set_text(lv_obj_t * label, const char * text)
+{   /*Main brackets of functions in new line*/
+
+    if(label == NULL) return; /*No bracket only if the command is inline with the if statement*/
+
+    lv_obj_inv(label);
+
+    lv_label_ext_t * ext = lv_obj_get_ext(label);
+
+    /*Comment before a section*/
+    if(text == ext->txt || text == NULL) {  /*Bracket of statements start inline*/
+        lv_label_refr_text(label);
+        return;
+    }
+
+    ...
+}
+```
+
+Use 4 spaces indentation instead of tab.
+
+You can use **astyle** to format the code. Run `code-formatter.sh` from the `scrips` folder.

docs/CONTRIBUTING.md

@@ -1,103 +1,266 @@
-# Contributing to Littlev Graphics Library
+```eval_rst
+.. include:: /header.rst 
+:github_url: |github_link_base|/CONTRIBUTING.md
+```
 
-**Welcome!  It's glad to see that you are interested in contributing to LittlevGL! There are several types of task where you can help to build a better library! Let's see how to get started!**
+# Contributing
+
+## Introduction
+
+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 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.
+
+So let's find which contribution option fits you the best and help you join the development of LVGL!
+
+Before getting started here are some guidelines to make contribution smoother:
+- Be kind and friendly. 
+- Be sure to read the relevant part of the documentation before posting a question.
+- Ask questions in the [Forum](https://forum.lvgl.io/) and use [GitHub](https://github.com/lvgl/) for development-related discussions.
+- Always fill out the post or issue templates in the Forum or GitHub (or at least provide equivalent information). It makes understanding your contribution or issue easier and you will get a useful response faster.
+- If possible send an absolute minimal but buildable code example in order to reproduce the issue. Be sure it contains all the required variable declarations, constants, and assets (images, fonts).
+- Use [Markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) to format your posts. You can learn it in 10 minutes.
+- Speak about one thing in one issue or topic. It makes your post easier to find later for someone with the same question.
+- Give feedback and close the issue or mark the topic as solved if your question is answered. 
+- For non-trivial fixes and features, it's better to open an issue first to discuss the details instead of sending a pull request directly.
+- Please read and follow the <a href="https://github.com/lvgl/lvgl/blob/master/docs/CODING_STYLE.md">Coding style</a> guide.
+
+## Pull request
+
+Merging new code into the lvgl, documentation, blog, examples, and other repositories happen via *Pull requests* (PR for short).
+A PR is a notification like "Hey, I made some updates to your project. Here are the changes, you can add them if you want."
+To do this you need a copy (called fork) of the original project under your account, make some changes there, and notify the original repository about your updates. 
+You can see what it looks like on GitHub for LVGL here: [https://github.com/lvgl/lvgl/pulls](https://github.com/lvgl/lvgl/pulls).
+
+To add your changes you can edit files online on GitHub and send a new Pull request from there (recommended for small changes) or
+ add the updates in your favorite editor/IDE and use git to publish the changes (recommended for more complex updates).
+
+### From GitHub
+1. Navigate to the file you want to edit.
+2. Click the Edit button in the top right-hand corner.
+3. Add your changes to the file.
+4. Add a commit message on the bottom of the page.
+5. Click the *Propose changes* button.
+
+### From command line
+
+The instructions describe the main `lvgl` repository but it works the same way for the other repositories.
+1. Fork the [lvgl repository](https://github.com/lvgl/lvgl). To do this click the "Fork" button in the top right corner. 
+It will "copy" the `lvgl` repository to your GitHub account (`https://github.com/<YOUR_NAME>?tab=repositories`)
+2. Clone your forked repository.
+3. Add your changes. You can create a *feature branch* from *master* for the updates: `git checkout -b the-new-feature` 
+4. Commit and push your changes to the forked `lvgl` repository.
+5. Create a PR on GitHub from the page of your `lvgl` repository (`https://github.com/<YOUR_NAME>/lvgl`) by clicking the *"New pull request"* button. Don't forget to select the branch where you added your changes.
+7. Set the base branch. It means where you want to merge your update. In the `lvgl` repo fixes go to `master`, new features to `dev` branch. 
+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
+
+To ensure all licensing criteria are met for every repository of the LVGL project, we apply a process called DCO (Developer's Certificate of Origin).
+
+The text of DCO can be read here: [https://developercertificate.org/](https://developercertificate.org/).
+
+By contributing to any repositories of the LVGL project you agree that your contribution complies with the DCO.
+
+If your contribution fulfills the requirements of the DCO no further action is needed. If you are unsure feel free to ask us in a comment.
+
+### Accepted licenses and copyright notices
+
+To make the DCO easier to digest, here are some practical guides about specific cases:
+
+#### Your own work
+
+The simplest case is when the contribution is solely your own work. 
+In this case you can just send a Pull Request without worrying about any licensing issues.
+
+#### Use code from online source
+
+If the code you would like to add is based on an article, post or comment on a website (e.g. StackOverflow) the license and/or rules of that site should be followed.
+
+For example in case of StackOwerflow a notice like this can be used:
+```
+/* The original version of this code-snippet was published on StackOverflow.
+ * Post: http://stackoverflow.com/questions/12345
+ * Author: http://stackoverflow.com/users/12345/username
+ * The following parts of the snippet were changed:
+ * - Check this or that
+ * - Optimize performance here and there
+ */
+ ... code snippet here ...
+```
+
+#### Use MIT licensed code
+As LVGL is MIT licensed, other MIT licensed code can be integrated without issues.
+The MIT license requires a copyright notice be added to the derived work. Any derivative work based on MIT licensed code must copy the original work's license file or text.
+
+#### Use GPL licensed code
+The GPL license is not compatible with the MIT license. Therefore, LVGL can not accept GPL licensed code. 
+ 
+## Ways to contribute
+
+Even if you're just getting started with LVGL there are plenty of ways to get your feet wet. 
+Most of these options don't even require knowing a single line of LVGL code. 
+
+Below we have collected some opportunities about the ways you can contribute to LVGL.  
+
+### Give LVGL a Star
+
+Show that you like LVGL by giving it star on GitHub!
+<!-- Place this tag in your head or just before your close body tag. -->
+<script async defer src="https://buttons.github.io/buttons.js"></script>
+<!-- Place this tag where you want the button to render. -->
+<a class="github-button" href="https://github.com/lvgl/lvgl" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star lvgl/lvgl on GitHub">Star</a>
+
+This simple click makes LVGL more visible on GitHub and makes it more attractive to other people. 
+So with this, you already helped a lot! 
+
+### Tell what you have achieved
+
+Have you already started using LVGL in a [Simulator](/get-started/pc-simulator), a development board, or on your custom hardware? 
+Was it easy or were there some obstacles? Are you happy with the result? 
+Showing your project to others is a win-win situation because it increases your and LVGL's reputation at the same time.
+
+You can post about your project on Twitter, Facebook, LinkedIn, create a YouTube video, and so on. 
+Only one thing: On social media don't forget to add a link to `https://lvgl.io` or `https://github.com/lvgl` and use the hashtag `#lvgl`. Thank you! :) 
+
+You can also open a new topic in the [My projects](https://forum.lvgl.io/c/my-projects/10) category of the Forum.
+
+The [LVGL Blog](https://blog.lvgl.io) welcomes posts from anyone. 
+It's a good place to talk about a project you created with LVGL, write a tutorial, or share some nice tricks.
+The latest blog posts are shown on the [homepage of LVGL](https://lvgl.io) to make your work more visible.
+
+The blog is hosted on GitHub. If you add a post GitHub automatically turns it into a website. 
+See the [README](https://github.com/lvgl/blog) of the blog repo to see how to add your post.
+ 
+Any of these help to spread the word and familiarize new developers with LVGL.
+
+If you don't want to speak about your project publicly, feel free to use [Contact form](https://lvgl.io/#contact) on lvgl.io to private message to us. 
+
+### Write examples
+As you learn LVGL you will probably play with the features of widgets. Why not publish your experiments?
+
+Each widgets' documentation contains examples. For instance, here are the examples of the [Drop-down list](/widgets/core/dropdown#examples) widget. 
+The examples are directly loaded from the [lvgl/examples](https://github.com/lvgl/lvgl/tree/master/examples) folder. 
+
+So all you need to do is send a [Pull request](#pull-request) to the [lvgl](https://github.com/lvgl/lvgl) repository and follow some conventions:
+- Name the examples like `lv_example_<widget_name>_<index>`.
+- Make the example as short and simple as possible.
+- Add comments to explain what the example does.
+- Use 320x240 resolution.
+- Update `index.rst` in the example's folder with your new example. To see how other examples are added, look in the [lvgl/examples/widgets](https://github.com/lvgl/lvgl/tree/master/examples/widgets) folder.
+
+### Improve the docs
+
+As you read the documentation you might see some typos or unclear sentences. All the documentation is located in the [lvgl/docs](https://github.com/lvgl/lvgl/tree/master/docs) folder.
+For typos and straightforward fixes, you can simply edit the file on GitHub. 
+
+Note that the documentation is also formatted in [Markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet). 
+
+### Report bugs
+As you use LVGL you might find bugs. Before reporting them be sure to check the relevant parts of the documentation.
+
+If it really seems like a bug feel free to open an [issue on GitHub](https://github.com/lvgl/lvgl/issues). 
+
+When filing the issue be sure to fill out the template. It helps find the root of the problem while avoiding extensive questions and exchanges with other developers.
+
+### Send fixes
+The beauty of open-source software is you can easily dig in to it to understand how it works. You can also fix or adjust it as you wish.
+
+If you found and fixed a bug don't hesitate to send a [Pull request](#pull-request) with the fix.
+
+In your Pull request please also add a line to [`CHANGELOG.md`](https://github.com/lvgl/lvgl/blob/master/CHANGELOG.md).
+
+### Join the conversations in the Forum
+It feels great to know you are not alone if something is not working. It's even better to help others when they struggle with something.
+
+While you were learning LVGL you might have had questions and used the Forum to get answers. As a result, you probably have more knowledge about how LVGL works.
+
+One of the best ways to give back is to use the Forum and answer the questions of newcomers - like you were once.
+
+Just read the titles and if you are familiar with the topic don't hesitate to share your thoughts and suggestions.
+
+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
+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. 
+
+When adding a new features the followings also needs to be updated:
+- 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
+
+If you want to become part of the core development team, you can become a maintainer of a repository.
+
+By becoming a maintainer:
+- You get write access to that repo:
+  - Add code directly without sending a pull request
+  - Accept pull requests
+  - Close/reopen/edit issues
+- Your input has higher impact when we are making decisions
+
+You can become a maintainer by invitation, however the following conditions need to met
+1. Have > 50 replies in the Forum. You can look at your stats [here](https://forum.lvgl.io/u?period=all)
+2. Send > 5 non-trivial pull requests to the repo where you would like to be a maintainer
 
 
-There are many different possibilities to join the community. If you have some time to work with us I'm sure you will find something that fits you! You can:
-- answer other's questions
-- report and/or fix bugs
-- suggest and/or implement new features
-- improve and/or translate the documentation
-- write a blog post about your experiences
+If you are interested, just send a message (e.g. from the Forum) to the current maintainers of the repository. They will check if the prerequisites are met. 
+Note that meeting the prerequisites is not a guarantee of acceptance, i.e. if the conditions are met you won't automatically become a maintainer. 
+It's up to the current maintainers to make the decision.
 
-But first, start with the most Frequently Asked Questions.
+### Move your project repository under LVGL organization
+Besides the core `lvgl` repository there are other repos for ports to development boards, IDEs or other environment. 
+If you ported LVGL to a new platform we can host it under the LVGL organization among the other repos.
 
-## FAQ about contributing
+This way your project will become part of the whole LVGL project and can get more visibility. 
+If you are interested in this opportunity just open an [issue in lvgl repo](https://github.com/lvgl/lvgl/issues) and tell what you have! 
 
-### What license does my code need to be under?
-
-Any code added to LittlevGL must be licensed under [MIT](https://choosealicense.com/licenses/mit/) or another license that is fully compatible. Contributions under other licenses are highly likely to be rejected.
-
-If you borrow code from another project, please make sure to add their copyright notice to your contribution.
-
-### Where do I ask questions, give feedback, or report bugs?
-
-We use the [forum](http://forum.littlevgl.com/) for questions, feature suggestions, and discussions.
-
-We use [GitHub's issue tracker](https://github.com/littlevgl/lvgl/issues) to report bugs.
-
-For both of these there are some rules:
-- Be kind and friendly.
-- Speak about one thing in one issue.
-- Give feedback and close the issue if your question is answered. 
-- Explain exactly what you experience or expect. _"The button is not working"_ is not enough info to get help.
-- For most issues you should send an absolute minimal code example in order to reproduce the issue. Ideally this should be easily usable in the PC simulator.
-- Use [Markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) to format your post.
-- If you don't get any answer in a week write a comment like "Can somebody help?". Maybe your issue wasn't noticed.
-
-### How can I send fixes and improvements?
-Merging new code happens via Pull Requests. If you are still not familiar with the Pull Requests (PR for short) here is a quick guide about them:
-1. **Fork** the [lvgl repository](https://github.com/littlevgl/lvgl). To do this click the "Fork" button in the top right corner. It will "copy" the `lvgl` repository to your GitHub account (`https://github.com/your_name?tab=repositories`)
-2. **Clone**  the forked repository and add your updates
-3. **Create a PR** on the GitHub on the page of you `lvgl` repository(`https://github.com/your_name/lvgl`) by hitting the "New pull request" button 
-4. **Set the base branch**. It means where you want to merge your update. Bugfixes for the last release go to `master`, new features to the actual `dev-x.y` branch. 
-5. **Describe** what is in the update. An example code is welcome if applicable.
-
-Some advice:
-- If you are not sure about your fix or feature it's better to open an issue first, and discuss the details there.
-- Maybe your fix or update won't be perfect at first. Don't be afraid, just improve it and push the new commits. The PR will be updated accordingly. 
-- If your update needs some extra work it's okay to say: _"I'm busy now and I will improve it soon"_ or _"Sorry, I don't have time to improve it, I hope it helps in this form too"_. So it's better to say don't have time to continue then saying nothing.
-- Please read and follow this [guide about the coding style](https://docs.littlevgl.com/#Coding-Style-Guide)
-
-
-### Where is the documentation?
-
-You can read the documentation here: https://docs.littlevgl.com/  
-You can edit the documentation here: https://github.com/littlevgl/doc  
-
-### Where is the blog?
-
-You can read the blog here: https://blog.littlevgl.com/  
-You can edit the blog here: https://github.com/littlevgl/blog  
-
-
-## So how and where can I contribute?
-
-### Answering other's questions
-
-It's a great way to contribute to the library if you already use it. Just go the [issue tracker](https://github.com/littlevgl/lvgl/issues), read the titles and if you are already familiar with a topic, don't be shy, and write your suggestion.
-
-### Reporting and/or fixing bugs
-For simple bugfixes (typos, missing error handling, fixing a warning) is fine to send a Pull request directly. However, for more complex bugs it's better to open an issue first. In the issue, you should describe how to reproduce the bug and even add the minimal code snippet.
-
-### Suggesting and/or implementing new features
-If you have a good idea don't hesitate to share with us. It's even better if you have time to deal with its implementation. Don't be afraid if you still don't know LittlevGL well enough. We will help you to get started. 
-
-During the implementation don't forget the [Code style guide](https://docs.littlevgl.com/#Coding-Style-Guide).
-
-### Improving and/or translating the documentation
-
-The documentation of LittlevGL is written in Markdown and available [here](https://github.com/littlevgl/doc) for editing. If you find some parts of the documentation obscure or insufficient just search the related `.md` file, hit the edit icon and add your updates. This way a  new Pull request will be generated automatically.
-
-If you can devote more time to improve the documentation you can translate it! 
-1. Just copy the English `.md` files from the root folder to `locale/LANGUAGE_CODE` (language code is e.g. DE, FR, ES etc)
-2. Append the language code the end of files (e.g. Welcome_fr.md)
-3. Update the filenames in `_Sidebar.md`
-4. Translate the page(s) you want
-5. Create a Pull request
-
-### Writing a blog post about your experiences
-
-Have ported LittlevGL to a new platform? Have you created a fancy GUI? Do you know a great trick? 
-You can share your knowledge on LittelvGL's blog! It's super easy to add your own post:
-- Fork and clone the [blog repository](https://github.com/littlevgl/blog)
-- Add your post in Markdown to the `_posts` folder. 
-- Store the images and other resources in a dedicated folder in `assets`
-- Create a Pull Request
-
-The blog uses [Jekyll](https://jekyllrb.com/) to convert the `.md` files to a webpage. You can easily [run Jekyll offline](https://jekyllrb.com/docs/) to check your post before creating the Pull request
-
-## Summary
-
-I hope you have taken a liking to contribute to LittelvGL. A helpful and friendly community is waiting for you! :) 
+If we agree that your port fit well into the LVGL organization, we will open a repository for your project where you will have admin rights.  
 
+To make this concept sustainable there a few rules to follow:
+- You need to add a README to your repo.
+- We expect to maintain the repo to some extent:
+  - Follow at least the major versions of LVGL 
+  - Respond to the issues (in a reasonable time)
+- If there is no activity in a repo for 1 year it will be archived

docs/ROADMAP.md

@@ -0,0 +1,82 @@
+# Roadmap
+
+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.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))
+- Make gradients more versatile
+- Make image transformations more versatile
+- Switch to RGBA colors in styles
+- Consider direct binary font format support
+- Simplify `group`s. Discussion is [here](https://forum.lvgl.io/t/lv-group-tabindex/2927/3).
+- Use [generate-changelog](https://github.com/lob/generate-changelog) to automatically generate changelog
+- lv_mem_alloc_aligned(size, align)
+- Text node. See [#1701](https://github.com/lvgl/lvgl/issues/1701#issuecomment-699479408)
+- CPP binding. See [Forum](https://forum.lvgl.io/t/is-it-possible-to-officially-support-optional-cpp-api/2736)
+- Optimize font decompression
+- Need coverage report for tests
+- Need static analyze (via coverity.io or somehing else)
+- Support dot_begin and dot_middle long modes for labels
+- Add new label alignment modes. [#1656](https://github.com/lvgl/lvgl/issues/1656)
+- Support larger images: [#1892](https://github.com/lvgl/lvgl/issues/1892)
+
+--- 
+
+## v8
+- Create an `extra` folder for complex widgets
+   - It makes the core LVGL leaner
+   - In `extra` we can have a lot and specific widgets
+   - Good place for contributions
+- New scrolling:
+  - See [feat/new-scroll](https://github.com/lvgl/lvgl/tree/feat/new-scroll) branch and  [#1614](https://github.com/lvgl/lvgl/issues/1614)) issue.
+  - Remove `lv_page` and support scrolling on `lv_obj`
+  - Support "elastic" scrolling when scrolled in
+  - Support scroll chaining among any objects types (not only `lv_pages`s)
+  - Remove `lv_drag`. Similar effect can be achieved by setting the position in `LV_EVENT_PRESSING`
+  - Add snapping
+  - Add snap stop to scroll max 1 snap point
+  - Already working
+- New layouts:
+  - See [#1615](https://github.com/lvgl/lvgl/issues/1615) issue
+  - [CSS Grid](https://css-tricks.com/snippets/css/a-guide-to-grid/)-like layout support
+  - [CSS Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)-like layout support
+  - Remove `lv_cont` and support layouts on `lv_obj`
+- Simplified File system interface ([feat/new_fs_api](https://github.com/lvgl/lvgl/tree/feat/new-fs-api) branch) to make porting easier
+  - Work in progress
+- Remove the align parameter from `lv_canvas_draw_text`
+- Remove the copy parameter from create functions
+- 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

@@ -0,0 +1,98 @@
+import os
+
+from docutils import nodes
+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 = 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:
+            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)
+        try:
+            with open(example_file) as f:
+                contents = f.read()
+        except FileNotFoundError:
+            contents = 'Error encountered while trying to open ' + example_file
+        literal_list = nodes.literal_block(contents, contents)
+        literal_list['language'] = language
+        toggle.append(literal_list)
+        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):
+    app.add_directive("lv_example", LvExample)
+    app.add_config_value("repo_commit_hash", "", "env")
+
+    return {
+        'version': '0.1',
+        'parallel_read_safe': True,
+        'parallel_write_safe': True,
+    }

docs/_static/css/custom.css

@@ -0,0 +1,108 @@
+table, th, td {
+  border: 1px solid #bbb;
+  padding: 10px;
+}
+
+td {
+  text-align:center;
+}
+span.pre
+{  
+  padding-right:8px;
+}
+
+span.pre:first-child
+{  
+  padding-right:0px;
+}
+
+
+code.sig-name
+{
+  /*margin-left:8px;*/
+}
+
+.toggle .header {
+    display: block;
+    clear: both;
+    cursor: pointer;
+    font-weight: bold; 
+}
+
+.toggle .header:before {
+   font-family: FontAwesome, "Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
+   content: "\f0da \00a0 Show "; 
+   display: inline-block;
+   font-size: 1.1em;
+}
+
+.toggle .header.open:before {
+   content: "\f0d7 \00a0 Hide "; 
+}
+
+.header p {
+    display: inline-block;
+    font-size: 1.1em;
+    margin-bottom: 8px;
+}
+
+.wy-side-nav-search {
+  background-color: #f5f5f5;
+}
+.wy-side-nav-search>div.version {
+  color: #333;
+  display: none; /*replaced by dropdown*/
+}
+
+
+.home-img {
+  width:32%; 
+  transition: transform .3s ease-out;
+}
+
+.home-img:hover {
+  transform: translate(0, -10px);
+}
+
+.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/layout.html

@@ -0,0 +1,31 @@
+{% extends "!layout.html" %}
+
+{%- block extrahead %}
+{{ super() }}
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=UA-78811084-3"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+	gtag('config', 'UA-78811084-3', { 'anonymize_ip': true });
+</script>
+{% endblock %}
+
+{% block footer %}
+{{ super() }}
+<div class="footer">This page uses <a href="https://analytics.google.com/">
+Google Analytics</a> to collect statistics. You can disable it by blocking
+the JavaScript coming from www.google-analytics.com.
+<script type="text/javascript">
+  (function() {
+    var ga = document.createElement('script');
+    ga.src = ('https:' == document.location.protocol ?
+              'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+    ga.setAttribute('async', 'true');
+    document.documentElement.firstChild.appendChild(ga);
+  })();
+</script>
+</div>
+{% endblock %}

docs/_templates/page.html

@@ -0,0 +1,82 @@
+{% extends "!page.html" %}
+
+{% block footer %}
+
+<style>
+  .wy-side-nav-search > div[role="search"] {
+    color: black;
+  }
+</style>
+ <script type="text/javascript">
+    $(document).ready(function() {
+        $(".toggle > *").hide();
+        $(".toggle .header").show();
+        $(".toggle .header").click(function() {
+            $(this).parent().children().not(".header").toggle(400);
+            $(this).parent().children(".header").toggleClass("open");
+        })
+    });
+</script>
+
+<script type="text/javascript">
+function add_version_selector()
+{
+    return fetch("https://raw.githubusercontent.com/lvgl/docs_compiled/gh-pages/versionlist.txt")
+        .then(res => res.text())
+        .then(text => {
+            const versions = text.split("\n").filter(version => version.trim().length > 0);
+            let p = document.getElementById("rtd-search-form").parentElement;
+            p.innerHTML = `
+            <select name="versions" id="versions" onchange="ver_sel()" style="border-radius:5px; margin-bottom:15px">
+            ${versions.map(version => {
+                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;
+        });
+}
+
+function ver_sel()
+{
+  var x = document.getElementById("versions").value;
+  window.location.href = window.location.protocol + "//" + window.location.host + "/" + x + "/";
+}
+
+document.addEventListener('DOMContentLoaded', (event) => {
+    add_version_selector().then(() => {
+        var value = window.location.pathname.split('/')[1];
+        document.getElementById("versions").value = value;
+    });
+    
+})
+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

@@ -0,0 +1,80 @@
+#!/usr/bin/env python3
+
+import sys
+import os
+import subprocess
+import re
+import example_list as ex
+
+langs = ['en']
+
+# Change to script directory for consistency
+abspath = os.path.abspath(__file__)
+dname = os.path.dirname(abspath)
+os.chdir(dname)
+
+def cmd(s):
+  print("")
+  print(s)
+  print("-------------------------------------")
+  r = os.system(s)
+  if r != 0: 
+    print("Exit build due to previous error")
+    exit(-1)
+
+# Get the current branch name
+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
+f = open("header.rst", "w")
+f.write(".. |github_link_base| replace:: https://github.com/lvgl/lvgl/blob/" + gitcommit + "/docs")
+f.close()
+
+base_html = "html_baseurl = 'https://docs.lvgl.io/" + urlpath + "/en/html/'"
+
+os.system("sed -i \"s|html_baseurl = .*|" + base_html +"|\" conf.py")
+
+clean = 0
+trans = 0
+skip_latex = False
+args = sys.argv[1:]
+if len(args) >= 1:
+  if "clean" in args: clean = 1
+  if "skip_latex" in args: skip_latex = True
+  
+lang = "en"
+print("")
+print("****************")
+print("Building")
+print("****************")
+if clean:
+  cmd("rm -rf " + lang)
+  cmd("mkdir " + lang)
+
+
+print("Running doxygen")
+cmd("cd ../scripts && doxygen Doxyfile")
+# BUILD PDF
+
+if not skip_latex:
+  # Silly workarond to include the more or less correct PDF download link in the PDF
+  #cmd("cp -f " + lang +"/latex/LVGL.pdf LVGL.pdf | true")
+  cmd("sphinx-build -b latex . out_latex")
+
+  # Generate PDF
+  cmd("cd out_latex && latexmk -pdf 'LVGL.tex'")
+  # Copy the result PDF to the main directory to make it avaiable for the HTML build
+  cmd("cd out_latex && cp -f LVGL.pdf ../LVGL.pdf")
+else:
+  print("skipping latex build as requested")
+
+# BULD HTML
+cmd("sphinx-build -b html . ../out_html")
+

docs/conf.py

@@ -0,0 +1,239 @@
+#!/usr/bin/env python3.7
+# -*- coding: utf-8 -*-
+#
+# LVGL documentation build configuration file, created by
+# sphinx-quickstart on Wed Jun 12 16:38:40 2019.
+#
+# This file is execfile()d with the current directory set to its
+# containing dir.
+#
+# Note that not all possible configuration values are present in this
+# autogenerated file.
+#
+# All configuration values have a default; values that are commented out
+# serve to show the default.
+
+# If extensions (or modules to document with autodoc) are in another directory,
+# add these directories to sys.path here. If the directory is relative to the
+# documentation root, use os.path.abspath to make it absolute, like shown here.
+#
+import os
+import sys
+import subprocess
+sys.path.insert(0, os.path.abspath('./_ext'))
+
+import recommonmark
+from recommonmark.transform import AutoStructify
+from sphinx.builders.html import StandaloneHTMLBuilder
+from subprocess import Popen, PIPE
+
+# -- General configuration ------------------------------------------------
+
+# If your documentation needs a minimal Sphinx version, state it here.
+#
+# needs_sphinx = '1.0'
+
+# Add any Sphinx extension module names here, as strings. They can be
+# extensions coming with Sphinx (named 'sphinx.ext.*') or your custom
+# ones.
+extensions = ['sphinx.ext.autodoc',
+    'sphinx.ext.intersphinx',
+    'sphinx.ext.todo',
+    'recommonmark',
+    'sphinx_markdown_tables',
+    'breathe',
+    'sphinx_sitemap',
+    'lv_example'
+    ]
+
+# Add any paths that contain templates here, relative to this directory.
+templates_path = ['_templates']
+
+# The default language to highlight source code in. The default is 'python'. 
+# The value should be a valid Pygments lexer name, see Showing code examples for more details.
+
+
+highlight_language = 'c'
+
+# The suffix(es) of source filenames.
+# You can specify multiple suffix as a list of string:
+#
+source_suffix = ['.rst', '.md']
+
+
+# The master toctree document.
+master_doc = 'index'
+
+# General information about the project.
+project = 'LVGL'
+copyright = '2021, LVGL Kft'
+author = 'LVGL community'
+
+# The version info for the project you're documenting, acts as replacement for
+# |version| and |release|, also used in various other places throughout the
+# built documents.
+#
+# The short X.Y version.
+# embeddedt: extract using scripts/find_version.sh
+
+version = subprocess.run(["../scripts/find_version.sh"], capture_output=True).stdout.decode("utf-8").strip()
+
+# The language for content autogenerated by Sphinx. Refer to documentation
+# for a list of supported languages.
+#
+# This is also used if you do content translation via gettext catalogs.
+# Usually you set "language" from the command line for these cases.
+language = None
+
+# List of patterns, relative to source directory, that match files and
+# directories to ignore when looking for source files.
+# This patterns also effect to html_static_path and html_extra_path
+exclude_patterns = ['_build', 'doxygen_html', 'Thumbs.db', '.DS_Store', 
+                    'README.md', 'lv_examples', 'out_html' ]
+
+# The name of the Pygments (syntax highlighting) style to use.
+pygments_style = 'sphinx'
+
+# If true, `todo` and `todoList` produce output, else they produce nothing.
+todo_include_todos = True
+
+
+# -- Options for HTML output ----------------------------------------------
+
+# The theme to use for HTML and HTML Help pages.  See the documentation for
+# a list of builtin themes.
+#
+html_theme = 'sphinx_rtd_theme'
+
+# Theme options are theme-specific and customize the look and feel of a theme
+# further.  For a list of options available for each theme, see the
+# documentation.
+#
+html_theme_options = {
+    'collapse_navigation' : False,
+    'logo_only': True,
+}
+# For site map generation
+html_baseurl = 'https://docs.lvgl.io/' + version + "/"
+sitemap_url_scheme = "{link}"
+
+# Add any paths that contain custom static files (such as style sheets) here,
+# relative to this directory. They are copied after the builtin static files,
+# so a file named "default.css" will overwrite the builtin "default.css".
+html_static_path = ['_static']
+
+# Custom sidebar templates, must be a dictionary that maps document names
+# to template names.
+#
+# This is required for the alabaster theme
+# refs: http://alabaster.readthedocs.io/en/latest/installation.html#sidebars
+html_sidebars = {
+    '**': [
+        'relations.html',  # needs 'show_related': True theme option to display
+        'searchbox.html',
+    ]
+}
+
+html_favicon = 'favicon.png'
+html_logo = 'logo_lvgl.png'
+
+# -- Options for HTMLHelp output ------------------------------------------
+
+# Output file base name for HTML help builder.
+htmlhelp_basename = 'LVGLdoc'
+
+html_last_updated_fmt = ''
+
+# -- Options for LaTeX output ---------------------------------------------
+
+latex_engine = 'xelatex'
+latex_use_xindy = False
+latex_elements = {
+    # The paper size ('letterpaper' or 'a4paper').
+    #
+    # 'papersize': 'letterpaper',
+
+    # The font size ('10pt', '11pt' or '12pt').
+    #
+    # 'pointsize': '10pt',
+
+    # Additional stuff for the LaTeX preamble.
+    #
+    # 'preamble': '',
+
+    # Latex figure (float) alignment
+    #
+    # 'figure_align': 'htbp',
+    
+    'inputenc': '',
+    'utf8extra': '',
+    'classoptions': ',openany,oneside',
+    'babel': '\\usepackage{babel}',
+    'passoptionstopackages': r'''
+\PassOptionsToPackage{bookmarksdepth=5}{hyperref}% depth of pdf bookmarks
+''',
+    'preamble': r'''
+\usepackage{fontspec}
+\setmonofont{DejaVu Sans Mono}
+\usepackage{silence}
+\WarningsOff*
+''',
+}
+
+# Grouping the document tree into LaTeX files. List of tuples
+# (source start file, target name, title,
+#  author, documentclass [howto, manual, or own class]).
+latex_documents = [
+    (master_doc, 'LVGL.tex', 'LVGL Documentation ' + version,
+     'LVGL community', 'manual'),
+]
+
+
+# -- Options for manual page output ---------------------------------------
+
+# One entry per manual page. List of tuples
+# (source start file, name, description, authors, manual section).
+man_pages = [
+    (master_doc, 'lvgl', 'LVGL Documentation ' + version,
+     [author], 1)
+]
+
+
+# -- Options for Texinfo output -------------------------------------------
+
+# Grouping the document tree into Texinfo files. List of tuples
+# (source start file, target name, title, author,
+#  dir menu entry, description, category)
+texinfo_documents = [
+    (master_doc, 'LVGL', 'LVGL Documentation ' + version,
+     author, 'Contributors of LVGL', 'One line description of project.',
+     'Miscellaneous'),
+]
+
+
+breathe_projects = {
+  "lvgl":"xml/",
+}
+
+StandaloneHTMLBuilder.supported_image_types = [
+    'image/svg+xml',
+    'image/gif',  #prefer gif over png
+    'image/png',
+    'image/jpeg'
+]
+
+smartquotes = False
+
+_, repo_commit_hash = subprocess.getstatusoutput("git rev-parse HEAD")
+
+
+# Example configuration for intersphinx: refer to the Python standard library.
+
+def setup(app):
+    app.add_config_value('recommonmark_config', {
+            'enable_eval_rst': True,
+            'enable_auto_toc_tree': 'True',
+            }, True)
+    app.add_transform(AutoStructify)
+    app.add_css_file('css/custom.css')
+    app.add_css_file('css/fontawesome.min.css')

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

@@ -0,0 +1,70 @@
+```eval_rst
+.. include:: /header.rst 
+:github_url: |github_link_base|/get-started/arduino.md
+```
+
+# Arduino
+
+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 Arduino library
+
+LVGL can be installed via the Arduino IDE Library Manager or as a .ZIP library.
+
+## 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
+- `User_Setup.h` 
+- or by selecting a configuration in the `User_Setup_Select.h`
+
+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, 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 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/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 touchpad for LVGL and call an example.
+
+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
+
+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*/
+#define USE_LV_LOG      1   /*Enable/disable the log module*/
+#if LV_USE_LOG
+/* How important log should be added:
+ * LV_LOG_LEVEL_TRACE       A lot of logs to give detailed information
+ * LV_LOG_LEVEL_INFO        Log important events
+ * LV_LOG_LEVEL_WARN        Log if something unwanted happened but didn't cause a problem
+ * LV_LOG_LEVEL_ERROR       Only critical issue, when the system may fail
+ * LV_LOG_LEVEL_NONE        Do not log anything
+ */
+#  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.
+

docs/get-started/espressif.md

@@ -0,0 +1,47 @@
+```eval_rst
+.. include:: /header.rst 
+:github_url: |github_link_base|/get-started/espressif.md
+```
+
+# Espressif (ESP32)
+Since v7.7.1 LVGL includes a Kconfig file, so LVGL can be used as an ESP-IDF v4 component.
+
+## Get the LVGL demo project for ESP32
+
+We've created [lv_port_esp32](https://github.com/lvgl/lv_port_esp32), a project using ESP-IDF and LVGL to show one of the demos from [lv_examples](https://github.com/lvgl/lv_examples).
+You are able to configure the project to use one of the many supported display controllers, see [lvgl_esp32_drivers](https://github.com/lvgl/lvgl_esp32_drivers) for a complete list
+of supported display and indev (touch) controllers.
+
+## Use LVGL in your ESP32 project
+
+### Prerequisites
+
+ESP-IDF v4 framework is the suggested version to use.
+
+### Get LVGL
+
+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:
+
+```c
+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`.
+
+## Use lvgl_esp32_drivers in your project
+
+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:
+
+```c
+git submodule add https://github.com/lvgl/lvgl_esp32_drivers.git components/lvgl_esp32_drivers
+```
+
+### Support for ESP32-S2
+
+Basic support for ESP32-S2 has been added into the `lvgl_esp32_drivers` repository.

docs/get-started/index.md

@@ -0,0 +1,34 @@
+```eval_rst
+.. include:: /header.rst 
+:github_url: |github_link_base|/get-started/index.md
+```
+# Get started
+
+There are several ways to get your feet wet with LVGL. Here is one recommended order of documents to read and things to play with when you are learning to use LVGL:
+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. Read the [Quick overview](https://docs.lvgl.io/latest/en/html/get-started/quick-overview.html) page of the documentation (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
+9. If you have questions got 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) 
+
+```eval_rst
+
+.. toctree::
+   :maxdepth: 2
+   :hidden:
+
+   quick-overview
+   pc-simulator
+   stm32
+   nxp
+   espressif
+   arduino
+   micropython
+   nuttx
+```
+

docs/get-started/micropython.md

@@ -0,0 +1,96 @@
+```eval_rst
+.. include:: /header.rst 
+:github_url: |github_link_base|/get-started/micropython.md
+```
+# Micropython
+
+## What is Micropython?
+
+[Micropython](http://micropython.org/) is Python for microcontrollers.  
+Using Micropython, you can write Python3 code and run it even on a bare metal architecture with limited resources.
+
+### Highlights of Micropython
+
+- **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.
+- **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.)
+
+---
+
+## Why Micropython + LVGL?
+
+Currently, Micropython [does not have a good high-level GUI library](https://forum.micropython.org/viewtopic.php?f=18&t=5543) by default. LVGL is an [Object Oriented Component Based](https://blog.lvgl.io/2018-12-13/extend-lvgl-objects) high-level GUI library, which seems to be a natural candidate to map into a higher level language, such as Python. LVGL is implemented in C and its APIs are in C.
+
+### 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.
+- 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)
+
+### Micropython + LVGL could be used for:
+
+- 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 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).
+
+---
+
+## So what does it look like?
+
+> TL;DR:
+> It's very much like the C API, but Object-Oriented for LVGL components.
+
+Let's dive right into an example!  
+
+### A simple example
+
+```python
+import lvgl as lv
+lv.init()
+scr = lv.obj()
+btn = lv.btn(scr)
+btn.align(lv.scr_act(), lv.ALIGN.CENTER, 0, 0)
+label = lv.label(btn)
+label.set_text("Button")
+lv.scr_load(scr)
+```
+
+## How can I use it?
+
+### Online Simulator
+
+If you want to experiment with LVGL + Micropython without downloading anything - you can use our online simulator!  
+It's a fully functional LVGL + Micropython that runs entirely in the browser and allows you to edit a python script and run it.
+
+[Click here to experiment on the online simulator](https://sim.lvgl.io/)
+
+[Hello World](https://sim.lvgl.io/v7/micropython/ports/javascript/bundle_out/index.html?script=https://gist.githubusercontent.com/amirgon/51299ce9b6448328a855826149482ae6/raw/0f235c6d40462fd2f0e55364b874f14fe3fd613c/lvgl_hello_world.py&script_startup=https://gist.githubusercontent.com/amirgon/7bf15a66ba6d959bbf90d10f3da571be/raw/8684b5fa55318c184b1310663b187aaab5c65be6/init_lv_mp_js.py)
+
+Note: the online simulator is available for lvgl v6 and v7.
+
+### PC Simulator
+
+Micropython is ported to many platforms. One notable port is "unix", which allows you to build and run Micropython (+LVGL) on a Linux machine. (On a Windows machine you might need Virtual Box or WSL or MinGW or Cygwin etc.)  
+
+[Click here to know more information about building and running the unix port](https://github.com/lvgl/lv_micropython)
+
+### Embedded platform
+
+In the end, the goal is to run it all on an embedded platform.  
+Both Micropython and LVGL can be used on many embedded architectures, such as stm32, ESP32 etc.  
+You would also need display and input drivers. We have some sample drivers (ESP32+ILI9341, as well as some other examples), but chances are you would want to create your own input/display drivers for your specific hardware.
+Drivers can be implemented either in C as a Micropython module, or in pure Micropython!
+
+## Where can I find more information?
+
+- In this [Blog Post](https://blog.lvgl.io/2019-02-20/micropython-bindings)
+- `lv_micropython` [README](https://github.com/lvgl/lv_micropython)
+- `lv_binding_micropython` [README](https://github.com/lvgl/lv_binding_micropython)
+- The [LVGL micropython forum](https://forum.lvgl.io/c/micropython) (Feel free to ask anything!)
+- At Micropython: [docs](http://docs.micropython.org/en/latest/) and [forum](https://forum.micropython.org/)

docs/get-started/nuttx.md

@@ -0,0 +1,101 @@
+```eval_rst
+.. include:: /header.rst 
+:github_url: |github_link_base|/get-started/nuttx.md
+```
+# NuttX RTOS
+
+## What is NuttX?
+
+[NuttX](https://nuttx.apache.org/) is a mature and secure real-time operating system (RTOS) with an emphasis on technical standards compliance and small size. 
+It is scalable from 8-bit to 64-bit microcontrollers and microprocessors and compliant with the Portable Operating System Interface (POSIX) and the American National Standards Institute (ANSI) standards and with many Linux-like subsystems.
+The best way to think about NuttX is to think of it as a small Unix/Linux for microcontrollers.
+
+### Highlights of NuttX
+
+- **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.).
+- **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.
+
+---
+
+## Why NuttX + LVGL?
+
+Although NuttX has its own graphic library called [NX](https://cwiki.apache.org/confluence/pages/viewpage.action?pageId=139629474), LVGL is a good alternative because users could find more eye-candy demos and they can reuse code from previous projects. 
+LVGL is an [Object Oriented Component Based](https://blog.lvgl.io/2018-12-13/extend-lvgl-objects) high-level GUI library, that could fit very well for a RTOS with advanced features like NuttX. 
+LVGL is implemented in C and its APIs are in C.
+
+### Here are some advantages of using LVGL in NuttX
+
+- Develop GUI in Linux first and when it is done just compile it for NuttX. Nothing more, no wasting of time.
+- Usually, GUI development for low level RTOS requires multiple iterations to get things right, where each iteration consists of **`Change code` > `Build` > `Flash` > `Run`**.
+Using LVGL, Linux and NuttX you can reduce this process and just test everything on your computer and when it is done, compile it on NuttX and that is it.
+
+### NuttX + LVGL could be used for
+
+- GUI demos to demonstrate your board graphics capacities.
+- Fast prototyping GUI for MVP (Minimum Viable Product) presentation.
+- visualize sensor data directly and easily on the board without using a computer.
+- Final products with a GUI without a touchscreen (i.e. 3D Printer Interface using Rotary Encoder to Input data).
+- Final products with a touchscreen (and all sorts of bells and whistles).
+
+---
+
+## 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 an example because it is a very popular board.
+
+### 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/)
+
+```shell
+$ 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 create a workspace to save our files
+
+```shell
+$ mkdir ~/nuttxspace
+$ cd ~/nuttxspace
+```
+
+### Clone the NuttX and Apps repositories:
+
+```shell
+$ git clone https://github.com/apache/incubator-nuttx nuttx
+$ git clone https://github.com/apache/incubator-nuttx-apps apps
+```
+
+### Configure NuttX to use the stm32f429i-disco board and the LVGL Demo
+
+```shell
+$ ./tools/configure.sh stm32f429i-disco:lvgl
+$ make
+```
+
+If everything went fine you should have now the file `nuttx.bin` to flash on your board:
+
+```shell
+$ ls -l nuttx.bin 
+-rwxrwxr-x 1 alan alan 287144 Jun 27 09:26 nuttx.bin
+```
+
+### Flashing the firmware in the board using OpenOCD:
+```shell
+$ sudo openocd -f interface/stlink-v2.cfg -f target/stm32f4x.cfg -c init -c "reset halt" -c "flash write_image erase nuttx.bin 0x08000000"
+```
+
+Reset the board and using the 'NSH>' terminal start the LVGL demo:
+```shell
+nsh> lvgldemo
+```
+
+## Where can I find more information?
+
+- This blog post: [LVGL on LPCXpresso54628](https://acassis.wordpress.com/2018/07/19/running-nuttx-on-lpcxpresso54628-om13098/)
+- NuttX mailing list: [Apache NuttX Mailing List](http://nuttx.incubator.apache.org/community/)
+

docs/get-started/nxp.md

@@ -0,0 +1,71 @@
+```eval_rst
+.. include:: /header.rst
+:github_url: |github_link_base|/get-started/nxp.md
+```
+# NXP
+NXP has integrated LVGL into the MCUXpresso SDK packages for several of their general
+purpose and crossover microcontrollers, allowing easy evaluation and migration into your
+product design. [Download an SDK for a supported board](https://www.nxp.com/design/software/embedded-software/littlevgl-open-source-graphics-library:LITTLEVGL-OPEN-SOURCE-GRAPHICS-LIBRARY?&tid=vanLITTLEVGL-OPEN-SOURCE-GRAPHICS-LIBRARY)
+today and get started with your next GUI application.
+
+## Creating new project with LVGL
+Downloading the MCU SDK example project is recommended as a starting point. It comes fully
+configured with LVGL (and with PXP support if module is present), no additional integration
+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 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
+  - Area fill + optional transparency
+  - BLIT (BLock Image Transfer) + optional transparency
+  - Color keying + optional transparency
+  - Recoloring (color tint) + optional transparency
+  - RTOS integration layer
+  - Default FreeRTOS and bare metal code provided
+
+#### Basic configuration:
+  - Select NXP PXP engine in lv_conf.h: Set `LV_USE_GPU_NXP_PXP` to 1
+  - Enable default implementation for interrupt handling, PXP start function and automatic initialization: Set `LV_USE_GPU_NXP_PXP_AUTO_INIT` to 1
+  - If `FSL_RTOS_FREE_RTOS` symbol is defined, FreeRTOS implementation will be used, otherwise bare metal code will be included
+
+#### Basic initialization:
+  - If `LV_USE_GPU_NXP_PXP_AUTO_INIT` is enabled, no user code is required; PXP is initialized automatically in `lv_init()`
+  - For manual PXP initialization, default configuration structure for callbacks can be used. Initialize PXP before calling `lv_init()`
+```c
+      #if LV_USE_GPU_NXP_PXP
+        #include "lv_gpu/lv_gpu_nxp_pxp.h"
+        #include "lv_gpu/lv_gpu_nxp_pxp_osa.h"
+      #endif
+      . . .
+      #if LV_USE_GPU_NXP_PXP
+        if (lv_gpu_nxp_pxp_init(&pxp_default_cfg) != LV_RES_OK) {
+            PRINTF("PXP init error. STOP.\n");
+            for ( ; ; ) ;
+        }
+      #endif
+```
+
+#### Project setup:
+  - Add PXP related files to project:
+    - lv_gpu/lv_gpu_nxp.c, lv_gpu/lv_gpu_nxp.h: low level drawing calls for LVGL
+    - lv_gpu/lv_gpu_nxp_osa.c, lv_gpu/lv_gpu_osa.h: default implementation of OS-specific functions (bare metal and FreeRTOS only)
+        - optional, required only if `LV_USE_GPU_NXP_PXP_AUTO_INIT` is set to 1
+  - PXP related code depends on two drivers provided by MCU SDK. These drivers need to be added to project:
+      - fsl_pxp.c, fsl_pxp.h: PXP driver
+      - fsl_cache.c, fsl_cache.h: CPU cache handling functions
+
+#### Advanced configuration:
+  - 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 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)
+      - `GPU_NXP_PXP_FILL_SIZE_LIMIT`: size threshold for fill operation (OPA > LV_OPA_MAX)
+      - `GPU_NXP_PXP_FILL_OPA_SIZE_LIMIT`: size threshold for fill operation with transparency (OPA < LV_OPA_MAX)

docs/get-started/pc-simulator.md

@@ -0,0 +1,98 @@
+```eval_rst
+.. include:: /header.rst 
+:github_url: |github_link_base|/get-started/pc-simulator.md
+```
+# 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 with real LVGL applications.
+
+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
+
+The simulator is ported to various IDEs (Integrated Development Environments). Choose your favorite IDE, read its README on GitHub, download the project, and load it to the IDE.
+
+- [Eclipse with SDL driver](https://github.com/lvgl/lv_sim_eclipse_sdl): Recommended on Linux and Mac
+- [CodeBlocks](https://github.com/lvgl/lv_sim_codeblocks_win): Recommended on Windows
+- [VisualStudio with SDL driver](https://github.com/lvgl/lv_sim_visual_studio_sdl): For Windows
+- [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 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.**
+
+## Set-up Eclipse CDT
+
+### Install Eclipse CDT
+
+[Eclipse CDT](https://eclipse.org/cdt/) is a C/C++ IDE.
+
+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 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 touchpad. 
+
+#### Linux
+On **Linux** you can easily install SDL2 using a terminal:
+
+1. Find the current version of SDL2: `apt-cache search libsdl2 (e.g. libsdl2-2.0-0)`
+2. Install SDL2: `sudo apt-get install libsdl2-2.0-0` (replace with the found version)
+3. Install SDL2 development package: `sudo apt-get install libsdl2-dev`
+4. If build essentials are not installed yet: `sudo apt-get install build-essential`
+
+#### Windows
+If you are using **Windows** firstly you need to install MinGW ([64 bit version](http://mingw-w64.org/doku.php/download)). After installing MinGW, do the following steps to add SDL2:
+
+1. Download the development libraries of SDL.   
+Go to [https://www.libsdl.org/download-2.0.php](https://www.libsdl.org/download-2.0.php) and download _Development Libraries: SDL2-devel-2.0.5-mingw.tar.gz_
+2. Decompress the file and go to _x86_64-w64-mingw32_ directory (for 64 bit MinGW) or to _i686-w64-mingw32_ (for 32 bit MinGW)
+3. Copy _..._mingw32/include/SDL2_ folder to _C:/MinGW/.../x86_64-w64-mingw32/include_
+4. Copy _..._mingw32/lib/_ content to _C:/MinGW/.../x86_64-w64-mingw32/lib_
+5. Copy _..._mingw32/bin/SDL2.dll_ to _{eclipse_worksapce}/pc_simulator/Debug/_.  Do it later when Eclipse is installed. 
+
+Note: If you are using **Microsoft Visual Studio** instead of Eclipse then you don't have to install MinGW. 
+
+#### OSX
+On **OSX** you can easily install SDL2 with brew: `brew install sdl2`
+
+If something is not working, then please refer [this tutorial](http://lazyfoo.net/tutorials/SDL/01_hello_SDL/index.php) to get started with SDL.
+
+### Pre-configured project
+
+A pre-configured graphics library project (based on the latest release) is always available to get started easily. 
+You can find the latest one on [GitHub](https://github.com/lvgl/lv_sim_eclipse_sdl).
+(Please note that, the project is configured for Eclipse CDT). 
+
+### 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.
+
+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)
+
+### 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 cases the configuration in the downloaded project is enough.
+
+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

@@ -0,0 +1,270 @@
+```eval_rst
+.. include:: /header.rst 
+:github_url: |github_link_base|/get-started/quick-overview.md
+```
+
+# Quick overview
+
+Here you can learn the most important things about LVGL.
+You should read this first to get a general impression and read the detailed [Porting](/porting/index) and [Overview](/overview/index) sections after that.
+
+## Get started in a simulator
+
+Instead of porting LVGL to embedded hardware straight away, it's highly recommended to get started in a simulator first. 
+
+LVGL is ported to many IDEs to be sure you will find your favorite one. 
+Go to the [Simulators](/get-started/pc-simulator) section to get ready-to-use projects that can be run on your PC. 
+This way you can save the time of porting for now and get some experience with LVGL immediately. 
+
+## Add LVGL into your project
+If you would rather try LVGL on your own project follow these steps:
+
+- [Download](https://github.com/lvgl/lvgl/archive/master.zip) or clone the library from GitHub with `git clone https://github.com/lvgl/lvgl.git`.
+- Copy the `lvgl` folder into your project.
+- Copy `lvgl/lv_conf_template.h` as `lv_conf.h` next to the `lvgl` folder, change the first `#if 0` to `1` to enable the file's content and set the `LV_COLOR_DEPTH` defines.
+- Include `lvgl/lvgl.h` in files where you need to use LVGL related functions.
+- Call `lv_tick_inc(x)` every `x` milliseconds in a Timer or Task (`x` should be between 1 and 10). It is required for the internal timing of LVGL. 
+Alternatively, configure `LV_TICK_CUSTOM` (see `lv_conf.h`) so that LVGL can retrieve the current time directly.
+- Call `lv_init()`
+- Create a draw buffer: LVGL will render the graphics here first, and send the rendered image to the display. 
+The buffer size can be set freely but 1/10 screen size is a good starting point. 
+```c
+static lv_disp_draw_buf_t draw_buf;
+static lv_color_t buf1[DISP_HOR_RES * DISP_VER_RES / 10];                        /*Declare a buffer for 1/10 screen size*/
+lv_disp_draw_buf_init(&draw_buf, buf1, NULL, MY_DISP_HOR_RES * MY_DISP_VER_SER / 10);  /*Initialize the display buffer.*/
+```
+- Implement and register a function which can copy the rendered image to an area of your display:
+```c
+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.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*/
+
+void my_disp_flush(lv_disp_drv_t * disp, const lv_area_t * area, lv_color_t * color_p)
+{
+    int32_t x, y;
+    /*It's a very slow but simple implementation.
+     *`set_pixel` needs to be written by you to a set pixel on the screen*/
+    for(y = area->y1; y <= area->y2; y++) {
+        for(x = area->x1; x <= area->x2; x++) {
+            set_pixel(x, y, *color_p);
+            color_p++;
+        }
+    }
+
+    lv_disp_flush_ready(disp);         /* Indicate you are ready with the flushing*/
+}
+
+```
+- 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*/
+indev_drv.type = LV_INDEV_TYPE_POINTER;    /*Touch pad is a pointer-like device*/
+indev_drv.read_cb = my_touchpad_read;      /*Set your driver function*/
+lv_indev_drv_register(&indev_drv);         /*Finally register the driver*/
+
+void my_touchpad_read(lv_indev_t * indev, lv_indev_data_t * data)
+{
+    /*`touchpad_is_pressed` and `touchpad_get_xy` needs to be implemented by you*/
+    if(touchpad_is_pressed()) {
+      data->state = LV_INDEV_STATE_PRESSED;
+      touchpad_get_xy(&data->point.x, &data->point.y);
+    } else {
+      data->state = LV_INDEV_STATE_RELEASED;
+    }
+ 
+}
+```
+- Call `lv_timer_handler()` periodically every few milliseconds in the main `while(1)` loop or in an operating system task.
+It will redraw the screen if required, handle input devices, animation etc.
+
+For a more detailed guide go to the [Porting](/porting/index) section.
+
+## Learn the basics
+
+### Widgets
+
+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. 
+
+The child object moves with the parent and if the parent is deleted the children will be deleted too. 
+
+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. 
+
+To get the current screen call `lv_scr_act()`, and to load a screen use `lv_scr_load(scr1)`.
+
+You can create a new object with `lv_<type>_create(parent)`. It will return an `lv_obj_t *` variable that can be used as a reference to the object to set its parameters.
+
+For example:
+```c
+lv_obj_t * slider1 = lv_slider_create(lv_scr_act());
+```
+
+To set some basic attributes `lv_obj_set_<parameter_name>(obj, <value>)` functions can be used. For example:
+```c
+lv_obj_set_x(btn1, 30);
+lv_obj_set_y(btn1, 10);
+lv_obj_set_size(btn1, 200, 50);
+```
+
+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);
+```
+
+To see the full API visit the documentation of the widgets or the related header file (e.g. [lvgl/src/widgets/lv_slider.h](https://github.com/lvgl/lvgl/blob/master/src/widgets/lv_slider.h)).
+
+
+
+### 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. 
+
+A callback is assigned like this:
+
+```c
+lv_obj_add_event_cb(btn, btn_event_cb, LV_EVENT_CLICKED, NULL); /*Assign a callback to the button*/
+
+...
+
+void btn_event_cb(lv_event_t * e)
+{
+    printf("Clicked\n");
+}
+```
+
+`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 retrieved with:
+```c
+lv_event_code_t code = lv_event_get_code(e);
+```
+
+The object that triggered the event can be retrieved with:
+```c
+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`.
+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 sub-elements of a widget. (See below)
+
+Read the widgets' documentation to learn which parts each uses.
+
+### 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 
+- `LV_STATE_FOCUS_KEY`  Focused via keypad or encoder but not via touchpad/mouse 
+- `LV_STATE_EDITED` Edit by an encoder
+- `LV_STATE_HOVERED` Hovered by mouse (not supported now)
+- `LV_STATE_PRESSED` Being pressed
+- `LV_STATE_SCROLLED` Being scrolled
+- `LV_STATE_DISABLED` Disabled 
+
+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 currently in that state.
+
+To manually add or remove states use:
+```c
+lv_obj_add_state(obj, LV_STATE_...);
+lv_obj_clear_state(obj, LV_STATE_...);
+```
+
+### Styles
+A style instance contains properties such as background color, border width, font, etc. that describe the appearance of objects.
+
+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);
+lv_style_set_bg_color(&style1, lv_color_hex(0xa03080))
+lv_style_set_border_width(&style1, 2))
+```
+See the full list of properties [here](/overview/style.html#properties).
+
+
+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);
+```
+
+If the *part* is `LV_PART_MAIN` it can be omitted:
+```c
+lv_obj_add_style(btn1, &style1, LV_STATE_PRESSED); /*Equal to LV_PART_MAIN | LV_STATE_PRESSED*/
+```
+
+Similarly, `LV_STATE_DEFAULT` can be omitted too:
+```c
+lv_obj_add_style(slider1, &style1, LV_PART_INDICATOR); /*Equal to LV_PART_INDICATOR | LV_STATE_DEFAULT*/
+```
+
+For `LV_STATE_DEFAULT` and `LV_PART_MAIN` simply write `0`:
+```c
+lv_obj_add_style(btn1, &style1, 0); /*Equal to LV_PART_MAIN | LV_STATE_DEFAULT*/
+```
+
+
+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);
+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. 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. 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 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);
+``` 
+
+To learn all the features of styles see the [Style overview](/overview/style) section.
+
+
+### Themes
+
+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
+
+```eval_rst
+
+.. include:: ../../examples/get_started/index.rst
+```
+
+## Micropython
+Learn more about [Micropython](/get-started/micropython).
+```python
+# Create a Button and a Label
+scr = lv.obj()
+btn = lv.btn(scr)
+btn.align(lv.scr_act(), lv.ALIGN.CENTER, 0, 0)
+label = lv.label(btn)
+label.set_text("Button")
+
+# Load the screen
+lv.scr_load(scr)
+```
+

docs/get-started/stm32.md

@@ -0,0 +1,8 @@
+```eval_rst
+.. include:: /header.rst 
+:github_url: |github_link_base|/get-started/stm32.md
+```
+
+# STM32
+
+TODO

docs/header.rst

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

docs/index.md

@@ -0,0 +1,42 @@
+```eval_rst
+.. include:: /header.rst 
+:github_url: |github_link_base|/index.md
+```
+
+```eval_rst
+
+PDF version: :download:`LVGL.pdf <LVGL.pdf>`
+```
+
+# Welcome to the documentation of LVGL!
+
+<img src="_static/img/home_banner.jpg" style="width:100%">
+
+
+<div style="margin-bottom:48px"> 
+    <a href="intro/index.html"><img class="home-img" src="_static/img/home_1.png" alt="Get familiar with the LVGL project"></a>
+    <a href="get-started/index.html"><img class="home-img" src="_static/img/home_2.png" alt="Learn the basic of LVGL and its usage on various platforms"></a>
+    <a href="porting/index.html"><img class="home-img" src="_static/img/home_3.png" alt="See how to port LVGL to any platform"></a>
+    <a href="overview/index.html"><img class="home-img" src="_static/img/home_4.png" alt="Learn the how LVGL works in more detail"></a>
+    <a href="widgets/index.html"><img class="home-img" src="_static/img/home_5.png" alt="Take a look at the description of the available widgets"></a>
+    <a href="CONTRIBUTING.html"><img class="home-img" src="_static/img/home_6.png" alt="Be part of the development of LVGL"></a>
+</div> 
+ 
+
+```eval_rst
+.. toctree::
+   :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

@@ -0,0 +1,209 @@
+```eval_rst
+.. include:: /header.rst 
+:github_url: |github_link_base|/intro/index.md
+```
+
+# Introduction
+
+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
+- Powerful building blocks such as buttons, charts, lists, sliders, images, etc.
+- Advanced graphics with animations, anti-aliasing, opacity, smooth scrolling
+- Various input devices such as touchpad, mouse, keyboard, encoder, etc.
+- Multi-language support with UTF-8 encoding
+- Multi-display support, i.e. use multiple TFT, monochrome displays simultaneously
+- 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 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 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:
+<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 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 an external display controller</li>
+	</ul>
+</li>
+<li> C99 or newer compiler</li>
+<li> Basic C (or C++) knowledge: 
+          <a href="https://www.tutorialspoint.com/cprogramming/c_pointers.htm">pointers</a>, 
+          <a href="https://www.tutorialspoint.com/cprogramming/c_structures.htm">structs</a>, 
+          <a href="https://www.geeksforgeeks.org/callbacks-in-c/">callbacks</a>.</li>
+</ul>
+<em>Note that memory usage may vary depending on architecture, compiler and build options.</em>
+
+## License
+The LVGL project (including all repositories) is licensed under [MIT license](https://github.com/lvgl/lvgl/blob/master/LICENCE.txt). 
+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).
+
+Although you can get LVGL for free there is a massive amount of work behind it. It's created by a group of volunteers who made it available for you in their free time.
+
+To make the LVGL project sustainable, please consider [contributing](/CONTRIBUTING) to the project. 
+You can choose from [many different ways of contributing](/CONTRIBUTING) such as simply writing a tweet about you are using LVGL, fixing bugs, translating the documentation, or even becoming a maintainer.
+
+## Repository layout
+All repositories of the LVGL project are hosted on GitHub: https://github.com/lvgl
+
+You will find these repositories there:
+- [lvgl](https://github.com/lvgl/lvgl) The library itself with many [examples](https://github.com/lvgl/lvgl/blob/master/examples/).
+- [lv_demos](https://github.com/lvgl/lv_demos) Demos created with LVGL.
+- [lv_drivers](https://github.com/lvgl/lv_drivers) Display and input device drivers
+- [blog](https://github.com/lvgl/blog) Source of the blog's site (https://blog.lvgl.io)
+- [sim](https://github.com/lvgl/sim) Source of the online simulator's site (https://sim.lvgl.io)
+- [lv_sim_...](https://github.com/lvgl?q=lv_sim&type=&language=) Simulator projects for various IDEs and platforms
+- [lv_port_...](https://github.com/lvgl?q=lv_port&type=&language=) LVGL ports to development boards
+- [lv_binding_..](https://github.com/lvgl?q=lv_binding&type=&language=l) Bindings to other languages
+- [lv_...](https://github.com/lvgl?q=lv_&type=&language=) Ports to other platforms
+
+## Release policy
+
+The core repositories follow the rules of [Semantic versioning](https://semver.org/):
+- Major versions for incompatible API changes. E.g. v5.0.0, v6.0.0
+- Minor version for new but backward-compatible functionalities. E.g. v6.1.0, v6.2.0
+- Patch version for backward-compatible bug fixes. E.g. v6.1.1, v6.1.2
+
+Tags like `vX.Y.Z` are created for every release.
+
+### Release cycle
+- Bug fixes: Released on demand even weekly
+- Minor releases: Every 3-4 months
+- 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` temporary branches for bug fixes
+- `feat/some-description` temporary branches for features
+
+
+### Changelog
+
+The changes are recorded in [CHANGELOG.md](/CHANGELOG).
+
+### Version support
+Before v8 every minor release of major releases 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    | 1 Jun, 2021  |1 Jun, 2022  | Yes    |
+| v8.1    | In progress  |   |     |
+
+
+## FAQ
+
+### Where can I ask questions?
+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. 
+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 LVGL.
+
+This includes:
+- "Common" MCUs like STM32F, STM32H, NXP Kinetis, LPC, iMX, dsPIC33, PIC32 etc. 
+- 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
+- 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 it with LVGL.
+
+Some examples of the supported display types:
+- TFTs with 16 or 24 bit color depth 
+- Monitors with an HDMI port
+- Small monochrome displays
+- Gray-scale displays
+- even LED matrices
+- or any other display where you can control the color/state of the pixels
+
+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) 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*". 
+
+### Why do I see only garbage on the screen?
+Probably there a bug in your display driver. Try the following code without using LVGL. You should see a square with red-blue gradient.
+
+```c
+#define BUF_W 20
+#define BUF_H 10
+
+lv_color_t buf[BUF_W * BUF_H];
+lv_color_t * buf_p = buf;
+uint16_t x, y;
+for(y = 0; y &lt; BUF_H; y++) {
+    lv_color_t c = lv_color_mix(LV_COLOR_BLUE, LV_COLOR_RED, (y * 255) / BUF_H);
+    for(x = 0; x &lt; BUF_W; x++){
+        (*buf_p) =  c;
+        buf_p++;
+    }
+}
+
+lv_area_t a;
+a.x1 = 10;
+a.y1 = 40;
+a.x2 = a.x1 + BUF_W - 1;
+a.y2 = a.y1 + BUF_H - 1;
+my_flush_cb(NULL, &a, buf);
+```
+
+### 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 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 it
+- Increase the size of the display buffer
+- 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 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 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 (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

@@ -0,0 +1,123 @@
+```eval_rst
+.. include:: /header.rst 
+:github_url: |github_link_base|/layouts/flex.md
+```
+
+# Flex
+
+## Overview
+
+The Flexbox (or Flex for short) is a subset of [CSS Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
+
+It can arrange items into rows or columns (tracks), handle wrapping, adjust the spacing between the items and tracks, handle *grow* to make the item(s) fill the remaining space with respect to min/max width and height.
+
+To make an object flex container call `lv_obj_set_layout(obj, LV_LAYOUT_FLEX)`.
+
+Note that the flex layout feature of LVGL needs to be globally enabled with `LV_USE_FLEX` in `lv_conf.h`. 
+
+## Terms
+- 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 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 their grow value (larger value means more space)
+- gap: the space between the rows and columns or the items on a track
+
+## Simple interface
+
+With the following functions you can set a Flex layout on any parent.
+
+### Flex flow
+
+`lv_obj_set_flex_flow(obj, flex_flow)`
+
+The possible values for `flex_flow` are:
+- `LV_FLEX_FLOW_ROW` Place the children in a row without wrapping
+- `LV_FLEX_FLOW_COLUMN` Place the children in a column without wrapping
+- `LV_FLEX_FLOW_ROW_WRAP` Place the children in a row with wrapping
+- `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 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)`
+
+- `main_place` determines how to distribute the items in their track on the main axis. E.g. flush the items to the right on `LV_FLEX_FLOW_ROW_WRAP`.  (It's called `justify-content` in CSS)
+- `cross_place` determines how to distribute the items in their track on the cross axis. E.g. if the items have different height place them to the bottom of the track.  (It's called `align-items` in CSS)
+- `track_cross_place` determines how to distribute the tracks (It's called `align-content` in CSS)
+
+The possible values are:
+- `LV_FLEX_ALIGN_START` means left on a horizontally and top vertically. (default)
+- `LV_FLEX_ALIGN_END` means right on a horizontally and bottom vertically
+- `LV_FLEX_ALIGN_CENTER` simply center
+- `LV_FLEX_ALIGN_SPACE_EVENLY` items are distributed so that the spacing between any two items (and the space to the edges) is equal. Does not apply to `track_cross_place`.
+- `LV_FLEX_ALIGN_SPACE_AROUND` items are evenly distributed in the track with equal space around them. 
+Note that visually the spaces aren’t equal, since all the items have equal space on both sides. 
+The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies. Not applies to `track_cross_place`.
+- `LV_FLEX_ALIGN_SPACE_BETWEEN` items are evenly distributed in the track: first item is on the start line, last item on the end line. Not applies to `track_cross_place`.
+
+
+### Flex 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_grow(child, value)`. `value` needs to be > 1 or 0 to disable grow on the child.
+
+
+## Style interface
+
+All the Flex-related values are style properties under the hood and you can use them similarly to any other style property. The following flex related style properties exist:
+
+- `FLEX_FLOW`
+- `FLEX_MAIN_PLACE`
+- `FLEX_CROSS_PLACE`
+- `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
+If the base direction of the container is set the `LV_BASE_DIR_RTL` the meaning of `LV_FLEX_ALIGN_START` and `LV_FLEX_ALIGN_END` is swapped on `ROW` layouts. I.e. `START` will mean right.
+
+The items on `ROW` layouts, and tracks of `COLUMN` layouts will be placed from right to left.
+
+### New track
+
+You can force Flex to put an item into a new line with `lv_obj_add_flag(child, LV_OBJ_FLAG_FLEX_IN_NEW_TRACK)`.
+
+
+## Example
+
+```eval_rst
+
+.. include:: ../../examples/layouts/flex/index.rst
+
+```
+
+## API
+
+```eval_rst
+
+.. doxygenfile:: lv_flex.h
+  :project: lvgl
+
+```

docs/layouts/grid.md

@@ -0,0 +1,117 @@
+```eval_rst
+.. include:: /header.rst 
+:github_url: |github_link_base|/layouts/grid.md
+```
+
+# Grid
+
+## Overview
+
+The Grid layout is a subset of [CSS Flexbox](https://css-tricks.com/snippets/css/complete-guide-grid/).
+
+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)`.
+
+Note that the grid layout feature of LVGL needs to be globally enabled with `LV_USE_GRID` in `lv_conf.h`. 
+
+## Terms
+- tracks: the rows or columns
+- free unit (FR): if set on track's size is set in `FR` it will grow to fill the remaining space on the parent. 
+- gap: the space between the rows and columns or the items on a track
+
+## Simple interface
+
+With the following functions you can easily set a Grid layout on any parent.
+
+### Grid descriptors
+
+First you need to describe the size of rows and columns. It can be done by declaring 2 arrays and the track sizes in them. The last element must be `LV_GRID_TEMPLATE_LAST`.
+
+For example:
+```
+static lv_coord_t column_dsc[] = {100, 400, LV_GRID_TEMPLATE_LAST};   /*2 columns with 100 and 400 ps width*/
+static lv_coord_t row_dsc[] = {100, 100, 100, LV_GRID_TEMPLATE_LAST}; /*3 100 px tall rows*/
+```
+
+To set the descriptors on a parent use `lv_obj_set_grid_dsc_array(obj, col_dsc, row_dsc)`.
+
+Besides simple settings the size in pixel you can use two special values:
+- `LV_GRID_CONTENT` set the width to the largest children on this track
+- `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. 
+
+To do this call `lv_obj_set_grid_cell(child, column_align, column_pos, column_span, row_align, row_pos, row_span)`.
+
+`column_align` and `row_align` determine how to align the children in its cell. The possible values are:
+- `LV_GRID_ALIGN_START` means left on a horizontally and top vertically. (default)
+- `LV_GRID_ALIGN_END` means right on a horizontally and bottom vertically
+- `LV_GRID_ALIGN_CENTER` simply center
+
+`colum_pos` and `row_pos` means the zero based index of the cell into the item should be placed. 
+
+`colum_span` and `row_span` means how many tracks should the item involve from the start cell. Must be > 1. 
+
+### Grid align
+
+If there are some empty space the track can be aligned several ways:
+- `LV_GRID_ALIGN_START` means left on a horizontally and top vertically. (default)
+- `LV_GRID_ALIGN_END` means right on a horizontally and bottom vertically
+- `LV_GRID_ALIGN_CENTER` simply center
+- `LV_GRID_ALIGN_SPACE_EVENLY` items are distributed so that the spacing between any two items (and the space to the edges) is equal. Not applies to `track_cross_place`.
+- `LV_GRID_ALIGN_SPACE_AROUND` items are evenly distributed in the track with equal space around them. 
+Note that visually the spaces aren’t equal, since all the items have equal space on both sides. 
+The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies. Not applies to `track_cross_place`.
+- `LV_GRID_ALIGN_SPACE_BETWEEN` items are evenly distributed in the track: first item is on the start line, last item on the end line. Not applies to `track_cross_place`.
+
+To set the track's alignment use `lv_obj_set_grid_align(obj, column_align, row_align)`.
+
+## Style interface
+
+All the Grid related values are style properties under the hood and you can use them similarly to any other style properties. The following Grid related style properties exist:
+
+- `GRID_COLUMN_DSC_ARRAY`
+- `GRID_ROW_DSC_ARRAY`
+- `GRID_COLUMN_ALIGN`
+- `GRID_ROW_ALIGN`
+- `GRID_CELL_X_ALIGN`
+- `GRID_CELL_COLUMN_POS`
+- `GRID_CELL_COLUMN_SPAN`
+- `GRID_CELL_Y_ALIGN`
+- `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
+If the base direction of the container is set to `LV_BASE_DIR_RTL`, the meaning of `LV_GRID_ALIGN_START` and `LV_GRID_ALIGN_END` is swapped. I.e. `START` will mean right-most.
+
+The columns will be placed from right to left.
+
+
+## Example
+
+```eval_rst
+
+.. include:: ../../examples/layouts/grid/index.rst
+
+```
+
+## API
+
+```eval_rst
+
+.. doxygenfile:: lv_grid.h
+  :project: lvgl
+
+```

docs/layouts/index.md

@@ -0,0 +1,15 @@
+```eval_rst
+.. include:: /header.rst 
+:github_url: |github_link_base|/layouts/index.md
+```
+
+# Layouts
+
+
+```eval_rst
+.. toctree::
+   :maxdepth: 2
+   
+   flex
+   grid
+```

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

@@ -0,0 +1,145 @@
+```eval_rst
+.. include:: /header.rst 
+:github_url: |github_link_base|/overview/animation.md
+```
+# Animations
+
+You can automatically change the value of a variable between a start and an end value using animations.
+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 property *set* functions in LVGL. For example `lv_obj_set_x(obj, value)` or `lv_obj_set_width(obj, value)`
+
+
+## Create an animation
+To create an animation an `lv_anim_t` variable has to be initialized and configured with `lv_anim_set_...()` functions.
+
+```c
+
+/* INITIALIZE AN ANIMATION
+ *-----------------------*/
+
+lv_anim_t a;
+lv_anim_init(&a);
+
+/* MANDATORY SETTINGS
+ *------------------*/
+
+/*Set the "animator" function*/
+lv_anim_set_exec_cb(&a, (lv_anim_exec_xcb_t) lv_obj_set_x); 
+
+/*Set target of the animation*/
+lv_anim_set_var(&a, obj); 
+
+/*Length of the animation [ms]*/
+lv_anim_set_time(&a, duration);
+
+/*Set start and end values. E.g. 0, 150*/
+lv_anim_set_values(&a, start, end);
+
+/* OPTIONAL SETTINGS
+ *------------------*/
+
+/*Time to wait before starting the animation [ms]*/
+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 indicate when the animation is ready (idle).*/
+lv_anim_set_ready_cb(&a, ready_cb);
+
+/*Set a callback to indicate when the animation is started (after delay).*/
+lv_anim_set_start_cb(&a, start_cb);
+
+/*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, delay);
+
+/*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, delay);
+
+/*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
+ *------------------*/
+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 and `lv_anim_start()` will remove any existing animations for such a pair.
+
+## Animation path
+
+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 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 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 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
+
+```eval_rst
+
+.. include:: ../../examples/anim/index.rst
+
+```
+## API
+
+```eval_rst
+
+.. doxygenfile:: lv_anim.h
+  :project: lvgl
+
+```

docs/overview/color.md

@@ -0,0 +1,157 @@
+```eval_rst
+.. include:: /header.rst 
+:github_url: |github_link_base|/overview/color.md
+```
+# Colors
+
+The color module handles all color-related functions like changing color depth, creating colors from hex code, converting between color depths, mixing colors, etc.
+
+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 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:
+```c
+//All channels are 0-255
+lv_color_t c = lv_color_make(red, green, blue);
+
+//From hex code 0x000000..0xFFFFFF interpreted as RED + GREEN + BLUE
+lv_color_t c = lv_color_hex(0x123456); 
+
+//From 3 digits. Same as lv_color_hex(0x112233)
+lv_color_t c = lv_color_hex3(0x123); 
+```
+
+### HSV
+Create colors from Hue, Saturation and Value values:
+
+```c
+//h = 0..359, s = 0..100, v = 0..100
+lv_color_t c = lv_color_hsv_to_rgb(h, s, v);
+
+//All channels are 0-255
+lv_color_hsv_t c_hsv = lv_color_rgb_to_hsv(r, g, b);
+
+
+//From lv_color_t variable
+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) 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`
+- `LV_PALETTE_PINK`
+- `LV_PALETTE_PURPLE`
+- `LV_PALETTE_DEEP_PURPLE`
+- `LV_PALETTE_INDIGO`
+- `LV_PALETTE_BLUE`
+- `LV_PALETTE_LIGHT_BLUE`
+- `LV_PALETTE_CYAN`
+- `LV_PALETTE_TEAL`
+- `LV_PALETTE_GREEN`
+- `LV_PALETTE_LIGHT_GREEN`
+- `LV_PALETTE_LIME`
+- `LV_PALETTE_YELLOW`
+- `LV_PALETTE_AMBER`
+- `LV_PALETTE_ORANGE`
+- `LV_PALETTE_DEEP_ORANGE`
+- `LV_PALETTE_BROWN`
+- `LV_PALETTE_BLUE_GREY`
+- `LV_PALETTE_GREY`
+
+
+To get the main color use `lv_color_t c = lv_palette_main(LV_PALETTE_...)`.
+
+For the lighter variants of a palette color use `lv_color_t c = lv_palette_lighten(LV_PALETTE_..., v)`. `v` can be 1..5.
+For the darker variants of a palette color use `lv_color_t c = lv_palette_darken(LV_PALETTE_..., v)`. `v` can be 1..4.
+
+### Modify and mix colors
+The following functions can modify a color:
+```c
+// Lighten a color. 0: no change, 255: white
+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: white
+lv_color_t c = lv_color_change_lightness(lv_color_t c, lv_opa_t lvl);
+
+
+// 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);
+```
+
+### Built-in colors
+`lv_color_white()` and `lv_color_black()` return `0xFFFFFF` and `0x000000` respectively.
+
+## Opacity
+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 no opacity making the color completely transparent
+- `LV_OPA_10` Value: 25, means the color covers only a little
+- `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 (full opacity)
+
+You can also use the `LV_OPA_*` defines in `lv_color_mix()` as a mixing *ratio*.
+
+
+## Color types
+The following variable types are defined by the color module:
+
+- `lv_color1_t` Monochrome color. Also has R, G, B fields for compatibility but they are always the same value (1 byte)
+- `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 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:
+
+- `ch.red` red channel
+- `ch.green` green channel
+- `ch.blue` blue channel
+- `full*` red + green + blue as one number
+
+You can set the current color depth in *lv_conf.h*, by setting the `LV_COLOR_DEPTH` define to 1 (monochrome), 8, 16 or 32.
+
+
+### 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 to map a converted color back into a structure:
+
+```c
+lv_color_t c;
+c.red   = 0x38;
+c.green = 0x70;
+c.blue  = 0xCC;
+
+lv_color1_t c1;
+c1.full = lv_color_to1(c);	/*Return 1 for light colors, 0 for dark colors*/
+
+lv_color8_t c8;
+c8.full = lv_color_to8(c);	/*Give a 8 bit number with the converted color*/
+
+lv_color16_t c16;
+c16.full = lv_color_to16(c); /*Give a 16 bit number with the converted color*/
+
+lv_color32_t c24;
+c32.full = lv_color_to32(c);	/*Give a 32 bit number with the converted color*/
+```
+
+
+## API
+
+
+```eval_rst
+
+.. doxygenfile:: lv_color.h
+  :project: lvgl
+
+```

docs/overview/coords.md

@@ -0,0 +1,367 @@
+```eval_rst
+.. include:: /header.rst 
+:github_url: |github_link_base|/overview/coords.md
+```
+# Positions, sizes, and layouts
+
+## Overview
+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 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. 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.
+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 is the size of the bounding box reduced by the border width and padding.
+
+![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 a "padding margin" when placing an object's children. 
+
+The outline is drawn outside the bounding box.
+
+### Important notes
+This section describes special cases in which LVGL's behavior might be unexpected.
+
+#### Postponed coordinate calculation
+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 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, 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.
+
+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)
+```
+
+or
+```c
+lv_obj_remove_style(obj, NULL, LV_PART_MAIN);
+```
+the earlier set coordinates will be removed as well.
+
+For example:
+```c
+/*The size of obj1 will be set back to the default in the end*/
+lv_obj_set_size(obj1, 200, 100);  /*Now obj1 has 200;100 size*/
+lv_obj_remove_style_all(obj1);    /*It removes the set sizes*/
+
+
+/*obj2 will have 200;100 size in the end */
+lv_obj_remove_style_all(obj2);
+lv_obj_set_size(obj2, 200, 100);
+```
+
+## Position
+
+### Simple way
+To simply set the x and y coordinates of an object use:
+```c
+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 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.
+
+Percentage values are calculated from the parent's content area size. 
+```c
+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 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);
+``` 
+
+To change the alignment and set new coordinates:
+```c
+lv_obj_align(obj, align, x, y);
+```
+
+The following alignment options can be used:
+- `LV_ALIGN_TOP_LEFT`
+- `LV_ALIGN_TOP_MID`
+- `LV_ALIGN_TOP_RIGHT`
+- `LV_ALIGN_BOTTOM_LEFT`
+- `LV_ALIGN_BOTTOM_MID`
+- `LV_ALIGN_BOTTOM_RIGHT`
+- `LV_ALIGN_LEFT_MID`
+- `LV_ALIGN_RIGHT_MID`
+- `LV_ALIGN_CENTER`
+
+It's quite common to align a child to the center of its parent, therefore a dedicated function exists:
+```c
+lv_obj_center(obj);
+
+//Has the same effect
+lv_obj_align(obj, LV_ALIGN_CENTER, 0, 0);
+```
+
+If the parent's size changes, the set alignment and position of the children is updated automatically.
+
+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 an object outside the reference object:
+
+- `LV_ALIGN_OUT_TOP_LEFT`
+- `LV_ALIGN_OUT_TOP_MID`
+- `LV_ALIGN_OUT_TOP_RIGHT`
+- `LV_ALIGN_OUT_BOTTOM_LEFT`
+- `LV_ALIGN_OUT_BOTTOM_MID`
+- `LV_ALIGN_OUT_BOTTOM_RIGHT`
+- `LV_ALIGN_OUT_LEFT_TOP`
+- `LV_ALIGN_OUT_LEFT_MID`
+- `LV_ALIGN_OUT_LEFT_BOTTOM`
+- `LV_ALIGN_OUT_RIGHT_TOP`
+- `LV_ALIGN_OUT_RIGHT_MID`
+- `LV_ALIGN_OUT_RIGHT_BOTTOM`
+
+For example to align a label above a button and center the label horizontally:
+```c
+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 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);       //Separate...
+lv_obj_set_height(obj, 100);
+lv_obj_set_size(obj, 200, 100); 	//Or in one function
+```
+
+Percentage values are calculated based on the parent's content area size. For example to set the object's height to the screen height:
+```c
+lv_obj_set_height(obj, lv_pct(100));
+```
+
+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 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 retrieved with the following functions:
+```c
+lv_coord_t w = lv_obj_get_width(obj);
+lv_coord_t h = lv_obj_get_height(obj);
+lv_coord_t content_w = lv_obj_get_content_width(obj);
+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 object.
+
+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 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. 
+
+
+Here are some examples to set an object's size using a style:
+```c
+static lv_style_t style;
+lv_style_init(&style);
+lv_style_set_width(&style, 100);
+
+lv_obj_t * btn = lv_btn_create(lv_scr_act());
+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 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 button up a little when it's pressed. 
+
+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);
+lv_style_set_y(&style_normal, 100);
+
+static lv_style_t style_pressed;
+lv_style_init(&style_pressed);
+lv_style_set_y(&style_pressed, 80);
+
+lv_obj_add_style(btn1, &style_normal, LV_STATE_DEFAULT);
+lv_obj_add_style(btn1, &style_pressed, LV_STATE_PRESSED);
+
+lv_obj_add_style(btn2, &style_normal, LV_STATE_DEFAULT);
+lv_obj_add_style(btn2, &style_pressed, LV_STATE_PRESSED);
+
+lv_obj_add_style(btn3, &style_normal, LV_STATE_DEFAULT);
+lv_obj_add_style(btn3, &style_pressed, LV_STATE_PRESSED);
+```
+
+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);
+lv_style_set_y(&style_normal, 100);
+
+static lv_style_t style_pressed;
+lv_style_init(&style_pressed);
+lv_style_set_translate_y(&style_pressed, -20);
+
+lv_obj_add_style(btn1, &style_normal, LV_STATE_DEFAULT);
+lv_obj_add_style(btn1, &style_pressed, LV_STATE_PRESSED);
+
+lv_obj_add_style(btn2, &style_normal, LV_STATE_DEFAULT);
+lv_obj_add_style(btn2, &style_pressed, LV_STATE_PRESSED);
+
+lv_obj_add_style(btn3, &style_normal, LV_STATE_DEFAULT);
+lv_obj_add_style(btn3, &style_pressed, LV_STATE_PRESSED);
+```
+
+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 laid out objects' position can be translated.
+
+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 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, and `LV_SIZE_CONTENT` will not react to the transformed size. 
+Hence, size transformation is "only" a visual effect. 
+
+This code enlarges a button when it's pressed:
+```c
+static lv_style_t style_pressed;
+lv_style_init(&style_pressed);
+lv_style_set_transform_width(&style_pressed, 10);
+lv_style_set_transform_height(&style_pressed, 10);
+
+lv_obj_add_style(btn, &style_pressed, LV_STATE_PRESSED);
+```
+
+### Min and Max size
+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;
+lv_style_init(&style_max_height);
+lv_style_set_y(&style_max_height, 200);
+
+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.
+```c
+static lv_style_t style_max_height;
+lv_style_init(&style_max_height);
+lv_style_set_y(&style_max_height, lv_pct(50));
+
+lv_obj_set_height(obj, lv_pct(100));
+lv_obj_add_style(obj, &style_max_height, LV_STATE_DEFAULT); //Limit the height to half parent height
+```
+
+## Layout
+
+### Overview
+Layouts can update the position and size of an object's children. They can be used to automatically arrange the children into a line or column, or in much more complicated forms. 
+
+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 further settings of the parent and children see the documentation of the given layout.
+
+### Built-in layout
+LVGL comes with two very powerful layouts:
+- Flexbox
+- Grid
+
+Both are heavily inspired by the CSS layouts with the same name.
+
+### Flags
+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 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 layout like this:
+```c
+uint32_t MY_LAYOUT;
+
+...
+
+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 it's required to reposition/resize the children of "obj" */	
+}
+```
+
+Custom style properties can be added which can be retrieved and used in the update callback. For example:
+```c
+uint32_t MY_PROP;
+...
+
+LV_STYLE_MY_PROP = lv_style_register_prop();
+
+...
+static inline void lv_style_set_my_prop(lv_style_t * style, uint32_t value)
+{
+    lv_style_value_t v = {
+        .num = (int32_t)value
+    };
+    lv_style_set_prop(style, LV_STYLE_MY_PROP, v);
+}
+
+```
+
+## Examples

docs/overview/display.md

@@ -0,0 +1,108 @@
+```eval_rst
+.. include:: /header.rst 
+:github_url: |github_link_base|/overview/display.md
+```
+# Displays
+
+``` 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 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.
+When you create the UI, use `lv_disp_set_default(disp)` to tell the library on which display to create objects.
+
+Why would you want multi-display support? Here are some examples:
+- Have a "normal" TFT display with local UI and create "virtual" screens on VNC on demand. (You need to add your VNC driver).
+- Have a large TFT display and a small monochrome display.
+- Have some smaller and simple displays in a large instrument or technology.
+- 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 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) 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 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 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 real display with the truncated area.
+
+## 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:
+
+* **Displays** are the physical hardware drawing the pixels.
+* **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.
+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 [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 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 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 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`. 
+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 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 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
+
+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 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.
+
+The background color is a simple color to fill the display. It can be adjusted with `lv_disp_set_bg_color(disp, 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 select the default display.
+
+
+
+## API
+
+```eval_rst
+
+.. doxygenfile:: lv_disp.h
+  :project: lvgl
+
+```

docs/overview/drawing.md

@@ -0,0 +1,225 @@
+```eval_rst
+.. include:: /header.rst 
+:github_url: |github_link_base|/overview/drawing.md
+```
+# 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.
+
+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 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 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 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 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 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
+
+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 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.
+    - 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.
+    - 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 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 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. 
+Knowing about masking comes in handy if you want to customize drawing.
+
+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 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, 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 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 a bitmap array and the necessary parts are applied 
+
+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 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 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.
+
+Each of these events is described in detail below.
+
+### Main drawing
+
+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. 
+
+#### LV_EVENT_DRAW_MAIN_BEGIN
+
+Sent before starting to draw an object. This is a good place to add masks manually. E.g. add a line mask that "removes" the right side of an object.
+
+#### LV_EVENT_DRAW_MAIN
+
+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 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 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.
+
+#### LV_EVENT_DRAW_POST_BEGIN
+
+Sent before starting the post draw phase. Masks can be added here too to mask out the post drawn content.
+
+#### LV_EVENT_DRAW_POST
+
+The actual drawing should happen here.
+
+#### LV_EVENT_DRAW_POST_END
+
+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.
+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 refer to the widget's documentation.
+
+`lv_obj_draw_part_t` has the following fields:
+
+```c
+// Always set
+const lv_area_t * clip_area;        // The current clip area, required if you need to draw something in the event
+uint32_t part;                      // The current part for which the event is sent
+uint32_t id;                        // The index of the part. E.g. a button's index on button matrix or table cell index.
+
+// Draw desciptors, set only if related
+lv_draw_rect_dsc_t * rect_dsc;      // A draw descriptor that can be modified to changed what LVGL will draw. Set only for rectangle-like parts
+lv_draw_label_dsc_t * label_dsc;    // A draw descriptor that can be modified to changed what LVGL will draw. Set only for text-like parts
+lv_draw_line_dsc_t * line_dsc;      // A draw descriptor that can be modified to changed what LVGL will draw. Set only for line-like parts
+lv_draw_img_dsc_t *  img_dsc;       // A draw descriptor that can be modified to changed what LVGL will draw. Set only for image-like parts
+lv_draw_arc_dsc_t *  arc_dsc;       // A draw descriptor that can be modified to changed what LVGL will draw. Set only for arc-like parts
+
+// 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 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.
+const void * sub_part_ptr;          // A pointer the identifies something in the part. E.g. chart series. 
+```
+
+`lv_event_get_draw_part_dsc(event)` can be used to get a pointer to `lv_obj_draw_part_t`.
+
+#### LV_EVENT_DRAW_PART_BEGIN
+
+Start the drawing of a part. This is a good place to modify the draw descriptors (e.g. `rect_dsc`), or add masks.
+ 
+#### 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 masks added in `LV_EVENT_DRAW_PART_BEGIN`.
+
+### Others
+
+#### LV_EVENT_COVER_CHECK   
+
+This event is used to check whether an object fully covers an area or not. 
+
+`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 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 apply blending properly
+- It's a text, etc 
+
+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 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 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 simply set the required draw area with `lv_event_set_ext_draw_size(e, size)`. 
+

docs/overview/event.md

@@ -0,0 +1,174 @@
+```eval_rst
+.. include:: /header.rst 
+:github_url: |github_link_base|/overview/event.md
+```
+# Events
+
+Events are triggered in LVGL when something happens which might be interesting to the user, e.g. when an object
+- is clicked
+- is scrolled
+- has its value changed
+- is redrawn, etc.
+
+## Add events to the object
+
+The user can assign callback functions to an object to see its events. In practice, it looks like this:
+```c
+lv_obj_t * btn = lv_btn_create(lv_scr_act());
+lv_obj_add_event_cb(btn, my_event_cb, LV_EVENT_CLICKED, NULL);   /*Assign an event callback*/
+
+...
+
+static void my_event_cb(lv_event_t * event)
+{
+    printf("Clicked\n");
+}
+```
+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 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.
+
+More events can be added to an object, like this:
+```c
+lv_obj_add_event_cb(obj, my_event_cb_1, LV_EVENT_CLICKED, NULL);
+lv_obj_add_event_cb(obj, my_event_cb_2, LV_EVENT_PRESSED, NULL);
+lv_obj_add_event_cb(obj, my_event_cb_3, LV_EVENT_ALL, NULL);		/*No filtering, receive all events*/
+```
+
+Even the same event callback can be used on an object with different `user_data`. For example:
+```c
+lv_obj_add_event_cb(obj, increment_on_click, LV_EVENT_CLICKED, &num1);
+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. 
+
+
+Other objects can use the same *event callback*.
+
+
+## Remove event(s) from an object
+
+Events can be removed from an object with the `lv_obj_remove_event_cb(obj, event_cb)` function or `lv_obj_remove_event_dsc(obj, event_dsc)`. `event_dsc` is a pointer returned by `lv_obj_add_event_cb`. 
+
+## Event codes
+
+The event codes can be grouped into these categories:
+- Input device events
+- Drawing events
+- Other events
+- Special events
+- Custom events
+
+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, 
+
+*Custom events* are added by the user and are never sent by LVGL.
+
+The following event codes exist:
+
+### Input device events
+- `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 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`       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 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 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
+- `LV_EVENT_DRAW_POST_BEGIN` Starting the post draw phase (when all children are drawn)
+- `LV_EVENT_DRAW_POST`   Perform the post draw phase (when all children are drawn)
+- `LV_EVENT_DRAW_POST_END`   Finishing the post draw phase (when all children are drawn)
+- `LV_EVENT_DRAW_PART_BEGIN` Starting to draw a part. The event parameter is `lv_obj_draw_dsc_t *`. Learn more [here](/overview/drawing).
+- `LV_EVENT_DRAW_PART_END`   Finishing to draw a part. The event parameter is `lv_obj_draw_dsc_t *`. Learn more [here](/overview/drawing).
+
+### 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`       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 
+
+
+### Custom events
+Any custom event codes can be registered by `uint32_t MY_EVENT_1 = lv_event_register_id();` 
+
+They can be sent to any object with `lv_event_send(obj, MY_EVENT_1, &some_data)`
+
+## Sending events
+
+To manually send events to an object, use `lv_event_send(obj, <EVENT_CODE> &some_data)`.
+
+For example, this can be used to manually close a message box by simulating a button press (although there are simpler ways to do this):
+```c
+/*Simulate the press of the first button (indexes start from zero)*/
+uint32_t btn_id = 0;
+lv_event_send(mbox, LV_EVENT_VALUE_CHANGED, &btn_id);
+```
+
+### Refresh event
+
+`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)
+- add/remove styles to/from an object if a limit is exceeded, etc
+
+## Fields of lv_event_t
+
+`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 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 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.  
+
+
+
+## Examples
+
+```eval_rst
+
+.. include:: ../../examples/event/index.rst
+
+```