Wiren Board Web Interface: различия между версиями
(Удалённая из перевода страница) |
|||
Строка 1: | Строка 1: | ||
[[Файл:Web-Home-2.0.png|thumb|700 px|Главная страница | {{DISPLAYTITLE: Веб-интерфейс Wiren Board}} | ||
[[Файл:Web-Home-2.0.png|thumb|700 px|Главная страница веб-интерфейса]] | |||
== Возможности == | |||
Контроллер Wiren Board имеет встроенный веб-интерфейс. | Контроллер Wiren Board имеет встроенный веб-интерфейс. | ||
Через интерфейс можно: | Через интерфейс можно: | ||
Строка 6: | Строка 8: | ||
*настраивать контроллер и обновлять его ПО; | *настраивать контроллер и обновлять его ПО; | ||
*писать правила на встроенном движке; | *писать правила на встроенном движке; | ||
*настраивать SMS и email уведомления; | *настраивать SMS и email-уведомления; | ||
*смотреть на графике историю значений (например, температуры). | *смотреть на графике историю значений (например, температуры). | ||
Веб-интерфейс работает непосредственно на Wiren Board. В качестве веб-сервера работает [http://nginx.org nginx], сайт взаимодействует с MQTT через [http://en.wikipedia.org/wiki/WebSocket WebSocket]. | Веб-интерфейс работает непосредственно на Wiren Board. В качестве веб-сервера работает [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}} | |||
== | == Работа с веб-интерфейсом == | ||
[[File:Web-Acess_Level-2.0.png|thumb|center|600 px|Выбор уровня доступа]] | [[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'''. | ||
Строка 44: | Строка 28: | ||
Чтобы получить уровень доступа '''Administrator''', на вкладке '''Access Level''' выберите опцию '''Administrator''', подтвердите выбор, установив флажок в поле '''"I take full responsibility for my actions"''', и нажмите кнопку '''Apply''' (как показано на рисунке "Выбор уровня доступа"). | Чтобы получить уровень доступа '''Administrator''', на вкладке '''Access Level''' выберите опцию '''Administrator''', подтвердите выбор, установив флажок в поле '''"I take full responsibility for my actions"''', и нажмите кнопку '''Apply''' (как показано на рисунке "Выбор уровня доступа"). | ||
== Разделы интерфейса == | == Разделы интерфейса == | ||
=== Home (Главная страница) === | === Home (Главная страница) === | ||
[[File:Web-Home-2.0.png|thumb|center|600 px|Home - главная страница]] | [[File:Web-Home-2.0.png|thumb|center|600 px|Home - главная страница]] | ||
Это главная страница пользователя. На неё выводятся элементы интерфейса - так называемые "виджеты" (widget). Это могут быть показания датчиков (например, датчика температуры), кнопки включения света, управления подключёнными реле. | Это главная страница пользователя. На неё выводятся элементы интерфейса - так называемые "виджеты" (widget). Это могут быть показания датчиков (например, датчика температуры), кнопки включения света, управления подключёнными реле. | ||
Набор виджетов на главной странице полностью настраивается пользователем в меню '''Settings -> Web UI -> Common Info''', где можно выбрать панель, которая будет отображаться | Набор виджетов на главной странице полностью настраивается пользователем в меню '''Settings -> Web UI -> Common Info''', где можно выбрать панель, которая будет отображаться во вкладке '''Home''' по умолчанию. | ||
=== Dashboards (Панели) === | === Dashboards (Панели) === | ||
[[File:Web-Dashboards-2.0.png|thumb|600 px|center|Dashboards - список панелей]] | [[File:Web-Dashboards-2.0.png|thumb|600 px|center|Dashboards - список панелей]] | ||
Виджеты со схожим назначением можно группировать в панели, где на одном экране находятся все необходимые кнопки, настройки и показатели датчиков. Например, можно объединить виджеты включения подогрева, кондиционера, отображения температуры и влажности. В разделе '''Dashboards''' можно увидеть все созданные панели. Раздел Home тоже отображает одну из панелей, выбранную в настройках. | Виджеты со схожим назначением можно группировать в панели, где на одном экране находятся все необходимые кнопки, настройки и показатели датчиков. Например, можно объединить виджеты включения подогрева, кондиционера, отображения температуры и влажности. В разделе '''Dashboards''' можно увидеть все созданные панели. Раздел Home тоже отображает одну из панелей, выбранную в настройках. | ||
Дважды щелкнув | Дважды щелкнув по вкладке '''Dashboards''' на боковой панели, можно раскрыть список всех панелей, созданных в веб-интерфейсе. | ||
=== Devices (Устройства) === | Кроме текстовых панелей с виджетами, можно создавать [[SVG-Dashboards | интерактивные SVG-панели]] (SVG Dashboards). | ||
[[File:SVG-Dashboard Example.png|thumb|600 px|center|Пример SVG-панели]] | |||
=== Devices (Устройства) === | |||
[[File:Web-Devices-2.0.png|thumb|center|700 px|Devices - список всех аппаратных функций контроллера и подключённых устройств]] | [[File:Web-Devices-2.0.png|thumb|center|700 px|Devices - список всех аппаратных функций контроллера и подключённых устройств]] | ||
На странице '''Devices''' отображаются все аппаратные возможности контроллера (состояние входов, выходов, напряжение питания), а также подключённых датчиков и устройств. Если вы подключили к контроллеру внешний модуль, все его меняющиеся значения будут отображены тут. | На странице '''Devices''' отображаются все аппаратные возможности контроллера (состояние входов, выходов, напряжение питания), а также подключённых датчиков и устройств. Если вы подключили к контроллеру внешний модуль, все его меняющиеся значения будут отображены тут. | ||
Каждый элемент устройства (показание значения напряжения, сетевой адрес, кнопка управления реле, флажок состояния входа и т.п.) -- называется "контрол". Несколько контролов могут быть объединены в один виджет | Каждый элемент устройства (показание значения напряжения, сетевой адрес, кнопка управления реле, флажок состояния входа и т.п.) -- называется "контрол". Несколько контролов могут быть объединены в один виджет. Подробнее смотрите в разделе [[#Widgets (Виджеты)|Widgets (Виджеты)]]. | ||
Подключаемые устройства (Modbus-модули , боковые и внутренние модули) '''не''' определяются контроллером автоматически. Чтобы на этой странице появились аппаратные возможности подключённых устройств (например, внешних модулей реле), сначала нужно настроить их через раздел [[#Configs |Configs (Конфигурирование)]]. | Подключаемые устройства (Modbus-модули, боковые и внутренние модули) '''не''' определяются контроллером автоматически. Чтобы на этой странице появились аппаратные возможности подключённых устройств (например, внешних модулей реле), сначала нужно настроить их через раздел [[#Configs |Configs (Конфигурирование)]]. | ||
Удалить отключенные/неработающие устройства из | Удалить отключенные/неработающие устройства из веб-интерфейса можно с помощью кнопки '''Delete''' в виде значка с изображением мусорной корзины, в верхней строке плитки устройства. Кнопка появляется, когда указатель мыши находится над плиткой устройства. | ||
[[File:Web-Devices-Delete-Device-2.0.png|thumb|center|400 px|Удаление отключенного устройства]] | [[File:Web-Devices-Delete-Device-2.0.png|thumb|center|400 px|Удаление отключенного устройства]] | ||
=== Widgets (Виджеты) === | === Widgets (Виджеты) === | ||
[[File:Web-Widgets-2.0.png|thumb|center|718px|Widgets - страница управления виджетами]] | [[File:Web-Widgets-2.0.png|thumb|center|718px|Widgets - страница управления виджетами]] | ||
Строка 80: | Строка 67: | ||
==== Пример создания виджетов ==== | ==== Пример создания виджетов ==== | ||
{| | {| | ||
|[[File:Web-Dashboards-Add_Dashboard-2.0.png|thumb|500px|center|Создать новую панель]] | |[[File:Web-Dashboards-Add_Dashboard-2.0.png|thumb|500px|center|Создать новую панель]] | ||
Строка 87: | Строка 74: | ||
Для примера создадим два виджета с показаниями температуры и переключателями управления отопительными конвекторами для двух комнат ''"Комната 1"'' и ''"Комната 2"''. | Для примера создадим два виджета с показаниями температуры и переключателями управления отопительными конвекторами для двух комнат ''"Комната 1"'' и ''"Комната 2"''. | ||
* На боковой панели щелкнем на вкладке '''Dashboards''', в раскрывшемся списке выберем элемент '''List''' | * На боковой панели щелкнем на вкладке '''Dashboards''', в раскрывшемся списке выберем элемент '''List''' и на открывшейся странице нажмем кнопку '''Add'''. | ||
* В поле '''Name''' напишем название новой панели, ''"Управление отоплением"'' | * В поле '''Name''' напишем название новой панели, ''"Управление отоплением"'' и нажмем кнопку '''Save'''. | ||
* В списке на странице '''Dashoards''' щелкнем | * В списке на странице '''Dashoards''' щелкнем по кнопке '''View''' напротив новой панели "Управление отоплением". | ||
* В открывшемся окне с названием панели щелкнем | * В открывшемся окне с названием панели щелкнем по кнопке '''Add widget''' в правом верхнем углу окна (см. Рис. "Создать новый виджет"). | ||
* В заголовке виджета укажем название, в нашем случае ''"Комната 1"'', в списке '''Add control...''' выберем контрол, соовететвующий термометру в первой комнате, еще раз в этом списке выберем реле, которое будет включать нагреватель. | * В заголовке виджета укажем название, в нашем случае ''"Комната 1"'', в списке '''Add control...''' выберем контрол, соовететвующий термометру в первой комнате, еще раз в этом списке выберем реле, которое будет включать нагреватель. | ||
* В поле '''Name''' виджета можно задать осмысленные названия для контролов, например: ''"Температура"'' и ''"Обогреватель"''. Снимите флажок '''Compact mode''', чтобы эти названия контролов отображались в виджете. | * В поле '''Name''' виджета можно задать осмысленные названия для контролов, например: ''"Температура"'' и ''"Обогреватель"''. Снимите флажок '''Compact mode''', чтобы эти названия контролов отображались в виджете. | ||
Строка 104: | Строка 91: | ||
|} | |} | ||
=== History (История показаний) === | === History (История показаний) === | ||
[[File:Web-History-Web-2.0.png|thumb|center|814px|Пример отображения исторических данных]] | [[File:Web-History-Web-2.0.png|thumb|center|814px|Пример отображения исторических данных]] | ||
Строка 112: | Строка 99: | ||
* Указание интервала времени для отображения данных | * Указание интервала времени для отображения данных | ||
* Добавление и удаление нескольких показателей (кнопки Add channel и delete) на график | * Добавление и удаление нескольких показателей (кнопки Add channel и delete) на график | ||
* | * Просмотр данных в виде графика и в виде таблицы | ||
* | * Загрузка данных за выбранный период в csv-формате. | ||
При наведении указателя мыши на область изображения становятся доступными дополнительные функции (кнопки в верхней правой части графика): | При наведении указателя мыши на область изображения становятся доступными дополнительные функции (кнопки в верхней правой части графика): | ||
* Сохранение графика в формате .png | * Сохранение графика в формате .png | ||
* Переключение между режимами Zoom (увеличения/уменьшения отрезка данных и масштаба с помощью выделения нужной области указателем мыши) и панорамирования Pan (перемещения области видимости с зажатой левой кнопкой мыши) | * Переключение между режимами Zoom (увеличения/уменьшения отрезка данных и масштаба с помощью выделения нужной области указателем мыши) и панорамирования Pan (перемещения области видимости с зажатой левой кнопкой мыши) | ||
* | * Уменьшение и увеличение отображаемого временного интервала (Zoom in и Zoom out) | ||
* | * Автоматический выбор масштаба графика по обеим осям | ||
* Возвращение масштаба осей к исходному | * Возвращение масштаба осей к исходному | ||
* | * Включение/выключение указателя координат | ||
[[Wb-mqtt-db-cli|Утилита для извлечения исторических данных из внутренней базы данных]] | [[Wb-mqtt-db-cli|Утилита для извлечения исторических данных из внутренней базы данных]] | ||
=== Rules (Правила-скрипты) === | === Rules (Правила-скрипты) === | ||
[[File:Web-Rules-2.0.png|thumb|center|800 px|Скрипт, открытый для просмотра и редактирования]] | [[File:Web-Rules-2.0.png|thumb|center|800 px|Скрипт, открытый для просмотра и редактирования]] | ||
На странице '''Rules''' можно создавать и редактировать правила. Правила пишутся на простом языке, похожем на JavaScript | На странице '''Rules''' можно создавать и редактировать правила. Правила пишутся на простом языке, похожем на JavaScript и позволяют создавать правила ("включай свет с 10:00 до 18:00") или виртуальные устройства (например, кнопка в интерфейсе, которая включает и отключает всё освещение в здании вместе). | ||
*[[Движок правил wb-rules | Подробнее про скрипты]]. | *[[Движок правил wb-rules | Подробнее про скрипты]]. | ||
=== Settings -> Configs (Настройки -> Конфигурирование) === | === Settings -> Configs (Настройки -> Конфигурирование) === | ||
[[File:Web-Configs-2.0.png|thumb|center|600 px|Страница Configs]] | [[File:Web-Configs-2.0.png|thumb|center|600 px|Страница Configs]] | ||
На странице '''Settings -> Configs''' производится конфигурирование контроллера и настройка подключения внешних устройств: | На странице '''Settings -> Configs''' производится конфигурирование контроллера и настройка подключения внешних устройств: | ||
Строка 138: | Строка 125: | ||
* настройка серверов получения точного времени | * настройка серверов получения точного времени | ||
* конфигурирование и настройка боковых и внутренних модулей | * конфигурирование и настройка боковых и внутренних модулей | ||
* настройка | * настройка сервиса knxd | ||
* настройка аналоговых входов | * настройка аналоговых входов | ||
* настройка | * настройка записи в историю | ||
* настройка шлюза | * настройка цифровых входов и выходов (GPIO): в последних версиях контроллера список GPIO по умолчанию пустой, все вводы-выводы сконфигурированы системой. Изменять назначение вводов-выводов следует, если вы хотите изменить их режим функционирования. Список номеров GPIO для последних версий контроллеров Wiren Board 6 представлен на странице [[Wiren_Board_6#Подробное_тех.описание_платы_контроллера|Подробное_тех.описание_платы_контроллера]]. | ||
* настройка | * настройка шлюза Modbus TCP / Modbus RTU | ||
* настройка шлюза OPC UA | |||
* настройка подключения устройств RS-485 | |||
* настройка предупреждений (alarms) | * настройка предупреждений (alarms) | ||
* доступ к редактированию JSON-файла настроек | * доступ к редактированию JSON-файла настроек веб-интерфейса | ||
=== Settings -> WebUI (Настройки -> | === Settings -> WebUI (Настройки -> Веб-интерфейс) === | ||
[[File:Web-Settings_WebUI-2.0.png|center|thumb|600 px|Страница Settings]] | [[File:Web-Settings_WebUI-2.0.png|center|thumb|600 px|Страница Settings]] | ||
Строка 154: | Строка 143: | ||
* Указать префикс всех топиков, с которым данные охраняются в облачном сервисе | * Указать префикс всех топиков, с которым данные охраняются в облачном сервисе | ||
* Выбрать панель (Default Dashboard), которая будет отображаться на главной странице (Home) | * Выбрать панель (Default Dashboard), которая будет отображаться на главной странице (Home) | ||
{{SupportedSinceRelease | |||
| release = wb-2110 | |||
|content= | |||
* Выбрать язык веб-интерфейса. | |||
}} | |||
=== Settings -> System (Настройки -> Системные) === | |||
<div id="system"></div> | |||
[[File:Web-Settings_System-2.0.png|center|thumb|600 px|Страница System]] | |||
= | На этой странице можно: | ||
* Обновить прошивку контроллера, предварительно скачав ее на компьютер. | |||
{{SupportedSinceRelease | |||
| release = wb-2110 | |||
|content= | |||
* Загрузить архив с диагностической информацией для отправки в техподдержку. | |||
}} | |||
[[File:Web- | === Settings -> MQTT Channels (Настройки -> MQTT-каналы) === | ||
{{Anchor|mqtt-channels}} | |||
[[File:Web-Settings_MQTT_Channels-2.0.png|center|thumb|600 px|MQTT Channels]] | |||
'''Settings → MQTT Channels'''. На этой странице приводится справочная информация о всех MQTT-топиках, полученных веб-интерфейсом контроллера, а также статус их получения ('''ОК''' или '''ERR''' в последнем столбце). | |||
=== 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'''. | |||
=== Settings -> | <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:Настройка через веб-интерфейс]] | [[RS-485:Настройка через веб-интерфейс]] | ||
===Обновить прошивку контроллера=== | ===Обновить прошивку контроллера=== | ||
[[ | [[Wiren_Board_Firmware_Update#Обновление через веб-интерфейс|Обновление прошивки через веб-интерфейс]] | ||
== Облачный интерфейс == | == Облачный интерфейс == | ||
Веб-интерфейс Wiren Board можно разместить не только на самом контроллере, но и на специальном сервере. Тогда на интерфейс можно будет заходить используя всегда один и тот же IP-адрес. | Веб-интерфейс Wiren Board можно разместить не только на самом контроллере, но и на специальном сервере. Тогда на интерфейс можно будет заходить, используя всегда один и тот же IP-адрес. | ||
Чтобы контроллер начал работать с веб-интерфейсом, размещённым на сервере, нужно внести некоторые изменения в конфигурацию контроллера. | Чтобы контроллер начал работать с веб-интерфейсом, размещённым на сервере, нужно внести некоторые изменения в конфигурацию контроллера. | ||
Строка 190: | Строка 211: | ||
'''Пока что такой вариант доступен только корпоративным клиентам по запросу.''' | '''Пока что такой вариант доступен только корпоративным клиентам по запросу.''' | ||
== Настройка авторизованного доступа к веб-интерфейсу контроллера == | |||
В статье [[Защита_паролем|Защита паролем]] приводятся краткие инструкции по перенастройке контроллера, обеспечивающие авторизованный доступ к веб-интерфейсу контроллера. | |||
== Основные отличия версии 2.x от 1.0 == | |||
* Каждый виджет может содержать произвольное число каналов, в виджете каналы можно переименовывать | |||
* Отдельные устройства теперь автоматически сворачиваются в виде плиток, если не помещаются на экране. Плитки можно развернуть или свернуть | |||
* Появились уровни доступа к интерфейсу (пользователь, оператор, администратор). Текущий уровень доступа отображается в правом верхнем углу интерфейса, рядом со значком состояния подключения | |||
* Улучшенный интерфейс для мобильных устройств | |||
* По клику на канал или значение название канала или его значение копируются в буфер обмена | |||
* Историю значений можно посмотреть, нажав на кнопку, появляющуюся рядом со значением при наведении | |||
* Историю значений можно скачивать в виде текстового файла | |||
* Исторические данные загружаются постепенно; возможно сравнивать значения нескольких каналов | |||
* Удаление лишних MQTT-топиков из интерфейса | |||
* Все настройки отображения теперь хранятся в конфиг-файле /etc/wb-ui.conf в формате JSON. Теперь их можно редактировать и генерировать из сторонних программ и очень просто копировать с одного контроллера на другой | |||
* Отсутствуют "Комнаты" | |||
* Сохранение конфигурации интерфейса при обновлении предыдущей версии веб-интерфейса. |