5. Векторный графический редактор.
5.1. Назначение
Наличие собственного векторного графического редактора является неотъемлемой частью уважающей себя SCADA системы. Опыт показывает, что наиболее информативной формой представления технологических процессов являются мнемосхемы - совокупность сигнальных устройств, изображений оборудования и внутренних связей контролируемого объекта, выполняемые на персональном компьютере. Для их создания можно использовать любой из существующих графических редакторов. Однако, полученные таким образом мнемосхемы являются статическими и не отражают динамику изменения характеристик процесса, а следовательно, они неадекватны и неудобны для восприятия. Таким образом, одной из задач, стоящих перед разработчиками SCADA систем, является создание графического редактора для изображения объектов, характеристики которых могут быть динамически изменены.
5.2. Принципы и функции разработанного графического редактора
Основой описываемого редактора являются три графических примитива: линия, дуга, кривая Безье. К динамически изменяющимся характеристикам этих примитивов относятся:
- Координаты контрольных точек; используются для задания формы линии, дуги или кривой Безье. При этом линия имеет 2 контрольные точки, дуга - 5 контрольных точек, кривая Безье - 4 (рис. 5.2.a).
- Ширина линии.
- Ширина бордюра (границы).
- Цвет бордюра (границы).
- Стиль линии (сплошная, пунктирная, точечная).
Рис. 5.2.a. Контрольные точки линии, дуги и кривой Безье.
Примеры примитивов различного цвета, толщины, стилей с бордюрами и без бордюров приведены на рис. 5.2.b.
Рис. 5.2.b. Примеры примитивов: линия, дуга и кривая Безье слева направо.
Предусмотрена возможность связи различных графических примитивов для создания сложных графических объектов. Если связанные примитивы образуют замкнутый контур, то он может быть залит цветом и/или изображением (рис. 5.2.c).
Рис. 5.2.c. Заливки замкнутого контура цветом и/или изображениями.
Графический редактор позволяет масштабировать и поворачивать фигуры (примитивы и сложные графические объекты) (рис. 5.2.d).
К возможностям редактора также относятся выделение, перемещение, копирование и удаление фигур.
Рис. 5.2.d. Масштабирование и поворот фигур.
5.3. Основные принципы работы в описываемом графическом редакторе
Для того, чтобы приступить к работе с графическим редактором после запуска проекта OpenSCADA необходимо вызвать «Рабочий пользовательский интерфейс». Во вкладке «Виджет» содержится перечень существующих графических библиотек и принадлежащих им элементов.
Предположим, что нам необходимо добавить графический элемент в одну из существующих библиотек. Для этого выделим имя библиотеки и нажмем кнопку (
) на панели инструментов. В появившееся окно введем идентификатор и имя нового графического элемента. После чего перейдем к этому элементу и нажмем кнопку (
). Справа появится поле для рисования. С помощью двойного щелчка мышью по этому полю либо при помощи контекстного меню войдем в режим редактирования — режим работы графического редактора, позволяющий осуществлять все предусмотренные манипуляции с фигурами. В тот момент, когда вновь созданный нами графический элемент находится в фокусе, вкладка «Атрибуты» приобретет вид, представленный на рис. 5.3.a.
Рис. 5.3.a. Атрибуты элементарной фигуры.
С помощью мыши или поля «Геометрия» вкладки «Атрибуты» зададим размеры поля для рисования и масштабные коэффициенты.
Воспользовавшись полем «Линия» вкладки «Атрибуты», зададим ширину, цвет, стиль линий, которыми будем рисовать. С помощью поля «Граница» зададим ширину и цвет бордюра. Поле «Заполнение» позволяет задать цвет и изображение заливки. «Список элементов» содержит перечень примитивов, используемых при создании графического объекта. Элементы всех полей вкладки «Атрибуты» могут динамически изменяться в скриптах (программах) пользователя.
Графические примитивы могут быть нарисованы с помощью мышки или заданы с помощью списка графических примитивов («Список элементов»). В первом случае координаты контрольных точек создаваемого примитива вычисляются автоматически, ширина, цвет, стиль линии, ширина и цвет бордюра устанавливаются по умолчанию из вкладки «Атрибуты». Во втором случае примитив необходимо описать в «Списке элементов» следующим образом:
line:(x1|y1):(x2|y2):width:color:border_width:border_color:style (1)
arc:(x1|y1):(x2|y2):(x3|y3):(x4|y4):(x5|y5):width:color:border_width:border_color:style (2)
bezier:(x1|y1):(x2|y2):(x3|y3):(x4|y4):width:color:border_width:border_color:style, (3)
где (x1|y1) - координаты первой контрольной точки примитива;
(x2|y2) - координаты второй контрольной точки примитива;
(x3|y3) - координаты третьей контрольной точки примитива;
(x4|y4) - координаты четвертой контрольной точки примитива;
(x5|y5) - координаты пятой контрольной точки примитива;
width - ширина линии, которой будет нарисован примитив;
color - цвет линии, которой будет нарисован примитив;
border_width - ширина бордюра;
border_color - цвет бордюра;
stylе - стиль линии.
При этом приоритетными являются значения ширины, цвета, стиля линии, ширины и цвета бордюра, заданные в «Списке элементов». Если необходимо использовать какие- либо характеристики, устанавливаемые полями «Линия» или «Граница» вкладки «Атрибуты», то при описании примитива их следует пропустить. Например, мы хотим создать линию с шириной 3 красного цвета сплошную и без бордюра. При этом в поле «Линия» заданы ширина линии, равная 3, черный цвет линии, сплошной стиль линии; в поле «Граница» заданы ширина бордюра, равная 5, зеленый цвет. Тогда описание примитива в «Списке элементов» должно выглядеть следующим образом:
line:(x1|y1):(x2|y2)::red:0:: (4)
Формы записи (1) - (4) задают статические характеристики примитивов, которые не могут быть изменены программно. Для задания динамических характеристик необходимо использовать форму записи:
line:1:2:w1:c1:w2:c2:s1 (5)
Тогда в окно «Атрибуты» добавятся поля: Точка 1 (1), Точка 2 (2), Ширина 1 (w1), Ширина 2 (w2), Цвет 1 (c1), Цвет 2 (c2), Стиль 1 (s1) (рис.5.3.b) Значения этих полей можно изменять программно, с помощью одного из языков программирования проекта OpenSCADA. Очевидно, что при желании динамическими могут быть объявлены не все свойства примитива, а одно или несколько, кроме того одно динамическое свойство может быть использовано многократно.
Редактирование координат контрольных точек осуществляется либо с помощью мыши, либо путем их изменения в «Списке элементов» для статических точек или прямо во вкладке «Атрибуты», имея в наличии динамические точки («Точка 1»...). Редактирование других характеристик осуществляется с помощью изменения содержимого полей «Линия» , «Граница», «Заполнение» вкладки «Атрибуты» или «Списка элементов».
Рис. 5.3.b. Динамические атрибуты элементарной фигуры.
Предусмотрены возможности выделения (щелчок левой кнопкой мыши по фигуре), совместного выделения примитивов (левая кнопка мыши + нажатая клавиша «Ctrl» при выключенной кнопке «Подключиться»), совместного выделения рамкой, рисуемой с помощью нажатой левой кнопки мышки, их перемещения (клавиатура/мышь), копирования и вставки («Ctrl»+«C», «Ctrl»+«V» или из контекстного меню), удаления («Del»).
Для связи примитивов друг с другом необходимо:
- 1) нажать кнопку «Подключиться»('Connections');
- 2) выделить одну из фигур и переместить её начальную или конечную точку к желаемой начальной или конечной точке другой фигуры;
- 3) отпустить левую кнопку мышки, когда появится полупрозрачный кружок вокруг точек.
Для заливки замкнутого контура необходимо два раза кликнуть мышкой внутри него либо задать заливку в «Списке элементов» следующим образом:
fill:(x1:y1):(x2:y2):...:(xn:yn):color:image - (статика),
fill:1:2:3:...:c1:i1 - (динамика),
где (x1:y1):(x2:y2):...:(xn:yn) - координаты начальных/конечных точек примитивов, образующих замкнутый контур,
color - цвет заливки,
image - изображение заливки.
При этом приоритетными являются значения цвета и изображения заливки, заданные в «Списке элементов». Если необходимо использовать характеристики, устанавливаемые полем «Заполнение» вкладки «Атрибуты», то при описании примитива их следует пропустить.
Для масштабирования фигур необходимо в поле «Геометрия» задать значения масштаба по осям «X» и «Y». Кроме того, существует возможность визуально увеличить/уменьшить изображение, не меняя масштаб. Для этого необходимо выйти из режима редактирования, щелкнуть правой кнопкой мыши по полю виджета, в появившемся контекстном меню выбрать пункт «Увеличить (+10%)»/ «Уменьшить (-10%)» либо покрутить колесико мышки, удерживая при этом нажатой клавишу «Ctrl». Выход из режима редактирования осуществляется либо с помощью нажатия клавиши «Esc», либо с помощью контекстного меню виджета.
Существует возможность поворачивать содержимое виджета. Для поворота созданных объектов следует в окне «Атрибуты» задать «Угол поворота» от -360 до 360.
Графический редактор поддерживает прозрачность цвета, задаваемую следующим образом: color-t, где color - цвет, а t - прозрачность от 0 (полностью прозрачный) до 255 (непрозрачный).
5.4. Контекстное меню графического редактора
Предусмотрено контекстное меню, вызываемое щелчком правой кнопки мышки в области редактируемого виджета. В зависимости от того, какой объект находится под указателем мышки, контекстное меню может принимать несколько различный вид. Ниже, на рисунке 5.4 приведены примеры контекстного меню.
Рис. 5.4. Контекстное меню для линий (линия, дуга, кривая Безье) и для заливки слева направо.
Контекстное меню включает следующие секции (сверху вниз):
- рисования, позволяющая выбирать фигуру для рисования, выбирать режим «привязок» при помощи пункта «Подключиться», а также возвращаться в режим выбора - «Курсор»;
- копирования и вставки выбранных фигур в рамках одного виджета;
- поднятия, опускания выбранных фигур по оси «Z»;
- управления (сделать статическими или динамическими) различными атрибутами примитивов, а также вызова диалога свойств элементарной фигуры;
- выхода из режима редактирования.
5.5. Диалог свойств элементарной фигуры
Диалог, варианты которого представлены на рисунках 5.5.a, 5.5.b, 5.5.c, реализован для интерактивного и удобного управления свойствами фигур(ы).
Рис. 5.5.a. Диалог свойств элементарной фигуры для одной линии (линия, дуга или кривая Безье).
Рис. 5.5.b. Диалог свойств элементарной фигуры для группы выбранных линий.
Рис. 5.5.c. Диалог свойств элементарной фигуры для заливки.
Как видно из рисунков выше, диалог может иметь три различных формы в зависимости от объекта, для которого вызывается. В заглавии диалога перечислены номера фигур, для которых он вызван. Эти номера соответствуют позиции фигуры в «Списке элементов», начиная сверху.
Если диалог вызван для одиночной фигуры (линия, дуга или кривая Безье), то в нем существует возможность редактировать координаты точек фигуры (рис. 5.5.a). Если точка соединена с точкой другой фигуры или фигур, и включен режим «привязок» ( «Подключиться» ), то введенные координаты будут применены ко всем фигурам, для которых эта точка общая, а заливки, в которых участвует фигура, будут соответственно перерисованы.
Если же диалог вызван для группы выбранных фигур (рис. 5.5.b), то свойства (атрибуты), указанные в диалоге, будут применены ко всем фигурам, перечисленным в заглавии диалога. При вызове диалога в полях свойств будут отображаться данные той фигуры из группы выбранных, относительно которой было вызвано контекстное меню. Существует возможность включать/исключать отдельные свойства диалога. Для этого предусмотрена кнопка (
). В случае исключения отдельных свойств они не будут обрабатываться при подтверждении диалога (кнопка «Принять»). При подтверждении диалога все указанные данные для включенных свойств будут применены для всей группы фигур.
Диалог для свойств заливки (рис. 5.5.c) позволяет управлять свойствами отдельной заливки.
При выборе флажка справа от свойства оно (свойство) после подтверждения диалога устанавливается в значение по умолчанию, которое указано во вкладке «Атрибуты». Кнопки «Дин/Стат» делают соответствующие свойства динамическими либо статическими.