Skip to Content

Wiki source code of 5. Diagrams Development Manual

Version 145.1 by Lana on 2025/12/04 17:10
Show last authors
1 = CONTENT =
2
3 = 1. INTRODUCTION =
4
5 CENTO is a multifunctional software platform for data collection, processing, and display.
6
7 The CENTO software allows you to create, edit, and view diagrams without installing additional programs.
8
9 This Manual explains how to work in the built-in CENTO diagram editor, how to create and configure diagrams as well as how to link diagram elements to objects in the CENTO information model.
10
11 It is assumed that the user, having read the "User Manual", "Setup Manual", and "Information Model Setup Manual", is already familiar with the basic interface elements, ways to configure CENTO, and the basic concepts of the CENTO information model.
12
13 = 2. VIEWING DIAGRAMS =
14
15 Diagrams can be viewed by hovering over [[image:Screenshot 2025-12-03 at 20.28.38.png||height="30" width="88"]] in the CENTO main menu and clicking on the name of a diagram in the drop-down list under the button. The drop-down list contains a list of diagrams available for viewing. An example of a diagram screen with a drop-down list is shown in Fig. 2.1.
16
17 [[image:Screenshot 2025-12-03 at 20.29.25.png]]
18
19 Figure 2.1. Diagram with a drop-down list of available diagrams
20
21 Zooming of the diagrams is performed by scrolling the mouse wheel, or by clicking the buttons in the upper-right corner of the viewing area **Zoom in** [[image:Screenshot 2025-12-03 at 20.30.03.png||height="26" width="26"]] or **Zoom out** [[image:Screenshot 2025-12-03 at 20.30.27.png||height="28" width="28"]]. The **Scale **[[image:Screenshot 2025-12-03 at 20.30.58.png||height="28" width="28"]] button is designed to automatically adjust the size of the diagram within the screen.
22
23 When using CENTO on touchscreen devices or on multi-touch panels, the image is zoomed in or out by double touching and simultaneously changing the distance between the touch points.
24
25 The visible portion of the diagram can be repositioned within the interface workspace by clicking and dragging with the left mouse button held down, or by pressing and dragging using the mouse wheel (middle mouse button).
26
27 Switching between diagrams is performed in the **Active schemes** tree displayed on the left side of the screen when the button [[image:Screenshot 2025-12-03 at 20.31.39.png||height="29" width="29"]] is pressed. This tree can be pinned in the viewer by clicking the button [[image:Screenshot 2025-12-03 at 20.32.16.png||height="28" width="28"]]. The diagram currently displayed on the screen is highlighted within the corresponding tree structure [[image:Screenshot 2025-12-03 at 20.32.52.png||height="22" width="140"]].
28
29 The sorting of diagrams and folders (IM objects) depends on the indicated position, see Fig. 2.1, as well as additional settings in the tree itself when the button [[image:Screenshot 2025-12-03 at 20.33.22.png||height="27" width="31"]]is right-clicked.
30
31 [[image:Screenshot 2025-12-03 at 20.34.06.png||height="80" width="305"]]
32
33 The tree structure is sorted in ascending order based on the defined positional indices.
34
35 [[image:Screenshot 2025-12-03 at 20.47.15.png]]
36
37 The tree structure is organized by folders and additionally sorted in ascending order based on the defined position within each folder.
38
39 The displayed diagrams can be exported to .png files, and sent for printing, thereby they serve to display the current state in a certain period. To do this, click on the **Export** button [[image:Screenshot 2025-12-03 at 20.47.54.png||height="28" width="27"]] on the right side of the screen and select the required menu.
40
41 If the user has the right to edit diagrams, then the **Edit** button [[image:Screenshot 2025-12-03 at 20.48.29.png||height="30" width="29"]] is displayed on the right in the viewing area. When clicking it, the displayed diagram opens in the menu of the built-in editor. Operational guidelines for using the editor are detailed in Section 3 of this manual.
42
43 The **Settings** menu [[image:Screenshot 2025-12-03 at 20.49.07.png||height="33" width="32"]] allows adjustment of the displayed depth of the object path in the header of the **Measurements** menu table (see Fig. 2.2), as well as the format for displaying instantaneous tag values [[image:Screenshot 2025-12-03 at 20.49.34.png||height="32" width="202"]] . Access to this button is granted based on user permissions.
44
45 The **Debug** mode [[image:Screenshot 2025-12-03 at 20.50.14.png||height="35" width="33"]] allows the diagram designer to configure active templates to display any actions embedded in the logical rules of the elements. After activating this mode, click on the diagram object to be checked. After that, information appears with the attribute code of the IM object, the tag ID number, and its value/quality/status. To apply the values entered in these fields, click on the **Apply** button [[image:Screenshot 2025-12-03 at 20.50.38.png||height="32" width="30"]]. This mode does not change the tag configuration and does not send a signal of the user’s manual input to the system.
46
47 [[image:Screenshot 2025-12-03 at 20.51.39.png||height="130" width="683"]]
48
49 Figure 2.2. Measurements in the debug mode
50
51 The playback [[image:Screenshot 2025-12-03 at 20.52.16.png||height="25" width="25"]] mode allows viewing archived data of tag values associated with the diagram. By default, viewing is available for the last 20 minutes, this is the maximum time limit that can be used for any selected period in the calendar drop-down menu. After selecting the date and time, click on the play button [[image:Screenshot 2025-12-03 at 20.52.48.png||height="27" width="27"]].
52
53 When the button [[image:Screenshot 2025-12-03 at 20.53.18.png||height="30" width="30"]] is pressed, the **Dispatch marks** page is opened (see Fig. 2.3). This interface displays the history of setting and removing dispatch marks. The object tree of the information model (IM) is located on the left side, while the history of mark assignments and removals is shown on the right. The right panel can be exported as a .xlsx table using the button [[image:Screenshot 2025-12-03 at 20.53.43.png||height="28" width="98"]].
54
55 Another button [[image:Screenshot 2025-12-03 at 20.55.35.png||height="30" width="78"]] in the Actions menu removes the mark assigned to the diagram object.
56
57 [[image:Screenshot 2025-12-03 at 20.56.20.png||height="571" width="1365"]]
58
59 Figure 2.3. Dispatch marks interface
60
61 The position of the diagrams and their scale are memorized for each user and device.
62
63 The diagram view mode has the functions for:
64
65 * switching to the parameter chart when left-clicking its value
66 * displaying the main parameters of an object when left-clicking it
67 * displaying the main parameters of an object via the "Measurements" menu when right-clicking it
68 * remote control of switching devices (if this function is available and the rights are granted)
69 * viewing a video (if this function is available and the rights are granted)
70 * installation/removal of dispatcher tags (if this function is available and the rights are granted)
71 * installation/removal of portable earthing devices (if this function is available and the rights are granted)
72 * acknowledging events when right-clicking
73 * viewing events in the operational log.
74
75 An example of calling object measurements is shown in Fig. 2.4.
76
77 [[image:Screenshot 2025-12-03 at 20.58.29.png||height="329" width="881"]]
78
79 Figure 2.4. Calling object measurements
80
81 The **Measurements **drop-down window consists of the following columns:
82
83 * **ID/Code** is the identification number of the parameter (tag) or its code, depending on the selected item in the drop-down menu, which is remembered even when the page is refreshed. Left-clicking on the ID value redirects to the **Devices, tags, channels** page under the** Tags, Channels** tab.
84 * S is the status of the parameter (tag)
85 * **Name** is the name of the parameter (tag)
86 * **Value** is the value of the parameter (tag), left-clicking switches to the chart in the real-time data analysis.
87 * **Description** displays the description of the parameter value taken from the IM directory
88 * **Device** specifies the full path to the device to which the parameter (tag) is linked. Left-clicking redirects to the **Devices, tags, channels** page on the **Devices** tab
89 * **The time of the last change**
90 * **The time of the last update **is the time of the last poll for a tag
91 * **Manual input** is a field for entering values manually. Manual input is available before data arrives by selecting [[image:Screenshot 2025-12-03 at 21.01.06.png||height="26" width="28"]]. Once correct tag polling occurs, the manual input is reset, and the actual incoming value is displayed. When the button [[image:Screenshot 2025-12-03 at 21.01.36.png||height="28" width="30"]]is selected, manual input remains visible until it is canceled by the user.
92
93 The **Measurements** drop-down window can be moved from one point to another, as well as adjusted in height. To resize the window, point the mouse cursor to the lower-right corner, and then drag down or up the arrow that appears.
94
95 Tag settings can be managed in Measurements. Additional fields are expanded by clicking on the setpoints button [[image:Screenshot 2025-12-03 at 21.02.31.png||height="29" width="84"]] (see Fig. 2.5). The setpoints can only be edited by users who have the right to do so.
96
97 [[image:Screenshot 2025-12-03 at 21.03.24.png||height="130" width="1434"]]
98
99 Figure 2.5. Setpoints
100
101 Clicking on the setpoint opens an additional menu where the status, value, acknowledgment, and the time of insensitivity can be adjusted (see Fig. 2.6). This menu appears both on the already configured setpoints and on the missing ones.
102
103 [[image:Screenshot 2025-12-03 at 21.03.57.png||height="317" width="704"]]
104
105 Figure 2.6. Setpoint settings
106
107 The object class code and its ID are displayed in the object measurements section (see Fig. 2.7), which is bound to the Information Model (IM). When clicked, the object is redirected to the **Information Model editor** page. Access to this page is restricted to users with the appropriate rights.
108
109 [[image:Screenshot 2025-12-03 at 21.04.36.png||height="206" width="1025"]]
110
111 Figure 2.7. Measurements of the IM object
112
113 The **Measurements** table provides the ability to navigate to charts in the **Real-time data analysis** section, not only for a specific tag value but also for all tags simultaneously by pressing the button [[image:Screenshot 2025-12-03 at 21.05.55.png||height="28" width="25"]]
114
115 Tags in the measurements associated with technology events are highlighted with a colored background, as well as with flashing, which allows to quickly navigate which of the parameters of the active object of the diagram is associated with a particular event, see example in Fig. 2.8. The background color of the backlight is the same as that of the animation frame of the active object in the additional settings of the diagram.
116
117 [[image:Screenshot 2025-12-03 at 21.06.45.png||height="152" width="1024"]]
118
119 Figure 2.8. Highlighting tag values associated with a technology event
120
121 = 3. DIAGRAM MANAGEMENT =
122
123 == 3.1. Diagram page interface ==
124
125 Diagrams are managed using the diagram manager in the **Settings** menu **Diagrams** (the menu item position can be changed by the user when configuring the system).
126
127 An example of the **Diagrams** page is shown in Fig. 3.1.
128
129 [[image:Screenshot 2025-12-03 at 21.08.33.png||height="199" width="1026"]]
130
131 Figure 3.1. Mnemonic diagrams page
132
133 To add a new diagram, click the button [[image:Screenshot 2025-12-03 at 21.09.11.png||height="20" width="91"]]. Then, enter a name for the new diagram in a window that appears (see Fig. 3.2).
134
135 [[image:Screenshot 2025-12-03 at 21.09.41.png||height="169" width="569"]]
136
137 Figure 3.2. New scheme window
138
139 A new diagram appears in the list with its name. The diagram ID is assigned automatically.
140
141 To search for a diagram by its name or ID, click on the icon [[image:Screenshot 2025-12-03 at 21.10.28.png||height="27" width="29"]] or search it in the diagram tree.
142
143 To select all diagrams, press the button [[image:Screenshot 2025-12-03 at 21.11.01.png||height="32" width="31"]] . The button changes to [[image:Screenshot 2025-12-03 at 21.11.55.png||height="28" width="28"]]. To deselect all objects in the tree, press the same button [[image:Screenshot 2025-12-03 at 21.12.22.png||height="27" width="26"]] again. To collapse the tree, press the button [[image:Screenshot 2025-12-03 at 21.12.56.png||height="28" width="27"]] , to expand it, use the expand button [[image:Screenshot 2025-12-03 at 21.13.23.png||height="28" width="26"]]. To adjust the tree width, hover over the vertical divider and drag it left or right while holding the left mouse button. The button [[image:Screenshot 2025-12-03 at 21.13.55.png||height="28" width="27"]] allows hiding unpublished or published diagrams within the tree:
144
145 [[image:Screenshot 2025-12-03 at 21.14.23.png||height="124" width="370"]]
146
147 Figure 3.3. Hiding diagrams in the tree
148
149 The font color of diagram names in the tree depends on their status: active diagrams are displayed with one style [[image:Screenshot 2025-12-03 at 21.15.40.png||height="27" width="127"]], while inactive ones are shown with another [[image:Screenshot 2025-12-03 at 21.16.11.png||height="34" width="164"]]. Additionally, diagrams without any linked tags are marked in the tree. When hovering over the icon [[image:Screenshot 2025-12-03 at 21.16.38.png||height="21" width="23"]] , a window appears displaying a list of tag IDs:
150
151 [[image:Screenshot 2025-12-03 at 21.20.20.png||height="148" width="369"]]
152
153 Figure 3.4. Missing tags
154
155 The status of diagrams determines their visibility in the **Active schemes** tree of the diagram viewer (see Fig. 2.1). New diagrams have the default status //disabled.//
156
157 The **Position** column indicates the sequence number of the diagram displayed in the **Active schemes** tree of the diagram viewer (see Fig. 2.1).
158
159 In the **Object** column, the diagram is bound to the objects of the information model, which allows seeing the nesting levels in the tree of the diagram viewer (see Fig. 2.1).
160
161 To edit the diagram in the built-in editor, click the button [[image:Screenshot 2025-12-03 at 22.05.04.png||height="26" width="26"]]in the **Actions** column. The operating rules for the diagram editor are detailed in the next sections of this manual.
162
163 The button [[image:Screenshot 2025-12-03 at 22.08.32.png||height="27" width="28"]] in the **Actions** column is used to copy the diagram URL to the PC clipboard. A link to the diagram is required when configuring its view in the drop-down list [[image:Screenshot 2025-12-03 at 22.09.01.png||height="30" width="95"]] in the CENTO main menu (Settings > System > Menu editor).
164
165 The diagram added to the drop-down list of the menu is to be displayed regardless of the status set in the **Diagrams** window.
166
167 To create a copy of the diagram, click the button [[image:Screenshot 2025-12-03 at 22.10.09.png||height="31" width="32"]]in the **Actions** column opposite the diagram.
168
169 To delete the diagram, click the button [[image:Screenshot 2025-12-03 at 22.10.43.png||height="30" width="31"]] in the **Actions** column opposite the diagram.
170
171 To download the diagram, click the button [[image:Screenshot 2025-12-03 at 22.11.22.png||height="27" width="28"]] in the **Actions** column opposite the diagram.
172
173 To download all the diagrams, click the **Download** button. To upload the downloaded diagram archive, click **Upload.**
174
175 = 4. DIAGRAM EDITOR =
176
177 == 4.1. Graphical editor interface. ==
178
179 The graphical editor interface is shown in Fig. 4.1
180
181 [[image:Screenshot 2025-12-04 at 12.17.41.png]]
182
183 Figure 4.1. Editor interface
184
185 === 4.1.1. Main menu ===
186
187 The main menu (upper horizontal line) contains the main functions for working with the graphical editor interface: file actions, workspace settings, page view, arrangement settings for elements, their editing and viewing, as well as additional settings and background information for the diagram developer. The menu functions also have hints on hotkey combinations for quickly executing commands on the keyboard.
188
189 When selecting an element on the diagram, the **Setting up rules** button [[image:Screenshot 2025-12-04 at 12.19.21.png||height="20" width="23"]] on the toolbar becomes available.
190
191 If the selected element is an active object, clicking on the icon [[image:Screenshot 2025-12-04 at 12.19.53.png||height="28" width="29"]] redirects to the **Binding an element to a tag or channel** tree tree (see Fig. 4.5). When selecting an inactive element on the diagram and clicking on the **Setting up rules** button, the **Component visual settings** window appears (see Fig. 4.4). For quick binding of tags, metering channels, and devices within the rules, the tree structure can also be used, which opens upon clicking the button [[image:Screenshot 2025-12-04 at 12.19.53.png||height="28" width="29"]].
192
193 Clicking on the icon [[image:Screenshot 2025-12-04 at 12.21.03.png||height="26" width="33"]] switches to the diagram view mode.
194
195 === 4.1.2. Toolbar ===
196
197 The left panel **Categories** contains the basic set of graphical tools for creating and editing shapes and a set of graphic objects created by the diagram developer (see Fig. 4.2). The left panel can be also replaced with a tree for binding diagram objects (see Fig. 4.5), and the tree displaying binding to tags or metering channels (see Fig. 4.6).
198
199 [[image:Screenshot 2025-12-04 at 12.22.13.png||height="720" width="344"]]
200
201 Figure 4.2. Graphic templates
202
203 === 4.1.3. Properties panel ===
204
205 The main tools for configuring the workspace and editing diagram elements are displayed on the right side of the graphical editor interface (see Fig. 4.3).
206
207 [[image:Screenshot 2025-12-04 at 12.23.25.png||height="787" width="988"]]
208
209 Figure 4.3. Object properties
210
211 == 4.2. Binding of parameters: general information ==
212
213 When selecting an inactive element on the diagram and clicking on the Setting up rules button [[image:Screenshot 2025-12-04 at 12.24.23.png||height="23" width="27"]], the **Component visual settings** window appears (see Fig. 4.4).
214
215 [[image:Screenshot 2025-12-04 at 12.24.58.png||height="286" width="893"]]
216
217 Figure 4.4. Component visual settings window
218
219 The components are displayed on the diagram in accordance with the rules that determine which actions are to be performed with the component if certain conditions are met. The user can set multiple rules to customize the display of a single component.
220
221 The **Copy** button [[image:Screenshot 2025-12-04 at 12.25.38.png||height="28" width="27"]] (23) is used for user convenience and allows creating a new rule based on one of the already configured rules.
222
223 The **Condition No. 1** area determines in which cases an action is to be applied to the diagram component being edited and includes fields (see Fig. 4.4):
224
225 ~1. Selecting the type of source parameter to use when creating the rule. This can be the tag's value or its status, etc.
226
227 2. Selecting the desired parameter from the database or from the information model, a drop-down list appears when clicking **More.**
228
229 3. Entering tag processing formulas.
230
231 4. The choice of the logical operator used in the condition, for example, equal if the parameter should be equal to something.
232
233 5. Selecting the type of parameter used for comparison.
234
235 6. Setting the value with which the source parameter is to be compared (manually or in a drop-down list).
236
237 7. Entering tag processing formulas.
238
239 8. If there are several conditions in the rule, the user determines in which cases they should call an action.:
240
241 * if //any of// are selected, the logical operator OR is implied (if Condition #1 or Condition No. 2 or Condition No. N is met, then the action is performed);
242 * if //all //is selected, the logical operator AND is implied (if Condition No. 1 and Condition No. 2 and Condition No. N are met, then the action is performed).
243
244 9. To link a no-conditions tag on the diagram, select "no conditions".
245
246 10. Delete the condition if necessary.
247
248 ~11. Comment on the condition (optional).
249
250 12. To enable more flexible configuration of component display on the diagram, the rule may include multiple conditions.
251
252 The **Action No. 1** area determines which settings are to be applied to the edited component of the diagram if the conditions set by the user are met, and includes the fields:
253
254 13. Binding an action to the component text.
255
256 14. Binding an action to the geometry of a component.
257
258 15. Binding an action to a component style.
259
260 16. Binding an action to an animation (object blinking).
261
262 17. Selecting the parameter to edit (determined by the selected binding).
263
264 18. Setting the parameter value (manually or in a drop-down list).
265
266 19. Text formatting.
267
268 20. If the action is linked to the text of the edited component, the parameter value can be rounded based on the specified number of decimal places.
269
270 21. Output of numbers on the diagram in exponential form.
271
272 22. To enable more flexible configuration of component display on the diagram, the rule may include multiple conditions.
273
274 To delete unnecessary actions in the rule, click the button [[image:Screenshot 2025-12-04 at 12.29.45.png||height="23" width="24"]].
275
276 The **Reset current rule** button is used to delete all conditions and actions in the selected rule.
277
278 To save the changes, click **Save.**
279
280 If saving the settings is not required, the window can be closed by clicking the button [[image:Screenshot 2025-12-04 at 12.30.16.png||height="25" width="24"]] or anywhere outside the modal window.
281
282 When an active element on the diagram is selected and the **Binding an element to a tag or channel** button [[image:Screenshot 2025-12-04 at 12.30.53.png||height="23" width="22"]] is clicked, the element panel on the left side of the graphical editor is replaced with a tree for binding diagram objects to the information model.
283
284 The **Binding an element to a tag or channel tree interface** is shown in Fig. 4.5
285
286 [[image:Screenshot 2025-12-04 at 12.31.29.png||height="810" width="344"]]
287
288 Figure 4.5. Binding an element to a tag or channel interface
289
290 If the selected item is already bound to the IM, the **Binding an element to a tag or channel** menu displays the path to it and the link, while the **Choose** button in the tree is inactive. When another IM object is selected in the tree, the button becomes active and performs binding when clicked. For quicker binding, double-click can be used. The search field allows searching by the name or code of an Information Model (IM) object. When the object is deselected, the tree becomes inactive. To close the tree, click **Close.**
291
292 When an inactive element on the diagram is selected and the B**inding an element to a tag or channel** button is pressed, the element panel on the left side of the graphical editor is replaced with a tree of devices, tags, and channels for binding diagram elements. The tag and channel tree interface for element binding is shown in Fig. 3.6. When selecting tags or metering channels, their IDs are automatically entered into the corresponding fields in the rules.
293
294 [[image:Screenshot 2025-12-04 at 12.32.04.png||height="484" width="341"]]
295
296 Figure 4.6. Tag and channel tree interface: binding an element to a tag or channel
297
298 == 4.3. Adding objects to custom categories ==
299
300 Fig. 4.7 shows an example of adding a graphic template to a user category.
301
302 [[image:Screenshot 2025-12-04 at 12.33.11.png||height="435" width="831"]]
303
304 Figure 4.7. Adding a new component
305
306 To add a new object to a custom category, select the object (1) and click active elements adding button (2) in the appropriate category or drag it to this category by holding the left mouse button. Then, in the **Add a new component** window that appears, enter the desired name and click **Add** button (4).
307
308 == 4.4. Importing and exporting a library of elements ==
309
310 Element library transfer is only available in diagram editing mode. To transfer the element library from one server to another, perform the following steps:
311
312 * To transfer the element library, open the File > New library > Export library section from the main menu on the source server. In the modal window that appears, select the categories to export and click **Export** (see Fig. 4.8). The selected categories are to be saved to a JSON file.
313
314 * Open the diagram in editing mode on the target server and navigate to File  > New library > Import library in the horizontal menu. In the modal window that appears, enter the path to the previously saved JSON file or drag the file into the import field, then click **Import **(see Fig. 4.9).
315
316 After importing, the library appears in the left column of the **Category,** the name of which is written in the format [name of the transferred category]_[date of transfer]_[randomly generated hash of 5 characters] (see Fig. 3.9).
317
318 [[image:Screenshot 2025-12-04 at 12.35.15.png||height="251" width="479"]]
319
320 Figure 4.8. Export library modal window
321
322 [[image:Screenshot 2025-12-04 at 12.35.44.png||height="244" width="481"]]
323
324 Figure 4.9. Import library modal window
325
326 [[image:Screenshot 2025-12-04 at 12.36.09.png||height="122" width="480"]]
327
328 Figure 4.10. Imported category
329
330 When transferring active elements, keep in mind that they have a set of rules inside them that depend on the classes of the information model and their attributes. If the classes and attributes described in the rules are not available on the server, they must be downloaded from the server from which the library was imported; otherwise, the active element to be inactive.
331
332 == 4.5. Auto-replace active objects ==
333
334 To auto-replace active objects, do the following:
335
336 * Create custom categories with objects (see section 4.3).
337 * Select all the objects to be replaced on the diagram, right-click, and select the menu **Replace with another element.** In the window that opens, expand the category with the new object (see Fig. 4.11) and select it (if posters have been reconfigured for the object, then check the box **Apply new poster settings**). Click **Apply.**
338
339 [[image:Screenshot 2025-12-04 at 12.37.31.png||height="422" width="477"]]
340
341 Figure 4.11. Replace with another element modal window
342
343 For the correct auto-replacement of active objects attached using linked lines to other elements of the diagram, the **Connectable** parameter should be enabled in the styles:
344
345 [[image:Screenshot 2025-12-04 at 12.38.14.png]]
346
347 Figure 4.12. Activation of the Connectable parameter
348
349 If the active object does not have this parameter, trying to connect it to the line shows a prompt like in Fig. 4.13. The enabled parameter in the **Connectable** styles only affects the auto-replacement of the active object; this setting is not to affect the visual display in any way.
350
351 [[image:Screenshot 2025-12-04 at 13.11.02.png||height="599" width="365"]]
352
353 Figure 4.13. Prompt when trying to connect a line to an active object
354
355 To conveniently select a large number of replaceable elements, use the **Select all similar elements **menu. This function works if the object being replaced is placed in a custom category, based on which the diagram was drawn. In other words, all objects have the same properties as the objects in the category. To use this function, select an element on the diagram, right-click, and select the **Select all similar elements.** All similar elements are to be highlighted automatically.
356
357 After elements are automatically selected, the **Replace with another element** can be used.
358
359 If the objects on the diagram differ from those placed in the category, clicking **Select all similar elements** pops up a message as in Fig. 4.14.
360
361 [[image:Screenshot 2025-12-04 at 13.11.47.png]]
362
363 Figure 4.14. Selecting similar elements is not available
364
365 == 4.6. Auto-replace of colors used in diagrams ==
366
367 [[image:Screenshot 2025-12-04 at 13.12.37.png]]
368
369 Figure 4.15. Color replacement modal window
370
371 Fig. 4.15 shows the** Color replacement** modal window, which allows the diagram developer to change the current color of not only the rendered elements (In the diagram) but also the color set in active object rules (In the rules) and text color (In the text). Clicking** Replace** applies the changes to the entire diagram. To change the color of individual objects, use standard style editing, as shown in Fig. 4.3.
372
373 == 4.7. Setting up an animation frame for technological events associated with a diagram object ==
374
375 [[image:Screenshot 2025-12-04 at 13.13.43.png]]
376
377 Figure 4.16. Scheme settings modal window
378
379 For each created diagram, the flashing frame around the active object in diagram view mode can be customized depending on the incoming technological event. In the** Settings **window, under the **Animation frames,** the fields include:
380
381 * **The frame **is the color of the frame
382 * **Border, px** is the thickness of the frame
383 * **Offset, px** is the indent of the displayed animation frame from the frame of the graphic element
384 * **Animation time, s, **is the flashing time in seconds of incoming technological events that are configured without acknowledgment
385 * **Fill **is the color of the fill inside the frame
386 * **Opacity, % **is the opacity of the fill color inside the frame from 0 to 100%.
387
388 == 4.8. Chart settings ==
389
390 The diagrams support adding charts, enabling real-time monitoring of specific parameters, as well as the display of future data, for example, to compare planned versus actual values.
391
392 The default chart template is in a custom category named **Charts.** To use it, move it to the diagram canvas (see Fig. 4.17).
393
394 [[image:Screenshot 2025-12-04 at 13.15.15.png]]
395
396 Figure 4.17. Charts object
397
398 The **Charts** object removed from the category visually looks like a picture that can be expanded in width and height, all other settings for colors, fonts and links are in the **Edit data of chart** modal window (see Fig. 4.18), which is available by right-clicking on the object and selecting **Edit data of chart.**
399
400 The chart can display not only the value of a tag or a metering channel, but also several tags and channels, placing them on the same or separate axes.
401
402 === 4.8.1. Charts of current tag values in the template ===
403
404 Fig. 4.18 shows an example of configuring the tag value chart display
405
406 [[image:Screenshot 2025-12-04 at 13.16.36.png]]
407
408 Figure 4.18. Edit data of chart modal window
409
410 The** Edit data of chart** modal window includes the following settings:
411
412 * **Chart depth**
413 * **Round** is rounding up values with the number of decimal places.
414 * **Left X-axis boundary** is a required field, it defines the display depth of the chart (which also determines the data averaging interval). Parameters can be specified in days, hours, or minutes - the selected period is to be used for display in the diagram view mode.
415 * **Y boundaries** are the boundaries of the chart display along the Y-axis, optional.
416 * **Grid color** is the color of the grid.
417 * **Axis color** is the color for the chart axes.
418 * **Background color** is the color for the chart background.
419 * **Font Size **is the font size.
420 * **Font color** is the color for the font.
421 * **Date format** is DD MMM YYYY (day, month, year). DD.MM .YY HH:mm:ss (day, month, year, hours, minutes, seconds).
422
423 When filling in the chart settings, the data is displayed as shown below:
424
425 [[image:Screenshot 2025-12-04 at 13.18.01.png]]
426
427 Figure 4.19. Chart in the diagram viewer
428
429 Fig. 4.19 shows an example of a customized chart. This chart updates in real time and displays data from the last 5 minutes. Right-clicking on the chart opens the** Measurements** window, which provides information about the linked tag, its value, and more. Hovering the left mouse button over the chart calls the pop-up with the date, time, and value.
430
431 === 4.8.2. Charts of tag values selected on the diagram ===
432
433 [[image:Screenshot 2025-12-04 at 13.18.57.png]]
434
435 Figure 4.20. Edit the data of the chart
436
437 To plot a chart for any selected tag on the diagram, configure the fields as shown in Fig. 4.20:
438
439 * Left border along X,
440 * Y boundaries,
441 * Grid color,
442 * Axis color,
443 * Background color,
444 * Font size,
445 * Font color,
446 * Date format.
447
448 When the chart settings are configured as shown in Fig. 4.20, data in view mode is displayed only after a linked tag is left-clicked. Each additional selected tag plots its own chart (see Fig. 4.21).
449
450 [[image:Screenshot 2025-12-04 at 13.19.47.png]]
451
452 Figure 4.21. Chart in the diagram viewer
453
454 === 4.8.3. Displaying future data on charts ===
455
456 [[image:Screenshot 2025-12-04 at 13.20.34.png]]
457
458 Figure 4.22. Edit the data of the chart
459
460 Configuring charts for future data is similar to the previous steps.
461
462 The difference lies in an additional field for metering channels, as shown in Fig. 4.2.2, where:
463
464 * **The right border along X** displays future data; if no values are specified, the data for the current time is shown.
465
466 When the chart settings are configured as shown in Fig. 4.22, the data in view mode is to display values within a range of a day ahead and a day behind (see Fig. 4.23).
467
468 This data, displayed on the charts, enables forecasting, comparing planned vs. actual performance at the enterprise, and similar analyses.
469
470 [[image:Screenshot 2025-12-04 at 13.21.50.png]]
471
472 Figure 4.23. Forecasting chart
473
474 == 4.9. Setting up level indicators ==
475
476 [[image:Screenshot 2025-12-04 at 13.23.18.png]]
477
478 Figure 4.24. Water level parameter output
479
480 The diagram editor allows displaying data indicating the levels of measured values. Fig. 4.24 shows an example that displays the value of the //Water level// tag in the form of filling a vertical rectangle in blue.
481
482 To configure this function:
483
484 * Draw a suitable object, a rectangle, for example
485 * Click on the **Setting up rules** icon [[image:Screenshot 2025-12-04 at 13.24.08.png||height="20" width="24"]]
486 * In the window that opens (see Fig. 4.25), the** Condition** and **Action** fields need to be filled in for the rule. If highlighting areas based on specific conditions is not required, the **Condition **field can be left empty – in this case, the rendered object is to be displayed using the color specified in the **Action** field.
487
488 [[image:Screenshot 2025-12-04 at 13.24.38.png||height="202" width="691"]]
489
490 Figure 4.25. Setting the fill depending on the values
491
492 Fig. 4.25 shows the setting of the fill depending on the values without conditions. The action to change the fill consists of the fill areas:
493
494 1. In step #1, select the** Style** tab.
495 1. In the suggested menu, select the option **Fill depending on the values.**
496 1. Select the tag/attribute name from the drop-down list.
497 1. If a tag is selected, its ID should be entered or selected from the drop-down list. If an IM attribute is selected, it also needs to be specified from the drop-down list of the class tree.
498 1. The fill range of the minimum and maximum scales can be set not only by specifying any values, but also by the value of the channel/tag/attribute.
499 1. Specify the minimum/maximum value of the scale for filling.
500 1. Select the background color.
501 1. Select the fill color of the area to be changed dynamically.
502 1. Select the fill direction: vertically or horizontally.
503
504 Thus, the display can be adjusted to show not only basic levels but also minimum and maximum values in the drawing by using different object fills based on a set of conditions.
505
506 == 4.10. Properties of active objects ==
507
508 Each created active diagram object has properties that affect various display functions in the viewing mode.
509
510 To edit the properties of an object, right-click on it and select the **Edit data of the element.** The **Edit data of element **modal window is shown in Fig. 4.26.
511
512 [[image:Screenshot 2025-12-04 at 13.26.04.png]]
513
514 Figure 4.26. Edit the data of the element
515
516 * **Disabling context menus** allows selecting items that should be excluded from the context menu of the active object in the diagram viewer.
517 * **Opening with a left-click **allows opening selected menu items with a left-click.
518 * **Disable blinking of events for IM objects** disables the flashing frame around the active object when the event is triggered.
519 * **Disable context menus, posters, and animations** disables the following:
520
521 1. Disables the installation of posters for elements that are object attributes in the IM but have the same element ID bindings on the diagram. In Fig. 4.27, the dedicated switch is linked to ID 13939, the element TO is linked to the same ID, it is located in the measurements of the object (Activation of the TO). For posters to be exposed only to the switch, it is necessary for an IM element to enable **Disabling context menus, posters, and animations.**
522 1. The// Disable context menus, posters, animations// attribute disables animation for such an element if the event is triggered not by changing it, but by changing another attribute included in this object, but if the triggered event relates to this attribute, then animation will work for it. In Fig. 4.27, the dedicated switch is linked to ID 13939, the element TO is linked to the same ID, it is located in the measurements of the object (Activation of the TO). If the **Disable context menus, posters, animations** field is disabled, the TO element will flash at any event related to the object with ID 13939. For the "TO" to flash only at an event that relates to this parameter, the TO element should turn it on.
523 1. The //Disable context menus, posters, animations// attribute also disables all context menus that are available to the object, but only measurements remain. In Fig. 3.27, the dedicated switch is linked to ID 13939, the element TO is bound to the same ID, it is located in the measurements of the object (Activation of the TO). If an IM element does not include the// Disable context menus, posters, animations //attribute, then all context menus from the switch are to be available to it.
524
525 [[image:Screenshot 2025-12-04 at 13.27.06.png]]
526
527 Figure 4. 27. Disabling context menus, posters, and animations attribute
528
529 * **Disabling graphic animation** helps smooth the transition (rotations, offsets, and other geometric changes) of active or dynamic objects from one state to another in the diagram viewing mode.
530 * **Enabling element backlight **allows turning on the element highlighting when hovering in the diagram viewer (see Fig. 4.28), which allows the user to determine which diagram objects are active.
531
532 [[image:Screenshot 2025-12-04 at 13.28.03.png]]
533
534 Figure 4.28. Highlighting of an active element of the diagram
535
536 * **The hidden element** allows adjusting the visibility/invisibility of rendered objects in the diagram viewer. As soon as any object with this setting appears, a button [[image:Screenshot 2025-12-04 at 13.28.37.png||height="26" width="24"]], which hides such an object appears in the viewer in the upper-right corner. Clicking on it displays the diagram object and shows the button like this [[image:Screenshot 2025-12-04 at 13.29.19.png||height="23" width="25"]].
537
538 [[image:Screenshot 2025-12-04 at 13.29.40.png]]
539
540 Figure 4.29. Highlighting and hiding the active element of the diagram
541
542 * **Enabling animation for changing the state of a discrete signal** enables/disables the animation frame for objects whose tags are not described in the system of technological events, i.e. there are no records of alerts related to a particular state of the discrete signal in the logs. The flashing frame is to be displayed for as long as it is set in the animation settings of the diagram in Fig. 4.16.
543 * **The label **does not require filling in.
544 * **Element ID** is an object binding to the IM.
545 * **Poster position** can be vertical or horizontal, should be selected from the drop-down list.
546 * **X-indent **indicates the X-axis coordinate. When moving the image near the active object, this coordinate is to be written automatically.
547 * **Y-indent** indicates the Y-axis coordinate. When moving the image near the active object, this coordinate is to be written automatically.
548 * **The add attribute** button allows adding additional properties to an object.
549
550 In the **Measurements (left click)** field, left-click can adjust the number of rows and columns in the table. Fig. 4.30 shows an example of a two-column table.
551
552 [[image:Screenshot 2025-12-04 at 13.30.35.png]]
553
554 Figure 4.30. Changing the view of the measurement table
555
556 == 4.11. Simplified manual input from a diagram ==
557
558 In diagrams, tag values can be entered manually not only in the measurement window but also in separately drawn objects.
559
560 To quickly manage tags using manual input, a template is provided, which is located in the user category //Manual input.// To use this object, drag it to the diagram canvas (see Fig. 4.31).
561
562 [[image:Screenshot 2025-12-04 at 13.31.44.png]]
563
564 Figure 4.31. Manual input object
565
566 The manual input object removed from the category (see Fig. 4.31) visually looks like a picture that can be expanded in width and height. All other settings can be found in the **Editing manual input** modal window (see Fig. 4.32), which is available by right-clicking on the object and selecting the **Editing manual input **menu.
567
568 [[image:Screenshot 2025-12-04 at 13.32.15.png]]
569
570 Figure 4.32. Editing the manual input window
571
572 Fig. 4.32 shows the **Editing manual input** modal window, which includes the following settings:
573
574 * **Tag** drop-down list for selecting a binding to a tag or IM attribute;
575 * **Tag ID** drop-down list for binding to the tag ID or to the IM object, and its attribute.
576
577 [[image:Screenshot 2025-12-04 at 13.32.50.png]]
578
579 Figure 4.33. Binding the tag to the manual input object
580
581 [[image:Screenshot 2025-12-04 at 13.33.15.png]]
582
583 Figure 4.34. Binding to the attribute of the IM object
584
585 Figs. 4.33 and 4.34 show examples of binding, which, when viewed in the diagram, appear as shown in Fig. 4.35.
586
587 [[image:Screenshot 2025-12-04 at 13.33.48.png]]
588
589 Figure 4.35. Viewing a diagram with manual input objects
590
591 Fig. 4.35 shows two examples with the manual input objects. To manage the values of the real-time parameters, right-click or left-click in the rendered areas. After clicking, an icon [[image:Screenshot 2025-12-04 at 13.34.21.png||height="27" width="26"]]appears on the right. When clicked, the value is entered manually, as well as an icon [[image:Screenshot 2025-12-04 at 13.34.45.png||height="30" width="33"]] for manual input before data is received. This manual input value is to be reset automatically after data is received. To reset the values entered manually, click on [[image:Screenshot 2025-12-04 at 13.35.12.png||height="28" width="27"]].​​​​​​​
592
593 == 4.12. Input of fixed manual entry values ==
594
595 The diagrams support manual input of tag values not only through the measurements window but also directly from separately rendered objects within the diagrams.
596
597 Unlike the manual Input template described in Section 4.11, this function enables creating buttons that assign or reset fixed tag values upon a left click on the rendered element.
598
599 These buttons can also be configured with logical rules based on specific tag values by defining conditions and corresponding actions. Configuration is available through the context menu (right-click) under Object properties > Left click action > Manual input.
600
601 [[image:Screenshot 2025-12-04 at 13.36.08.png]]
602
603 Figure 4.36. Manual input button configuration
604
605 Fig. 4.36 shows an example of manual input configuration for a tag with ID 9001, where:
606
607 * **Tag ID** specifies the identification number of the tag selected from a drop-down list [[image:Screenshot 2025-12-04 at 13.36.43.png||height="22" width="24"]] or entered manually.​​​​​​​
608 * **Action** selects from a drop-down list: either manual input or cancellation of manual input.
609 * **Value** specifies the value to be assigned to the tag when the diagram button is pressed.
610 * **Before cancel** – if the state switch is enabled [[image:Screenshot 2025-12-04 at 13.37.25.png||height="25" width="40"]], the value persists until it is manually reset by the user. If the state switch is disabled [[image:Screenshot 2025-12-04 at 13.37.59.png||height="23" width="38"]], the manual input is automatically to be cleared after the next tag value change during the device polling.
611 * **Add tag** allows specifying multiple tags for manual input, with the option to set different values for each tag.
612
613 Fig. 4.37 shows an example of a drawn button. When left-clicked in view mode, it inputs a fixed value of 900 for the tag with ID 9001.
614
615 [[image:Screenshot 2025-12-04 at 13.38.45.png]]
616
617 Figure 4.37. Manual input value button
618
619 == 4.13. Links to external sources of information/to a local server, as well as to other diagrams. ==
620
621 [[image:Screenshot 2025-12-04 at 13.39.27.png]]
622
623 Figure 4.38. Adding links
624
625 In diagram view mode, navigation can be made through links to external information sources, local servers, other diagrams, real-time data analysis, metering data analysis, and any CENTO interface.
626
627 **1) Links from one diagram to another, as well as to external information sources**
628
629 To add links from one diagram to another or to an external source of information, select an object, and then right-click to open the edit link menu. A modal window **Edit data of element** opens.
630
631 In the drop-down list **Action with a left click**, select **Following the link**. In the **Link or mnemonic scheme ID** field, enter the ID number of the diagram or an external link, such as reference data, equipment manuals, etc.
632
633 The configured link can be opened in the new tab, in the current tab, as well as over the mnemonic scheme.
634
635 For the **Open over the mnemonic scheme** option, the zoom setting for the page to open is available. By default, the zoom is set to 30%. An example of clicking on a link over the mnemonic scheme is shown in Fig. 4.39.
636
637 [[image:Screenshot 2025-12-04 at 13.40.17.png]]
638
639 Figure 4.39. Clicking on a link over the mnemonic scheme
640
641 **2) Links to files on the local server**
642
643 To set up links to files from the local server, specify the directory in config.toml of the sed_api_gateway service in the line: **FileStorage** = "C:/SED/file_storage/files " (this path is specified by default for Windows, if necessary, specify the one in which the files are to be stored).
644
645 To switch from the diagram to files stored on the local server, specify the link address in the format: [[http:~~/~~/server_>>url:http://server_]]name/files/file_name in this directory.
646
647 **3) Links for navigation to Real-Time Data Analysis**
648
649 To navigate to **Metering data** or **Real-time dat**a open the object properties as described above. In the** Link or mnemonic scheme ID** field, click the button [[image:Screenshot 2025-12-04 at 13.41.24.png||height="21" width="33"]] and select **Real-time data** or **Analysis of data metering** from the drop-down list.
650
651 Fig. 4.40 shows an example of selecting tags from the real-time data section. The opened modal window displays the interface of this page with trees of devices, objects, statuses, and time on the left side. To create a link from the diagram, the appropriate tree and relevant tags should be selected, then the desired tab – **Real-time data, Chart**, or **Table** – should be specified on the right side, followed by clicking the button [[image:Screenshot 2025-12-04 at 13.41.45.png||height="19" width="30"]].
652
653 [[image:Screenshot 2025-12-04 at 13.42.18.png]]
654
655 Figure 4.40. Tag selection window in Real-time data analysis
656
657 The link to the selected tags in **Real-time data analysis** appears as a string (see Fig. 4.41), which can be copied or deleted.
658
659 [[image:Screenshot 2025-12-04 at 13.42.58.png]]
660
661 Figure 4.41. Link in Real-time data analysis
662
663 [[image:Screenshot 2025-12-04 at 13.43.35.png]]
664
665 Figure 4.42. Opening the Link in Real-time data analysis over the diagram
666
667 Fig. 4.42 shows an example of opening the charts configured in Fig. 4.40.
668
669 The configuration of links for metering channels in **Analysis of data metering** is like the described above.
670
671 == 4.14. Installing portable grounding on diagrams ==
672
673 The portable grounding is enabled in Settings > Diagrams > Edit > Extras > Scheme settings (see Fig. 4.43).
674
675 [[image:Screenshot 2025-12-04 at 13.44.28.png]]
676
677 Figure 4.43. Enabling portable grounding
678
679 If this option is enabled, then the grounding [[image:Screenshot 2025-12-04 at 13.45.01.png||height="24" width="24"]] button appears on the right side of the screen in the diagram viewing mode. Right-clicking on it opens a menu for setting the size and color of the portable grounding icon (see Fig. 4.44) to be applied to portable groundings on all diagrams including those previously installed. ​​​​​​​
680
681 [[image:Screenshot 2025-12-04 at 13.45.24.png]]
682
683 Figure 4.44. Portable grounding settings
684
685 [[image:Screenshot 2025-12-04 at 13.45.53.png]]
686
687 Figure 4.45. Installation of portable grounding
688
689 When installing a portable grounding on a diagram element, select the object from the drop-down list (see Fig. 4.45) and, if necessary, write a comment, then click Install. After installation, left-click on the grounding icon and view its information (see Fig. 4.46), as well as data on groundings installed appear in the technological and operational logs.
690
691 [[image:Screenshot 2025-12-04 at 13.46.24.png]]
692
693 Figure 4.46. Information on the installed portable grounding
694
695 == 4.15. Highlighting lines in diagram view when hovering ==
696
697 In viewing mode, hover backlight behavior for line-type objects (General category) can be configured to respond to mouse pointer events. This setting quickly analyzes the connections between rendered objects on large diagrams. Fig. 4.47 shows an example of connections.
698
699 To set up the line style, press Alt+Shift+D on the keyboard and right-click on any part of the diagram, then select **Convert lines.**  After converting styles, disable this mode with the same key combination.
700
701 [[image:Screenshot 2025-12-04 at 13.47.20.png]]
702
703 Figure 4.47. Highlighting of connected lines
704
705 == 4.16. Outputting numbers in exponential form on the diagram ==
706
707 [[image:Screenshot 2025-12-04 at 13.48.10.png]]
708
709 Figure 4.48. Enabling the exponential form of the number
710
711 The display of the values of the associated parameters in the actions of the rules can be represented in exponential form by enabling the **Exponential form** switch as in Fig. 4.48. The data in diagram viewing mode is to be displayed as shown in Fig. 4.49.
712
713 [[image:Screenshot 2025-12-04 at 13.49.12.png]]
714
715 Figure 4.49. Displaying a number in exponential form
716
717 == 4.17. Dis​​​​​​​​​​​​​​playing delimited values ==
718
719 In the settings [[image:Screenshot 2025-12-04 at 13.50.03.png]] , in diagram view mode, instant tag values can be displayed as delimited values. This setting is enabled by default (see Fig. 4.50).
720
721 [[image:Screenshot 2025-12-04 at 13.50.42.png]]
722
723 Figure 4.50. Displaying delimited values
724
725 == 4.18. Display of data metering on the diagram ==
726
727 Data on metering channels can be displayed on forms in the form of charts, the configuration of which is described in clause 4.8, as well as in the form of values, for example, bindings to tags.
728
729 Fig. 4.51 shows an example of binding the metering channel (power A+) of a device with ID 100063.
730
731 [[image:Screenshot 2025-12-04 at 13.51.42.png]]
732
733 Figure 4.51. Binding the metering channel
734
735 The channel value in the view mode is displayed for the last time interval, see Fig. 4.52.
736
737 [[image:Screenshot 2025-12-04 at 13.52.24.png]]
738
739 Figure 4.52. Value of the metering channel
740
741 Metering channel data can be displayed in tabular form, which is selected from the top horizontal menu by clicking the **Table** icon.
742
743 [[image:Screenshot 2025-12-04 at 13.52.57.png]]
744
745 Figure 4.53. Table
746
747 Fig. 4.53 shows the table. To render it on the diagram, the number of rows, columns, and title (if required) should be selected. To use this template for displaying metering channel values, it needs to be edited by right-clicking and selecting **Table editor **in the menu. Fig. 4.54 shows an example of table configuration, and Fig. 4.55 demonstrates data display in the diagram viewer.
748
749 [[image:Screenshot 2025-12-04 at 14.07.04.png]]
750
751 Figure 4.54. Metering channel binding
752
753 The table in Fig. 4.54 consists of the following sections:
754
755 * **Title** is the table name (optional).
756 * **Number of Rows** is the number of rows where metering data are displayed.
757 * **Row Height **is the row height.
758 * **Polling frequency (s)** is the time interval for updating data in the table, in seconds.
759 * **Interval **is for selection of the data interval (applies to the entire table).
760 * **Function** is data aggregation applied to the entire table.
761 * **ID** specifies the metering channel, which can be entered manually or selected from a drop-down list [[image:Screenshot 2025-12-04 at 14.07.38.png]]
762
763 ----
764
765