Урок 7. Подключаем дисплей EasyHMI к MQTT-брокеру.

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

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

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

Выбираем MQTT-брокер для проверки работы.

Для тестирования можно поставить на ПК или одноплатный компьютер MQTT-брокер Mosquitto и подключаться внутри локальной сети к дисплею и брокеру. Некоторые особенности настройки MQTT-брокера Mosquitto в Windows я описал в статье: «Переадресация портов с помощью Netsh: Настройка проброса трафика для MQTT-брокера Mosquitto в Windows».

Но для простоты тестирования можно воспользоваться сервисом WQTT.RU, который предоставляет тестовый период 1 месяц бесплатно, и продление стоит крайне дёшево.

Поэтому расскажу, как подключиться к MQTT-брокеру на примере сервиса wqtt.

После регистрации на сервисе для тестирования ничего дополнительно настраивать не нужно. Заходим в раздел «Брокер», и тут нам понадобятся настройки, которые нужно будет указать в программе EasyHMI.

Настройка программы EasyHMI для работы с MQTT.

Для настройки работы с MQTT нужно запустить программу EasyHMI, перейти на вкладку «Настройки» и подключиться к дисплею.

Внимание! Рекомендую настраивать работу по беспроводной сети после создания и загрузки интерфейса на дисплей. Так как подключение к Wi-Fi и MQTT занимает несколько секунд, перезагрузка дисплея также занимает от 3 до 5 секунд, что влияет на качество и скорость загрузки проекта на дисплей!

После того как вы подключились к дисплею, настраиваем подключение к Wi-Fi сети. Для этого укажите логин и пароль от вашей Wi-Fi сети и нажмите «Сохранить».

Внимание! Если на вашем Wi-Fi роутере настроено ограничение доступа к интернету для незарегистрированных устройств или запрет подключения к роутеру незарегистрированных устройств, необходимо произвести соответствующие настройки на стороне роутера, иначе подключиться к MQTT-брокеру не получится.

Далее переходим к настройке подключения к MQTT. Тут копируем данные из сервиса и вставляем в соответствующие поля в программе EasyHMI.

Указываем ID дисплея для MQTT, например 3 — эта настройка помогает использовать несколько дисплеев для разделения функционала или использовать параллельную работу нескольких дисплеев. После того как все поля заполнены, нажимаем кнопку «Сохранить».

Для того чтобы дисплей подключился к Wi-Fi сети и MQTT-брокеру, нужно в настройках дисплея выбрать Отправлять данные по: "MQTT" и нажать кнопку «Сохранить».

Дисплей перезагрузится и через несколько секунд подключится к Wi-Fi сети и MQTT-брокеру.

Проверка отправки данных по MQTT с дисплея.

Для проверки факта отправки и приёма данных по MQTT переходим на вкладку «WebSocket клиент» на сайте wqtt.ru. Тут в таблице отображаются все «Принятые сообщения».

Как видим, у нас приходят данные от кнопок с фиксацией и от кнопок без фиксации. Это значит, что все настройки сделаны правильно и наш дисплей подключился к MQTT-брокеру.

Команды, которые можно отправлять на дисплей по MQTT.

// Топик для изменения текста для элемента с ID A02.
// 'easyhmi3' - префикс, где '3' это "ID дисплея для MQTT", указанный в настройках.
easyhmi3/text/A02
// Топик для изменения цвета текста для элемента с ID A02.
easyhmi3/txtColor/A02
// Топик для изменения состояния кнопки с фиксацией (ID A04).
// Сообщение '1' — кнопка нажата, '0' — кнопка в первоначальном состоянии.
easyhmi3/btnSwitch/A04
// Топик для блокировки/разблокировки любой кнопки (ID A14).
// Сообщение '1' — заблокирована (нельзя нажать), '0' — блокировка снята.
easyhmi3/btnOff/A14
// Топик для перехода по страницам проекта.
// Сообщение '0' — главная страница, '1'-'5' — соответствующие страницы.
easyhmi3/screen/

Проверка отправки данных на дисплей.

Для проверки отправки данных на дисплей по MQTT не обязательно отправлять данные к MQTT-брокеру с другого устройства. Достаточно на сайте на вкладке «WebSocket клиент» отправить сообщение. Указываем топик — одну из команд, которые рассмотрели выше. Например, сменим текст для элемента с ID A02.

Внимание! ID элементов легко посмотреть и скопировать в эмуляторе EasyHMI. Достаточно кликнуть по ID элемента, и он будет скопирован в буфер обмена. При этом текст можно изменить на фигуре, кнопке и пр. Подробнее можно прочитать в предыдущих уроках.

Указываем:

• Топик: easyhmi3/text/A02
• Сообщение: Привет

Нажимаем «Отправить». На дисплее изменится надпись.

Также можно поменять цвет надписи, например на красный. Для этого:

• Топик: easyhmi3/txtColor/A02
• Сообщение: FF0000 (Цвет в формате HEX RGB)

Нажимаем «Отправить». По аналогии можно установить любой цвет.

Для блокировки кнопки отправляем сообщение 1 в топик easyhmi3/btnOff/A04. На дисплее увидим следующую картину.

Остальные команды работают по аналогии.

Возможные проблемы.

Итог.

Сейчас можно получать и отправлять данные на дисплей по MQTT, но это только начало. Можно создать элементы управления в сервисе wqtt.ru, подключить Алису для голосового управления и многое другое. Я планирую сделать серию уроков по созданию элементов «Умного дома» и тому, как ими управлять и получать данные, используя дисплей на базе EasyHMI. Все уроки по данной теме буду выкладывать в новом разделе сайта «Умный дом».

Важно! Easy HMI предназначена в первую очередь для дисплеев AT HMI, но также поддерживает и некоторые дисплеи сторонних производителей.

Последняя версия Easy HMI и Datasheet на дисплеи AT HMI.

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

Понравился Урок Подключаем дисплей EasyHMI к MQTT-брокеру.? Не забудь поделиться с друзьями в соц. сетях.

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

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

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

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