2026-03-04 21:07:04 +01:00
# FlowFuse Config Nodes Manual (EVOLV Reference)
wiki: crisp overhaul — no decoration emoji, all 9 master pages refactored
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>
2026-05-11 22:24:51 +02:00
 -orange)
> [!NOTE]
> Reference page. Maintained for context; not regenerated by code. See [Home](Home) for current top-level navigation.
2026-03-04 21:07:04 +01:00
Sources:
- https://dashboard.flowfuse.com/nodes/config/ui-base.html
- https://dashboard.flowfuse.com/nodes/config/ui-page.html
- https://dashboard.flowfuse.com/nodes/config/ui-group.html
- https://dashboard.flowfuse.com/nodes/config/ui-theme.html
---
## `ui-base` — Dashboard Root
| Property | Type | Notes |
|----------|------|-------|
| `path` | string | URL path after host, e.g. `/dashboard` |
| `appIcon` | string | URL to square icon (192–
| `includePagePath` | bool | Show page paths in side nav |
| `navigationStyle` | string | `"default"` , `"fixed"` , `"icon"` , `"temporary"` , `"none"` |
| `headerStyle` | string | `"default"` (scrolls), `"fixed"` (sticky), `"hidden"` |
| `headerContent` | string | `"page"` , `"dashboard"` , `"both"` , `"none"` |
---
## `ui-page` — Dashboard Page
| Property | Type | Notes |
|----------|------|-------|
| `name` | string | Displayed in nav and header |
| `ui` | ref | Parent ui-base |
| `path` | string | URL path segment, e.g. `/influent` |
| `icon` | string | Material Design icon (no `mdi-` prefix) |
| `theme` | ref | ui-theme reference |
| `layout` | string | `"grid"` , `"fixed"` , `"notebook"` , `"tabs"` |
| `order` | int | Position in navigation |
| `breakpoints` | array | See breakpoints table |
### Layout Types
| Layout | Description |
|--------|-------------|
| `grid` | Responsive grid, widgets flow into columns |
| `fixed` | Absolute positioned, no responsive reflow |
| `notebook` | Single-column stacked groups |
| `tabs` | Each group becomes a tab |
### Default Breakpoints (grid/notebook/tabs)
| Name | Min Width | Columns |
|------|-----------|---------|
| Mobile | 0 px | 3 |
| Medium | 576 px | 6 |
| Tablet | 768 px | 9 |
| Desktop | 1024 px | 12 |
---
## `ui-group` — Widget Container
| Property | Type | Notes |
|----------|------|-------|
| `name` | string | Group title (shown if `showTitle: true` ) |
| `page` | ref | Parent ui-page |
| `width` | string/int | Column span (e.g. `"4"` = 4 of 12 columns) |
| `height` | string/int | Minimum row height (`"1"` = auto-grow) |
| `order` | int | Render order on page |
| `showTitle` | bool | Show name as header |
| `className` | string | Custom CSS class |
| `groupType` | string | `"default"` (visible) or `"dialog"` (triggered) |
### Sizing Rules
- Group `width` sets column span out of page's total columns (default 12).
- Group `height` is a **minimum ** — group grows to fit content.
- Widget `width` within a group is relative to the group's width.
- Widget `height` is in row units (1 unit = theme's Row Height setting).
---
## `ui-theme` — Appearance
| Property | Type | Default | Notes |
|----------|------|---------|-------|
| `colors.surface` | color | — | Header & nav background |
| `colors.primary` | color | — | Buttons, sliders, focus rings |
| `colors.bgPage` | color | — | Page background |
| `colors.groupBg` | color | — | Group background |
| `colors.groupOutline` | color | — | Group border color |
| `sizes.rowHeight` | string | `"default"` | `"default"` (48px), `"comfortable"` (36px), `"compact"` (32px) |
| `sizes.pagePadding` | string | `"12px"` | CSS shorthand (e.g. `"12px 6px"` ) |
| `sizes.groupGap` | string | `"12px"` | Space between groups |
| `sizes.groupBorderRadius` | string | `"4px"` | Group corner rounding |
| `sizes.widgetGap` | string | `"12px"` | Space between widgets in group |
---
## EVOLV Key Rules
1. **12-column grid ** with 4-col groups gives a clean 3-column layout at desktop.
2. Set `height: "1"` on groups to let them auto-size (content determines height).
3. Use `order` on groups to control left-to-right placement within a row.
4. For compact dashboards: theme `rowHeight: "compact"` , `pagePadding: "6px"` , `groupGap: "6px"` , `widgetGap: "6px"` .
5. Widget `order` within a group determines top-to-bottom flow (lower = higher).
6. Gauge sizing guide: tank gauge `width:2, height:4` + 3/4 gauge `width:2, height:3` fits well in a 4-col group alongside a status text `width:4, height:1` .
