Создание пользовательского интерфейса на дисплее Guition с ESPHome и библиотекой LVGL
Интерфейс главной страницы
Недавно вышла обновленная версия ESPHome 2024.8.0, в которой появилась библиотека LVGL версии 8.4 для создания графических интерфейсов TFT-экранов. У меня был в наличии такой дисплей, и я решил воспользоваться новыми возможностями для создания интерфейса по управлению умным домом. Моя задача заключалась в том, чтобы наполнить недорогой дисплей необходимой функциональностью.
Список задач для реализации, которые я запланировал:
Отображение даты и времени
Показания погоды:
Температура
Прогноз погоды на несколько дней
Реалистичные иконки погоды
Анимация иконок
Индикация состояний (уровень сигнала Wi-Fi, состояние термостата и т.д.)
Блокировка экрана
Вывод состояния датчиков с DIY устройства
Виджеты для управления:
Настройки:
Смена языка (русский/английский)
Уровень подсветки экрана
Время «режима сна» экрана
Звуковое оповещение от датчиков
Из всего списка не удалось реализовать прогноз погоды на несколько дней, управление вентиляцией, шторами и пылесосом. Причины следующие:
Прогноз погоды значительно увеличивает размер прошивки и усложняет код.
Управление вентиляцией, шторами и пылесосом не реализовано из-за отсутствия этих устройств в месте, где находится сервер Home Assistant. Создавать виджеты без тестирования нецелесообразно, поэтому это вопрос будущих обновлений.
Теперь подробнее о реализации и недостатках экрана, с которыми я столкнулся:
Недостатки:
RGB565: Формат поддерживает лишь 65,536 цветов, что делает градиенты полосатыми или «плоскими». Это приводит к потере плавных переходов и визуальным артефактам.
Альфа-канал: В ESPHome отсутствует полноценная поддержка. Изображения должны иметь фон, что накладывает ограничения на дизайн. Убрать фон возможно, но это ухудшает качество изображения.
Векторная графика: Здесь аналогичная проблема — иконки выглядят «лесенками». Для создания красивых значков пришлось использовать глифы и создавать свой шрифт (например, с помощью сервиса IcoMoon).
Обратная связь от служб Home Assistant: Нет полной поддержки. Например, можно запустить службу «light.turn_on», но считать данные с weather.get_forecast не получится без создания дополнительных датчиков.
Реализация:
Погода:
Отображение состояния погоды в виде анимированной картинки оказалось громоздким. Поддержки GIF нет, поэтому анимация рассчитывалась вручную. Я создавал картинки в Photoshop, и, хотя это дело вкуса, на мой взгляд, результат неплохой. Однако обновления состояния погоды происходят нечасто (в моем случае — раз в полчаса с Yandex), что снижает актуальность информации. Чтобы улучшить ситуацию, возможно, придется написать код на Python для парсинга данных с сайта и отображения их в Home Assistant.
Индикаторы:
Сверху справа находятся 6 индикаторов: уровень сигнала Wi-Fi, соединение с Home Assistant, состояние термостата и вентиляции, датчик присутствия и звук датчиков. Индикаторы становятся цветными, если состояние активно.
Блокировка экрана:
Чтобы включить блокировку экрана, нужно удерживать кнопку на иконке замка в течение 5 секунд. Иконка замка становится цветной, но иногда не видно, сработала ли блокировка. Возможно, стоит вынести состояние в индикаторы.
Показания сенсоров:
Показания сенсоров из Home Assistant просто выводятся на экран. В будущем планирую сделать выбор датчиков из списка сущностей и возможность включения/выключения виджетов из меню настроек. Со слов разработчиков, на данный момент технически это возможно, но пока не реализовано. Как вариант, использовать отдельный файл для переменных, чтобы пользователю не пришлось править это в основном коде.
Кнопки:
Термостат: реализован термостат на основе реле дисплея. Текущая температура отображается на дуге, а целевую температуру можно задавать кнопками +/- или проводя пальцем по дуге. Нужно добавить гистерезис и его настройки.
Виджет термостата
Свет: реализованы 3 секции. Первая секция — настройка цветовой температуры и яркости. Вторая и третья секции — кнопки вкл/выкл. В будущем планирую дать пользователю возможность выбирать количество кнопок и настраивать их названия.
Виджет управления световыми группами
Вентиляция/шторы/пылесос: пока добавлены как пустые страницы для будущих реализаций.
Настройки:
Реализовано 4 позиции:
Яркость подсветки экрана
Время выключения экрана (режим сна в секундах)
Звуковое оповещение от датчиков при превышении пороговых значений. Пороговые значения пока задаются в коде, но в идеале хотелось бы вынести их в настройки.
Смена языка с английского на русский. Все записи меняются «на лету», за исключением надписи на заставке при включении экрана.
Виджет настроек
Что хотелось бы реализовать еще?
По самому дисплею: переделать силовую часть, убрав реле и 230V с заменой на PoE. Возможно, заменить на другой экран с разрешением 720×720. Вместе с этим ожидаю выхода ESP32-P4, который сможет обрабатывать видеопотоки и подключать дисплей через скоростной интерфейс.
По программной части: cделать всё по принципу «blueprint», чтобы пользователи могли настраивать все параметры из меню экрана. Но, как я и сказал выше, на данный момент это пока в принципе невозможно реализовать до реализации такой возможности.
На этом всё, спасибо за внимание! Если тема интересна, задавайте вопросы в комментариях.
Общее обсуждение на форуме home assistant
Общее обсуждение в discord
Ссылка на проект
