SVG-Dashboards

Введение

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

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

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

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

Подготовка

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

Уровень «Администратор»

Для изменения настроек контроллера вам нужен уровень доступа Администратор, который можно выставить в разделе Настройки → Права доступа.

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

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

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

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

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

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

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

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

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

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

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

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

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

Редактор связей

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

Read

Отображение значений из источника в текстовом поле.

Полученное из выбранного в поле Channel источника помещается в переменную val, которую нужно указать в поле Value.

Чтобы вывести значение, просто укажите переменную:

val

К значению можно добавить произвольный текст, например, единицу измерения:

val + ' °C'

Также можно подменить полученное значение, например, заменить его на понятный человеку статус:

(val  == 1) ? 'ВКЛ' : 'ОТКЛ'

Write

Реакция на клик пользователя по элементу изображения. Доступно два состояния ON и OFF.

Выберите в поле 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 и т.п..

Изменим цвет элемента в зависимости от состояния реле:

(val == 1) ? ';fill: yellow' : ';fill: gray'

Сделаем так, чтобы при значении больше 20 обводка элемента стала красного цвета, пунктиром и толщиной 2px. При значениях меньше или равно 20 стиль элемента оставим менять не будем:

(val  > 20) ? ';stroke: red; stroke-width:2px; stroke-dasharray:2,1' : ''