Wiren Board Web Interface: различия между версиями

Материал из Wiren Board
(не показано 156 промежуточных версий 5 участников)
Строка 1: Строка 1:
<languages/>
<languages/><translate>
<translate>
{{DISPLAYTITLE: Веб-интерфейс контроллеров Wiren Board}}
<!--T:1-->
== Общая информация == <!--T:1-->
[[Файл:Web-Home-2.0.png|thumb|700 px|Главная страница веб-интерфейса]]
{{Anchor|features}}
Контроллер Wiren Board имеет встроенный веб-интерфейс.
В контроллерах Wiren Board есть встроенный веб-интерфейс, который позволяет выполнить большинство задач по настройке контроллера, встроенного ПО и подключённых устройств. Исходный код открыт и доступен в [https://github.com/wirenboard/ нашем репозитории].
Через интерфейс можно:
*следить за состоянием контроллера и подключённых устройств и управлять ими;
*подключать устройства к контроллеру;
*настраивать контроллер и обновлять его ПО;
*писать правила на встроенном движке;
*настраивать SMS и email-уведомления;
*смотреть на графике историю значений (например, температуры).


<!--T:203-->
<!--T:2-->
Веб-интерфейс работает непосредственно на Wiren Board. В качестве веб-сервера работает [http://nginx.org nginx], сайт взаимодействует с MQTT через [http://en.wikipedia.org/wiki/WebSocket WebSocket].
В качестве веб-сервера работает [http://nginx.org nginx], сайт взаимодействует с MQTT через [http://en.wikipedia.org/wiki/WebSocket WebSocket].


{{Wbincludes:WebUI Update}}
<!--T:3-->
[https://wirenboard.com/ru/pages/wb-software/ Обзор возможностей веб-интерфейса контроллеров Wiren Board].


Описание предыдущей версии можно найти на странице [[Веб-интерфейс_Wiren_Board_1.0| Веб-интерфейс Wiren Board 1.0]].
== Как зайти в веб-интерфейс == <!--T:4-->
{{Anchor|how-to-enter}}
{{Wbincludes:How to enter}}
 
== Смена уровня доступа == <!--T:5-->
{{Anchor|change-access-level}}
{{Wbincludes:WebUI Change Access Level}}
 
== Настройка подключения к MQTT и выбор языка == <!--T:6-->
{{Anchor|webui}}
[[Image: Web-Configs-2.0 webui.png |300px|thumb|right| Настройки веб-интерфейса ]]
В разделе '''Настройки''' → '''Веб-интерфейс''' можно настроить подключение к MQTT-брокеру, выбрать панель для домашней страницы и сменить язык веб-интерфейса.
 
<!--T:7-->
Веб-интерфейс не поддерживает авторизацию пользователя, но вы можете настроить http-авторизацию сервера nginx. Подробные инструкции смотрите в статье [[WebUI_Password| Защита веб-интерфейса контроллера паролем]].
 
== Список устройств == <!--T:8-->
{{Anchor|devices}}
На странице '''Устройства''' находятся виртуальные представления физически подключённых к контроллеру устройств или виртуальных устройств, созданных скриптами [[wb-rules]].
 
<!--T:9-->
Каждое устройства представлено карточкой, которая содержит каналы устройства — контролы. Если нажать на название контрола, то вы получите путь вида <code>device/control</code>, который можно использовать при написании скриптов на wb-rules.
 
<!--T:10-->
Не используйте эту страницу для управления системой автоматизацией, для этого есть панели.


== Основные отличия новой версии == <!--T:205-->
<!--T:11-->
<gallery mode="packed" heights="150px">
Image: Web-Devices-2.0.png | Список устройств, подключённых к контроллеру
Image: Web-Devices-Delete-Device-2.0.png | Удаление карточки устройства
</gallery>


<!--T:206-->
== Интерактивные панели и виджеты == <!--T:12-->
* Каждый виджет может содержать произвольное число каналов, в виджете каналы можно переименовывать
{{Anchor|dashboards-and-widgets}}
* Отдельные устройства теперь автоматически сворачиваются в виде плиток, если не помещаются на экране. Плитки можно развернуть или свернуть
=== Панели ===
* Появились уровни доступа к интерфейсу (пользователь, оператор, администратор). Текущий уровень доступа отображается в правом верхнем углу интерфейса, рядом со значком состояния подключения
{{Anchor|dashboards}}
* Улучшенный интерфейс для мобильных устройств
Вы можете создавать текстовые и графические SVG-панели для отображения данных и управления системой автоматизации.
* По клику на канал или значение название канала или его значение копируются в буфер обмена
* Историю значений можно посмотреть, нажав на кнопку, появляющуюся рядом со значением при наведении
* Историю значений можно скачивать в виде текстового файла
* Исторические данные загружаются постепенно; возможно сравнивать значения нескольких каналов
* Удаление лишних MQTT-топиков из интерфейса
* Все настройки отображения теперь хранятся в конфиг-файле /etc/wb-ui.conf в формате JSON. Теперь их можно редактировать и генерировать из сторонних программ и очень просто копировать с одного контроллера на другой
* Отсутствуют "Комнаты"
* Сохранение конфигурации интерфейса при обновлении предыдущей версии веб-интерфейса.


== Как зайти в веб-интерфейс == <!--T:2-->
<!--T:13-->
{{Wbincludes:How to enter}}
Текстовая панель состоит из виджетов, а графическая — из фонового изображения с привязками к MQTT-каналам контроллера. [[SVG-Dashboards | Как сделать SVG-панель]].
 
<!--T:41-->
<gallery mode="packed" heights="150px">
Image: Web-Dashboards-2.0.png | Список панелей
Image: Text-Dashboard Example.png | Текстовая панель
Image: SVG-Dashboard Example.png | SVG-панель
</gallery>
 
=== Виджеты === <!--T:16-->
{{Anchor|widgets}}
С помощью виджетов удобно объединять контролы разных устройств по смыслу, или местонахождению. Например, можно сделать виджет для управления освещением в спальне, или виджет климата в магазине. Виджеты группируются в панели, один виджет может быть добавлен в несколько панелей.
 
<!--T:17-->
Создавать виджеты можно в разделе '''Виджеты''', или прямо из панели. Есть визуальный конструктор и редактор JSON.
 
<!--T:18-->
<gallery mode="packed" heights="150px">
Image: webui-widgets.png | Список виджетов
Image: widget-create-1.png | Создание нового виджета из панели
Image: widget-create-2.png | Конструктор виджета
Image: widget-create-2.2.png | Вид JSON
Image: widget-create-3.png | Готовый виджет
Image: widget-create-4.png | Кнопки редактирования
</gallery>
 
== Полноэкранный и HMI режимы ==
 
<!--T:43-->
{{Anchor|fullscreen-and-hmi}}
{{SupportedSinceRelease
| release = wb-2210
|content=
В обычном режиме в веб-интерфейсе много ненужных в повседневной работе пунктов меню, а верхняя панель и заголовок браузера отъедают много места по вертикали.
 
Мы добавили несколько режимов, которые позволят изменить компоновку веб-интерфейса в зависимости от задач.
 
=== Полноэкранный режим ===
Режим позволяет оперативно переключаться между видами с помощью кнопки. Удобно использовать, например, при просмотре панелей с мобильного телефона или при создании дашбордов.
 
В этом режиме остаётся ''список панелей'' и вкладка ''История'', а верхняя панель веб-интерфейса скрывается, экономя место на экране. Режим удобно использовать, если у вас большая и сложная система с несколькими дашбордами и там нужна аналитика исторических данных.


== Работа с веб-интерфейсом == <!--T:207-->
Чтобы перейти в полноэкранный режим, откройте любую панель и нажмите справа вверху кнопку '''Открыть окно в полноэкранном виде'''.
[[File:Web-Acess_Level-2.0.png|thumb|center|600 px|Выбор уровня доступа]]


<!--T:208-->
Учитывайте, что из-за политики безопасности браузеров скрыть заголовок браузера параметром командной строки невозможно, поэтому запускайте браузер в режиме киоска или используйте специальную сборку, читайте об этом ниже.
Для начала работы с веб-интерфейсом выберите уровень доступа. Для этого на вкладке '''Settings -> Change access level -> Acess Level''' выберите один из пунктов '''User, Operator''' или '''Administrator'''.
Уровни ограничивают доступ к функционалу веб-интерфейса: например, пользователь '''User''' может просматривать только настроенные виджеты, их редактирование и изменение настроек контроллера недоступно. Пользователь '''Operator''' получает доступ к контролам устройств, управляемых контроллером, может добавлять виджеты в панели (dashboards) (см. далее). Пользователь '''Administrator''' обладает всеми правами. Изменение текущего уровня доступа может быть изменено любым пользователем и предназначено больше для защиты от неверных действий, чем для разграничения прав.  


<!--T:209-->
Чтобы скрыть заголовок браузера автоматически при старте, запустите его в режиме «Киоск»: [[#kiosk-mode|Переключение браузера в режим киоска]].
В дальнейшем изложении мы предполагаем, что все действия выполняются пользователем '''Administrator'''.  


<!--T:210-->
<gallery mode="packed" heights="150px" caption="Полноэкранный режим">
Чтобы получить уровень доступа '''Administrator''', на вкладке '''Access Level''' выберите опцию '''Administrator''', подтвердите выбор, установив флажок в поле '''"I take full responsibility for my actions"''', и нажмите кнопку '''Apply''' (как показано на рисунке "Выбор уровня доступа").
Image: WebUI Fullscreen Button.png | Компьютер
Image: WebUI Fullscreen.png | Компьютер, во весь экран
Image: WebUI Fullscreen Mobile off.png | Телефон
Image: WebUI Fullscreen Mobile on.png | Телефон, во весь экран
</gallery>


== Разделы интерфейса == <!--T:4-->
=== Рабочее место оператора ===
[[Image: WebUI Workplace Mode.png |300px|thumb|right| Рабочее место оператора, параметр <code>?fullscreen</code> ]]
Режим похож на полноэкранный, но в при его активации нет кнопки выхода из режима. Это позволяет в комбинации с [[#kiosk-mode|режимом браузера «Киоск»]] сделать рабочее место оператора, из которого он не сможет выйти в другие приложения или получить доступ к адресной строке и отключить режим.


=== Home (Главная страница) === <!--T:6-->
Чтобы открыть панели в этом режиме, добавьте в адресную строку параметр <code>?fullscreen</code>:
[[File:Web-Home-2.0.png|thumb|center|600 px|Home - главная страница]]
<syntaxhighlight lang="ini">
# Для текстовой панели
http://192.168.2.108/#!/dashboards/dashboard1?fullscreen


<!--T:7-->
# Для svg-панели
Это главная страница пользователя. На неё выводятся элементы интерфейса - так называемые "виджеты" (widget). Это могут быть показания датчиков (например, датчика температуры), кнопки включения света, управления подключёнными реле.
http://192.168.2.108/#!/dashboards/svg/view/dashboard3?fullscreen
Набор виджетов на главной странице полностью настраивается пользователем в меню '''Settings -> Web UI -> Common Info''', где можно выбрать панель, которая будет отображаться во вкладке '''Home''' по умолчанию.
</syntaxhighlight>


=== Dashboards (Панели) === <!--T:8-->
=== Режим HMI ===
[[File:Web-Dashboards-2.0.png|thumb|600 px|center|Dashboards - список панелей]]
Если вы используете для управления системой автоматизации планшет или сенсорный экран и вам не нужны левое меню и верхняя панель со статусом подключения, то вы можете их убрать, включив режим HMI.


<!--T:9-->
Чтобы открыть панель в режиме HMI, добавьте в адресную строку параметр <code>?hmi</code>. Примеры, где ''dashboard1'' — ID текстовой панели, а ''dashboard3'' — svg:
Виджеты со схожим назначением можно группировать в панели, где на одном экране находятся все необходимые кнопки, настройки и показатели датчиков. Например, можно объединить виджеты включения подогрева, кондиционера, отображения температуры и влажности. В разделе '''Dashboards''' можно увидеть все созданные панели. Раздел Home тоже отображает одну из панелей, выбранную в настройках.
<syntaxhighlight lang="ini">
# Для текстовой панели
http://192.168.2.108/#!/dashboards/dashboard1?hmi


<!--T:211-->
# Для svg-панели
Дважды щелкнув по вкладке '''Dashboards''' на боковой панели, можно раскрыть список всех панелей, созданных в веб-интерфейсе.
http://192.168.2.108/#!/dashboards/svg/view/dashboard3?hmi
</syntaxhighlight>


=== Devices (Устройства) === <!--T:10-->
Иногда надо сменить фон панели, сделать это можно с помощью параметра <code>hmicolor=%23abcdef</code>. Пример ниже сделает фон панели светло-синим, где <code>%23abcdef</code> — код цвета в шестнадцатеричном виде <code>#abcdef</code>:
[[File:Web-Devices-2.0.png|thumb|center|700 px|Devices - список всех аппаратных функций контроллера и подключённых устройств]]
<syntaxhighlight lang="ini">
# Для текстовой панели
http://192.168.2.108/#!/dashboards/dashboard1?hmi&hmicolor=%23abcdef


<!--T:11-->
# Для svg-панели
На странице '''Devices''' отображаются все аппаратные возможности контроллера (состояние входов, выходов, напряжение питания), а также подключённых датчиков и устройств. Если вы подключили к контроллеру внешний модуль, все его меняющиеся значения будут отображены тут.
http://192.168.2.108/#!/dashboards/svg/view/dashboard3?hmi&hmicolor=%23abcdef
</syntaxhighlight>


<!--T:212-->
Чтобы скрыть заголовок браузера автоматически при старте, запустите его в режиме «Киоск»: [[#kiosk-mode|Переключение браузера в режим киоска]].
Каждый элемент устройства (показание значения напряжения, сетевой адрес, кнопка управления реле, флажок состояния входа  и т.п.) -- называется "контрол". Несколько контролов могут быть объединены в один виджет. Подробнее смотрите в разделе [[#Widgets (Виджеты)|Widgets (Виджеты)]].


<!--T:213-->
<gallery mode="packed" heights="150px" caption="Режим HMI">
Подключаемые устройства (Modbus-модули, боковые и внутренние модули) '''не''' определяются контроллером автоматически. Чтобы на этой странице появились аппаратные возможности подключённых устройств (например, внешних модулей реле), сначала нужно настроить их через раздел [[#Configs |Configs (Конфигурирование)]].
Image: WebUI HMI.png | Без параметров
Image: WebUI HMI hmi.png | Параметр <code>?hmi</code>
Image: WebUI HMI hmi_hmicolor.png | Параметры <code>?hmi&hmicolor=%23abcdef</code>
Image: WebUI SVG.png | Без параметров
Image: WebUI SVG HMI hmi.png  | Параметр <code>?hmi</code>
Image: WebUI SVG HMI mode.png | Параметры <code>?hmi&hmicolor=%231a1a1a</code>
</gallery>


<!--T:214-->
=== Переключение браузера в режим киоска ===
Удалить отключенные/неработающие устройства из веб-интерфейса можно с помощью кнопки '''Delete''' в виде значка с изображением мусорной корзины, в верхней строке плитки устройства. Кнопка появляется, когда указатель мыши находится над плиткой устройства.
{{Anchor|kiosk-mode}}
Режим киоска браузера аналогичен режиму, который включается при нажатии на кнопку F11, с той лишь разницей, что из режима киоска пользователь выйти не может.


<!--T:215-->
Этот режим удобно использовать при создании рабочего места оператора: добавляете в автозагрузку запуск браузера в режиме киоска у вас получается панель управления системой без возможности свернуть или закрыть окно.
[[File:Web-Devices-Delete-Device-2.0.png|thumb|center|400 px|Удаление отключенного устройства]]


=== Widgets (Виджеты) === <!--T:14-->
Как это сделать:
[[File:Web-Widgets-2.0.png|thumb|center|718px|Widgets - страница управления виджетами]]
# Откройте веб-интерфейс контроллера.
# Скопируйте в адресной строке браузера URL.
# Запустите браузер без панелей:
#* На компьютерах и планшетах с ОС Windows/Linux запустите браузер в режиме киоска и передайте ему параметром URL панели, примеры:
#*:<syntaxhighlight lang="bash">
firefox -kiosk 'http://wirenboard-ascmdm6q.local/#!/dashboards/dashboard1'
chromium -kiosk 'http://wirenboard-ascmdm6q.local/#!/dashboards/dashboard1'
</syntaxhighlight>
#* На планшетах с Android используйте специальные версии браузеров, например, [https://www.fully-kiosk.com/ Fully Kiosk Browser].


<!--T:15-->
Этот режим можно комбинировать с полноэкранным режимом и режимом HMI, описанными выше.
Виджеты - комбинированные элементы интерфейса контрроллера, включающие в себя набор контролов, то есть аппаратных параметров контроллера и подключённых к нему устройств - тех, что отображаются на странице [[#Devices (Устройства)|Devices (Устройства)]].


<!--T:216-->
}}
На странице Widgets представлен список всех виджетов, созданных в системе. Сами виджеты создаются в настройках панелей, на этой странице ими можно только управлять: просматривать, удалять и добавлять к существующим панелям-дашбордам.


== История полученных данных == <!--T:19-->
{{Anchor|history}}
[[Image: Web-History-Web-2.0 channel.png  |300px|thumb|right| Кнопка перехода к истории измерений ]]


==== Пример создания виджетов ==== <!--T:217-->
<!--T:20-->
{|
По умолчанию стандартное ПО контроллера хранит все полученные данные, которые вы можете посмотреть в виде графиков или таблицы. Данные можно выгрузить в csv, для этого нажмите на кнопку под графиком, или воспользуйтесь утилитой [https://github.com/wirenboard/wb-mqtt-db-cli wb-mqtt-db-cli].
|[[File:Web-Dashboards-Add_Dashboard-2.0.png|thumb|500px|center|Создать новую панель]]
|[[File:Web-Dashboards-Add_Widget-2.0.png|thumb|500px|center|Создать новый виджет]]
|}
Для примера создадим два виджета с показаниями температуры и переключателями управления отопительными конвекторами для двух комнат ''"Комната 1"'' и ''"Комната 2"''.


<!--T:218-->
<!--T:21-->
* На боковой панели щелкнем на вкладке '''Dashboards''', в раскрывшемся списке выберем элемент '''List''' и на открывшейся странице нажмем кнопку '''Add'''.
Для просмотра истории перейдите в раздел '''История''' и выберите нужные каналы, или наведите курсор на канал виджета и нажмите кнопку с изображением гистограммы.
* В поле '''Name''' напишем название новой панели, ''"Управление отоплением"'' и нажмем кнопку '''Save'''.
* В списке на странице '''Dashoards''' щелкнем по кнопке '''View''' напротив новой панели "Управление отоплением".
* В открывшемся окне с названием панели щелкнем по кнопке '''Add widget''' в правом верхнем углу окна (см. Рис. "Создать новый виджет").
* В заголовке виджета укажем название, в нашем случае ''"Комната 1"'', в списке '''Add control...''' выберем контрол, соовететвующий термометру в первой комнате, еще раз в этом списке выберем реле, которое будет включать нагреватель.
* В поле '''Name''' виджета можно задать осмысленные названия для контролов, например: ''"Температура"'' и ''"Обогреватель"''. Снимите флажок '''Compact mode''', чтобы эти названия контролов отображались в виджете.
* В поле '''Widget description''' можно написать назначение виджета.
* Аналогично создадим виджет для управления отоплением в комнате 2.
* Для внесения изменений подведите курсор к заголовку виджета и нажмите кнопку '''Edit widget''', внесите изменения и нажмите кнопку '''Save'''.


<!--T:219-->
<!--T:22-->
{| class="wikitable"
Возможности отображения:
|- style="vertical-align:bottom;"
* выбор периода;
|[[File:Web-Dashboards-Add_Control-2.0.png|thumb|400px|center|Добавить новый контрол в виджет]]
* одновременный просмотр нескольких каналов;
|[[File:Web-Dashboards-Widget_Ready-2.0.png|thumb|330px|center|Пример создания виджета]]
* масштабирование;
|[[File:Web-Dashboards-Dashboard_With_Widgets-2.0.png|thumb|460px|center|Пример готовых виджетов на панели]]
* снятие скриншота;
|}
* два графика на каждый канал — значения в базе и «дельта».
* курсорные измерения.


=== History (История показаний) === <!--T:20-->
<!--T:23-->
[[File:Web-History-Web-2.0.png|thumb|center|814px|Пример отображения исторических данных]]
Если нужно больше возможностей, можете настроить автоматический экспорт данных в [[Grafana]].
=== Как работает история ===
Драйвер wb-mqtt-db записывает значение величины через указанный пользователем интервал времени.  


<!--T:220-->
На графике для каждого канала есть:
На странице ''History'' можно просмотреть историю изменения значений аппаратных ресурсов (например, датчиков температуры, напряжения, показаний счётчиков). История представляется одновременно в виде графика и таблицы значений с метками времени.
* яркая цветная линия — это средние значения за период;
* и полупрозрачные области того же цвета — это «дельта», которая показывает максимум и минимум значений за период между записями в базу.


<!--T:221-->
Например, если сигнал быстро меняется, но нам не нужна информация обо всех значениях — увеличиваем интервал записи и экономим на размере БД. А «Дельта» позволит нам не потерять информацию о максимальных и минимальных значениях величины между записями.
Возможности просмотра исторических данных:
* Указание интервала времени для отображения данных
* Добавление и удаление нескольких показателей (кнопки Add channel и delete) на график
* Просмотр данных в виде графика и в виде таблицы
* Загрузка данных за выбранный период в csv-формате.


<!--T:222-->
Если вас не устраивает «Дельта» и вы хотите писать больше точек в базу, то:
При наведении указателя мыши на область изображения становятся доступными дополнительные функции (кнопки в верхней правой части графика):
* для сигналов, которые меняются быстро — уменьшите значение в параметре «Минимальный интервал записи значений»;
* Сохранение графика в формате .png
* для сигналов, которые меняются медленно — настройте параметр «Максимальное количество внеочередных записей».
* Переключение между режимами Zoom (увеличения/уменьшения отрезка данных и масштаба с помощью выделения нужной области указателем мыши) и панорамирования Pan (перемещения области видимости с зажатой левой кнопкой мыши)
* Уменьшение и увеличение отображаемого временного интервала (Zoom in и Zoom out)
* Автоматический выбор масштаба графика по обеим осям
* Возвращение масштаба осей к исходному
* Включение/выключение указателя координат


Кроме этого можно настраивать «глубину» хранения истории, для этого есть параметры «Максимальное количество записей на канал» и «Максимальное количество записей на группу». Работает это так:
# Группируете каналы по группам. По умолчанию создана группа ''all'', куда включены все существующие mqtt-каналы по маске <code>+/+</code>.
# Далее настраиваете параметр «Максимальное количество записей на канал» для каждого канала.
# И, чтобы не было сюрпризов, вроде заполненной памяти контроллера, ограничиваете «Максимальное количество записей на группу».


<!--T:223-->
<!--T:24-->
[[Wb-mqtt-db-cli|Утилита для извлечения исторических данных из внутренней базы данных]]
<gallery mode="packed" heights="100px" caption="Примеры скриншотов">
Image: Web-History-Web-2.0.png | График
Image: Web-History-Web-2.0 1.png | Табличное представление
Image: Web-History-Web-2.0 2.png | Данные, выгруженные в CSV
Image: Web-History-Web-2.0 3.png | Настройка хранения истории
</gallery>


=== Rules (Правила-скрипты) === <!--T:201-->
== Скрипты автоматизации == <!--T:25-->
[[File:Web-Rules-2.0.png|thumb|center|800 px|Скрипт, открытый для просмотра и редактирования]]
{{Anchor|rules}}


<!--T:224-->
<!--T:26-->
На странице '''Rules''' можно создавать и редактировать правила. Правила пишутся на простом языке, похожем на JavaScript и позволяют создавать правила ("включай свет с 10:00 до 18:00") или виртуальные устройства (например, кнопка в интерфейсе, которая включает и отключает всё освещение в здании вместе).
В веб-интерфейсе контроллера есть редактор скриптов [[wb-rules]], который позволяет создавать, редактировать и удалять правила. Если в скрипте есть ошибки, то редактор сообщит вам об этом и укажет место в скрипте.
*[[Движок правил wb-rules | Подробнее про скрипты]].


=== Settings -> Configs (Настройки -> Конфигурирование) === <!--T:101-->
<!--T:27-->
[[File:Web-Configs-2.0.png|thumb|center|600 px|Страница Configs]]
Редактор доступен в разделе '''Правила''', используется CodeMirror, горячие клавиши:
На странице '''Settings -> Configs''' производится конфигурирование контроллера и настройка подключения внешних устройств:
{{SupportedSinceRelease
* настройка сетевых интерфейсов
| release = wb-2307
* настройка серверов получения точного времени
|content=
* конфигурирование и настройка боковых и внутренних модулей
<pre>
* настройка цифровых входов и выходов (GPIO): в последних версиях контроллера список GPIO по умолчанию пустой, все вводы-выводы сконфигурированы системой. Изменять назначение вводов-выводов следует, если вы хотите изменить их режим функционирования. Список номеров GPIO для последних версий контроллеров Wiren Board 6 представлен на странице [[Wiren_Board_6#Подробное_тех.описание_платы_контроллера|Подробное_тех.описание_платы_контроллера]].
Ctrl + D — множественное редактирование
* настройка аналоговых входов
Ctrl + / — закомментировать / раскомментировать строки
* настройка логирования значений
Ctrl + [ — убрать отступ
* настройка шлюза контроллера -> Modbus TCP
Ctrl + ] — добавить отступ
* настройка подключения устройств RS-485
Ctrl + C — копировать в буфер обмена
* настройка предупреждений (alarms)
Ctrl + V — вставить из буфера обмена
* доступ к редактированию JSON-файла настроек веб-интерфейса
Ctrl + Z — отмена последнего действия
Ctrl + Shift + Z — повторить последнее отменённое действие
Ctrl + U — повторить последнее выделение
Ctrl + I — выделить всё между парными скобками, если повторить — выделяется уровень выше
Ctrl + пробел — показать подсказку ввода
Ctrl + Shift + Left — выделить слово слева
Ctrl + Shift + Right — выделить слово справа
Ctrl + Shift + K — удалить строку
Ctrl + Backspace — удалить часть слова до курсора
Ctrl + Delete — удалить часть слова после курсора
</pre>
}}


=== Settings -> WebUI (Настройки -> Веб-интерфейс) === <!--T:100-->
<!--T:28-->
[[File:Web-Settings_WebUI-2.0.png|center|thumb|600 px|Страница Settings]]
<gallery mode="packed" heights="150px">
Image: Web-Rules-2.0.png | Редактор скриптов
Image: Web-Rules-2.0 errors.png | Подсветка ошибок
</gallery>


<!--T:225-->
== Настройка контроллера и подключённых устройств == <!--T:29-->
На странице '''Web UI''' настраиваются параметры веб-интерфейса и контроллера. Здесь можно:
{{Anchor|settings}}
* Выбрать подключение к MQTT-брокеру (Web-sockets), если используется нелокальный брокер, а, например, облачный сервис
[[Image: Web-Configs-2.0.png |300px|thumb|right| Конфигурационные файлы ]]
* При необходимости указать учетные данные на удаленном MQTT-брокере
Контроллер Wiren Board работает на Linux, поэтому почти все настройки хранятся в конфигурационных файлах. Файлы можно редактировать через [[SSH]] или с помощью веб-конфигуратора.
* Указать префикс всех топиков, с которым данные охраняются в облачном сервисе
* Выбрать панель (Default Dashboard), которая будет отображаться на главной странице (Home)


=== Settings -> System (Настройки -> Системные) === <!--T:226-->
<!--T:30-->
Список доступных настроек вы найдёте в разделе ''' Настройки''' → '''Конфигурационные файлы'''.


<!--T:227-->
<!--T:31-->
[[File:Web-Settings_System-2.0.png|center|thumb|600 px|Страница System]]
Например, через веб-интерфейс можно настроить подключённые [[RS-485:Configuration via Web Interface| Modbus-устройства]], шлюзы [[KNX | KNX]] и [[Modbus RTU/TCP Slave]] и другие параметры.


<!--T:228-->
== Поиск устройств Wiren Board на шине RS-485 ==
На этой странице можно обновить прошивку контроллера, предварительно скачав ее на компьютер.
[[Image: Scan-screen.png |300px|thumb|right| Сканирование устройств ]]
В разделе '''Настройки''' → '''Сканирование''' можно получить список всех устройств Wiren Board подключенных к шине RS-485 с их серийными номерами, настройками соединения и версиями прошивок.  


Возможности функции сканирования:
* отображение всех устройств Wiren Board, подключенных к контроллеру,
* обнаружение устройств с одинаковыми адресами на одной шине,
* обнаружение устройств с разными параметрами связи на одной шине.


=== Settings -> MQTT Channels (Настройки -> MQTT-каналы) === <!--T:229-->
Благодаря функции сканирования можно собирать шкаф управления не обращая внимания на адреса устройств — все адреса и параметры можно будет получить после сборки и сконфигурировать устройства не отключая от шины.
[[File:Web-Settings_MQTT_Channels-2.0.png|center|thumb|600 px|MQTT Channels]]


<!--T:230-->
== Уведомления о событиях == <!--T:32-->
На этой странице приводится справочная информация о всех MQTT-топиках, полученных веб-интерфейсом контроллера, а также статус их получения ('''ОК''' или '''ERR''' в последнем столбце).
{{Anchor|alarms}}
В веб-интерфейсе контроллера можно настроить отправку уведомления о событиях по SMS или Email, например, при срабатывании тревоги в модуле [[WB-MWAC Modbus Water Consumption Metering and Leak Monitoring| WB-MWAC]], отправить SMS на заданный номер. [[Notification module | Настройка модуля уведомлений]].


=== Settings -> Change access level (Настройки -> Изменить уровень доступа) ===
<!--T:33-->
{{Wbincludes:WebUI Change Access Level}}
Также вы можете отправлять уведомления в Телеграм, для этого нужно написать небольшой скрипт на wb-rules, [[Rule_Examples#telegram | пример]].


== Стандартные задачи, решаемые через веб-интерфейс == <!--T:232-->
== Обновление прошивки и выгрузка диагностического архива == <!--T:34-->
{{Anchor|diagnostic}}
[[Image: Web-Configs-2.0 system.png |300px|thumb|right| Обновление ПО и выгрузка диагностики ]]
Обновить ПО контроллера без доступа к интернету можно через веб-интерфейс, для этого вам понадобится компьютер и заранее загруженный fit-файл прошивки. Подробнее про обновление ПО контроллера читайте на странице [[Wiren_Board_Software| Программное обеспечение Wiren Board]].


=== Покдлючить устройство RS-485 Modbus и создать кнопки управления на главной панели === <!--T:233-->
<!--T:35-->
[[RS-485:Настройка через веб-интерфейс]]
Если в работе контроллера возникли ошибки, то при обращении в техническую поддержку рекомендуем выгрузить диагностический архив — это поможет нам быстрее разобраться в проблеме.
===Обновить прошивку контроллера===
[[Обновление прошивки#Обновление прошивки через веб-интерфейс|Обновление прошивки через веб-интерфейс]]


== Облачный интерфейс == <!--T:202-->
Выгрузить диагностический архив можно двумя способами:
* Перейдите в веб-интерфейсе на вкладку '''Настройки''' → '''Система''' и найдите раздел '''Сбор данных для диагностики'''. Сформируйте, а затем скачайте архив.
* Подключитесь к контроллеру по [[SSH]] и введите команду:
*:<pre>wb-diag-collect diag</pre>
*: архив будет сохранён в текущую папку, обычно это /root — оттуда его можно [[View_controller_files_from_your_computer|сохранить на компьютер]].


<!--T:21-->
== Просмотр MQTT-каналов и системного журнала == <!--T:36-->
Веб-интерфейс Wiren Board можно разместить не только на самом контроллере, но и на специальном сервере. Тогда на интерфейс можно будет заходить, используя всегда один и тот же IP-адрес.
{{Anchor|mqtt-channels}}
Список MQTT-каналов пригодится при диагностике неисправностей, или при настройке интеграции со сторонним ПО, например, [[Rapid SCADA]] или [[Home Assistant]]. Список доступен в разделе '''Настройки''' → '''MQTT-каналы'''. Описание структуры топиков и общие рекомендации, смотрите в статье [[MQTT]].


<!--T:234-->
<!--T:37-->
Чтобы контроллер начал работать с веб-интерфейсом, размещённым на сервере, нужно внести некоторые изменения в конфигурацию контроллера.
Системный журнал ОС Linux можно посмотреть с помощью утилиты [[journalctl]] или в веб-интерфейсе контроллера в разделе '''Настройки''' → '''Системный журнал'''.


<!--T:235-->
<!--T:38-->
Такой вариант удобен, если ваш контроллер находится за роутером и не имеет глобального IP-адреса, или если он подключён по GPRS - тогда он тоже, скорее всего, не имеет глобального IP, да ещё и работа с удалённым веб-интерфейсом израсходует слишком много трафика.
<gallery mode="packed" heights="120px">
Image:Web-Configs-2.0 mqtt.png| MQTT-каналы
Image:Web-Configs-2.0 logs.png| Системный журнал
</gallery>


<!--T:236-->
== Управление с телефона == <!--T:45-->
'''Пока что такой вариант доступен только корпоративным клиентам по запросу.'''
{{Anchor|mobile}}
Веб-интерфейс адаптируется под размер экрана, поэтому управлять системой автоматизации можно с мобильного устройства или планшета.  


<!--T:237-->
<!--T:46-->
<!--Также рекомендуем воспользоваться сервисом [http://inspektor.carbonfay.ru Inspektor SCADA], который предоставляет схожую функциональность. [[Inspektor SCADA|Статья]] про настройку доступа к Inspektor SCADA.-->
Альтернативой может быть использование сторонних приложений: [[MQTT_Dash]], [[Home Assistant]], [[SberDevices|Салют! Умный дом]] и других, полный список смотрите в [[Supported_devices |таблице поддерживаемых устройств и программ]].


== Настройка авторизованного доступа к веб-интерфейсу контроллера == <!--T:238-->
<!--T:47-->
В статье [[Защита_паролем|Защита паролем]] приводятся краткие инструкции по перенастройке контроллера, обеспечивающие авторизованный доступ к веб-интерфейсу контроллера.
<gallery mode="packed" heights="350px" caption="Веб-интерфейс контроллера в телефоне">
Image: web-ui mobile 1.png | Список устройств
Image: web-ui mobile 2.png | Боковая панель
Image: web-ui mobile 5.png | SVG-панель
Image: web-ui mobile 3.png | Просмотр системного журнала
Image: web-ui mobile 4.png | Настройка Modbus-устройства
</gallery>


== Предыдущая версия == <!--T:39-->
* [[Wiren_Board_Web_Interface 1.0| Веб-интерфейс Wiren Board 1.0]], заменён на 2.0 в начале 2021 года.
</translate>
</translate>

Версия 17:30, 20 декабря 2023

Другие языки:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Веб-интерфейс не поддерживает авторизацию пользователя, но вы можете настроить http-авторизацию сервера nginx. Подробные инструкции смотрите в статье Защита веб-интерфейса контроллера паролем.

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

На странице Устройства находятся виртуальные представления физически подключённых к контроллеру устройств или виртуальных устройств, созданных скриптами 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

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

В разделе Настройки → Сканирование можно получить список всех устройств Wiren Board подключенных к шине RS-485 с их серийными номерами, настройками соединения и версиями прошивок.

Возможности функции сканирования:

  • отображение всех устройств Wiren Board, подключенных к контроллеру,
  • обнаружение устройств с одинаковыми адресами на одной шине,
  • обнаружение устройств с разными параметрами связи на одной шине.

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

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

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

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

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

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

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

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

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

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

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

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

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

  • MQTT-каналы

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

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

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

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

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

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

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

  • SVG-панель

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

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

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

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