@vincentgloss/node-red-dashboard-2-ui-speed-dial 1.0.0

Floating action button (FAB) and speed dial menu for Node-RED FlowFuse Dashboard 2.0: row, menu list or radial circle, floating, in a group or in the header, with Material Design icons, badge counter and runtime control

npm install @vincentgloss/node-red-dashboard-2-ui-speed-dial

Speed Dial – Floating Action Button for FlowFuse Dashboard

A floating action button (FAB) with a speed dial menu for FlowFuse Dashboard 2.0, the dashboard for Node-RED. One click opens a compact menu of actions – as a row, a menu list or a circle – and every action sends a message into your flow.

Set it up entirely in the Node-RED editor, with a live preview and without writing code. When you need more, every part of it can be changed from your flows at runtime.

English | Deutsch

Contents

Features · Requirements · Installation · Quick start · Where it appears · Styles · The editor · Icons · Colors and theme · Counter badge · Control from a flow · Output · Examples · Troubleshooting · Development · License

Features

Requirements

Developed and tested with Node-RED 5.0 and FlowFuse Dashboard 1.33.

Installation

In the Node-RED editor (recommended)

1. Open the menu (top right) and choose Manage palette.
2. Switch to the Install tab and search for @vincentgloss/node-red-dashboard-2-ui-speed-dial.
3. Click Install.

From the command line

Run this in your Node-RED user directory (usually ~/.node-red), then restart Node-RED:

npm install @vincentgloss/node-red-dashboard-2-ui-speed-dial

Note: If Node-RED runs as a service under its own user, install it in that user's directory. systemctl show nodered -p User -p ExecStart shows which one is used.

Quick start

1. Drag speed dial from the Dashboard 2 section of the palette into your flow.
2. Open it and choose Show (in a group, floating, or in the header) and On (one page, selected pages, or all pages).
3. On the Actions tab, click Add action. Give it a label, pick an icon and enter the payload.
4. Optional: on the Appearance tab, choose position, style, icon, color and size. Expand Preview and click the button to try it.
5. Connect the output to the rest of your flow and deploy.

A click on an action sends:

{
  "payload": { "scene": "evening" },
  "topic": "scene",
  "action": "evening-scene"
}

msg.action is the ID of the action – ideal for a switch node. msg.topic is only set if the action has one.

Where it appears

The editor asks two questions: Show and On.

• Selected pages shows the button only on the pages you tick, for example on Home and Lights but not on Settings.
• In the header, a small transparent button fits best. The editor offers this with one click.
• If the header is hidden in the Dashboard settings, a header button floats in the matching top corner instead.

Styles

The opening direction is chosen automatically, away from the nearest screen edge. You can also set it yourself. A row that does not fit turns to the side with the most room.

The editor

The configuration dialog has three tabs. Every field is also explained in the node help (book icon in the Node-RED sidebar).

Actions

The list of menu entries. Drag to reorder, duplicate with the copy button.

Appearance

Advanced

Icons

The icon picker has three tabs:

Own images can be

• uploaded – the image is stored directly in the flow (at most 16 KB), no server folder needed, or
• linked by address – https://…, or a path such as /icons/lamp.svg that points to the folder set as httpStatic in Node-RED's settings.js.

Own images are tinted in the icon color, exactly like the font icons. Single-color symbols with a transparent background work best, ideally as SVG. A photo would appear as a plain colored shape.

Colors and theme

Without own colors, the speed dial follows your Dashboard theme: the button uses the theme's primary color, the actions use the surface and text color of the groups. When you change the theme, the speed dial changes with it.

Every color field offers:

• Theme color – the first swatch (Dashboard, Default or Automatic)
• Transparent – the checkered swatch. As a background, only the icon remains: no fill, no border, no shadow.
• Twelve suggestions, and the eyedropper swatch for any color
• A hex field for typing a value, including semi-transparent colors such as #2563eb80

The icon and text color adapts automatically: dark on light colors, white on dark colors.

Counter badge

A small badge at the top right of the button, for example for open alerts or unread messages.

• A number or a short text up to 6 characters, for example 3 or !
• Empty or 0 hides it, numbers above 99 show as 99+
• Red by default (the error color of the theme), with its own colors if you like

You can set a starting value under Advanced, but usually the flow keeps it up to date:

msg.payload = { button: { badge: 3 } };
return msg;

Control from a flow

Messages on the input change the speed dial at runtime. They produce no output. Changes made by messages last until the next deploy or restart of Node-RED.

// Replace all actions – only id and payload are required
msg.payload = [
    { id: "on",  label: "On",  icon: "mdi-lightbulb-on",  payload: true },
    { id: "off", label: "Off", icon: "mdi-lightbulb-off", payload: false }
];

// Change only some settings – everything else stays as it is
msg.payload = { button: { icon: "mdi-bell", badge: 2 }, menu: { shape: "semi-circle", direction: "auto" } };

// Change single actions
msg.command = "patch";
msg.payload = [{ id: "off", label: "Turn off", enabled: false }];

// Remove actions
msg.command = "remove";
msg.payload = ["off"];

// Back to the settings from the editor
msg.command = "reset";

// Answer exactly the browser that just clicked (msg comes from the speed dial output)
return {
    _client: msg._client,
    command: "patch",
    payload: [{ id: msg.action, enabled: false }]
};

Output

A click on a visible, enabled action sends one message:

Examples

Import them in Node-RED with Menu → Import → Examples → @vincentgloss/node-red-dashboard-2-ui-speed-dial.

Behavior and accessibility

• The menu closes on Escape and on a click outside it.
• Keyboard: Tab focuses the button, arrow keys, Home and End move through the actions, Enter or Space selects.
• Buttons have accessible names; the counter is part of the button's name.
• With the system setting "reduce motion" there is no animation.
• Labels and tooltips are always shown as plain text, never as HTML.

Troubleshooting

Development

npm install
npm run build   # builds the dashboard widget into resources/
npm pack        # builds and creates the installable package

License

MIT. Includes PrimeVue and PrimeIcons, both MIT licensed. Material Design Icons are provided by the installed FlowFuse Dashboard.