Skip to Content
Last modified by Iaroslav Platonov on 2026/06/08 10:32
From version 181.1
edited by Lana
on 2025/12/04 17:41
Change comment: Uploaded new attachment "Screenshot 2025-12-04 at 14.41.48.png", version {1}
To version 163.1
edited by Lana
on 2025/12/04 17:24
Change comment: Uploaded new attachment "Screenshot 2025-12-04 at 14.24.51.png", version {1}

Summary

Details

Page properties
Content
... ... @@ -368,7 +368,7 @@
368 368  
369 369  Figure 4.15. Color replacement modal window
370 370  
371 -Fig. 4.15 shows the** Color replacement** modal window, which allows the diagram developer to change the current color of not only the rendered elements (In the diagram) but also the color set in active object rules (In the rules) and text color (In the text). Clicking** Replace** applies the changes to the entire diagram. To change the color of individual objects, use standard style editing, as shown in Fig. 4.3.
371 +Fig. 4.15 shows the** Color replacement** modal window, which allows the diagram developer to change the current color of not only the rendered elements (In the diagram) but also the color set in active object rules (In the rules) and text color (In the text). Clicking** Replace** applies the changes to the entire diagram. To change the color of individual objects, use standard style editing, as shown in Fig. 4.3.
372 372  
373 373  == 4.7. Setting up an animation frame for technological events associated with a diagram object ==
374 374  
... ... @@ -376,7 +376,7 @@
376 376  
377 377  Figure 4.16. Scheme settings modal window
378 378  
379 -For each created diagram, the flashing frame around the active object in diagram view mode can be customized depending on the incoming technological event. In the** Settings **window, under the **Animation frames,** the fields include:
379 +For each created diagram, the flashing frame around the active object in diagram view mode can be customized depending on the incoming technological event. In the** Settings **window, under the **Animation frames,** the fields include:
380 380  
381 381  * **The frame **is the color of the frame
382 382  * **Border, px** is the thickness of the frame
... ... @@ -407,7 +407,7 @@
407 407  
408 408  Figure 4.18. Edit data of chart modal window
409 409  
410 -The** Edit data of chart** modal window includes the following settings:
410 +The** Edit data of chart** modal window includes the following settings:
411 411  
412 412  * **Chart depth**
413 413  * **Round** is rounding up values with the number of decimal places.
... ... @@ -426,7 +426,7 @@
426 426  
427 427  Figure 4.19. Chart in the diagram viewer
428 428  
429 -Fig. 4.19 shows an example of a customized chart. This chart updates in real time and displays data from the last 5 minutes. Right-clicking on the chart opens the** Measurements** window, which provides information about the linked tag, its value, and more. Hovering the left mouse button over the chart calls the pop-up with the date, time, and value.
429 +Fig. 4.19 shows an example of a customized chart. This chart updates in real time and displays data from the last 5 minutes. Right-clicking on the chart opens the** Measurements** window, which provides information about the linked tag, its value, and more. Hovering the left mouse button over the chart calls the pop-up with the date, time, and value.
430 430  
431 431  === 4.8.2. Charts of tag values selected on the diagram ===
432 432  
... ... @@ -483,7 +483,7 @@
483 483  
484 484  * Draw a suitable object, a rectangle, for example
485 485  * Click on the **Setting up rules** icon [[image:Screenshot 2025-12-04 at 13.24.08.png||height="20" width="24"]]
486 -* In the window that opens (see Fig. 4.25), the** Condition** and **Action** fields need to be filled in for the rule. If highlighting areas based on specific conditions is not required, the **Condition **field can be left empty – in this case, the rendered object is to be displayed using the color specified in the **Action** field.
486 +* In the window that opens (see Fig. 4.25), the** Condition** and **Action** fields need to be filled in for the rule. If highlighting areas based on specific conditions is not required, the **Condition **field can be left empty – in this case, the rendered object is to be displayed using the color specified in the **Action** field.
487 487  
488 488  [[image:Screenshot 2025-12-04 at 13.24.38.png||height="202" width="691"]]
489 489  
... ... @@ -491,7 +491,7 @@
491 491  
492 492  Fig. 4.25 shows the setting of the fill depending on the values without conditions. The action to change the fill consists of the fill areas:
493 493  
494 -1. In step #1, select the** Style** tab.
494 +1. In step #1, select the** Style** tab.
495 495  1. In the suggested menu, select the option **Fill depending on the values.**
496 496  1. Select the tag/attribute name from the drop-down list.
497 497  1. If a tag is selected, its ID should be entered or selected from the drop-down list. If an IM attribute is selected, it also needs to be specified from the drop-down list of the class tree.
... ... @@ -519,8 +519,8 @@
519 519  * **Disable context menus, posters, and animations** disables the following:
520 520  
521 521  1. Disables the installation of posters for elements that are object attributes in the IM but have the same element ID bindings on the diagram. In Fig. 4.27, the dedicated switch is linked to ID 13939, the element TO is linked to the same ID, it is located in the measurements of the object (Activation of the TO). For posters to be exposed only to the switch, it is necessary for an IM element to enable **Disabling context menus, posters, and animations.**
522 -1. The// Disable context menus, posters, animations// attribute disables animation for such an element if the event is triggered not by changing it, but by changing another attribute included in this object, but if the triggered event relates to this attribute, then animation will work for it. In Fig. 4.27, the dedicated switch is linked to ID 13939, the element TO is linked to the same ID, it is located in the measurements of the object (Activation of the TO). If the **Disable context menus, posters, animations** field is disabled, the TO element will flash at any event related to the object with ID 13939. For the "TO" to flash only at an event that relates to this parameter, the TO element should turn it on.
523 -1. The //Disable context menus, posters, animations// attribute also disables all context menus that are available to the object, but only measurements remain. In Fig. 3.27, the dedicated switch is linked to ID 13939, the element TO is bound to the same ID, it is located in the measurements of the object (Activation of the TO). If an IM element does not include the// Disable context menus, posters, animations //attribute, then all context menus from the switch are to be available to it.
522 +1. The// Disable context menus, posters, animations// attribute disables animation for such an element if the event is triggered not by changing it, but by changing another attribute included in this object, but if the triggered event relates to this attribute, then animation will work for it. In Fig. 4.27, the dedicated switch is linked to ID 13939, the element TO is linked to the same ID, it is located in the measurements of the object (Activation of the TO). If the **Disable context menus, posters, animations** field is disabled, the TO element will flash at any event related to the object with ID 13939. For the "TO" to flash only at an event that relates to this parameter, the TO element should turn it on.
523 +1. The //Disable context menus, posters, animations// attribute also disables all context menus that are available to the object, but only measurements remain. In Fig. 3.27, the dedicated switch is linked to ID 13939, the element TO is bound to the same ID, it is located in the measurements of the object (Activation of the TO). If an IM element does not include the// Disable context menus, posters, animations //attribute, then all context menus from the switch are to be available to it.
524 524  
525 525  [[image:Screenshot 2025-12-04 at 13.27.06.png]]
526 526  
... ... @@ -604,7 +604,7 @@
604 604  
605 605  Fig. 4.36 shows an example of manual input configuration for a tag with ID 9001, where:
606 606  
607 -* **Tag ID** specifies the identification number of the tag selected from a drop-down list [[image:Screenshot 2025-12-04 at 13.36.43.png||height="22" width="24"]] or entered manually.
607 +* **Tag ID** specifies the identification number of the tag selected from a drop-down list [[image:Screenshot 2025-12-04 at 13.36.43.png||height="22" width="24"]] or entered manually.​​​​​​​
608 608  * **Action** selects from a drop-down list: either manual input or cancellation of manual input.
609 609  * **Value** specifies the value to be assigned to the tag when the diagram button is pressed.
610 610  * **Before cancel** – if the state switch is enabled [[image:Screenshot 2025-12-04 at 13.37.25.png||height="25" width="40"]], the value persists until it is manually reset by the user. If the state switch is disabled [[image:Screenshot 2025-12-04 at 13.37.59.png||height="23" width="38"]], the manual input is automatically to be cleared after the next tag value change during the device polling.
... ... @@ -646,7 +646,7 @@
646 646  
647 647  **3) Links for navigation to Real-Time Data Analysis**
648 648  
649 -To navigate to **Metering data** or **Real-time dat**a open the object properties as described above. In the** Link or mnemonic scheme ID** field, click the button [[image:Screenshot 2025-12-04 at 13.41.24.png||height="21" width="33"]] and select **Real-time data** or **Analysis of data metering** from the drop-down list.
649 +To navigate to **Metering data** or **Real-time dat**a open the object properties as described above. In the** Link or mnemonic scheme ID** field, click the button [[image:Screenshot 2025-12-04 at 13.41.24.png||height="21" width="33"]] and select **Real-time data** or **Analysis of data metering** from the drop-down list.
650 650  
651 651  Fig. 4.40 shows an example of selecting tags from the real-time data section. The opened modal window displays the interface of this page with trees of devices, objects, statuses, and time on the left side. To create a link from the diagram, the appropriate tree and relevant tags should be selected, then the desired tab – **Real-time data, Chart**, or **Table** – should be specified on the right side, followed by clicking the button [[image:Screenshot 2025-12-04 at 13.41.45.png||height="19" width="30"]].
652 652  
... ... @@ -676,7 +676,7 @@
676 676  
677 677  Figure 4.43. Enabling portable grounding
678 678  
679 -If this option is enabled, then the grounding [[image:Screenshot 2025-12-04 at 13.45.01.png||height="24" width="24"]] button appears on the right side of the screen in the diagram viewing mode. Right-clicking on it opens a menu for setting the size and color of the portable grounding icon (see Fig. 4.44) to be applied to portable groundings on all diagrams including those previously installed.
679 +If this option is enabled, then the grounding [[image:Screenshot 2025-12-04 at 13.45.01.png||height="24" width="24"]] button appears on the right side of the screen in the diagram viewing mode. Right-clicking on it opens a menu for setting the size and color of the portable grounding icon (see Fig. 4.44) to be applied to portable groundings on all diagrams including those previously installed. ​​​​​​​
680 680  
681 681  [[image:Screenshot 2025-12-04 at 13.45.24.png]]
682 682  
... ... @@ -714,7 +714,7 @@
714 714  
715 715  Figure 4.49. Displaying a number in exponential form
716 716  
717 -== 4.17. Dis​​​​​​​playing delimited values ==
717 +== 4.17. Dis​​​​​​​​​​​​​​playing delimited values ==
718 718  
719 719  In the settings [[image:Screenshot 2025-12-04 at 13.50.03.png]] , in diagram view mode, instant tag values can be displayed as delimited values. This setting is enabled by default (see Fig. 4.50).
720 720  
... ... @@ -972,80 +972,6 @@
972 972  
973 973  Thus, by knowing the SVG and CSS code, any animations can be imported into the diagram editor.
974 974  
975 -== 4.22. Conversion of diagrams from version 2 of the editor to version ​​​​​​​3 ==
975 +----
976 976  
977 -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.
978 -
979 -[[image:Screenshot 2025-12-04 at 14.25.20.png]]
980 -
981 -Figure 4.69. Warning about switching to the editor version 3
982 -
983 -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.
984 -
985 -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.
986 -
987 -== 4.23. Display of the IM object name and the tag measurement units ==
988 -
989 -[[image:Screenshot 2025-12-04 at 14.26.29.png]]
990 -
991 -Figure 4.70. Options for displaying tag data
992 -
993 -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.
994 -
995 -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).
996 -
997 -[[image:Screenshot 2025-12-04 at 14.27.28.png]]
998 -
999 -Figure 4.71. IM measurement
1000 -
1001 -[[image:Screenshot 2025-12-04 at 14.27.52.png]]
1002 -
1003 -Figure 4.72. IM object
1004 -
1005 -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"]].
1006 -
1007 -Examples of such value displays are shown in Fig. 4.70, numbers 1, 2, and 3.
1008 -
1009 -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.
1010 -
1011 -To display the name of the object trimmings unnecessary characters, use the formula in **Actions:**
1012 -
1013 -[[image:Screenshot 2025-12-04 at 14.30.16.png]]
1014 -
1015 -Figure 4.73. IM object name with split characters
1016 -
1017 -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.
1018 -
1019 -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.​​​​​​​
1020 -
1021 -[[image:Screenshot 2025-12-04 at 14.31.50.png]]
1022 -
1023 -Figure 4.74. Creating and binding to an IM object
1024 -
1025 -== 4.24. Uploading/downloading diagrams ==
1026 -
1027 -Uploading and downloading diagrams are available on the **Mnemonic diagrams** page, in the Actions column.
1028 -
1029 -[[image:Screenshot 2025-12-04 at 14.32.48.png]]
1030 -
1031 -Figure 4.75. Mnemonic diagrams page
1032 -
1033 -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.
1034 -
1035 -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.
1036 -
1037 -The **Download** button allows downloading all the diagrams to one archive.
1038 -
1039 -The **Upload** button allows uploading all the diagrams from one previously downloaded archive. This allows diagrams to migrate from one server to another.
1040 -
1041 -= 5. Binding tags to the diagram using ID or code =
1042 -
1043 -**Example No. 1**
1044 -
1045 -An example of binding a real parameter taken from a database that outputs information as a numeric value on a diagram.
1046 -
1047 -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"]]. 
1048 -
1049 -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"]]
1050 -
1051 1051  
Screenshot 2025-12-04 at 14.25.20.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.Lana
Size
... ... @@ -1,1 +1,0 @@
1 -26.2 KB
Content
Screenshot 2025-12-04 at 14.26.29.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.Lana
Size
... ... @@ -1,1 +1,0 @@
1 -92.8 KB
Content
Screenshot 2025-12-04 at 14.26.56.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.Lana
Size
... ... @@ -1,1 +1,0 @@
1 -2.4 KB
Content
Screenshot 2025-12-04 at 14.27.28.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.Lana
Size
... ... @@ -1,1 +1,0 @@
1 -92.5 KB
Content
Screenshot 2025-12-04 at 14.27.52.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.Lana
Size
... ... @@ -1,1 +1,0 @@
1 -86.8 KB
Content
Screenshot 2025-12-04 at 14.28.24.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.Lana
Size
... ... @@ -1,1 +1,0 @@
1 -1.9 KB
Content
Screenshot 2025-12-04 at 14.30.16.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.Lana
Size
... ... @@ -1,1 +1,0 @@
1 -68.5 KB
Content
Screenshot 2025-12-04 at 14.30.57.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.Lana
Size
... ... @@ -1,1 +1,0 @@
1 -2.1 KB
Content
Screenshot 2025-12-04 at 14.31.14.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.Lana
Size
... ... @@ -1,1 +1,0 @@
1 -2.1 KB
Content
Screenshot 2025-12-04 at 14.31.50.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.Lana
Size
... ... @@ -1,1 +1,0 @@
1 -267.4 KB
Content
Screenshot 2025-12-04 at 14.32.48.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.Lana
Size
... ... @@ -1,1 +1,0 @@
1 -85.2 KB
Content
Screenshot 2025-12-04 at 14.33.20.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.Lana
Size
... ... @@ -1,1 +1,0 @@
1 -1.8 KB
Content
Screenshot 2025-12-04 at 14.33.51.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.Lana
Size
... ... @@ -1,1 +1,0 @@
1 -1.8 KB
Content
Screenshot 2025-12-04 at 14.39.54.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.Lana
Size
... ... @@ -1,1 +1,0 @@
1 -3.1 KB
Content
Screenshot 2025-12-04 at 14.40.43.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.Lana
Size
... ... @@ -1,1 +1,0 @@
1 -2.6 KB
Content
Screenshot 2025-12-04 at 14.41.18.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.Lana
Size
... ... @@ -1,1 +1,0 @@
1 -146.5 KB
Content
Screenshot 2025-12-04 at 14.41.48.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.Lana
Size
... ... @@ -1,1 +1,0 @@
1 -2.5 KB
Content