LVGL + ESP32 в Arduino IDE: от настройки до создания графического интерфейса

После установки проверьте примеры: Файл → Примеры → LVGL → lvgl_demo_widgets. Но не спешите компилировать! Сначала нужно настроить конфигурацию.

Установить Arduino IDE 1.8.19+|Установить библиотеку LVGL 8.3+|Установить драйвер дисплея (TFT_eSPI/Adafruit_GFX)|Скачать lvgl_esp32_drivers|Настроить параметры в lv_conf.h-->

3. Конфигурация LVGL для ESP32: что обязательно изменить?

Файл lv_conf.h — сердце настройки LVGL. По умолчанию он оптимизирован для ПК, а не для микроконтроллеров. Вот критические параметры, которые нужно изменить для ESP32:

Особое внимание уделите настройке LV_DISP_DEF_REFR_PERIOD. При значении 30 интерфейс будет обновляться 30 раз в секунду, но на ESP32 это часто приводит к подёргиваниям. Оптимальное значение — 16 (60 FPS), но для сложных виджетов может потребоваться увеличить до 30.

Также добавьте в platformio.ini (или настройте в Arduino IDE) следующие флаги компилятора для оптимизации:

build_flags =
-D LV_CONF_INCLUDE_SIMPLE
-D LV_COLOR_DEPTH=16
-D LV_TICK_CUSTOM
-D LV_TICK_CUSTOM_INCLUDE="lvgl_esp32_drivers.h"
-D LV_TICK_CUSTOM_SYS_TIME_EXPR=(uint32_t)(esp_timer_get_time() / 1000LL)

⚠️ Внимание: Если вы используете TFT_eSPI, обязательно отключите в lv_conf.h параметр LV_USE_LOG (установите в 0). Логирование занимает до 10% процессорного времени на ESP32 из-за медленной работы Serial.

4. Подключение дисплея к ESP32: схемы и нюансы

Выбор дисплея определяет не только внешний вид интерфейса, но и производительность системы. Рассмотрим три популярных варианта:

4.1. ILI9341 (320×240, SPI)

Самый распространённый TFT-дисплей для ESP32. Подключается по SPI, но требует правильной настройки пинов для максимальной скорости:

• 🔌 SPI-шины: Используйте VSPI (пины GPIO 18-23), так как HSPI конфликтует с flash-памятью.
• ⚡ Тактирование: Установите частоту SPI на 40 МГц (максимум для ILI9341).
• 🔄 DMA: Включите в TFT_eSPI опцию #define SPI_FREQUENCY 40000000 и #define SPI_READ_FREQUENCY 20000000.

4.2. ST7789 (240×240, SPI)

Более современная альтернатива ILI9341 с лучшей цветопередачей. Главный нюанс — требует корректной инициализации регистра 0x36 (ориентация экрана). Пример кода для настройки:

tft.init(240, 240, SPI_MODE2);
tft.setRotation(2); // Повернуть на 180 градусов, если изображение перевёрнуто
tft.writecommand(0x36);
tft.writedata(0x70); // Режим отображения: RGB (не BGR!)

4.3. SSD1306 (OLED, 128×64, I2C)

Идеален для проектов с ограниченным энергопотреблением. Подключается по I2C, но имеет ограничение: LVGL не поддерживает аппаратное ускорение для монохромных дисплеев. Решение — использовать программный рендеринг с буфером в 1 КБ:

#define LV_COLOR_DEPTH=1  // Монохромный режим
#define LV_DISP_BUF_SIZE (128 * 8)  // Буфер на 1 строку экрана

Для всех дисплеев обязательно проверьте напряжение питания! ILI9341 и ST7789 требуют 3.3В, а подключение к 5В выведет их из строя. Для SSD1306 допустимо 5В на пине VCC, но логические уровни (SDA/SCL) должны быть 3.3В.

5. Оптимизация производительности: как ускорить LVGL на ESP32?

Даже после правильной настройки LVGL может тормозить. Вот 5 практических способов ускорить работу:

• 🧠 Двухъядерный рендеринг: Перенесите обработку LVGL на второе ядро ESP32 с помощью xTaskCreatePinnedToCore. Пример:

  xTaskCreatePinnedToCore(
  lvgl_task,   // Функция с циклом lv_timer_handler()
  "LVGL",      // Имя задачи
  4096,        // Размер стека
  NULL,        // Параметры
  2,           // Приоритет
  NULL,        // Хендлер задачи
  1            // Ядро 1 (второе ядро)
  );

• 🖼️ Уменьшение буфера кадра: Вместо полноэкранного буфера используйте буфер на 1/4 экрана:

  #define LV_DISP_BUF_SIZE (LV_HOR_RES_MAX * 60)  // Буфер на 60 строк

• 🎨 Отключение ненужных виджетов: В lv_conf.h отключите неиспользуемые элементы:

  #define LV_USE_ARC       0
  #define LV_USE_CALENDAR  0
  #define LV_USE_CHART     0  // Если не нужны графики

Ещё один эффективный приём — кэширование статических элементов. Если у вас есть неизменяемые части интерфейса (например, фоновое изображение), рендерите их один раз в setup() и сохраняйте в отдельный буфер:

LV_IMG_DECLARE(background_img);
lv_obj_t *bg = lv_img_create(lv_scr_act(), NULL);
lv_img_set_src(bg, &background_img);
lv_obj_set_pos(bg, 0, 0);

⚠️ Внимание: При использовании Wi-Fi/Bluetooth вместе с LVGL отключите автоматическое обновление экрана в цикле loop(). Вместо этого обновляйте экран по таймеру или событию:

void loop() {
lv_task_handler();  // Обработка событий LVGL
delay(5);            // Задержка для освобождения CPU
}

6. Типичные ошибки и их решения

Даже опытные разработчики сталкиваются с проблемами при интеграции LVGL и ESP32. Вот топ-5 ошибок и их решения:

#define LV_USE_INDEV 1
#define LV_INDEV_DEF_READ_PERIOD 20

Особенно коварна ошибка с Hardware Watchdog. Она проявляется спонтанно, когда LVGL пытается отрендерить сложный виджет (например, lv_chart с 100 точками). Решение — разбить рендеринг на части с помощью lv_refr_now:

for (int i = 0; i < 100; i++) {
lv_chart_set_next(chart, series, data[i]);
if (i % 10 == 0) lv_refr_now(NULL);  // Принудительный рендеринг каждые 10 точек
}

7. Практический пример: создаём дашборд с графиками

Рассмотрим создание простого дашборда с отображением данных с датчиков (например, температуры и влажности). Полный код проекта доступен здесь.

Шаги реализации:

1. Создайте экран и добавьте на него график:

   lv_obj_t *chart = lv_chart_create(lv_scr_act(), NULL);
   lv_chart_set_range(chart, 0, 100);  // Диапазон значений
   lv_chart_set_type(chart, LV_CHART_TYPE_LINE);
   lv_chart_series_t *series = lv_chart_add_series(chart, LV_COLOR_RED);

2. Добавьте метки и стили:

   lv_obj_set_size(chart, 200, 150);
   lv_chart_set_div_line_count(chart, 5, 5);  // Сетка 5×5
   lv_chart_set_point_count(chart, 30);      // 30 точек на графике

3. Обновляйте данные в цикле loop():

   void loop() {
   static uint32_t last_ms = 0;
   if (millis() - last_ms > 1000) {  // Обновление раз в секунду
   last_ms = millis();
   float temp = readTemperature();
   lv_chart_set_next(chart, series, temp);
   lv_refr_now(NULL);
   }
   lv_task_handler();
   }

Для отображения текстовой информации (например, текущих значений) используйте lv_label:

lv_obj_t *label = lv_label_create(lv_scr_act(), NULL);
lv_label_set_text_fmt(label, "Temp: %.1f°C", temp);
lv_obj_align(label, chart, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);

lv_anim_t a;
lv_anim_init(&a);
lv_anim_set_var(&a, series);
lv_anim_set_exec_cb(&a, (lv_anim_exec_xcb_t)lv_chart_set_series_color);
lv_anim_set_values(&a, LV_COLOR_RED, LV_COLOR_BLUE);
lv_anim_set_time(&a, 1000);  // Длительность 1 секунда
lv_anim_start(&a);

FAQ: ответы на частые вопросы

#define LV_INDEV_DEF_READ_PERIOD 100  // Опрашивать раз в 100 мс

#define LV_DISP_BUF_SIZE (LV_HOR_RES_MAX * 20)  // Буфер на 20 строк
#define LV_MEM_SIZE (16U * 1024U)                 // 16 КБ для LVGL