IoTmanager — мобильный MQTT-клиент с необычной концепцией

Снял пост с голосования, т.к модератор безосновательно перенес его в «Я пиарюсь».

В своей недавней статье на GeekTimes про доработку домофона протоколом MQTT я проводил опрос на тему того, какую статью написать следующей, и примерно 50% читателей проголосовало за статью про работу с мобильным приложением MQTT-клиента IoTmanager.

Данное приложение немного отличается концепцией от всех представленных мобильных MQTT-клиентов: внешний вид виджетов задается непосредственно в топиках. Таким образом, все настройки хранятся в одном месте — конечном физическом устройстве, а IoTmanager просто служит для отображения и управления виджетами. Такой подход может оказаться полезным для определенного круга задач.

На Хабре и GeekTimes IoTmanager практически не упоминается, что я считаю незаслуженным и хочу немного рассказать про особенности работы с приложением на примере связки с ESP8266. Приглашаю в комментарии к обсуждению аналогов.
Дисклеймер: Я не имею никакого отношения к автору или приложению, оно полностью бесплатное, не требует регистрации и не имеет встроенной рекламы, пишу статью с целью обучения постигающих азы интернета вещей.

Описание

IoTmanager построен на фреймворке Ionic (HTML5+AngularJS) и доступен под операционные системы Android и iOS. У каждого виджета имеется своя html-разметка, узнать которую можно из документации на официальном сайте приложения, и параметры которой задаются в топиках JSON-формата. MQTT реализован поверх WebSockets на библиотеках Paho.js и MQTT.js (можно выбрать в настройках).

Пример HTML разметки виджета-переключателя Toggle:

<div class="class1" style="style1">
  <div class="item-toggle descrClass" style="descrStyle">
    <i class="iconClass" style="iconStyle">descr</i>
    <label class="toggle">
      <input type="checkbox" />
      <div class="track" style="trackStyle">
        <div class="handle" style="handleStyle"></div>
      </div>
    </label>
  </div>
</div>

Все классы, стили и иконки можно задавать в MQTT топиках. Да, есть мнение, что такая реализация противоречит самой идее MQTT — легковесности протокола с минимумом передаваемых данных, но мне такой подход оказался интересен: все настройки хранятся на физическом устройстве и не надо настраивать каждый клиент отдельно, а, при необходимости, можно менять внешний вид управляющих виджетов прямо на лету. Такой подход имеет место быть.

Мне, например, это оказалось удобно в работе с домофоном, ссылку на статью о котором я давал в самом начале статьи. Я установил приложение нескольким людям, выбрал в настройках «Режим конечного пользователя» (скрывает все настройки, логи, статистику), и все они имеют доступ к моему домофону, не задумываясь о том, как работает приложение, а я могу изменять функционал устройства по мере необходимости.

Приложение имеет большое разнообразие виджетов и более 500 различных иконок для использования. Вот примеры (кликабельно):

Настройка брокера

Для примера я заведу брокер на cloudmqtt.com, но, конечно, это может быть и ваш локальный брокер. Я создал брокер на бесплатном тарифном плане Cute Cat, в итоге получил адрес сервера+порты:



Тут же добавляю пользователя test с паролем и даю этому пользователю права на чтение и запись всех топиков (ставим просто #):



На этом настройка брокера заканчивается, для наших нужд хватит.

Настройка приложения

В настройках приложения вводим данные брокера: сервер, порт (тот, что WebSockets TLS only), пользователя c паролем, включаем тумблер использовать SSL/TLS, в качестве префикса для имен топиков оставляем стандартное /IoTmanager. Жмем подключиться (иконка спидометра в правом верхнем углу) и видим зеленую иконку Брокер, что означает успешное подключение.

В брокере мы должны увидеть приветственные топики приложения со служебной информацией:



Все, теперь у нас есть полностью функциональное мобильное приложение для управления чем-либо через интернет. Не пугайтесь, что рабочая область полностью пустая, вся дальнейшая настройка внешнего вида приложения будет производиться на физическом девайсе, на самом телефоне ничего не настраивается.

Заготовка прошивки для ESP8266

Попробуем поморгать светодиодом на NodeMCU с помощью нашего приложения на телефоне. Классика, не правда ли? В качестве IDE я буду использовать редактор Atom с расширением PlatformIO и ардуиновскими библиотеками.

Далее все пояснения я привожу относительно виджета-переключателя Toggle, т.к его html-код я уже приводил выше. Все виджеты подробно описаны на официальном сайте приложения со всевозможными плюшками и конкретными примерами.

При написании прошивки под NodeMCU я использовал библиотеки ESP8266WiFi для подключения к WiFi, MQTT-клиент PubSubClient (by Imroy) и ArduinoJson для удобного формирования строки JSON. Ссылка на репозиторий прошивки есть в конце статьи. Немного поясню принцип работы.

  JsonObject& root = jsonBuffer.createObject();
  root["id"] = "0";
  root["widget"] = "toggle";
  root["topic"]  = "IoTmanager/" + deviceID + "/led1";
  root["descr"]  = "Светодиод 1";
  root["style1"] = "padding-top:10px;";
  root["descrStyle"] = "font-size:20px;";
  root.printTo(thing_config[0]);

Таким образом формируется JSON строка, содержащая необходимые параметры для настройки виджета, и которая позже будет отправлена в топик /IoTmanager/deviceID/config для отображения виджета в IoTmanager'е.

Для выставления статуса виджету (положения вкл/выкл), необходимо отправить JSON строку вида {"status":"1"} в топик /IoTmanager/deviceID/led1/status.

В свою очередь приложение, когда нажимается переключатель, отправляет в топик /IoTmanager/deviceID/led1/control сообщение 0 или 1 (для удобства парсинга на микроконтроллерах). Соответственно на ESP это можно отловить в функции коллбэка так:

if (sub.topic() == "IoTmanager/" + deviceID + "/led1/control") {
        if (sub.payload_string() == "0") ledStatus(ESP_LED, false);
                                    else ledStatus(ESP_LED, true);
}

Сейчас в прошивке сделано так, что при получении в главный топик /IoTmanager (тот самый префикс) сообщения HELLO (так делает программа), ESP отдает все конфиги для виджетов. Таким образом они сразу же появляются в приложении и это автоматически означает, что устройство на связи:

if (sub.topic() == prefix) {
          if (sub.payload_string() == "HELLO") {
            pubConfig();
          }
}

Но можно использовать для конфиг-сообщений флаг retained. Тогда брокер, при подключении к нему приложения, будет отдавать все топики с этим флагом. Т.е независимо от того, на связи устройство или нет, в приложении будут отображаться виджеты. Я использую такой подход в домофоне. А чтобы знать, на связи устройство или нет, при получении сообщения HELLO, домофон отдает конфиг виджета с текстом Есть контакт (слабо заметно внизу скриншота).

Видео работы

Полезные ссылки

1. Репозиторий получившейся в статье прошивки
2. Сайт приложения со всей документацией
3. Мануал по быстрой настройке приложения
4. Описание и полезные ссылки от автора
5. Мой пример использования приложения

Всем спасибо за внимание, надеюсь обзор будет полезен.
Приглашаю в комментарии — пишите какими программами пользовались вы и в чем их преимущества.