LVGL

LVGL (Light and Versatile Graphics Library) is an open-source embedded graphics library used for creating beautiful, high-performance, and customizable graphical user interfaces (GUIs). It is designed to be simple and flexible, making it suitable for various embedded platforms, including microcontrollers and microprocessors.

Overview

This document introduces relevant information about the LVGL solution based on Realtek RTL8772GWP. Its purpose is to assist users in setting up the development environment, including understanding the SDK, compiling and flashing firmware, and system testing methods. Developers can flash the test files from the SDK to ensure proper development environment configuration and that the EVB is functioning correctly.

Note

  • The example solution described in this article uses the Realtek RTL8772GWP EVB with an RGB (480 * 480) LCD display driven by st7701s and a touch screen module driven by gt911. If developers choose the same hardware environment as described in this article, they can directly run the sample project in the SDK.

  • If you need to adapt to other models of displays and input devices, please refer to section GUI Task for instructions on adapting to new display and input device drivers.

  • The Realtek RTL8772GWP chip supports display interfaces such as i8080, qspi/spi, and RGB888/RGB565.

Practical Application Case

The following diagram illustrates the modules included in the LVGL application:

../../../../_images/fig_module1.jpeg

LVGL application modules

Supported Features

The Realtek LVGL application provides comprehensive functionality support:

  • Support LVGL

  • Support BLE OTA

Requirements

  1. RTL87x2GWP EVB

  2. LCD display module (480*480 st7701s + gt911)

  1. ARM Keil MDK: ArmMDK

  2. MPTool_kits: RealMCU

  3. DebugAnalyzer: RealMCU

  4. scons 4.4.0: run command in python environment pip install scons==4.4.0

Wiring

EVB

The EVB provides a hardware environment for user development and application debugging. The LVGL application uses the Model B EVB for demonstration, which consists of a mainboard and a daughterboard. The EVB has a download mode and a working mode. The download mode is used for functions like firmware burning, while the working mode is for normal operation of the application. Developer need to configure the EVB to enter the desired mode. For detailed information and instructions on using the EVB mainboard, please refer to Evaluation Board User Manual.

../../../../_images/fig_evb1.png

LVGL EVB wiring

Configurations

The configuration of the LVGL solution in the SDK is located in SDK\applications\lvgl\proj\menu_config.h, you can check them in Configuration Wizard of Keil, the default configuration is as follows:

Note

After making configuration changes, the configuration will take effect when the project is rebuilt according to the supported compilation method. Please refer to the Building and Downloading steps for the building method.

  • CONFIG_REALTEK_BLE_DEMO, CONFIG_REALTEK_BLE_DEMO_APP : Enable the BLE demo app and select the desired demo from the configuration.

  • CONFIG_REALTEK_BLE_OTA, CONFIG_REALTEK_DFU_SERVICE, CONFIG_REALTEK_OTA_SERVICE: These are the underlying support configurations for the ble OTA demo app. They should be enabled together with the OTA demo. Otherwise, disable these configurations.

Building and Downloading

Refer to Quick Start to build and download. It is worth noting that:

  1. the developer need to generate the flash_map.ini according to the SDK\applications\lvgl\proj\flash_map.h.
  2. make sure to enable psram power. Other features can be configured as needed.
../../../../_images/fig_system_config1.png

system config enable psram power

  1. Building Keil MDK project, Generating App Image section:

    1. The LVGL SDK project path is SDK\applications\lvgl\proj.

    2. The Keil MDK project path is SDK\applications\lvgl\proj\mdk.

    3. After modifying the project configuration, you need to rebuild the project configuration for the changes to take effect. After the build, a completely new project file will be generated based on the configuration, replacing the original project file. If the developer manually added files or configurations to the original project, those modifications will become invalid and won’t be retained in the new project.

    4. To build the project, open a cmd window in the project path.

      Run the command scons --target=mdk5 to build the mdk project. Open the mdk project for compilation. The APP image will be generated in SDK\applications\lvgl\proj\mdk\bin.

      SDK\applications\lvgl\proj> scons --target=mdk5
      scons: Reading SConscript files ...
      ...
      CC xxxx.o
      CC xxxx.o
      ...
      LINK app.elf
      fromelf --bin app.elf --output rtthread.bin
      fromelf -z app.elf
      scons: done building targets.
      
    5. Open the generated Keil MDK project and click on “compile” to generate the app image. Refer to Generating App Image section.

  2. For downloading and programming methods, please refer to Images Download.

  3. Generating and downloading User Data: 1. LVGL project User Data packaging path: SDK\subsys\gui\gui_engine\example\screen_lvgl 2. External files used in the project need to be packaged as User Data for downloading. Open the project User Data packaging path and place the files to be packaged in the root\ folder. Double-click the mkromfs_0x4600000.bat script to generate the User Data file root(0x4600000).bin and the resource mapping address resource.h. 3. Use the MP Tool’ User Data function to download the root(0x4600000).bin file and download it to the address: 0x04600000.

Experimental Verification

GUI Testing

  1. After successfully flashing the firmware and UserData, switch the EVB to working mode and perform a reset to restart.

  2. After the device restarts, you will see LVGL benchmark demo is running, it witll display the current test case and progress in the top left corner of the screen, and show the current frame rate and CPU usage in the bottom right corner of the screen.

  3. There will be no log output and no touch screen interaction response until all test cases are completed. After completing all test cases, the test results will be displayed in logs and tables. You can scroll through the touch screen to browse the results.

../../../../_images/fig_benchmark.gif

LVGL UI Demo

Software Design introduction

This chapter provides an overview of the software-related technical specifications and behavior specifications for the RTL8772GWP LVGL solution.

Source Code Directory

  • Project directory: sdk\application\lvgl\proj

  • Source code directory: sdk\application\lvgl\src

Source files in LVGL application project are currently categorized into several groups as below.

└── Project: lvgl
    └── app                            includes the LVGL user application implementation
        ├── menu_config.h              project construct configurations
        ├── main.c
        └── lvgl_init.c                includes task and hardware init
    ├── lib
    ├── device
    ├── peripheral                     includes all peripheral drivers and module code used by the application
    ├── profile                        includes BLE profiles or services
    ├── dfu
    ├── dfu_task
    ├── LVGL                           includes all LVGL source
    ├── lcd_low_driver                 includes display pannel IC driver implementation
    ├── touch_driver                   includes touch IC driver implementation
    ├── hal_drivers
    ├── database
    ├── fs                              include file system implementation
    ├──  port_lvgl
        ├── lv_port_disp.c              includes LVGL display interface
        ├── lv_port_indev.c             includes LVGL input device interface
        ├── lvgl_demo.c                 includes LVGL demo, benchmark demo
        └── lv_port_fs.c                includes LVGL filesystem interface
    └── lvgl_assets                     includes user image and font C files
    :
    └── ble_ota_app                    includes ble ota demo implementation
    :
    └── ble_app                        includes ble simple peripheral demo implementation

Flash Layout

Application default flash layout header file: sdk\application\lvgl\proj\flash_map.h

Flash Layout

Example layout with a total flash size of 16 MB

Size(byte)

Start Address

Reserved

4K

0x04000000

OEM Header

4K

0x04001000

Bank0 Boot Patch

32K

0x04002000

Bank1 Boot Patch

32K

0x0400A000

OTA Bank0

2456K

0x04012000

  • OTA Header

4K

0x04012000

  • System Patch code

32K

0x04013000

  • BT Lowerstack Patch code

60K

0x0401B000

  • BT Host code

212K

0x0402A000

  • APP code

2148K

0x0405F000

  • APP Config File

0K

0x04278000

  • APP data1

0K

0x04278000

  • APP data2

0K

0x04278000

  • APP data3

0K

0x04278000

  • APP data4

0K

0x04278000

  • APP data5

0K

0x04278000

  • APP data6

0K

0x04278000

OTA Bank1

0K

0x04278000

Bank0 Secure APP code

16K

0x04278000

Bank0 Secure APP Data

0K

0x040AC000

Bank1 Secure APP code

0K

0x0427C000

Bank1 Secure APP Data

0K

0x0427C000

OTA Temp

2148K

0x0427C000

FTL

16K

0x04495000

APP Defined Section1

0K

0x04499000

APP Defined Section2

0K

0x04499000

Important

Software Architecture

The software architecture of the system is shown below:

../../../../_images/fig_swArch1.png

Software Architecture

  • Platform feature: Includes OTA, Flash, FTL and etc.

  • Peripheral driver: Provide application layer access to the interface of RTL87x2G peripherals.

  • OSIF: Abstraction layer for real-time operating systems.

  • GAP: Abstraction layer which user application communicates with BLE stack.

  • Application: The application layer contains user-defined application tasks.

Task and Priority

As shown below, 5 tasks have been created :

../../../../_images/fig_swTask1.png

System software architecture

The description of each task and its priority is shown in table:

Task and Priority

Task

Description

Priority

Timer

Implement the software timer required by FreeRTOS

6

Lower stack

Implement BT stack protocols below HCI

6

Upper stack

Implement BT stack protocols above HCI

5

GUI

Handling UI display and interaction

1

Idle

Run background tasks

0

Note

Multiple application tasks can be created, and memory resources should be allocated accordingly.

GUI Task

For LVGL UI design and development guidelines, please refer to the Use LVGL Design An Application

In this example project, the GUI default task is the LVGL benchmark demo, which tests and showcases the performance of LVGL in various scenarios on this platform, including frame rate and CPU load levels.

Most of the main configurations in LVGL are done in src\lvgl_port\lv_conf.h. This includes configuring display device size and color depth, stack interface configuration, etc. Developers can customize these configurations according to their needs.

  1. When developers need to change the display device, after completing the display device driver, they need to integrate the display device driver into LVGL’s display interface. Adapt the display device parameters in src\lvgl_port\lv_conf.h , and allocate a suitable frame buffer in src\lvgl_port\lv_port_disp.c . For more details, please refer to LVGL Display Porting.

In this example application, the display IC used does not have RAM, so two full-screen size frame buffers are allocated on the PSRAM for display. If the display IC used has RAM, the size of the frame buffer does not have to be the full-screen size. Configuration of LVGL_USE_EDPI in src\lvgl_port\lv_port_disp.c should be set to disable (0) to change the disp_flush function for screen refresh adaptation.

// lv_conf.h
/*====================
   COLOR SETTINGS
*====================*/
#define MY_DISP_HOR_RES    480
#define MY_DISP_VER_RES    480
/*Color depth: 1 (1 byte per pixel), 8 (RGB332), 16 (RGB565), 32 (ARGB8888)*/
#define LV_COLOR_DEPTH 16

// lv_port_disp.c
#define LV_PORT_BUF1        (uint32_t)0x08000000
#define LV_PORT_BUF2        (uint32_t)(0x08000000 + MY_DISP_HOR_RES * MY_DISP_VER_RES * LV_COLOR_DEPTH / 8)

void lv_port_disp_init(void)
{
   ...
   static lv_disp_draw_buf_t draw_buf_dsc_3;
   lv_color_t *buf_3_1 = (lv_color_t *)LV_PORT_BUF1;           /*A screen sized buffer*/
   lv_color_t *buf_3_2 = (lv_color_t *)LV_PORT_BUF2;           /*Another screen sized buffer*/
   lv_disp_draw_buf_init(&draw_buf_dsc_3, buf_3_1, buf_3_2,
                        MY_DISP_VER_RES * MY_DISP_HOR_RES);   /*Initialize the display buffer*/

   /*Set a display buffer*/
   disp_drv.draw_buf = &draw_buf_dsc_3;

   /*Required for Example 3)*/
   disp_drv.full_refresh = 1;
   ...
}
  1. When developers need to change the input device, after completing the input device driver, they need to integrate the input device driver into LVGL’s input interface. Select the appropriate input device type in src\lvgl_port\lv_port_indev.c, and connect the driver to the corresponding interface. For more details, please refer to LVGL Input Porting.

In this example application, a touchscreen is connected as the input device.

// lv_port_indev.c
void lv_port_indev_init(void)
{
   ...
   /*Register a touchpad input device*/
   lv_indev_drv_init(&indev_drv);
   indev_drv.type = LV_INDEV_TYPE_POINTER;
   indev_drv.read_cb = touchpad_read;
   indev_touchpad = lv_indev_drv_register(&indev_drv);
   ...
}

/*------------------
* Touchpad
* -----------------*/

static uint16_t touch_x = 0;
static uint16_t touch_y = 0;
static bool touch_pressing = 0;

/*Will be called by the library to read the touchpad*/
static void touchpad_read(lv_indev_drv_t *indev_drv, lv_indev_data_t *data)
{
   static lv_coord_t last_x = 0;
   static lv_coord_t last_y = 0;

   /* rt touch read port */
   if (drv_touch_read(&touch_x, &touch_y, &touch_pressing) == false)
   {
      return;
   }

   /*Save the pressed coordinates and the state*/
   if (touchpad_is_pressed())
   {
      touchpad_get_xy(&last_x, &last_y);
      data->state = LV_INDEV_STATE_PR;
   }
   else
   {
      data->state = LV_INDEV_STATE_REL;
   }

   /*Set the last pressed coordinates*/
   data->point.x = last_x;
   data->point.y = last_y;
}
/*Return true is the touchpad is pressed*/
// static lv_coord_t touch_x;
// static lv_coord_t touch_y;
static bool touchpad_is_pressed(void)
{
   /*Your code comes here*/
   return touch_pressing;
}

/*Get the x and y coordinates if the touchpad is pressed*/
static void touchpad_get_xy(lv_coord_t *x, lv_coord_t *y)
{
   /*Your code comes here*/
   (*x) = touch_x;
   (*y) = touch_y;
}
  1. When developers need customized resources such as images and fonts, LVGL provides corresponding tools support such as the LVGL Font Converter and LVGL Image Converter. Please refer to the official documentation on LVGL Font and LVGL Image for instructions on how to use these tools.

  2. For further development details regarding LVGL, please refer to the official documentation on LVGL Documentation

BLE Task

For the BLE_OTA_DEMO, please refer to OTA . For the BLE_PERIPHERAL_DEMO, please refer to LE Peripheral