SVG-панели (Dashboards)

From Wiren Board
Jump to navigation Jump to search
Пример SVG-панели
Вывод текстовой информации, статусов и взаимодействие с элементом

Введение

В веб-интерфейсе контроллера Wiren Board можно создавать интерактивные графические панели. С их помощью удобно визуализировать схемы управления автоматикой.

Возможности:

  • вывод текстовой или логической информации;
  • изменение внешнего вида svg-элемента в зависимости от полученной информации: вы можете изменять стиль элемента, подменить полученное значение своим или скрыть/показать элементы;
  • воздействие на исполнительные механизмы: включать и выключать нагрузку, менять режимы работы устройств.

SVG-панели работают на мобильных устройствах, но нужно учитывать размер изображения. Если элементы будут слишком мелкими — ими будет сложно пользоваться. Хорошим решением может стать разделение графических панелей на десктопные и мобильные, которые созданы с учетом особенностей мобильного устройства.

Подготовка

Смена уровня доступа к веб-интерфейсу

Включение уровня доступа «Администратор»

Для изменения настроек у вас должен быть уровень доступа «Администратор»:

  • перейдите SettingsChange access level,
  • установите переключатель в положение Administrator,
  • отметьте флажок I take full responsibility for my actions,
  • и нажмите кнопку Apply.

После завершения настроек рекомендуем изменить уровень доступа на User или Operator — это поможет не совершить случайных ошибок при ежедневной работе с веб-интерфейсом.

Требования к изображению

Основой для SVG-панели служит svg-изображение. Если готового изображения нет, то его можно нарисовать в любом векторном редакторе, например, в свободном Inkscape.

Вы можете выводить информацию в любые текстовые элементы и настраивать взаимодействия с любыми фигурами и текстом.

Ограничения:

  • Нельзя взаимодействовать с прямоугольником. Если это необходимо — преобразуйте его в кривые (оконтурите).
  • Редактор SVG-панели игнорирует группировку. Поэтому если нужно настроить взаимодействие с составным элементом, то преобразуйте его в одну фигуру, состоящую из контуров.

Изображение может быть любого размера и с любым количеством элементов.

Создание SVG-панели

Создайте новую SVG-панель:

  1. Перейдите в раздел DashboardsList.
  2. В разделе SVG Dashboards нажмите кнопку Add, откроется страница New SVG Dashboard.
  3. Выберите файл с svg-изображением и нажмите кнопку Upload.

После загрузки изображение отобразится на открытой странице:

  1. Укажите связи и поведение svg-элементов с помощью редактора связей.
  2. Сохраните изменения и посмотрите результат, для этого нажмите на кнопку View dashboard.

Не забудьте указать в полях ID и Name уникальный ID новой панели и имя.

Опция Full width растянет изображение по всю ширину.

Синтаксис

В полях 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-элемент изображения со значениями или событиями, выберите его мышкой, после этого рядом с изображением появятся поля настройки поведения элемента.

После настройки выбранного 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' : ''

Редактирование

Панель

Чтобы внести изменения:

  1. Откройте SVG-панель.
  2. Нажмите кнопку Edit dashboard.
  3. Внесите изменения и сохраните их нажатием на кнопку View dashboard.

SVG-изображение

При загрузке в редактор SVG-панели исходное изображение преобразуется: группы разбираются на составные элементы, в метаданные элементов прописываются ID, поэтому для редактирования изображения нужно его загрузить с контроллера на компьютер:

  1. Откройте SVG-панель для редактирования.
  2. В верхней части окна нажмите кнопку Download, на компьютер загрузится svg-файл.

При редактировании учтите, что если на svg-элемент была назначена связь, то он содержит скрытый ID и при его дублировании создается новый элемент с тем же ID.

Отредактируйте полученный svg-файл и вновь загрузите его на контроллер:

  1. В окне редактирования нажмите кнопку Выберите файл.
  2. После того, как кнопка Change станет активной, нажмите на нее.

Перенос на другой контроллер

Иногда нужно сделать резервную копию svg-панели, например, для переноса на другой контроллер. Для этого нужно сохранить преобразованный редактором svg-файл и описание его связей и загрузить их на другой контроллер.

Учтите, что на имена MQTT-топиков на обоих контроллерах должны совпадать. Если это не так — svg-элементы нужно будет привязать к новым MQTT-топикам.

Сохранение

Сохраните svg-файл и описание связей:

  1. Загрузите файл на компьютер, как это описано в разделе Редактирование.
  2. В редакторе svg-панели нажмите кнопку Edit bindings as JSON, скопируйте и сохраните в файл содержимое поля SVG Bindings.

Загрузка

  1. Создайте новую SVG-панель по инструкции в разделе Создание SVG-панели.
  2. В редакторе svg-панели нажмите кнопку Edit bindings as JSON, скопируйте из сохраненного файла описание связей и вставьте текст в поле SVG Bindings.
  3. Нажмите кнопку Save.

Полезные ссылки и материалы