MQTT Dash: различия между версиями

Материал из Wiren Board
(не показано 28 промежуточных версий 2 участников)
Строка 1: Строка 1:
{{DISPLAYTITLE: Подключение MQTT Dash к контроллеру Wiren Board }}
{{Draft}}
{{DISPLAYTITLE: MQTT Dash и Wiren Board }}
== Введение ==
== Введение ==
[[Image: MQTTDash_panel1.jpg |170px|thumb|right| Панель управления MQTT Dash ]]
MQTT Dash — мобильное приложение для работы с протоколом [[MQTT | MQTT]]. Позволяет создавать пользовательские панели управления и управлять устройствами умного дома с помощью смартфона или планшета.
MQTT Dash — мобильное приложение для работы с протоколом [[MQTT | MQTT]]. Позволяет создавать пользовательские панели управления и управлять устройствами умного дома с помощью смартфона или планшета.
<gallery mode="packed" heights="350px">
Image: MQTTDash_panel1.jpg |
Image: MQTTDash_panel2.jpg |
Image: MQTTDash_panel3.jpg |
</gallery>


Связать MQTT Dash с контроллером Wiren Board можно двумя способами:
== Установка и настройка ==
#Считывать MQTT топики напрямую с контроллера, если контроллер и мобильное устройство с MQTT Dash работают в одной сети или контроллер имеет «белый» IP-адрес.
'''Установите приложение''' MQTT Dash на свое устройство.  
#Настроть передачу через [[MQTT#Работа_с_сообщениями_MQTT_с_внешнего_устройства | внешний MQTT-брокер]]. В этом случае «белый» IP-адрес контроллеру не нужен.


== Установка и подключение к брокеру==
После установки войдите в программу.
'''Установите приложение''' [https://play.google.com/store/apps/details?id=net.routix.mqttdash MQTT Dash из GooglePlay] на смартфон или планшет. 


'''Создайте новое подключение.''' В MQTT Dash можно создать несколько подключений, которые будут получать данные от разных брокеров или от одного брокера. Это удобно если вам нужно контролировать несколько помещений.
'''Создайте новое подключение.''' В MQTT Dash можно создать несколько подключений, которые будут получать данные от разных брокеров или от одного брокера. Это удобно если вам нужно контролировать несколько помещений.


Чтобы создать новое подключение выполните следующие действия:
Для создания подключения нажмите “+” в правом верхнем углу экрана и заполните поля настроек:
#Нажмите «'''+'''» в правом верхнем углу экрана.
#В появившемся окне задайте произвольное '''Имя''' подключения, которое будет отображаться на главном экране.
#Введите '''Адрес''' и '''Порт''', полученные от внешнего брокера или, в случае локального подключения, введите IP-адрес контроллера и порт 1883. О том как передавать данные с контроллера на внешний брокер читайте на странице про [[MQTT | MQTT в Wiren Board]].
#Укажите предоставленные брокером '''Имя пользователя''' и '''Пароль пользователя'''. При локальном подключении оставьте эти поля пустыми.
# '''Идентификатор клиента''' можно оставить по умолчанию.
#Задайте размер плиток и количество колонок с метриками по вертикали и горизонтали.
#Нажмите дискету в правом верхнем углу экрана. Вы попадете на главный экран и увидите созданное подключение.
#Откройте созданное подключение. Если никаких уведомлений не появилось значит подключение выполнено успешно. Если появились уведомления с ошибками, проверьте правильность заполнения данных.


<gallery mode="packed" heights="300px">
*''Имя'' - задается произвольное название панели, оно будет отображаться на главном экране;
*''Адрес'' - адрес брокера, его можно взять в панели управления брокера (как передавать данные с контроллера на внешний брокер читайте на странице про [[MQTT | MQTT в Wiren Board]]). Если ваше устройство и контроллер работают в одной сети можно получать данные напрямую с контроллера. В этом случае в поле адрес введите IP-адрес контроллера.
*''Порт'' - номер порта, который также можно получить у брокера. Если собираетесь получать данные напрямую с контроллера задайте порт 1883.
*''Имя пользователя'' - вводится имя пользователя со страницы брокера.
*''Пароль пользователя'' - пароль заданный брокером.
*''Идентификатор клиента'' - можно оставить по умолчанию.
*''Размер плиток'' - выбирайте любой, потом можно изменить.
*''Количество колонок с метриками по вертикали и горизонтали'' - указывается сколько столбцов или строк будет в вашей панели. Рекомендуется заполнить хотя-бы одно значение.
*Заполнение чек-боксов (галочки) можно оставить как есть.
<gallery mode="packed" heights="500px">
Image: MQTTDash_config1.jpg | Пример настроек подключения MQTT Dash напрямую к контроллеру Wiren Board
Image: MQTTDash_config1.jpg | Пример настроек подключения MQTT Dash напрямую к контроллеру Wiren Board
Image: MQTTDash_config2.jpg | Пример настроек подключения MQTT Dash к внешнему брокеру
Image: MQTTDash_config2.jpg | Пример настроек подключения MQTT Dash к внешнему брокеру
Image: MQTTDash_example5.jpg | Главный экран MQTT Dash
</gallery>
</gallery>


== Добавление устройств ==
После заполнения всех полей нажмите дискету в правом верхнем углу экрана. Вы попадете на главный экран и увидите созданное подключение. Войдите в него. Если никаких уведомлений не появилось значит подключение выполнено успешно. Если появились уведомления с ошибками, проверьте правильность заполнения данных.
После создания подключения к MQTT-брокеру можно создавать метрики:
 
#Откройте созданное подключение и нажмите «'''+'''» в правом верхнем углу экрана.  
'''Создайте метрики''' в новом подключении. Для этого нажмите + в правом верхнем углу экрана. В появившемся окне выберите тип метрики.
#Выберите тип метрики соответствующий типу подключаемого параметра.
 
#В открывшемся окне настройки задайте '''Имя''' и '''Адрес''' топика. Адрес топика можно посмотреть на вкладке '''Настройки-Каналы MQTT''' в [[Wiren_Board_Web_Interface | веб-интерфейсе]] контроллера или воспользоваться программой [[MQTT_Explorer | MQTT Explorer]].
Для выбора доступны несколько типов метрик.
#:Обратите внимание, что для чтения значения топика необходимо указать его адрес в поле '''Topic (sub)''' в виде <code>/devices/buzzer/controls/enabled</code>.  
 
#:Для записи параметра в топик необходимо указать в поле '''Topic (pub)''' адрес топика<code>/devices/buzzer/controls/enabled/on</code>.
''Текст'' - этот тип метрики служит для простого отображения принятого значения (например, температуры, влажности или любого другого текста). Данные принятого пакета должны быть строкой.
#Поставьте галку '''«Включить публикацию»''', если метрика используется для публикации значения в топик.  
 
#Задайте дополнительные параметры метрики, такие как цвет, изображение значка и т.д.
После выбора типа метрики откроется окно настройки. Задайте ''Имя'' и ''Адрес'' топика. Адрес топика можно посмотреть на вкладке '''Настройки-Каналы MQTT''' в веб-интерфейсе контроллера или воспользоваться программой [[MQTT_Explorer | MQTT Explorer]]. Удобнее воспользоваться программой.  
#Нажмите дискету в правом верхнем углу чтобы сохранить созданную метрику. Чтобы не заполнять одни и те же данные при создании нескольких однотипных метрик используйте инструмент '''«Клонировать»'''.
 
<gallery mode="packed" heights="350px">
Поставьте галку “Включить публикацию” если элемент используется для управления устройством. Иначе элемент будет только отображать текущее состояние параметра. Топики для чтения и управления могут быть разными, см. подсказки в программе.
 
После заполнения всех настроек метрики нажмите дискету в правом верхнем углу. На экране появится созданная метрика. Чтобы не заполнять одни и те же данные при создании нескольких однотипных метрик используйте инструмент “Клонировать”.
 
Чтобы изменить положение метрик на панели нажмите на "Замочек" в правом верхнем углу.
 
<gallery mode="packed" heights="350px">
Image: MQTTDash_example5.jpg | Главный экран MQTT Dash
Image: MQTTDash_example1.jpg| Настройка метрики типа ''Переключатель'' для зуммера контроллера Wiren Board
Image: MQTTDash_example1.jpg| Настройка метрики типа ''Переключатель'' для зуммера контроллера Wiren Board
Image: MQTTDash_example2.jpg | Настройка метрики типа ''Переключатель'' для модуля реле WB-MR6C
Image: MQTTDash_example2.jpg | Настройка метрики типа ''Переключатель'' для модуля реле WB-MR6C
Image: MQTTDash_example3.jpg | Настройка метрики типа ''Текст'' для вывода напряжения питания  
Image: MQTTDash_example3.jpg | Настройка метрики типа ''Текст'' для вывода напряжения питания  
Image: MQTTDash_example6.jpg | Настройка метрики типа ''Диапазон'' для управления громкостью зуммера
Image: MQTTDash_example4.jpg | Отображение метрик на панели MQTT Dash
Image: MQTTDash_example4.jpg | Отображение метрик на панели MQTT Dash
</gallery>
</gallery>
== Управление цветом RGB ленты с помощью MQTT Dash ==
[[Image: RGB_mqttdash.jpg |200px|thumb|right| Пример настройки метрики типа ''Цвет'' для управления цветом RGB-ленты]]
Для управления цветом RGB ленты в MQTT Dash есть специальная метрика '''Цвет'''. Но чтобы использовать эту метрику с Wiren Board нужно преобразовать код цвета полученный из MQTT Dash из формата HEX в формат RGB. К контроллеру RGB-лента подключается с помощью диммера светодиодных лент [[WB-MRGBW-D_Modbus_LED_Dimmer | WB-MRGBW-D]].
Для этого можно воспользоваться следующим [[Wb-rules | правилом]] (скриптом):
<syntaxhighlight lang="ecmascript">
defineVirtualDevice("colorButton",
{
title: "Color Buttons",  //Имя виртуального устройства
  cells: {
    "Dimmer 1": {
    type: "text",
    readonly: false,
    //forceDefault: true,
    value: "",
},
  }
});
defineRule("color_convert", {
whenChanged: "colorButton/Dimmer 1", 
then: function (newValue){
if(newValue.substring(0,1) == "#") {
  newValue = newValue.substring(1);
}
      r = parseInt("0x"+newValue.slice(0, 2));
      g = parseInt("0x"+newValue.slice(2, 4));
      b = parseInt("0x"+newValue.slice(4, 6));
      log.info("R;G;B",r+";"+g+";"+b)
      dev["wb-mrgbw-d-fw3_129/RGB Palette"] = r+";"+g+";"+b // R;G;B, строка передаваемая в топик диммера LED-лент
}
});
</syntaxhighlight>
Скрипт создает новый MQTT-топик, который получает HEX-код цвета из MQTT Dash. Затем этот код преобразуется в формат RGB и записывается в соответствующий топик диммера RGB-ленты.


== Полезные ссылки ==
== Полезные ссылки ==
*[[MQTT | MQTT в Wiren Board]]
*[[MQTT_Explorer | Программа MQTT Explorer]]
{{Wbincludes: Supported Devices}}

Версия 22:14, 2 августа 2022

Это черновик страницы. Последняя правка сделана 02.08.2022 пользователем Matveevrj.

Введение

MQTT Dash — мобильное приложение для работы с протоколом MQTT. Позволяет создавать пользовательские панели управления и управлять устройствами умного дома с помощью смартфона или планшета.

  • MQTTDash panel1.jpg
  • MQTTDash panel2.jpg
  • MQTTDash panel3.jpg

Установка и настройка

Установите приложение MQTT Dash на свое устройство.

После установки войдите в программу.

Создайте новое подключение. В MQTT Dash можно создать несколько подключений, которые будут получать данные от разных брокеров или от одного брокера. Это удобно если вам нужно контролировать несколько помещений.

Для создания подключения нажмите “+” в правом верхнем углу экрана и заполните поля настроек:

  • Имя - задается произвольное название панели, оно будет отображаться на главном экране;
  • Адрес - адрес брокера, его можно взять в панели управления брокера (как передавать данные с контроллера на внешний брокер читайте на странице про MQTT в Wiren Board). Если ваше устройство и контроллер работают в одной сети можно получать данные напрямую с контроллера. В этом случае в поле адрес введите IP-адрес контроллера.
  • Порт - номер порта, который также можно получить у брокера. Если собираетесь получать данные напрямую с контроллера задайте порт 1883.
  • Имя пользователя - вводится имя пользователя со страницы брокера.
  • Пароль пользователя - пароль заданный брокером.
  • Идентификатор клиента - можно оставить по умолчанию.
  • Размер плиток - выбирайте любой, потом можно изменить.
  • Количество колонок с метриками по вертикали и горизонтали - указывается сколько столбцов или строк будет в вашей панели. Рекомендуется заполнить хотя-бы одно значение.
  • Заполнение чек-боксов (галочки) можно оставить как есть.

  • Пример настроек подключения MQTT Dash напрямую к контроллеру Wiren Board

  • Пример настроек подключения MQTT Dash к внешнему брокеру

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

Создайте метрики в новом подключении. Для этого нажмите + в правом верхнем углу экрана. В появившемся окне выберите тип метрики.

Для выбора доступны несколько типов метрик.

Текст - этот тип метрики служит для простого отображения принятого значения (например, температуры, влажности или любого другого текста). Данные принятого пакета должны быть строкой.

После выбора типа метрики откроется окно настройки. Задайте Имя и Адрес топика. Адрес топика можно посмотреть на вкладке Настройки-Каналы MQTT в веб-интерфейсе контроллера или воспользоваться программой MQTT Explorer. Удобнее воспользоваться программой.

Поставьте галку “Включить публикацию” если элемент используется для управления устройством. Иначе элемент будет только отображать текущее состояние параметра. Топики для чтения и управления могут быть разными, см. подсказки в программе.

После заполнения всех настроек метрики нажмите дискету в правом верхнем углу. На экране появится созданная метрика. Чтобы не заполнять одни и те же данные при создании нескольких однотипных метрик используйте инструмент “Клонировать”.

Чтобы изменить положение метрик на панели нажмите на "Замочек" в правом верхнем углу.

  • Главный экран MQTT Dash

  • Настройка метрики типа Переключатель для зуммера контроллера Wiren Board

  • Настройка метрики типа Переключатель для модуля реле WB-MR6C

  • Настройка метрики типа Текст для вывода напряжения питания

  • Отображение метрик на панели MQTT Dash

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

Источник — https://wirenboard.com/wiki/index.php?title=MQTT_Dash&oldid=65795