|
<< Click to Display Table of Contents >> Navigation: Создание окон для клиента визуализации > Рекомендации по созданию окон > Разработка SVG файла с изображением |
Для создания окон в MasterSCADA 4D можно использовать SVG файлы с изображением, разработанные самостоятельно в сторонних приложениях. Рассмотрим порядок разработки.
•SVG файл разрабатывается в стороннем графическом редакторе (например, Adobe Illustrator или Inkscape)
•Все элементы изображения должны входить в корневую группу (элемент g). Эта корневая группа должен иметь Id=”root”
•Внутри корневой группы элементы должны быть сгруппированы в подгруппы для упрощения накладывания динамических фильтров. Требования по группировке должны быть оформлены в заданиях на конкретные элементы.
•У корневой группы должна быть возможность задавать стили, в соответствии с которыми меняется внешний вид всего контрола. Привязка стилей осуществляется через атрибут class корневой группы svg. Стили корневой группы могут комбинироваться (то есть одновременно применяться несколько классов от разных стилей). Названия классов должны быть осмысленными.
•Документ с SVG изображением должен иметь ширину/высоту по умолчанию, например равные 200*500 (или более удобное, но примерно такого порядка). Изображение должно полностью вписываться в область редактирования документа. По краям не должно быть пустых отступов.
•SVG может содержать в себе не одно цельное устройство, а несколько его частей. В этом случае все части должны иметь осмысленные Id, например:
•Ротор (вентилятор) - Rotor
•Двигатель (мотор) - Motor
•Инвертер - Inverter
•Шкала (прогресс) - Bar
•Так же должны быть осмысленными Id внутренних элементов контрола, к которым может быть предоставлен внешний доступ (то есть те, которые должны быть изменяемыми). Например, в контроле может быть текст, который прописан не в стиле, а в элементе SVG. Вот этот элемент должен иметь осмысленный Id для возможности программной обработки и программной смены данного атрибута в собственном редакторе. Другими словами - кастомизироваться программным путем должно все логически осмысленное, что только можно (цвета, текст и т.п.). Не все атрибуты всех элементов, а именно те, которые логично подстраивать в дальнейшем.
•Стили включаются в состав самого svg элемента в виде элемента style -
<style type="text/css">
<![CDATA[
….
]]></style>
•Каждый стиль должен содержать селектор, который может включать имя класса, к которому применяется стиль и/или Id элементов
•Для применения правил к вложенным элементам svg необходимо использовать селектор вида -
.имя_класса > #id_вложенного_элемента
•Переключение состояний элемента должно производиться набором классов у корневой группы SVG. Например, class=”Running Avary NoReserve”.
Данные классы должны быть описаны в следующем виде (для примера):
#Element.MotorAlarm {
filter:url('#alarm_filter');
}
#Element.Running #Rotor #Running {
display:block;}
Необходимо разработать XML-файл с описанием параметров SVG элемента, к которым может быть предоставлен внешний доступ.
Этот файл должен иметь то же имя, что и SVG файл и находится в той же папке.
Структура файла:
<?xml version="1.0"?>
<SvgDef xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<ParameterDefs>
…. Здесь описания параметров SVG
</ParameterDefs>
</SvgDef>
В данном xml-файле требуется задать все параметры, которые указаны в техническом задании.
Формат описания параметра:
<ParameterDef DisplayName="..." ParamType="..." ItemId="..." Path="..." Type="...">
…
здесь может быть задан список значений параметра, если параметр является перечислимым (описано ниже)
...
</ParameterDef>
Если список значений не задается, то описание упрощается -
<ParameterDef DisplayName="..." ParamType="..." ItemId="..." Path="..." Type="..." />
•DisplayName - имя параметра для пользователя, например “Авария вращения ротора”
•ItemId - идентификатор элемента SVG, прописанный в его Id, например “Element”
•Path - атрибут данного элемента, который отвечает за значение данного параметра. Например: “class” для установки класса или “width” для установки ширины. Если параметр определяет внутреннее содержимое элемента (его контено), то “content”
•ParamType - указывает на то, где следует искать элемент с данным ID - среди стилей или среди элементов SVG. Может принимать значения:
•“attribute” - устанавливается значение атрибута элемента
•“style” - устанавливается значение элемента стиля. В этом случае в Path задается имя устанавливаемого в стиле атрибута. Например, для стиля
#Element #Bar #inner{
fill:#25d22b;
}
Path будет равно “fill”
•Type = тип значения параметре. Определены следующие типы:
•“BOOL” - булевское значение да/нет (true/false)
•“STRING” - строковое значение, например текст или значение класса
•“LREAL” - числовое дробное значение
•“HMI.SolidColorType” - сплошной цвет
•HMI.MatrixColorType - для матрицы цветового фильтра
<ParameterDef DisplayName="Цвет аварии" ParamType="attribute" ItemId=Rotor" Path="fill" Type="HMI.SolidColorType">
Если параметр имеет фиксированное число значений, например значений класса, то для него следует описать эти значения в виде:
<ParameterDef DisplayName="..." ParamType="..." ItemId="..." Path="..." Type="...">
<Value DisplayName="Выкл"></Value>
<Value DisplayName="Вкл">RotorAlarm</Value>
</ParameterDef>
где каждый элемент <Value> описывает одно значение. Этот элемент имеет следующие атрибуты:
•DisplayName - пользовательское название значения, например “Вкл”
•Content - непосредственное значение элемента в SVG, например RotorAlarm (название класса в данном случае)
Далее созданный SVG можно импортировать в MasterSCADA 4D
Важно! Созданные SVG элементы могут содержать в себе ошибки. В случае возникновения неисправности в службу технической поддержки нужно предоставить файл в SVG, в работе которого обнаружилось нежелательное поведение.
Смотрите также: