HP Dynamic Horizontal Scale

• Display a live sensor value as a pointer position on a horizontal scale.
• Drive all four threshold boundaries (high critical, high warning, low warning, low critical) from live device data.
• Optionally show a target or setpoint marker on the scale.
• Toggle the visibility of each threshold zone independently.
• Configure the scale range, value label, units, and decimal precision.
• Set independent colors for the scale, warning zones, and critical zones.
• Trigger a dashboard action when the widget symbol is clicked.
• Receive state data from device attributes, time series, alarm status, or dashboard state.

1. Open the dashboard and switch to edit mode.
2. Click Add widget at the top, or the Add new widget icon in the center of the screen.
3. Open the General high-performance SCADA symbols widget bundle.
4. Select HP Dynamic horizontal scale.
5. Configure the widget settings, then click Add.

The widget connects to a single data source: either a Device or an Entity alias that resolves to a device. This device provides the telemetry or attribute values used to drive the widget’s visual state.

The SCADA symbol defines the visual shape of the widget. The HP Dynamic horizontal scale widget has a pre-selected symbol from the General high-performance SCADA symbols bundle. To use a different symbol, click Browse SCADA symbol from gallery and choose one from the library, or upload your own.

Behavior parameters define what the widget displays and how it responds to user interaction, driven by real-time data from the connected device.

Parameter	Default	Description
Value	Use time series 'temperature'	The current sensor reading. The arrow pointer moves to the corresponding position on the scale. See Data source configuration.
High Critical state	85	Upper boundary of the critical zone. The scale segment from this value to the maximum is colored with the critical color. See Data source configuration.
High Warning state	70	Upper boundary of the warning zone. The scale segment from this value to High Critical state is colored with the warning color. See Data source configuration.
Low Warning state	30	Lower boundary of the warning zone. The scale segment from Low Critical state to this value is colored with the warning color. See Data source configuration.
Low Critical state	15	Lower boundary of the critical zone. The scale segment from the minimum to this value is colored with the critical color. See Data source configuration.
Target value	Use attribute 'target'	Optional reference or setpoint value. When configured, a second marker appears on the scale at this position. See Data source configuration.
On click	Do nothing	Action triggered when the user clicks the widget symbol. See Click action configuration.

Applies to On click. Select one action type from the list below.

• Do nothing

  The symbol is clickable but performs no action. Use while testing styles or as a placeholder.

• Navigate to new dashboard state

  Switches to a different view within the same dashboard, like opening a sensor details screen.

  Parameter	Description
  Target dashboard state	The state to open (required).
  Open right dashboard layout (mobile view)	Opens a side panel instead of replacing the view (mobile only).
  Set entity from widget	Passes the current entity to the target state.
  State entity parameter name	The key the entity is passed under.
  Dashboard state display option	Normal (same view), In separate dialog (popup), or In popover (inline overlay).

• Update current dashboard state

  Updates the context of the current view, like switching the selected device, without navigating away.

  Parameter	Description
  Target dashboard state	The state to switch to (optional).
  Open right dashboard layout (mobile view)	Opens a side panel on mobile.
  Set entity from widget	Passes the current entity to the updated state.
  State entity parameter name	The key the entity is passed under.

• Navigate to other dashboard

  Opens a completely different dashboard, like jumping from this system view to a global overview.

  Parameter	Description
  Target dashboard	The dashboard to open (required).
  Target dashboard state	The specific view to open within that dashboard.
  Open in a new browser tab	Opens the dashboard without leaving the current page.
  Set entity from widget	Passes the current entity to the other dashboard.
  State entity parameter name	The key the entity is passed under.

• Custom action

  Runs custom JavaScript on click to implement any behavior not covered by the built-in options. Use it to make HTTP requests, open custom dialogs, call other widget APIs, or interact with external services. The function receives: $event, widgetContext, entityId, entityName, additionalParams, entityLabel.

• Custom action (with HTML template)

  Same as Custom action, but also renders a custom HTML panel or dialog when the symbol is clicked. The function receives an additional htmlTemplate parameter: $event, widgetContext, entityId, entityName, htmlTemplate, additionalParams, entityLabel.

  Parameter	Description
  Resources	External scripts and styles loaded before the action runs.
  CSS	Styling for the HTML template.
  HTML	Layout of the rendered dialog or panel.
  JS	Action logic.

• Mobile action

  Triggers a native device feature inside a ThingsBoard mobile app, like the camera or QR scanner.

  Parameter	Description
  Mobile action type	Take picture from gallery, Take photo, Open map directions, Open map location, Scan QR Code, Make phone call, Get phone location, Take screenshot, or Device provision.

• Open URL

  Opens a website or external link when clicked.

  Parameter	Description
  URL	The address to open (required).
  Open in a new browser tab	Keeps the current dashboard open while opening the link.

Applies to Value, High Critical state, High Warning state, Low Warning state, Low Critical state, and Target value. Click the edit icon next to a parameter to open its configuration dialog. When Action is set to Do nothing, the value is a fixed number:

Parameter	Value
Value	Numeric value to display statically on the scale
High Critical state	Numeric threshold for the upper critical boundary
High Warning state	Numeric threshold for the upper warning boundary
Low Warning state	Numeric threshold for the lower warning boundary
Low Critical state	Numeric threshold for the lower critical boundary
Target value	Numeric value to use as a fixed target marker

For all other actions, the configuration dialog works the same way regardless of which parameter you are editing:

• Execute RPC

  Read the parameter value from an RPC response.

  Parameter	Description
  Method	RPC method to call, like getTemperature or getHighCritical.
  Action result converter	None — uses the result value directly; Function — returns the value from your f(data) function.
  RPC request timeout (ms)	How long to wait for a device response before timing out (Advanced settings).
  RPC request persistent	Stores and retries the command until the device comes online (Advanced settings).

• Get attribute

  Read the parameter value from a device attribute.

  Parameter	Description
  Attribute scope	Where the attribute is stored: Any, Client, Server, or Shared.
  Attribute key	Attribute name to read, like highCritical or target.
  Action result converter	None — uses the attribute value directly; Function — returns the value from your f(data) function.

• Get time series

  Read the parameter value from the latest telemetry reading.

  Parameter	Description
  Time series key	Telemetry key to monitor, like temperature.
  Action result converter	None — uses the telemetry value directly; Function — returns the value from your f(data) function.

• Get alarm status

  Set the parameter value based on alarm activity on the device.

  Parameter	Description
  Alarm severity	Which severity levels trigger the active state: Critical, Major, Minor, Warning, or Indeterminate.
  Alarm types	Any alarm, or a specific alarm type.

• Get dashboard state id

  Set the parameter value based on which dashboard state is currently open.

  Parameter	Description
  Action result converter	None — uses the state name directly; Function — returns the value from your f(data) function.

• Get dashboard state object

  Set the parameter value using the full dashboard state context; use this when you need to evaluate multiple state parameters at once.

  Parameter	Description
  Parse value function	A f(data) function that receives the current dashboard state object. Use data.id to read the active state name, or data.params to inspect state parameters.

The Appearance section controls the widget title, scale range, value display, label, units, threshold zone visibility, and colors.

Setting	Default	Description
Title	HP Dynamic horizontal scale	Widget title displayed in the header. Supports entityName and entityLabel variables.
Card icon	—	Icon shown in the widget header. Configure its size and color.
Min and max value	Min: 0, Max: 100	The range of the scale. The pointer is positioned proportionally within this range.
Value	On	Whether to display the numeric value on the widget. Configure decimal precision, font, and color.
Label	Outdoor	Descriptive text label shown alongside the scale. Configure its font and color.
Units	°C	Unit suffix shown on the scale. Configure its font and color.
Arrow color	Gray	Color of the pointer arrow indicating the current value position.
Target	Off	Whether to display the target marker on the scale. When enabled, configure its color.
Show High Critical scale	On	Whether to render the high critical zone on the scale.
Show High Warning scale	On	Whether to render the high warning zone on the scale.
Show Low Warning scale	On	Whether to render the low warning zone on the scale.
Show Low Critical state	On	Whether to render the low critical zone on the scale.
Scale color	Light blue	Base color of the scale bar in the normal (non-threshold) zone.
Warning scale color	Default: Gray, Active: Orange	Colors for the warning zones: Default is used when the value is outside the zone, Active when the value is inside it.
Critical scale color	Default: Gray, Active: Red	Colors for the critical zones: Default is used when the value is outside the zone, Active when the value is inside it.

The Card appearance section controls the widget container style.

Setting	Default	Description
Background	Transparent	Card background color.
Show card buttons	Fullscreen	Buttons shown on the card when hovered.
Card border radius	0px	Rounding of card corners.
Card padding	12px	Inner spacing between the card edge and widget content.

Pointer does not move or is always at zero

Cause	Solution
Value action is Do nothing with a zero or missing value	Open the Value edit dialog and configure it to read from a device time series key or attribute.
Device is not sending telemetry	Confirm the device is online and publishing the expected time series key.

Threshold zones do not appear or are in the wrong position

Cause	Solution
Threshold parameters are set to Do nothing with default values that fall outside the scale range	Open each threshold edit dialog and configure it to read from a device attribute, or set the Do nothing value within the Min and max value range.
Zone visibility is disabled	Check that Show High Critical scale, Show High Warning scale, Show Low Warning scale, and Show Low Critical state are enabled in the Appearance section.

Target marker does not appear

Cause	Solution
Target is disabled in Appearance	Enable the Target toggle in the Appearance section.
Target value action is Do nothing with a zero value	Open the Target value edit dialog and configure it to read from an attribute or time series key.

This widget is used in the following ready-made solution template built on the General high-performance SCADA symbols bundle:

• SCADA Swimming pool — a complete swimming pool monitoring dashboard that uses the HP Dynamic horizontal scale to display sensor readings with device-specific warning and critical thresholds.