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>
69 lines
2.5 KiB
Markdown
69 lines
2.5 KiB
Markdown
# FlowFuse `ui-button` 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-button.html
|
|
|
|
## Purpose
|
|
|
|
Clickable button that sends a message on user interaction.
|
|
|
|
## Properties
|
|
|
|
| Property | Type | Dynamic | Notes |
|
|
|----------|------|---------|-------|
|
|
| `group` | ref | No | Parent ui-group |
|
|
| `width` | int | No | Columns |
|
|
| `height` | int | No | Row units |
|
|
| `label` | string | Yes | Button text |
|
|
| `icon` | string | Yes | Material Design icon name (no `mdi-` prefix) |
|
|
| `iconPosition` | string | Yes | `"left"` or `"right"` |
|
|
| `buttonColor` | string | Yes | Background color |
|
|
| `textColor` | string | Yes | Label color (auto-calculated if omitted) |
|
|
| `iconColor` | string | Yes | Icon color (matches text if omitted) |
|
|
| `tooltip` | string | No | Hover tooltip |
|
|
| `order` | int | No | Position in group |
|
|
| `emulateClick` | bool | No | Trigger click on any received msg |
|
|
|
|
## Events
|
|
|
|
| Event | Enabled By | Output |
|
|
|-------|-----------|--------|
|
|
| Click | `onclick: true` | `msg.payload` = configured value |
|
|
| Pointer Down | `onpointerdown: true` | `msg.payload` + `msg._event` with timestamp |
|
|
| Pointer Up | `onpointerup: true` | `msg.payload` + `msg._event` with timestamp |
|
|
|
|
Hold duration = `pointerup._event.timestamp - pointerdown._event.timestamp`.
|
|
|
|
## Input
|
|
|
|
`msg.payload` — sets button payload value. With `emulateClick: true`, any input msg triggers a click.
|
|
|
|
`msg.enabled` — `true` / `false` to enable/disable the button.
|
|
|
|
## Dynamic Properties (`msg.ui_update`)
|
|
|
|
```js
|
|
msg.ui_update = {
|
|
label: "Stop",
|
|
icon: "stop",
|
|
iconPosition: "left",
|
|
buttonColor: "#f44336",
|
|
textColor: "#ffffff",
|
|
iconColor: "#ffffff",
|
|
class: "my-btn-class"
|
|
};
|
|
```
|
|
|
|
## EVOLV Key Rules
|
|
|
|
1. Use buttons for operator actions (start/stop pump, acknowledge alarm).
|
|
2. Set `emulateClick: false` (default) — don't auto-trigger on incoming messages.
|
|
3. For toggle buttons, update label/color dynamically via `msg.ui_update` from downstream logic.
|
|
4. Pair with confirmation dialog (ui-notification or ui-template) for destructive actions.
|
|
5. Standard sizing: `width: 2, height: 1` for inline; `width: 4, height: 1` for full-width in 4-col group.
|