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

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

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

3137 байт добавлено ,  1 год назад
→‎Управление цветом RGB ленты с помощью MQTT Dash
(Новая страница: «{{Draft}} {{DISPLAYTITLE: MQTT Dash и Wiren Board }} == Введение == MQTT Dash — мобильное приложение для работы с протоколом MQTT. Позволяет создавать пользовательские панели управления и управлять устройствами умного дома с помощью смартфона или планшета. <gallery mode="packed" heights="15...»)
 
 
(не показано 29 промежуточных версий 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="150px">
Image: FileName1 | Описание
Image: FileName2 | Описание
Image: FileName3 | Описание
</gallery>
== Установка и настройка ==
'''Установите приложение''' MQTT Dash на свое устройство.


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


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


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


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


После заполнения всех полей нажмите дискету в правом верхнем углу экрана. Вы попадете на главный экран и увидите созданное подключение. Войдите в него. Если никаких уведомлений не появилось значит подключение выполнено успешно. Если появились уведомления с ошибками, проверьте правильность заполнения данных.
<gallery mode="packed" heights="300px">
Image: MQTTDash_config1.jpg | Пример настроек подключения MQTT Dash напрямую к контроллеру Wiren Board
Image: MQTTDash_config2.jpg | Пример настроек подключения MQTT Dash к внешнему брокеру
Image: MQTTDash_example5.jpg | Главный экран MQTT Dash
</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>.
#Поставьте галку '''«Включить публикацию»''', если метрика используется для публикации значения в топик.
#Задайте дополнительные параметры метрики, такие как цвет, изображение значка и т.д.
#Нажмите дискету в правом верхнем углу чтобы сохранить созданную метрику. Чтобы не заполнять одни и те же данные при создании нескольких однотипных метрик используйте инструмент '''«Клонировать»'''.
<gallery mode="packed" heights="350px">
Image: MQTTDash_example1.jpg| Настройка метрики типа ''Переключатель'' для зуммера контроллера Wiren Board
Image: MQTTDash_example2.jpg | Настройка метрики типа ''Переключатель'' для модуля реле WB-MR6C
Image: MQTTDash_example3.jpg | Настройка метрики типа ''Текст'' для вывода напряжения питания
Image: MQTTDash_example6.jpg | Настройка метрики типа ''Диапазон'' для управления громкостью зуммера
Image: MQTTDash_example4.jpg | Отображение метрик на панели MQTT Dash
</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]].


После выбора типа метрики откроется окно настройки. Задайте ''Имя'' и ''Адрес'' топика. Адрес топика можно посмотреть на вкладке '''Настройки-Каналы MQTT''' в веб-интерфейсе контроллера или воспользоваться программой MQTT Explorer. Удобнее воспользоваться программой.  
Для этого можно воспользоваться следующим [[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
4265

правок

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