Changes for page 5. Diagrams Development Manual

Last modified by Iaroslav Platonov on 2026/06/08 10:32

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

From 160.1 to 161.1 From 165.1 to 166.1

From version 161.1

edited by Lana
on 2025/12/04 17:21

Change comment: Uploaded new attachment "Screenshot 2025-12-04 at 14.21.36.png", version {1}

To version 165.1

edited by Lana
on 2025/12/04 17:26

Change comment: Uploaded new attachment "Screenshot 2025-12-04 at 14.26.29.png", version {1}

Raw
Rendered

Summary

Page properties (1 modified, 0 added, 0 removed)
Attachments (0 modified, 3 added, 0 removed)

Details

Page properties

Content

@@ -368,7 +368,7 @@
  Figure 4.15. Color replacement modal window
--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.
++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.
  == 4.7. Setting up an animation frame for technological events associated with a diagram object ==
@@ -376,7 +376,7 @@
  Figure 4.16. Scheme settings modal window
--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:
++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:
  * **The frame **is the color of the frame
  * **Border, px** is the thickness of the frame
@@ -407,7 +407,7 @@
  Figure 4.18. Edit data of chart modal window
--The** Edit data of chart** modal window includes the following settings:
++The** Edit data of chart** modal window includes the following settings:
  * **Chart depth**
  * **Round** is rounding up values with the number of decimal places.
@@ -426,7 +426,7 @@
  Figure 4.19. Chart in the diagram viewer
--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.
++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.
  === 4.8.2. Charts of tag values selected on the diagram ===
@@ -483,7 +483,7 @@
  * Draw a suitable object, a rectangle, for example
  * Click on the **Setting up rules** icon [[image:Screenshot 2025-12-04 at 13.24.08.png||height="20" width="24"]]
--* 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.
++* 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.
  [[image:Screenshot 2025-12-04 at 13.24.38.png||height="202" width="691"]]
@@ -491,7 +491,7 @@
  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:
--1. In step #1, select the** Style** tab.
++1. In step #1, select the** Style** tab.
 . In the suggested menu, select the option **Fill depending on the values.**
 . Select the tag/attribute name from the drop-down list.
 . 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 @@
  * **Disable context menus, posters, and animations** disables the following:
 . 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.**
--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.
--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.
++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.
++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.
  [[image:Screenshot 2025-12-04 at 13.27.06.png]]
@@ -588,7 +588,7 @@
  Figure 4.35. Viewing a diagram with manual input objects
--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"]].
++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"]].
  == 4.12. Input of fixed manual entry values ==
@@ -604,7 +604,7 @@
  Fig. 4.36 shows an example of manual input configuration for a tag with ID 9001, where:
--* **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.
++* **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.
  * **Action** selects from a drop-down list: either manual input or cancellation of manual input.
  * **Value** specifies the value to be assigned to the tag when the diagram button is pressed.
  * **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 @@
  **3) Links for navigation to Real-Time Data Analysis**
--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.
++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.
  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"]].
@@ -758,8 +758,222 @@
  * **Polling frequency (s)** is the time interval for updating data in the table, in seconds.
  * **Interval **is for selection of the data interval (applies to the entire table).
  * **Function** is data aggregation applied to the entire table.
--* **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]]
++* **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"]]
++* **Name **is the column name corresponding to the metering channel.
++* **Width **is the column width.
++* **Change time **is a system field used to display the time of the metering channel's value change.
++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"]].
++
++[[image:Screenshot 2025-12-04 at 14.10.47.png]]
++
++Figure 4.55. Display of metering channel data
++
++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.
++
++== 4.19. Heatmaps ==
++
++Heatmap functionality is accessible only with an active license for the corresponding module.
++
++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.
++
++[[image:Screenshot 2025-12-04 at 14.11.51.png||height="72" width="83"]]
++
++Figure 4.56. Sensor graphic element
++
++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).
++
++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).
++
++[[image:Screenshot 2025-12-04 at 14.13.22.png]]
++
++Figure 4.57. Binding to the tag ID
++
++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).
++
++[[image:Screenshot 2025-12-04 at 14.13.52.png]]
++
++Figure 4.58. Create heatmap
++
++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.
++
++[[image:Screenshot 2025-12-04 at 14.14.27.png]]
++
++Figure 4.59. Editing heatmap properties
++
++[[image:Screenshot 2025-12-04 at 14.14.52.png]]
++
++Figure 4.60. Heatmap
++
++== 4.20. Layers ==
++
++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.
++
++To switch to the layer mode, go to the View > Layers in the upper horizontal menu (Ctrl+Shift+L).
++
++[[image:Screenshot 2025-12-04 at 14.15.37.png]]
++
++Figure 4.61. Layers menu
++
++Fig. 4.61 shows an example of a list of layers where:
++
++1. Add layer is used to add a part of the diagram to the layer with the name.
++1. Duplicating the selected layer in the list.
++1. It is used to move diagram elements from one layer to another.
++1. The layer removal button.
++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.
++1. Blocking changes to a layer from the list.
++1. Foreground/background of the layer.
++
++== 4.21. Active SVG elements ==
++
++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).
++
++=== 4.21.1. Active SVG elements to speed up the opening and editing of the diagram ===
++
++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.
++
++The loading of items is in the **Extras** menu item (see Fig. 4.62).
++
++[[image:Screenshot 2025-12-04 at 14.17.19.png]]
++
++Figure 4.62. Import animated SVGs
++
++Ready-made templates should be uploaded to the **Import animated SVG**s menu (see Fig. 4.63).
++
++[[image:Screenshot 2025-12-04 at 14.17.47.png]]
++
++Figure 4.63. Import animated SVGs
++
++The template uploaded in Fig. 4.64 replaces drawing of many graphic elements created in the diagram editor.
++
++[[image:Screenshot 2025-12-04 at 14.18.12.png]]
++
++Figure 4.64. Animated SVG
++
++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.
++
++[[image:Screenshot 2025-12-04 at 14.18.44.png]]
++
++Figure 4.65. Legend for the position of the switch
++
++[[image:Screenshot 2025-12-04 at 14.19.10.png]]
++
++Figure 4.66. Graphic elements
++
++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.
++
++[[image:Screenshot 2025-12-04 at 14.19.47.png]]
++
++Figure 4.67. Rules for animated SVG
++
++The code of the animated element is shown below:
++
  ----
++<svg xmlns="http:~/~/www.w3.org/2000/svg" viewBox="0 0 80 80" width="80" height="80"
++
++data-states='{"On":{"~-~-background":"#d50404","~-~-border":"var(~-~-main)"},
++
++"Off":{"~-~-background":"#0f0","~-~-border":"var(~-~-main)"},
++
++"Error/Intermediate":{"~-~-background":"#fff","~-~-border":"var(~-~-main)"},
++
++"WE are exhausted":{"~-~-background":"#00f","~-~-border":"var(~-~-main)"},
++
++"n/a":{"~-~-background":"transparent","~-~-border":"#000"}}'>
++
++<rect style="fill:var(~-~-background,transparent);stroke:var(~-~-border,var(~-~-main,#000));stroke-width:6;" height="80" width="80" />
++
++</svg>
++
++----
++
++=== 4.21.2. Animated SVG ===
++
++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.
++
++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.).
++
++[[image:Screenshot 2025-12-04 at 14.21.36.png]]
++
++Figure 4.68. Animated Image
++
++Each element created, for example, Inkscape has a group, and each group has its own animation settings.
++
++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:
++
++----
++
++<animateTransform
++
++            attributeName="transform"
++
++            attributeType="XML"
++
++            type="rotate"
++
++ values="360 85 83; 310 85 83; 360 85 83"
++
++keySplines="1 .9 .1 0 ; 0 .1 .9 1"
++
++            dur="4s"
++
++            repeatCount="indefinite" />
++
++----
++
++If the object needs to rotate around an axis (see Fig. 4.68), the example code for rotating counterclockwise would look like this:
++
++----
++
++<animateTransform
++
++            attributeName="transform"
++
++            attributeType="XML"
++
++            type="rotate"
++
++values="0 117.36 311.98; 360 117.36 311.98"
++
++begin = "-3.1s"
++
++            dur="4s"
++
++            repeatCount="indefinite" />
++
++----
++
++For clockwise rotation, the example code would look like this:
++
++----
++
++<animateTransform
++
++            attributeName="transform"
++
++            attributeType="XML"
++
++
++            type="rotate"
++
++            from="0 112.36 251.98"
++
++            to="360 112.36 251.98"
++
++            dur="3s"
++
++            repeatCount="indefinite" />
++
++----
++
++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.
++
++Thus, by knowing the SVG and CSS code, any animations can be imported into the diagram editor.
++
++== 4.22. Conversion of diagrams from version 2 of the editor to version 3 ==
++
++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"]]
++

Screenshot 2025-12-04 at 14.24.51.png

Author

...	...	@@ -1,0 +1,1 @@
	1	+XWiki.Lana

Size

...	...	@@ -1,0 +1,1 @@
	1	+2.7 KB

Content

Screenshot 2025-12-04 at 14.25.20.png

Author

...	...	@@ -1,0 +1,1 @@
	1	+XWiki.Lana

Size

...	...	@@ -1,0 +1,1 @@
	1	+26.2 KB

Content

Screenshot 2025-12-04 at 14.26.29.png

Author

...	...	@@ -1,0 +1,1 @@
	1	+XWiki.Lana

Size

...	...	@@ -1,0 +1,1 @@
	1	+92.8 KB

Content