6a6c04d34b
- Update all submodule URLs from gitea.centraal.wbd-rd.nl to gitea.wbd-rd.nl - Add settler as proper submodule in .gitmodules - Add agent skills, function anchors, decisions, and improvements - Add Docker configuration and scripts - Add manuals and third_party docs - Update .gitignore with secrets and build artifacts - Remove stale .tgz build artifact Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
63 lines
2.2 KiB
Markdown
63 lines
2.2 KiB
Markdown
# FlowFuse `ui-button` Manual (EVOLV Reference)
|
|
|
|
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.
|