LVGL (Light and Versatile Graphics Library) este o biblioteca open-source pentru interfete grafice (GUI) folosite pe dispozitivele embedded cu resurse limitate precum microcontrollerele. Are suportul necesar pentru a crea interfete grafice moderne si interactive cum gasim si pe smartphone-uri.

Site-ul oficial

• Biblioteca de widget-uri: butoane, label-uri, slider-e, meniuri, checkbox-uri, chart-uri, imagini si animatii, tastaturi
• Eficienta randarii, foloseste “dirty area tracking” pentru a redesena doar acele portiuni din ecran care au fost modificate
• Abstractie hardware (HAL): foloseste un nivel intermediar de acces al display-ului si al dispozitivelor de intrare (touchscreen)
• Este usoara - consum redus de memorie si procesor (Flash: ~100–200 KB, RAM: ~10–50 KB)
• Este portabila - funcționeaza pe multe platforme (MCU-uri, Linux embedded, RTOS-uri).
• Are simulator pentru Windows si Linux pentru a usura procesul de development (il vom folosi si noi astazi)

Structura LVGL poate fi impartita in 3 mari componente.

+-----------------------------+
|         Application         |
|  (Your GUI logic & widgets) |
+-----------------------------+
|          LVGL Core          |
|   Drawing, events, objects  |
+-----------------------------+
| Display & Input Interfaces  |
|  (Drivers for LCD, touch)   |
+-----------------------------+
|        Hardware / OS        |
|   (ESP32, NuttX, FreeRTOS)  |
+-----------------------------+

• Aplicatia principala
• Nucleul LVGL
• Drivere

Nuttx are deja inclusa biblioteca LVGL in subsistemul grafic. Config-ul folosit astazi are deja componenta LVGL activat, dar mentionam aici setarile din config care trebuie activate daca veti avea nevoie sa folositi un alt config.

make menuconfig
→ Graphics Support → LVGL graphics library = [Y]
→ Graphics Applications → LVGL Demo Widgets = [Y]
→ Board Selection → Enable LCD or SPI display driver

Smartwatch-ul Hacktorwatch are integrate LCD-ul … si senzorul touchscreen CST816S. Display-ul foloseste protocolul SPI pentru a comunica cu board-ul ESP32, folosind urmatorul pinout.

| Signal | Description  | ESP32 GPIO   |
| -----: | ------------ | ------------ |
|   MOSI | Data to LCD  | e.g. GPIO 23 |
|   SCLK | Clock        | e.g. GPIO 18 |
|     CS | Chip select  | e.g. GPIO 5  |
|     DC | Data/Command | e.g. GPIO 21 |
|    RST | Reset        | e.g. GPIO 22 |
|     BL | Backlight    | optional     |

Pentru a usura munca developerilor, LVGL a fost portat pe Linux (lv_port_linux unde poate rula cu mai multe backend-uri (e.g. Wayland, X11). Pentru a compila proiectul, instalati urmatoarele pachete.

sudo apt install cmake libpkgconfig-perl libwayland-dev wayland-protocols

Clonati repository-ul

git clone https://github.com/lvgl/lv_port_linux.git
cd lv_port_linux/
git submodule update --init --recursive

Si compilati proiectul

cmake -B build -DCONFIG=wayland
cmake --build build -j$(nproc)

Deschideti aplicatia

./build/bin/lvglsim

Urmatorul ecran va fi afisat

Copiati codul oferit ca suport pentru acest laborator peste cel original din simulator si recompilati. Un ecran cu un cerc de dimensiunea 240×240 pixeli va fi afisat, iar in interior vom avea timpul curent, un checkbox pentru a activa modul de noapte si un contor care va numara pasii.

cp ~/Downloads/main.c.txt src/main.c
cmake --build build -j$(nproc)
./build/bin/lvglsim

Recomandam sa rulati exercitiile 3, 4 si 5 pe simiulator, iar apoi pe ceas.

Folositi config-ul hacktorwatch:lvgl pentru acest laborator. In acest config aplicatia HacktorWatch (CONFIG_HACKTORWATCH_REV2) este activata in mod implicit. Compilati suportul de laborator si incarcati noua imagine pe ceas, iar apoi deschideti aplicatia “hacktorwatch” din linie de comanda.

/tools/configure.sh -l hacktorwatch:lvgl
cp ~/Downloads/hacktorwatch_main.c.txt nuttx-apps/hacktorwatch-rev2/main/hacktorwatch_main.c
cd nuttx
make flash ESPTOOL_PORT=/dev/ttyACM0 ESPTOOL_BAUD=115200 ESPTOOL_BINDIR=../esp32s3-bins -j$(nproc)

• Activati CONFIG_INPUT_CST816S pentru a activa driver-ul de touchscreen. Ceasul HacktorWatch foloseste chip-ul Hynitron CST816S pentru touchscreen, iar driver-ul va crea intrarea ”/dev/input0” pe care biblioteca LVGL o va folosi.

• Activati LV_USE_NUTTX_TOUCHSCREEN pentru ca LVGL sa fie compilat cu suport de touchscreen

• Din cauza unui bug, codul de touchscreen din LVGL citeste in continuu date de la driver-ul de touchscreen. Aplicati urmatoarea modificare in fisierul nuttx-apps/graphics/lvgl/lvgl/src/drivers/nuttx/lv_nuttx_touchscreen.c. Prin aceasta modificare, vom lasa codul de LVGL sa opreasca procesarea in momentul cand degetul este luat de pe touchscreen.

  --- ./graphics/lvgl/lvgl/src/drivers/nuttx/lv_nuttx_touchscreen.c    2024-10-24 21:45:11.000000000 +0300
  +++ ./graphics/lvgl/lvgl/src/drivers/nuttx/lv_nuttx_touchscreen.c       2025-08-10 20:04:58.486933763 +0300
  @@ -146,7 +146,11 @@
           /* Save last sample and let lvgl continue reading */
           touchscreen->last_sample = sample;
           touchscreen->has_last_sample = true;
  -        data->continue_reading = true;
  +
  +        if (sample.point[0].flags & TOUCH_DOWN)
  +            data->continue_reading = true;
  +        else
  +            data->continue_reading = false;
       }
       else {
           /* No more sample available, clear last sample flag */

Momentan, la fiecare click pe checkbox-ul “Night Mode” nu se va intampla nimic, deoarece handler-ul de eveniment nu este inregistrat. Adaugati urmatoarea linie (cea cu +, dar scoateti plusul) in locul unde este creat checkbox-ul

    lv_obj_add_state(cb_night_mode, 0);
    lv_obj_align(cb_night_mode, LV_ALIGN_LEFT_MID, 0, -30);
+   lv_obj_add_event_cb(cb_night_mode, cb_night_mode_event_handler, LV_EVENT_ALL, NULL);

Pentru ca checkbox-ul este foarte mic iar precizia touchscreen-ului mica, putem mari dimensiunea checkbox-ului cu urmatoarele linii

+   lv_obj_set_style_pad_left(cb_night_mode, 20, LV_PART_INDICATOR);
+   lv_obj_set_style_pad_right(cb_night_mode, 20, LV_PART_INDICATOR);
+   lv_obj_set_style_pad_top(cb_night_mode, 20, LV_PART_INDICATOR);
+   lv_obj_set_style_pad_bottom(cb_night_mode, 20, LV_PART_INDICATOR);

Verificati ca background-ul ecranului devine mai inchis in momentul activarii checkbox-ului.

In functia main(), adaugati urmatoarele linii

    hacktorwatch_init_watch_face();
+
+   /* Update clock each second */
+   lv_timer_create(update_clock, 1000, NULL);

    while (1)

In mod normal pasii ar fi numarati in urma evenimentului primit de la senzorul de miscare, dar pentru asta este nevoie de un algoritm care sa ruleze si sa detecteze miscarea. In laboratorul de astazi vom simula detectia pasilor cu un timer care se activeaza la fiecare jumatate de secunda.

    /* Update clock each second */
    lv_timer_create(update_clock, 1000, NULL);
+
+   /* Update the steps */
+   lv_timer_create(update_steps, 500, NULL);
    
    while (1)

In mod implicit, frecventa de lucra a protocolului de comunicare SPI folosit intre placa ESP32S3 si LCD este de 40Mhz. Observam o imbunatatire a rate de refresh a LCD-ului daca marim frecventa la 60Mhz

--- arch/xtensa/src/esp32s3/esp32s3_spi.c
+++ arch/xtensa/src/esp32s3/esp32s3_spi.c
@@ -90,7 +90,7 @@
 
 /* SPI default frequency (limited by clock divider) */
 
-#define SPI_DEFAULT_FREQ  (400000)
+#define SPI_DEFAULT_FREQ  (600000)
 
 /* SPI default width */

• https://lvgl.io
• https://docs.lvgl.io/master/examples.html