Changes for page 5. Diagrams Development Manual
Last modified by Iaroslav Platonov on 2026/06/08 10:32
Summary
-
Page properties (1 modified, 0 added, 0 removed)
-
Attachments (0 modified, 1 added, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -28,7 +28,7 @@ 28 28 29 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 30 31 -[[image:Screenshot 2025-12-03 at 20.34.06.png]] 31 +[[image:Screenshot 2025-12-03 at 20.34.06.png||height="80" width="305"]] 32 32 33 33 The tree structure is sorted in ascending order based on the defined positional indices. 34 34 ... ... @@ -44,7 +44,7 @@ 44 44 45 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 46 47 -[[image:Screenshot 2025-12-03 at 20.51.39.png]] 47 +[[image:Screenshot 2025-12-03 at 20.51.39.png||height="130" width="683"]] 48 48 49 49 Figure 2.2. Measurements in the debug mode 50 50 ... ... @@ -54,7 +54,7 @@ 54 54 55 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 56 57 -[[image:Screenshot 2025-12-03 at 20.56.20.png]] 57 +[[image:Screenshot 2025-12-03 at 20.56.20.png||height="571" width="1365"]] 58 58 59 59 Figure 2.3. Dispatch marks interface 60 60 ... ... @@ -74,7 +74,7 @@ 74 74 75 75 An example of calling object measurements is shown in Fig. 2.4. 76 76 77 -[[image:Screenshot 2025-12-03 at 20.58.29.png]] 77 +[[image:Screenshot 2025-12-03 at 20.58.29.png||height="329" width="881"]] 78 78 79 79 Figure 2.4. Calling object measurements 80 80 ... ... @@ -94,19 +94,19 @@ 94 94 95 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 96 97 -[[image:Screenshot 2025-12-03 at 21.03.24.png]] 97 +[[image:Screenshot 2025-12-03 at 21.03.24.png||height="130" width="1434"]] 98 98 99 99 Figure 2.5. Setpoints 100 100 101 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 102 103 -[[image:Screenshot 2025-12-03 at 21.03.57.png]] 103 +[[image:Screenshot 2025-12-03 at 21.03.57.png||height="317" width="704"]] 104 104 105 105 Figure 2.6. Setpoint settings 106 106 107 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 108 109 -[[image:Screenshot 2025-12-03 at 21.04.36.png]] 109 +[[image:Screenshot 2025-12-03 at 21.04.36.png||height="206" width="1025"]] 110 110 111 111 Figure 2.7. Measurements of the IM object 112 112 ... ... @@ -114,7 +114,7 @@ 114 114 115 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 116 117 -[[image:Screenshot 2025-12-03 at 21.06.45.png]] 117 +[[image:Screenshot 2025-12-03 at 21.06.45.png||height="152" width="1024"]] 118 118 119 119 Figure 2.8. Highlighting tag values associated with a technology event 120 120 ... ... @@ -126,13 +126,13 @@ 126 126 127 127 An example of the **Diagrams** page is shown in Fig. 3.1. 128 128 129 -[[image:Screenshot 2025-12-03 at 21.08.33.png]] 129 +[[image:Screenshot 2025-12-03 at 21.08.33.png||height="199" width="1026"]] 130 130 131 131 Figure 3.1. Mnemonic diagrams page 132 132 133 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 134 135 -[[image:Screenshot 2025-12-03 at 21.09.41.png]] 135 +[[image:Screenshot 2025-12-03 at 21.09.41.png||height="169" width="569"]] 136 136 137 137 Figure 3.2. New scheme window 138 138 ... ... @@ -142,13 +142,13 @@ 142 142 143 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 144 145 -[[image:Screenshot 2025-12-03 at 21.14.23.png]] 145 +[[image:Screenshot 2025-12-03 at 21.14.23.png||height="124" width="370"]] 146 146 147 147 Figure 3.3. Hiding diagrams in the tree 148 148 149 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 150 151 -[[image:Screenshot 2025-12-03 at 21.20.20.png]] 151 +[[image:Screenshot 2025-12-03 at 21.20.20.png||height="148" width="369"]] 152 152 153 153 Figure 3.4. Missing tags 154 154 ... ... @@ -186,9 +186,169 @@ 186 186 187 187 The main menu (upper horizontal line) contains the main functions for working with the graphical editor interface: file actions, workspace settings, page view, arrangement settings for elements, their editing and viewing, as well as additional settings and background information for the diagram developer. The menu functions also have hints on hotkey combinations for quickly executing commands on the keyboard. 188 188 189 -When selecting an element on the diagram, the **Setting up rules** button [[image:Screenshot 2025-12-04 at 12.19.21.png||height="2 8" width="33"]] on the toolbar becomes available.If the selected element is an active object, clicking on the icon 189 +When selecting an element on the diagram, the **Setting up rules** button [[image:Screenshot 2025-12-04 at 12.19.21.png||height="20" width="23"]] on the toolbar becomes available. 190 190 191 +If the selected element is an active object, clicking on the icon [[image:Screenshot 2025-12-04 at 12.19.53.png||height="28" width="29"]] redirects to the **Binding an element to a tag or channel** tree tree (see Fig. 4.5). When selecting an inactive element on the diagram and clicking on the **Setting up rules** button, the **Component visual settings** window appears (see Fig. 4.4). For quick binding of tags, metering channels, and devices within the rules, the tree structure can also be used, which opens upon clicking the button [[image:Screenshot 2025-12-04 at 12.19.53.png||height="28" width="29"]]. 191 191 193 +Clicking on the icon [[image:Screenshot 2025-12-04 at 12.21.03.png||height="26" width="33"]] switches to the diagram view mode. 194 + 195 +=== 4.1.2. Toolbar === 196 + 197 +The left panel **Categories** contains the basic set of graphical tools for creating and editing shapes and a set of graphic objects created by the diagram developer (see Fig. 4.2). The left panel can be also replaced with a tree for binding diagram objects (see Fig. 4.5), and the tree displaying binding to tags or metering channels (see Fig. 4.6). 198 + 199 +[[image:Screenshot 2025-12-04 at 12.22.13.png||height="720" width="344"]] 200 + 201 +Figure 4.2. Graphic templates 202 + 203 +=== 4.1.3. Properties panel === 204 + 205 +The main tools for configuring the workspace and editing diagram elements are displayed on the right side of the graphical editor interface (see Fig. 4.3). 206 + 207 +[[image:Screenshot 2025-12-04 at 12.23.25.png||height="787" width="988"]] 208 + 209 +Figure 4.3. Object properties 210 + 211 +== 4.2. Binding of parameters: general information == 212 + 213 +When selecting an inactive element on the diagram and clicking on the Setting up rules button [[image:Screenshot 2025-12-04 at 12.24.23.png||height="23" width="27"]], the **Component visual settings** window appears (see Fig. 4.4). 214 + 215 +[[image:Screenshot 2025-12-04 at 12.24.58.png||height="286" width="893"]] 216 + 217 +Figure 4.4. Component visual settings window 218 + 219 +The components are displayed on the diagram in accordance with the rules that determine which actions are to be performed with the component if certain conditions are met. The user can set multiple rules to customize the display of a single component. 220 + 221 +The **Copy** button [[image:Screenshot 2025-12-04 at 12.25.38.png||height="28" width="27"]] (23) is used for user convenience and allows creating a new rule based on one of the already configured rules. 222 + 223 +The **Condition No. 1** area determines in which cases an action is to be applied to the diagram component being edited and includes fields (see Fig. 4.4): 224 + 225 +~1. Selecting the type of source parameter to use when creating the rule. This can be the tag's value or its status, etc. 226 + 227 +2. Selecting the desired parameter from the database or from the information model, a drop-down list appears when clicking **More.** 228 + 229 +3. Entering tag processing formulas. 230 + 231 +4. The choice of the logical operator used in the condition, for example, equal if the parameter should be equal to something. 232 + 233 +5. Selecting the type of parameter used for comparison. 234 + 235 +6. Setting the value with which the source parameter is to be compared (manually or in a drop-down list). 236 + 237 +7. Entering tag processing formulas. 238 + 239 +8. If there are several conditions in the rule, the user determines in which cases they should call an action.: 240 + 241 +* if //any of// are selected, the logical operator OR is implied (if Condition #1 or Condition No. 2 or Condition No. N is met, then the action is performed); 242 +* if //all //is selected, the logical operator AND is implied (if Condition No. 1 and Condition No. 2 and Condition No. N are met, then the action is performed). 243 + 244 +9. To link a no-conditions tag on the diagram, select "no conditions". 245 + 246 +10. Delete the condition if necessary. 247 + 248 +~11. Comment on the condition (optional). 249 + 250 +12. To enable more flexible configuration of component display on the diagram, the rule may include multiple conditions. 251 + 252 +The **Action No. 1** area determines which settings are to be applied to the edited component of the diagram if the conditions set by the user are met, and includes the fields: 253 + 254 +13. Binding an action to the component text. 255 + 256 +14. Binding an action to the geometry of a component. 257 + 258 +15. Binding an action to a component style. 259 + 260 +16. Binding an action to an animation (object blinking). 261 + 262 +17. Selecting the parameter to edit (determined by the selected binding). 263 + 264 +18. Setting the parameter value (manually or in a drop-down list). 265 + 266 +19. Text formatting. 267 + 268 +20. If the action is linked to the text of the edited component, the parameter value can be rounded based on the specified number of decimal places. 269 + 270 +21. Output of numbers on the diagram in exponential form. 271 + 272 +22. To enable more flexible configuration of component display on the diagram, the rule may include multiple conditions. 273 + 274 +To delete unnecessary actions in the rule, click the button [[image:Screenshot 2025-12-04 at 12.29.45.png||height="23" width="24"]]. 275 + 276 +The **Reset current rule** button is used to delete all conditions and actions in the selected rule. 277 + 278 +To save the changes, click **Save.** 279 + 280 +If saving the settings is not required, the window can be closed by clicking the button [[image:Screenshot 2025-12-04 at 12.30.16.png||height="25" width="24"]] or anywhere outside the modal window. 281 + 282 +When an active element on the diagram is selected and the **Binding an element to a tag or channel** button [[image:Screenshot 2025-12-04 at 12.30.53.png||height="23" width="22"]] is clicked, the element panel on the left side of the graphical editor is replaced with a tree for binding diagram objects to the information model. 283 + 284 +The **Binding an element to a tag or channel tree interface** is shown in Fig. 4.5 285 + 286 +[[image:Screenshot 2025-12-04 at 12.31.29.png||height="773" width="329"]] 287 + 288 +Figure 4.5. Binding an element to a tag or channel interface 289 + 290 +If the selected item is already bound to the IM, the **Binding an element to a tag or channel** menu displays the path to it and the link, while the **Choose** button in the tree is inactive. When another IM object is selected in the tree, the button becomes active and performs binding when clicked. For quicker binding, double-click can be used. The search field allows searching by the name or code of an Information Model (IM) object. When the object is deselected, the tree becomes inactive. To close the tree, click **Close.** 291 + 292 +When an inactive element on the diagram is selected and the B**inding an element to a tag or channel** button is pressed, the element panel on the left side of the graphical editor is replaced with a tree of devices, tags, and channels for binding diagram elements. The tag and channel tree interface for element binding is shown in Fig. 3.6. When selecting tags or metering channels, their IDs are automatically entered into the corresponding fields in the rules. 293 + 294 +[[image:Screenshot 2025-12-04 at 12.32.04.png||height="484" width="341"]] 295 + 296 +Figure 4.6. Tag and channel tree interface: binding an element to a tag or channel 297 + 298 +== 4.3. Adding objects to custom categories == 299 + 300 +Fig. 4.7 shows an example of adding a graphic template to a user category. 301 + 302 +[[image:Screenshot 2025-12-04 at 12.33.11.png]] 303 + 304 +Figure 4.7. Adding a new component 305 + 306 +To add a new object to a custom category, select the object (1) and click active elements adding button (2) in the appropriate category or drag it to this category by holding the left mouse button. Then, in the **Add a new component** window that appears, enter the desired name and click **Add** button (4). 307 + 308 +== 4.4. Importing and exporting a library of elements == 309 + 310 +Element library transfer is only available in diagram editing mode. To transfer the element library from one server to another, perform the following steps: 311 + 312 +* To transfer the element library, open the File > New library > Export library section from the main menu on the source server. In the modal window that appears, select the categories to export and click **Export** (see Fig. 4.8). The selected categories are to be saved to a JSON file. 313 + 314 +* Open the diagram in editing mode on the target server and navigate to File > New library > Import library in the horizontal menu. In the modal window that appears, enter the path to the previously saved JSON file or drag the file into the import field, then click **Import **(see Fig. 4.9). 315 + 316 +After importing, the library appears in the left column of the **Category,** the name of which is written in the format [name of the transferred category]_[date of transfer]_[randomly generated hash of 5 characters] (see Fig. 3.9). 317 + 318 +[[image:Screenshot 2025-12-04 at 12.35.15.png]] 319 + 320 +Figure 4.8. Export library modal window 321 + 322 +[[image:Screenshot 2025-12-04 at 12.35.44.png]] 323 + 324 +Figure 4.9. Import library modal window 325 + 326 +[[image:Screenshot 2025-12-04 at 12.36.09.png]] 327 + 328 +Figure 4.10. Imported category 329 + 330 +When transferring active elements, keep in mind that they have a set of rules inside them that depend on the classes of the information model and their attributes. If the classes and attributes described in the rules are not available on the server, they must be downloaded from the server from which the library was imported; otherwise, the active element to be inactive. 331 + 332 +== 4.5. Auto-replace active objects == 333 + 334 +To auto-replace active objects, do the following: 335 + 336 +* Create custom categories with objects (see section 4.3). 337 +* Select all the objects to be replaced on the diagram, right-click, and select the menu **Replace with another element.** In the window that opens, expand the category with the new object (see Fig. 4.11) and select it (if posters have been reconfigured for the object, then check the box **Apply new poster settings**). Click **Apply.** 338 + 339 +****[[image:Screenshot 2025-12-04 at 12.37.31.png]] 340 + 341 +Figure 4.11. Replace with another element modal window 342 + 343 +For the correct auto-replacement of active objects attached using linked lines to other elements of the diagram, the **Connectable** parameter should be enabled in the styles: 344 + 345 +[[image:Screenshot 2025-12-04 at 12.38.14.png]] 346 + 347 +Figure 4.12. Activation of the Connectable parameter 348 + 349 +If the active object does not have this parameter, trying to connect it to the line shows a prompt like in Fig. 4.13. The enabled parameter in the **Connectable** styles only affects the auto-replacement of the active object; this setting is not to affect the visual display in any way. 350 + 351 + 192 192 ---- 193 193 194 194
- Screenshot 2025-12-04 at 12.38.14.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.Lana - Size
-
... ... @@ -1,0 +1,1 @@ 1 +142.1 KB - Content