Перейти к содержанию
Материалы раздела

LVGL

Модуль для работы с графической библиотекой LVGL (Light and Versatile Graphics Library). Позволяет создавать графические интерфейсы на дисплеях, подключенных к ESP32.

lvgl.init(type, spi_id, swap, hor_res, ver_res [, fillcolor, input, gpio, cs_pin, backlight_pin, tp_spi_id, tp_cs_pin, rotation, double_buffer])

Инициализирует LVGL и дисплей.

Аргументы:

  • type: тип дисплея (1 - ILI9341, 3 - NeoPixel)
  • spi_id: номер SPI порта
  • swap: swap цветов (0 - для NeoPixel, 1 - для ILI9341)
  • hor_res: горизонтальное разрешение
  • ver_res: вертикальное разрешение
  • fillcolor (опционально): цвет фона (по умолчанию 0x000000)
  • input (опционально): включить тачскрин (1 - да)
  • gpio: GPIO пин (для NeoPixel)
  • cs_pin: пин CS дисплея
  • backlight_pin: пин подсветки
  • tp_spi_id: SPI порт тачскрина
  • tp_cs_pin: пин CS тачскрина
  • rotation (опционально): поворот экрана (0, 90, 180, 270)
  • double_buffer (опционально): двойная буферизация (0 или 1)
local lv = require("lv")

-- Инициализация ILI9341 дисплея 320x240
lv.init(1, 2, 1, 320, 240, 0x000000, 1, 0, 5, 4, 2, 15, 0, 0)

lvgl.fill(color)

Заливает экран указанным цветом.

Аргументы:

  • color: цвет в формате 0xRRGGBB
lv.fill(0x000000)  -- черный
lv.fill(0xFFFFFF)  -- белый
lv.fill(0xFF0000)  -- красный

lvgl.label([parent], text [, color, align, x_off, y_off, font])

Создает текстовую метку.

Аргументы:

  • parent (опционально): родительский объект
  • text: текст метки
  • color (опционально): цвет текста (по умолчанию 0xFFFFFF)
  • align (опционально): выравнивание (по умолчанию CENTER)
  • x_off (опционально): смещение по X
  • y_off (опционально): смещение по Y
  • font (опционально): шрифт (userdata)

Возвращает: объект lvgl.obj

-- Простая метка в центре
local label = lv.label(nil, "Hello World")

-- Метка с параметрами
local label = lv.label(nil, "Status", 0x00FF00, lv.ALIGN_TOP_MID, 0, 10)

lvgl.button([parent], w, h [, bgcolor, text, textcolor, align, x_off, y_off, callback])

Создает кнопку.

Аргументы:

  • parent (опционально): родительский объект
  • w: ширина
  • h: высота
  • bgcolor (опционально): цвет фона (по умолчанию 0x0000FF)
  • text (опционально): текст на кнопке
  • textcolor (опционально): цвет текста (по умолчанию 0xFFFFFF)
  • align (опционально): выравнивание
  • x_off (опционально): смещение по X
  • y_off (опционально): смещение по Y
  • callback (опционально): функция обратного вызова при нажатии

Возвращает: объект lvgl.obj

-- Простая кнопка
local btn = lv.button(nil, 100, 50, 0x0000FF, "Click me")

-- Кнопка с callback
local btn = lv.button(nil, 100, 50, 0x00FF00, "OK", 0xFFFFFF,
    lv.ALIGN_CENTER, 0, 0, function()
        print("Button clicked!")
    end)

lvgl.card([parent], w, h [, bgcolor, bordercolor, opacity, align, x_off, y_off])

Создает карточку (контейнер с фоном и рамкой).

Аргументы:

  • parent (опционально): родительский объект
  • w: ширина
  • h: высота
  • bgcolor (опционально): цвет фона
  • bordercolor (опционально): цвет рамки
  • opacity (опционально): прозрачность
  • align (опционально): выравнивание
  • x_off (опционально): смещение по X
  • y_off (опционально): смещение по Y

Возвращает: объект lvgl.obj

local card = lv.card(nil, 200, 100, 0x333333, 0x666666, lv.OPA_COVER)

lvgl.object([parent], w, h [, align, x_off, y_off])

Создает пустой объект-контейнер без стилей.

local container = lv.object(nil, 100, 100, lv.ALIGN_CENTER, 0, 0)

lvgl.image([parent], path [, zoom, angle, color, align, x_off, y_off])

Создает изображение из файла.

Аргументы:

  • parent (опционально): родительский объект
  • path: путь к файлу изображения
  • zoom (опционально): масштаб
  • angle (опционально): угол поворота
  • color (опционально): цвет перекраски
  • align (опционально): выравнивание
  • x_off (опционально): смещение по X
  • y_off (опционально): смещение по Y
local img = lv.image(nil, "S:/icons/logo.png")
local img = lv.image(nil, "S:/icons/icon.png", 256, 0, -1, lv.ALIGN_TOP_LEFT, 10, 10)

lvgl.gif([parent], path [, zoom, angle, align, x_off, y_off])

Создает анимированное GIF изображение.

local gif = lv.gif(nil, "S:/anim/loading.gif")

lvgl.qr([parent], data, size [, bgcolor, fgcolor, align, x_off, y_off])

Создает QR-код.

Аргументы:

  • parent (опционально): родительский объект
  • data: данные для кодирования
  • size: размер QR-кода в пикселях
  • bgcolor (опционально): цвет фона (по умолчанию 0xFFFFFF)
  • fgcolor (опционально): цвет QR-кода (по умолчанию 0x000000)
  • align (опционально): выравнивание
  • x_off (опционально): смещение по X
  • y_off (опционально): смещение по Y
local qr = lv.qr(nil, "https://example.com", 150)

lvgl.spinner([parent], size [, anim_ms, angle])

Создает индикатор загрузки (спиннер).

Аргументы:

  • parent (опционально): родительский объект
  • size: размер спиннера
  • anim_ms (опционально): длительность анимации в мс
  • angle (опционально): угол дуги
local spinner = lv.spinner(nil, 50, 1000, 90)

lvgl.arcloader([parent], size [, align, x_off, y_off])

Создает дуговой индикатор загрузки.

local arc = lv.arcloader(nil, 100)
arc:arc_anim(2000, 0, 100, 0, true)  -- анимация

lvgl.slider([parent] [, min, max, value, width, height, align, x_off, y_off])

Создает слайдер.

Аргументы:

  • parent (опционально): родительский объект
  • min (опционально): минимальное значение (по умолчанию 0)
  • max (опционально): максимальное значение (по умолчанию 100)
  • value (опционально): начальное значение
  • width (опционально): ширина (по умолчанию 200)
  • height (опционально): высота (по умолчанию 20)
  • align (опционально): выравнивание
  • x_off (опционально): смещение по X
  • y_off (опционально): смещение по Y
local slider = lv.slider(nil, 0, 100, 50, 200, 20)

lvgl.slider_get_value(slider)

Получает текущее значение слайдера.

local value = lv.slider_get_value(slider)

lvgl.slider_set_value(slider, value [, animated])

Устанавливает значение слайдера.

lv.slider_set_value(slider, 75, true)

lvgl.switch([parent] [, state])

Создает переключатель.

local sw = lv.switch(nil)
local sw = lv.switch(nil, lv.STATE_CHECKED)  -- включенный

lvgl.canvas([parent], w, h [, align, x_off, y_off])

Создает canvas для рисования.

local canvas = lv.canvas(nil, 128, 128)

lvgl.canvas_writebuf(canvas, w, h, offset, data)

Записывает данные в canvas.

Аргументы:

  • canvas: объект canvas
  • w: ширина canvas
  • h: высота canvas
  • offset: смещение в пикселях
  • data: строка с данными (grayscale, 1 байт на пиксель)
lv.canvas_writebuf(canvas, 128, 128, 0, image_data)

lvgl.loadfont(path)

Загружает шрифт из файла .bin.

Возвращает: userdata шрифта

local font = lv.loadfont("S:/fonts/custom_20.bin")
local label = lv.label(nil, "Custom font", 0xFFFFFF, lv.ALIGN_CENTER, 0, 0, font)

lvgl.delfont(font)

Выгружает загруженный шрифт.

lv.delfont(font)

lvgl.del(obj)

Удаляет объект LVGL.

lv.del(label)

lvgl.meminfo()

Выводит информацию об использовании памяти LVGL.

lv.meminfo()
-- used: 12345 ( 15 %), frag:   5 %, biggest free: 50000

lvgl.pct(percent)

Вычисляет процент от размера.

local width = lv.pct(50)  -- 50% от родителя

lvgl.setcal(x, y)

Устанавливает калибровку тачскрина.

lv.setcal(100, 100)

Методы объектов (lvgl.obj)

obj:set_text(text [, color, opacity])

Устанавливает текст для метки.

label:set_text("New text", 0xFF0000)

obj:set_size(w, h)

Устанавливает размер объекта.

obj:set_size(200, 100)

obj:set_align(align [, x_off, y_off])

Устанавливает выравнивание объекта.

obj:set_align(lv.ALIGN_TOP_LEFT, 10, 10)

obj:set_bg(color [, opacity])

Устанавливает цвет фона.

obj:set_bg(0xFF0000, lv.OPA_50)

obj:set_state(state)

Добавляет состояние объекту.

obj:set_state(lv.STATE_CHECKED)

obj:clear_state(state)

Убирает состояние объекта.

obj:clear_state(lv.STATE_CHECKED)

obj:show()

Показывает скрытый объект.

obj:show()

obj:hide()

Скрывает объект.

obj:hide()

obj:set_src(path)

Устанавливает источник для изображения.

img:set_src("S:/new_image.png")

obj:arc_anim(duration_ms, start, stop, count, zero_at_end)

Запускает анимацию для arc-объекта.

arc:arc_anim(2000, 0, 100, 0, true)

Константы выравнивания

lv.ALIGN_DEFAULT
lv.ALIGN_TOP_LEFT
lv.ALIGN_TOP_MID
lv.ALIGN_TOP_RIGHT
lv.ALIGN_BOTTOM_LEFT
lv.ALIGN_BOTTOM_MID
lv.ALIGN_BOTTOM_RIGHT
lv.ALIGN_LEFT_MID
lv.ALIGN_RIGHT_MID
lv.ALIGN_CENTER

Константы состояний

lv.STATE_DEFAULT
lv.STATE_CHECKED
lv.STATE_FOCUSED
lv.STATE_PRESSED
lv.STATE_DISABLED

Константы прозрачности

lv.OPA_TRANSP  -- 0%
lv.OPA_0       -- 0%
lv.OPA_10      -- 10%
lv.OPA_20      -- 20%
lv.OPA_30      -- 30%
lv.OPA_40      -- 40%
lv.OPA_50      -- 50%
lv.OPA_60      -- 60%
lv.OPA_70      -- 70%
lv.OPA_80      -- 80%
lv.OPA_90      -- 90%
lv.OPA_100     -- 100%
lv.OPA_COVER   -- 100%

Пример: простой интерфейс

local lv = require("lv")

-- Инициализация дисплея
lv.init(1, 2, 1, 320, 240, 0x000000, 1, 0, 5, 4, 2, 15, 0, 0)

-- Заголовок
local title = lv.label(nil, "Smart Home", 0xFFFFFF, lv.ALIGN_TOP_MID, 0, 10)

-- Карточка с информацией
local card = lv.card(nil, 280, 80, 0x222222, 0x444444, lv.OPA_COVER,
    lv.ALIGN_CENTER, 0, -40)
local temp_label = lv.label(card, "Temperature: 25.5 C", 0x00FF00,
    lv.ALIGN_LEFT_MID, 10, 0)

-- Кнопка управления
local btn = lv.button(nil, 120, 50, 0x0066FF, "Toggle Light", 0xFFFFFF,
    lv.ALIGN_BOTTOM_MID, 0, -20, function()
        print("Light toggled!")
    end)