FlowFuse `ui-gauge` Manual (EVOLV Reference)

Note

Reference page. Maintained for context; not regenerated by code. See Home for current top-level navigation.

Source: https://dashboard.flowfuse.com/nodes/widgets/ui-gauge.html

Gauge Types

`gtype` value	Visual	Best For
`gauge-tile`	Compact square with value	KPI tiles
`gauge-battery`	Horizontal battery bar	Charge / capacity
`gauge-tank`	Vertical tank with fill gradient	Liquid levels
`gauge-half`	180° arc	Setpoint / range display
`gauge-34`	270° arc	Primary process gauge

Properties

Property	Type	Dynamic	Notes
`group`	ref	No	Parent ui-group
`width`	int	No	Columns (max = group width)
`height`	int	No	Row units
`gtype`	string	Yes	See table above
`gstyle`	string	Yes	`"Needle"` or `"Rounded"` (half/3-4 only)
`min`	number	Yes	Range minimum
`max`	number	Yes	Range maximum
`segments`	array	Yes	`[{color: "#hex", from: number}, …]`
`title`	string	Yes	Label above gauge
`prefix`	string	Yes	Before value (half/3-4 only)
`suffix`	string	Yes	After value (half/3-4 only)
`units`	string	Yes	Small text below value (half/3-4 only)
`icon`	string	Yes	Material Design icon (half/3-4 only)
`sizeGauge`	int	No	Arc thickness px
`sizeGap`	int	No	Gap between arc & segments px
`sizeSegments`	int	No	Segment ring thickness px

Input

msg.payload — numeric value to display.

Dynamic Properties (`msg.ui_update`)

msg.ui_update = {
  label: "Tank A",
  gtype: "gauge-tank",
  gstyle: "Rounded",
  min: 0, max: 100,
  segments: [{color:"#f44336", from:0}, {color:"#4caf50", from:25}, {color:"#f44336", from:90}],
  prefix: "", suffix: "%", units: "fill"
};

Segments

Array of {color, from} objects sorted ascending by from. Each segment colors the range from its from up to the next segment's from (or max).

Tank default segments (auto-applied when switching to tank type):

[{"color":"#A8F5FF","from":0},{"color":"#55DBEC","from":15},
 {"color":"#53B4FD","from":35},{"color":"#2397D1","from":50}]

CSS Selectors

Selector	Target
`.nrdb-ui-gauge-value span`	Central value text
`.nrdb-ui-gauge-value label`	Unit label
`.nrdb-ui-gauge-value i`	Icon
`.nrdb-ui-gauge #limits`	Min/max labels

EVOLV Key Rules

Tank gauge for basin level: set gtype:"gauge-tank", min:0, max:<basin height>, custom segments by safety thresholds.
3/4 gauge for fill %: set gtype:"gauge-34", gstyle:"Rounded", min:0, max:100, segments for low/normal/high.
Recommended sizing: tank width:2, height:4; 3/4 arc width:2, height:3.
Send plain numeric msg.payload — no topic needed (gauge has no series concept).
Segments must be provided as array even for a single color range.

Node JSON Example (tank)

{
  "id": "demo_gauge_tank_west",
  "type": "ui-gauge",
  "z": "demo_tab_dashboard",
  "group": "demo_ui_grp_ps_west",
  "name": "West Tank Level",
  "gtype": "gauge-tank",
  "gstyle": "Rounded",
  "title": "Level",
  "units": "m",
  "prefix": "",
  "suffix": "m",
  "min": 0, "max": 4,
  "segments": [
    {"color":"#f44336","from":0},
    {"color":"#ff9800","from":0.3},
    {"color":"#2196f3","from":1.0},
    {"color":"#ff9800","from":2.5},
    {"color":"#f44336","from":3.2}
  ],
  "width": 2, "height": 4,
  "order": 2,
  "x": 700, "y": 400,
  "wires": []
}

EVOLV Wiki

Start here

Reference

Per-node wikis

Domain concepts

Operations findings

Node-RED / FlowFuse manuals

Archive

Archive

FlowFuse ui-gauge Manual (EVOLV Reference)