Уроки Easy HMI. Как подключить к Arduino, ESP32 и ESP8266 сенсорный дисплей AT HMI.

EasyHMI с версии 0.1.3b поддерживает работу по протоколу MQTT «из коробки», без необходимости писать код. В данном уроке рассмотрим, как настроить работу с MQTT-брокером. Получим данные от дисплея в онлайн-брокере wqtt.ru, а также передадим данные на дисплей по MQTT.

Отступление от урока: Я не специалист по работе с MQTT-брокером и настроил работу с данным протоколом, как понимаю на данный момент. Если у вас есть предложения по улучшению и оптимизации работы, пишите мне в личные сообщения в ВК или ТГ.

Какие дисплеи поддерживают работу по MQTT.

Начиная с версии EasyHMI 0.1.3b, появилась возможность добавлять иконки в виджет и проект. Но для добавления иконки в проект требуется изображения преобразовать и сжать, что накладывает некоторые ограничения. На данный момент я протестировал загрузку иконок до 128х128 px, но для загрузки сделал ограничение 50х50 px. Также не все иконки данного размера можно загрузить: всё зависит от исходного изображения и от того, получается ли упаковать его нормально. О чём вас предупредит программа. В более новых версиях EasyHMI данное ограничение я уберу.

Добавление иконок в проект.

1. Загрузка иконки в коллекцию.
2. Добавление иконки в виджет.
3. Иконки в проекте.

Сегодня в уроке рассмотрим создание фигур, иногда я их называю плашками. Если в тексте урока встретится слово «плашки», знайте, что я имею в виду инструмент «Фигуры» в меню элементов в разделе «Виджеты».

Несмотря на то, что фигуры являются пассивным элементом, то есть не выполняют никаких действий при нажатии на сенсор в отличие от кнопок, они являются одним из основных элементов. Фигуры можно использовать в крайне неочевидном ключе. Например, для того чтобы скрыть часть интерфейса или сделать всплывающее окно. Да даже просто сделать декор для кнопки, но тут есть свои ограничения, о чем расскажу в данном уроке.

Инструмент "Фигуры" в Easy HMI.

В предыдущем уроке мы познакомились с созданием виджета «Кнопка» и добавили кнопки в проект. Кроме функций, которые были рассмотрены в прошлом уроке, у кнопок есть дополнительные функции, которые можно изменить и настроить при создании или редактировании проекта. В этом уроке мы настроим переходы между страницами интерфейса и управление выводами GPIO с помощью кнопок.

Дополнительные возможности кнопки в Easy HMI.

Давайте откроем предыдущий созданный проект. Выделим любую кнопку, и в свойствах увидим, что у кнопки есть такие параметры как:

• С фиксацией/Переход стр.: Данный параметр помогает настроить фиксацию кнопки, что было рассмотрено в прошлом уроке, а также добавляет переход по страницам. В разделе «Проект» программы Easy HMI вверху страницы есть вкладки: Главная, Страница 1, Страница 2, Страница 3, Страница 4, Страница 5. На данных дополнительных страницах мы можем добавлять элементы интерфейса, создавая многостраничный интерфейс. И чтобы реализовать переход по страницам проекта, можно задать кнопке свойство перехода на нужную страницу. Подробнее рассмотрим ниже.
• ...

В предыдущем уроке мы познакомились с интерфейсом программы Easy HMI, рассмотрели каждую страницу интерфейса, приступили к созданию первого виджета и рассмотрели, как можно просмотреть и протестировать результат в эмуляторе и на дисплее. Сегодня подробнее рассмотрим, как создать виджет «Кнопка» и добавить нужное количество кнопок в проект.

Инструмент “Кнопка” в Easy HMI.

Инструмент «Кнопка» располагается на странице управления "Виджет". Данный инструмент включает в себя:

В предыдущем уроке я рассказал, где можно скачать программу Easy HMI. В этом уроке мы рассмотрим интерфейс программы, создадим свой первый виджет, познакомимся с эмулятором и узнаем, как отобразить созданный виджет на дисплее.

В этом уроке мы рассмотрим следующие вопросы:

• Страница «Проект».
• Страница «Виджеты».
• Страница «Настройки».
• Создание первого виджета в Easy HMI.

При запуске программы Easy HMI открывается страница «Проект». Это основная рабочая область программы, предназначенная для создания проектов. Поскольку проект можно формировать из готовых виджетов, эта страница позволяет создать готовый интерфейс для дисплея AT HMI без использования дополнительных инструментов.

На странице «Проект» интерфейс разбит на несколько панелей.

В данном уроке мы приступим к изучению процесса подключения сенсорного полноцветного дисплея AT HMI к плате Arduino и управлению периферийными устройствами с его помощью. Кроме того, рассмотрим вывод различной информации на экран. Для создания пользовательского интерфейса будем использовать программу Easy HMI. В рамках данной темы запланировано 9 уроков, итоговый результат которых представлен в статье "Разработка панели управления WS2812 с использованием дисплея AT HMI и Easy HMI".

В этом уроке мы рассмотрим следующие вопросы:

• Источники скачивания Easy HMI и datasheet для дисплеев AT HMI.
• Установка и настройка Easy HMI.
• Выбор версии Arduino IDE для скачивания.
• Установка и настройка Arduino IDE.
• Загрузка первого примера кода в Arduino Nano.