Skip to Content

Wiki source code of 5. Diagrams Development Manual

Version 58.2 by Lana on 2025/12/04 01:09
Hide last authors
Lana 4.2 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
Lana 5.2 13 = 2. VIEWING DIAGRAMS =
Lana 4.2 14
Lana 5.2 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.
Lana 4.2 16
Lana 8.2 17 [[image:Screenshot 2025-12-03 at 20.29.25.png]]
Lana 5.2 18
Lana 8.2 19 Figure 2.1. Diagram with a drop-down list of available diagrams
20
Lana 10.2 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
Lana 14.2 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]]
Lana 14.3 32
33 The tree structure is sorted in ascending order based on the defined positional indices.
34
Lana 16.2 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
Lana 54.2 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]]
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]]
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]]
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]]
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]]
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]]
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]]
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]]
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]]
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]]
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
Lana 55.2 151 [[image:Screenshot 2025-12-03 at 21.20.20.png]]
Lana 54.2 152
Lana 56.2 153 Figure 3.4. Missing tags
Lana 55.2 154
Lana 56.2 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
Lana 58.2 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)
Lana 56.2 164
Lana 58.2 165
Lana 54.2 166 ----
167
168