5ae8788fd7
Source-tree mirror of EVOLV.wiki.git refactor (27a42ee on wiki.git): - 7 master pages rewritten with clean design (Home, Architecture, Topology-Patterns, Topic-Conventions, Telemetry, Getting-Started, Glossary). Tables and Mermaid for visuals, gitea alert callouts for warnings, shields badges for metadata only. No emoji as decoration. - Archive.md becomes a removal-changelog pointing readers to git history and to the successor pages. - _Sidebar.md updated to navigate the new flat-name layout. - Concept / finding / manual pages: uniform mini-header (badges + "reference page" callout) added without rewriting domain content. - Every internal link now uses the flat naming that resolves on the live gitea wiki (Concept-ASM-Models, Finding-BEP-..., etc.). On wiki.git: 29 Archive-* pages hard-deleted (the git history preserves them; Archive.md documents the removal). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
115 lines
3.8 KiB
Markdown
115 lines
3.8 KiB
Markdown
# FlowFuse `ui-gauge` Manual (EVOLV Reference)
|
|
|
|
 -orange)
|
|
|
|
> [!NOTE]
|
|
> Reference page. Maintained for context; not regenerated by code. See [Home](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`)
|
|
|
|
```js
|
|
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):
|
|
```json
|
|
[{"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)
|
|
|
|
```json
|
|
{
|
|
"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": []
|
|
}
|
|
```
|