Renesas

Integration guide for LVGL Pro Editor with Renesas development tools and e2studio IDE.

Integrate LVGL Pro Editor with Renesas development environments including e2 Studio IDE and VS Code extensions for streamlined UI development.

e2 Studio

Setup

First, download and install the LVGL Editor from lvgl.io/pro.

LVGL provides an e2 Studio plugin to facilitate working with LVGL projects. You can download it from this link.

To install the plugin in e2 Studio:

1. Extract the downloaded zip file to a folder on your computer.
2. Open e2 Studio.
3. Go to the menu: Help -> Install New Software...
4. Click on the "Add..." button.
5. In the dialog that appears, click on "Local..." and browse to the folder where you extracted the plugin.
6. Select the plugin folder, give the source a name (e.g. "LVGL Editor Launcher") and follow the prompts to complete the installation (approve any security warnings, accept the license agreement, and finish the installation).
7. Restart e2 Studio if prompted.

The plugin adds an LVGL Editor button to the toolbar, which launches the LVGL Editor as a separate application, outside of e2 Studio:

This will automatically open the Editor (if installed to the /Applications folder) on MacOS. On Linux and Windows, it will ask the user to browse for the install location of the Editor. Pick the Editor executable when prompted.

Usage

The LVGL Editor plugin will attempt to determine the currently active project in the IDE. It picks the first project that:

1. Contains a Renesas configuration.xml file in its root folder. Or
2. Pick the project to which the currently active file (in the code editor) belongs.

Upon first launching the LVGL Editor for a project, it will create a ui sub-folder for the LVGL project. Some of the LVGL configuration (such as target screen resolution) will be automatically derived from the Renesas configuration.xml. Subsequently launching the LVGL Editor, after the ui project has been created, will trigger it to re-scan the Renesas configuration.xml. If any of the LVGL-related config has changed, the LVGL Editor will ask if the user wishes to update the ui project configuration accordingly.

Once the LVGL Editor is open, you can create and edit LVGL XML files as usual. Use the Editor's export code functionality to generate C code, which E2Studio will automatically detect and include in its build.

Configuration

LVGL Pro projects rely on two LVGL features that need to be enabled in src/lv_conf_user.h:

#define LV_USE_OBJ_NAME 1
#define LV_USE_TRANSLATION 1

Loading the UI

Once the UI is created you need to initialize it and create the screens:

/* Standard LVGL initialization */
lv_init();
lv_port_disp_init();
lv_port_indev_init();

/* Initialize the UI generated from the LVGL Editor */
ui_init();

/* (replace "my_screen" with the actual name of your main screen) */
lv_obj_t * my_screen = my_screen_create();
lv_screen_load(my_screen);