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>
54 lines
2.1 KiB
Markdown
54 lines
2.1 KiB
Markdown
# FlowFuse Dashboard Layout Notes (EVOLV Reference)
|
|
|
|
 -orange)
|
|
|
|
> [!NOTE]
|
|
> Reference page. Maintained for context; not regenerated by code. See [Home](Home) for current top-level navigation.
|
|
|
|
|
|
Primary sources:
|
|
- https://dashboard.flowfuse.com/
|
|
- https://dashboard.flowfuse.com/nodes/widgets/ui-chart.html
|
|
|
|
## Compact Screen Guidelines
|
|
|
|
- Use a 12-column page grid and place charts in 4-column blocks for 3-up rows.
|
|
- Disable legends for single-series charts to reduce visual noise.
|
|
- Prefer concise text widgets under charts for state/timing/snapshot summaries.
|
|
- Use compact theme spacing:
|
|
- lower page padding
|
|
- lower group gap
|
|
- lower widget gap
|
|
|
|
## Time Window Guidelines
|
|
|
|
- For live demos, default chart history to 10-15 minutes.
|
|
- Keep axis labels short and unit-specific.
|
|
- Use one chart per KPI unless comparison is intentionally needed.
|
|
|
|
## Message Hygiene For Widgets
|
|
|
|
- Chart widgets: send minimal `{ topic, payload, timestamp }`.
|
|
- Text widgets: send plain string in `msg.payload`.
|
|
- Separate chart and text outputs by Function-node output index.
|
|
|
|
## Gauge Sizing in Groups
|
|
|
|
- **Tank gauge**: `width: 2, height: 4` — tall vertical fill indicator.
|
|
- **3/4 arc gauge**: `width: 2, height: 3` — fits beside tank in same group row.
|
|
- **Status text**: `width: 4, height: 1` — full group width, below gauges.
|
|
- In a 4-column group, two `width: 2` gauges sit side by side, text below spans full width.
|
|
- Set `order` on widgets: tank=2, arc=3, text=1 (text first = top, gauges below; or tank=1, arc=2, text=3 for gauges on top).
|
|
|
|
## Group Height Auto-sizing
|
|
|
|
- Set `height: "1"` on groups to auto-grow with content.
|
|
- A group with a `height: 4` tank + `height: 1` text will auto-expand to ~5 rows.
|
|
|
|
## References
|
|
|
|
- FlowFuse Dashboard docs root: https://dashboard.flowfuse.com/
|
|
- FlowFuse `ui-chart` docs: https://dashboard.flowfuse.com/nodes/widgets/ui-chart.html
|
|
- FlowFuse Widget catalog: [flowfuse-widgets-catalog.md](flowfuse-widgets-catalog.md)
|
|
- FlowFuse Config nodes: [flowfuse-ui-config-manual.md](flowfuse-ui-config-manual.md)
|