SVG-Dashboards: различия между версиями
(не показано 100 промежуточных версий 4 участников) | |||
Строка 1: | Строка 1: | ||
{{DISPLAYTITLE: SVG-панели (Dashboards)}} | {{DISPLAYTITLE: SVG-панели (Dashboards)}} | ||
[[Image: SVG-Dashboard | [[Image: SVG-Dashboard Editor.png |500px|thumb|right| Редактор SVG-панели]] | ||
{{Draft}} | |||
== Введение == | == Введение == | ||
В [[Wiren Board Web Interface | веб-интерфейсе]] контроллера Wiren Board можно создавать интерактивные графические панели. С их помощью удобно визуализировать схемы управления автоматикой. | В [[Wiren Board Web Interface | веб-интерфейсе]] контроллера Wiren Board можно создавать интерактивные графические панели. С их помощью удобно визуализировать схемы управления автоматикой. | ||
Возможности: | Возможности: | ||
* вывод текстовой или логической информации; | * вывод текстовой или логической информации; | ||
Строка 16: | Строка 10: | ||
* воздействие на исполнительные механизмы: включать и выключать нагрузку, менять режимы работы устройств. | * воздействие на исполнительные механизмы: включать и выключать нагрузку, менять режимы работы устройств. | ||
SVG-панели работают на мобильных устройствах, но нужно учитывать размер изображения. Если элементы будут слишком мелкими — ими будет сложно пользоваться. Хорошим решением может стать разделение графических панелей на десктопные и мобильные, которые созданы с учетом особенностей мобильного устройства. | SVG-панели работают на мобильных устройствах, но нужно учитывать размер изображения. Если элементы будут слишком мелкими — ими будет сложно пользоваться. Хорошим решением может стать разделение графических панелей на десктопные и мобильные, которые созданы с учетом особенностей мобильного устройства. | ||
== Подготовка == | |||
== Подготовка == | |||
=== Смена уровня доступа к веб-интерфейсу === | === Смена уровня доступа к веб-интерфейсу === | ||
{{Wbincludes:WebUI Change Access Level}} | {{Wbincludes:WebUI Change Access Level}} | ||
=== Требования к изображению === | === Требования к изображению === | ||
Основой для SVG-панели служит svg-изображение, | Основой для SVG-панели служит svg-изображение. Если готового изображения нет, то его можно нарисовать в любом векторном редакторе, например, в свободном [https://inkscape.org/ru/ Inkscape]. | ||
Вы можете выводить информацию в любые текстовые элементы и настраивать взаимодействия с любыми фигурами и текстом. | Вы можете выводить информацию в любые текстовые элементы и настраивать взаимодействия с любыми фигурами и текстом. | ||
Ограничения: | Ограничения: | ||
* Нельзя взаимодействовать с прямоугольником. Если это необходимо — преобразуйте его в кривые (оконтурите). | * Нельзя взаимодействовать с прямоугольником. Если это необходимо — преобразуйте его в кривые (оконтурите). | ||
* Редактор SVG-панели игнорирует группировку. Поэтому если нужно настроить взаимодействие с составным элементом, то преобразуйте его в одну фигуру, состоящую из контуров | * Редактор SVG-панели игнорирует группировку. Поэтому, если нужно настроить взаимодействие с составным элементом, то преобразуйте его в одну фигуру, состоящую из контуров. | ||
Изображение может быть любого размера и с любым количеством элементов. | |||
Изображение может быть | |||
== Создание SVG-панели == | == Создание SVG-панели == | ||
Создайте новую SVG-панель: | Создайте новую SVG-панель: | ||
# Перейдите в раздел ''' | # Перейдите в раздел '''Dashboards''' → '''List'''. | ||
# В разделе '''SVG | # В разделе '''SVG Dashboards''' нажмите кнопку '''Add''', откроется страница '''New SVG Dashboard'''. | ||
# Выберите файл с svg-изображением и нажмите кнопку '''Upload'''. | |||
После загрузки изображение отобразится на открытой странице: | После загрузки изображение отобразится на открытой странице: | ||
# Укажите связи и поведение svg-элементов с помощью [[#Редактор связей| редактора связей]]. | # Укажите связи и поведение svg-элементов с помощью [[#Редактор связей| редактора связей]]. | ||
# Сохраните изменения и посмотрите результат, для этого нажмите на кнопку ''' | # Сохраните изменения и посмотрите результат, для этого нажмите на кнопку '''View dashboard'''. | ||
Не забудьте указать в полях '''ID''' и '''Name''' уникальный ID новой панели и имя. | |||
Опция '''Full width''' растянет изображение по всю ширину. | |||
== Синтаксис == | == Синтаксис == | ||
В полях '''Value''' [[#Редактор связей | Редактора связей]] можно составлять простые выражение, которые содержат | В полях '''Value''' [[#Редактор связей | Редактора связей]] можно составлять простые выражение, которые содержат ветвление и простые арифметические операции. | ||
=== Значение MQTT-топика === | === Значение MQTT-топика === | ||
Полученное из MQTT-топика значение содержится в переменной '''val'''. | |||
=== Условные выражения === | === Условные выражения === | ||
Доступные операции: | Доступные операции: | ||
* <code>></code> — больше | * <code>></code> — больше | ||
Строка 109: | Строка 57: | ||
* <code>!=</code> — не равно | * <code>!=</code> — не равно | ||
Синтаксис: | Синтаксис: | ||
< | <pre> | ||
(УСЛОВИЕ) ? 'ЗНАЧЕНИЕ1' : 'ЗНАЧЕНИЕ2' | (УСЛОВИЕ) ? 'ЗНАЧЕНИЕ1' : 'ЗНАЧЕНИЕ2' | ||
</ | </pre> | ||
Например, если значение MQTT-топика будет равно <code>1</code>, то вывести значение <code>ВКЛ</code>, иначе — <code>ОТКЛ</code>: | Например, если значение MQTT-топика будет равно <code>1</code>, то вывести значение <code>ВКЛ</code>, иначе — <code>ОТКЛ</code>: | ||
< | <pre> | ||
(val == 1) ? 'ВКЛ' : 'ОТКЛ' | (val == 1) ? 'ВКЛ' : 'ОТКЛ' | ||
</ | </pre> | ||
=== Арифметические операции === | === Арифметические операции === | ||
Над полученным из MQTT-топика можно совершать простые арифметические операции: | Над полученным из MQTT-топика можно совершать простые арифметические операции: | ||
* <code>+</code> — сложение | * <code>+</code> — сложение | ||
Строка 128: | Строка 74: | ||
* <code>/</code> — деление | * <code>/</code> — деление | ||
Например, окрасим svg-элемент в красный цвет, если значение в MQTT-топике, умноженное на 0.1 больше 20: | |||
Например, | <pre> | ||
< | (val*0.1>20) ? 'fill: red' : '' | ||
(val*0.1>20) ? ' | </pre> | ||
</ | |||
== Редактор связей== | |||
После настройки | Чтобы связать svg-элемент изображения со значениями или событиями, выберите его мышкой. После этого рядом с изображением отобразятся поля настройки поведения элемента. | ||
=== | === Read === | ||
Отображение значений из источника в текстовом поле. | Отображение значений из источника в текстовом поле. | ||
Полученное из выбранного в поле '''Channel''' источника помещается в переменную '''val''', которую нужно указать в поле '''Value'''. | |||
Чтобы вывести значение, просто укажите переменную: | Чтобы вывести значение, просто укажите переменную: | ||
< | <pre> | ||
val | val | ||
</ | </pre> | ||
К значению можно добавить произвольный текст, например, единицу измерения: | К значению можно добавить произвольный текст, например, единицу измерения: | ||
< | <pre> | ||
val + ' °C' | val + ' °C' | ||
</ | </pre> | ||
Также можно подменить полученное значение, например, заменить его на понятный человеку статус: | Также можно подменить полученное значение, например, заменить его на понятный человеку статус: | ||
< | <pre> | ||
(val == 1) ? 'ВКЛ' : 'ОТКЛ' | (val == 1) ? 'ВКЛ' : 'ОТКЛ' | ||
</ | </pre> | ||
=== Write === | |||
Доступно два состояния ON и OFF. При клике пользователя на элементе, значение в MQTT-топике будет меняться на противоположное. | Реакция на клик пользователя по элементу изображения. Доступно два состояния ON и OFF. При клике пользователя на элементе, значение в MQTT-топике будет меняться на противоположное. | ||
Выберите в поле '''Channel''' MQTT топик, куда нужно записывать значения, а в полях '''Value on''' и '''Value off''' укажите какие значения соответствуют состоянию. | |||
Выберите в поле ''' | |||
Например, для переключения реле нужно указать: | Например, для переключения реле нужно указать: | ||
< | <pre> | ||
Value on = 1 | |||
Value on = 0 | |||
</ | </pre> | ||
=== | === Visible === | ||
Здесь можно указать при каком условии показывать элемент изображения. | |||
Выберите в поле '''Channel''' MQTT-топик, на информацию из которого мы будем реагировать, в поле '''Condition''' укажите условие, а в поле '''Value''' — значение. | |||
=== Style === | |||
Позволяет изменять стиль элементов изображения. Можно использовать для создания обратной связи на действия, оповещения пользователя о событии т.п. | |||
Доступные для стилизации свойства элемента: | Доступные для стилизации свойства элемента: | ||
* fill — цвет заливки; | * fill — цвет заливки; | ||
Строка 233: | Строка 126: | ||
* stroke — цвет обводки; | * stroke — цвет обводки; | ||
* stroke-width — толщина обводки; | * stroke-width — толщина обводки; | ||
* stroke-dasharray — вид пунктирной обводки, задается в единицах длины или процентах | * stroke-dasharray — вид пунктирной обводки, задается в единицах длины или процентах. | ||
* stroke-opacity — непрозрачность обводки, значения от 0.0 до 1.0 или в процентах | * stroke-opacity — непрозрачность обводки, значения от 0.0 до 1.0 или в процентах. | ||
Цвета можно задавать именами <code>black, red, yellow и т.п.</code> или шестнадцатеричными значениями <code>#ffe680ff, #4f4f4dff и т.п.</code>. | Цвета можно задавать именами <code>black, red, yellow и т.п.</code> или шестнадцатеричными значениями <code>#ffe680ff, #4f4f4dff и т.п.</code>. | ||
Изменим цвет элемента в зависимости от состояния реле, если в топике значение <code>1</code>, то закрашиваем объект желтым, иначе — серым: | Изменим цвет элемента в зависимости от состояния реле, если в топике значение <code>1</code>, то закрашиваем объект желтым, иначе — серым: | ||
< | <pre> | ||
(val == 1) ? ';fill: yellow' : ';fill: gray' | (val == 1) ? ';fill: yellow' : ';fill: gray' | ||
</ | </pre> | ||
Сделаем так, чтобы при значении больше 20 обводка элемента стала красного цвета, пунктиром и толщиной 2px. При значениях меньше или равно 20 стиль элемента оставим по умолчанию: | Сделаем так, чтобы при значении больше 20 обводка элемента стала красного цвета, пунктиром и толщиной 2px. При значениях меньше или равно 20 стиль элемента оставим по умолчанию: | ||
< | <pre> | ||
(val > 20) ? 'stroke: red; stroke-width:2px; stroke-dasharray:2,1' : '' | (val > 20) ? 'stroke: red; stroke-width:2px; stroke-dasharray:2,1' : '' | ||
</ | </pre> | ||
== Редактирование == | |||
=== Панель === | |||
Откройте панель для редактирования: | |||
=== Панель === | |||
# Откройте SVG-панель. | # Откройте SVG-панель. | ||
# Нажмите кнопку ''' | # Нажмите кнопку '''Edit dashboard'''. | ||
# Внесите изменения и сохраните их нажатием на кнопку ''' | # Внесите изменения и сохраните их нажатием на кнопку '''View dashboard'''. | ||
=== SVG-изображение === | |||
При загрузке в SVG-редактор исходное изображение преобразуется: группы разбираются на составные элементы, в метаданные элементов прописываются ID, поэтому для редактирования изображения нужно его загрузить с свервера на компьютер: | |||
# Откройте SVG-панель для редактирования. | # Откройте SVG-панель для редактирования. | ||
# В верхней части окна нажмите кнопку '''Download''', на компьютер загрузится svg-файл. | # В верхней части окна нажмите кнопку '''Download''', на компьютер загрузится svg-файл. | ||
При редактировании учтите, что если на svg-элемент была назначена связь, то он содержит скрытый ID и при его дублировании создается новый элемент с тем же ID. | |||
При редактировании учтите, что если на svg-элемент была назначена связь, то он содержит скрытый | |||
Отредактируйте полученный svg-файл и вновь загрузите его на сервер: | |||
Отредактируйте полученный svg-файл и вновь загрузите его на | |||
# В окне редактирования нажмите кнопку '''Выберите файл'''. | # В окне редактирования нажмите кнопку '''Выберите файл'''. | ||
# После того, как кнопка '''Change''' станет активной, нажмите на нее. | # После того, как кнопка '''Change''' станет активной, нажмите на нее. | ||
== Перенос на другой контроллер == | == Перенос на другой контроллер == | ||
Иногда нужно сделать резервную копию svg-панели, например, для переноса на другой контроллер. Для этого нужно сохранить преобразованный редактором svg-файл и описание его связей и загрузить их на другой контроллер. | Иногда нужно сделать резервную копию svg-панели, например, для переноса на другой контроллер. Для этого нужно сохранить преобразованный редактором svg-файл и описание его связей и загрузить их на другой контроллер. | ||
Учтите, что на имена MQTT-топиков на обоих контроллерах должны совпадать. Если это не так — потребуется изменение связей svg-элементов. | |||
Учтите, что на имена MQTT-топиков на обоих контроллерах должны совпадать. Если это не так — svg- | |||
=== Сохранение === | === Сохранение === | ||
Сохраните svg-файл и описание связей: | Сохраните svg-файл и описание связей: | ||
# | # Загрузите файл на компьютер, как это описано в разделе [[#Редактирование | Редактирование]]. | ||
# В редакторе svg-панели нажмите кнопку ''' | # В редакторе svg-панели нажмите кнопку '''Edit bindings as JSON''', скопируйте и сохраните в файл содержимое поля '''SVG Bindings'''. | ||
=== Загрузка === | === Загрузка === | ||
# Создайте новую SVG-панель по инструкции в разделе [[#Создание SVG-панели| Создание SVG-панели]]. | # Создайте новую SVG-панель по инструкции в разделе [[#Создание SVG-панели| Создание SVG-панели]]. | ||
# В редакторе svg-панели нажмите кнопку ''' | # В редакторе svg-панели нажмите кнопку '''Edit bindings as JSON''', скопируйте из сохраненного файла описание связей и вставьте текст в поле '''SVG Bindings'''. | ||
# Нажмите кнопку '''Save'''. | |||
# | |||
== Полезные ссылки и материалы == | == Полезные ссылки и материалы == | ||
* [https://wirenboard.com/ru/pages/wb-software/ Статья о веб-интерфейсе контроллера Wiren Board] | * [https://wirenboard.com/ru/pages/wb-software/ Статья о веб-интерфейсе контроллера Wiren Board] | ||
* [[Wiren Board Web Interface | Описание веб-интерфейса контроллера на вики]] | * [[Wiren Board Web Interface | Описание веб-интерфейса контроллера на вики]] | ||
* [https://inkscape.org/ru/ Свободный SVG-редактор Inkscape] | * [https://inkscape.org/ru/ Свободный SVG-редактор Inkscape] | ||
Версия 12:20, 3 мая 2021
Это черновик страницы. Последняя правка сделана 03.05.2021 пользователем A.Degtyarev.
Введение
В веб-интерфейсе контроллера Wiren Board можно создавать интерактивные графические панели. С их помощью удобно визуализировать схемы управления автоматикой.
Возможности:
- вывод текстовой или логической информации;
- изменение внешнего вида svg-элемента в зависимости от полученной информации: вы можете изменять стиль элемента, подменить полученное значение своим или скрыть/показать элементы;
- воздействие на исполнительные механизмы: включать и выключать нагрузку, менять режимы работы устройств.
SVG-панели работают на мобильных устройствах, но нужно учитывать размер изображения. Если элементы будут слишком мелкими — ими будет сложно пользоваться. Хорошим решением может стать разделение графических панелей на десктопные и мобильные, которые созданы с учетом особенностей мобильного устройства.
Подготовка
Смена уровня доступа к веб-интерфейсу
Для изменения настроек контроллера вам нужен уровень доступа Администратор, который можно выставить в разделе Настройки → Права доступа.
После завершения настроек рекомендуем поставить уровень доступа Пользователь или Оператор — это поможет не совершить случайных ошибок при ежедневной работе с веб-интерфейсом.
Требования к изображению
Основой для SVG-панели служит svg-изображение. Если готового изображения нет, то его можно нарисовать в любом векторном редакторе, например, в свободном Inkscape.
Вы можете выводить информацию в любые текстовые элементы и настраивать взаимодействия с любыми фигурами и текстом.
Ограничения:
- Нельзя взаимодействовать с прямоугольником. Если это необходимо — преобразуйте его в кривые (оконтурите).
- Редактор SVG-панели игнорирует группировку. Поэтому, если нужно настроить взаимодействие с составным элементом, то преобразуйте его в одну фигуру, состоящую из контуров.
Изображение может быть любого размера и с любым количеством элементов.
Создание SVG-панели
Создайте новую SVG-панель:
- Перейдите в раздел Dashboards → List.
- В разделе SVG Dashboards нажмите кнопку Add, откроется страница New SVG Dashboard.
- Выберите файл с svg-изображением и нажмите кнопку Upload.
После загрузки изображение отобразится на открытой странице:
- Укажите связи и поведение svg-элементов с помощью редактора связей.
- Сохраните изменения и посмотрите результат, для этого нажмите на кнопку View dashboard.
Не забудьте указать в полях ID и Name уникальный ID новой панели и имя.
Опция Full width растянет изображение по всю ширину.
Синтаксис
В полях Value Редактора связей можно составлять простые выражение, которые содержат ветвление и простые арифметические операции.
Значение MQTT-топика
Полученное из MQTT-топика значение содержится в переменной val.
Условные выражения
Доступные операции:
>
— больше>=
— больше или равно<
— меньше<=
— меньше или равно==
— равно!=
— не равно
Синтаксис:
(УСЛОВИЕ) ? 'ЗНАЧЕНИЕ1' : 'ЗНАЧЕНИЕ2'
Например, если значение MQTT-топика будет равно 1
, то вывести значение ВКЛ
, иначе — ОТКЛ
:
(val == 1) ? 'ВКЛ' : 'ОТКЛ'
Арифметические операции
Над полученным из MQTT-топика можно совершать простые арифметические операции:
+
— сложение-
— вычитание*
— умножение/
— деление
Например, окрасим svg-элемент в красный цвет, если значение в MQTT-топике, умноженное на 0.1 больше 20:
(val*0.1>20) ? 'fill: red' : ''
Редактор связей
Чтобы связать svg-элемент изображения со значениями или событиями, выберите его мышкой. После этого рядом с изображением отобразятся поля настройки поведения элемента.
Read
Отображение значений из источника в текстовом поле.
Полученное из выбранного в поле Channel источника помещается в переменную val, которую нужно указать в поле Value.
Чтобы вывести значение, просто укажите переменную:
val
К значению можно добавить произвольный текст, например, единицу измерения:
val + ' °C'
Также можно подменить полученное значение, например, заменить его на понятный человеку статус:
(val == 1) ? 'ВКЛ' : 'ОТКЛ'
Write
Реакция на клик пользователя по элементу изображения. Доступно два состояния ON и OFF. При клике пользователя на элементе, значение в MQTT-топике будет меняться на противоположное.
Выберите в поле Channel MQTT топик, куда нужно записывать значения, а в полях Value on и Value off укажите какие значения соответствуют состоянию.
Например, для переключения реле нужно указать:
Value on = 1 Value on = 0
Visible
Здесь можно указать при каком условии показывать элемент изображения.
Выберите в поле Channel MQTT-топик, на информацию из которого мы будем реагировать, в поле Condition укажите условие, а в поле Value — значение.
Style
Позволяет изменять стиль элементов изображения. Можно использовать для создания обратной связи на действия, оповещения пользователя о событии т.п.
Доступные для стилизации свойства элемента:
- fill — цвет заливки;
- fill-opacity — непрозрачность заливки, значения от 0.0 до 1.0 или в процентах;
- stroke — цвет обводки;
- stroke-width — толщина обводки;
- stroke-dasharray — вид пунктирной обводки, задается в единицах длины или процентах.
- stroke-opacity — непрозрачность обводки, значения от 0.0 до 1.0 или в процентах.
Цвета можно задавать именами black, red, yellow и т.п.
или шестнадцатеричными значениями #ffe680ff, #4f4f4dff и т.п.
.
Изменим цвет элемента в зависимости от состояния реле, если в топике значение 1
, то закрашиваем объект желтым, иначе — серым:
(val == 1) ? ';fill: yellow' : ';fill: gray'
Сделаем так, чтобы при значении больше 20 обводка элемента стала красного цвета, пунктиром и толщиной 2px. При значениях меньше или равно 20 стиль элемента оставим по умолчанию:
(val > 20) ? 'stroke: red; stroke-width:2px; stroke-dasharray:2,1' : ''
Редактирование
Панель
Откройте панель для редактирования:
- Откройте SVG-панель.
- Нажмите кнопку Edit dashboard.
- Внесите изменения и сохраните их нажатием на кнопку View dashboard.
SVG-изображение
При загрузке в SVG-редактор исходное изображение преобразуется: группы разбираются на составные элементы, в метаданные элементов прописываются ID, поэтому для редактирования изображения нужно его загрузить с свервера на компьютер:
- Откройте SVG-панель для редактирования.
- В верхней части окна нажмите кнопку Download, на компьютер загрузится svg-файл.
При редактировании учтите, что если на svg-элемент была назначена связь, то он содержит скрытый ID и при его дублировании создается новый элемент с тем же ID.
Отредактируйте полученный svg-файл и вновь загрузите его на сервер:
- В окне редактирования нажмите кнопку Выберите файл.
- После того, как кнопка Change станет активной, нажмите на нее.
Перенос на другой контроллер
Иногда нужно сделать резервную копию svg-панели, например, для переноса на другой контроллер. Для этого нужно сохранить преобразованный редактором svg-файл и описание его связей и загрузить их на другой контроллер.
Учтите, что на имена MQTT-топиков на обоих контроллерах должны совпадать. Если это не так — потребуется изменение связей svg-элементов.
Сохранение
Сохраните svg-файл и описание связей:
- Загрузите файл на компьютер, как это описано в разделе Редактирование.
- В редакторе svg-панели нажмите кнопку Edit bindings as JSON, скопируйте и сохраните в файл содержимое поля SVG Bindings.
Загрузка
- Создайте новую SVG-панель по инструкции в разделе Создание SVG-панели.
- В редакторе svg-панели нажмите кнопку Edit bindings as JSON, скопируйте из сохраненного файла описание связей и вставьте текст в поле SVG Bindings.
- Нажмите кнопку Save.