Hello everyone, I am Pi Zi Heng. Today, I will share the steps for quickly creating a new LCD screen example project using NXP’s GUI Guider.
In my previous article, “How to Quickly Light Up a New LCD Screen on i.MXRT1170: Methods and Steps,” I introduced how to modify the official SDK bare-metal driver elcdif example project to support a new LCD screen. That article mainly focused on the low-level adaptation changes for the LCD driver IC. Today, we will attempt to quickly create an example project for this LCD screen (KD050FWFIA019-C019A produced by Shenzhen Kodak Electronics) under the LVGL framework using the NXP GUI Guider tool.
1. Introduction to GUI Guider
LVGL is an open-source and free GUI framework library suitable for various embedded platforms and displays, with its first version open-sourced on GitHub in 2016. We know that a significant amount of work in embedded GUI application development lies in the design of the UI interface. A mature GUI framework usually comes with a corresponding UI interface editing tool, but LVGL has been relatively lacking in UI tools until early 2022 when the official team collaborated with a third-party company to launch SquareLine Studio. Unfortunately, as of February 2024, LVGL has ended its collaboration with SquareLine Studio.
As an official partner of LVGL, NXP has invested considerable effort in supporting LVGL. Due to the lack of official UI tools, NXP developed the GUI Guider tool (the first version was released in early 2021). With the drag-and-drop editor of GUI Guider, many features of LVGL, such as widgets, animations, and styles, can be easily enabled with minimal or no code.
- GUI Guider download link: https://www.nxp.com/design/design-center/software/development-software/gui-guider:GUI-GUIDER
GUI Guider supports many NXP MCU development boards and some officially designated LCD screens. The generated example project’s underlying code is also based on the official SDK. The software version correspondence can be found in the tool’s menu under Help -> Release Note:
2. Creating a Project in GUI Guider
I have installed the latest GUI Guider v1.7.0-GA. Let’s open this tool to create an initial project. The first two steps are to select the LVGL version (v7/v8) and the MCU board (if it is a custom board, just select the correct MCU model). Here, I chose LVGL v8 and MIMXRT1170-EVKB.
In the third step, when selecting a template, there are four options: EmptyUI is a completely blank interface, Widget includes some typical simple interface templates, Application consists of some complex comprehensive application interface templates, and Local Projects allows importing existing user project interface templates. Since this is just a simple example, I chose EmptyUI:
The fourth step (also the last step of project creation) is to set the LCD screen properties. Since we are using a new screen, we need to select Custom in the Panel Type and manually enter the screen name (which will generate the corresponding macro DEMO_PANEL_KD050FWFIA019 in the code) and dimensions. Finally, click the Create button to generate the initial project.
- Note: The LCD screen dimensions (width and height) set here cannot be changed after the project is generated.
3. Designing the Interface in GUI Guider
Now we are at the main GUI design interface. Since this is just a simple example, we can randomly drag a Label control and write “Hello World” to complete the interface design. Once the interface design is complete, click Generate Code -> C in the upper right corner to generate the corresponding C code for the interface construction.
4. Modifying the MCU Project’s Underlying Driver
Now let’s open the file path specified for the created GUI project and find the following project directory. The file rt1170_qsg_proj.guiguider is the GUI design project file, and the first-level directory contains folders related to the GUI (\generated stores the resource files for the font controls generated by the tool, and \custom can be used to add user interface response logic code). The \sdk folder contains the final MCU project (supporting MCUX/IAR/MDK/GCC).
Since GUI Guider has already aggregated all the required source files in this directory, we do not need to download any additional software packages. At this point, you can choose your preferred IDE for further development. I often use IAR, so I opened the \GUI-Guider-Projects\rt1170_qsg_proj\sdk\iar\lvgl_guider_cm7.eww project.
- Note: Except for the MCUX project, which can select the official SDK version during import, the SDK versions for other IDEs are fixed. If you need a different SDK version, you must manually update the files in \GUI-Guider-Projects\rt1170_qsg_proj\sdk\Core.
Currently, all MCU projects generated by GUI Guider are FreeRTOS versions, and no bare-metal version is provided. Whether the project is based on RTOS does not affect our ability to port the driver for the new LCD screen. Following the steps in my previous article, “How to Quickly Light Up a New LCD Screen on i.MXRT1170: Methods and Steps,” we will place all modifications to elcdif_support.c/h into display_support.c/h and add fsl_ili9806e.c/h files to the lvgl_guider_cm7 project to complete the task.
Additionally, since that article only covered the display and did not involve the touch IC driver, we do not need to consider enabling touch functionality for now, and we can comment out the call to the DEMO_InitTouch() function.
\GUI-Guider-Projects\rt1170_qsg_proj\sdk\Core\board\display_support.c
\GUI-Guider-Projects\rt1170_qsg_proj\sdk\Core\board\display_support.h
\GUI-Guider-Projects\rt1170_qsg_proj\sdk\Core\video\fsl_ili9806e.c
\GUI-Guider-Projects\rt1170_qsg_proj\sdk\Core\video\fsl_ili9806e.h
Power the board, connect the new screen KD050FWFIA019, compile and download the modified lvgl_guider_cm7 project, and you will see the LVGL version of “Hello World” displayed correctly:
Thus, the steps for quickly creating a new LCD screen example project using NXP’s GUI Guider have been introduced.
END
Source: Pi Zi Heng Embedded
Copyright belongs to the original author. If there is any infringement, please contact for deletion.
▍Recommended Reading
Sharing an Embedded Data Visualization Tool
The Eight Realms of Programmers, Which Level Are You At?
I Used This Technology to Eliminate Thousands of Lines of If-Else!
→ Follow for More Updates ←