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>
79 lines
2.5 KiB
Markdown
79 lines
2.5 KiB
Markdown
# FlowFuse `ui-text` 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-text.html
|
|
|
|
## Purpose
|
|
|
|
Read-only text display widget. Shows a label + value. Supports HTML in payload.
|
|
|
|
## Properties
|
|
|
|
| Property | Type | Dynamic | Notes |
|
|
|----------|------|---------|-------|
|
|
| `group` | ref | No | Parent ui-group |
|
|
| `width` | int | No | Columns |
|
|
| `height` | int | No | Row units |
|
|
| `label` | string | Yes | Left-side label text |
|
|
| `format` | string | No | Template: `{{msg.payload}}` or `{{msg.myProp}}` |
|
|
| `layout` | string | Yes | See layout options below |
|
|
| `style` | bool | No | Enable custom font/size/color |
|
|
| `font` | string | Yes | Font family (when style enabled) |
|
|
| `fontSize` | string | Yes | e.g. `"16px"`, `"1.2rem"` |
|
|
| `color` | string | Yes | Text color (when style enabled) |
|
|
|
|
## Layout Options
|
|
|
|
| Value | Description |
|
|
|-------|-------------|
|
|
| `row-left` | Label and value left-aligned |
|
|
| `row-center` | Centered on row |
|
|
| `row-right` | Right-aligned |
|
|
| `row-spread` | Label left, value right |
|
|
| `col-center` | Stacked vertically, centered |
|
|
|
|
## Input
|
|
|
|
`msg.payload` — string or number. HTML is rendered if present.
|
|
|
|
## Dynamic Properties (`msg.ui_update`)
|
|
|
|
```js
|
|
msg.ui_update = {
|
|
label: "New Label",
|
|
layout: "row-spread",
|
|
font: "monospace",
|
|
fontSize: "14px",
|
|
color: "#ff5722"
|
|
};
|
|
```
|
|
|
|
Also: `msg.class` — add CSS class to the widget container.
|
|
|
|
## Value Formatting
|
|
|
|
The `format` field supports template syntax and JSONata:
|
|
- `{{msg.payload}}` — raw value
|
|
- `{{msg.myProp}}` — any msg property
|
|
- JSONata in Value property: `$round(payload, 1)`
|
|
|
|
## HTML Support
|
|
|
|
`msg.payload` can contain HTML tags. Useful for inline formatting:
|
|
```js
|
|
msg.payload = '<b>Active</b> — 3 pumps online';
|
|
```
|
|
|
|
## EVOLV Key Rules
|
|
|
|
1. Use `layout: "row-spread"` for status lines (label left, value right).
|
|
2. For multi-field status, build a formatted string in the Function node and send as single payload.
|
|
3. Keep text widgets `height: 1` for compact status rows.
|
|
4. Use `format: "{{msg.payload}}"` (the default) — keeps it simple.
|
|
5. For direction arrows and styled status, use HTML in payload: `↑ filling | 142 m³/h | 35 min`.
|