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>
2.1 KiB
2.1 KiB
FlowFuse Dashboard Layout Notes (EVOLV Reference)
-orange){kind=icon}
Note
Reference page. Maintained for context; not regenerated by code. See Home for current top-level navigation.
Primary sources:
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: 2gauges sit side by side, text below spans full width. - Set
orderon 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: 4tank +height: 1text will auto-expand to ~5 rows.
References
- FlowFuse Dashboard docs root: https://dashboard.flowfuse.com/
- FlowFuse
ui-chartdocs: https://dashboard.flowfuse.com/nodes/widgets/ui-chart.html - FlowFuse Widget catalog: flowfuse-widgets-catalog.md
- FlowFuse Config nodes: flowfuse-ui-config-manual.md