Wiki source code of 5. Diagrams Development Manual

Version 209.4 by Iaroslav Platonov on 2026/06/08 09:06

Manage
- Copy
Actions
- Export
- Print Preview
Viewers
- Source
- Children
- Content
- Comments
- Attachments (196)
- Information
- Likes

version	line-number	content
4.2	1	= CONTENT =
	2
205.2	3	{{toc/}}
205.1	4
4.2	5	= 1. INTRODUCTION =
	6
	7	CENTO is a multifunctional software platform for data collection, processing, and display.
	8
	9	The CENTO software allows you to create, edit, and view diagrams without installing additional programs.
	10
	11	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.
	12
	13	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.
	14
5.2	15	= 2. VIEWING DIAGRAMS =
4.2	16
5.2	17	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.
4.2	18
8.2	19	[[image:Screenshot 2025-12-03 at 20.29.25.png]]
5.2	20
8.2	21	Figure 2.1. Diagram with a drop-down list of available diagrams
	22
10.2	23	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.
	24
	25	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.
	26
	27	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).
	28
14.2	29	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"]].
	30
	31	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.
	32
84.2	33	[[image:Screenshot 2025-12-03 at 20.34.06.png\|\|height="80" width="305"]]
14.3	34
	35	The tree structure is sorted in ascending order based on the defined positional indices.
	36
16.2	37	[[image:Screenshot 2025-12-03 at 20.47.15.png]]
	38
	39	The tree structure is organized by folders and additionally sorted in ascending order based on the defined position within each folder.
	40
54.2	41	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.
	42
	43	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.
	44
	45	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.
	46
	47	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.
	48
84.2	49	[[image:Screenshot 2025-12-03 at 20.51.39.png\|\|height="130" width="683"]]
54.2	50
	51	Figure 2.2. Measurements in the debug mode
	52
	53	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"]].
	54
	55	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"]].
	56
	57	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.
	58
209.1	59	[[image:1766339171500-131.png]]
54.2	60
	61	Figure 2.3. Dispatch marks interface
	62
	63	The position of the diagrams and their scale are memorized for each user and device.
	64
	65	The diagram view mode has the functions for:
	66
	67	* switching to the parameter chart when left-clicking its value
	68	* displaying the main parameters of an object when left-clicking it
	69	* displaying the main parameters of an object via the "Measurements" menu when right-clicking it
	70	* remote control of switching devices (if this function is available and the rights are granted)
	71	* viewing a video (if this function is available and the rights are granted)
	72	* installation/removal of dispatcher tags (if this function is available and the rights are granted)
	73	* installation/removal of portable earthing devices (if this function is available and the rights are granted)
	74	* acknowledging events when right-clicking
	75	* viewing events in the operational log.
	76
	77	An example of calling object measurements is shown in Fig. 2.4.
	78
84.2	79	[[image:Screenshot 2025-12-03 at 20.58.29.png\|\|height="329" width="881"]]
54.2	80
	81	Figure 2.4. Calling object measurements
	82
	83	The Measurements drop-down window consists of the following columns:
	84
64.2	85	* 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.
54.2	86	* S is the status of the parameter (tag)
	87	* Name is the name of the parameter (tag)
	88	* Value is the value of the parameter (tag), left-clicking switches to the chart in the real-time data analysis.
	89	* Description displays the description of the parameter value taken from the IM directory
	90	* 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
	91	* The time of the last change
	92	* The time of the last update is the time of the last poll for a tag
	93	* 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.
	94
	95	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.
	96
	97	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.
	98
84.2	99	[[image:Screenshot 2025-12-03 at 21.03.24.png\|\|height="130" width="1434"]]
54.2	100
	101	Figure 2.5. Setpoints
	102
	103	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.
	104
84.2	105	[[image:Screenshot 2025-12-03 at 21.03.57.png\|\|height="317" width="704"]]
54.2	106
	107	Figure 2.6. Setpoint settings
	108
	109	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.
	110
84.2	111	[[image:Screenshot 2025-12-03 at 21.04.36.png\|\|height="206" width="1025"]]
54.2	112
	113	Figure 2.7. Measurements of the IM object
	114
	115	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"]]
	116
	117	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.
	118
84.3	119	[[image:Screenshot 2025-12-03 at 21.06.45.png\|\|height="152" width="1024"]]
54.2	120
	121	Figure 2.8. Highlighting tag values associated with a technology event
	122
	123	= 3. DIAGRAM MANAGEMENT =
	124
	125	== 3.1. Diagram page interface ==
	126
	127	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).
	128
	129	An example of the Diagrams page is shown in Fig. 3.1.
	130
84.3	131	[[image:Screenshot 2025-12-03 at 21.08.33.png\|\|height="199" width="1026"]]
54.2	132
	133	Figure 3.1. Mnemonic diagrams page
	134
	135	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).
	136
84.3	137	[[image:Screenshot 2025-12-03 at 21.09.41.png\|\|height="169" width="569"]]
54.2	138
	139	Figure 3.2. New scheme window
	140
	141	A new diagram appears in the list with its name. The diagram ID is assigned automatically.
	142
	143	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.
	144
	145	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:
	146
84.3	147	[[image:Screenshot 2025-12-03 at 21.14.23.png\|\|height="124" width="370"]]
54.2	148
	149	Figure 3.3. Hiding diagrams in the tree
	150
	151	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:
	152
84.3	153	[[image:Screenshot 2025-12-03 at 21.20.20.png\|\|height="148" width="369"]]
54.2	154
56.2	155	Figure 3.4. Missing tags
55.2	156
56.2	157	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.//
	158
	159	The Position column indicates the sequence number of the diagram displayed in the Active schemes tree of the diagram viewer (see Fig. 2.1).
	160
	161	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).
	162
	163	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.
	164
60.2	165	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).
56.2	166
60.2	167	The diagram added to the drop-down list of the menu is to be displayed regardless of the status set in the Diagrams window.
58.2	168
60.2	169	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.
	170
62.2	171	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.
60.2	172
62.2	173	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.
60.2	174
63.1	175	To download all the diagrams, click the Download button. To upload the downloaded diagram archive, click Upload.
62.2	176
63.1	177	= 4. DIAGRAM EDITOR =
62.2	178
63.1	179	== 4.1. Graphical editor interface. ==
62.3	180
64.2	181	The graphical editor interface is shown in Fig. 4.1
63.1	182
64.2	183	[[image:Screenshot 2025-12-04 at 12.17.41.png]]
	184
	185	Figure 4.1. Editor interface
	186
65.2	187	=== 4.1.1. Main menu ===
64.2	188
65.2	189	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.
	190
83.2	191	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.
65.2	192
83.2	193	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"]].
65.2	194
83.2	195	Clicking on the icon [[image:Screenshot 2025-12-04 at 12.21.03.png\|\|height="26" width="33"]] switches to the diagram view mode.
	196
	197	=== 4.1.2. Toolbar ===
	198
	199	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).
	200
84.3	201	[[image:Screenshot 2025-12-04 at 12.22.13.png\|\|height="720" width="344"]]
83.2	202
	203	Figure 4.2. Graphic templates
	204
	205	=== 4.1.3. Properties panel ===
	206
	207	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).
	208
84.3	209	[[image:Screenshot 2025-12-04 at 12.23.25.png\|\|height="787" width="988"]]
83.2	210
	211	Figure 4.3. Object properties
	212
	213	== 4.2. Binding of parameters: general information ==
	214
84.2	215	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).
83.2	216
84.3	217	[[image:Screenshot 2025-12-04 at 12.24.58.png\|\|height="286" width="893"]]
83.2	218
	219	Figure 4.4. Component visual settings window
	220
	221	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.
	222
	223	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.
	224
	225	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):
	226
	227	~1. Selecting the type of source parameter to use when creating the rule. This can be the tag's value or its status, etc.
	228
	229	2. Selecting the desired parameter from the database or from the information model, a drop-down list appears when clicking More.
	230
	231	3. Entering tag processing formulas.
	232
	233	4. The choice of the logical operator used in the condition, for example, equal if the parameter should be equal to something.
	234
	235	5. Selecting the type of parameter used for comparison.
	236
	237	6. Setting the value with which the source parameter is to be compared (manually or in a drop-down list).
	238
	239	7. Entering tag processing formulas.
	240
	241	8. If there are several conditions in the rule, the user determines in which cases they should call an action.:
	242
	243	* 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);
	244	* 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).
	245
	246	9. To link a no-conditions tag on the diagram, select "no conditions".
	247
	248	10. Delete the condition if necessary.
	249
	250	~11. Comment on the condition (optional).
	251
	252	12. To enable more flexible configuration of component display on the diagram, the rule may include multiple conditions.
	253
	254	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:
	255
	256	13. Binding an action to the component text.
	257
	258	14. Binding an action to the geometry of a component.
	259
	260	15. Binding an action to a component style.
	261
	262	16. Binding an action to an animation (object blinking).
	263
	264	17. Selecting the parameter to edit (determined by the selected binding).
	265
	266	18. Setting the parameter value (manually or in a drop-down list).
	267
	268	19. Text formatting.
	269
	270	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.
	271
	272	21. Output of numbers on the diagram in exponential form.
	273
	274	22. To enable more flexible configuration of component display on the diagram, the rule may include multiple conditions.
	275
	276	To delete unnecessary actions in the rule, click the button [[image:Screenshot 2025-12-04 at 12.29.45.png\|\|height="23" width="24"]].
	277
	278	The Reset current rule button is used to delete all conditions and actions in the selected rule.
	279
	280	To save the changes, click Save.
	281
141.2	282	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.
83.2	283
	284	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.
	285
	286	The Binding an element to a tag or channel tree interface is shown in Fig. 4.5
	287
85.2	288	[[image:Screenshot 2025-12-04 at 12.31.29.png\|\|height="810" width="344"]]
83.2	289
	290	Figure 4.5. Binding an element to a tag or channel interface
	291
	292	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.
	293
	294	When an inactive element on the diagram is selected and the Binding 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.
	295
84.3	296	[[image:Screenshot 2025-12-04 at 12.32.04.png\|\|height="484" width="341"]]
83.2	297
	298	Figure 4.6. Tag and channel tree interface: binding an element to a tag or channel
	299
	300	== 4.3. Adding objects to custom categories ==
	301
	302	Fig. 4.7 shows an example of adding a graphic template to a user category.
	303
85.2	304	[[image:Screenshot 2025-12-04 at 12.33.11.png\|\|height="435" width="831"]]
83.2	305
	306	Figure 4.7. Adding a new component
	307
	308	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).
	309
	310	== 4.4. Importing and exporting a library of elements ==
	311
	312	Element library transfer is only available in diagram editing mode. To transfer the element library from one server to another, perform the following steps:
	313
	314	* 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.
	315
	316	* 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).
	317
	318	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).
	319
85.2	320	[[image:Screenshot 2025-12-04 at 12.35.15.png\|\|height="251" width="479"]]
83.2	321
	322	Figure 4.8. Export library modal window
	323
85.2	324	[[image:Screenshot 2025-12-04 at 12.35.44.png\|\|height="244" width="481"]]
83.2	325
	326	Figure 4.9. Import library modal window
	327
85.2	328	[[image:Screenshot 2025-12-04 at 12.36.09.png\|\|height="122" width="480"]]
83.2	329
	330	Figure 4.10. Imported category
	331
	332	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.
	333
	334	== 4.5. Auto-replace active objects ==
	335
	336	To auto-replace active objects, do the following:
	337
	338	* Create custom categories with objects (see section 4.3).
	339	* 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.
	340
141.2	341	[[image:Screenshot 2025-12-04 at 12.37.31.png\|\|height="422" width="477"]]
83.2	342
	343	Figure 4.11. Replace with another element modal window
	344
	345	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:
	346
	347	[[image:Screenshot 2025-12-04 at 12.38.14.png]]
	348
	349	Figure 4.12. Activation of the Connectable parameter
	350
	351	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.
	352
141.2	353	[[image:Screenshot 2025-12-04 at 13.11.02.png\|\|height="599" width="365"]]
83.2	354
141.2	355	Figure 4.13. Prompt when trying to connect a line to an active object
	356
	357	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.
	358
	359	After elements are automatically selected, the Replace with another element can be used.
	360
	361	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.
	362
205.2	363	[[image:Screenshot 2025-12-04 at 13.11.47.png\|\|height="504" width="369"]]
141.2	364
	365	Figure 4.14. Selecting similar elements is not available
	366
	367	== 4.6. Auto-replace of colors used in diagrams ==
	368
205.2	369	[[image:Screenshot 2025-12-04 at 13.12.37.png\|\|height="408" width="581"]]
141.2	370
	371	Figure 4.15. Color replacement modal window
	372
163.2	373	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.
141.2	374
	375	== 4.7. Setting up an animation frame for technological events associated with a diagram object ==
	376
205.2	377	[[image:Screenshot 2025-12-04 at 13.13.43.png\|\|height="311" width="582"]]
141.2	378
	379	Figure 4.16. Scheme settings modal window
	380
163.2	381	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:
141.2	382
	383	* The frame is the color of the frame
	384	* Border, px is the thickness of the frame
	385	* Offset, px is the indent of the displayed animation frame from the frame of the graphic element
	386	* Animation time, s, is the flashing time in seconds of incoming technological events that are configured without acknowledgment
	387	* Fill is the color of the fill inside the frame
	388	* Opacity, % is the opacity of the fill color inside the frame from 0 to 100%.
	389
	390	== 4.8. Chart settings ==
	391
	392	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.
	393
	394	The default chart template is in a custom category named Charts. To use it, move it to the diagram canvas (see Fig. 4.17).
	395
205.2	396	[[image:Screenshot 2025-12-04 at 13.15.15.png\|\|height="291" width="582"]]
141.2	397
	398	Figure 4.17. Charts object
	399
	400	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.
	401
	402	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.
	403
	404	=== 4.8.1. Charts of current tag values in the template ===
	405
	406	Fig. 4.18 shows an example of configuring the tag value chart display
	407
205.2	408	[[image:Screenshot 2025-12-04 at 13.16.36.png\|\|height="532" width="452"]]
141.2	409
	410	Figure 4.18. Edit data of chart modal window
	411
163.2	412	The Edit data of chart modal window includes the following settings:
141.2	413
	414	* Chart depth
	415	* Round is rounding up values with the number of decimal places.
	416	* 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.
	417	* Y boundaries are the boundaries of the chart display along the Y-axis, optional.
	418	* Grid color is the color of the grid.
	419	* Axis color is the color for the chart axes.
	420	* Background color is the color for the chart background.
	421	* Font Size is the font size.
	422	* Font color is the color for the font.
	423	* Date format is DD MMM YYYY (day, month, year). DD.MM .YY HH:mm:ss (day, month, year, hours, minutes, seconds).
	424
	425	When filling in the chart settings, the data is displayed as shown below:
	426
205.2	427	[[image:Screenshot 2025-12-04 at 13.18.01.png\|\|height="269" width="559"]]
141.2	428
	429	Figure 4.19. Chart in the diagram viewer
	430
163.2	431	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.
141.2	432
	433	=== 4.8.2. Charts of tag values selected on the diagram ===
	434
205.2	435	[[image:Screenshot 2025-12-04 at 13.18.57.png\|\|height="599" width="559"]]
141.2	436
	437	Figure 4.20. Edit the data of the chart
	438
	439	To plot a chart for any selected tag on the diagram, configure the fields as shown in Fig. 4.20:
	440
	441	* Left border along X,
	442	* Y boundaries,
	443	* Grid color,
	444	* Axis color,
	445	* Background color,
	446	* Font size,
	447	* Font color,
	448	* Date format.
	449
	450	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).
	451
205.2	452	[[image:Screenshot 2025-12-04 at 13.19.47.png\|\|height="257" width="551"]]
141.2	453
	454	Figure 4.21. Chart in the diagram viewer
	455
	456	=== 4.8.3. Displaying future data on charts ===
	457
205.3	458	[[image:Screenshot 2025-12-04 at 13.20.34.png\|\|height="502" width="386"]]
141.2	459
	460	Figure 4.22. Edit the data of the chart
	461
	462	Configuring charts for future data is similar to the previous steps.
	463
	464	The difference lies in an additional field for metering channels, as shown in Fig. 4.2.2, where:
	465
	466	* The right border along X displays future data; if no values are specified, the data for the current time is shown.
	467
	468	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).
	469
	470	This data, displayed on the charts, enables forecasting, comparing planned vs. actual performance at the enterprise, and similar analyses.
	471
205.3	472	[[image:Screenshot 2025-12-04 at 13.21.50.png\|\|height="262" width="548"]]
141.2	473
	474	Figure 4.23. Forecasting chart
	475
	476	== 4.9. Setting up level indicators ==
	477
205.3	478	[[image:Screenshot 2025-12-04 at 13.23.18.png\|\|height="309" width="333"]]
141.2	479
	480	Figure 4.24. Water level parameter output
	481
	482	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.
	483
	484	To configure this function:
	485
	486	* Draw a suitable object, a rectangle, for example
	487	* Click on the Setting up rules icon [[image:Screenshot 2025-12-04 at 13.24.08.png\|\|height="20" width="24"]]
163.2	488	* 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.
141.2	489
205.3	490	[[image:Screenshot 2025-12-04 at 13.24.38.png\|\|height="186" width="634"]]
141.2	491
	492	Figure 4.25. Setting the fill depending on the values
	493
	494	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:
	495
163.2	496	1. In step #1, select the Style tab.
141.2	497	1. In the suggested menu, select the option Fill depending on the values.
	498	1. Select the tag/attribute name from the drop-down list.
	499	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.
	500	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.
	501	1. Specify the minimum/maximum value of the scale for filling.
	502	1. Select the background color.
	503	1. Select the fill color of the area to be changed dynamically.
	504	1. Select the fill direction: vertically or horizontally.
	505
	506	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.
	507
	508	== 4.10. Properties of active objects ==
	509
	510	Each created active diagram object has properties that affect various display functions in the viewing mode.
	511
	512	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.
	513
205.3	514	[[image:Screenshot 2025-12-04 at 13.26.04.png\|\|height="361" width="873"]]
141.2	515
	516	Figure 4.26. Edit the data of the element
	517
	518	* Disabling context menus allows selecting items that should be excluded from the context menu of the active object in the diagram viewer.
	519	* Opening with a left-click allows opening selected menu items with a left-click.
	520	* Disable blinking of events for IM objects disables the flashing frame around the active object when the event is triggered.
	521	* Disable context menus, posters, and animations disables the following:
	522
	523	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.
163.2	524	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.
	525	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.
141.2	526
205.3	527	[[image:Screenshot 2025-12-04 at 13.27.06.png\|\|height="376" width="875"]]
141.2	528
	529	Figure 4. 27. Disabling context menus, posters, and animations attribute
	530
	531	* 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.
	532	* 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.
	533
205.3	534	[[image:Screenshot 2025-12-04 at 13.28.03.png\|\|height="232" width="328"]]
141.2	535
	536	Figure 4.28. Highlighting of an active element of the diagram
	537
	538	* 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"]].
	539
205.3	540	[[image:Screenshot 2025-12-04 at 13.29.40.png\|\|height="225" width="329"]]
141.2	541
	542	Figure 4.29. Highlighting and hiding the active element of the diagram
	543
	544	* 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.
	545	* The label does not require filling in.
	546	* Element ID is an object binding to the IM.
	547	* Poster position can be vertical or horizontal, should be selected from the drop-down list.
	548	* X-indent indicates the X-axis coordinate. When moving the image near the active object, this coordinate is to be written automatically.
	549	* Y-indent indicates the Y-axis coordinate. When moving the image near the active object, this coordinate is to be written automatically.
	550	* The add attribute button allows adding additional properties to an object.
	551
	552	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.
	553
205.3	554	[[image:Screenshot 2025-12-04 at 13.30.35.png\|\|height="333" width="328"]]
141.2	555
	556	Figure 4.30. Changing the view of the measurement table
	557
	558	== 4.11. Simplified manual input from a diagram ==
	559
	560	In diagrams, tag values can be entered manually not only in the measurement window but also in separately drawn objects.
	561
	562	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).
	563
205.3	564	[[image:Screenshot 2025-12-04 at 13.31.44.png\|\|height="335" width="661"]]
141.2	565
	566	Figure 4.31. Manual input object
	567
	568	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.
	569
205.4	570	[[image:Screenshot 2025-12-04 at 13.32.15.png\|\|height="221" width="488"]]
141.2	571
	572	Figure 4.32. Editing the manual input window
	573
	574	Fig. 4.32 shows the Editing manual input modal window, which includes the following settings:
	575
	576	* Tag drop-down list for selecting a binding to a tag or IM attribute;
	577	* Tag ID drop-down list for binding to the tag ID or to the IM object, and its attribute.
	578
205.4	579	[[image:Screenshot 2025-12-04 at 13.32.50.png\|\|height="346" width="492"]]
141.2	580
	581	Figure 4.33. Binding the tag to the manual input object
	582
205.4	583	[[image:Screenshot 2025-12-04 at 13.33.15.png\|\|height="354" width="492"]]
141.2	584
	585	Figure 4.34. Binding to the attribute of the IM object
	586
	587	Figs. 4.33 and 4.34 show examples of binding, which, when viewed in the diagram, appear as shown in Fig. 4.35.
	588
205.4	589	[[image:Screenshot 2025-12-04 at 13.33.48.png\|\|height="236" width="490"]]
141.2	590
	591	Figure 4.35. Viewing a diagram with manual input objects
	592
162.1	593	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"]].
141.2	594
	595	== 4.12. Input of fixed manual entry values ==
	596
	597	The diagrams support manual input of tag values not only through the measurements window but also directly from separately rendered objects within the diagrams.
	598
	599	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.
	600
	601	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.
	602
	603	[[image:Screenshot 2025-12-04 at 13.36.08.png]]
	604
	605	Figure 4.36. Manual input button configuration
	606
	607	Fig. 4.36 shows an example of manual input configuration for a tag with ID 9001, where:
	608
163.2	609	* 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.
141.2	610	* Action selects from a drop-down list: either manual input or cancellation of manual input.
	611	* Value specifies the value to be assigned to the tag when the diagram button is pressed.
	612	* 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.
	613	* Add tag allows specifying multiple tags for manual input, with the option to set different values for each tag.
	614
	615	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.
	616
205.4	617	[[image:Screenshot 2025-12-04 at 13.38.45.png\|\|height="220" width="577"]]
141.2	618
	619	Figure 4.37. Manual input value button
	620
	621	== 4.13. Links to external sources of information/to a local server, as well as to other diagrams. ==
	622
205.4	623	[[image:Screenshot 2025-12-04 at 13.39.27.png\|\|height="267" width="954"]]
141.2	624
	625	Figure 4.38. Adding links
	626
	627	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.
	628
	629	1) Links from one diagram to another, as well as to external information sources
	630
	631	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.
	632
	633	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.
	634
	635	The configured link can be opened in the new tab, in the current tab, as well as over the mnemonic scheme.
	636
	637	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.
	638
205.4	639	[[image:Screenshot 2025-12-04 at 13.40.17.png\|\|height="406" width="929"]]
141.2	640
	641	Figure 4.39. Clicking on a link over the mnemonic scheme
	642
	643	2) Links to files on the local server
	644
	645	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).
	646
	647	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.
	648
	649	3) Links for navigation to Real-Time Data Analysis
	650
163.2	651	To navigate to Metering data or Real-time data 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.
141.2	652
	653	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"]].
	654
205.4	655	[[image:Screenshot 2025-12-04 at 13.42.18.png\|\|height="499" width="925"]]
141.2	656
	657	Figure 4.40. Tag selection window in Real-time data analysis
	658
	659	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.
	660
205.5	661	[[image:Screenshot 2025-12-04 at 13.42.58.png\|\|height="43" width="560"]]
141.2	662
	663	Figure 4.41. Link in Real-time data analysis
	664
205.5	665	[[image:Screenshot 2025-12-04 at 13.43.35.png\|\|height="472" width="926"]]
141.2	666
	667	Figure 4.42. Opening the Link in Real-time data analysis over the diagram
	668
	669	Fig. 4.42 shows an example of opening the charts configured in Fig. 4.40.
	670
	671	The configuration of links for metering channels in Analysis of data metering is like the described above.
	672
	673	== 4.14. Installing portable grounding on diagrams ==
	674
	675	The portable grounding is enabled in Settings > Diagrams > Edit > Extras > Scheme settings (see Fig. 4.43).
	676
205.5	677	[[image:Screenshot 2025-12-04 at 13.44.28.png\|\|height="506" width="922"]]
141.2	678
	679	Figure 4.43. Enabling portable grounding
	680
173.2	681	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.
141.2	682
205.5	683	[[image:Screenshot 2025-12-04 at 13.45.24.png\|\|height="197" width="311"]]
141.2	684
	685	Figure 4.44. Portable grounding settings
	686
205.5	687	[[image:Screenshot 2025-12-04 at 13.45.53.png\|\|height="228" width="416"]]
141.2	688
	689	Figure 4.45. Installation of portable grounding
	690
	691	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.
	692
205.5	693	[[image:Screenshot 2025-12-04 at 13.46.24.png\|\|height="91" width="413"]]
141.2	694
	695	Figure 4.46. Information on the installed portable grounding
	696
	697	== 4.15. Highlighting lines in diagram view when hovering ==
	698
	699	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.
	700
	701	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.
	702
205.5	703	[[image:Screenshot 2025-12-04 at 13.47.20.png\|\|height="434" width="452"]]
141.2	704
	705	Figure 4.47. Highlighting of connected lines
	706
	707	== 4.16. Outputting numbers in exponential form on the diagram ==
	708
205.6	709	[[image:Screenshot 2025-12-04 at 13.48.10.png\|\|height="303" width="987"]]
141.2	710
	711	Figure 4.48. Enabling the exponential form of the number
	712
	713	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.
	714
205.5	715	[[image:Screenshot 2025-12-04 at 13.49.12.png\|\|height="48" width="162"]]
141.2	716
	717	Figure 4.49. Displaying a number in exponential form
	718
204.1	719	== 4.17. Displaying delimited values ==
141.2	720
	721	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).
	722
205.5	723	[[image:Screenshot 2025-12-04 at 13.50.42.png\|\|height="358" width="379"]]
141.2	724
	725	Figure 4.50. Displaying delimited values
	726
	727	== 4.18. Display of data metering on the diagram ==
	728
	729	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.
	730
	731	Fig. 4.51 shows an example of binding the metering channel (power A+) of a device with ID 100063.
	732
205.6	733	[[image:Screenshot 2025-12-04 at 13.51.42.png\|\|height="278" width="987"]]
141.2	734
	735	Figure 4.51. Binding the metering channel
	736
	737	The channel value in the view mode is displayed for the last time interval, see Fig. 4.52.
	738
205.6	739	[[image:Screenshot 2025-12-04 at 13.52.24.png\|\|height="607" width="539"]]
141.2	740
	741	Figure 4.52. Value of the metering channel
	742
	743	Metering channel data can be displayed in tabular form, which is selected from the top horizontal menu by clicking the Table icon.
	744
205.6	745	[[image:Screenshot 2025-12-04 at 13.52.57.png\|\|height="279" width="173"]]
141.2	746
	747	Figure 4.53. Table
	748
	749	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.
	750
205.6	751	[[image:Screenshot 2025-12-04 at 14.07.04.png\|\|height="302" width="902"]]
143.2	752
	753	Figure 4.54. Metering channel binding
	754
	755	The table in Fig. 4.54 consists of the following sections:
	756
	757	* Title is the table name (optional).
	758	* Number of Rows is the number of rows where metering data are displayed.
	759	* Row Height is the row height.
	760	* Polling frequency (s) is the time interval for updating data in the table, in seconds.
	761	* Interval is for selection of the data interval (applies to the entire table).
	762	* Function is data aggregation applied to the entire table.
162.1	763	* 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\|\|height="26" width="27"]]
	764	* Name is the column name corresponding to the metering channel.
	765	* Width is the column width.
	766	* Change time is a system field used to display the time of the metering channel's value change.
143.2	767
205.6	768	Rows in this table can be moved [[image:Screenshot 2025-12-04 at 14.08.30.png]], deleted [[image:Screenshot 2025-12-04 at 14.09.56.png\|\|height="32" width="33"]], and added [[image:Screenshot 2025-12-04 at 14.10.25.png\|\|height="31" width="89"]]
162.1	769
205.6	770	[[image:Screenshot 2025-12-04 at 14.10.47.png\|\|height="322" width="637"]]
162.1	771
	772	Figure 4.55. Display of metering channel data
	773
	774	Fig. 4.55 shows the table in the diagram viewer using the settings from Fig. 4.54. Line formatting for the data is applied according to the table header.
	775
	776	== 4.19. Heatmaps ==
	777
	778	Heatmap functionality is accessible only with an active license for the corresponding module.
	779
	780	The graphic element templates contain the Sensor element (see Fig. 4.56), which is responsible for filling areas of the diagram depending on any tag values.
	781
	782	[[image:Screenshot 2025-12-04 at 14.11.51.png\|\|height="72" width="83"]]
	783
	784	Figure 4.56. Sensor graphic element
	785
	786	On the objects of the diagram, place such images and, in the window with the bindings of the rules [[image:Screenshot 2025-12-04 at 14.12.20.png\|\|height="22" width="26"]]in the actions, specify the ID of the tag, which changes the color (for example, see Fig. 4.57).
	787
	788	Images need to be placed on the diagram objects, and in the Component visual settings window [[image:Screenshot 2025-12-04 at 14.12.20.png\|\|height="22" width="26"]], the tag ID should be specified in the actions, which triggers the color change upon tag value modification (see example in Fig. 4.57).
	789
205.6	790	[[image:Screenshot 2025-12-04 at 14.13.22.png\|\|height="560" width="742"]]
162.1	791
	792	Figure 4.57. Binding to the tag ID
	793
	794	After arranging and binding such sensors, select those elements (might be selected together with other graphic objects), the area inside which changes colors according to changes in the linked tags in the rules. Then click Create heatmap (see Fig. 4.58).
	795
205.6	796	[[image:Screenshot 2025-12-04 at 14.13.52.png\|\|height="713" width="455"]]
162.1	797
	798	Figure 4.58. Create heatmap
	799
	800	The created heatmap can be edited by right-clicking on the Heatmap properties (see Fig. 4.56). The modal window specifies the high and low limits, the normal value, the gamma (the range of colors for building a heatmap), the power parameter (the temperature for building transitions between temperatures), and the ability to display only those points that exceed the temperature in normal mode, see Fig. 4.60.
	801
205.6	802	[[image:Screenshot 2025-12-04 at 14.14.27.png\|\|height="594" width="448"]]
162.1	803
	804	Figure 4.59. Editing heatmap properties
	805
205.6	806	[[image:Screenshot 2025-12-04 at 14.14.52.png\|\|height="442" width="853"]]
162.1	807
	808	Figure 4.60. Heatmap
	809
	810	== 4.20. Layers ==
	811
	812	In editing mode, to optimize work with large diagrams, individual sections of the diagram can be placed in layers that do not affect operation in viewing mode.
	813
	814	To switch to the layer mode, go to the View > Layers in the upper horizontal menu (Ctrl+Shift+L).
	815
205.6	816	[[image:Screenshot 2025-12-04 at 14.15.37.png\|\|height="412" width="405"]]
162.1	817
	818	Figure 4.61. Layers menu
	819
	820	Fig. 4.61 shows an example of a list of layers where:
	821
	822	1. Add layer is used to add a part of the diagram to the layer with the name.
	823	1. Duplicating the selected layer in the list.
	824	1. It is used to move diagram elements from one layer to another.
	825	1. The layer removal button.
	826	1. To disable or enable the parts of the diagram included in a specific layer. Moreover, disabling the layer does not affect the display in viewing mode, but only speeds up editing.
	827	1. Blocking changes to a layer from the list.
	828	1. Foreground/background of the layer.
	829
205.1	830	== 4.21. Active SVG elements ==
162.1	831
	832	The diagram editor allows importing graphic element templates in SVG format from various sources. Developed animated images from external sources help optimize work in both view and edit modes of the diagram (see Section 4.22.1). They also enable monitoring technological processes with the ability to view moving and rotating objects on the diagram (see Section 4.22.2).
	833
	834	=== 4.21.1. Active SVG elements to speed up the opening and editing of the diagram ===
	835
	836	In editing mode, to optimize work with large diagrams, active elements in SVG format can be loaded. Such elements are created by software developers. The approach is in using a ready-made template for the active element specifying in the rules only the tag/attribute that is responsible for a particular action. Any graphic elements can be modified using a program that supports the SVG format, or directly by editing the file’s code.
	837
	838	The loading of items is in the Extras menu item (see Fig. 4.62).
	839
205.6	840	[[image:Screenshot 2025-12-04 at 14.17.19.png\|\|height="508" width="326"]]
162.1	841
	842	Figure 4.62. Import animated SVGs
	843
	844	Ready-made templates should be uploaded to the Import animated SVGs menu (see Fig. 4.63).
	845
205.7	846	[[image:Screenshot 2025-12-04 at 14.17.47.png\|\|height="156" width="322"]]
162.1	847
	848	Figure 4.63. Import animated SVGs
	849
	850	The template uploaded in Fig. 4.64 replaces drawing of many graphic elements created in the diagram editor.
	851
205.7	852	[[image:Screenshot 2025-12-04 at 14.18.12.png\|\|height="224" width="325"]]
162.1	853
	854	Figure 4.64. Animated SVG
	855
	856	For example, it is necessary to display the status of a discrete signal (switch position), as shown in Fig. 4.65. In case of developing diagrams in the editor, it is necessary to draw all the sticks and text forms separately (see Fig. 4.66) and describe each state in the rules.
	857
205.7	858	[[image:Screenshot 2025-12-04 at 14.18.44.png\|\|height="370" width="226"]]
162.1	859
	860	Figure 4.65. Legend for the position of the switch
	861
205.7	862	[[image:Screenshot 2025-12-04 at 14.19.10.png\|\|height="167" width="224"]]
162.1	863
	864	Figure 4.66. Graphic elements
	865
	866	In case of using an .svg file, these states are written inside the code and after importing them into the editor, the user cannot visually track them in any way. After importing the file, configure the rules in the actions of which the Status field appears (see Fig. 4.67) with the selection of a specific state, depending on the conditions described in the rule.
	867
	868	[[image:Screenshot 2025-12-04 at 14.19.47.png]]
	869
	870	Figure 4.67. Rules for animated SVG
	871
	872	The code of the animated element is shown below:
	873
54.2	874	----
	875
162.1	876	<svg xmlns="http:~/~/www.w3.org/2000/svg" viewBox="0 0 80 80" width="80" height="80"
	877
	878	data-states='{"On":{"~-~-background":"#d50404","~-~-border":"var(~-~-main)"},
	879
	880	"Off":{"~-~-background":"#0f0","~-~-border":"var(~-~-main)"},
	881
	882	"Error/Intermediate":{"~-~-background":"#fff","~-~-border":"var(~-~-main)"},
	883
	884	"WE are exhausted":{"~-~-background":"#00f","~-~-border":"var(~-~-main)"},
	885
	886	"n/a":{"~-~-background":"transparent","~-~-border":"#000"}}'>
	887
	888	<rect style="fill:var(~-~-background,transparent);stroke:var(~-~-border,var(~-~-main,#000));stroke-width:6;" height="80" width="80" />
	889
	890	</svg>
	891
	892	----
	893
	894	=== 4.21.2. Animated SVG ===
	895
	896	If proficiency in CSS or SVG code is available, an animated SVG template can be independently developed based on the example provided in Section 4.21.1, along with the application of various animations for technological processes.
	897
	898	Fig. 4.68 shows an example of graphic elements with various animated styles configured through an SVG file. This animation is imported into the menu, as shown in Fig. 4.62, and in the mnemonic diagram editor, it appears as an image where only the size can be adjusted; all other edits are made within the template from the external source (such as Inkscape, Figma, etc.).
	899
205.7	900	[[image:Screenshot 2025-12-04 at 14.21.36.png\|\|height="439" width="665"]]
162.1	901
	902	Figure 4.68. Animated Image
	903
	904	Each element created, for example, Inkscape has a group, and each group has its own animation settings.
	905
	906	For example, in Fig. 4.68, a grouped element is rendered, which needs to be moved up or down. The animation code for it would look as follows:
	907
	908	----
	909
	910	<animateTransform
	911
	912	attributeName="transform"
	913
	914	attributeType="XML"
	915
	916	type="rotate"
	917
	918	values="360 85 83; 310 85 83; 360 85 83"
	919
	920	keySplines="1 .9 .1 0 ; 0 .1 .9 1"
	921
	922	dur="4s"
	923
	924	repeatCount="indefinite" />
	925
	926	----
	927
	928	If the object needs to rotate around an axis (see Fig. 4.68), the example code for rotating counterclockwise would look like this:
	929
	930	----
	931
	932	<animateTransform
	933
	934	attributeName="transform"
	935
	936	attributeType="XML"
	937
	938	type="rotate"
	939
	940	values="0 117.36 311.98; 360 117.36 311.98"
	941
	942	begin = "-3.1s"
	943
	944	dur="4s"
	945
	946	repeatCount="indefinite" />
	947
	948	----
	949
	950	For clockwise rotation, the example code would look like this:
	951
	952	----
	953
	954	<animateTransform
	955
	956	attributeName="transform"
	957
	958	attributeType="XML"
	959
	960
	961	type="rotate"
	962
	963	from="0 112.36 251.98"
	964
	965	to="360 112.36 251.98"
	966
	967	dur="3s"
	968
	969	repeatCount="indefinite" />
	970
	971	----
	972
	973	The coordinates values/from/to depend on the initial position of the graphic element. The smaller the time value (dur), the more frequently the graphic element moves.
	974
	975	Thus, by knowing the SVG and CSS code, any animations can be imported into the diagram editor.
	976
163.2	977	== 4.22. Conversion of diagrams from version 2 of the editor to version 3 ==
162.1	978
169.2	979	For compatibility of the version 3 of the editor with the version 2, diagrams should be converted. To do this, type Alt+Shift+D on the keyboard. A version selection appears in the horizontal menu to the right of the Open in viewer button [[image:Screenshot 2025-12-04 at 14.24.51.png\|\|height="24" width="29"]]. From the drop-down list, click version 3. After clicking, a message pops up in the upper-right corner, which warns about switching to the editor version 3 after clicking Unsaved changes. Click here to save see Fig. 4.69.
163.2	980
169.2	981	[[image:Screenshot 2025-12-04 at 14.25.20.png]]
	982
	983	Figure 4.69. Warning about switching to the editor version 3
	984
179.2	985	After saving, the system switches to the version 3 editor, and the page URL changes to /CENTO/web/ui/diagram_editor/. Next, press the Alt+Shift+D keyboard combination to hide the version selection menu. After converting, select the entire diagram and click on any of the selected objects. In the context menu, click on Convert styles and on one of the items Convert active elements with stroke or Convert active elements without stroke, depending on the features of the rendered objects. The selection of the item can be verified using the diagram viewer. Without closing a converted diagram, click Unsaved change. Click here to save, and then open the same diagram on another page in the viewer, all elements should look the same as on the original diagram in the editor version 2, if this is not the case, then on the page with the diagram where the conversion was performed, undo the last actions and select another item and check again in the viewer.
169.2	986
	987	If the diagram is closed with the wrong conversion option, it cannot be reverted. Restoring requires a copy of the diagram from the editor version 2.
	988
	989	== 4.23. Display of the IM object name and the tag measurement units ==
	990
205.7	991	[[image:Screenshot 2025-12-04 at 14.26.29.png\|\|height="304" width="741"]]
169.2	992
	993	Figure 4.70. Options for displaying tag data
	994
	995	Diagrams allow displaying not only the tag value but also its value along with the units of measurement, the units of measurement without the tag value, the name of the IM object, and the IM object code.
	996
179.2	997	To configure this, in the Component visual settings window, by clicking on the upper horizontal menu [[image:Screenshot 2025-12-04 at 14.26.56.png\|\|height="26" width="27"]], actions are selected on the Text tab, specifically IM measurement (see Fig. 4.71) or IM object (see Fig. 4.72).
169.2	998
205.7	999	[[image:Screenshot 2025-12-04 at 14.27.28.png\|\|height="290" width="740"]]
169.2	1000
	1001	Figure 4.71. IM measurement
	1002
205.7	1003	[[image:Screenshot 2025-12-04 at 14.27.52.png\|\|height="282" width="723"]]
169.2	1004
	1005	Figure 4.72. IM object
	1006
171.2	1007	To display tag values, tag values with units of measurement, or units of measurement only, select IM Measurement in Actions and choose the IM class attribute from the drop-down list [[image:Screenshot 2025-12-04 at 14.28.24.png\|\|height="25" width="26"]].
169.2	1008
171.2	1009	Examples of such value displays are shown in Fig. 4.70, numbers 1, 2, and 3.
	1010
	1011	To display the name of the IM object and its code, select IM Object in Actions and choose the appropriate menu from the drop-down list. Examples of such value displays are shown in Fig. 4.70 under numbers 4, 5, and 6.
	1012
	1013	To display the name of the object trimmings unnecessary characters, use the formula in Actions:
	1014
205.7	1015	[[image:Screenshot 2025-12-04 at 14.30.16.png\|\|height="315" width="746"]]
171.2	1016
	1017	Figure 4.73. IM object name with split characters
	1018
	1019	Fig. 4.73 shows an example of configuring the display of the IM object name with split characters using the formula split(val, " ", 1), where the value is split by the delimiter space, thus removing the first word from the phrase. An example of this display is shown in Fig. 4.70 under number 5. This formula can also be used to display part of the IM object code.
	1020
173.2	1021	Since the rules reference the attributes of the IM (industrial object), in all the examples above, create an active object by right-clicking (1) and bind it in the IM tree [[image:Screenshot 2025-12-04 at 14.31.14.png\|\|height="29" width="30"]] (2) to an object (3), as shown in Fig. 4.74. The data for the bound object is to be displayed in view mode as shown in Fig. 4.70.
171.2	1022
205.7	1023	[[image:Screenshot 2025-12-04 at 14.31.50.png\|\|height="456" width="743"]]
173.2	1024
	1025	Figure 4.74. Creating and binding to an IM object
	1026
177.1	1027	== 4.24. Uploading/downloading diagrams ==
	1028
	1029	Uploading and downloading diagrams are available on the Mnemonic diagrams page, in the Actions column.
	1030
205.8	1031	[[image:Screenshot 2025-12-04 at 14.32.48.png\|\|height="166" width="742"]]
177.1	1032
	1033	Figure 4.75. Mnemonic diagrams page
	1034
	1035	The button [[image:Screenshot 2025-12-04 at 14.33.20.png\|\|height="25" width="26"]] uploads the diagram in an archive depending on the diagram version. If the diagram was in the version 2 of the editor, it is to be uploaded in the same version.
	1036
	1037	The button [[image:Screenshot 2025-12-04 at 14.33.51.png\|\|height="27" width="28"]] downloads the diagram in an archive depending on the diagram version. If the diagram was in version 3 of the editor, it is to be uploaded in the same version.
	1038
	1039	The Download button allows downloading all the diagrams to one archive.
	1040
	1041	The Upload button allows uploading all the diagrams from one previously downloaded archive. This allows diagrams to migrate from one server to another.
	1042
205.8	1043	= 5. BINDING TAGS TO THE DIAGRAM USING ID OR CODE =
177.1	1044
179.2	1045	Example No. 1
	1046
	1047	An example of binding a real parameter taken from a database that outputs information as a numeric value on a diagram.
	1048
	1049	Select the text on the diagram, which is to be a dynamic parameter, and open the window [[image:Screenshot 2025-12-04 at 14.39.54.png\|\|height="28" width="29"]].
	1050
205.1	1051	In the rule, check the box next to the words Without conditions (1) (optional) and describe the first action. Mark the Text field, select the Tag parameter type (2) and write, for example, the ID=502001 (3) number from the database (or select it from the drop-down list (4) see Fig. 5.2), if it is necessary to round the values, enable rounding (5) and specify how many decimal places should be displayed. It is possible to format the text in the actions of the rules (6) (see Fig. 5.3), as well as output the value of the number in exponential form (7). Click Save, switch to the diagram [[image:Screenshot 2025-12-04 at 14.40.43.png\|\|height="24" width="31"]]viewing mode and see the result (see Fig. 5.4).
179.2	1052
205.8	1053	[[image:Screenshot 2025-12-04 at 14.41.18.png\|\|height="337" width="925"]]
181.2	1054
	1055	Figure 5.1. Binding to the text
	1056
204.1	1057	To quickly bind to a tag, the Component visual settings window can be skipped by using the Bind an element to a tag or channel tree [[image:Screenshot 2025-12-04 at 14.41.48.png\|\|height="25" width="25"]]. This automatically fills the tag, see Fig. 5.1.
181.2	1058
205.8	1059	[[image:Screenshot 2025-12-04 at 14.42.21.png\|\|height="427" width="927"]]
204.1	1060
	1061	Figure 5.2. Choose the parameter drop-down list
	1062
205.8	1063	[[image:Screenshot 2025-12-04 at 14.42.51.png\|\|height="197" width="410"]]
204.1	1064
	1065	Figure 5.3. Formatting the text in the rules
	1066
205.8	1067	[[image:Screenshot 2025-12-04 at 14.43.17.png\|\|height="197" width="921"]]
204.1	1068
	1069	Figure 5.4. Tag value in the view mode
	1070
	1071	The tag settings include a field not only for the ID number but also for specifying a code that can be used when binding to the diagram. To do this, in Fig. 5.1, field No. 3, enter the tag code instead of its ID.
	1072
	1073	In the viewing mode in Fig. 5.4 there is no difference in the display in this case.
	1074
	1075	Example No. 2
	1076
	1077	An example of binding a real parameter taken from a database, which outputs information on a diagram in the form of a dynamic element that changes color depending on the incoming value and the status of the parameter.
	1078
	1079	CENTO receives various tag statuses:
	1080
	1081	[[image:Screenshot 2025-12-04 at 14.44.04.png\|\|height="421" width="343"]]
	1082
	1083	Figure 5.5. Tag statuses
	1084
	1085	For example, two statuses can be used: when the telemeasurment TI value is received in real time (i.e., 1 – Normal), and when the telemeasurment TI value is entered manually by the user (i.e., 4 – Manual input).
	1086
	1087	Real parameter data for binding:
	1088
206.1	1089	\|ID number\|(% style="width:359px" %)Parameter name\|(% style="width:378px" %)Values\|Decryption
	1090	\|10154\|(% style="width:359px" %)Emergency alarm (EA)\|(% style="width:378px" %)0/1\|(((
204.1	1091	normal/
	1092
	1093	trigerring
	1094	)))
	1095
	1096	Create a rectangle (with or without fill) and write the text //AC// inside the stroke.
	1097
	1098	This element changes the background color depending on the incoming value and the status of the parameter, if the condition TI=0 is met, then the color is green, if the condition TI=1 is met, then the color is red, if there is no data, then the color is white (see Fig. 5.6).
	1099
206.1	1100	[[image:Screenshot 2025-12-04 at 14.45.25.png\|\|height="405" width="486"]]
204.1	1101
	1102	Figure 5.6. Color changing in a dynamic element
	1103
	1104	To do this, select the created rectangle with left-clicking and open the bindings window [[image:Screenshot 2025-12-04 at 14.45.55.png\|\|height="25" width="28"]]
	1105
	1106	Create the following rules:
	1107
	1108	Rule No. 1 (fill in green with the value of TI = 0):
	1109
	1110	If the TI value is 0 (normal), then the background is green (see Fig. 5.7).
	1111
	1112	Rule No. 2 (fill in red with the value of TI = 1):
	1113
	1114	If the TI value is 1 (signal available, then the background is red (see Fig. 5.8).
	1115
	1116	Rule No. 3 (fill in white when the T is not equal to 0 and not equal to 1):
	1117
	1118	If the TI value is not equal to 0 and at the same time the TI value is not equal to 1, then the background is white (see Fig. 5.9).
	1119
	1120	Rule No. 4 (fill in white if the status is not normal and not with manual input):
	1121
	1122	If the TI status is not equal to 1 (normal) and at the same time the TI status is not equal to 4 (not manual input), then the background is white (see Fig. 5.10).
	1123
	1124	[[image:Screenshot 2025-12-04 at 14.46.37.png]]
	1125
	1126	Figure 5.7. Rule No. 1
	1127
	1128	[[image:Screenshot 2025-12-04 at 14.46.57.png]]
	1129
	1130	Figure 5.8. Rule No. 2
	1131
	1132	[[image:Screenshot 2025-12-04 at 14.47.27.png]]
	1133
	1134	Figure 5.9. Rule No. 3
	1135
	1136	[[image:Screenshot 2025-12-04 at 14.47.57.png]]
	1137
	1138	Figure 5.10. Rule No. 4
	1139
	1140	== 5.2. Binding devices to the diagram ==
	1141
	1142	There are several device status values:
	1143
	1144	0 – Disabled,
	1145
	1146	1 – Normal,
	1147
	1148	2 – Device has data errors,
	1149
	1150	3 – Device is unavailable,
	1151
	1152	4 – Data with manual input available,
	1153
	1154	7 – Waiting for data,
	1155
	1156	9 – Status is missing.
	1157
205.1	1158	The device is bound to the diagram by selecting Device status from the menu item. The content of the rules is similar to the example described above with changing the color of an object (in the Condition field, select the desired type of parameter, specify the device address, specify the operator and enter a numeric value equal to one or another status, and then specify the Action to be applied to the condition being fulfilled, for example, see Fig. 5.11).
204.1	1159
	1160	[[image:Screenshot 2025-12-04 at 14.49.03.png]]
	1161
	1162	Figure 5.11. Binding to the device status
	1163
	1164	Additionally, when using a template with a set of rules, device binding can be performed through the device tree by clicking on [[image:Screenshot 2025-12-04 at 14.49.33.png\|\|height="24" width="25"]]. This automatically fills in the device ID fields shown in Fig. 5.11 streamlining the debugging process without opening the rules window.
	1165
	1166	== 5.3. Binding parameters to information model objects ==
	1167
	1168	To create an information model, see the "Information model setup manual".
	1169
	1170	For example, create a square element (to serve as a switch) and describe the rules for it. In this example, the square changes the background color depending on the incoming parameter of the information model object, which refers to the value from the CENTO database.
	1171
205.1	1172	The sequence of bindings to the parameters of an information model object is like the actions for binding to tags: instead of Tag value and Tag status, select the IM attribute and IM parameter status, see Fig. 5.12.
204.1	1173
	1174	[[image:Screenshot 2025-12-04 at 14.50.40.png]]
	1175
	1176	Figure 5.12. Binding to the parameter of the information model object
	1177
	1178	In this example, the address of the parameter is the information model class, and its attribute is selected when opening the drop-down list [[image:Screenshot 2025-12-04 at 14.51.19.png\|\|height="35" width="28"]], see Fig. 5.13.
	1179
206.1	1180	[[image:Screenshot 2025-12-04 at 14.51.50.png\|\|height="466" width="356"]]
204.1	1181
	1182	Figure 5.13. Window with IM classes and their attributes
	1183
	1184	After assembling the shape with the necessary rules for dynamic display, select the entire group and click the left mouse button. In the drop-down window, select Create active element, see Fig. 5.14. This function also applies to individual graphic drawings. To bind to the information model, open the appropriate bindings menu [[image:Screenshot 2025-12-04 at 14.52.28.png\|\|height="31" width="31"]].
	1185
206.1	1186	[[image:Screenshot 2025-12-04 at 14.52.56.png\|\|height="519" width="353"]]
204.1	1187
	1188	Figure 5.14. Creating an active element
	1189
	1190	After creating the active element, the settings shown in Fig. 5.15 become the default. To set properties, right-click on the active element and select Edit data of element from the menu.
	1191
	1192	[[image:Screenshot 2025-12-04 at 14.53.33.png]]
	1193
	1194	Figure 5.15. Edit the data of elements
	1195
	1196	After setting up the properties, select the shape and click the button [[image:Screenshot 2025-12-04 at 14.54.04.png\|\|height="27" width="26"]]. Find the necessary element in the tree and select it (see Fig. 5.16).
	1197
206.1	1198	[[image:Screenshot 2025-12-04 at 14.54.49.png\|\|height="642" width="570"]]
204.1	1199
	1200	Figure 5.16. Information model element binding
	1201
	1202	In this way, it is bound to the elements of the information model. When switching from the editor to the diagram viewing mode and right-clicking on the created shape, the Measurements context menu appears, showing the complete set of parameters described in the information model, as shown in Fig. 3.3.
	1203
	1204	Right-clicking displays a table of parameters, which includes all the parameters from measurements, with the option to configure short tag names and decode values, as shown in Fig. 5.17.
	1205
206.1	1206	[[image:Screenshot 2025-12-04 at 14.55.22.png\|\|height="252" width="339"]]
204.1	1207
	1208	Figure 5.17. Table of the IM element parameters
	1209
	1210	This object also has the option to display posters, with their arrangement appearing as shown in Fig. 5.18.
	1211
206.1	1212	[[image:Screenshot 2025-12-04 at 14.55.48.png\|\|height="271" width="569"]]
204.1	1213
	1214	Figure 5.18. Installation of customized posters
	1215
	1216	= ABBREVIATIONS =
	1217
	1218	DB – the database
	1219
	1220	IM – information model.