SVG-Dashboards: различия между версиями
м (→Добавление изображения: Добавил текст) |
м |
||
Строка 22: | Строка 22: | ||
Ограничения: | Ограничения: | ||
* Нельзя взаимодействовать с прямоугольником. Если это необходимо — преобразуйте его в кривые (оконтурите). | * Нельзя взаимодействовать с прямоугольником. Если это необходимо — преобразуйте его в кривые (оконтурите). | ||
* Редактор SVG-панели игнорирует группировку. Поэтому, если нужно настроить взаимодействие с составным элементом, то преобразуйте его в | * Редактор SVG-панели игнорирует группировку. Поэтому, если нужно настроить взаимодействие с составным элементом, то преобразуйте его в одну фигуру. | ||
Изображение может быть любого размера и с любым количеством элементов. | Изображение может быть любого размера и с любым количеством элементов. | ||
== Создание | == Создание SVG-панели == | ||
Создайте новую SVG-панель: | Создайте новую SVG-панель: | ||
* Перейдите в раздел '''Dashboards''' → '''List'''. | * Перейдите в раздел '''Dashboards''' → '''List'''. | ||
Строка 36: | Строка 34: | ||
После загрузки изображение отобразится на открытой странице. | После загрузки изображение отобразится на открытой странице. | ||
=== | Не забудьте указать в полях '''ID''' и '''Name''' уникальный ID новой панели и имя. | ||
Опция '''Full width''' растянет изображение по всю ширину панели. | |||
== Вывод информации == | |||
Информацию можно выводить в виде значений в текстовые поля или изменять оформление и видимость svg-элементов. | |||
== Реакция на действия пользователя == | |||
== Редактирование == | == Редактирование == | ||
== Полезные ссылки и материалы == | == Полезные ссылки и материалы == |
Версия 10:33, 30 апреля 2021
Введение
В веб-интерфейсе контроллера 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-элементов.