Информационный экран своими руками с T-Display LILYGO в ESPHome

В этой статье я делюсь своим процессом прошивки, настройки и рендеринга контента на этой плате разработки AMOLED с использованием механизма отображения ESPHome. Вы можете использовать его для передачи данных из Home Assistant, создания аккуратных дисплеев статуса и даже использовать его в качестве контроллера.

LILYGO T-Display-S3 AMOLED доступен на АлиЭкспресс а также Яндекс.Маркет. На Яндексе дороже, но доставка около трех дней и меньше проблем с возвратом при браке, тогда как на Алиэкпресс доставка, в лучшем случае, около двух недель и непонятный возврат.

Различные версии LILYGO T-Display S3

Прежде чем углубляться дальше, важно отметить, что обе версии этого экрана —Basic и Touch (Базовый и Сенсорный) — почти одинаковы, с небольшими различиями в распиновке и функциях. Эти различия в первую очередь касаются сенсорной функциональности версии Touch, имеющей дополнительный Контакт Touch_INT на GPIO21 и Контакт включения питания на GPIO38 для поддержки сенсорного экрана, которого нет в базовой версии.

На данный момент версия 2.0 этой платы имеет следующую распиновку:

• LILYGO T-Display S3 AMOLED Basic
• ESP32-S3R8 Двухъядерный LX7
• AMOLED 1,91 дюйма 240×536
• КСПИ RM67162
• 16 МБ флэш-памяти, 8 МБ PSRAM
• Wi-Fi 802.11, БЛЕ 5.0

• LILYGO T-Display S3 AMOLED Touch
• ESP32-S3R8 Двухъядерный LX7
• AMOLED Touch 1,91 дюйма, 240×536
• КСПИ RM67162
• 16 МБ флэш-памяти, 8 МБ PSRAM
• Wi-Fi 802.11, БЛЕ 5.0

Это руководство для AMOLED базовой версии.

Начальная прошивка в ESPHome

Прежде чем мы сможем настроить компонент дисплея и фактически отображать объекты на этой плате, его необходимо инициализировать в ESPHome. Создайте новое устройство в ESPHome, назовите его как хотите и инициализируйте его с помощью следующего кода:

После первой вспышки на экране ничего не будет отображаться. Поскольку мы не настроили распиновку для spi и display компоненты, плата просто загрузится, и вы сможете получить к ней беспроводной доступ из сети.

Следующим шагом будет настройка компонента дисплея, добавление текстового шрифта и отрисовка чего-нибудь простого с помощью механизма рендеринга дисплея ESPHome. Чтобы это работало, необходимо установить соответствующие контакты. Из официальных изображений распиновки видно, как должна выглядеть конфигурация Базовой версии LILYGO T-Display S3:

Если вы видите что-то на дисплее, это означает, что ваша конфигурация правильна и работает:

Понимание механизма рендеринга дисплея ESPHome

Чтобы создать что-то полезное на LILYGO T-Display S3, необходимо использовать механизм рендеринга дисплея ESPHome.  Этот движок может выполнять такие задачи, как рисование фигур, отображение текста с использованием пользовательских шрифтов и даже рендеринг изображений. Эта гибкость достигается за счет лямбда-системы ESPHome, которая позволяет писать код C++ для управления дисплеем.

В лямбде можно писать код как в любой лямбда в ESPHome. Отображаемым лямбда-выражениям дополнительно передается переменная с именем it который представляет объект механизма рендеринга. При рендеринге координат отображения в ESPHome начало координат (0, 0) начинается с верхний левый угол экрана. Координаты X увеличиваются вправо, а координаты Y увеличиваются вниз. Цвета отображаются с использованием значений RGB, обычно в формате 1где значения варьируются от 0 до 255 для каждого канала. Шрифты определяются путем указания шрифтов и размеров, что позволяет печатать текст в различных стилях. Изображения выводятся на дисплей с использованием растровых данных, обычно предварительно загружаемых или извлекаемых с помощью кода, и визуализируются на основе размещения координат.

Вот как выглядит красный круг с центром посередине, если использовать двух помощников, чтобы получить width и height экрана автоматически:

Поворот экрана

Прежде чем экран станет полностью полезным, важно понять параметр конфигурации вращения в ESPHome. Вы можете добавить rotation на экран и установите для него значение 90, 180 или 270 градусов, чтобы перевернуть компоненты на экране.

Очень важно отметить, что вращение тесно коррелировано с get_width() и get_height() помощники в ESPHome. Если установлено значение 90 или 270 градусов, ширина и высота меняются местами, то есть то, что раньше считалось шириной (более длинная ось), становится высотой, и наоборот. Это гарантирует правильную адаптацию размеров к ориентации дисплея, обеспечивая правильную визуализацию независимо от угла поворота.

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

Добавление шрифтов

Шрифты можно добавить в компонент отображения ESPHome, загрузив их локально или просто используя Google Шрифты. Вам необходимо назначить идентификаторы каждому шрифту, определить его размер и любые дополнительные символы, если это необходимо. Идентификатор вызывается в лямбда-функции компонента отображения, который отображает запрошенный вами текст с соответствующим шрифтом. Вот как можно определить шрифты:

Вы можете просмотреть дополнительные примеры и параметры конфигурации на странице ESPHome. Компонент шрифта.

Добавление изображений и значков

Подобно шрифтам, изображения можно загружать на устройства ESP32 с совместимыми экранами. Компонент изображения также требуется уникальный идентификатор, который вызывается в лямбда-функции компонента дисплея. Вот как можно определить и изменить размер изображений или значков:

Например, предположим, что я хочу визуализировать локальное изображение в центре LILYGO T-Display S3. Мне нужно загрузить изображение в ESPHome папку, в которой находится основной .yaml файл. Или я мог бы использовать другую папку в этом каталоге.

Чтобы центрировать изображение на дисплее S3, вам необходимо вычислить смещение от центра дисплея, вычитая половину размеров изображения. Сначала разделите ширину дисплея на 2, чтобы получить горизонтальный центр. Затем вычтите половину ширины изображения, чтобы расположить его правильно. Например, с Изображение шириной 350 пикселей (the-logo.png), вы вычитаете 175 (половину ширины). То же самое относится и к вертикали: разделите высоту дисплея на 2 и вычтите половину высоты изображения (77 для изображения высотой 155 пикселей). Этот обеспечивает изображение центрируется по обеим осям.

Предоставление объектов из Home Assistant

Как и любое другое устройство ESPHome, вы можете отображать датчики и объекты от Home Assistant в LILYGO S3 и используйте его в качестве дисплея состояния или контроллера. Это может включать в себя любую сущность, которую вы пожелаете, желательно ту, для которой вы найдете полезную функциональность. Например, предположим, что я хочу использовать этот дисплей для демонстрации своего офиса. температура и влажность с красивыми иконками. Я хочу, чтобы они располагались горизонтально посередине экрана с правой стороны интересным и читаемым шрифтом. Я хочу, чтобы логотип был меньше слева:

Во-первых, мне нужно сделать два датчика из Home Assistant доступными для платы LILYGO, добавив это в конфигурацию:

Далее мне нужно добавить шрифт и изображения (и значки) соответствующего размера. Размер 60×60 пикселей хорошо подходит для значков в моем примере, а сохранение изображения шириной 200 соответствует примерно половине экрана с некоторым пространством между ними:

И, наконец, добавьте в код лямбду рендеринга дисплея. Эта функция использует get_height помощник для чтения высоты экрана и использования его для центрирования изображения по вертикали (умная домашняя сцена). Остальная часть функции статически устанавливает координаты X и Y для датчиков с соответствующими шрифтами и позиционирует их на экране:

Циклическое переключение нескольких страниц отображения

Компонент отображения ESPHome позволяет отображать несколько страниц с различным содержимым и циклически перебирать их по таймеру или по любым входным событиям. Поскольку AMOLED-дисплей LILYGO T-Display S3 оснащен двумя кнопками спереди, мы можем использовать одну из кнопок для изменения информации, отображаемой на экране. Первая кнопка использует GPIO0который представляет собой связующую булавку, поэтому мы хотим этого избежать. Второй использует GPIO21который можно бесплатно использовать в этой автоматизации.

В этом примере я создал вторую страницу с приветственным сообщением, сохранил исходную страницу с температурой и влажностью в качестве второй и создал третью страницу с некоторой базовой информацией о моем системном мониторе:

Краткий итог

Есть так много всего, что можно сделать с Механизмом рендеринга дисплея ESPHome. Это мощный и гибкий инструмент, но его сложно использовать. По моему опыту, для получения желаемого эффекта требуется много перепрошивок, настроек и перепрошивок. Если этой статьи недостаточно для начала, я настоятельно рекомендую вам просмотреть официальную документацию и попытаться понять хотя бы самые основные параметры, прежде чем прошивать этот AMOLED-экран LILYGO T-Display S3.

После стольких изменений моего кода мне удалось отобразить некоторые интересные данные о настройке моего офиса. Вот полный конфиг из этой статьи: