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

Отметить эту версию для перевода
м
(Отметить эту версию для перевода)
Строка 12: Строка 12:
*смотреть на графике историю значений (например, температуры).
*смотреть на графике историю значений (например, температуры).


<!--T:203-->
Веб-интерфейс работает непосредственно на 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].


== Предыдущая версия Web-интерфейса ==
== Предыдущая версия Web-интерфейса == <!--T:204-->
Начиная с апреля 2019 года на контроллерах Wiren Board устанавливается новая версия Web-интерфейса Web UI 2.0. Описание предыдущей версии можно найти на странице [[Веб-интерфейс_Wiren_Board_1.0| Веб-интерфейс Wiren Board 1.0]].
Начиная с апреля 2019 года на контроллерах Wiren Board устанавливается новая версия Web-интерфейса Web UI 2.0. Описание предыдущей версии можно найти на странице [[Веб-интерфейс_Wiren_Board_1.0| Веб-интерфейс Wiren Board 1.0]].




== Основные отличия новой версии ==
== Основные отличия новой версии == <!--T:205-->


<!--T:206-->
* Каждый виджет может содержать произвольное число каналов, в виджете каналы можно переименовывать
* Каждый виджет может содержать произвольное число каналов, в виджете каналы можно переименовывать
* Отдельные устройства теперь автоматически сворачиваются в виде плиток, если не помещаются на экране. Плитки можно развернуть или свернуть
* Отдельные устройства теперь автоматически сворачиваются в виде плиток, если не помещаются на экране. Плитки можно развернуть или свернуть
Строка 38: Строка 40:
Просто введите в адресную строку браузера IP-адрес контроллера ([[Как узнать IP-адрес контроллера|как узнать IP-адрес контроллера]]). Если вы заходите с устройства Apple или компьютера с Linux и находитесь в одной сети с контроллером, введите в адресную строку ''wirenboard-XXXXXXXX.local'', где ХХХХХХХХ - восьмизначный серийный номер контроллера. ( в старых версиях контроллера доступ осуществлялся через адрес  ''wirenboard.local'').
Просто введите в адресную строку браузера IP-адрес контроллера ([[Как узнать IP-адрес контроллера|как узнать IP-адрес контроллера]]). Если вы заходите с устройства Apple или компьютера с Linux и находитесь в одной сети с контроллером, введите в адресную строку ''wirenboard-XXXXXXXX.local'', где ХХХХХХХХ - восьмизначный серийный номер контроллера. ( в старых версиях контроллера доступ осуществлялся через адрес  ''wirenboard.local'').


== Работа с Web-интерфейсом ==
== Работа с Web-интерфейсом == <!--T:207-->
[[File:Web-Acess_Level-2.0.png|thumb|center|600 px|Выбор уровня доступа]]
[[File:Web-Acess_Level-2.0.png|thumb|center|600 px|Выбор уровня доступа]]


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


<!--T:209-->
В дальнейшем изложении мы предполагаем, что все действия выполняются пользователем '''Administrator'''.  
В дальнейшем изложении мы предполагаем, что все действия выполняются пользователем '''Administrator'''.  


<!--T:210-->
Чтобы получить уровень доступа '''Administrator''', на вкладке '''Access Level''' выберите опцию '''Administrator''', подтвердите выбор, установив флажок в поле '''"I take full responsibility for my actions"''', и нажмите кнопку '''Apply''' (как показано на рисунке "Выбор уровня доступа").
Чтобы получить уровень доступа '''Administrator''', на вкладке '''Access Level''' выберите опцию '''Administrator''', подтвердите выбор, установив флажок в поле '''"I take full responsibility for my actions"''', и нажмите кнопку '''Apply''' (как показано на рисунке "Выбор уровня доступа").


Строка 63: Строка 68:
Виджеты со схожим назначением можно группировать в панели, где на одном экране находятся все необходимые кнопки, настройки и показатели датчиков. Например, можно объединить виджеты включения подогрева, кондиционера, отображения температуры и влажности. В разделе '''Dashboards''' можно увидеть все созданные панели. Раздел Home тоже отображает одну из панелей, выбранную в настройках.
Виджеты со схожим назначением можно группировать в панели, где на одном экране находятся все необходимые кнопки, настройки и показатели датчиков. Например, можно объединить виджеты включения подогрева, кондиционера, отображения температуры и влажности. В разделе '''Dashboards''' можно увидеть все созданные панели. Раздел Home тоже отображает одну из панелей, выбранную в настройках.


<!--T:211-->
Дважды щелкнув на вкладке '''Dashboards''' на боковой панели можно раскрыть список всех панелей, созданных в Web-интерфейсе.
Дважды щелкнув на вкладке '''Dashboards''' на боковой панели можно раскрыть список всех панелей, созданных в Web-интерфейсе.


Строка 71: Строка 77:
На странице '''Devices''' отображаются все аппаратные возможности контроллера (состояние входов, выходов, напряжение питания), а также подключённых датчиков и устройств. Если вы подключили к контроллеру внешний модуль, все его меняющиеся значения будут отображены тут.
На странице '''Devices''' отображаются все аппаратные возможности контроллера (состояние входов, выходов, напряжение питания), а также подключённых датчиков и устройств. Если вы подключили к контроллеру внешний модуль, все его меняющиеся значения будут отображены тут.


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


<!--T:213-->
Подключаемые устройства (Modbus-модули , боковые и внутренние модули) '''не''' определяются контроллером автоматически. Чтобы на этой странице появились аппаратные возможности подключённых устройств (например, внешних модулей реле), сначала нужно настроить их через раздел [[#Configs |Configs (Конфигурирование)]].
Подключаемые устройства (Modbus-модули , боковые и внутренние модули) '''не''' определяются контроллером автоматически. Чтобы на этой странице появились аппаратные возможности подключённых устройств (например, внешних модулей реле), сначала нужно настроить их через раздел [[#Configs |Configs (Конфигурирование)]].


<!--T:214-->
Удалить отключенные/неработающие устройства из Web-интерфейса можно с помощью кнопки '''Delete''' в виде значка с изображением мусорной корзины, в верхней строке плитки устройства. Кнопка появляется, конгда указатель мыши находится над плиткой устройства.
Удалить отключенные/неработающие устройства из Web-интерфейса можно с помощью кнопки '''Delete''' в виде значка с изображением мусорной корзины, в верхней строке плитки устройства. Кнопка появляется, конгда указатель мыши находится над плиткой устройства.


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


Строка 85: Строка 95:
Виджеты - комбинированные элементы интерфейса контрроллера, включающие в себя набор контролов, то есть аппаратных параметров контроллера и подключённых к нему устройств - тех, что отображаются на странице [[#Devices (Устройства)|Devices (Устройства)]].
Виджеты - комбинированные элементы интерфейса контрроллера, включающие в себя набор контролов, то есть аппаратных параметров контроллера и подключённых к нему устройств - тех, что отображаются на странице [[#Devices (Устройства)|Devices (Устройства)]].


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




==== Пример создания виджетов ====
==== Пример создания виджетов ==== <!--T:217-->
{|
{|
|[[File:Web-Dashboards-Add_Dashboard-2.0.png|thumb|500px|center|Создать новую панель]]
|[[File:Web-Dashboards-Add_Dashboard-2.0.png|thumb|500px|center|Создать новую панель]]
Строка 95: Строка 106:
Для примера создадим два виджета с показаниями температуры и переключателями управления отопительными конвекторами для двух комнат ''"Комната 1"'' и ''"Комната 2"''.
Для примера создадим два виджета с показаниями температуры и переключателями управления отопительными конвекторами для двух комнат ''"Комната 1"'' и ''"Комната 2"''.


<!--T:218-->
* На боковой панели щелкнем на вкладке '''Dashboards''', в раскрывшемся списке выберем элемент '''List''', и на открывшейся странице нажмем кнопку '''Add'''.
* На боковой панели щелкнем на вкладке '''Dashboards''', в раскрывшемся списке выберем элемент '''List''', и на открывшейся странице нажмем кнопку '''Add'''.
* В поле '''Name''' напишем название новой панели, ''"Управление отоплением"'', и нажмем кнопку '''Save'''.
* В поле '''Name''' напишем название новой панели, ''"Управление отоплением"'', и нажмем кнопку '''Save'''.
Строка 105: Строка 117:
* Для внесения изменений подведите курсор к заголовку виджета и нажмите кнопку '''Edit widget''', внесите изменения и нажмите кнопку '''Save'''.
* Для внесения изменений подведите курсор к заголовку виджета и нажмите кнопку '''Edit widget''', внесите изменения и нажмите кнопку '''Save'''.


<!--T:219-->
{| class="wikitable"
{| class="wikitable"
|- style="vertical-align:bottom;"
|- style="vertical-align:bottom;"
Строка 115: Строка 128:
[[File:Web-History-Web-2.0.png|thumb|center|814px|Пример отображения исторических данных]]
[[File:Web-History-Web-2.0.png|thumb|center|814px|Пример отображения исторических данных]]


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


<!--T:221-->
Возможности просмотра исторических данных:
Возможности просмотра исторических данных:
* Указание интервала времени для отображения данных
* Указание интервала времени для отображения данных
Строка 123: Строка 138:
* Загрузку данных за выбранный период в csv-формате.
* Загрузку данных за выбранный период в csv-формате.


<!--T:222-->
При наведении указателя мыши на область изображения становятся доступными дополнительные функции (кнопки в верхней правой части графика):
При наведении указателя мыши на область изображения становятся доступными дополнительные функции (кнопки в верхней правой части графика):
* Сохранение графика в формате .png
* Сохранение графика в формате .png
Строка 132: Строка 148:




<!--T:223-->
[[Wb-mqtt-db-cli|Утилита для извлечения исторических данных из внутренней базы данных]]
[[Wb-mqtt-db-cli|Утилита для извлечения исторических данных из внутренней базы данных]]


Строка 137: Строка 154:
[[File:Web-Rules-2.0.png|thumb|center|800 px|Скрипт, открытый для просмотра и редактирования]]
[[File:Web-Rules-2.0.png|thumb|center|800 px|Скрипт, открытый для просмотра и редактирования]]


<!--T:224-->
На странице '''Rules''' можно создавать и редактировать правила. Правила пишутся на простом языке, похожем на JavaScript, и позволяют создавать правила ("включай свет с 10:00 до 18:00") или виртуальные устройства (например, кнопка в интерфейсе, которая включает и отключает всё освещение в здании вместе).
На странице '''Rules''' можно создавать и редактировать правила. Правила пишутся на простом языке, похожем на JavaScript, и позволяют создавать правила ("включай свет с 10:00 до 18:00") или виртуальные устройства (например, кнопка в интерфейсе, которая включает и отключает всё освещение в здании вместе).
*[[Движок правил wb-rules | Подробнее про скрипты]].
*[[Движок правил wb-rules | Подробнее про скрипты]].
Строка 157: Строка 175:
[[File:Web-Settings_WebUI-2.0.png|center|thumb|600 px|Страница Settings]]
[[File:Web-Settings_WebUI-2.0.png|center|thumb|600 px|Страница Settings]]


<!--T:225-->
На странице '''Web UI''' настраиваются параметры веб-интерфейса и контроллера. Здесь можно:
На странице '''Web UI''' настраиваются параметры веб-интерфейса и контроллера. Здесь можно:
* Выбрать подключение к MQTT-брокеру (Web-sockets), если используется нелокальный брокер, а, например, облачный сервис
* Выбрать подключение к MQTT-брокеру (Web-sockets), если используется нелокальный брокер, а, например, облачный сервис
Строка 164: Строка 183:




=== Settings -> System (Настройки -> Системные) ===
=== Settings -> System (Настройки -> Системные) === <!--T:226-->


<!--T:227-->
[[File:Web-Settings_System-2.0.png|center|thumb|600 px|Страница System]]
[[File:Web-Settings_System-2.0.png|center|thumb|600 px|Страница System]]


<!--T:228-->
На этой странице можно обновить прошивку контроллера, предварительно скачав ее на компьютер.
На этой странице можно обновить прошивку контроллера, предварительно скачав ее на компьютер.




=== Settings -> MQTT Channels (Настройки -> MQTT-каналы) ===
=== Settings -> MQTT Channels (Настройки -> MQTT-каналы) === <!--T:229-->
[[File:Web-Settings_MQTT_Channels-2.0.png|center|thumb|600 px|MQTT Channels]]
[[File:Web-Settings_MQTT_Channels-2.0.png|center|thumb|600 px|MQTT Channels]]


<!--T:230-->
На этой странице приводится справочная информация о всех MQTT-топиках, полученных Web-интерфейсом контроллера а так же статус их получения ('''ОК''' или '''ERR''' в последнем столбце).
На этой странице приводится справочная информация о всех MQTT-топиках, полученных Web-интерфейсом контроллера а так же статус их получения ('''ОК''' или '''ERR''' в последнем столбце).




=== Settings -> Change access level (Настройки -> Изменить уровень доступа) ===
=== Settings -> Change access level (Настройки -> Изменить уровень доступа) === <!--T:231-->
[[File:Web-Acess_Level-2.0.png|center|thumb|600 px|Выбор уровня доступа]]
[[File:Web-Acess_Level-2.0.png|center|thumb|600 px|Выбор уровня доступа]]
На этой странице можно изменить текущий уровень доступа пользователя к настройкам Web-интерфейса.
На этой странице можно изменить текущий уровень доступа пользователя к настройкам Web-интерфейса.


== Стандартные задачи, решаемые через веб-интерфейс ==
== Стандартные задачи, решаемые через веб-интерфейс == <!--T:232-->


=== Покдлючить устройство RS-485 Modbus и создать кнопки управления на главной панели ===
=== Покдлючить устройство RS-485 Modbus и создать кнопки управления на главной панели === <!--T:233-->
[[RS-485:Настройка через веб-интерфейс]]
[[RS-485:Настройка через веб-интерфейс]]
===Обновить прошивку контроллера===
===Обновить прошивку контроллера===
Строка 193: Строка 215:
Веб-интерфейс Wiren Board можно разместить не только на самом контроллере, но и на специальном сервере. Тогда на интерфейс можно будет заходить используя всегда один и тот же IP-адрес.
Веб-интерфейс Wiren Board можно разместить не только на самом контроллере, но и на специальном сервере. Тогда на интерфейс можно будет заходить используя всегда один и тот же IP-адрес.


<!--T:234-->
Чтобы контроллер начал работать с веб-интерфейсом, размещённым на сервере, нужно внести некоторые изменения в конфигурацию контроллера.
Чтобы контроллер начал работать с веб-интерфейсом, размещённым на сервере, нужно внести некоторые изменения в конфигурацию контроллера.


<!--T:235-->
Такой вариант удобен, если ваш контроллер находится за роутером и не имеет глобального IP-адреса, или если он подключён по GPRS - тогда он тоже, скорее всего, не имеет глобального IP, да ещё и работа с удалённым веб-интерфейсом израсходует слишком много трафика.
Такой вариант удобен, если ваш контроллер находится за роутером и не имеет глобального IP-адреса, или если он подключён по GPRS - тогда он тоже, скорее всего, не имеет глобального IP, да ещё и работа с удалённым веб-интерфейсом израсходует слишком много трафика.


<!--T:236-->
'''Пока что такой вариант доступен только корпоративным клиентам по запросу.'''
'''Пока что такой вариант доступен только корпоративным клиентам по запросу.'''


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


== Настройка авторизованного доступа к Web-интерфейсу контроллера ==
== Настройка авторизованного доступа к Web-интерфейсу контроллера == <!--T:238-->
В статье [[Защита_паролем|Защита паролем]] приводятся краткие инструкции по перенастройке контроллера, обеспечивающие авторизованный доступ к Web-интерфейсу контроллера.
В статье [[Защита_паролем|Защита паролем]] приводятся краткие инструкции по перенастройке контроллера, обеспечивающие авторизованный доступ к Web-интерфейсу контроллера.


</translate>
</translate>
12 063

правки