48f790d123
Some checks failed
CI / lint-and-test (push) Has been cancelled
Move content to correct locations: - AGENTS.md → .agents/AGENTS.md (with orchestrator reference update) - third_party/docs/ (8 reference docs) → wiki/concepts/ - manuals/ (12 Node-RED docs) → wiki/manuals/ Delete 23 unreferenced one-off scripts from scripts/ (keeping 5 active). Delete stale Dockerfile.e2e, docker-compose.e2e.yml, test/e2e/. Remove empty third_party/ directory. Root is now: README, CLAUDE.md, LICENSE, package.json, Makefile, Dockerfile, docker-compose.yml, docker/, scripts/ (5), nodes/, wiki/, plus dotfiles (.agents, .claude, .gitea). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
48 lines
1.9 KiB
Markdown
48 lines
1.9 KiB
Markdown
# FlowFuse Dashboard Layout Notes (EVOLV Reference)
|
|
|
|
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)
|