SCADA Dashboards

SCADA dashboards provide a specialized layout for building interactive supervisory control interfaces. Available since ThingsBoard 3.8.0, the SCADA layout places widgets on a fixed column grid that does not reflow or resize — symbols stay at their exact positions regardless of browser window size, making it ideal for process diagrams, factory floor plans, and energy system schematics.

Watch this video to learn how to set up a SCADA system using ThingsBoard to monitor and control an industrial water tank system!

The key difference between the SCADA layout and the default layout is positioning. In a default layout, widgets reflow and resize with the browser window. In a SCADA layout:

• Widgets are placed on a fixed column grid that does not reflow or resize.
• The canvas scrolls horizontally when the viewport is narrower than the configured minimum width.
• Margin — space between the dashboard edge and the SCADA canvas (in pixels).

1. Navigate to the Dashboards page and click + → Create new dashboard. Enter a title and click Add.
2. The dashboard opens in edit mode. Click Layouts in the toolbar.
3. In the Manage layouts dialog, change the layout type to SCADA and click Save.

To access layout settings, click Layouts in the edit mode toolbar, then click the gear icon next to the layout row in the Manage layouts dialog.

Set the column count for the SCADA grid. Values must be multiples of 24 (24 to 1008). Higher values give finer placement granularity.

Set the minimum canvas width in columns. If the viewport is narrower, a horizontal scrollbar appears.

Set a custom background color for the SCADA canvas.

Upload a background image and choose a Background size mode — Fit width, Fit height, Cover, Contain, or Original size. The image typically represents the process diagram on which SCADA symbols are overlaid.

A dashboard can combine regular dashboard states with SCADA states, enabling navigation from a SCADA overview to a detail view — or from a symbol to a popup widget.

You can download and import a sample multi-state SCADA dashboard to explore this feature.

A SCADA symbol is an SVG element that represents a piece of equipment — a valve, pump, tank, or any process component. Symbols include built-in behavior tags that connect them to device data.

ThingsBoard provides 100+ SCADA symbols out of the box, with plans to expand to 500+. You can also create custom SCADA symbols.

Starting with ThingsBoard 3.9, high-performance SCADA symbols are available — streamlined graphical elements designed for large-scale dashboards:

• Simplified design — clean, standardized visuals that reduce rendering overhead.
• Color coding — status communicated through color changes.
• Dynamic changes — real-time visual updates reflecting process state.
• Standardization — consistent look and feel across all diagrams.
• Compatibility — work seamlessly on different devices and screen sizes.

The SCADA symbol widget displays an SVG-based SCADA symbol on the dashboard and connects it to a target entity for live data.

1. In dashboard edit mode, click + Add widget in the toolbar.
2. In the widget library, find and open a SCADA symbols bundle (e.g., Traditional SCADA fluid system).
3. Choose a symbol (e.g., Horizontal wheel valve),
4. Configure:
   • The target device — the device or entity the symbol will visualize.
   • SCADA symbol — the SVG symbol from the library to render.
   • Behavior — how the symbol reads and writes data.
   • Appearance — symbol-specific visual properties such as state colors and rotation.
   • Card appearance — background, border radius, padding, and visible card buttons.
5. Click Add.

Select the device or entity the SCADA symbol will visualize. You can specify a specific device or an entity alias pointing to a single entity.

Select which SVG symbol from the library the widget renders. The selected symbol determines which behavior parameters are available.

Behavior settings define how the symbol reads and writes data. Each behavior parameter has an action type that determines the data source or target. The set of parameters is specific to the selected symbol and defined by its author.

Action types to retrieve value:

Action type	Description
Do nothing	Uses a constant value defined in the widget
Execute RPC	Sends an RPC request to the device and uses the response
Get attribute	Subscribes to an entity attribute
Get time series	Subscribes to the latest time-series value
Get alarm status	Subscribes to the entity’s alarm status
Get dashboard state	Uses the name of the current dashboard state

Action types for target entity:

Action type	Description
Execute RPC	Sends an RPC command to the target device
Set attribute	Writes a value to an attribute on the target entity
Add time series	Pushes a new time-series data point to the target entity

Widget action (On click) — configure what happens when a user clicks the SCADA symbol. See widget actions for details.

Example: Horizontal Wheel Valve — all three behavior parameters use the shared attribute open on the target device: Opened reads it to render the valve state; Open writes true when the user opens the valve; Close writes false when the user closes it.

Appearance settings include generic parameters (title, card icon) and symbol-specific visual properties defined by the symbol’s author — such as state colors and rotation angles.

Card appearance settings are common to all SCADA symbol widgets: card background (transparent by default), visible card buttons, border radius, and padding.

---

Capability	Description	Guide
Configure the layout	Set column count, minimum width, background color, and background image for the SCADA canvas	Layouts
Create custom SCADA symbols	Design your own SVG-based symbols with built-in behavior tags for use in SCADA dashboards	Custom SCADA symbols
Add SCADA symbol widgets	Place SVG-based equipment symbols on the canvas and connect them to live device data via behavior parameters	Add SCADA symbol widget
Build multi-state SCADA dashboards	Combine SCADA states with regular dashboard states to navigate from an overview to detail views or popup widgets	Dashboard states
Trigger widget actions on click	Configure what happens when a user clicks a SCADA symbol — navigate to a state, open a popup, or send an RPC command	Widget actions