SVG-Dashboards: различия между версиями
Метка: отменено |
|||
Строка 206: | Строка 206: | ||
Полноэкранный режим позволяет переключаться между панелями через боковое меню, а в режиме HMI переключение надо реализовывать самим: добавлять в SVG-изображение кнопку (объект) с URL на нужную панель. | Полноэкранный режим позволяет переключаться между панелями через боковое меню, а в режиме HMI переключение надо реализовывать самим: добавлять в SVG-изображение кнопку (объект) с URL на нужную панель. | ||
<gallery mode="packed" heights=" | <gallery mode="packed" heights="170px" caption="Режимы панелей"> | ||
Image: WebUI SVG.png | Стандартный вид | Image: WebUI SVG.png | Стандартный вид | ||
Image: WebUI SVG fullscreen.png | Полноэкранный | Image: WebUI SVG fullscreen.png | Полноэкранный | ||
Image: WebUI SVG HMI mode.png | HMI | Image: WebUI SVG HMI mode.png | HMI | ||
Image: WebUI SVG-Dash-demo-electroseti.jpg | На устройствах в режиме HMI | |||
</gallery> | </gallery> | ||
Версия 16:37, 13 февраля 2023
Введение
В веб-интерфейсе контроллера Wiren Board можно создавать интерактивные графические панели. С их помощью удобно визуализировать схемы управления автоматикой.
Возможности:
- вывод текстовой или логической информации;
- изменение внешнего вида svg-элемента в зависимости от полученной информации: вы можете изменять стиль элемента, подменить полученное значение своим или скрыть/показать элементы;
- воздействие на исполнительные механизмы: включать и выключать нагрузку, менять режимы работы устройств.
SVG-панели работают на мобильных устройствах, но нужно учитывать размер изображения. Если элементы будут слишком мелкими — ими будет сложно пользоваться. Хорошим решением может стать разделение графических панелей на десктопные и мобильные, которые созданы с учетом особенностей мобильного устройства.
Чтобы открыть панель во весь экран, используйте режим киоска.
Подготовка
Смена уровня доступа к веб-интерфейсу
Для изменения настроек контроллера вам нужен уровень доступа Администратор, который можно выставить в разделе Настройки → Права доступа.
После завершения настроек рекомендуем поставить уровень доступа Пользователь или Оператор — это поможет не совершить случайных ошибок при ежедневной работе с веб-интерфейсом.
Требования к изображению
Основой для SVG-панели служит svg-изображение. Если готового изображения нет, то его можно нарисовать в любом векторном редакторе, например, в свободном Inkscape.
Вы можете выводить информацию в любые текстовые элементы и настраивать взаимодействия с любыми фигурами и текстом.
Ограничения:
- Нельзя взаимодействовать с прямоугольником. Если это необходимо — преобразуйте его в кривые (оконтурите).
- Редактор SVG-панели игнорирует группировку. Поэтому если нужно настроить взаимодействие с составным элементом, то преобразуйте его в одну фигуру, состоящую из контуров.
- Внутри svg-файла тег content не должен содержать другие теги. Если вы загрузили файл на контроллер, сделали привязку, скачали этот файл на компьютер и он не открылся в редакторе, окройте svg-файл текстовым редактором и удалите содержимое тега content. После этого вы сможете редактировать файл в svg-редакторе.
Изображение может быть любого размера и с любым количеством элементов.
Создание SVG-панели
Создайте новую SVG-панель:
- Перейдите в раздел Dashboards → List.
- В разделе SVG Dashboards нажмите кнопку Add, откроется страница New SVG Dashboard.
- Выберите файл с svg-изображением и нажмите кнопку Upload.
После загрузки изображение отобразится на открытой странице:
- Укажите связи и поведение svg-элементов с помощью редактора связей.
- Сохраните изменения и посмотрите результат, для этого нажмите на кнопку View dashboard.
Не забудьте указать в полях ID и Name уникальный ID новой панели и имя.
Если нужно вписать дашборд в размер окна браузера, то можно использовать один из двух способов:
- Опция в настройках дашборда Full width растянет изображение по всю ширину.
- Прописать размеры в SVG-файле. В Inkscape это можно сделать так:
- Выберите на верхней панели Посмотреть и изменить XML-дерево документа (Меню Edit - XML editor), справа появится редактор XML.
- Выделите самый первый тег <svg> и измените значение атрибутов width и height:
width: auto; height:80vh
. - Сохраните документ.
Мы рекомендуем второй способ, так как он позволяет подстраивать автоматически не только ширину, но и высоту рисунка.
Синтаксис
В полях Value Редактора связей можно составлять простые выражение, которые содержат условия и простые арифметические операции.
Значение MQTT-топика
Значение из MQTT-топика, который указан в поле Channel помещается в переменную val.
Условные выражения
Доступные операции:
>
— больше>=
— больше или равно<
— меньше<=
— меньше или равно==
— равно!=
— не равно
Синтаксис:
(УСЛОВИЕ) ? 'ЗНАЧЕНИЕ1' : 'ЗНАЧЕНИЕ2'
Например, если значение MQTT-топика будет равно 1
, то вывести значение ВКЛ
, иначе — ОТКЛ
:
(val == 1) ? 'ВКЛ' : 'ОТКЛ'
Арифметические операции
Над полученным из MQTT-топика можно совершать простые арифметические операции:
+
— сложение-
— вычитание*
— умножение/
— деление
Например, выведем значение АВАРИЯ
, если значение в MQTT-топике, умноженное на 0.1 больше 20 и НОРМА
в остальных случаях:
(val*0.1>20) ? 'АВАРИЯ' : 'НОРМА'
Округление значений
Часто с датчиков поступают значения с несколькими знаками после запятой, если вам не нужна такая точность в svg-панели, то их можно округлить:
val.toFixed(n) //округлить значение переменной val до n знаков после запятой
val.toFixed(2) //округлить значение переменной val до двух знаков после запятой 220.238 → 220.24
Редактор связей
Чтобы связать svg-элемент изображения со значениями или событиями, выберите его мышкой, после этого рядом с изображением появятся поля настройки поведения элемента.
После настройки выбранного svg-элемента нажмите кнопку Save.
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-панели в момент привязки действий к элементу прописывает data-svg-param-id, поэтому для редактирования изображения нужно его загрузить с контроллера на компьютер:
- Откройте SVG-панель для редактирования.
- В верхней части окна нажмите кнопку Download, на компьютер загрузится svg-файл.
- Отредактируйте файл в Inkscape. В Adobe Illustrator редактировать такие файлы не рекомендуем — теряются привязки, про другие редакторы информации нет.
При редактировании учтите, что если на svg-элемент была назначена связь, то он содержит скрытый data-svg-param-id и при его дублировании создается новый элемент с тем же data-svg-param-id.
Отредактируйте полученный svg-файл и вновь загрузите его на контроллер:
- В окне редактирования нажмите кнопку Выберите файл.
- После того, как кнопка Change станет активной, нажмите на нее.
Перенос на другой контроллер
Иногда нужно сделать резервную копию svg-панели, например, для переноса на другой контроллер. Для этого нужно сохранить преобразованный редактором svg-файл и описание его связей и загрузить их на другой контроллер.
Учтите, что на имена MQTT-топиков на обоих контроллерах должны совпадать. Если это не так — svg-элементы нужно будет привязать к новым MQTT-топикам.
Сохранение
Сохраните svg-файл и описание связей:
- Загрузите файл на компьютер, как это описано в разделе Редактирование.
- В редакторе svg-панели нажмите кнопку Edit bindings as JSON, скопируйте и сохраните в файл содержимое поля SVG Bindings.
Загрузка
- Создайте новую SVG-панель по инструкции в разделе Создание SVG-панели.
- В редакторе svg-панели нажмите кнопку Edit bindings as JSON, скопируйте из сохраненного файла описание связей и вставьте текст в поле SVG Bindings.
- Нажмите кнопку Save.
Полноэкранный и HMI режимы
В ряде задач нужно скрыть от пользователя элементы управления браузером и панели веб-интерфейса контроллера, для этого есть Полноэкранный и HMi режимы.
Полноэкранный режим позволяет переключаться между панелями через боковое меню, а в режиме HMI переключение надо реализовывать самим: добавлять в SVG-изображение кнопку (объект) с URL на нужную панель.