5. Vector graphics editor.
Formation
1. Purpose
The presence of own vector graphics editor is an integral part of self-respecting SCADA system. Experience shows that the most informative form of technological process presentation is a mnemonic schemes - a set of alarm devices, images of the equipment, and internal connections of the controlled object, running on a PC (operator's station). To create them, you can use any of the existing graphical editors. However, thus obtained the mnemonic schemes are static and do not reflect the dynamics of changes in the characteristics of the process and, consequently, they are inadequate and uncomfortable for perception. Thus, one of the tasks facing the developers of SCADA systems is the creation of a graphical editor for creation (painting) the objects, whose characteristics can be dynamically changed.
2. Principles and functions of the graphic editor
The basis of the described editor are three graphic primitives: line, arc, Bézier curve. The dynamically changing the characteristics of these primitives are:
- Coordinates of control points; they are used to define the shape of the line, arc or Bézier curve. The line has two control points, the arc - 5 control points, Bézier curve - 4 (Fig. 1).
- Line width.
- Border width.
- Border color.
- Line style.
Fig. 1. Control points of the line, arcs and Bézier curve.
Examples of primitives of different colors, widths, styles with borders or without ones are shown in Fig. 2.
Fig. 2. Examples of primitives: line, arc and Bézier curve from left to right.
It is possible to connect the various graphic primitives for creation of complex graphic objects. If the connected primitives make the closed circuit, it can be filled with color and/or image (Fig. 3).
Fig. 3. Fills of the closed circuit with the colors and/or images.
Graphics editor allows you to zoom and rotate the figures (primitives and complex graphic objects) (Fig. 4).
The features of the editor also include the selection, moving, copying and deleting the figures.
Fig. 4. Zoom and rotate the figures.
3. Basic principles of operation in the graphic editor
To get to work with a graphical editor after the OpenSCADA is started it is necessary to call "Operation user interface". The "Widgets" tab contains a list of existing graphic libraries and their elements.
Lets suppose that we need to add a graphic element to the one of the existing libraries. To do this, select the name of the library, and click the (file: ElFigCreate.png) on the toolbar. In the appeared window enter the ID and name of the new graphic element. After that lets select the created item and click (file: ElFigEdit.png) button. The drawing area will appear on the right. By double-clicking on that field or either using the context menu lets enter the editing mode - the mode of the graphical editor that allows you to perform all provided manipulations with the figures. At a time when we have the created graphic element in focus, the "Attributes" tab takes the form, shown in Fig. 5.
Fig. 5. Attributes of elementary figure.
With the help of mouse or the "Geometry " field of the "Attributes" tab lets define the drawing area size and scale coefficients.
Using the "Line" field of the "Attributes" tab, lets define the width, color, lines' style of the figures which we'll draw. With the "Border" field lets define the width and color of the border. The "Fill" field allows you to specify color, and image for the fills. "Elements' list" contains a list of primitives used to create the graphic object. Elements of all fields of the "Attributes" tab can be dynamically changed in the scripts (programs) of the user.
Graphics primitives can be drawn with the mouse or by specifying the list of graphical primitives ("Elements' list"). In the first case, the coordinates of control points of the primitive are computed automatically, width, color, style of the line, width and color of the border are set by defaults from the "Attributes" tab. In the second case, the primitive must be described in the "Elements' list" as follows:
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) - first control point's coordinates of the primitive;
(x2|y2) - second control point's coordinates of the primitive;
(x3|y3) - third control point's coordinates of the primitive;
(x4|y4) - fourth control point's coordinates of the primitive;
(x5|y5) - fifth control point's coordinates of the primitive;
width - line width, with which the primitive will be drawn;
color - line color, with which the primitive will be drawn;
border_width - border width;
border_color - border color;
style - line style.
The priority values are the width, color, style of the line, width and color of the border, specified in the "Elements' list". If you want to use any of the properties that are set in the fields "Line" or "Border" of the "Attributes" tab, then during the description of the primitive they should be skipped. For example, we want to create a line with a width of 3, red color, solid and without border. At the same time in the "Line" field the following properties are set: the line width - 3, black color of the line, solid line style, and in the "Border" field - the width of the border - 5, border's color - green. Then the description of the primitive in the "Elements' list " will be as follows:
line:(x1|y1):(x2|y2)::red:0:: (4)
Expressions (1) - (4) define the static properties of the primitives that can not be changed by user's program. To specify the dynamic properties it is necessary to use the following expression:
line:p1:p2:w1:c1:w2:c2:s1 (5)
Then the "Attributes" tab will be appended by the fields: Point 1 (p1), Point 2 (p2), Width 1(w1), Width 2(w2), Color 1(c1), Color 2(c2), Style 1 (s1) (Fig. 6), values of these fields can be changed programmatically, by using a programming language of the OpenSCADA project. It is obvious that if desired not all properties of the primitive can be declared dynamic, but one or several, besides one dynamic property can be used repeatedly.
Editing the coordinates of control points is made either with the mouse or through changes in the "Elements' list " for static points, or directly in the "Attributes" tab, having the dynamic ones ("Point 1"...). Editing the other properties is made by means of changing the contents of the fields "Line", "Border", "Fill" of the "Attributes" tab or the "Elements' list".
Fig. 6. Dynamic attributes of elementary figure.
There is the possibility of selection (left click on the figure) the primitive, the joint selection of primitives (left mouse button + "Ctrl" key pressed having disabled the "Connections" button), a joint selection by the frame, drawn by holding down the left mouse button; moving them (keyboard/mouse); copy and paste («Ctrl» + «C», «Ctrl» + «V» or from the popup menu); delete («Del»).
To connect the primitives with each other it is necessary:
- 1) push the "Connections" button;
- 2) select one of the figures and move its start or end point to the desired start or end point of the other figure so that it will get to the appeared circle. Connected figures are moving as well as the individual ones, the general point is moved for all connected figures, to which it refers(priority is given to the arc, two arcs can't be connected directly with each other ).
- 3) release the left mouse button.
To fill the closed circuit it is necessary to make double click of the left mouse button inside it or you can specify a fill in the "Elements' list" as follows:
fill:(x1:y1):(x2:y2):...:(xn:yn):color:image - (statics),
fill:p1:p2:p3:...:c1:i1 - (dynamics),
where (x1:y1):(x2:y2):...:(xn:yn) - coordinates of the start/end points of the primitives that form a closed circuit,
color - fill color,
image - fill image.
The priority values are the color and image of the fill, set in the "Elements' list. " If you want to use the properties set in the "Fill" field of the "Attributes" tab, then they should be skipped in the description of the primitive.
To scale the figures it is necessary in the "Geometry" field to set the scale the for the "X" and "Y" axes. In addition, there is the ability to visually zoom in/out the widget without changing the scale in the "Geometry" field. You must exit the editing mode by the right click on the widget field, select in the popup menu "Zoom in (+10%)"/"Zoom out (-10%)", or rotate the mouse wheel while holding the "Ctrl" key pressed. Exit the editing mode is made either by pressing the "Esc", or using the popup menu of the widget.
It is possible to rotate the contents of the widget. To rotate the created objects you should set the "Orientation angle" from -360 to 360 in the "Attributes" tab.
Graphical editor supports color transparency, defined as follows: color-t, where the color - the color itself, and t - transparency from 0 (fully transparent) to 255 (opaque).
4. Popup menu of the graphic editor
The popup menu by the right-clicking in the editable widget is provided. Depending on what an object is under the mouse popup menu can take several different forms. Below, in Figure 6, there are examples of the popup menu.
Fig. 6. The popup menu for the lines (line, arc, Bézier curve) and for the fill from left to right.
The popup menu includes the following sections (from top to bottom):
- drawing section, allows you to select the figure to paint, the "bindings" mode by the "Connections" item and to return to selection mode - "Cursor";
- copy/paste the selected figures section;
- rising/lowering the selected figures along "Z" section;
- control section (to make static or dynamic) different properties of primitives and also for the call the properties dialog of the elementary figure;
- exit the editing mode section.
5. Properties dialog of the elementary figure
Диалог, варианты которого представлены на рисунках 7, 8, 9, реализован для интерактивного и удобного управления свойствами фигур(ы).
Рис. 7. Диалог свойств элементарной фигуры для одной линии (линия, дуга или кривая Безье).
Рис. 8. Диалог свойств элементарной фигуры для группы выбранных линий.
Рис. 9. Диалог свойств элементарной фигуры для заливки.
Как видно из рисунков выше, диалог может иметь три различных формы в зависимости от объекта, для которого вызывается.
Если диалог вызван для одиночной фигуры (линия, дуга или кривая Безье), то в нем существует возможность редактировать координаты точек фигуры (рис. 7). Если точка соединена с точкой другой фигуры или фигур, и включен режим «привязок» ( «Подключиться» ), то введенные координаты будут применены ко всем фигурам, а заливки, в которых участвует фигура, будут соответственно перерисованы.
Если же диалог вызван для группы выбранных фигур (рис. 8), то свойства (атрибуты), указанные в диалоге, будут применены ко всем фигурам, перечисленным в заглавии диалога. При вызове диалога в полях свойств будут отображаться данные той фигуры из группы выбранных, относительно которой было вызвано контекстное меню. Существует возможность включать/исключать отдельные свойства диалога. Для этого предусмотрена кнопка (file:disableButton.png). В случае исключения отдельных свойств они не будут обрабатываться при подтверждении диалога (кнопка «Принять»). При подтверждении диалога все указанные данные для включенных свойств будут применены для всей группы фигур.
Диалог для свойств заливки (рис. 9) позволяет управлять свойствами отдельной заливки.
При выборе флажка справа от свойства оно (свойство) после подтверждения диалога устанавливается в значение по умолчанию, которое указано во вкладке «Атрибуты». Кнопки «Дин/Стат» делают соответствующие свойства динамическими либо статическими.