Skip to content
Stand with Ukraine flag

HP Top Tee Connector

HP Top tee connector SCADA symbol

This widget belongs to the General high-performance SCADA symbols bundle — a collection of versatile components for building interactive high-fidelity SCADA dashboards on ThingsBoard.

It renders a T-shaped connector with openings on the left, top, and right — a horizontal run with an upward branch. Each arm carries its own animated fluid flow stripe that can be shown or hidden and controlled in direction and speed from live device data.

Use it wherever a main horizontal pipeline splits off an upward branch — for example, routing a horizontal supply line to an elevated tank, heat exchanger, or vent — in HVAC, water treatment, industrial automation, or building management systems.

  • Display a T-shaped connector with openings at the left, top, and right.
  • Independently show or hide an animated fluid flow stripe on each arm (left, top, right) based on device state.
  • Control the flow direction (forward or reverse) on each arm from live device data.
  • Control the flow animation speed on each arm from live device data.
  • 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 Top tee connector.
  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 attribute or telemetry values used to drive the widget’s visual state.

The SCADA symbol defines the visual shape of the widget. The HP Top tee connector 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, driven by real-time data from the connected device. The three arms — Left connector, Top connector, and Right connector — are configured independently. Each arm has the same three parameters.

ParameterDefaultDescription
Flow presenceAbsentWhether the animated fluid flow stripe is shown on the left arm. See Presence and direction configuration.
Flow directionForwardDirection of the animated flow on the left arm. See Presence and direction configuration.
Flow animation speed1Speed of the flow animation on the left arm. 1 is normal speed; 0 disables animation; values above 1 slow the animation; values below 1 speed it up. See Flow animation speed configuration.
ParameterDefaultDescription
Flow presenceAbsentWhether the animated fluid flow stripe is shown on the top arm. See Presence and direction configuration.
Flow directionForwardDirection of the animated flow on the top arm. See Presence and direction configuration.
Flow animation speed1Speed of the flow animation on the top arm. See Flow animation speed configuration.
ParameterDefaultDescription
Flow presenceAbsentWhether the animated fluid flow stripe is shown on the right arm. See Presence and direction configuration.
Flow directionForwardDirection of the animated flow on the right arm. See Presence and direction configuration.
Flow animation speed1Speed of the flow animation on the right arm. See Flow animation speed configuration.

Applies to Flow presence and Flow direction on each arm. Click the edit icon next to a parameter to open its configuration dialog. When Action is set to Do nothing, select a fixed value:

ParameterValue
Flow presencePresent or Absent
Flow directionForward or Reverse

For all other actions, the configuration dialog includes these options:

  • Execute RPC

    Read the parameter value from an RPC response.

    ParameterDescription
    MethodRPC method to call, like getFlowState.
    Action result converterNone — parameter is activated when the result matches the value you specify; Function — parameter is activated when your f(data) returns true.
    ‘Present’/‘Forward’ when result isThe value or condition that activates the present or forward state.
    RPC request timeout (ms)How long to wait for a device response before timing out (Advanced settings).
    RPC request persistentStores and retries the command until the device comes online (Advanced settings).
  • Get attribute

    Read the parameter value from a device attribute.

    ParameterDescription
    Attribute scopeWhere the attribute is stored: Any, Client, Server, or Shared.
    Attribute keyAttribute name to read, like flowPresent or flowDirection.
    Action result converterNone — parameter is activated when the attribute equals the value you specify; Function — parameter is activated when your f(data) returns true.
    ‘Present’/‘Forward’ when result isThe value or condition that activates the present or forward state.
  • Get time series

    Read the parameter value from the latest telemetry reading.

    ParameterDescription
    Time series keyTelemetry key to monitor, like flowPresent.
    Action result converterNone — parameter is activated when the telemetry value equals what you specify; Function — parameter is activated when your f(data) returns true.
    ‘Present’/‘Forward’ when result isThe value or condition that activates the present or forward state.
  • Get alarm status

    Activate the present or forward state when a specific alarm is active on the device.

    ParameterDescription
    Alarm severityWhich severity levels trigger the active state: Critical, Major, Minor, Warning, or Indeterminate.
    Alarm typesAny alarm, or a specific alarm type.
  • Get dashboard state id

    Activate the present or forward state based on which dashboard state is currently open.

    ParameterDescription
    Action result converterNone — parameter is activated when the state name matches the text you enter; Function — parameter is activated when your f(data) returns true.
    ‘Present’/‘Forward’ when result isThe state name or condition that activates the present or forward state.
  • Get dashboard state object

    Activate the present or forward state using the full dashboard state context; use this when you need to evaluate multiple state parameters at once.

    ParameterDescription
    Parse value functionA 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.
    ‘Present’/‘Forward’ when result isThe expected type and value that activates the present or forward state. Choose String, Integer, Double, Boolean (then select True or False), or JSON.

Applies to Flow animation speed on each arm. Click the edit icon next to the parameter to open its configuration dialog. When Action is set to Do nothing, enter a fixed numeric speed value.

For all other actions, the configuration dialog works the same way:

  • Execute RPC

    Read the speed value from an RPC response.

    ParameterDescription
    MethodRPC method to call, like getFlowSpeed.
    Action result converterNone — 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 persistentStores and retries the command until the device comes online (Advanced settings).
  • Get attribute

    Read the speed value from a device attribute.

    ParameterDescription
    Attribute scopeWhere the attribute is stored: Any, Client, Server, or Shared.
    Attribute keyAttribute name to read, like flowSpeed.
    Action result converterNone — uses the attribute value directly; Function — returns the value from your f(data) function.
  • Get time series

    Read the speed value from the latest telemetry reading.

    ParameterDescription
    Time series keyTelemetry key to monitor, like flowSpeed.
    Action result converterNone — uses the telemetry value directly; Function — returns the value from your f(data) function.
  • Get alarm status

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

    ParameterDescription
    Alarm severityWhich severity levels trigger the active state: Critical, Major, Minor, Warning, or Indeterminate.
    Alarm typesAny alarm, or a specific alarm type.
  • Get dashboard state id

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

    ParameterDescription
    Action result converterNone — uses the state name directly; Function — returns the value from your f(data) function.
  • Get dashboard state object

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

    ParameterDescription
    Parse value functionA 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, the connector line style, and the flow animation stripe style.

SettingDefaultDescription
TitleHP Top tee connectorWidget title displayed in the header. Supports entityName and entityLabel variables.
Card iconIcon shown in the widget header. Configure its size and color.
Line6 px, blackThickness and color of the main connector line.

Flow subsection — controls the appearance of the animated fluid flow stripe on all arms:

SettingDefaultDescription
Line4 px, light blueThickness and color of the flow animation stripe.
Line styleDash 10 px, Gap 10 pxDash and gap lengths of the flow stripe. For smooth looping, use values that divide evenly into 100.
Dash capButtEnd cap style for each dash segment: Butt (flat), Round (rounded ends), or Square (flat with half-width extension).

The Card appearance section controls the widget container style.

SettingDefaultDescription
BackgroundTransparentCard background color.
Show card buttonsFullscreenButtons shown on the card when hovered.
Card border radius0pxRounding of card corners.
Card padding12pxInner spacing between the card edge and widget content.

Flow animation does not run on an arm

CauseSolution
Flow presence for that arm is Do nothing with value set to AbsentOpen the Flow presence edit dialog for the affected arm and set the value to Present, or configure it to read from a device attribute or time series key.
Flow animation speed for that arm is 0Open the Flow animation speed edit dialog for the affected arm and set a non-zero value.

Flow animation runs in the wrong direction on an arm

CauseSolution
Flow direction for that arm is set to the opposite valueOpen the Flow direction edit dialog for the affected arm and switch between Forward and Reverse, or configure it to read the direction from a device 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 Top tee connector to represent branching flow paths between diagram elements.