SCADA animation can be configured with the Inkscape extension called SAGEX, which stands for SCADA Animation Graphic Editor’s eXtension. The output of this extension is compatible with the previous SAGE that was included under the object properties in the specially built Inkscape 0.46 SAGE.

SAGEX can only work in Inkscape 1.0 or above, otherwise a popup warning will appear if you try to run SAGEX in Inkscape below version 1.0.

Installation

• Download extension from https://ecava.com/dx/sagex/sagex.7z or contact technical support.
  
• Copy sagex.inx and sagex.py to the extension directory.
  
• By default in Windows, C:\Program Files\Inkscape\share\inkscape\extensions
  
• If you are not sure about the actual directory, please go to Inkscape > Edit > Preferences > System > Scroll to Inkscape extension.
  The diagram below shows the installation path.
  
• Restart Inkscape program.

Launching

To launch the SAGEX is simple, just go to the Inkscape menu and click for Extensions > SAGEX. A popup with various animation tabs will appear for you to configure any selected graphic element. The SAGEX popup can then be opened by using Alt+Q as the shortcut key after the first launch. The diagram below shows the Inkscape extension of the Color tab.

General Usage

When SAGEX is launched, it reads the selected SVG element and displays its current animation settings across multiple tabs. The element’s ID is shown at the top and can be edited.

Animation settings are saved automatically when the SAGEX popup loses focus (e.g., clicking back to Inkscape) or when the close button is clicked. A busy cursor is shown while the popup is open — this is a known Inkscape behavior.

Validation Indicators

Each animation tab shows a status indicator next to its name:

• Check mark — animation is configured with valid/complete data
  
• Cross mark — animation is configured but has incomplete or invalid data (e.g., missing min/max values)

Element Type Restrictions

Not all animation types are available for every SVG element:

• Bar — Rectangle elements only
  
• Get, Text — Text Element only
  
• Zoom, Tooltips — Hidden for Text Element
  
• Color — Hidden for Group elements
  
• Faceplate — Group elements only

Prefix/Variable System

SAGEX supports a variable prefix system for faceplate/template reuse. Prefixes allow a single SVG template to be reused with different tag paths.

• Prefix format: %VariableName.TagPath
  
• JSON-sourced prefixes: Automatically generated from JSON module files as module_id.task_id
  
• User-defined prefixes: Managed through the Master Faceplate frame (visible when no element is selected), where users can map variable names to tag path prefixes
  
• Prefix combo boxes appear on most animation tabs alongside the tag entry field

Animation Tabs

Bar

Configures a progress bar animation on a Rectangle element. The rectangle fills proportionally based on a tag value between min and max.

• Tag — The data tag to read the value from
  
• Prefix — Optional variable prefix for faceplate reuse
  
• Min — Minimum value (0% fill)
  
• Max — Maximum value (100% fill)

Faceplate (Clone)

Configures variable mapping for reusable SVG components (Group elements only). Maps variable names to tag path values, enabling a single group to be reused with different data sources.

• Variable — The variable name (displayed with % prefix)
  
• Value — The tag path value to substitute

Color

Configures conditional color changes based on tag values. Each row in the color table maps a tag value to a color.

• Tag — The data tag to monitor
  
• Value — The tag value to match
  
• Color — The color to apply (hex code, e.g., #FF0000). A color picker dialog is available.

Opacity

Configures opacity animation based on a tag value between min and max.

• Tag — The data tag to read the value from
  
• Prefix — Optional variable prefix
  
• Min — Minimum value (fully transparent)
  
• Max — Maximum value (fully opaque)

Open

Configures navigation/link behavior when the element is clicked.

• Source — The URL or tag path to open
  
• Source Type — URL or Tag
  
• Destination — Current Window (_self), New exclusive window (_blank), or New shared window (_shared)
  
• X, Y — Window position (for new windows)
  
• Width, Height — Window size (for new windows)

Popup

Configures a popup window that appears when the element is clicked.

• Source — The URL/page to show in the popup
  
• X, Y — Popup position
  
• Width, Height — Popup dimensions

Rotate

Configures rotation animation based on a tag value between min and max (in degrees).

• Tag — The data tag to read the rotation value from
  
• Prefix — Optional variable prefix
  
• Min — Minimum rotation angle
  
• Max — Maximum rotation angle

Script

Configures custom JavaScript execution on mouse/keyboard events. Supports 6 event types:

• Mouse Up — Triggered when mouse button is released
  
• Mouse Down — Triggered when mouse button is pressed
  
• Mouse Over — Triggered when mouse enters the element
  
• Mouse Out — Triggered when mouse leaves the element
  
• Mouse Move — Triggered when mouse moves over the element
  
• Key Down — Triggered on keyboard key press, with optional Ctrl/Alt/Shift modifiers and a specific key

Each event has a parameter field for the JavaScript code to execute.

Get

Configures reading a data tag value and displaying it as text (TextElement only).

• Tag — The data tag to read from
  
• Prefix — Optional variable prefix
  
• Alignment — Left or Right text alignment
  
• Type — Good (shows last known good value) or Live (shows real-time value)

Set

Configures writing a value to a data tag when the text element is clicked (TextElement).

• Tag — The data tag to write to
  
• Prefix — Optional variable prefix
  
• Alignment — Left or Right text alignment
  
• Type — Data (direct value) or Variable (reference)
  
• Prompt — The prompt text shown to the user
  
• Source — The source for the value to write

Slider

Configures a slider control widget for adjusting a tag value.

• Tag — The data tag to control
  
• Prefix — Optional variable prefix
  
• Min — Minimum slider value
  
• Max — Maximum slider value
  
• Readonly — If checked, the slider is display-only (cannot be dragged)

Tooltips

Configures hover tooltip text for the element (hidden for TextElement).

• Lines 1-5 — Up to 5 lines of tooltip text
  
• Font Size — Tooltip font size (default: 12)
  
• Font Style — Tooltip font style

Zoom

Configures zoom/alignment behavior for the element (hidden for TextElement).

• Tag — The data tag to read from
  
• Prefix — Optional variable prefix
  
• Alignment — None, Center, Left, Right, Top, or Bottom

Text

Configures text substitution based on tag values (TextElement only). Maps tag values to display text.

• Tag — The data tag to monitor
  
• Prefix — Optional variable prefix
  
• Tag Value / Text — Pairs of tag values and the corresponding text to display

Master Faceplate

When no element is selected, the Master Faceplate frame is shown instead of the animation tabs. This manages root-level prefix/variable mappings that apply across the entire SVG document.

• JSON-sourced prefixes — Read-only entries loaded from JSON module files (displayed in gray)
  
• User-defined prefixes — Editable entries where users can add custom variable-to-prefix mappings
  
• Conflict detection — Duplicate variable names are flagged as “Variable conflict”
  
• Usage count — Shows how many times each prefix is used in the document

Tag Browsing

Tag linking for animation can be entered manually, or selected from an autocomplete dropdown populated from project data files. SAGEX automatically scans the directory containing the currently viewed SVG file for CSV and JSON files at startup.

CSV Tag Files

CSV files used for DX modules and exported from IGX’s Project Editor can be used directly. The CSV file must contain at least one header column called “Name” or “TagName” (case-insensitive) regardless of the column sequence. If a CSV file contains no matching column, it will be ignored. Both UTF-8 and UTF-16LE encoded CSV files are supported.

Tag names extracted from CSV files populate the autocomplete dropdown on tag entry fields. As you type, the dropdown filters to show matching tags.

JSON Module Files

JSON files containing module and task definitions are also scanned. The JSON file should have an id field (module ID) and a task array, each with an id field (task ID). These are combined into prefix values in the format module_id.task_id for use in the prefix/variable system.

Enable/Disable Filtering

If a CSV file contains an “Enable” or “Disable” column, tags can be filtered based on their enabled status:

• Enable column: Tags with “true” or “yes” are included; others are excluded.
  
• Disable column: Tags with “false” or “no” are included; others are excluded.

HTML Configuration

Once the SVG file is configured for animation with SAGEX, it shall be linked to an HTML file with a class name specified as “igx-svg” and containing a child <object> with `data` attribute that links to the animated SVG file.

<!DOCTYPE HTML>
<html xmlns=“http://www.w3.org/1999/xhtml”\>
<head>
<meta charset=”utf-8”/>
<link href=“system/styles/igrX2.css” rel=“stylesheet” type=“text/css” />
<style type=“text/css”>
</style>

</head>
<body>
<div id=“” class=“igx-svg” data-url=“127.0.0.1:1884/dxsvg” data-role=“ENG,SUP,OPR” data-tag=“tag01, tag02, tag03”>
<object type=“image/svg+xml” style=“overflow:hidden; position: absolute;” wmode=“transparent” height=“100%” width=“100%”
data=“sample-animation.svg”>
</object>
</div>
<script type=“text/javascript” src=“system/scripts/igdx.js”></script>
</body>
</html>

Server and Data access

The SCADA host server can be configured as an attribute under `data-url` with three segments in the following syntax.
{IP}{:Port}{/Project[/]}
Three segments are all optional and have their default values and the slash after project name is also optional.

When the attribute is undefined, the browser address link that has the similar segments arrangement will be used as the second fallback configuration, particularly the domain name or IP address. However the port number will always fallback to default value because the browser address link is for the HTTP(S) port itself.

Lastly the project name can be specified in the first subfolder in the browser address link, or otherwise default project name will be the HTML filename itself. The project name will be used when the front-end is sending commands or data.

When multiple projects are running on a shared server. The project name should be specified, otherwise the SVG page will be receiving excessive realtime data from all projects and the performance will be affected.

The `data-role` parameter is optional and can be specified with one or more roles that are separated with commas. Further, if the `role` is also unspecified, the SVG page will also receive realtime data from all roles and impact the performance. Conversely, specifying the role will help to narrow down to the limited tags only, and also sending the commands or data to all of the targeted roles or groups.

The `data-tag` is the additional and optional parameter that can be added for specifying a specific realtime data source. Usually more than one tag will be needed and they can be separated with commas.