EVOLV/manuals/node-red/flowfuse-ui-gauge-manual.md

FlowFuse ui-gauge Manual (EVOLV Reference)

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

1. Tank gauge for basin level: set gtype:"gauge-tank", min:0, max:<basin height>, custom segments by safety thresholds.
2. 3/4 gauge for fill %: set gtype:"gauge-34", gstyle:"Rounded", min:0, max:100, segments for low/normal/high.
3. Recommended sizing: tank width:2, height:4; 3/4 arc width:2, height:3.
4. Send plain numeric msg.payload — no topic needed (gauge has no series concept).
5. 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": []
}