MQTT Dash

скачать можно тут

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

Установив программу на смартфон получаем "Черный Квадрат"

Настройка подключения 
Нажимаем + для создания нового подключения к брокеру. Можно создать несколько разных подключений, к разным брокерам и с разными задачами. У меня одно подключение для просто посмотреть (и не нагадить) и второе для управления устройствами.

В принципе все описания в программе есть, но мыж ленивые, читать не наш метод - смотрим картинки. Большинство настроек оставляем по умолчанию.
Прокручиваем экран вниз и заполняем нужные поля .

Имя - произвольное название данного подключения
Адрес -  брокера
Порт - стандартный 1883
Шифрование - ВЫКЛЮЧАЕМ (убираем галочку, нет его у данного брокера)

   

Далее, вводим наши учетные данные на брокере

Имя пользователя - зарегистрированная почта

Пароль - пароль для брокера (для данных - 0204327c)

Идентификатор ставится автоматически.

Размер плиток выбираем по желанию, потом можно поменять ...

Сохраняем все наши настройки нажав дискетку в правом верхнем углу

и получаем новое соединение - Demo.

Входим в Demo и ..... получаем очередной  "Черный Квадрат".
Нажимаем + для создания новой информационной плашки.
Тут есть большой выбор.
Текст - просто показывает данные полученные в заданном топике.
Переключатель/кнопка - позволяет изменять данные по фиксированным значениям
Диапазон/прогресс - графически отображает данные и позволяет их произвольно изменять
Мультивыбор - создает меню выбора для изменения данных
Изображения - позволяет подключить картинки с видеокамеры ...
Цвет - для управления светом, цветом ...

Рассмотрим поочередно основные варианты. 

Текст

Имя - произвольное название плашки с данными, длинное имя не влезет, будем кратки .
Топик - полное название нужного нам топика. можно посмотреть на брокере FlyHub
frdemo@yandex.ru/NodeMCU/rssi
frdemo@yandex.ru/NodeMCU/ - это постоянные значения для данного модуля
rssi - это последнее имя в топике, на брокере можно посмотреть список возможных значений во вкладке Listen,
Включать публикацию для текста не надо, мы не собираемся менять данные, только смотрим.

Сохраняем все наши настройки нажав дискетку в правом верхнем углу
и получаем первую информационную плашку. (rssi - это уровень сигнала WiFi измеренный нашим модулем и всегда есть в прошивке)

Кнопка

Имя - произвольное

Топик - имя топика который мы хотим изменять, например на выходе 5 подключена лампочка и кнопкой будем ее включать и выключать. Т.к. надо передавать данные -  включаем публикацию. Настраиваем значения переключателя - Вкл=1, Выкл=0.  Другие настройки не трогаем.

  

Выбираем нужную картинку для отображения на плашке и нужный цвет.

Сохраняем все настройки и пробуем работу новой плашки.  Нажав на нее  изменяем состояние лампочки и визуальное отображение.

Переключатель

Имя - произвольное

Топик - имя топика который мы хотим изменять, например thermo_set2 изменяет установку термостата №2 

Выставляем значения температуры 20 и 10 градусов, настраиваем красивые картинки

  

и вот результат 

для контроля заданной (не реальной, а заданной программой) температуры быстренько нарисуем текстовую плашечку 

и будем смотреть изменения в системе нажимая переключатель температуры. Было настроено на 10 градусов, сделаем 20, опять нажав на регулятор температуры.

Регулятор

Имя - произвольное

Топик - продолжим с термостатом

Публикацию включаем

опускаемся ниже и настраиваем уровни регулировки - минимум 5 и максимум 30 (тут есть одна проблемка, на моем смартфоне самое правое поле не умещается, поэтому установив курсор в нужное поле и повернув смартфон горизонтально я смог выставить нужное значение)

вот и новая плашечка, она также показывает установленное значение температуры,нажав на неё мы получаем плавный регулятор заданной температуры. 

если сделать длительное нажатие на плашку, то можно изменить ее настройки или сделать ее клон, который можно изменить и перенастроить. 

Диапазон

Имя - произвольное

Топик - продолжим с термостатом

Публикацию отключаем, будем только смотреть данные

Добавим теперь префикс и постфикс, это произвольные символы которые будут добавляться на плашке к полученному значению для более красивого и удобного вида. Также можно уйти от конкретных данных и смотреть процентное значение (убираем галочку).Еще интересная функция - моргание плашки при определенных условиях. Задаем нижнее и верхнее значения val < 15 || val > 17  (строго соблюдаем формат текста). 

Как результат плашка Диапазон будет моргать если температура задана не 15 градусов.

Мульти-выбор

Имя - произвольное

Топик - продолжим с термостатом

Публикацию включаем

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

    

Опции можно изменять  ...

И вот красивый результат .....

Вот и все основное ....


Можно подключиться к моему тестовому модулю  и посмотреть все это вживую.
MQTT login :   frdemo@yandex.ru
MQTT password : 0204327c

Даже можно понажимать кнопочки и  поуправлять настройками ))