Веб-интерфейс контроллеров Wiren Board (wb-mqtt-homeui)

From Wiren Board
This is the approved revision of this page, as well as being the most recent.
Other languages:

Общая информация

Веб-интерфейс контроллера Wiren Board

В контроллерах Wiren Board есть встроенный веб-интерфейс, который позволяет выполнить большинство задач по настройке контроллера, встроенного ПО и подключённых устройств. Исходный код открыт и доступен в нашем репозитории.

В качестве веб-сервера работает nginx, сайт взаимодействует с MQTT через WebSocket.

Обзор возможностей веб-интерфейса контроллеров Wiren Board.

В некоторых устаревших версиях операционных систем или браузеров веб-интерфейс может работать некорректно. Если вы столкнулись с проблемами, рекомендуем проверить работу веб-интерфейса в браузере Google Chrome.

Как зайти в веб-интерфейс

Чтобы зайти в веб-интерфейс контроллера Wiren Board, подключитесь к контроллеру через Wi-Fi или Ethernet и введите в адресную строку браузера IP-адрес контроллера.

Если вы находитесь в одной сети с контроллером и используете компьютер с Linux, Windows 10 и выше или macOS, или любое устройство Apple, то можно использовать mDNS. Вместо IP-адреса введите в адресную строку http://wirenboard-XXXXXXXX.local, где ХХХХХХХХ — серийный номер контроллера.

Для обеспечения безопасности с использованием протокола HTTPS, при обращении к веб-интерфейсу, будет произведён переход на доменное имя IP.XXXXXXXX.ip.wirenboard.com (см. Безопасность соединения).

Также доступ можно получить через Wiren Board Cloud, если контроллер к нему подключен.

Безопасность соединения

Настройка HTTPS

Веб-интерфейс контроллера использует HTTPS для защиты соединения. Если открыть его по HTTP (используя IP-адрес или локальное имя wirenboard-XXXXXXXX.local), контроллер автоматически перенаправит на домен вида IP.XXXXXXXX.ip.wirenboard.com и установит защищённое соединение. Это по-прежнему прямое подключение к вашему контроллеру, трафик не идёт через сторонние сервисы. Если у вас настроены прокси или нестандартная маршрутизация, убедитесь, что этот домен доступен по тому же маршруту, что и исходный IP-адрес.

Сертификат выпускается автоматически: контроллер запрашивает его у Let’s Encrypt через сервер acme.wirenboard.com. Для выпуска и автоматического продления сертификата нужен доступ в Интернет, контроллер сам следит за актуальностью. Если срок действия сертификата истёк, и обновить его не удалось, при открытии веб-интерфейса браузер покажет предупреждение.

Факт выпуска сертификата виден в публичных сервисах — это нормально и не является уязвимостью: там нет данных о владельце или расположении контроллера, и эта информация не даёт возможности организовать несанкционированный доступ. Механизм настройки HTTPS через сервисы Wiren Board можно в любой момент отключить или снова включить в настройках веб-интерфейса.

Аутентификация и авторизация пользователя

Веб-интерфейс поддерживает три уровня доступа: Администратор, Оператор и Пользователь.

Тип пользователя Доступные действия Ограничения
Пользователь Просмотр дашбордов и истории, доступ к MQTT и запросы для проверки доступности портов. Не может изменять настройки, загружать или обновлять прошивку, скачивать архивы и бэкапы.
Оператор Доступ ко всему, что есть у Пользователя. Может создавать и редактировать дашборды. Не может изменять настройки контроллера и управлять пользователями.
Администратор Полный доступ ко всем настройкам и правилам, управление пользователями, обновление прошивки, скачивание архивов. Без ограничений.
Настройка пользователей

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

Аутентификация производится по логину и паролю. При использовании одного и того же браузера повторный ввод логина и пароля не требуется. Также можно указать Пользователя, от имени которого веб-интерфейс будет открываться без запроса ввода логина и пароля.

Управлять пользователями также можно, используя консольную утилиту wb-homeui-users.

Смена уровня доступа

Уровень «Администратор»

Для изменения настроек контроллера вам нужен уровень доступа Администратор, который можно выставить в разделе Настройки → Права доступа.

После завершения настроек рекомендуем поставить уровень доступа Пользователь или Оператор — это поможет не совершить случайных ошибок при ежедневной работе с веб-интерфейсом.



Уровень доступа зависит от учетной записи, аутентификация пользователей происходит по логину и паролю. Для изменения настроек контроллера ваша учетная запись должна иметь уровень доступа Администратор. Управление учетными записями доступно в разделе Настройки → Пользователи. Подробнее см. Аутентификация и авторизация пользователя.

Настройка подключения к MQTT и выбор языка

Настройки веб-интерфейса

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

Настройка времени (NTP)

Редактор /etc/ntp.conf

В разделе Настройки → Конфигурационные файлы → Синхронизация даты и времени (NTP) доступен веб-интерфейс для настройки системной службы времени (редактирование файла /etc/ntp.conf).

Контроллер имеет встроенные аппаратные часы (RTC), но для точной работы ему необходимо периодически сверять время с эталонными источниками. Это важно для:

  • диагностики — чтобы события в логах имели правильные метки времени;
  • автоматизации — для корректной работы сценариев, привязанных к расписанию;
  • безопасности — работа HTTPS и SSL-сертификатов невозможна при большой рассинхронизации времени.

Работа с конфигурацией

По умолчанию в контроллере уже прописаны надежные публичные серверы (pool.ntp.org). Менять настройки обычно нужно только в двух случаях:

  1. Работа в закрытой сети: если у контроллера нет доступа в интернет, нужно удалить внешние серверы и указать IP-адрес локального источника времени (например, роутера или корпоративного сервера).
  2. Специфические требования: использование корпоративных NTP-серверов для единого времени во всей инфраструктуре.

Параметры

В интерфейсе можно добавлять, удалять или редактировать источники времени.

Режимы синхронизации:

  • pool — (Рекомендуется для интернета). Аналогичен режиму server, но используется для указания DNS-имен пулов (например, pool.ntp.org), за которыми стоит множество серверов;
  • server — Режим клиента. Контроллер синхронизируется с удаленным сервером или локальными эталонными часами, но удаленный сервер никогда не синхронизируется с контроллером;
  • peer — Симметричный активный режим. Контроллер может синхронизироваться с удаленным узлом (пиром), либо удаленный узел может синхронизироваться с контроллером. Это полезно в кластерах, где любой из узлов может оказаться лучшим источником времени в зависимости от сбоев;
  • broadcast — Режим широковещания. Локальный сервер периодически отправляет сообщения клиентам по широковещательному (broadcast) или групповому (multicast) адресу. Обычно используется для передачи времени множеству устройств в локальной сети;
  • manycastclient — Клиентский режим с автоматическим поиском. Клиент отправляет запрос на групповой (multicast) адрес, доступные серверы отвечают, и клиент выбирает лучший из них для синхронизации, отбрасывая остальные.

Опции:

  • Адрес сервера — DNS-имя или IP-адрес источника времени;
  • Отправка множественных запросов (iburst) — Если сервер недоступен, отправляет пачку из восьми пакетов вместо одного обычного. Это позволяет быстрее синхронизировать часы при восстановлении связи или перезагрузке. Опция действительна только для команд server.

Список устройств

На странице Устройства находятся виртуальные представления физически подключённых к контроллеру устройств или виртуальных устройств, созданных скриптами wb-rules.

Каждое устройства представлено карточкой, которая содержит каналы устройства — контролы. Если нажать на название контрола, то вы получите путь вида device/control, который можно использовать при написании скриптов на wb-rules.

Не используйте эту страницу для управления системой автоматизацией, для этого есть панели.

  • Список устройств, подключённых к контроллеру

  • Удаление карточки устройства

Системные устройства

На странице устройств также отображаются виджеты системных модулей: сведения о системе, информация о сети, температура процессора и платы, а также другие служебные данные.

Документация по системным устройствам:

Интерактивные панели и виджеты

Панели

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

Текстовая панель состоит из виджетов, а графическая — из фонового изображения с привязками к MQTT-каналам контроллера. Как сделать SVG-панель.

  • Список панелей

  • Текстовая панель

  • SVG-панель

Виджеты

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

Создавать виджеты можно в разделе Виджеты, или прямо из панели. Есть визуальный конструктор и редактор JSON.

  • Список виджетов

  • Создание нового виджета из панели

  • Конструктор виджета

  • Вид JSON

  • Готовый виджет

  • Кнопки редактирования

Полноэкранный и HMI режимы

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

Мы добавили несколько режимов, которые позволят изменить компоновку веб-интерфейса в зависимости от задач.

Полноэкранный режим

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

В этом режиме остаётся список панелей и вкладка История, а верхняя панель веб-интерфейса скрывается, экономя место на экране. Режим удобно использовать, если у вас большая и сложная система с несколькими дашбордами и там нужна аналитика исторических данных.

Чтобы перейти в полноэкранный режим, откройте любую панель и нажмите справа вверху кнопку Открыть окно в полноэкранном виде.

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

Чтобы скрыть заголовок браузера автоматически при старте, запустите его в режиме «Киоск»: Переключение браузера в режим киоска.

  • Полноэкранный режим

  • Компьютер

  • Компьютер, во весь экран

  • Телефон

  • Телефон, во весь экран

Рабочее место оператора

Рабочее место оператора, параметр ?fullscreen

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

Чтобы открыть панели в этом режиме, добавьте в адресную строку параметр ?fullscreen: 

# Для текстовой панели
http://192.168.2.108/#!/dashboards/dashboard1?fullscreen

# Для svg-панели
http://192.168.2.108/#!/dashboards/svg/view/dashboard3?fullscreen

Режим HMI

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

Чтобы открыть панель в режиме HMI, добавьте в адресную строку параметр ?hmi. Примеры, где dashboard1 — ID текстовой панели, а dashboard3 — svg: 

# Для текстовой панели
http://192.168.2.108/#!/dashboards/dashboard1?hmi

# Для svg-панели
http://192.168.2.108/#!/dashboards/svg/view/dashboard3?hmi

Иногда надо сменить фон панели, сделать это можно с помощью параметра hmicolor=%23abcdef. Пример ниже сделает фон панели светло-синим, где %23abcdef — код цвета в шестнадцатеричном виде #abcdef: 

# Для текстовой панели
http://192.168.2.108/#!/dashboards/dashboard1?hmi&hmicolor=%23abcdef

# Для svg-панели
http://192.168.2.108/#!/dashboards/svg/view/dashboard3?hmi&hmicolor=%23abcdef

Чтобы скрыть заголовок браузера автоматически при старте, запустите его в режиме «Киоск»: Переключение браузера в режим киоска.

  • Режим HMI

  • Без параметров

  • Параметр ?hmi

  • Параметры ?hmi&hmicolor=%23abcdef

  • Без параметров

  • Параметр ?hmi

  • Параметры ?hmi&hmicolor=%231a1a1a

Переключение браузера в режим киоска

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

Этот режим удобно использовать при создании рабочего места оператора: добавляете в автозагрузку запуск браузера в режиме киоска у вас получается панель управления системой без возможности свернуть или закрыть окно.

Как это сделать:

  1. Откройте веб-интерфейс контроллера.
  2. Скопируйте в адресной строке браузера URL.
  3. Запустите браузер без панелей:
    • На компьютерах и планшетах с ОС Windows/Linux запустите браузер в режиме киоска и передайте ему параметром URL панели, примеры: 
      firefox -kiosk 'http://wirenboard-ascmdm6q.local/#!/dashboards/dashboard1' 
chromium -kiosk 'http://wirenboard-ascmdm6q.local/#!/dashboards/dashboard1'
    • На планшетах с Android используйте специальные версии браузеров, например, Fully Kiosk Browser.

Этот режим можно комбинировать с полноэкранным режимом и режимом HMI, описанными выше.

История полученных данных

Кнопка перехода к истории измерений

По умолчанию стандартное ПО контроллера хранит все полученные данные, которые вы можете посмотреть в виде графиков или таблицы. Данные можно выгрузить в csv, для этого нажмите на кнопку под графиком, или воспользуйтесь утилитой wb-mqtt-db-cli.

Для просмотра истории перейдите в раздел История и выберите нужные каналы, или наведите курсор на канал виджета и нажмите кнопку с изображением гистограммы.

Возможности отображения:

  • выбор периода;
  • одновременный просмотр нескольких каналов;
  • масштабирование;
  • снятие скриншота;
  • два графика на каждый канал — значения в базе и «дельта».
  • курсорные измерения.

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

Как работает история

Драйвер wb-mqtt-db записывает значение величины через указанный пользователем интервал времени.

На графике для каждого канала есть:

  • яркая цветная линия — это средние значения за период;
  • и полупрозрачные области того же цвета — это «дельта», которая показывает максимум и минимум значений за период между записями в базу.

Например, если сигнал быстро меняется, но нам не нужна информация обо всех значениях — увеличиваем интервал записи и экономим на размере БД. А «Дельта» позволит нам не потерять информацию о максимальных и минимальных значениях величины между записями.

Если вас не устраивает «Дельта» и вы хотите писать больше точек в базу, то:

  • для сигналов, которые меняются быстро — уменьшите значение в параметре «Минимальный интервал записи значений»;
  • для сигналов, которые меняются медленно — настройте параметр «Максимальное количество внеочередных записей».

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

  1. Группируете каналы по группам. По умолчанию создана группа all, куда включены все существующие mqtt-каналы по маске +/+.
  2. Далее настраиваете параметр «Максимальное количество записей на канал» для каждого канала.
  3. И, чтобы не было сюрпризов, вроде заполненной памяти контроллера, ограничиваете «Максимальное количество записей на группу».

Значения для построения графиков получаются следующим образом:

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


  • Примеры скриншотов

  • График

  • Табличное представление

  • Данные, выгруженные в CSV

  • Настройка хранения истории

Скрипты автоматизации

В веб-интерфейсе контроллера есть редактор скриптов wb-rules, который позволяет создавать, редактировать и удалять правила. Если в скрипте есть ошибки, то редактор сообщит вам об этом и укажет место в скрипте.

Редактор доступен в разделе Правила, используется CodeMirror, горячие клавиши: 

Ctrl + D — множественное редактирование
Ctrl + / — закомментировать / раскомментировать строки
Ctrl + [ — убрать отступ
Ctrl + ] — добавить отступ
Ctrl + C — копировать в буфер обмена
Ctrl + V — вставить из буфера обмена
Ctrl + Z — отмена последнего действия
Ctrl + Shift + Z — повторить последнее отменённое действие
Ctrl + U — повторить последнее выделение
Ctrl + I — выделить всё между парными скобками, если повторить — выделяется уровень выше
Ctrl + пробел — показать подсказку ввода
Ctrl + Shift + Left — выделить слово слева
Ctrl + Shift + Right — выделить слово справа
Ctrl + Shift + K — удалить строку
Ctrl + Backspace — удалить часть слова до курсора
Ctrl + Delete — удалить часть слова после курсора

  • Редактор скриптов

  • Подсветка ошибок

Настройка контроллера и подключённых устройств

Конфигурационные файлы

Контроллер Wiren Board работает на Linux, поэтому почти все настройки хранятся в конфигурационных файлах. Файлы можно редактировать через SSH или с помощью веб-конфигуратора.

Список доступных настроек вы найдёте в разделе Настройки → Конфигурационные файлы.

Например, через веб-интерфейс можно настроить подключённые Modbus-устройства, шлюзы KNX и Modbus RTU/TCP Slave и другие параметры.

Поиск устройств Wiren Board на шине RS-485

Подробнее про добавление устройств в конфигурацию контроллера.

Сканирование, как отдельная функция

Сканирование шины работает только для устройств с поддержкой Быстрого Modbus. В релизах wb-2207 и старее сканирование недоступно;
В релизах с wb-2304 по wb-2404 сканирование доступно в разделе Настройки → Сканирование

В релизах wb-2407 и новее


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

Настройки → Конфигурационные файлы → Настройка драйвера serial-устройств → Найти и добавить устройства

  • Галерея

  • Настройка драйвера serial-устройств

  • Сканирование шины

Уведомления о событиях

В веб-интерфейсе контроллера можно настроить отправку уведомления о событиях по SMS или Email, например, при срабатывании тревоги в модуле WB-MWAC, отправить SMS на заданный номер. Настройка модуля уведомлений.


Модуль уведомлений поддерживает отправку сообщений в Telegram.


Также вы можете отправлять уведомления в Телеграм, используя скрипт на wb-rules, пример.

Обновление прошивки и выгрузка диагностического архива

Обновление ПО и выгрузка диагностики

Обновить ПО контроллера без доступа к интернету можно через веб-интерфейс, для этого вам понадобится компьютер и заранее загруженный fit-файл прошивки. Подробнее про обновление ПО контроллера читайте на странице Программное обеспечение Wiren Board.

Если в работе контроллера возникли ошибки, то при обращении в техническую поддержку рекомендуем выгрузить диагностический архив — это поможет нам быстрее разобраться в проблеме. Архив содержит только необходимую информацию для диагностики и не включает конфиденциальные данные. Описание структуры архива.

Выгрузить диагностический архив можно двумя способами:

  • Перейдите в веб-интерфейсе на вкладку Настройки → Система и найдите раздел Сбор данных для диагностики. Сформируйте, а затем скачайте архив.
  • Подключитесь к контроллеру по SSH и введите команду: 
    wb-diag-collect diag
    архив будет сохранён в текущую папку, обычно это /root — оттуда его можно сохранить на компьютер.

Резервная копия

Если вы не нашли этого раздела в своём контроллере — обновите его ПО. Контроллер работает под операционной системой Debian Linux, поэтому все настройки хранятся в файлах. Вы можете создавать резервные способы любыми доступными средствами, например, командой rsync.

Кнопки резервного копирования

Кроме этого вы можете скачать резервную копию из веб-интерфейса в разделе Настройки → Система. Доступно три варианта загрузки:

  • Скачать архив с rootfs — соберёт всё содержимое корня в архив. Не включает в себя настройки системы, которые находятся в /mnt/data, а симлинки лежат в /etc. Размер архива может быть от сотен мегабайт до единиц гигабайт.
  • Скачать файлы конфигурации — соберёт в архив все системные файлы конфигурации, скрипты с модулями wb-rules, а также конфиги zigbee2mqtt и Sprut.hub. Самый компактный архив, около 20 Мбайт. Если вы не устанавливали сторонний софт, его содержимого будет достаточно для восстановления.
  • Скачать всё — соберёт в архив всё, что есть на контроллере: файлы конфигурации, установленный софт и т.п. Самый большой архив, зато позволяет сохранить конфиги стороннего софта, который мы не включили в компактный архив с файлами конфигурации.

Восстанавливаются резервные копии вручную через копирование файлов на контроллер, общий алгоритм восстановления такой:

  1. Установить нужный софт. Инструкция, как работать с файлами на контроллере.
  2. Скопировать конфиги и скрипты из резервной копии на контроллер.

Резервное копирование настроек контроллера через консоль.

Просмотр MQTT-каналов и системного журнала

Список MQTT-каналов пригодится при диагностике неисправностей, или при настройке интеграции со сторонним ПО, например, Rapid SCADA или Home Assistant. Список доступен в разделе Настройки → MQTT-каналы. Описание структуры топиков и общие рекомендации, смотрите в статье MQTT.

Системный журнал ОС Linux можно посмотреть с помощью утилиты journalctl или в веб-интерфейсе контроллера в разделе Настройки → Системный журнал.

  • MQTT-каналы

  • Системный журнал

Проверка открытых портов и стандартных паролей

Пример списка опасностей.

В ПО контролера есть возможность определять популярные проблемы безопасности:

  • стандартный пароль к SSH на портах 22, 25, 23, 2222, 8022, 9002, 9022;
  • открытый MQTT-брокер на стандартном порту 1883;
  • открытый веб-интерфейс на популярных портах 80, 8080, 443 и порт, по которому пользователь зашёл в веб-интерфейс контролера.

Если контроллер доступен из интернета и в нём есть одна из проблем — в его веб-интерфейсе появится предупреждение и ссылка на эту инструкцию.

Как работает

Когда вы открываете веб-интерфейс контроллера, специальный сервис отправляет запрос на https://probe.wirenboard.com/ и сервер пытается подключиться по списку популярных портов и стандартных протоколов. Используется IP-адрес с которого пришёл запрос к нам на сервер, а также IP-адрес по которому пользователь зашёл в веб-интерфейс. Локальные адреса и дубли игнорируются.

Если ему это удаётся, он отдаёт назад на контроллер список проблем, которые отображаются пользователю в веб-интерфейсе. После устранения проблем, нажмите в браузере на странице веб-интерфейса контроллера F5. Сервис отправит повторный запрос и сообщение исчезнет если проблемы устранены.

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

Это не панацея

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

Также процедура не проверяет открытую точку доступа Wi-Fi.

Управление с телефона

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

Альтернативой может быть использование сторонних приложений: MQTT_Dash, Home Assistant, Салют! Умный дом и других, полный список смотрите в таблице поддерживаемых устройств и программ.

  • Веб-интерфейс контроллера в телефоне

  • Список устройств

  • Боковая панель

  • SVG-панель

  • Просмотр системного журнала

  • Настройка Modbus-устройства

Предыдущая версия

Retrieved from "https://wiki.wirenboard.com/wiki/index.php?title=Wiren_Board_Web_Interface&oldid=92632"