Для создания окон в MasterSCADA 4D можно использовать сторонние SVG файлы с изображением. Рассмотрим порядок работы с такими элементами.
Сначала необходимо в одну папку положить сам svg-файл и xml-файл, в котором содержится описание параметров, если такой имеется.
Затем в дереве Библиотеки MasterSCADA 4D нужно создать окно, в которое затем будет добавлен сторонний SVG-элемент и в контекстном меню созданного окна нужно выбрать пункт Импорт SVG:
В открывшемся диалоговом окне можно выбрать SVG файл, тогда будет импортирован и он, и описание xml к нему, если оно имеется.
Если SVG файл был уже ранее добавлен в MasterSCADA 4D, то если выбрать файл xml, относящийся к этому SVG, то тогда в среде разработки обновится его описание. Если был выбран SVG файл и для него существует XML файл, то откроется диалоговое окно Импорт SVG с параметризацией.
Импорт SVG с XML файлом
Вид окна Импорт SVG с параметризацией, если XML файл с описанием имеется:
В верхней левой части окна отобразятся параметры, прописанные в файле XML, которые можно динамизировать, т.е. изменять в режиме исполнения в зависимости от значений параметров в дереве или наоборот - менять значения параметров дерева в зависимости от значения параметров SVG. При необходимости их можно изменить, выбрав в таблице в выпадающем списке другое значение.
После нажатия на кнопку Применить, размер окна будет равен добавленному SVG, а в панели свойств будут параметры из таблицы:
Если в окне импорта установить флаг Формировать признак аварии, то в категорию Параметры будет добавлено свойство Общая авария, динамизируя которое можно привлечь внимание пользователя в клиенте визуализации к элементу, в случае необходимости.
Импорт SVG без XML файла
Если XML файла с описанием параметров для динамизации нет, их можно добавить самостоятельно.
Вид окна Импорт SVG с параметризацией, если XML файл с описанием отсутствует:
В поле Дерево элементов видно из каких частей состоит SVG.
Для добавления параметра, который можно будет динамизировать, нужно нажать на кнопку Добавить параметр.
В таблице появится строка, в которой можно выбрать ID элемента, атрибут и указать произвольное имя, которое будет отображаться в панели свойств:
В выпадающем списке ID элемента SVG будут отображаться список составных частей элемента, которые были предусмотрены во время разработки SVG:
После выбора какого-либо ID, в поле Список атрибутов выбранного элемента SVG появится список атрибутов, которые характерны этой части SVG и были заданы разработчиком:
Выпадающий список Атрибут элемента SVG содержит следующие строки:
Название |
Назначение |
fill |
Определяет цвет заливки части SVG |
stroke |
Определяет цвет контура части SVG |
height |
Определяет ширину части SVG |
width |
Определяет высоту части SVG |
В списке отображаются самые популярные атрибуты.
Если атрибут отсутствует в списке, его можно добавить вручную. При клике мышью в поле атрибута появляется курсор и можно ввести любое значение атрибута, который может быть использован для выделенного типа фигуры (соответствие фигур и их атрибутов прописаны в стандарте SVG). Поддержаны все атрибуты стандарта SVG. (Рекомендуется ознакомиться с информацией на сайте https://developer.mozilla.org/ru/docs/Web/SVG/Attribute)
После нажатия на кнопку Применить в панели свойства появятся свойства, имена которых будут определены в таблице Имя параметра
Важно! Если не получается динамизировать какой-либо атрибут для какого-либо ID, то возможно этот атрибут не поддерживается для таких фигур. Если ID присвоено сложной фигуре, то возможно ее стоит разделить на несколько более простых и каждой присвоить свой ID. Для работы с SVG элементами нужно знать основы стандарта SVG.
Смотрите также: