DOCSEARCHbyAlgolia
Submit Docs

FlowFuse Dashboard (Node-RED Dashboard 2.0)

repository·main·Indexed 43 days ago

https://github.com/flowfuse/node-red-dashboard

A modern, secure, and extensible successor to the original Node-RED Dashboard. Built with Vue.js v3.0, Vuetify, and Socket.IO, it provides a framework for building UIs and data visualizations using nodes like ui-chart, ui-markdown, and ui-template. It supports multiple layout types (Grid, Fixed, Notebook, Tabs) and design patterns including Single Source of Truth and Multi Tenancy via msg._client for targeted messaging.

Tokens
39.5K
Snippets
80
Records
208
Agent score
56%

What's inside FlowFuse Dashboard

  2. Explore Core Widgets in FlowFuse Dashboard

    main

    FlowFuse Dashboard provides a variety of built-in widgets categorized by their function. These widgets serve as the building blocks for creating interactive user interfaces and data visualizations.

    General Widgets

    Used for basic UI elements and content rendering:

    • ui-audio: Audio player.
    • ui-button: Clickable button.
    • ui-markdown: Renders dynamic Markdown, including Mermaid charts.
    • ui-notification: Displays messages for a set duration.
    • ui-template: Renders custom templates.
    • ui-text: Displays non-editable text.
    • ui-spacer: Adds spacing within a group.

    Form & Control Widgets

    Used to capture user input and control dashboard state:

    • ui-button: Clickable button.
    • ui-form: A complete form widget.
    • ui-radio: Radio group selection.
    • ui-slider: Slider for range selection.
    • ui-switch: On/off toggle switch.
    • ui-text-input: Text input field.
    • ui-dropdown: Dropdown selection.

    Data Visualisation Widgets

    Used to represent data trends and status:

    • ui-chart: Visualizes data via charts.
    • ui-progress: Displays a progress bar.
    • ui-table: Displays data in a table format.

    Events & Control Widgets

    These widgets do not render visual content directly into the Dashboard. Instead, they monitor Dashboard activity or allow communication to/from the Dashboard to control its state.

    • ui-event: Monitors for events in the Dashboard and emits them accordingly.

  3. Use the `ui-form` widget to collect user input

    main

    The ui-form widget allows you to gather multiple values from a user via a form. When the user clicks the submit button, the collected data is emitted as an object in msg.payload, where each key corresponds to the Name (or key) of the form element.

    Key Properties

    • Group: The UI Dashboard group where the widget renders.
    • Size: Controls the width relative to the parent group.
    • Label: A label displayed before the form rows.
    • Options: A list of rows defining the form elements.
    • Buttons: Text for the form buttons. If the "cancel" text is left empty, no cancel button is shown.
    • Two Columns: Enables a two-column layout.
    • Reset on Submit: If enabled, the form clears after submission.
    • Topic: Defines the msg.topic sent upon submission.

    Form Element Types

    You can use the following types for form rows:

    • text
    • multiline
    • password
    • email
    • number
    • checkbox
    • switch
    • date
    • time
    • dropdown

  4. Control width and columns in the Notebook layout

    main

    In the Notebook layout, width is controlled using a column-based system.

    • Notebook Width: The Notebook itself has a default width of 6 columns.
    • Group Width: A group within the Notebook also has a default width of 6 columns. Increasing a group's width increases the number of internal columns available for widgets, allowing for finer-grained control (e.g., placing widgets side-by-side).
    • Internal Group Columns: While the Notebook limits the overall container size, increasing a group's width (e.g., to 12) allows widgets inside that group to occupy a smaller fraction of the group's width (e.g., two widgets with width 3 each in a 12-column group).

  6. Use the Notebook layout for sequential data and logging

    main
    The Notebook layout is designed for sequential data presentation, mimicking a traditional Jupyter Notebook. It stretches to 100% width with a maximum width of 1024px and is centrally aligned. This layout is ideal for presenting dynamic Markdown, data tables, and data visualizations in a vertical flow.

  7. Understand the FlowFuse Dashboard technology stack

    main

    FlowFuse Dashboard is built using the following core technologies:

    • Node-RED: The underlying flow-based programming tool and runtime.
    • Vue.js v3.0: The progressive JavaScript framework used for building the user interface. It was chosen for its ease of use and readability for non-front-end developers.
    • Vuetify: A Material Design component library used within the Vue.js ecosystem to provide semantic and reusable UI components.
    • Socket.IO: The communication layer used to enable real-time, bidirectional, and event-based communication between the Node-RED backend and the Dashboard UI.

  8. Use Vuetify widgets in `ui-template`

    main

    The ui-template node includes the Vuetify component library by default. This allows you to use a wide range of pre-built, high-quality widgets without needing to install additional dependencies.

    Useful examples include:

    • v-file-input: For local file selection.
    • v-rating: For star-based user input.
    • v-progress-linear: For displaying progress bars or single-bar visualizations.

  9. Understand the Single Source of Truth design pattern

    main

    The Single Source of Truth pattern is used when all users of your Dashboard should see the exact same data simultaneously. This is common in industrial IoT or Home Automation.

    In this pattern, data is typically driven by hardware or general-purpose API calls. When a user interacts with an element (e.g., moving a slider), the state change is broadcast to all connected clients. For example, if one user moves a slider linked to a chart, every other user's dashboard will update to show the new chart data.

  10. Understand the Dashboard hierarchy

    main

    FlowFuse Dashboard (Node-RED Dashboard 2.0) organizes UI elements into a specific hierarchy. Understanding this structure is essential for managing layouts and navigation:

    • Base: The root configuration that defines the base URL for your entire dashboard (e.g., /dashboard).
    • Page: A specific view within the dashboard. The URL extends the base (e.g., /dashboard/page1). Pages can have their own unique Theme and contain multiple Groups.
    • Group: A collection of widgets rendered on a page. Groups can have specific widths and orders.
    • Widget: The smallest unit, representing a single UI component like a chart, button, or form.

  11. Understand the Grid Layout system

    main

    The Grid Layout provides a responsive 12-column system (by default) built on CSS Grid. It allows you to scale content within a page by defining how many columns a Group populates.

    Key behaviors:

    • Column Scaling: A Group with a width of 12 will span the full width of the screen regardless of screen size.
    • Automatic Wrapping: Widgets automatically move to the next row if they do not fit within the current row's available columns.
    • Row Height: The height of a row is determined by the tallest widget in that specific row.
    • Responsive Breakpoints: The number of columns rendered changes based on the screen size. You can configure these breakpoints in the ui-page settings.

  12. Configure Dashboard Layouts

    main

    FlowFuse Dashboard manages UI hierarchy through ui-base (the parent), ui-page (formerly ui-tab), and ui-group. Each ui-page can have a specific Layout assigned to it.

    Available layouts:

    • Grid (Default): Uses a 12-column CSS grid. Content scales horizontally with screen width, making it highly responsive.
    • Fixed: Uses a CSS Flex Layout. It is the most similar to the original Node-RED Dashboard layout.
    • Notebook: Mimics a Jupyter Notebook. Content has a maximum width, scales for mobile, and allows vertical stacking.