Basic LVGL interface with EEZ-Studio
2 screen interface control
Create EEZ Project
First things first, we need to choose which template to use for the project. For that, we have to decide what kind of internal flow we want for the interface.
I supose that you have been installed eex-studio
A good example of this is how you want to handle screen transitions via buttons—whether you want to manage that manually or let EEZ take care of it for you.
For this post, I’ll go with the second option: I’ll let EEZ handle the screen transitions.
LVGL Version
This is an important choice, especially because the idea is to run the interface on an ESP32. Therefore, we must take the version into account and use 8.x to ensure compatibility.
You can try with 9.x if you’re feeling adventurous, but I wouldn’t risk it.
Project Settings
The key settings are: screen dimensions, and code generation settings (especially useful to save time when integrating into existing ESP-IDF code).
Screen Dimensions
We set the width and height of the screen— for our Lilygo-T-display-S3, we select 320x170.
Build
These settings depend more on the codebase into which the UI will be integrated. In our case, we’ll assume the common ESP-IDF scenario.
That is, we added LVGL as a component from the Espressif Component Registry using the VS Code extension. That’s important, because in this setup, when we import LVGL, we do it as #include "lvgl.h".
With that in mind, the LVGL include option in EEZ should match that import format. If your setup differs, you’ll need to change it accordingly (e.g., lvgl/lvgl.h).
Files
There’s no need to modify the generated files.
The interface of the program is similar to any other drag-and-drop, property-based UI development IDE.
Create the Screens
In the pages panel, use the + button to add as many screens as you want— in this case, 2.
You can edit both the names and physical properties of the screens in the properties panel on the right.
The name is especially important if you want to access the screen via raw code. So, as with all elements, it’s good practice to use descriptive names.
Graphical Elements
I won’t go into detail on properties, events, etc., or this post would turn into a novel. So I invite you to experiment on your own.
Adding widgets is as simple as going to the widget panel (bottom-right) and dragging whatever you want into place.
Using Buttons
Let’s add 1 button to page 1.
Styling the button is trivial. What’s more interesting is how to handle events— we’ll cover both interface flow actions and calling custom functions.
Page Change Event
This is the kind of action we’ll delegate to EEZ to manage the interface logic.
1. Add an Action
From the Actions tab, drag an LVGL block to the workspace.
Now simply drag a connection from the button to the action block.
2. Configure the Action
As usual, we’ll use the panel on the right to configure the properties.
Now we tell it to change the screen by adding a new action under Specific.
A pop-up will appear showing all the available actions for graphic elements. We choose Screen > Change Screen.
Then, we configure the parameters of that action.
We specify the target screen, along with animation-related options.
Event for Any Custom Function
Of course, we don’t just want to handle UI logic— we might want to run our own functions, like printing to the serial monitor or communicating with a server. For that, go back to the button’s Properties panel.
Now we’ll work with a button placed on screen 2.
Add a new event, and complete the pop-up as needed.
Event
Choose which event to trigger on— in this case, PRESSED, so the function runs when the button is pressed.
Handler type
Choose between Flow and Action. We want Action.
Now choose which “action” (i.e., function name) to associate with the button. In the image it’s hello_text, and the function could look like this in your code:
extern void action_hello_text(lv_event_t * e){
ESP_LOGI("EEZ", "Hello from action_hello_text!");
}```
> If you haven’t registered any actions yet and the list is empty, click `New Action` and enter the desired function name.
These functions are declared in the `actions.h` file that EEZ generates at build time. We’ll talk more about the generated code in another post.
##### actions.h
```c
#ifndef EEZ_LVGL_UI_EVENTS_H
#define EEZ_LVGL_UI_EVENTS_H
#include <lvgl.h>
#ifdef __cplusplus
extern "C" {
#endif
extern void action_hello_text(lv_event_t * e);
#ifdef __cplusplus
}
#endif
#endif /*EEZ_LVGL_UI_EVENTS_H*/
Simulation
Even though we’re designing the interface for Lilygo, we can use simulation to test animations and visuals. Just click the Run button.
