| layout |
docwithnav |
| assignees |
|
| title |
SCADA symbols development guide |
| description |
SCADA symbols development guide |
| upload-svg-file-1 |
| 0 |
1 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/upload-svg-file-1-ce.png |
Navigate to the "Resources" page of the "SCADA symbols" section and click the "Upload SCADA symbol" button; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/upload-svg-file-2-ce.png |
Drop the "fan.svg" file in the appropriate field, or upload it from a folder on your computer, rename it to "Fan", and click "Upload". |
|
|
| explore-scada-editor-1 |
| 0 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/explore-scada-editor-1-ce.png |
The SCADA symbol editor is split into two panels: the left panel displays your uploaded SVG file, the right panel contains multiple tabs such as "General", "Tags", "Behavior", and "Properties". |
|
|
| explore-scada-editor-2 |
| 0 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/explore-scada-editor-2-ce.png |
Populate the description and search tags, then click "Apply". |
|
|
| scada-editor-actions-1 |
| 0 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/scada-editor-actions-1-ce.png |
Populate the description and search tags, then click "Apply". |
|
|
| scada-editor-actions-2 |
| 0 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/scada-editor-actions-2-ce.png |
SCADA editor actions. |
|
|
| widget-size-and-aspect-ratio-1 |
| 0 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/widget-size-and-aspect-ratio-1-ce.png |
The "Widget size" setting impacts the aspect ratio of the widget and should ideally match the aspect ratio of your SVG. |
|
|
| tags-definition-via-editor-1 |
| 0 |
1 |
2 |
3 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/tags-definition-via-editor-1-ce.png |
Go to the "Tags" tab. Now click the desired SVG element on the left panel of the editor and click the "+Add tag" button; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/tags-definition-via-editor-2-ce.png |
Enter a tag name and click the "Apply" icon; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/tags-definition-via-editor-3-ce.png |
Tag added; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/tags-definition-via-editor-4-ce.png |
Define all other tags. |
|
|
| operations-with-tag-1 |
| 0 |
1 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/operations-with-tag-1-ce.png |
Hover over the tag and click the "Update tag" icon; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/operations-with-tag-2-ce.png |
Change the tag name and click "Apply". |
|
|
| operations-with-tag-2 |
| 0 |
1 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/operations-with-tag-3-ce.png |
Hover over the tag and click the "Tag settings" icon; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/operations-with-tag-4-ce.png |
In the pop-up menu, there are two types of functions you may assign to each tag: "State render function" and "On click action". We will discuss these in more detail in the "Tag configuration" section. |
|
|
| operations-with-tag-3 |
| 0 |
1 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/operations-with-tag-5-ce.png |
Hover over the tag and click the "Remove tag" icon; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/operations-with-tag-6-ce.png |
Confirm deleting the tag in the dialog box. |
|
|
| add-tags-to-on-button-1 |
| 0 |
1 |
2 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/add-tags-to-on-button-1-ce.png |
Switch to "XML" editor mode and highlight the XML code as shown in the screenshot; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/add-tags-to-on-button-2-ce.png |
Paste the XML code copied from the documentation; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/add-tags-to-on-button-3-ce.png |
Return to the "SVG" editor mode. You will see the tags added to the "On" button element. |
|
|
| tags-definition-via-xml-1 |
| 0 |
1 |
2 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/tags-definition-via-xml-1-ce.png |
Navigate to the "XML" editor mode; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/tags-definition-via-xml-2-ce.png |
Add the XML code in the corresponding window; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/tags-definition-via-xml-3-ce.png |
Return to the "SVG" editor mode. You can see the defined tags. After, apply changes. |
|
|
| behavior-scada-developer-end-user-configuration-1 |
| 0 |
1 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/behavior-scada-developer-end-user-configuration-1-ce.png |
The list of behavior items configured by the SCADA developer; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/behavior-scada-developer-end-user-configuration-2-ce.png |
The list of the elements in the widget configuration of the end-user. |
|
|
| add-behavior-1 |
| 0 |
1 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/add-behavior-1-ce.png |
Navigate to the "Behavior" tab and click the "Add behavior" button; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/add-behavior-2-ce.png |
Fill in the required fields and click "Add". |
|
|
| types-of-behavior-parameters-1 |
| 0 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/types-of-behavior-parameters-1-ce.png |
The list of behavior parameters is specific to the chosen SCADA symbol and is entirely controlled by the symbol's author. There are three types of behavior parameters: "Value", "Action", and "Widget action". |
|
|
| five-types-of-actions-1 |
| 0 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/five-types-of-actions-1-ce.png |
The "Do nothing" action type utilizes a constant value defined by the user. |
|
|
| five-types-of-actions-2 |
| 0 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/five-types-of-actions-2-ce.png |
The "Execute RPC" action type sends a command to the target device to retrieve the value. The value is resolved once at the widget's creation. |
|
|
| five-types-of-actions-3 |
| 0 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/five-types-of-actions-3-ce.png |
The "Get attribute" action type subscribes to a target entity's attribute value, updating the widget when this attribute changes. |
|
|
| five-types-of-actions-4 |
| 0 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/five-types-of-actions-4-ce.png |
The "Get time series" action type subscribes to a target entity's time series field, updating the widget with new data arrivals. |
|
|
| five-types-of-actions-5 |
| 0 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/five-types-of-actions-5-ce.png |
The "Get alarm status" action type subscribes to the alarm state field of the target entity, updating the widget status according to the alarm type. |
|
|
| five-types-of-actions-6 |
| 0 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/five-types-of-actions-6-ce.png |
The "Get dashboard state" action type uses the current dashboard state's name, beneficial in specific scenarios unrelated to the device's state. |
|
|
| value-types-1 |
| 0 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/value-types-1-ce.png |
"Value" and "Action" behavior items come in various types including "String", "Integer", "Double", "Boolean", and "JSON". Each type has its own specific configuration parameters. |
|
|
| add-fan-on-behavior-1 |
| 0 |
1 |
2 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/add-fan-on-behavior-1-ce.png |
|
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/add-fan-on-behavior-2-ce.png |
|
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/add-fan-on-behavior-3-ce.png |
|
|
|
| add-fan-speed-behavior-1 |
| 0 |
1 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/add-fan-speed-behavior-1-ce.png |
|
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/add-fan-speed-behavior-2-ce.png |
|
|
|
| three-types-of-actions-for-interacting-with-target-entity-1 |
| 0 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/three-types-of-actions-for-interacting-with-target-entity-1-ce.png |
|
|
|
| three-types-of-actions-for-interacting-with-target-entity-2 |
| 0 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/three-types-of-actions-for-interacting-with-target-entity-2-ce.png |
|
|
|
| three-types-of-actions-for-interacting-with-target-entity-3 |
| 0 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/three-types-of-actions-for-interacting-with-target-entity-3-ce.png |
|
|
|
| widget-action-1 |
| 0 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/widget-action-1-ce.png |
Widget action behavior items are designed to trigger actions related to the current dashboard widget rather than the target device. Possible widget actions are detailed in the "Widget Actions" documentation. |
|
|
| add-on-btn-click-behavior-1 |
| 0 |
1 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/add-on-btn-click-behavior-1-ce.png |
|
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/add-on-btn-click-behavior-2-ce.png |
|
|
|
| add-off-btn-click-behavior-1 |
| 0 |
1 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/add-off-btn-click-behavior-1-ce.png |
|
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/add-off-btn-click-behavior-2-ce.png |
|
|
|
| widget-action-2 |
| 0 |
1 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/widget-action-2-ce.png |
|
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/widget-action-3-ce.png |
|
|
|
| properties-scada-developer-end-user-configuration-1 |
| 0 |
1 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/properties-scada-developer-end-user-configuration-1-ce.png |
The list of properties configured by the SCADA developer; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/properties-scada-developer-end-user-configuration-2-ce.png |
The list of properties in the widget configuration of the end-user. |
|
|
| add-properties-1 |
| 0 |
1 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/add-properties-1-ce.png |
Navigate to the "Property" tab and click the "Add property" button; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/add-properties-2-ce.png |
Fill in the required fields and click "Add". |
|
|
| add-on-btn-label-1 |
| 0 |
1 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/add-on-btn-label-1-ce.png |
|
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/add-on-btn-label-2-ce.png |
|
|
|
| add-on-btn-color-1 |
| 0 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/add-on-btn-color-1-ce.png |
|
|
|
| add-on-btn-disabled-color-1 |
| 0 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/add-on-btn-disabled-color-1-ce.png |
|
|
|
| add-off-btn-label-1 |
| 0 |
1 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/add-off-btn-label-1-ce.png |
|
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/add-off-btn-label-2-ce.png |
|
|
|
| add-off-btn-color-1 |
| 0 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/add-off-btn-color-1-ce.png |
|
|
|
| add-off-btn-disabled-color-1 |
| 0 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/add-off-btn-disabled-color-1-ce.png |
|
|
|
| add-fan-on-color-1 |
| 0 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/add-fan-on-color-1-ce.png |
|
|
|
| add-fan-off-color-1 |
| 0 |
1 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/add-fan-off-color-1-ce.png |
|
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/add-fan-off-color-2-ce.png |
|
|
|
| add-show-rotation-speed-1 |
| 0 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/add-show-rotation-speed-1-ce.png |
|
|
|
| add-rotation-speed-unit-1 |
| 0 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/add-rotation-speed-unit-1-ce.png |
|
|
|
| add-rotation-speed-font-1 |
| 0 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/add-rotation-speed-font-1-ce.png |
|
|
|
| add-rotation-speed-color-1 |
| 0 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/add-rotation-speed-color-1-ce.png |
|
|
|
| configured-properties-1 |
| 0 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/configured-properties-1-ce.png |
List of configured properties should look like this. |
|
|
| state-render-function-1 |
| 0 |
1 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/state-render-function-1-ce.png |
|
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/state-render-function-2-ce.png |
|
|
|
| on-click-action-1 |
| 0 |
1 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/on-click-action-1-ce.png |
|
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/on-click-action-2-ce.png |
|
|
|
| on-button-text-tag-configuration-1 |
| 0 |
1 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/on-button-text-tag-configuration-1-ce.png |
Go to the "Tag settings" of the "onButtonText" tag and click "+ Add" button of a "State rendering function"; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/on-button-text-tag-configuration-2-ce.png |
Paste the previously copied function from the documentation into the appropriate window. Click "Apply". |
|
|
| off-button-text-tag-configuration-1 |
| 0 |
1 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/off-button-text-tag-configuration-1-ce.png |
Go to the "Tag settings" of the "offButtonText" tag and click "+ Add" button of a "State rendering function"; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/off-button-text-tag-configuration-2-ce.png |
Paste the previously copied function from the documentation into the appropriate window. Click "Apply". |
|
|
| on-button-background-tag-configuration-1 |
| 0 |
1 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/on-button-background-tag-configuration-1-ce.png |
Go to the "Tag settings" of the "onButtonBackground" tag and click "+ Add" button of a "State rendering function"; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/on-button-background-tag-configuration-2-ce.png |
Paste the previously copied function from the documentation into the appropriate window. Click "Apply". |
|
|
| off-button-background-tag-configuration-1 |
| 0 |
1 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/off-button-background-tag-configuration-1-ce.png |
Go to the "Tag settings" of the "offButtonBackground" tag and click "+ Add" button of a "State rendering function"; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/off-button-background-tag-configuration-2-ce.png |
Paste the previously copied function from the documentation into the appropriate window. Click "Apply". |
|
|
| on-button-tag-configuration-1 |
| 0 |
1 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/on-button-tag-configuration-1-ce.png |
Go to the "Tag settings" of the "onButton" tag and click "+ Add" button of a "State rendering function"; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/on-button-tag-configuration-2-ce.png |
Paste the previously copied function from the documentation into the appropriate window. Click "Apply". |
|
|
| on-button-tag-configuration-2 |
| 0 |
1 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/on-button-tag-configuration-3-ce.png |
Go to the "Tag settings" of the "onButton" tag and click "+ Add" button of a "On click action"; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/on-button-tag-configuration-4-ce.png |
Paste the previously copied function from the documentation into the appropriate window. Click "Apply". |
|
|
| off-button-tag-configuration-1 |
| 0 |
1 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/off-button-tag-configuration-1-ce.png |
Go to the "Tag settings" of the "offButton" tag and click "+ Add" button of a "State rendering function"; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/off-button-tag-configuration-2-ce.png |
Paste the previously copied function from the documentation into the appropriate window. Click "Apply". |
|
|
| off-button-tag-configuration-2 |
| 0 |
1 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/off-button-tag-configuration-3-ce.png |
Go to the "Tag settings" of the "offButton" tag and click "+ Add" button of an "On click action"; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/off-button-tag-configuration-4-ce.png |
Paste the previously copied function from the documentation into the appropriate window. Click "Apply". |
|
|
| rotation-speed-text-tag-configuration-1 |
| 0 |
1 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/rotation-speed-text-tag-configuration-1-ce.png |
Go to the "Tag settings" of the "rotationSpeedText" tag and click "+ Add" button of a "State rendering function"; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/rotation-speed-text-tag-configuration-2-ce.png |
Paste the previously copied function from the documentation into the appropriate window. Click "Apply". |
|
|
| fan-tag-configuration-1 |
| 0 |
1 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/fan-tag-configuration-1-ce.png |
Go to the "Tag settings" of the "fan" tag and click "+ Add" button of a "State rendering function"; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/fan-tag-configuration-2-ce.png |
Paste the previously copied function from the documentation into the appropriate window. Click "Apply". |
|
|
| fan-tag-configuration-2 |
| 0 |
1 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/fan-tag-configuration-3-ce.png |
Go to the "Tag settings" of the "fan" tag and click "+ Add" button of an "On click action"; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/fan-tag-configuration-4-ce.png |
Paste the previously copied function from the documentation into the appropriate window. Click "Apply". |
|
|
| preview-mode-1 |
| 0 |
1 |
2 |
3 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/preview-mode-1-ce.png |
To enter preview mode, click the "Preview" button on the right side of the window; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/preview-mode-2-ce.png |
The SVG will be displayed on the left panel, and the widget configuration will appear on the right. Let's test the behavior of our widget. Press the green "On" button; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/preview-mode-3-ce.png |
The color of the button should change to gray, the fan will change color from red to green and start spinning. Below the fan, the RPM (revolutions per minute) will be displayed. Meanwhile, the "Off" button will become active and change its color from gray to red. Press it; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/preview-mode-4-ce.png |
The fan should stop, the "Off" button will become unclickable again, and its color will return to gray. |
|
|
| create-widget-1 |
| 0 |
1 |
2 |
3 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/create-widget-1-ce.png |
Click the "Create widget" button in the upper right corner. |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/create-widget-2-ce.png |
In the new window, enter the name of the future widget and specify an existing widget bundle or create a new one. We will create a new one. Enter the desired name for it and click "Create new widget bundle"; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/create-widget-3-ce.png |
Optionally, add a preview image for the widget bundle and click "Add"; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/create-widget-4-ce.png |
Confirm the widget creation by pressing the "Create" button. |
|
|
| test-widget-on-dashboard-1 |
| 0 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/test-widget-on-dashboard-1-ce.png |
Create a new dashboard and open it. Navigate to the "Layouts" panel. Then, change the layout from "Default" to "SCADA". Click "Save"; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/test-widget-on-dashboard-2-ce.png |
Now, click the "Add widget" button at the top of the screen or click the large "Add new widget" icon in the center of the screen; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/test-widget-on-dashboard-3-ce.png |
Find the "My SCADA widgets" widget bundle and click on it; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/test-widget-on-dashboard-4-ce.png |
Click on the "Fan" widget to add it to the dashboard; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/test-widget-on-dashboard-5-ce.png |
Specify the target device (use any device), and click "Add"; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/test-widget-on-dashboard-6-ce.png |
Widget added. Click "Save" to save the changes to the dashboard; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/test-widget-on-dashboard-7-ce.png |
Click the green "On" button. The button will become unclickable, its color should change to gray, the fan will change color from red to green and start spinning. The fan's RPM value will display beneath it; |
|
| image |
title |
/images/user-guide/scada/symbols-dev-guide/test-widget-on-dashboard-8-ce.png |
Meanwhile, the "Off" button will become active and change its color from gray to red. Press it. The fan should stop, the “Off” button will become unclickable, and its color will turn gray again. |
|
|
| download-scada-symbol-1 |
| 0 |
| image |
title |
/images/user-guide/scada/symbols-dev-guide/download-scada-symbol-1-ce.png |
You can download the SCADA symbol with all settings. To do this, click the "Download SCADA symbol" button on the left panel of the SCADA symbol editor. The SVG file will be saved to your PC. |
|
|