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>
110 lines
4.3 KiB
Markdown
110 lines
4.3 KiB
Markdown
# FlowFuse Config Nodes Manual (EVOLV Reference)
|
||
|
||
 -orange)
|
||
|
||
> [!NOTE]
|
||
> Reference page. Maintained for context; not regenerated by code. See [Home](Home) for current top-level navigation.
|
||
|
||
|
||
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–512px) for PWA |
|
||
| `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`.
|