### SCADA widget v2

 

We're excited to introduce the **SCADA widget v2** for the Cumulocity IoT platform — a full Angular rewrite of the previous AngularJS-based SCADA widget, now with AI-assisted SVG generation, interactive placeholder creation, an in-platform code editor, and a modern web component rendering engine.  
If you've been using the original SCADA widget, your existing configurations will continue to work in **legacy mode**, which preserves current rendering but does not support all of the new v2 features. To take full advantage of everything v2 offers, you can re-configure the widget using the new tools.

<div class="p-16 m-auto col-lg-max">
<img src="./c8y-style-assets/scada-widget-preview.png" alt="SCADA Widget" class="border-all fit-w">
</div>

&nbsp;

### Key features

&nbsp;

#### AI-assisted SVG generation

✅ **Generate with AI**: Describe your industrial system and let the AI agent generate an SVG visualization with placeholder mappings suggested based on the selected device's properties and measurements.\
✅ **Context-aware suggestions**: The agent analyzes the device context (name, properties, supported measurements) and proposes relevant visualization options.\
✅ **Analyze and suggest / Best guess**: Use the built-in prompt suggestions to either explore multiple visualization ideas or let the AI pick the most suitable one automatically.

&nbsp;

#### Interactive placeholder creation

✅ **Automatic placeholder detection**: When uploading or pasting an SVG, all text and tspan elements are automatically marked as potential placeholders, ready to bind to device data.\
✅ **Click-to-placeholder**: In the live widget preview, simply click a text or tspan element in the SVG to instantly convert it into a dynamic placeholder.\
✅ **Copy placeholder expression**: Each mapping entry can be easily copied as a template expression to be pasted into SVG code.

&nbsp;

#### Modern web component rendering

✅ **Lit-based web components**: SVG visualizations are rendered as isolated web components with full support for JavaScript template literals and reactive expressions.\
✅ **`c8yScadaValues` API**: Access all mapped placeholder values directly in SVG expressions (e.g., `${this.c8yScadaValues?.temperature}`).\
✅ **`c8yScadaFunctions` API**: Built-in helpers for navigation (`goToDeviceDetails`, `goToGroupDetails`) and alarm visualization (`getActiveAlarmsStatusClass`).\
✅ **Conditional styling and dynamic calculations**: Apply CSS classes or compute values based on live data — colour-coded alarm indicators, progress bars, or threshold-based text colours work out of the box.

&nbsp;

#### Flexible SVG configuration

✅ **Multiple input methods**: Upload an `.svg` file via drag-and-drop, paste SVG code directly, or generate it with AI — all from the same configuration section.\
✅ **Display options**: Choose between *Full width* (stretches to widget width, overflowing area is scrollable) or *Contain* (entire SVG fits in the widget preserving aspect ratio) display modes.\
✅ **Alignment controls**: When using the *Contain* mode, independently control horizontal and vertical alignment of the SVG within the widget.

&nbsp;

#### Advanced editor

✅ **Edit SVG code directly on the platform**: The original SCADA widget required preparing and editing SVG files outside of Cumulocity IoT. The new *Advanced editor* lets you write and modify SVG code directly within the widget configuration — no external tooling needed.\
✅ **Syntax highlighting and code completion**: The editor provides syntax highlighting and property key suggestions derived from the current placeholder mappings.\
✅ **Live preview**: Changes in the editor are reflected immediately in the widget preview without saving.

&nbsp;

#### Compatibility with the classic SCADA widget

✅ **Automatic legacy detection**: Existing SCADA widget configurations (including binary SVG files, per-device mappings, computed properties, and fieldbus mappings) are automatically recognized and run in legacy mode — no manual migration or data loss. Configurations running in legacy mode are clearly indicated.\
✅ **Upgrade path**: You can re-configure any widget using the new v2 tools to leave legacy mode and unlock the full feature set.

&nbsp;

The **SCADA widget v2** is currently available in preview mode behind a feature flag.  
We encourage you to explore it with your existing SVG assets, try generating a visualization with AI, and experience the new interactive placeholder workflow firsthand.

&nbsp;

---