{"id":2283,"date":"2024-01-17T05:38:30","date_gmt":"2024-01-17T05:38:30","guid":{"rendered":"https:\/\/blog.embeddedexpert.io\/?p=2283"},"modified":"2024-01-17T05:38:33","modified_gmt":"2024-01-17T05:38:33","slug":"getting-started-with-lvgl-part-2-display-interface","status":"publish","type":"post","link":"https:\/\/blog.embeddedexpert.io\/?p=2283","title":{"rendered":"Getting Started with LvGL Part 2: Display interface"},"content":{"rendered":"\n
\"\"<\/figure><\/div>\n\n\n\n

<\/p>\n\n\n\n

In the previous guide (here<\/a>), we took a look at LvGL and its feature and initialized the environment to make it work. In part two, we shall interface the TFT and display the demo.<\/p>\n\n\n\n

<\/p>\n\n\n\n

6. Including LvGL into the project:<\/h2>\n\n\n\n

First, head to LvGL github page from here<\/a>.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Select V8.3 from here:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Next, download as zip from here:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Extract the files and rename the folder to be LvGL and copy it to the driver folder of the project.<\/p>\n\n\n\n

Also, create new header within the driver folder with name of lv_conf.h<\/p>\n\n\n\n

Hence, the drive folder should be like this:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Now, open lv_conf.h and copy the content lv_conf_template.h from here<\/a>.<\/p>\n\n\n\n

Now, we start modifying:<\/p>\n\n\n\n

At line 15 set if 0 to if 1 as following:<\/p>\n\n\n\n

#if 1<\/pre><\/div>\n\n\n\n
At line 27 set the color depth to 16 since the screen is RGB565.<\/p>\n\n\n\n
#define LV_COLOR_DEPTH 16<\/pre><\/div>\n\n\n\n
Line 52 is for the memory of the LvGL:<\/p>\n\n\n\n
#define LV_MEM_SIZE (48U * 1024U) <\/pre><\/div>\n\n\n\n
For now, keep it to default of 48KB (depending on your application).<\/p>\n\n\n\n
At line 752, enable the widget demo:<\/p>\n\n\n\n
#define LV_USE_DEMO_WIDGETS 1<\/pre><\/div>\n\n\n\n
This will allow us to run the demo on the screen.<\/p>\n\n\n\n
Save the changes to the file.<\/p>\n\n\n\n
Now right click on the project and select properties as following:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Then go to C\/C++ build,  settings, then MCU GCC Compiler include paths:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
In include path:<\/p>\n\n\n\n
"${workspace_loc:\/${ProjName}\/Drivers\/lvgl}"<\/pre><\/div>\n\n\n\n
In include files:<\/p>\n\n\n\n
"${workspace_loc:\/${ProjName}\/Drivers\/lvgl\/lvgl.h}"<\/pre><\/div>\n\n\n\n
Click on apply and close. <\/p>\n\n\n\n
Next open the base_time.c source file:<\/p>\n\n\n\n
Include the lvgl.h header file as following:<\/p>\n\n\n\n
#include "lvgl.h"<\/pre><\/div>\n\n\n\n
Within the systick interrupt handler, call lv_tick_inc(1) as following:<\/p>\n\n\n\n
\t\/*Call LvGL tick function*\/\n\tlv_tick_inc(1);<\/pre><\/div>\n\n\n\n
Hence, the updated systick handler is as following:<\/p>\n\n\n\n
\/*Interrupt handler of SysTick*\/\nvoid SysTick_Handler(void)\n{\n\t\/*Increment the counter with every interrupt*\/\n\tmil++;\n\n\t\/*Call LvGL tick function*\/\n\tlv_tick_inc(1);\n}<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
Now, create new source and header file with name of LCDController.c and LCDController.h<\/p>\n\n\n\n
Within LCDController.h:<\/p>\n\n\n\n
Get the content from here<\/a>.<\/p>\n\n\n\n
Modify it as following:<\/p>\n\n\n\n
#ifndef INC_LCDCONTROLLER_H_\n#define INC_LCDCONTROLLER_H_\n\n\n#ifdef __cplusplus\nextern "C" {\n#endif\n\n\/*********************\n *      INCLUDES\n *********************\/\n\n#include "lvgl.h"\n\n\/*********************\n *      DEFINES\n *********************\/\n\n\/**********************\n *      TYPEDEFS\n **********************\/\n\n\/**********************\n * GLOBAL PROTOTYPES\n **********************\/\n\/* Initialize low level display driver *\/\nvoid lv_port_disp_init(void);\n\n\/* Enable updating the screen (the flushing process) when disp_flush() is called by LVGL\n *\/\nvoid disp_enable_update(void);\n\n\/* Disable updating the screen (the flushing process) when disp_flush() is called by LVGL\n *\/\nvoid disp_disable_update(void);\n\n\/**********************\n *      MACROS\n **********************\/\n\n#ifdef __cplusplus\n} \/*extern "C"*\/\n#endif\n\n\n\n#endif \/* INC_LCDCONTROLLER_H_ *\/\n<\/pre><\/div>\n\n\n\n
Now, open the source file:<\/p>\n\n\n\n
Include the following header file:<\/p>\n\n\n\n
#include "LCDController.h"\n#include <stdbool.h>\n#include "ILI_9341.h"\n#include "stdint.h"\n#include "lvgl.h"\n#include "LCD_Pins.h"<\/pre><\/div>\n\n\n\n
Define the dimensions of the display:<\/p>\n\n\n\n
#define MY_DISP_HOR_RES 240\n\n\n#define MY_DISP_VER_RES 320<\/pre><\/div>\n\n\n\n
Define the buffer size:<\/p>\n\n\n\n
#define buffer_width 100<\/pre><\/div>\n\n\n\n
Declare these two functions:<\/p>\n\n\n\n
static void disp_init(void);\n\nstatic void disp_flush(lv_disp_drv_t * disp_drv, const lv_area_t * area, lv_color_t * color_p);<\/pre><\/div>\n\n\n\n
Since we are using DMA, it is good idea to use double buffer with LvGL to improve the performance of the TFT.<\/p>\n\n\n\n
Hence, we can declare the the two buffers as following:<\/p>\n\n\n\n
static lv_color_t buf_1[MY_DISP_HOR_RES *buffer_width];\nstatic lv_color_t buf_2[MY_DISP_HOR_RES *buffer_width];<\/pre><\/div>\n\n\n\n
Width here is how many lines to be updated at with single DMA transfer. 100 means update 100 lines of the LCD with each DMA transfer. (From testing, more 100 will get some graphics glitches (due to breadboard nature)).<\/p>\n\n\n\n
Declare the display driver:<\/p>\n\n\n\n
static lv_disp_drv_t disp_drv;                         \/*Descriptor of a display driver*\/<\/pre><\/div>\n\n\n\n
Declare display draw driver:<\/p>\n\n\n\n
static lv_disp_draw_buf_t draw_buf_dsc_1;<\/pre><\/div>\n\n\n\n
The initialization function:<\/p>\n\n\n\n
void lv_port_disp_init(void)\n{\n    \/*-------------------------\n     * Initialize your display\n     * -----------------------*\/\n    disp_init();\n\n    \/*-----------------------------\n     * Create a buffer for drawing\n     *----------------------------*\/\n\n\n    \n\n    lv_disp_draw_buf_init(&draw_buf_dsc_1, buf_1, buf_2, MY_DISP_HOR_RES*buffer_width);   \/*Initialize the display buffer*\/\n\n\n    \/*-----------------------------------\n     * Register the display in LVGL\n     *----------------------------------*\/\n\n\n    lv_disp_drv_init(&disp_drv);                    \/*Basic initialization*\/\n\n    \/*Set up the functions to access to your display*\/\n\n    \/*Set the resolution of the display*\/\n    disp_drv.hor_res = MY_DISP_HOR_RES;\n    disp_drv.ver_res = MY_DISP_VER_RES;\n\n    \/*Used to copy the buffer's content to the display*\/\n    disp_drv.flush_cb = disp_flush;\n\n    \/*Set a display buffer*\/\n    disp_drv.draw_buf = &draw_buf_dsc_1;\n\n    \/*Finally register the driver*\/\n    lv_disp_drv_register(&disp_drv);\n}<\/pre><\/div>\n\n\n\n
Since the initailization calls disp_init funtion, this function will initialize the LCD.<\/p>\n\n\n\n
static void disp_init(void)\n{\n\tILI9341_Init();\n\n}<\/pre><\/div>\n\n\n\n
Enable display flush as following:<\/p>\n\n\n\n
volatile bool disp_flush_enabled = true;\n\nvolatile bool disp_flush_enabled = true;\n\n\/* Enable updating the screen (the flushing process) when disp_flush() is called by LVGL\n *\/\nvoid disp_enable_update(void)\n{\n    disp_flush_enabled = true;\n}\n\n\/* Disable updating the screen (the flushing process) when disp_flush() is called by LVGL\n *\/\nvoid disp_disable_update(void)\n{\n    disp_flush_enabled = false;\n}<\/pre><\/div>\n\n\n\n
For the display flush function:<\/p>\n\n\n\n
static void disp_flush(lv_disp_drv_t * disp_drv, const lv_area_t * area, lv_color_t * color_p)\n{\n\n\tsetAddrWindow(area->x1, area->y1, area->x2, area->y2);\n\tint height = area->y2 - area->y1 + 1;\n\tint width = area->x2 - area->x1 + 1;\n\n\tILI9341_DrawBitmap(width, height, (uint8_t *)color_p);\n\n}<\/pre><\/div>\n\n\n\n
SetAddrWindow will tell the embedded RAM within the TFT which area to be flushed.<\/p>\n\n\n\n
After the area is set in the RAM, flush the content of LvGL buffet to the TFT.<\/p>\n\n\n\n
Now, the LvGL is waiting for the next flush.<\/p>\n\n\n\n
Hence, in SPI_TX_Finished function:<\/p>\n\n\n\n
void SPI_TX_Finished(void)\n{\n    \/*IMPORTANT!!!\n     *Inform the graphics library that you are ready with the flushing*\/\n    lv_disp_flush_ready(&disp_drv);\n\n    \/*Set CS line to High*\/\n    CS_HIGH();\n\n}<\/pre><\/div>\n\n\n\n
Inform the LvGL that TFT is ready for the next TFT flush.<\/p>\n\n\n\n
Set CS pin to high.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Thats all for the TFT Integration.<\/p>\n\n\n\n
7. Main Code:<\/h2>\n\n\n\n
In main.c:<\/p>\n\n\n\n
Include the following:<\/p>\n\n\n\n
#include "time_base.h"\n#include "lvgl.h"\n#include "demos\/lv_demos.h"<\/pre><\/div>\n\n\n\n
In main function:<\/p>\n\n\n\n