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

MQTT Dash (просмотреть исходный код)

Версия 17:22, 6 апреля 2023

2107 байт добавлено ,  1 год назад
→‎Управление цветом RGB ленты с помощью MQTT Dash
 
(не показано 28 промежуточных версий 2 участников)
Строка 1: Строка 1:
{{Draft}}
{{DISPLAYTITLE: Подключение MQTT Dash к контроллеру Wiren Board }}
{{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 Dash на свое устройство.  
#Считывать MQTT топики напрямую с контроллера, если контроллер и мобильное устройство с MQTT Dash работают в одной сети или контроллер имеет «белый» IP-адрес.
#Настроть передачу через [[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}}
Matveevrj
translator, wb_editors
4251

правка

Источник — https://wirenboard.com/wiki/Служебная:Сравнение_версий/65795...72992