{"id":15397,"date":"2023-08-14T12:44:17","date_gmt":"2023-08-14T07:14:17","guid":{"rendered":"https:\/\/fastbitlab.com\/?p=15397"},"modified":"2024-03-01T17:23:55","modified_gmt":"2024-03-01T11:53:55","slug":"adding-lvgl-source-to-the-project","status":"publish","type":"post","link":"https:\/\/fastbitlab.com\/blog\/adding-lvgl-source-to-the-project\/","title":{"rendered":"STM32-LTDC, LCD-TFT, LVGL(MCU3) Lecture 51| Adding LVGL source to the project"},"content":{"rendered":"<div class=\"boldgrid-section color4-background-color color-4-text-contrast bg-background-color\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-lg-1 col-md-12 col-sm-12 col-xs-12\"><\/div>\n<div class=\"col-lg-10 col-md-12 col-xs-12 col-sm-12\">\n<p class=\"\">&nbsp;<\/p>\n<h1 class=\"\" style=\"text-align: center; font-size: 35px; line-height: 50px;\"><span style=\"color: #000080;\">Adding LVGL source to the project<\/span><\/h1>\n<div class=\"row bg-editor-hr-wrap\">\n<div class=\"col-lg-12 col-md-12 col-xs-12 col-sm-12\">\n<div>\n<div class=\"bg-hr bg-hr-16 color2-color\" style=\"border-style: solid; border-width: 0px 0px 2px; box-shadow: #cecece 0px 0px 0px 0px;\"><\/div>\n<p>&nbsp;<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p class=\"\" style=\"font-size: 17px; line-height: 30px; font-family: 'Roboto Slab'; font-weight: 400;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">In the previous article, we created a project, but it is not an LVGL project yet because we haven&#8217;t added any LVGL-related files. Currently, it is just a STM32Cube project.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"font-size: 20px; line-height: 30px; font-family: 'Roboto Slab'; font-weight: 400;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"text-decoration: underline; color: #000080;\"><b>Adding lvgl to STM32 Project<\/b><\/span><\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">We will do the following,<\/span><\/p>\n<ol class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Add lvgl source files and lvgl.h<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Add lvgl example source files<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Add the tft and touchscreen controller drivers<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Add lvgl_conf.h<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Add include path settings in the IDE<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Turn off DMA2D&nbsp; and SDRAM configuration code (We don\u2019t use&nbsp; these peripherals in this project)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Call lvgl_init() function before you call any the lvgl apis<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Register display driver and input device driver(touchscreen) with lvgl<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Call lv_tick_inc(x) every x milliseconds in an interrupt to report the elapsed time to LVGL<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Call lv_timer_handler() every few milliseconds to handle LVGL related tasks<\/span><\/li>\n<\/ol>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 20px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"text-decoration: underline; color: #000080;\"><b>Add the main LVGL file to the Library<\/b><\/span><\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">First, we will do below two steps.&nbsp;<\/span><\/p>\n<ul class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">\n<li aria-level=\"1\"><span style=\"color: #ff6600;\"><b>Add lvgl source files and lvgl.h<\/b><\/span><\/li>\n<\/ul>\n<ul class=\"\" style=\"font-size: 17px; line-height: 30px; font-family: 'Roboto Slab'; font-weight: 400;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">\n<li aria-level=\"1\"><span style=\"color: #ff6600;\"><b>Add lvgl example source files<\/b><\/span><\/li>\n<\/ul>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">To add the LVGL files, follow these steps:<\/span><\/p>\n<ul class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong><span style=\"text-decoration: underline;\"><span style=\"color: #000080; text-decoration: underline;\">Create a project directory<\/span><span style=\"color: #000080; text-decoration: underline;\">:<\/span><\/span><\/strong> In your project directory, create a new folder to hold the LVGL source code. Right-click on the project, go to &#8220;New,&#8221; and select &#8220;Folder.&#8221; You can name it &#8216;lvgl&#8217; or any other suitable name.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><span style=\"text-decoration: underline; color: #000080;\"><strong>Locate the LVGL files:<\/strong> <\/span>Navigate to the folder where you cloned the LVGL project.<\/span><\/li>\n<\/ul>\n<p class=\"\" style=\"padding-left: 40px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">[Download LVGL: Visit the LVGL GitHub repository (<\/span><span style=\"color: #0000ff;\"><a style=\"color: #0000ff;\" href=\"https:\/\/github.com\/lvgl\/lvgl\"><span style=\"font-weight: 400;\">https:\/\/github.com\/lvgl\/lvgl<\/span><\/a><\/span><span style=\"font-weight: 400;\">) and download the source code. You can either download the entire repository as a ZIP file or clone it using Git.<\/span><\/p>\n<p class=\"\" style=\"padding-left: 40px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">Extract the LVGL source code: If you downloaded the ZIP file, extract its contents to a suitable location on your computer.<\/span><\/p>\n<p class=\"\" style=\"padding-left: 40px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">&nbsp;Shown in the<\/span><span style=\"color: #ff6600;\"><a style=\"color: #ff6600;\" href=\"https:\/\/fastbitlab.com\/add-the-lvgl-source-code-to-an-stm32-project\/\"><b> previous article<\/b><\/a><\/span><span style=\"font-weight: 400;\">.]<\/span><\/p>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"padding-left: 40px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">In this example, it is the &#8216;lvgl_downloads&#8217; folder. Enter the &#8216;lvgl&#8217; folder, and find the &#8216;src&#8217; folder. This contains the main LVGL source file.<\/span><\/p>\n<ul class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><span style=\"color: #000080;\"><strong>Add the LVGL files to your project:<\/strong><\/span> Drag and drop the &#8216;src&#8217; folder into the &#8216;lvgl&#8217; folder within your project. Select &#8216;Copy files and folders&#8217; when prompted to copy all the LVGL source files into your project&#8217;s workspace. Click OK to proceed.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><span style=\"color: #000080;\"><strong>Copy lvgl.h and the license:<\/strong><\/span> Copy the &#8216;lvgl.h&#8217; file and the license file into the &#8216;lvgl&#8217; folder (not the &#8216;src&#8217; folder). Paste them in the &#8216;lvgl&#8217; folder to complete the process.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong><span style=\"color: #000080;\">Add the &#8216;examples&#8217; folder:<\/span><\/strong> Drag and drop the &#8216;examples&#8217; folder into the &#8216;lvgl&#8217; folder.<\/span><\/li>\n<\/ul>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">By following these steps, you will have successfully added the necessary LVGL files to your project, as shown in Figure 1.<\/span><\/p>\n<figure id=\"attachment_15401\" aria-describedby=\"caption-attachment-15401\" style=\"width: 645px\" class=\"wp-caption aligncenter\"><img fetchpriority=\"high\" decoding=\"async\" class=\"wp-image-15401 \" src=\"https:\/\/fastbitlab.com\/wp-content\/uploads\/2023\/08\/Figure-1-2.png\" alt=\"Figure 1. Lvgl files\" width=\"645\" height=\"318\" srcset=\"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/08\/Figure-1-2.png 1700w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/08\/Figure-1-2-300x148.png 300w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/08\/Figure-1-2-1024x505.png 1024w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/08\/Figure-1-2-768x379.png 768w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/08\/Figure-1-2-600x296.png 600w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/08\/Figure-1-2-1536x757.png 1536w\" sizes=\"(max-width: 645px) 100vw, 645px\" \/><figcaption id=\"caption-attachment-15401\" class=\"wp-caption-text\">Figure 1. Lvgl files<\/figcaption><\/figure>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 20px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"text-decoration: underline; color: #000080;\"><b>Add the tft and touchscreen controller drivers<\/b><\/span><\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">To add TFT and touchscreen controller drivers to your LVGL project, follow these steps:<\/span><\/p>\n<ul class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"color: #000080;\"><b>Obtain the driver code:<\/b><\/span><span style=\"font-weight: 400;\"> Locate the TFT and touchscreen controller drivers from a reliable source, such as the LVGL repository.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"color: #000080;\"><b>Add the driver code to your project:<\/b><\/span><span style=\"font-weight: 400;\"> Copy the driver files into your project directory.&nbsp;<\/span><\/li>\n<\/ul>\n<p class=\"\" style=\"padding-left: 40px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">For example, if you downloaded the stm32f429_disco_no_os_sw4stm32 project from the lvgl_downloads folder, add the hal_stm_lvgl folder to your main project directory (not the lvgl folder). Drag and drop the folder into the main folder, select &#8220;Copy files and folders,&#8221; and click OK to complete the operation.<\/span><\/p>\n<ul class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"color: #000080;\"><b>Include LVGL configuration files:<\/b><\/span><span style=\"font-weight: 400;\"> Add the lvgl conf.h file and the license file to your main project directory. Drag and drop these files into the main project folder to ensure they are included.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"color: #000080;\"><b>Configure build settings<\/b><\/span><span style=\"font-weight: 400;\"><span style=\"color: #000080;\">:<\/span> By default, newly added files and folders in an Eclipse project may be excluded from the build. To include them, right-click on the newly added project (for example, hal_stm_lvgl folder), go to Properties, navigate to the C\/C++ Build tab, and uncheck the &#8220;Exclude resource from build&#8221; option. Click Apply, then Apply and Close to save the changes.&nbsp;<\/span><\/li>\n<\/ul>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">Repeat this process for the lvgl folder if necessary.<\/span><\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">The hal_stm_lvgl folder (and the lvgl folder, if applicable) will be included in the build process.<\/span><\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">Following these steps will add the TFT and touchscreen controller drivers to your LVGL project. Consult any documentation or instructions provided with the drivers to configure them properly within your LVGL project.<\/span><\/p>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">Let&#8217;s examine how the touchscreen is connected to our board by referring to the schematic.<\/span><\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">We need to check the board&#8217;s schematics to determine the touchscreen controller&#8217;s interface. If we navigate to the last page of the schematics, we can see that the STMPE811QTR is the touchscreen controller, and it is connected to the microcontroller via the I2C peripheral (specifically I2C3)(Figure 2). However, we haven&#8217;t yet added support for the I2C peripheral in our project, so we need to do that.<\/span><\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">By following these steps, you will have enabled support for the I2C peripheral and configured the necessary settings to interface with the touchscreen controller.<\/span><\/p>\n<figure id=\"attachment_15403\" aria-describedby=\"caption-attachment-15403\" style=\"width: 635px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-15403 \" src=\"https:\/\/fastbitlab.com\/wp-content\/uploads\/2023\/08\/Figure-2-2.png\" alt=\"Figure 2. Connection detail\" width=\"635\" height=\"242\" srcset=\"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/08\/Figure-2-2.png 1254w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/08\/Figure-2-2-300x114.png 300w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/08\/Figure-2-2-1024x390.png 1024w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/08\/Figure-2-2-768x293.png 768w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/08\/Figure-2-2-600x229.png 600w\" sizes=\"(max-width: 635px) 100vw, 635px\" \/><figcaption id=\"caption-attachment-15403\" class=\"wp-caption-text\">Figure 2. Connection detail<\/figcaption><\/figure>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">To enable support for the I2C peripheral, follow these steps:<\/span><\/p>\n<ul class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Open the project and locate the &#8216;ioc&#8217; file.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">In the &#8216;ioc&#8217; file, navigate to the Connectivity section and select I2C3.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Enable the I2C mode for I2C3.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">It&#8217;s not necessary to make any additional configuration changes because the files in the hal_stm_lvgl folder will handle the required configurations. Simply ensure that you provide low-level driver support, specifically for the I2C driver.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Save the changes and generate the code.<\/span><\/li>\n<\/ul>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">Before generating the code, it&#8217;s important to disable the option to generate code for I2C3 initialization. To do this:<\/span><\/p>\n<ul class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Go to Project Manager.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Access the Advanced Settings.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Uncheck the &#8220;Generate code (I2C3_MX_Init)&#8221; option.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Save the settings.<\/span><\/li>\n<\/ul>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">Now you can generate the code without the I2C3 initialization code being automatically generated by CubeIDE.<\/span><\/p>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 20px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"text-decoration: underline; color: #000080;\"><b>Add include path settings in the IDE<\/b><\/span><\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">To ensure the IDE can properly locate the header files, we need to add include path settings. Follow these steps to configure the include paths in your IDE:<\/span><\/p>\n<ol class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Click on the Project and right-click to access the Properties menu.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Navigate to C\/C++ Build and select Settings.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Under GCC Compiler, find the Include paths option.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Click the Add button and choose the workspace option.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Select the main Project and click OK.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Verify that the include path has been added correctly.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Click OK, then Apply, and finally Apply and Close to save the changes.<\/span><\/li>\n<\/ol>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">The IDE can locate the necessary header files by adding the include paths while building your code.<\/span><\/p>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><b><span style=\"color: #000080;\">Turn off DMA2D&nbsp; and SDRAM configuration code<\/span> <\/b><span style=\"font-weight: 400;\">(We don\u2019t use&nbsp; these peripherals in this project).<\/span><\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">To disable the DMA2D and SDRAM configuration code in your project, follow these steps:<\/span><\/p>\n<ul class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><span style=\"color: #ff9900;\">DMA2D<\/span>:<\/span>\n<ul class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Open the <\/span><span style=\"font-weight: 400;\">tft.h<\/span><span style=\"font-weight: 400;\"> file located in the <\/span><span style=\"font-weight: 400;\">hal_stm_lvgl<\/span><span style=\"font-weight: 400;\"> folder.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Locate the line that defines <\/span><span style=\"font-weight: 400;\">TFT_EXT_FB&nbsp; 1 <\/span><span style=\"font-weight: 400;\">and set it to 0 to disable the external frame buffer 1.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Also, set <\/span><span style=\"font-weight: 400;\">TFT_USB_GPU<\/span><span style=\"font-weight: 400;\"> to 0 to disable the USB GPU.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Save the changes.<\/span><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><span style=\"color: #ff9900;\">SDRAM<\/span>:<\/span>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Open the <\/span><span style=\"font-weight: 400;\">lv_conf.h<\/span><span style=\"font-weight: 400;\"> file in your project.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Look for the option related to DMA2D.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Set the DMA2D option to &#8220;off&#8221; or &#8220;0&#8221; to disable it.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Save the changes.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">By turning off these peripherals, you are indicating that you will not be using them in your project. Instead, you plan to utilize the on-chip RAM.<\/span><\/p>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 20px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"text-decoration: underline; color: #000080;\"><b>Call lvgl_init() function before you call any the lvgl apis<\/b><\/span><\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">To utilize LVGL effectively, it is crucial to call the lvgl_init() function before any other LVGL APIs. This initialization step is explicitly mentioned in the documentation.<\/span><\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">To better understand this process, refer to the documentation&#8217;s Porting section, specifically the project setup instructions that outline the initialization steps. The first function to call in this sequence is lv_init(). (Shown in Figure 3)<\/span><\/p>\n<figure id=\"attachment_15404\" aria-describedby=\"caption-attachment-15404\" style=\"width: 735px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-15404 \" src=\"https:\/\/fastbitlab.com\/wp-content\/uploads\/2023\/08\/Figure-3-2.png\" alt=\"Figure 3. Initialization\" width=\"735\" height=\"287\" srcset=\"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/08\/Figure-3-2.png 1829w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/08\/Figure-3-2-300x117.png 300w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/08\/Figure-3-2-1024x399.png 1024w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/08\/Figure-3-2-768x299.png 768w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/08\/Figure-3-2-600x234.png 600w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/08\/Figure-3-2-1536x599.png 1536w\" sizes=\"(max-width: 735px) 100vw, 735px\" \/><figcaption id=\"caption-attachment-15404\" class=\"wp-caption-text\">Figure 3. Initialization<\/figcaption><\/figure>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">To call the lvgl_init() function before using any other APIs in LVGL (Light and Versatile Graphics Library), you need to follow these steps:<\/span><\/p>\n<ul class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Include the LVGL header file in your code. Typically, the header file is named lvgl.h or lvgl\/lvgl.h. Include it at the beginning of your source file.<\/span><\/li>\n<\/ul>\n<p class=\"\" style=\"padding-left: 40px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">Assuming the lvgl.h file is located in the lvgl directory, and you would include it with the following directive:<\/span><b>&nbsp;<\/b><\/p>\n<p class=\"\" style=\"padding-left: 40px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><b>#include &#8220;lvgl\/lvgl.h&#8221;.&nbsp;<\/b><\/p>\n<ul class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">After the clock initialization, initialize the LVGL library by calling the lv_init() function. This function initializes the library&#8217;s internal data structures.<\/span><\/li>\n<\/ul>\n<p class=\"\" style=\"padding-left: 40px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">Call the lvgl_init() function to perform additional initialization specific to your platform or application. This function sets up the necessary memory manager, display driver, input device driver, and other platform-specific configurations.<\/span><\/p>\n<p class=\"\" style=\"padding-left: 40px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">After calling lvgl_init(), you can use other LVGL APIs to create and manage graphical objects, handle input events, etc.<\/span><\/p>\n<ul class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Next, proceed with initializing the required drivers and registering the display and input device drivers. You can accomplish this by calling the tft_init() function provided in tft.h.<\/span><\/li>\n<\/ul>\n<p class=\"\" style=\"padding-left: 40px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">Examine the tft_init() function, which internally invokes LCD_config. This configuration includes sending various LCD commands and configuring the LTDC (Low-Temperature Differential Calorimetry). Consequently, calling a single function, tft_init(), handles all the necessary setup.<\/span><\/p>\n<p class=\"\" style=\"padding-left: 40px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">Therefore, call tft_init() from your main.c file. Remember to include the tft.h header file. Assuming the file is located in the hal_stm_lvgl\/tft directory, use the following directive: <\/span><b>#include &#8220;hal_stm_lvgl\/tft\/tft.h&#8221;<\/b><\/p>\n<p class=\"\" style=\"padding-left: 40px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">For touchpad functionality, the documentation suggests using touchpad.h and calling the touchpad_init() function. Include the touchpad.h header file in your code.<\/span><\/p>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 20px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"text-decoration: underline; color: #000080;\"><b>Register display driver and input device driver with lvgl<\/b><\/span><\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">In the case of the tft_init() function, this registration is already taken care of.&nbsp;<\/span><\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><b><span style=\"color: #000080;\">Create a display driver implementation:<\/span> <\/b><span style=\"font-weight: 400;\">Depending on your platform, you may have different display hardware and communication protocols (e.g., SPI, I2C, parallel interface). You&#8217;ll need to implement the necessary functions to communicate with your display driver. The required functions typically include initialization, flushing the display buffer, and optionally reading touchpad coordinates. Refer to the LVGL documentation or examples specific to your platform for more details.<\/span><\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><b><span style=\"color: #000080;\">Register the display driver:<\/span> <\/b><span style=\"font-weight: 400;\">After implementing the display driver, you must register it with LVGL using the lv_disp_drv_t structure and the lv_disp_drv_register() function. This allows LVGL to use your driver for rendering.&nbsp;<\/span><\/p>\n<pre class=\"color-neutral-text-contrast color-neutral-background-color\" style=\"font-size: 12px; box-shadow: #cecece 0px 0px 0px 0px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\"><span style=\"color: #800080;\">#if<\/span> TFT_EXT_FB != 0\r\n    SDRAM_Init();\r\n<span style=\"color: #800080;\">#endif<\/span>\r\n    LCD_Config();\r\n    DMA_Config();\r\n    disp_drv.draw_buf = &amp;buf;\r\n    disp_drv.flush_cb = tft_flush;\r\n    disp_drv.monitor_cb = monitor_cb;\r\n    disp_drv.hor_res = 240;\r\n    disp_drv.ver_res = 320;\r\n  <strong>  lv_disp_drv_register(&amp;disp_drv);<\/strong><\/pre>\n<div class=\"mceTemp\"><\/div>\n<p class=\"\" style=\"text-align: center;\">Register the display driver<\/p>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">This global variable(lv_disp_drv_t) represents a structure that the driver needs to fill with specific details. These details include the display resolution, horizontal and vertical resolution, and other relevant options, as shown below.<\/span><\/p>\n<pre class=\"color-neutral-text-contrast color-neutral-background-color\" style=\"font-size: 12px; box-shadow: #cecece 0px 0px 0px 0px inset;\"><strong><span style=\"color: #800080;\">typedef struct<\/span><\/strong> <strong>_lv_disp_drv_t<\/strong> {\r\n\r\n    lv_coord_t <span style=\"color: #3366ff;\">hor_res<\/span>; <span style=\"color: #008000;\">\/**&lt; Horizontal resolution.*\/<\/span>\r\n    lv_coord_t <span style=\"color: #3366ff;\">ver_res<\/span>; <span style=\"color: #008000;\">\/**&lt; Vertical resolution.*\/<\/span>\r\n\r\n    lv_coord_t\r\n    <span style=\"color: #3366ff;\">physical_hor_res<\/span>; <span style=\"color: #008000;\">\/**&lt; Horizontal resolution of the full \/ physical display. Set to -1 for fullscreen mode.*\/<\/span>\r\n    lv_coord_t\r\n    <span style=\"color: #3366ff;\">physical_ver_res<\/span>; <span style=\"color: #008000;\">\/**&lt; Vertical resolution of the full \/ physical display. Set to -1 for fullscreen mode.*\/<\/span>\r\n    lv_coord_t\r\n    <span style=\"color: #3366ff;\">offset_x<\/span>; <span style=\"color: #008000;\">\/**&lt; Horizontal offset from the full \/ physical display. Set to 0 for fullscreen mode.*\/<\/span>\r\n    lv_coord_t <span style=\"color: #3366ff;\">offset_y<\/span>; <span style=\"color: #008000;\">\/**&lt; Vertical offset from the full \/ physical display. Set to 0 for fullscreen mode.*\/<\/span><\/pre>\n<div class=\"mceTemp\"><\/div>\n<p class=\"\" style=\"text-align: center;\">lv_disp_drv_t structure<\/p>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">The&#8217; <\/span><b>flush<\/b><span style=\"font-weight: 400;\">&#8216; function is one important function that the driver must implement. Whenever LVGL&nbsp;<\/span><\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">needs to send graphic elements to the display, it calls this function, which is a function pointer within the driver. The driver must appropriately fill this function pointer.<\/span><\/p>\n<pre class=\"color-neutral-text-contrast color-neutral-background-color\" style=\"font-size: 12px; box-shadow: #cecece 0px 0px 0px 0px inset;\"><strong><span style=\"color: #993366;\">static void<\/span> tft_flush(lv_disp_drv_t * drv, const lv_area_t * area, lv_color_t * color_p)<\/strong>\r\n{\r\n<span style=\"color: #008000;\">\/*Return if the area is out the screen*\/<\/span>\r\n<span style=\"color: #800080;\">if<\/span>(area-&gt;x2 &lt; 0) <span style=\"color: #800080;\">return<\/span>;\r\n<span style=\"color: #800080;\">if<\/span>(area-&gt;y2 &lt; 0) <span style=\"color: #800080;\">return<\/span>;\r\n<span style=\"color: #800080;\">if<\/span>(area-&gt;x1 &gt; TFT_HOR_RES - 1) <span style=\"color: #800080;\">return<\/span>;\r\n<span style=\"color: #800080;\">if<\/span>(area-&gt;y1 &gt; TFT_VER_RES - 1) <span style=\"color: #800080;\">return<\/span>;\r\n\r\n<span style=\"color: #008000;\">\/*Truncate the area to the screen*\/<\/span>\r\nint32_t act_x1 = area-&gt;x1 &lt; 0 ? 0 : area-&gt;x1;\r\nint32_t act_y1 = area-&gt;y1 &lt; 0 ? 0 : area-&gt;y1;\r\nint32_t act_x2 = area-&gt;x2 &gt; TFT_HOR_RES - 1 ? TFT_HOR_RES - 1 : area-&gt;x2;\r\nint32_t act_y2 = area-&gt;y2 &gt; TFT_VER_RES - 1 ? TFT_VER_RES - 1 : area-&gt;y2;\r\n\r\nx1_flush = act_x1;\r\ny1_flush = act_y1;\r\nx2_flush = act_x2;\r\ny2_fill = act_y2;\r\ny_fill_act = act_y1;\r\nbuf_to_flush = color_p;<\/pre>\n<p class=\"\" style=\"text-align: center;\">Flush function<\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">By registering the driver through tft_init(), LVGL becomes aware of your driver and its capabilities. The code shows that the flush callback is configured to the tft_flush() function. When LVGL needs to send graphic elements to the display, it calls this function and provides the necessary pointer.<\/span><\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">In the tft_flush() function,&nbsp; the code performs a DMA transfer using the provided pointer representing the frame buffer. The driver manages this frame buffer, as evident from the variable my_fb, which is set to the specified resolution.<\/span><\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">In summary, the tft_init() function takes care of registering the display driver with LVGL, ensuring that LVGL recognizes your driver&#8217;s capabilities. The function configures the appropriate flush callback, allowing LVGL to send graphic elements to the display by calling the designated driver function.<\/span><\/p>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">After that, you have to do the two steps mentioned below in the documentation(Figure 3).<\/span><\/p>\n<ul class=\"\" style=\"font-family: 'Roboto Slab'; font-weight: 400; font-size: 20px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"text-decoration: underline; color: #000080;\"><b>Call lv_tick_inc(x) every x milliseconds in an interrupt to report the elapsed time to LVGL<\/b><span style=\"font-weight: 400;\">.<\/span><\/span><\/li>\n<\/ul>\n<p class=\"\" style=\"padding-left: 40px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">One important step is to call <\/span><b>lv_tick_inc(x)<\/b><span style=\"font-weight: 400;\"> every x milliseconds in an interrupt. This allows LVGL to track the elapsed time accurately since the library relies on various timers. By reporting the elapsed time through this function, LVGL can perform time-related tasks correctly.<\/span><\/p>\n<p class=\"\" style=\"padding-left: 40px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">To accomplish this, you can utilize the systick interrupt handler already present in your project. Typically, the systick interrupt is configured to occur every 1 millisecond. However, if your configuration sets it to occur every 10 milliseconds, for example, you should call <\/span><span style=\"font-weight: 400;\">lv_tick_inc(10)<\/span><span style=\"font-weight: 400;\"> within the systick interrupt handler, providing the appropriate argument.<\/span><\/p>\n<p class=\"\" style=\"padding-left: 40px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">By incorporating this function call within the systick interrupt handler, you ensure that LVGL is regularly informed about the elapsed time.<\/span><\/p>\n<p class=\"\" style=\"padding-left: 40px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">Remember to adjust the frequency of the function call (<\/span><span style=\"font-weight: 400;\">x<\/span><span style=\"font-weight: 400;\"> milliseconds) according to your specific systick interrupt configuration.<\/span><\/p>\n<p class=\"\"><span style=\"font-weight: 400;\">&nbsp;<\/span><\/p>\n<ul class=\"\" style=\"font-size: 20px; line-height: 30px; font-family: 'Roboto Slab'; font-weight: 400;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">\n<li aria-level=\"1\"><span style=\"text-decoration: underline; color: #000080;\"><b>Call lv_timer_handler() every few milliseconds to handle LVGL related tasks<\/b><\/span><\/li>\n<\/ul>\n<p class=\"\" style=\"padding-left: 40px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">The next step is to call lv_timer_handler() every few milliseconds to handle LVGL-related tasks. This function allows the LVGL engine to check its timers, including the elapsed timers, and execute the associated timer handlers.<\/span><\/p>\n<p class=\"\" style=\"padding-left: 40px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">To ensure proper execution of these tasks, you need to call lv_timer_handler() repeatedly. It is recommended to incorporate this function call within a loop.&nbsp;<\/span><\/p>\n<p class=\"\" style=\"padding-left: 40px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">In your main.c file, within the main program loop (the infinite loop), place the call to lv_timer_handler() along with a delay of your desired interval (e.g., 5 milliseconds). Use the appropriate delay function according to your platform or implementation.<\/span><\/p>\n<p class=\"\" style=\"padding-left: 40px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400;\">By including this loop structure, you allow LVGL to handle its internal timers and tasks continuously.<\/span><\/p>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"font-size: 20px; font-family: 'Roboto Slab'; font-weight: 400; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"color: #000080;\"><strong>Fastbit Embedded Brain Academy Courses<\/strong><\/span><\/p>\n<p class=\"\" style=\"font-size: 17px; line-height: 30px; font-family: 'Roboto Slab'; font-weight: 400;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"color: #0000ff;\"><a style=\"color: #0000ff;\" href=\"https:\/\/fastbitlab.com\/course1\">https:\/\/fastbitlab.com\/course1<\/a><\/span><\/p>\n<p class=\"\">&nbsp;<\/p>\n<\/div>\n<div class=\"col-lg-1 col-md-12 col-sm-12 col-xs-12\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; Adding LVGL source to the project &nbsp; In the previous article, we created a project, but it is not an LVGL project yet because we haven&#8217;t added any LVGL-related files. Currently, it is just a STM32Cube project. &nbsp; Adding lvgl to STM32 Project We will do the following, Add lvgl source files and lvgl.h [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":15403,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"0","ocean_second_sidebar":"0","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"0","ocean_custom_header_template":"0","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"0","ocean_menu_typo_font_family":"0","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"0","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"off","ocean_gallery_id":[],"footnotes":""},"categories":[8],"tags":[],"class_list":["post-15397","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","entry","has-media"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to add LVGL source to the project?<\/title>\n<meta name=\"description\" content=\"Adding lvgl to STM32 Project. We will do the following, Add lvgl source files and lvgl.h, Add lvgl example source files, Add the tft and\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fastbitlab.com\/blog\/adding-lvgl-source-to-the-project\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to add LVGL source to the project?\" \/>\n<meta property=\"og:description\" content=\"Adding lvgl to STM32 Project. We will do the following, Add lvgl source files and lvgl.h, Add lvgl example source files, Add the tft and\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fastbitlab.com\/blog\/adding-lvgl-source-to-the-project\/\" \/>\n<meta property=\"og:site_name\" content=\"FastBit EBA\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/fastbiteba\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-14T07:14:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-01T11:53:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/08\/Figure-2-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1254\" \/>\n\t<meta property=\"og:image:height\" content=\"478\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"FastBitLab\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fastbiteba\" \/>\n<meta name=\"twitter:site\" content=\"@fastbiteba\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"FastBitLab\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/adding-lvgl-source-to-the-project\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/adding-lvgl-source-to-the-project\\\/\"},\"author\":{\"name\":\"FastBitLab\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#\\\/schema\\\/person\\\/e32b38e733a0d76ffa7e6bc998652e5d\"},\"headline\":\"STM32-LTDC, LCD-TFT, LVGL(MCU3) Lecture 51| Adding LVGL source to the project\",\"datePublished\":\"2023-08-14T07:14:17+00:00\",\"dateModified\":\"2024-03-01T11:53:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/adding-lvgl-source-to-the-project\\\/\"},\"wordCount\":2298,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/adding-lvgl-source-to-the-project\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/Figure-2-2.png\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/adding-lvgl-source-to-the-project\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/adding-lvgl-source-to-the-project\\\/\",\"url\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/adding-lvgl-source-to-the-project\\\/\",\"name\":\"How to add LVGL source to the project?\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/adding-lvgl-source-to-the-project\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/adding-lvgl-source-to-the-project\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/Figure-2-2.png\",\"datePublished\":\"2023-08-14T07:14:17+00:00\",\"dateModified\":\"2024-03-01T11:53:55+00:00\",\"description\":\"Adding lvgl to STM32 Project. We will do the following, Add lvgl source files and lvgl.h, Add lvgl example source files, Add the tft and\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/adding-lvgl-source-to-the-project\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/adding-lvgl-source-to-the-project\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/adding-lvgl-source-to-the-project\\\/#primaryimage\",\"url\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/Figure-2-2.png\",\"contentUrl\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/Figure-2-2.png\",\"width\":1254,\"height\":478,\"caption\":\"Figure 2. Connection detail\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/adding-lvgl-source-to-the-project\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"STM32-LTDC, LCD-TFT, LVGL(MCU3) Lecture 51| Adding LVGL source to the project\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/\",\"name\":\"FastBit EBA\",\"description\":\"Your Online Academy of Embedded Systems\",\"publisher\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#organization\",\"name\":\"FastBit EBA\",\"url\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/logo-EzNrEnyr.png\",\"contentUrl\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/logo-EzNrEnyr.png\",\"width\":640,\"height\":640,\"caption\":\"FastBit EBA\"},\"image\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/fastbiteba\\\/\",\"https:\\\/\\\/x.com\\\/fastbiteba\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/fastbit-embedded-brain-academy-b3167b124\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCa1REBV9hyrzGp2mjJCagBg\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#\\\/schema\\\/person\\\/e32b38e733a0d76ffa7e6bc998652e5d\",\"name\":\"FastBitLab\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g\",\"caption\":\"FastBitLab\"},\"description\":\"The FastBit Embedded Brain Academy uses the power of internet to bring the online courses related to the field of embedded system programming, Real time operating system, Embedded Linux systems, etc at your finger tip with very low cost. Backed with strong experience of industry, we have produced lots of courses with the customer enrolment over 3000+ across 100+ countries.\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to add LVGL source to the project?","description":"Adding lvgl to STM32 Project. We will do the following, Add lvgl source files and lvgl.h, Add lvgl example source files, Add the tft and","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fastbitlab.com\/blog\/adding-lvgl-source-to-the-project\/","og_locale":"en_US","og_type":"article","og_title":"How to add LVGL source to the project?","og_description":"Adding lvgl to STM32 Project. We will do the following, Add lvgl source files and lvgl.h, Add lvgl example source files, Add the tft and","og_url":"https:\/\/fastbitlab.com\/blog\/adding-lvgl-source-to-the-project\/","og_site_name":"FastBit EBA","article_publisher":"https:\/\/www.facebook.com\/fastbiteba\/","article_published_time":"2023-08-14T07:14:17+00:00","article_modified_time":"2024-03-01T11:53:55+00:00","og_image":[{"width":1254,"height":478,"url":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/08\/Figure-2-2.png","type":"image\/png"}],"author":"FastBitLab","twitter_card":"summary_large_image","twitter_creator":"@fastbiteba","twitter_site":"@fastbiteba","twitter_misc":{"Written by":"FastBitLab","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fastbitlab.com\/blog\/adding-lvgl-source-to-the-project\/#article","isPartOf":{"@id":"https:\/\/fastbitlab.com\/blog\/adding-lvgl-source-to-the-project\/"},"author":{"name":"FastBitLab","@id":"https:\/\/fastbitlab.com\/blog\/#\/schema\/person\/e32b38e733a0d76ffa7e6bc998652e5d"},"headline":"STM32-LTDC, LCD-TFT, LVGL(MCU3) Lecture 51| Adding LVGL source to the project","datePublished":"2023-08-14T07:14:17+00:00","dateModified":"2024-03-01T11:53:55+00:00","mainEntityOfPage":{"@id":"https:\/\/fastbitlab.com\/blog\/adding-lvgl-source-to-the-project\/"},"wordCount":2298,"commentCount":0,"publisher":{"@id":"https:\/\/fastbitlab.com\/blog\/#organization"},"image":{"@id":"https:\/\/fastbitlab.com\/blog\/adding-lvgl-source-to-the-project\/#primaryimage"},"thumbnailUrl":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/08\/Figure-2-2.png","articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fastbitlab.com\/blog\/adding-lvgl-source-to-the-project\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/fastbitlab.com\/blog\/adding-lvgl-source-to-the-project\/","url":"https:\/\/fastbitlab.com\/blog\/adding-lvgl-source-to-the-project\/","name":"How to add LVGL source to the project?","isPartOf":{"@id":"https:\/\/fastbitlab.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/fastbitlab.com\/blog\/adding-lvgl-source-to-the-project\/#primaryimage"},"image":{"@id":"https:\/\/fastbitlab.com\/blog\/adding-lvgl-source-to-the-project\/#primaryimage"},"thumbnailUrl":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/08\/Figure-2-2.png","datePublished":"2023-08-14T07:14:17+00:00","dateModified":"2024-03-01T11:53:55+00:00","description":"Adding lvgl to STM32 Project. We will do the following, Add lvgl source files and lvgl.h, Add lvgl example source files, Add the tft and","breadcrumb":{"@id":"https:\/\/fastbitlab.com\/blog\/adding-lvgl-source-to-the-project\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fastbitlab.com\/blog\/adding-lvgl-source-to-the-project\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fastbitlab.com\/blog\/adding-lvgl-source-to-the-project\/#primaryimage","url":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/08\/Figure-2-2.png","contentUrl":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/08\/Figure-2-2.png","width":1254,"height":478,"caption":"Figure 2. Connection detail"},{"@type":"BreadcrumbList","@id":"https:\/\/fastbitlab.com\/blog\/adding-lvgl-source-to-the-project\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/fastbitlab.com\/blog\/"},{"@type":"ListItem","position":2,"name":"STM32-LTDC, LCD-TFT, LVGL(MCU3) Lecture 51| Adding LVGL source to the project"}]},{"@type":"WebSite","@id":"https:\/\/fastbitlab.com\/blog\/#website","url":"https:\/\/fastbitlab.com\/blog\/","name":"FastBit EBA","description":"Your Online Academy of Embedded Systems","publisher":{"@id":"https:\/\/fastbitlab.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fastbitlab.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/fastbitlab.com\/blog\/#organization","name":"FastBit EBA","url":"https:\/\/fastbitlab.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fastbitlab.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2026\/04\/logo-EzNrEnyr.png","contentUrl":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2026\/04\/logo-EzNrEnyr.png","width":640,"height":640,"caption":"FastBit EBA"},"image":{"@id":"https:\/\/fastbitlab.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/fastbiteba\/","https:\/\/x.com\/fastbiteba","https:\/\/www.linkedin.com\/in\/fastbit-embedded-brain-academy-b3167b124\/","https:\/\/www.youtube.com\/channel\/UCa1REBV9hyrzGp2mjJCagBg"]},{"@type":"Person","@id":"https:\/\/fastbitlab.com\/blog\/#\/schema\/person\/e32b38e733a0d76ffa7e6bc998652e5d","name":"FastBitLab","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g","caption":"FastBitLab"},"description":"The FastBit Embedded Brain Academy uses the power of internet to bring the online courses related to the field of embedded system programming, Real time operating system, Embedded Linux systems, etc at your finger tip with very low cost. Backed with strong experience of industry, we have produced lots of courses with the customer enrolment over 3000+ across 100+ countries."}]}},"_links":{"self":[{"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/posts\/15397","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/comments?post=15397"}],"version-history":[{"count":5,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/posts\/15397\/revisions"}],"predecessor-version":[{"id":16294,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/posts\/15397\/revisions\/16294"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/media\/15403"}],"wp:attachment":[{"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/media?parent=15397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/categories?post=15397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/tags?post=15397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}