There are two main methods for importing a project from GUI Guider to MCUXpresso:
- Linking the whole GUI Guider project into MCUXpresso.
- Copying and replacing the GUI on a pre-built LVGL project on MCUXpresso (like the "lvgl_guider" SDK example code).
Although the first method is quite convenient, there are times when a user might have a GUI already on an established project. In this case, the second method might be very useful.
However, when trying to add lottie widgets to a GUI of an already established project (like the "lvgl_guider" SDK example code), extra steps are required, as this widget uses a proprietary library from Samsung which requires extra steps to add and enable.
This document describes the steps needed to add rlottie widgets to a project that is already established in MCUXpresso. GUI Guider 1.8.0, MCUXpresso v11.10.0 and SDK 2.16.000 were used for this document, although the process should be the same for future versions.
Once the Lottie widget has been added to the GUI on GUI Guider, you will want to follow the common steps to import this GUI into the MCUXPresso project.
- Replace the "custom" and "generated" folders on the MCUXpresso project with the GUI Guider folders:
- <GUI Guider Project Installation>\custom.
- <GUI Guider Project Installation>\generated.
TIP: You can open the default location of the MCUXpresso project on the file explorer by selecting the project, opening the "Show In" window by pressing Alt + Shift + W, and selecting "System Explorer":
TIP: You can open the default location of the GUI Guider project on the file explorer by clicking on the green folder icon on the top menu bar:
- Copy the "lib" folder from: <GUI Guider Project Installation>\lib into the MCUXpresso project.
- Copy the "rlottie" folder from: <GUI Guider Project Installation>\sdk\core\rlottie into the MCUXpresso project.
That’s it for file management. Now, in MCUXpresso:
- Include the "lib" and "rlottie" folders as source folders by adding their path under:
- Project properties > C/C++ General > Paths and Symbols > Source Location.
- Include the rlottie folder as include path by adding its path under the following two compilers' include paths:
- Project properties > C/C++ Build > Settings > MCU C++ Compiler > Includes > Include Paths.
- Project properties > C/C++ Build > Settings > MCU C Compiler > Includes > Include Paths.
- As mentioned on the LVGL documentation for "Rlottie player", we need to add the "-rlottie" flag to the linker, but also link the rlottie library (librlottie.a) to the project. This is done by setting the following on Project Properties > C/C++ Build > Settings > MCU C++ Linker > Libraries:
- Finally, enable the macro definition: #define LV_USE_RLOTTIE 1 under the "lv_conf.h" file on "source" to tell LVGL that we are using the rlottie library.
With these steps, the rlottie application was imported, along with its headers and libraries, and this rlottie feature was enabled by linking them to the build configuration. Because of this, the application compiles without any errors. Great!
Note: There's a possibility that the following error shows up when compiling:
If this is the case, simply change the following macro in "source" > "lv_conf.h" from '0' to '1' to enable user data in the lv_font_t variable type:
However, when executing the application, the screen goes black. Turns out, as soon as the application tries to execute the first rlottie instruction from the ".a" archived library, it is unable to execute anything, which causes the application to halt and get stuck on a black screen. This happens as soon as the application calls line 113 of the "lv_rlottie.c" file to construct the rlottie widget: (This file is under <project folder>\lvgl\lvgl\src\extra\libs\rlottie)
But there was no issue when building the application, so what gives?
Well, the Rlottie library is quite memory heavy, so we also need to provide it with memory according to its requirements. We can do this by increasing the heap and stack size from their "default" state to something like 0x800000 for the stack and 0x1000 for the heap. These values are what GUI Guider provides to its projects when using Rlottie widgets.
With this, the MCUXpresso project will now have the rlottie libraries enabled, and also have enough memory to successfully debug/run the project on the i.MX RT board.
Happy "Lottie-ing"!
Edwin.
