RnD/EVOLV
3
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases Wiki Activity
Page: Manual NodeRED Flowfuse Ui Config Manual
Pages
Archive Home
Clone
2
Manual NodeRED Flowfuse Ui Config Manual
znetsixe edited this page 2026-05-11 22:24:29 +02:00
Unescape Escape
Table of Contents
This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

FlowFuse Config Nodes Manual (EVOLV Reference)

code-ref type

Note

Reference page. Maintained for context; not regenerated by code. See Home for current top-level navigation.

Sources:

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.

EVOLV Wiki

Start here

Reference

Per-node wikis

Domain concepts

Operations findings

Node-RED / FlowFuse manuals

Archive