Bottom Flow Meter

This widget belongs to the Traditional SCADA fluid system bundle — a collection of pipe segments, fittings, valves, pumps, and gauges designed for building fluid system diagrams on ThingsBoard dashboards. It combines a numeric flow display with a live pipe segment, showing both the measured flow rate and the real-time fluid state on a single symbol.

• Display a numeric flow rate value on the widget face.
• Indicate warning and critical states with configurable border colors.
• Animate a blinking effect when the device is in critical state.
• Show a broken indicator when the device is in a fault condition.
• Trigger a dashboard action when the display is clicked.
• Visualize fluid presence and flow state through the integrated pipe segment.
• Animate fluid flow in either direction at configurable speed.
• Indicate leak conditions on the pipe.
• Apply custom colors to fluid, pipe, and display border elements independently.
• Receive state data from device attributes, time series, alarm status, or dashboard state.

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. Each flow meter widget has a pre-selected symbol from the Traditional SCADA fluid system bundle. To use a different symbol, click Browse SCADA symbol from gallery and choose one from the library, or upload your own.

Behavior parameters are organized into two groups: Display and Pipe. Each parameter supports the same set of actions — see Behavior configuration for the full list.

Display parameters control the numeric readout and state indicators shown on the widget face.

Parameter	Default	Values	Description
Value	Use time series 'flowRate'	number	Numeric flow rate value shown on the display.
Warning state	Use alarm status	True, False	Whether the component is in warning state.
Critical state	Use alarm status	True, False	Whether the component is in critical state.
Critical state animation	False	True, False	Whether to enable blinking animation when the component is in critical state.
Broken	False	True, False	Whether the component is in a broken or fault state.
On display click	Do nothing	—	Action triggered when the user clicks on the display face.

Defines what happens when the user clicks the display face on the dashboard. Select one action type from the list below.

• Do nothing

  The display 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 device 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 alarms view.

  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 display 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.

Pipe parameters control the fluid animation through the integrated pipe segment.

Parameter	Default	Values	Description
Fluid presence	Absent	Present, Absent	Whether fluid is present in the pipe.
Flow presence	Absent	Present, Absent	Whether fluid is flowing through the pipe.
Flow direction	Forward	Forward, Reverse	Direction of the fluid flow animation.
Flow animation speed	1	number	Speed of the flow animation. 1 is normal speed, 0 disables animation, < 1 - slower animation, > 1 - faster animation.
Leak	False	True, False	Whether a leak is present on the pipe.

To configure a parameter, click its edit icon.

Display parameters — Do nothing values:

Parameter	Value
Value	Any number — value shown on the display until the device sends data.
Warning state	True or False
Critical state	True or False
Critical state animation	True or False
Broken	True or False

Pipe parameters — Do nothing values:

Parameter	Value
Fluid presence	Present or Absent
Flow presence	Present or Absent
Flow direction	Forward or Reverse
Flow animation speed	Any number — 1 for normal speed, 0 to stop, < 1 - slower animation, > 1 - faster animation.
Leak	True or False

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 getState or getFlowRate.
  Action result converter	None — parameter is activated when the result matches the value you specify; Function — parameter is activated when your f(data) returns true.
  ’[parameter]’ when result is	The value or condition that activates this parameter (not shown for Value, which uses the raw numeric result).
  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 state or flowRate.
  Action result converter	None — parameter is activated when the attribute equals the value you specify; Function — parameter is activated when your f(data) returns true.
  ’[parameter]’ when result is	The value or condition that activates this parameter (not shown for Value, which uses the raw numeric result).

• Get time series

  Read the parameter value from the latest telemetry reading.

  Parameter	Description
  Time series key	Telemetry key to monitor, like flowRate or warningState.
  Action result converter	None — parameter is activated when the telemetry value equals what you specify; Function — parameter is activated when your f(data) returns true.
  ’[parameter]’ when result is	The value or condition that activates this parameter (not shown for Value, which uses the raw numeric result).

• Get alarm status

  Activate the parameter when a specific alarm is active 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

  Activate the parameter based on which dashboard state is currently open.

  Parameter	Description
  Action result converter	None — parameter is activated when the state name matches the text you enter; Function — parameter is activated when your f(data) returns true.
  ’[parameter]’ when result is	The state name or condition that activates this parameter.

• Get dashboard state object

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

  Parameter	Description
  Parse value function	Write a f(data) function that returns the parameter value.

The Appearance section controls the widget title, display colors, and pipe element colors.

Setting	Default	Description
Title	Widget name	Widget title displayed in the header. Supports entityName and entityLabel variables.
Card icon	—	Icon shown in the widget header. Configure its size and color.
Units	m³/hr	Unit label displayed next to the numeric value on the display face.
Decimals	0	Number of decimal places shown in the numeric value.
Default border color	Black	Border color of the display face when no alarm is active.
Active border color	Green	Border color when the device is in normal active state.
Warning border color	Orange	Border color when the device is in warning state.
Critical border color	Red	Border color when the device is in critical state.
Background color	Transparent	Background color of the display area.
Fluid color	—	Color of the fluid rendered inside the pipe segment.
Pipe color	—	Color of the pipe structure itself.

Each border color supports four color modes: Constant (a fixed color), Gradient (a color range mapped to the value), Range (discrete color stops), or Function (a JavaScript function that returns a color string based on the current value).

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.

Display shows no value or incorrect value

Cause	Solution
Value action is set to Do nothing	Open the Value edit dialog, set the correct Action, and specify the telemetry or attribute key.
Telemetry key mismatch	Verify that the key name in the behavior configuration matches exactly what the device reports.
Target device is not connected	Confirm that the selected device is online and actively sending data.

Warning or critical border color does not appear

Cause	Solution
Warning state or Critical state action is Do nothing and value is False	Configure the state parameter to read from an alarm status or a device attribute.
Alarm is not active on the device	Confirm that the device has an active alarm of the expected severity.

Flow animation does not play

Cause	Solution
Flow animation speed is 0	Set Flow animation speed to a non-zero value (e.g. 1 for normal speed).
Flow presence is Absent	Configure the Flow presence behavior to read from the device and verify the device reports an active flow state.

These widgets are used in the following ready-made solution templates built on the Traditional SCADA fluid system bundle:

• SCADA Swimming pool — a complete swimming pool monitoring dashboard built with pipe, pump, valve, and gauge widgets from the Traditional SCADA fluid system bundle.