Wiren Board Web Interface: различия между версиями
(не показана 121 промежуточная версия 4 участников) | |||
Строка 1: | Строка 1: | ||
{{DISPLAYTITLE: Веб-интерфейс Wiren Board}} | |||
{{DISPLAYTITLE: Веб-интерфейс | [[Файл:Web-Home-2.0.png|thumb|700 px|Главная страница веб-интерфейса]] | ||
== Возможности == | |||
Контроллер Wiren Board имеет встроенный веб-интерфейс. | |||
Через интерфейс можно: | |||
*следить за состоянием контроллера и подключённых устройств и управлять ими; | |||
*подключать устройства к контроллеру; | |||
*настраивать контроллер и обновлять его ПО; | |||
*писать правила на встроенном движке; | |||
*настраивать SMS и email-уведомления; | |||
*смотреть на графике историю значений (например, температуры). | |||
Веб-интерфейс работает непосредственно на 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]. | |||
Ниже дано описание версии 2.0. Про предыдущую версию можно найти на странице [[Веб-интерфейс_Wiren_Board_1.0| Веб-интерфейс Wiren Board 1.0]]. | |||
== Как зайти в веб-интерфейс == | == Как зайти в веб-интерфейс == | ||
{{Wbincludes:How to enter}} | {{Wbincludes:How to enter}} | ||
== | == Работа с веб-интерфейсом == | ||
[[File:Web-Acess_Level-2.0.png|thumb|center|600 px|Выбор уровня доступа]] | |||
Для начала работы с веб-интерфейсом выберите уровень доступа. Для этого на вкладке '''Settings -> Change access level -> Acess Level''' выберите один из пунктов '''User, Operator''' или '''Administrator'''. | |||
Уровни ограничивают доступ к функционалу веб-интерфейса: например, пользователь '''User''' может просматривать только настроенные виджеты, их редактирование и изменение настроек контроллера недоступно. Пользователь '''Operator''' получает доступ к контролам устройств, управляемых контроллером, может добавлять виджеты в панели (dashboards) (см. далее). Пользователь '''Administrator''' обладает всеми правами. Изменение текущего уровня доступа может быть изменено любым пользователем и предназначено больше для защиты от неверных действий, чем для разграничения прав. | |||
В дальнейшем изложении мы предполагаем, что все действия выполняются пользователем '''Administrator'''. | |||
Чтобы получить уровень доступа '''Administrator''', на вкладке '''Access Level''' выберите опцию '''Administrator''', подтвердите выбор, установив флажок в поле '''"I take full responsibility for my actions"''', и нажмите кнопку '''Apply''' (как показано на рисунке "Выбор уровня доступа"). | |||
== Разделы интерфейса == | |||
=== Домашняя страница === | |||
{{Anchor|home}} | |||
На домашнюю страницу можно вывести один из текстовых дашбордов, которые могут содержать показания датчиков, элементы управления и т.п. Дашборд, который нужно показывать на этой странице указывается в настройках веб-интерфейса. | |||
[[File:Web-Home-2.0.png|thumb|center|500px|Домашняя страница]] | |||
=== Панели === | |||
=== Панели === | |||
{{Anchor|dashboards}} | {{Anchor|dashboards}} | ||
Каналы различных устройств можно объединять в виджеты, из которых потом создаются текстовые панели. Например, можно сделать один виджет «Климат», в котором будут: температура, влажность, переключатели управления вентиляцией, обогревом и кондиционером. | |||
Также веб-интерфейс позволяет создавать интерактивные [[SVG-Dashboards | интерактивные графические SVG-панели]], которые можно вывести на планшет и использовать как пульт управления автоматизацией. | |||
<gallery mode="packed" heights="150px"> | <gallery mode="packed" heights="150px"> | ||
Image: Web-Dashboards-2.0.png | Список панелей | Image: Web-Dashboards-2.0.png | Список панелей | ||
Строка 64: | Строка 47: | ||
</gallery> | </gallery> | ||
=== | === Устройства === | ||
{{Anchor|devices}} | |||
На странице «Устройства» находятся виртуальные представления физически подключённых к контроллеру устройств или виртуальных устройств, созданных скриптами [[wb-rules]]. | |||
Каждое устройства представлено карточкой, которая содержит каналы устройства — контролы. Если нажать на название контрола, то вы получите путь вида <code>device/control</code>, который можно использовать при написании скриптов на wb-rules. | |||
Не используйте эту страницу для управления системой автоматизацией, для этого есть панели. | |||
<gallery mode="packed" heights="150px"> | |||
Image: Web-Devices-2.0.png | Список устройств, подключённых к контроллеру | |||
Image: Web-Devices-Delete-Device-2.0.png | Удаление карточки устройства | |||
</gallery> | |||
=== Виджеты === | |||
{{Anchor|widgets}} | {{Anchor|widgets}} | ||
С помощью виджетов удобно объединять контролы разных устройств по смыслу, или местонахождению. Например, можно сделать виджет для | С помощью виджетов удобно объединять контролы разных устройств по смыслу, или местонахождению. Например, можно сделать виджет для управление освещением в спальне, или виджет климата в магазине. | ||
Проще всего виджеты добавлять сразу на панель управления кнопкой «Добавить виджет», а потом воспользоваться конструктором или описать виджет в формате JSON. | |||
<gallery mode="packed" heights="100px"> | |||
<gallery mode="packed" heights=" | 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 | ||
Строка 81: | Строка 74: | ||
</gallery> | </gallery> | ||
== | === История === | ||
{{Anchor|history}} | {{Anchor|history}} | ||
По умолчанию стандартное ПО контроллера хранит все полученные данные, которые вы можете посмотреть в виде графиков или таблицы. Данные можно выгрузить в csv, для этого нажмите на кнопку под графиком, или воспользуйтесь утилитой [[Wb-mqtt-db-cli|wb-mqtt-db-cli]]. | |||
Возможности отображения: | Возможности отображения: | ||
* выбор периода; | * выбор периода; | ||
Строка 192: | Строка 84: | ||
* масштабирование; | * масштабирование; | ||
* снятие скриншота; | * снятие скриншота; | ||
* курсорные измерения. | * курсорные измерения. | ||
Если вам надо больше возможностей, вы можете настроить автоматический экспорт данных в [[Grafana]]. | |||
Если | |||
<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 | Табличное представление | ||
Строка 229: | Строка 95: | ||
</gallery> | </gallery> | ||
== | === Редактор скриптов === | ||
{{Anchor|rules}} | {{Anchor|wb-rules-editor}} | ||
В веб-интерфейсе контроллера есть редактор скриптов [[wb-rules]], который позволяет создавать, редактировать и удалять правила. Если в скрипте есть ошибки, то редактор сообщит вам об этом и укажет место в скрипте. | В веб-интерфейсе контроллера есть редактор скриптов [[wb-rules]], который позволяет создавать, редактировать и удалять правила. Если в скрипте есть ошибки, то редактор сообщит вам об этом и укажет место в скрипте. | ||
<gallery mode="packed" heights="150px"> | <gallery mode="packed" heights="150px"> | ||
Image: Web-Rules-2.0.png | Редактор скриптов | Image: Web-Rules-2.0.png | Редактор скриптов | ||
Строка 266: | Строка 105: | ||
</gallery> | </gallery> | ||
== | === Настройки === | ||
{{Anchor|settings}} | {{Anchor|settings}} | ||
Страница администрирования на которой вы сможете: | |||
* настроить контроллер и подключённые к нему устройства; | |||
* изменить уровень доступа и выбрать язык веб-интерфейса; | |||
* обновить ПО контроллера и выгрузить диагностический архив, который удобно использовать при обращении в техподдержку; | |||
* посмотреть список MQTT-каналов и системный журнал. | |||
<gallery mode="packed" heights="120px"> | |||
Image:Web-Configs-2.0.png| Настройки контроллера и подключённых устройств | |||
Image:Web-Configs-2.0 webui.png| Выбор языка веб-интерфейса и настройка подключения к MQTT | |||
Image:Web-Configs-2.0 system.png| Обновление прошивки контроллера и выгрузка диагностической информации | |||
Image:Web-Configs-2.0 mqtt.png| MQTT-каналы | |||
Image:Web-Configs-2.0 access.png| Смена уровня доступа | |||
Image:Web-Configs-2.0 logs.png| Системный журнал | |||
</gallery> | |||
=== Settings -> Change access level (Настройки -> Права доступа) === | |||
[[Файл:WebUI 2.0 — changing user rights.png|300px|thumb|right|Web UI 2.0 — смена уровня доступа текущего пользователя]] | |||
Уровни доступа призваны защитить пользователя от ошибок при регулярной работе с контроллером. Важно понимать, что это не полноценное разграничение прав, а способ защитить себя от необдуманных действий. Новых пользователей создавать нельзя. | |||
Доступны следующие уровни: | |||
* User — дашборды, виджеты, история, базовые настройки. | |||
* Operator — права уровня User и раздел Devices. | |||
* Administrator — полный доступ ко всем функциям. | |||
Чтобы изменить уровень доступа к настройкам веб-интерфейса: | |||
''' | * Зайдите в веб-интерфейс. | ||
* Перейдите в раздел '''Settings''' и выберите пункт '''Change access level'''. Установите нужное значение и нажмите кнопку '''Apply'''. | |||
== | <div id="logs"></div> | ||
=== Settings -> Logs (Настройки -> Логи) === | |||
[[Image: WebUI 2.0 — logs.png |600px|thumb|none| Просмотр лог-файлов контроллера ]] | |||
Чтобы открыть инструмент, перейдите '''Settings''' → '''Logs'''. | |||
После выбора параметров, нажмите '''Load''' для запроса данных из системного журнала. | |||
Загруженные сообщения можно сохранить в файл, для этого нажмите кнопку '''Save loaded log to file''' и укажите куда сохранить. Строки из системного журнала подгружаются во время прокрутки списка сообщений, поэтому сперва прокрутите список до нужного места, а потом сохраняйте вывод в файл. | |||
Для отправки сообщений системного журнала в техподдержку удобно использовать [[#system | выгрузку диагностической информации]]. | |||
== Стандартные задачи, решаемые через веб-интерфейс == | |||
== | === Подключить устройство RS-485 Modbus и создать кнопки управления на главной панели === | ||
[[RS-485:Настройка через веб-интерфейс]] | |||
[[ | |||
===Обновить прошивку контроллера=== | |||
[[Wiren_Board_Firmware_Update#Обновление через веб-интерфейс|Обновление прошивки через веб-интерфейс]] | |||
== | == Облачный интерфейс == | ||
Веб-интерфейс Wiren Board можно разместить не только на самом контроллере, но и на специальном сервере. Тогда на интерфейс можно будет заходить, используя всегда один и тот же IP-адрес. | |||
Чтобы контроллер начал работать с веб-интерфейсом, размещённым на сервере, нужно внести некоторые изменения в конфигурацию контроллера. | |||
Такой вариант удобен, если ваш контроллер находится за роутером и не имеет глобального IP-адреса, или если он подключён по GPRS - тогда он тоже, скорее всего, не имеет глобального IP, да ещё и работа с удалённым веб-интерфейсом израсходует слишком много трафика. | |||
'''Пока что такой вариант доступен только корпоративным клиентам по запросу.''' | |||
== Настройка авторизованного доступа к веб-интерфейсу контроллера == | |||
В статье [[Защита_паролем|Защита паролем]] приводятся краткие инструкции по перенастройке контроллера, обеспечивающие авторизованный доступ к веб-интерфейсу контроллера. | |||
== Основные отличия версии 2.x от 1.0 == | |||
* Каждый виджет может содержать произвольное число каналов, в виджете каналы можно переименовывать | |||
* | * Отдельные устройства теперь автоматически сворачиваются в виде плиток, если не помещаются на экране. Плитки можно развернуть или свернуть | ||
* Появились уровни доступа к интерфейсу (пользователь, оператор, администратор). Текущий уровень доступа отображается в правом верхнем углу интерфейса, рядом со значком состояния подключения | |||
* Улучшенный интерфейс для мобильных устройств | |||
* По клику на канал или значение название канала или его значение копируются в буфер обмена | |||
* Историю значений можно посмотреть, нажав на кнопку, появляющуюся рядом со значением при наведении | |||
* Историю значений можно скачивать в виде текстового файла | |||
* Исторические данные загружаются постепенно; возможно сравнивать значения нескольких каналов | |||
* Удаление лишних MQTT-топиков из интерфейса | |||
* Все настройки отображения теперь хранятся в конфиг-файле /etc/wb-ui.conf в формате JSON. Теперь их можно редактировать и генерировать из сторонних программ и очень просто копировать с одного контроллера на другой | |||
* Отсутствуют "Комнаты" | |||
* Сохранение конфигурации интерфейса при обновлении предыдущей версии веб-интерфейса. |
Версия 12:38, 2 августа 2022
Возможности
Контроллер Wiren Board имеет встроенный веб-интерфейс. Через интерфейс можно:
- следить за состоянием контроллера и подключённых устройств и управлять ими;
- подключать устройства к контроллеру;
- настраивать контроллер и обновлять его ПО;
- писать правила на встроенном движке;
- настраивать SMS и email-уведомления;
- смотреть на графике историю значений (например, температуры).
Веб-интерфейс работает непосредственно на Wiren Board. В качестве веб-сервера работает nginx, сайт взаимодействует с MQTT через WebSocket.
Ниже дано описание версии 2.0. Про предыдущую версию можно найти на странице Веб-интерфейс Wiren Board 1.0.
Как зайти в веб-интерфейс
Чтобы зайти в веб-интерфейс контроллера Wiren Board, подключитесь к контроллеру через Wi-Fi или Ethernet и введите в адресную строку браузера IP-адрес контроллера.
Если вы находитесь в одной сети с контроллером и используете компьютер с Linux, Windows 10 и выше или macOS, или любое устройство Apple, то можно использовать mDNS. Вместо IP-адреса введите в адресную строку http://wirenboard-XXXXXXXX.local, где ХХХХХХХХ — серийный номер контроллера.
Также доступ можно получить через Wiren Board Cloud, если контроллер к нему подключен.
Работа с веб-интерфейсом
Для начала работы с веб-интерфейсом выберите уровень доступа. Для этого на вкладке Settings -> Change access level -> Acess Level выберите один из пунктов User, Operator или Administrator. Уровни ограничивают доступ к функционалу веб-интерфейса: например, пользователь User может просматривать только настроенные виджеты, их редактирование и изменение настроек контроллера недоступно. Пользователь Operator получает доступ к контролам устройств, управляемых контроллером, может добавлять виджеты в панели (dashboards) (см. далее). Пользователь Administrator обладает всеми правами. Изменение текущего уровня доступа может быть изменено любым пользователем и предназначено больше для защиты от неверных действий, чем для разграничения прав.
В дальнейшем изложении мы предполагаем, что все действия выполняются пользователем Administrator.
Чтобы получить уровень доступа Administrator, на вкладке Access Level выберите опцию Administrator, подтвердите выбор, установив флажок в поле "I take full responsibility for my actions", и нажмите кнопку Apply (как показано на рисунке "Выбор уровня доступа").
Разделы интерфейса
Домашняя страница
На домашнюю страницу можно вывести один из текстовых дашбордов, которые могут содержать показания датчиков, элементы управления и т.п. Дашборд, который нужно показывать на этой странице указывается в настройках веб-интерфейса.
Панели
Каналы различных устройств можно объединять в виджеты, из которых потом создаются текстовые панели. Например, можно сделать один виджет «Климат», в котором будут: температура, влажность, переключатели управления вентиляцией, обогревом и кондиционером.
Также веб-интерфейс позволяет создавать интерактивные интерактивные графические SVG-панели, которые можно вывести на планшет и использовать как пульт управления автоматизацией.
Устройства
На странице «Устройства» находятся виртуальные представления физически подключённых к контроллеру устройств или виртуальных устройств, созданных скриптами wb-rules.
Каждое устройства представлено карточкой, которая содержит каналы устройства — контролы. Если нажать на название контрола, то вы получите путь вида device/control
, который можно использовать при написании скриптов на wb-rules.
Не используйте эту страницу для управления системой автоматизацией, для этого есть панели.
Виджеты
С помощью виджетов удобно объединять контролы разных устройств по смыслу, или местонахождению. Например, можно сделать виджет для управление освещением в спальне, или виджет климата в магазине.
Проще всего виджеты добавлять сразу на панель управления кнопкой «Добавить виджет», а потом воспользоваться конструктором или описать виджет в формате JSON.
История
По умолчанию стандартное ПО контроллера хранит все полученные данные, которые вы можете посмотреть в виде графиков или таблицы. Данные можно выгрузить в csv, для этого нажмите на кнопку под графиком, или воспользуйтесь утилитой wb-mqtt-db-cli.
Возможности отображения:
- выбор периода;
- одновременный просмотр нескольких каналов;
- масштабирование;
- снятие скриншота;
- курсорные измерения.
Если вам надо больше возможностей, вы можете настроить автоматический экспорт данных в Grafana.
Редактор скриптов
В веб-интерфейсе контроллера есть редактор скриптов wb-rules, который позволяет создавать, редактировать и удалять правила. Если в скрипте есть ошибки, то редактор сообщит вам об этом и укажет место в скрипте.
Настройки
Страница администрирования на которой вы сможете:
- настроить контроллер и подключённые к нему устройства;
- изменить уровень доступа и выбрать язык веб-интерфейса;
- обновить ПО контроллера и выгрузить диагностический архив, который удобно использовать при обращении в техподдержку;
- посмотреть список MQTT-каналов и системный журнал.
Settings -> Change access level (Настройки -> Права доступа)
Уровни доступа призваны защитить пользователя от ошибок при регулярной работе с контроллером. Важно понимать, что это не полноценное разграничение прав, а способ защитить себя от необдуманных действий. Новых пользователей создавать нельзя.
Доступны следующие уровни:
- User — дашборды, виджеты, история, базовые настройки.
- Operator — права уровня User и раздел Devices.
- Administrator — полный доступ ко всем функциям.
Чтобы изменить уровень доступа к настройкам веб-интерфейса:
- Зайдите в веб-интерфейс.
- Перейдите в раздел Settings и выберите пункт Change access level. Установите нужное значение и нажмите кнопку Apply.
Settings -> Logs (Настройки -> Логи)
Чтобы открыть инструмент, перейдите Settings → Logs.
После выбора параметров, нажмите Load для запроса данных из системного журнала.
Загруженные сообщения можно сохранить в файл, для этого нажмите кнопку Save loaded log to file и укажите куда сохранить. Строки из системного журнала подгружаются во время прокрутки списка сообщений, поэтому сперва прокрутите список до нужного места, а потом сохраняйте вывод в файл.
Для отправки сообщений системного журнала в техподдержку удобно использовать выгрузку диагностической информации.
Стандартные задачи, решаемые через веб-интерфейс
Подключить устройство RS-485 Modbus и создать кнопки управления на главной панели
RS-485:Настройка через веб-интерфейс
Обновить прошивку контроллера
Обновление прошивки через веб-интерфейс
Облачный интерфейс
Веб-интерфейс Wiren Board можно разместить не только на самом контроллере, но и на специальном сервере. Тогда на интерфейс можно будет заходить, используя всегда один и тот же IP-адрес.
Чтобы контроллер начал работать с веб-интерфейсом, размещённым на сервере, нужно внести некоторые изменения в конфигурацию контроллера.
Такой вариант удобен, если ваш контроллер находится за роутером и не имеет глобального IP-адреса, или если он подключён по GPRS - тогда он тоже, скорее всего, не имеет глобального IP, да ещё и работа с удалённым веб-интерфейсом израсходует слишком много трафика.
Пока что такой вариант доступен только корпоративным клиентам по запросу.
Настройка авторизованного доступа к веб-интерфейсу контроллера
В статье Защита паролем приводятся краткие инструкции по перенастройке контроллера, обеспечивающие авторизованный доступ к веб-интерфейсу контроллера.
Основные отличия версии 2.x от 1.0
- Каждый виджет может содержать произвольное число каналов, в виджете каналы можно переименовывать
- Отдельные устройства теперь автоматически сворачиваются в виде плиток, если не помещаются на экране. Плитки можно развернуть или свернуть
- Появились уровни доступа к интерфейсу (пользователь, оператор, администратор). Текущий уровень доступа отображается в правом верхнем углу интерфейса, рядом со значком состояния подключения
- Улучшенный интерфейс для мобильных устройств
- По клику на канал или значение название канала или его значение копируются в буфер обмена
- Историю значений можно посмотреть, нажав на кнопку, появляющуюся рядом со значением при наведении
- Историю значений можно скачивать в виде текстового файла
- Исторические данные загружаются постепенно; возможно сравнивать значения нескольких каналов
- Удаление лишних MQTT-топиков из интерфейса
- Все настройки отображения теперь хранятся в конфиг-файле /etc/wb-ui.conf в формате JSON. Теперь их можно редактировать и генерировать из сторонних программ и очень просто копировать с одного контроллера на другой
- Отсутствуют "Комнаты"
- Сохранение конфигурации интерфейса при обновлении предыдущей версии веб-интерфейса.