Files
EVOLV/wiki/manuals/node-red/flowfuse-dashboard-layout-manual.md
znetsixe 48f790d123
Some checks failed
CI / lint-and-test (push) Has been cancelled
chore: clean up superproject structure
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>
2026-04-07 18:01:04 +02:00

1.9 KiB

FlowFuse Dashboard Layout Notes (EVOLV Reference)

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: 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