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

Wiren Board Web Interface/en (просмотреть исходный код)

Версия 14:05, 3 августа 2022

2390 байт убрано ,  1 год назад
Нет описания правки
Метки: правка с мобильного устройства правка из мобильной версии
 
(не показано 55 промежуточных версий 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}}
{{Anchor|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 ==
== Change access level ==
{{Anchor|change-access-level}}
{{Anchor|change-access-level}}
{{Wbincludes:WebUI Change Access Level}}
{{Wbincludes:WebUI Change Access Level}}
Строка 19: Строка 19:
{{Anchor|webui}}
{{Anchor|webui}}
[[Image: Web-Configs-2.0 webui.png |300px|thumb|right| Web interface settings ]]
[[Image: Web-Configs-2.0 webui.png |300px|thumb|right| Web interface settings ]]
In the '''Settings''' → '''Web interface''' 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.
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 [[WebUI_Password| Protecting the web interface of the controller with a password]].
The web interface does not support user authorization, but you can configure nginx server http authorization. For detailed instructions, see [[WebUI_Password| Protecting the web interface of the controller with a password]].


== List of devices ==
== List of devices ==
{{Anchors|devices}}
{{Anchor|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.  


Widgets with a similar purpose can be grouped in a panel, where all the necessary buttons, settings and indicators of sensors are located on one screen. For example, you can combine widgets to enable heating, air conditioning, display temperature and humidity. In the Dashboards section you can see all created panels. In fact, the Home section also displays one of the panels, which is selected in the settings.
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 <code>device/control</code>, which can be used when writing scripts on wb-rules.


=== Devices  ===
Do not use this page to manage your automation system, there are dashboards for that.
[[File:Web-Devices-2.0.png|thumb|center|700 px|Devices is a list of all hardware features of the controller and connected devices]]


The '''Devices''' page displays all the hardware functions of the controller (status of inputs, outputs, power supply), as well as the connected sensors and devices. If you have connected an external module to the controller, all its changing values will be displayed here.
<gallery mode="packed" heights="150px">
Image: Web-Devices-2.0.png | List of devices connected to the controller
Image: Web-Devices-Delete-Device-2.0.png | Removing a device card
</gallery>


<div lang="ru" dir="ltr" class="mw-content-ltr">
== Dashboards and widgets ==
== Интерактивные панели и виджеты ==
{{Anchor|dashboards-and-widgets}}
{{Anchor|dashboards-and-widgets}}
=== Панели ===
===Panels===
{{Anchor|dashboards}}
{{Anchor|dashboards}}
Вы можете создавать текстовые и графические SVG-панели для отображения данных и управления системой автоматизации.
You can create text and graphic SVG dashboards to display data and control your automation system.
</div>
 
The text dashboard consists of widgets, and the graphic panel consists of a background image with bindings to the MQTT channels of the controller. [[SVG-Dashboards | How to make an SVG panel]].


<div lang="ru" dir="ltr" class="mw-content-ltr">
<gallery mode="packed" heights="150px">
Текстовая панель состоит из виджетов, а графическая — из фонового изображения с привязками к MQTT-каналам контроллера
Image: Web-Dashboards-2.0.png | Dashboards list
</div>  
Image: Text-Dashboard Example.png | Dashboard
Image: SVG-Dashboard Example.png | SVG Dashboard
</gallery>


=== Widgets ===
=== Widgets ===
[[File:Web-Widgets-2.0.png|thumb|center|718px|Widgets page]]
{{Anchor|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.


Widgets are combined elements of the controller interface, including a set of controls, e.g., the hardware parameters of the controller and connected devices - those that are displayed on the[[#Devices (Devices)|Devices (Devices)]]  page.
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">
=== Виджеты ===
Image: webui-widgets.png | Widget List
{{Anchor|widgets}}
Image: widget-create-1.png | Creating a new widget from a dashboard
С помощью виджетов удобно объединять контролы разных устройств по смыслу, или местонахождению. Например, можно сделать виджет для управления освещением в спальне, или виджет климата в магазине. Виджеты группируются в панели, один виджет может быть добавлен в несколько панелей.
Image: widget-create-2.png | Widget constructor
</div>
Image: widget-create-2.2.png | JSON view
Image: widget-create-3.png | Ready widget
Image: widget-create-4.png | Edit buttons
</gallery>
 
=== Kiosk mode ===
 
{{Anchor|kiosk}}
{{SupportedSinceRelease|en=true
| release = wb-2207
|content=
If you use a regular tablet as a control panel and display the controller's web interface on it, then it will be useful to hide unnecessary elements and the browser window:
# Open the text or SVG dashboard and click the '''Enter fullscreen mode''' button.
# Copy the URL bar in the address bar of the browser, at the end there should be a <code>?fullscreen</code> parameter.
# Start a browser without panels:
#* On computers and tablets with Windows/linux OS, launch the browser in kiosk mode and pass it the panel URL parameter, examples:
#*:<syntaxhighlight lang="bash">
irefox -kiosk 'http://wirenboard-ascmdm6q.local/#!/dashboards/dashboard1?fullscreen'
chromium -kiosk 'http://wirenboard-ascmdm6q.local/#!/dashboards/dashboard1?fullscreen'
</syntaxhighlight>
#* On Android tablets, use dedicated browser versions such as Fully Kiosk Browser


<div lang="ru" dir="ltr" class="mw-content-ltr">
This works for all dashboard types.
Создавать виджеты можно в разделе '''Виджеты''', или прямо из панели. Есть визуальный конструктор и редактор JSON.
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
<gallery mode="packed" heights="150px">
<gallery mode="packed" heights="150px">
Image: webui-widgets.png | Список виджетов
Image: Text-Dashboard full screen.png | Enter to full screen mode
Image: widget-create-1.png | Создание нового виджета из панели
Image: Text-Dashboard full screen 2.png | Full screen mode
Image: widget-create-2.png | Конструктор виджета
Image: Text-Dashboard full screen 3.png | Kiosk mode
Image: widget-create-2.2.png | Вид JSON
Image: widget-create-3.png | Готовый виджет
Image: widget-create-4.png | Кнопки редактирования
</gallery>
</gallery>
</div>
}}


<div lang="ru" dir="ltr" class="mw-content-ltr">
== History ==
== История полученных данных ==
{{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| Button to go to the measurement history ]]
</div>


=== History  ===
By default, the standard controller software stores all received data, which you can view in the form of graphs or tables. The data can be uploaded to csv, to do this, click on the button below the graph, or use the [https://github.com/wirenboard/wb-mqtt-db-cli wb-mqtt-db-cli] utility.
[[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.
To view the history, go to the '''History''' section and select the desired channels, or hover over the widget's channel and click the histogram button.


<div lang="ru" dir="ltr" class="mw-content-ltr">
Display options:
Возможности отображения:
* choice of period;
* выбор периода;
* simultaneous viewing of several channels;
* одновременный просмотр нескольких каналов;
* scaling;
* масштабирование;
* taking a screenshot;
* снятие скриншота;
* cursor measurements.
* курсорные измерения.
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
If you need more features, you can set up automatic data export to [[Grafana]].
Если вам надо больше возможностей, вы можете настроить автоматический экспорт данных в [[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 | Schedule
Image: Web-History-Web-2.0 1.png | Табличное представление
Image: Web-History-Web-2.0 1.png | Table View
Image: Web-History-Web-2.0 2.png | Данные, выгруженные в CSV
Image: Web-History-Web-2.0 2.png | Data uploaded to CSV
Image: Web-History-Web-2.0 3.png | Настройка хранения истории
Image: Web-History-Web-2.0 3.png | Setting up history storage
</gallery>
</gallery>
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
== Automation scripts ==
== Скрипты автоматизации ==
{{Anchor|rules}}
{{Anchor|rules}}
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
The controller's web interface has a script editor [[wb-rules]] that allows you to create, edit, and delete rules. If there are errors in the script, the editor will inform you about it and indicate the place in the script.
В веб-интерфейсе контроллера есть редактор скриптов [[wb-rules]], который позволяет создавать, редактировать и удалять правила. Если в скрипте есть ошибки, то редактор сообщит вам об этом и укажет место в скрипте.
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
The editor is available in the '''Rules''' section.
Редактор доступен в разделе '''Правила'''.
</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 | Script editor
Image: Web-Rules-2.0 errors.png | Подсветка ошибок
Image: Web-Rules-2.0 errors.png | Error highlighting
</gallery>
</gallery>
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
== Configuring the controller and connected devices ==
== Настройка контроллера и подключённых устройств ==
{{Anchor|settings}}
{{Anchor|settings}}
[[Image: Web-Configs-2.0.png |300px|thumb|right| Конфигурационные файлы ]]
[[Image: Web-Configs-2.0.png |300px|thumb|right| Configuration files ]]
Контроллер Wiren Board работает на Linux, поэтому почти все настройки хранятся в конфигурационных файлах. Файлы можно редактировать через [[SSH]] или с помощью веб-конфигуратора.
The Wiren Board controller runs on Linux, so almost all settings are stored in configuration files. Files can be edited via [[SSH]] or using the web configurator.
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
The list of available settings can be found in the section '''Settings''' → '''Confgs'''.
Список доступных настроек вы найдёте в разделе ''' Настройки''' → '''Конфигурационные файлы'''.
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
For example, via the web interface, you can configure: connected [[RS-485:Configuration via Web Interface| Modbus devices]], gateways [[KNX | KNX]] and [[Modbus RTU/TCP Slave]] and other parameters.
Например, через веб-интерфейс можно настроить подключённые [[RS-485:Configuration via Web Interface| Modbus-устройства]], шлюзы [[KNX | KNX]] и [[Modbus RTU/TCP Slave]] и другие параметры.
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
== Event notifications ==
== Уведомления о событиях ==
{{Anchor|alarms}}
{{Anchor|alarms}}
В веб-интерфейсе контроллера можно настроить отправку уведомления о событиях по SMS или Email, например, при срабатывании тревоги в модуле [[WB-MWAC Modbus Water Consumption Metering and Leak Monitoring| WB-MWAC]], отправить SMS на заданный номер. [[Notification module | Настройка модуля уведомлений]].
In the web interface of the controller, you can configure the event notification to be sent via SMS or Email, for example, when an alarm is triggered in the [[WB-MWAC Modbus Water Consumption Metering and Leak Monitoring| WB-MWAC]], send an SMS to the specified number. [[Notification module | Notification module settings]].
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
You can also send notifications to Telegram, for this you need to write a small script on wb-rules, [[Rule_Examples#telegram | example]].
Также вы можете отправлять уведомления в Телеграм, для этого нужно написать небольшой скрипт на wb-rules, [[Rule_Examples#telegram | пример]].
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
== Firmware update and collect diagnostic data ==
== Обновление прошивки и выгрузка диагностического архива ==
{{Anchor|diagnostic}}
{{Anchor|diagnostic}}
[[Image: Web-Configs-2.0 system.png |300px|thumb|right| Обновление ПО и выгрузка диагностики ]]
[[Image: Web-Configs-2.0 system.png |300px|thumb|right| Updating software and downloading diagnostics ]]
Обновить ПО контроллера без доступа к интернету можно через веб-интерфейс, для этого вам понадобится компьютер и заранее загруженный fit-файл прошивки. Подробнее про обновление ПО контроллера читайте в [[Wiren Board Firmware Update| инструкции]].
You can update the controller software without access to the Internet through the web interface, for this you will need a computer and a pre-loaded firmware fit-file. For more information about updating the controller software, see [[Wiren Board Firmware Update| instruction]].
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
If the controller works with errors, then when contacting technical support, we recommend uploading a diagnostic archive - this will help us quickly understand the problem. If for some reason you cannot upload the archive from the web interface, use the console utility [https://github.com/wirenboard/wb-diag-collect wb-diag-collect].
Если в работе контроллера возникли ошибки, то при обращении в техническую поддержку рекомендуем выгрузить диагностический архив — это поможет нам быстрее разобраться в проблеме. Если по какой-то причине выгрузить архив из веб-интерфейса не получается, воспользуйтесь консольной утилитой [https://github.com/wirenboard/wb-diag-collect wb-diag-collect].
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
== View MQTT channels and syslog ==
== Просмотр MQTT-каналов и системного журнала ==
{{Anchor|mqtt-channels}}
{{Anchor|mqtt-channels}}
Список MQTT-каналов пригодится при диагностике неисправностей, или при настройке интеграции со сторонним ПО, например, [[Rapid SCADA]] или [[Home Assistant]]. Список доступен в разделе '''Настройки''' → '''MQTT-каналы'''.
The list of MQTT channels is useful when troubleshooting, or when setting up integration with third-party software, such as [[Rapid SCADA]] or [[Home Assistant]]. The list is available in the section '''Settings''' → '''MQTT channels'''.
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
The Linux system log can be viewed using the [[journalctl]] utility or in the controller web interface in the '''Settings''' → '''Logs''' section.
Системный журнал ОС 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 channels
Image:Web-Configs-2.0 logs.png| Системный журнал
Image:Web-Configs-2.0 logs.png| Logs
</gallery>
 
== Phone control ==
{{Anchor|mobile}}
The web interface adapts to the screen size, so you can control the automation system from a mobile device or tablet.
 
An alternative would be to use third-party applications: [[MQTT_Dash]], [[Home Assistant]], [[Apple HomeKit|Apple Home]] and others, see [[Supported_devices |table of supported devices and programs]] for a complete list.
 
<gallery mode="packed" heights="350px" caption="Phone controller web interface">
Image: web-ui mobile 1.png | Device List
Image: web-ui mobile 2.png | Side panel
Image: web-ui mobile 5.png | SVG dashboard
Image: web-ui mobile 3.png | Viewing the system log
Image: web-ui mobile 4.png | Modbus device setup
</gallery>
</gallery>
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
== Previous version ==
== Предыдущая версия ==
* [[Wiren_Board_Web_Interface 1.0| Wiren Board Web Interface 1.0]], replaced by 2.0 in early 2021.
* [[Wiren_Board_Web_Interface 1.0| Веб-интерфейс Wiren Board 1.0]], заменён на 2.0 в начале 2021 года.
</div>
Источник — https://wirenboard.com/wiki/Служебная:Сравнение_версий/65663...65897