Кастомные HMI на ESP32 и TFT с поддержкой иконок, Wi-Fi, UDP и MQTT.

Как быстро создать интерфейс для TFT-дисплея с сенсором или без? Достаточно просто использовать обновленную версию программы Easy HMI. Новая версия программы поддерживает использование иконок в проекте и беспроводную связь: Wi-Fi, UDP и MQTT. Но обо всём по порядку.

Как создать HMI на ESP32 и TFT?

Первым делом нужно подключить дисплей к ESP32 по следующей схеме.

TFT 3,5 дюйма на красной плате.

По аналогичной схеме подключается плата 2.4 дюйма, 2.8 дюйма и другие на красной плате. Например, ниже приведена схема подключения дисплея 1,8 дюйма.

TFT 1,8 дюйма на красной плате.

Примечание: При подключении дисплея 1,8 дюйма с тусклой подсветкой уберите резистор и подключите питание подсветки напрямую к 3,3 В.

Также я протестировал и дисплеи от других производителей: 2.0“ ST7789VW — 240х320 px и ST7789V3 — 240х280 px. Схема немного отличается, но всё подключается по аналогии со схемами выше.

Какой TFT-дисплей подойдет?

При разработке я протестировал 5 различных дисплеев с разными драйверами и разрешением:

Как вы могли заметить, все дисплеи отличаются не только размером, но и используемыми драйверами. В теории подойдут практически любые TFT-дисплеи с интерфейсом SPI от 0,9 до 4 дюймов.

Загрузка прошивки для работы с Easy HMI

Бесплатная версия прошивки информатора доступна в предыдущей версии. Скачать и протестировать её вы можете тут.

Скачать прошивку для создания информатора можно тут >>.

Скачать прошивку с поддержкой всех функций можно тут >>>.

Чем отличается прошивка информатора от полноценной прошивки? Прошивка информатора предназначена для дисплеев без сенсора. Она не позволяет выводить на дисплей активные элементы: кнопки и слайдеры. Полноценная прошивка не имеет ограничений, и с её помощью можно создать проект с кнопками.

Загрузка прошивки в ESP32.

1. Скачайте прошивку на Boosty.
2. Установите драйвер для вашей платы ESP32. Драйвер можно скачать внизу статьи в разделе «Файлы для скачивания». Пример установки драйвера CH340 подробно расписан здесь.
3. Подключите вашу плату к компьютеру.
4. В программе Easy HMI 0.1.3b (или более поздней версии) зайдите в раздел «Настройки». В блоке настроек «Загрузить прошивку»:
   • Выберите COM-порт вашей платы ESP32.
   • Нажмите кнопку «Выбрать файл».
   • В открывшемся окне выберите файл прошивки, который вы скачали (он должен весить 4 Мб и иметь расширение .bin).
   • Нажмите «Загрузить прошивку».
   • Дождитесь завершения процесса загрузки.

Важно! Пока идет загрузка, не закрывайте программу и не отключайте ESP32 от компьютера, иначе вы можете повредить плату.

При удачной загрузке вы увидите надпись в консоли:

Leaving...
Hard resetting via RTS pin...
--- Process finished with exit code: 0 ---/ / Код 0 свидетельствует об успешном завершении процесса

Возможные ошибки при загрузке прошивки.

1. Ошибка:

   A fatal error occurred: This chip is ESP32-S3 not ESP32. Wrong --chip argument?
   --- Process finished with exit code: 2 --- # Код 2 обычно указывает на ошибку при выполнении
       

   Причина: Ваша плата ESP32 не подходит. Нужна плата на чипе ESP32 без дополнительных букв (S3, S2, C3, C6 и пр.).
2. Ошибка:

   A fatal error occurred: Could not open COM10, the port doesn't exist
   --- Process finished with exit code: 2 --- # Код 2 также указывает на ошибку
       

   Причина: COM-порт занят другой программой (например, Arduino IDE). Закройте другие программы, использующие COM-порт.

Настройка драйверов в программе Easy HMI.

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

• цветовыми схемами (включая инвертированные цвета);
• наличием зеркального отображения изображения.

Я постарался учесть все эти особенности, и получился следующий интерфейс настроек драйвера в программе Easy HMI для моих дисплеев:

• Дисплей 2.8“ ILI9341.
• Дисплей 2.4“ ST7789V с сенсором XPT2046.
• Дисплей 1.8“ ST7735S.
• Дисплеи 2.0“ ST7789VW и 1.69“ ST7789V3 имеют нестандартнуе настройки: при горизонтальном расположении в настройках дисплея изображение отображается вертикально.

Как видим, настройки для каждого дисплея имеют свои особенности. Для других дисплеев рекомендую использовать одну из вышеописанных настроек. Особенно если ваш дисплей на красной плате, попробуйте настройки для аналогичного дисплея.

Как пользоваться данным устройством?

Теперь можно использовать это устройство как HMI-дисплей. Подключите внешний микроконтроллер к UART2 или управляйте GPIO (4, 23, 18), используя кнопки на дисплее.

Для создания проектов ознакомьтесь с уроками Easy HMI и проектами с использованием сенсорных дисплеев AT HMI. Несмотря на то, что они написаны для моего дисплея AT HMI, они также подойдут для устройства, собранного сегодня.

Вы также можете использовать блочное программирование для создания проектов в программе ArduBlock.

Можно ли использовать свой код, написанный в Arduino IDE, после загрузки вашей прошивки на дисплей?

Да. Если вам нужно будет загрузить свой код на дисплей после использования данной прошивки, это можно будет сделать без всяких ограничений. Более того, вы всегда можете вернуться к работе с моей программой Easy HMI, загрузив повторно прошивку, о которой говорится в данной статье.

Поддержка и развитие функционала Easy HMI.

Не забывайте, новый функционал будет появляться сначала для моих дисплеев AT HMI, а затем уже буду, по мере возможности, переоснащать и для работы с данными дисплеями.

Поддержать проект и присоединиться к общению в нашем закрытом сообществе вы можете на Boosty.

Понравилась статья Кастомные HMI на ESP32 и TFT с поддержкой иконок, Wi-Fi, UDP и MQTT? Не забудь поделиться с друзьями в соц. сетях.

А также подписаться на наш канал на VK Видео, вступить в группу Вконтакте.

Спасибо за внимание!

Технологии начинаются с простого!

Фотографии к статье