How to create UI in LVGL

How-to
,
1

i want to create an UI my ESP32S3 which has an Amoled display connected to it. i am using LVGL version 8.4.0. i decided create an apps UI screen but i don’t where to create and how, can anyone please guide me.

2

Hi @Javid

Welcome to the forum!

Do you have any specific needs to use LVGL 8? If you don’t have and you are just starting out with LVGL I would recommend using the latest LVGL v9.

You have a few options to start out with LVGL. You can use the VSCode simulator: GitHub - lvgl/lv_port_pc_vscode
Using the simulator you dont have to worry too much about hardware setup. You can start creating your UI and test it on the PC.

Later when you want to run the UI in the ESP32-S3 display I would recommend getting some examples from Waveshare and start by display a Hello world label with LVGL. Then you just have to replace the hello world label with your UI.

Can you share the specific display board you are using?

3

@giobauermeister

Hi giobauermeister,

Thank you for the warm welcome and the suggestion! Based on your advice, I will definitely move forward with “LVGL v9”.

To provide more context, I am using the Waveshare ESP32-S3 1.75inch AMOLED Round Touch Display. My setup includes:

Display Driver: espressif__esp_lcd_sh8601 (QSPI, 466×466) Touch IC: waveshare__esp_lcd_touch_cst9217

I am currently using “SquareLine Studio” to design the UI, but I’ve hit a couple of roadblocks:

  1. Coordinate Mapping: When I deploy the project, the touch points are mirrored/rotated relative to the visual display. I’m looking for a way to fix this globally in the driver so that future SquareLine exports work seamlessly.
  2. Project Organization: To be honest, I’m feeling a bit overwhelmed by the folder structure. Between the ESP-IDF components, the LVGL library, and the SquareLine exported files, I am struggling to keep the project organized and it’s becoming quite frustrating.

Could you guide me on the best way to handle the coordinate mapping in LVGL v9? Also, any advice on a “best practice” folder structure for this specific hardware/software stack would be incredibly helpful.

Best regards, Jaavid

4

There is a new Wiki walking through LVGL + ESP32 on Seeed Studio that might be helpful to you: XIAO ESP32-S3 and LVGL Optimization Guide | Seeed Studio Wiki

You don’t have to follow the full tutorial that is walking through various optimizations, but the overall set up might help you get started.

5

This could be a good starting point:

6

Take a look here: waveshare/esp_lcd_touch_cst9217 • v1.0.4 • ESP Component Registry

You can fiddle with the swap and mirror flags and find the values that work for you:

        .flags = {
            .swap_xy = 0,
            .mirror_x = 0,
            .mirror_y = 0,
        },

This would change in the touch driver so you don’t need to change anything in LVGL or squareline code.

About Squareline project structure I suggest asking in Squareline forum: https://forum.squareline.io/

I would also suggest giving a try to LVGL Pro UI Editor. It will generate the best and ideal project structure.