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