Wiren Board Web Interface/en: различия между версиями
(Новая страница: «You can create widgets in the '''Widgets''' section, or directly from the dashboard. There is a visual designer and a JSON editor.») |
|||
(не показано 45 промежуточных версий 2 участников) | |||
Строка 1: | Строка 1: | ||
<languages/>{{DISPLAYTITLE: Web Interface of Wiren Board Controllers}} | <languages/>{{DISPLAYTITLE: Web Interface of Wiren Board Controllers}} | ||
== General information == | == General information == | ||
{{ | {{Anchors|features}} | ||
Wiren Board controllers have a built-in web interface that allows you to perform most of the tasks for configuring the controller, firmware and connected devices. The source code is open and available in [https://github.com/wirenboard/ our repository]. | Wiren Board controllers have a built-in web interface that allows you to perform most of the tasks for configuring the controller, firmware and connected devices. The source code is open and available in [https://github.com/wirenboard/ our repository]. | ||
Строка 12: | Строка 12: | ||
{{Wbincludes:How to enter}} | {{Wbincludes:How to enter}} | ||
== | == СChange access level == | ||
{{Anchor|change-access-level}} | {{Anchor|change-access-level}} | ||
{{Wbincludes:WebUI Change Access Level}} | {{Wbincludes:WebUI Change Access Level}} | ||
Строка 24: | Строка 24: | ||
== List of devices == | == List of devices == | ||
{{ | {{Anchors|devices}} | ||
The '''Devices''' page contains virtual representations of devices physically connected to the controller or virtual devices created by [[wb-rules]] scripts. | The '''Devices''' page contains virtual representations of devices physically connected to the controller or virtual devices created by [[wb-rules]] scripts. | ||
Строка 39: | Строка 39: | ||
{{Anchor|dashboards-and-widgets}} | {{Anchor|dashboards-and-widgets}} | ||
===Panels=== | ===Panels=== | ||
{{ | {{Anchors|dashboards}} | ||
You can create text and graphic SVG dashboards to display data and control your automation system. | You can create text and graphic SVG dashboards to display data and control your automation system. | ||
The text dashboard consists of widgets, and the graphic | The text dashboard consists of widgets, and the graphic dashboard consists of a background image with bindings to the MQTT channels of the controller. | ||
[[SVG-Dashboards | How to make an SVG dashboard]]. | |||
<gallery mode="packed" heights="150px"> | <gallery mode="packed" heights="150px"> | ||
Image: Web-Dashboards-2.0.png | Dashboards | Image: Web-Dashboards-2.0.png | Dashboards List | ||
Image: Text-Dashboard Example.png | | Image: Text-Dashboard Example.png | Text dashboard | ||
Image: SVG | Image: SVG Dashboard Example.png | SVG dashboard | ||
</gallery> | </gallery> | ||
=== Widgets === | === Widgets === | ||
{{ | {{Anchors|widgets}} | ||
With the help of widgets, it is convenient to combine controls of different devices by meaning or location. For example, you can make a widget to control the lighting in a bedroom, or a climate widget in a store. Widgets are grouped into dashboards, one widget can be added to several dashboards. | With the help of widgets, it is convenient to combine controls of different devices by meaning or location. For example, you can make a widget to control the lighting in a bedroom, or a climate widget in a store. Widgets are grouped into dashboards, one widget can be added to several dashboards. | ||
You can create widgets in the '''Widgets''' section, or directly from the dashboard. There is a visual designer and a JSON editor. | You can create widgets in the '''Widgets''' section, or directly from the dashboard. There is a visual designer and a JSON editor. | ||
<div lang="ru" dir="ltr" class="mw-content-ltr"> | |||
<gallery mode="packed" heights="150px"> | <gallery mode="packed" heights="150px"> | ||
Image: webui-widgets.png | | Image: webui-widgets.png | Список виджетов | ||
Image: widget-create-1.png | | Image: widget-create-1.png | Создание нового виджета из панели | ||
Image: widget-create-2.png | | Image: widget-create-2.png | Конструктор виджета | ||
Image: widget-create-2.2.png | JSON | Image: widget-create-2.2.png | Вид JSON | ||
Image: widget-create-3.png | | Image: widget-create-3.png | Готовый виджет | ||
Image: widget-create-4.png | | Image: widget-create-4.png | Кнопки редактирования | ||
</gallery> | </gallery> | ||
</div> | |||
<div lang="ru" dir="ltr" class="mw-content-ltr"> | |||
== История полученных данных == | |||
== | |||
{{Anchor|history}} | {{Anchor|history}} | ||
[[Image: Web-History-Web-2.0 channel.png |300px|thumb|right| | [[Image: Web-History-Web-2.0 channel.png |300px|thumb|right| Кнопка перехода к истории измерений ]] | ||
</div> | |||
=== History === | |||
[[File:Web-History-Web-2.0.png|thumb|center|814px|History page]] | |||
The web interface of the Wiren Board can be placed not only on the controller itself, but also on a special server. Then the interface can always be accessed via the same IP-address. | |||
<div lang="ru" dir="ltr" class="mw-content-ltr"> | |||
* | Возможности отображения: | ||
* | * выбор периода; | ||
* | * одновременный просмотр нескольких каналов; | ||
* | * масштабирование; | ||
* | * снятие скриншота; | ||
* курсорные измерения. | |||
</div> | |||
<div lang="ru" dir="ltr" class="mw-content-ltr"> | |||
Если вам надо больше возможностей, вы можете настроить автоматический экспорт данных в [[Grafana]]. | |||
</div> | |||
<div lang="ru" dir="ltr" class="mw-content-ltr"> | |||
<gallery mode="packed" heights="100px"> | <gallery mode="packed" heights="100px"> | ||
Image: Web-History-Web-2.0.png | | Image: Web-History-Web-2.0.png | График | ||
Image: Web-History-Web-2.0 1.png | | Image: Web-History-Web-2.0 1.png | Табличное представление | ||
Image: Web-History-Web-2.0 2.png | | Image: Web-History-Web-2.0 2.png | Данные, выгруженные в CSV | ||
Image: Web-History-Web-2.0 3.png | | Image: Web-History-Web-2.0 3.png | Настройка хранения истории | ||
</gallery> | </gallery> | ||
</div> | |||
== | <div lang="ru" dir="ltr" class="mw-content-ltr"> | ||
== Скрипты автоматизации == | |||
{{Anchor|rules}} | {{Anchor|rules}} | ||
</div> | |||
<div lang="ru" dir="ltr" class="mw-content-ltr"> | |||
В веб-интерфейсе контроллера есть редактор скриптов [[wb-rules]], который позволяет создавать, редактировать и удалять правила. Если в скрипте есть ошибки, то редактор сообщит вам об этом и укажет место в скрипте. | |||
</div> | |||
<div lang="ru" dir="ltr" class="mw-content-ltr"> | |||
Редактор доступен в разделе '''Правила'''. | |||
</div> | |||
<div lang="ru" dir="ltr" class="mw-content-ltr"> | |||
<gallery mode="packed" heights="150px"> | <gallery mode="packed" heights="150px"> | ||
Image: Web-Rules-2.0.png | | Image: Web-Rules-2.0.png | Редактор скриптов | ||
Image: Web-Rules-2.0 errors.png | | Image: Web-Rules-2.0 errors.png | Подсветка ошибок | ||
</gallery> | </gallery> | ||
</div> | |||
== | <div lang="ru" dir="ltr" class="mw-content-ltr"> | ||
== Настройка контроллера и подключённых устройств == | |||
{{Anchor|settings}} | {{Anchor|settings}} | ||
[[Image: Web-Configs-2.0.png |300px|thumb|right| | [[Image: Web-Configs-2.0.png |300px|thumb|right| Конфигурационные файлы ]] | ||
Контроллер Wiren Board работает на Linux, поэтому почти все настройки хранятся в конфигурационных файлах. Файлы можно редактировать через [[SSH]] или с помощью веб-конфигуратора. | |||
</div> | |||
<div lang="ru" dir="ltr" class="mw-content-ltr"> | |||
Список доступных настроек вы найдёте в разделе ''' Настройки''' → '''Конфигурационные файлы'''. | |||
</div> | |||
<div lang="ru" dir="ltr" class="mw-content-ltr"> | |||
Например, через веб-интерфейс можно настроить подключённые [[RS-485:Configuration via Web Interface| Modbus-устройства]], шлюзы [[KNX | KNX]] и [[Modbus RTU/TCP Slave]] и другие параметры. | |||
</div> | |||
== | <div lang="ru" dir="ltr" class="mw-content-ltr"> | ||
== Уведомления о событиях == | |||
{{Anchor|alarms}} | {{Anchor|alarms}} | ||
В веб-интерфейсе контроллера можно настроить отправку уведомления о событиях по SMS или Email, например, при срабатывании тревоги в модуле [[WB-MWAC Modbus Water Consumption Metering and Leak Monitoring| WB-MWAC]], отправить SMS на заданный номер. [[Notification module | Настройка модуля уведомлений]]. | |||
</div> | |||
<div lang="ru" dir="ltr" class="mw-content-ltr"> | |||
Также вы можете отправлять уведомления в Телеграм, для этого нужно написать небольшой скрипт на wb-rules, [[Rule_Examples#telegram | пример]]. | |||
</div> | |||
== | <div lang="ru" dir="ltr" class="mw-content-ltr"> | ||
== Обновление прошивки и выгрузка диагностического архива == | |||
{{Anchor|diagnostic}} | {{Anchor|diagnostic}} | ||
[[Image: Web-Configs-2.0 system.png |300px|thumb|right| | [[Image: Web-Configs-2.0 system.png |300px|thumb|right| Обновление ПО и выгрузка диагностики ]] | ||
Обновить ПО контроллера без доступа к интернету можно через веб-интерфейс, для этого вам понадобится компьютер и заранее загруженный fit-файл прошивки. Подробнее про обновление ПО контроллера читайте в [[Wiren Board Firmware Update| инструкции]]. | |||
</div> | |||
<div lang="ru" dir="ltr" class="mw-content-ltr"> | |||
Если в работе контроллера возникли ошибки, то при обращении в техническую поддержку рекомендуем выгрузить диагностический архив — это поможет нам быстрее разобраться в проблеме. Если по какой-то причине выгрузить архив из веб-интерфейса не получается, воспользуйтесь консольной утилитой [https://github.com/wirenboard/wb-diag-collect wb-diag-collect]. | |||
</div> | |||
== | <div lang="ru" dir="ltr" class="mw-content-ltr"> | ||
== Просмотр MQTT-каналов и системного журнала == | |||
{{Anchor|mqtt-channels}} | {{Anchor|mqtt-channels}} | ||
Список MQTT-каналов пригодится при диагностике неисправностей, или при настройке интеграции со сторонним ПО, например, [[Rapid SCADA]] или [[Home Assistant]]. Список доступен в разделе '''Настройки''' → '''MQTT-каналы'''. | |||
</div> | |||
<div lang="ru" dir="ltr" class="mw-content-ltr"> | |||
Системный журнал ОС Linux можно посмотреть с помощью утилиты [[journalctl]] или в веб-интерфейсе контроллера в разделе '''Настройки''' → '''Системный журнал'''. | |||
</div> | |||
<div lang="ru" dir="ltr" class="mw-content-ltr"> | |||
<gallery mode="packed" heights="120px"> | <gallery mode="packed" heights="120px"> | ||
Image:Web-Configs-2.0 mqtt.png| MQTT | Image:Web-Configs-2.0 mqtt.png| MQTT-каналы | ||
Image:Web-Configs-2.0 logs.png| | Image:Web-Configs-2.0 logs.png| Системный журнал | ||
</gallery> | </gallery> | ||
</div> | |||
== | <div lang="ru" dir="ltr" class="mw-content-ltr"> | ||
* [[Wiren_Board_Web_Interface 1.0| Wiren Board | == Предыдущая версия == | ||
* [[Wiren_Board_Web_Interface 1.0| Веб-интерфейс Wiren Board 1.0]], заменён на 2.0 в начале 2021 года. | |||
</div> |
Версия 16:50, 2 августа 2022
General information
Шаблон:Anchors Wiren Board controllers have a built-in web interface that allows you to perform most of the tasks for configuring the controller, firmware and connected devices. The source code is open and available in our repository.
nginx works as a web server, the site interacts with MQTT via WebSocket.
Overview of the web interface of Wiren Board controllers.
How to enter the web interface
To access the Web Interface of a Wiren Board controller, connect to the controller via Wi-Fi or Ethernet and enter IP address of the controller into the browser's address bar.
If you are on the same network as the controller and use Apple devices, a computer with Linux or Windows 10 and higher, then you can use mDNS instead of an IP address: enter http://wirenboard-XXXXXXXX.local into the address bar, where ХХХХХХХХ — eight-digit serial number of the controller.
Также доступ можно получить через Wiren Board Cloud, если контроллер к нему подключен.
СChange access level
To change the settings of the controller, you need the Administrator access level, which can be set in the Settings → Permissions section.
After completing the settings, we recommend that you set the access level to User or Operator - this will help you avoid making random mistakes when working with the web interface every day.
MQTT connection setup and language selection
In the Settings → Web UI section, you can configure the connection to the MQTT broker, select a panel for the home page and change the language of the web interface.
The web interface does not support user authorization, but you can configure nginx server http authorization. For detailed instructions, see Protecting the web interface of the controller with a password.
List of devices
Шаблон:Anchors The Devices page contains virtual representations of devices physically connected to the controller or virtual devices created by wb-rules scripts.
Each device is represented by a card that contains device channels - controls. If you click on the name of the control, you will get a path like device/control
, which can be used when writing scripts on wb-rules.
Do not use this page to manage your automation system, there are dashboards for that.
Dashboards and widgets
Panels
Шаблон:Anchors You can create text and graphic SVG dashboards to display data and control your automation system.
The text dashboard consists of widgets, and the graphic dashboard consists of a background image with bindings to the MQTT channels of the controller.
- SVG Dashboard Example.png
SVG dashboard
Widgets
Шаблон:Anchors With the help of widgets, it is convenient to combine controls of different devices by meaning or location. For example, you can make a widget to control the lighting in a bedroom, or a climate widget in a store. Widgets are grouped into dashboards, one widget can be added to several dashboards.
You can create widgets in the Widgets section, or directly from the dashboard. There is a visual designer and a JSON editor.
History
The web interface of the Wiren Board can be placed not only on the controller itself, but also on a special server. Then the interface can always be accessed via the same IP-address.
Возможности отображения:
- выбор периода;
- одновременный просмотр нескольких каналов;
- масштабирование;
- снятие скриншота;
- курсорные измерения.
Если вам надо больше возможностей, вы можете настроить автоматический экспорт данных в Grafana.
Скрипты автоматизации
В веб-интерфейсе контроллера есть редактор скриптов wb-rules, который позволяет создавать, редактировать и удалять правила. Если в скрипте есть ошибки, то редактор сообщит вам об этом и укажет место в скрипте.
Редактор доступен в разделе Правила.
Настройка контроллера и подключённых устройств
Контроллер Wiren Board работает на Linux, поэтому почти все настройки хранятся в конфигурационных файлах. Файлы можно редактировать через SSH или с помощью веб-конфигуратора.
Список доступных настроек вы найдёте в разделе Настройки → Конфигурационные файлы.
Например, через веб-интерфейс можно настроить подключённые Modbus-устройства, шлюзы KNX и Modbus RTU/TCP Slave и другие параметры.
Уведомления о событиях
В веб-интерфейсе контроллера можно настроить отправку уведомления о событиях по SMS или Email, например, при срабатывании тревоги в модуле WB-MWAC, отправить SMS на заданный номер. Настройка модуля уведомлений.
Также вы можете отправлять уведомления в Телеграм, для этого нужно написать небольшой скрипт на wb-rules, пример.
Обновление прошивки и выгрузка диагностического архива
Обновить ПО контроллера без доступа к интернету можно через веб-интерфейс, для этого вам понадобится компьютер и заранее загруженный fit-файл прошивки. Подробнее про обновление ПО контроллера читайте в инструкции.
Если в работе контроллера возникли ошибки, то при обращении в техническую поддержку рекомендуем выгрузить диагностический архив — это поможет нам быстрее разобраться в проблеме. Если по какой-то причине выгрузить архив из веб-интерфейса не получается, воспользуйтесь консольной утилитой wb-diag-collect.
Просмотр MQTT-каналов и системного журнала
Список MQTT-каналов пригодится при диагностике неисправностей, или при настройке интеграции со сторонним ПО, например, Rapid SCADA или Home Assistant. Список доступен в разделе Настройки → MQTT-каналы.
Системный журнал ОС Linux можно посмотреть с помощью утилиты journalctl или в веб-интерфейсе контроллера в разделе Настройки → Системный журнал.
Предыдущая версия
- Веб-интерфейс Wiren Board 1.0, заменён на 2.0 в начале 2021 года.