search

node-red / node-red-dashboard

A dashboard UI for Node-RED
Other
1.32k stars 453 forks source link

readme

node-red-dashboard

platform NPM version NPM

ANNOUNCEMENT - As of 27th June 2024 this project should be considered deprecated. We will leave it here so it can still be installed if necessary, but no new development will take place. For production use you should consider one of the other alternatives The most direct replacement is the Flowfuse Dashboard - but UIBUILDER may also be a good alternative.

This module provides a set of nodes in Node-RED to quickly create a live data dashboard.

These nodes require node.js version 12 or more recent. The last version to support node v8 was 2.30.0.

From version 2.10.0 you can create and install widget nodes like other Node-RED nodes. See the Wiki for more information.

For the latest updates see the CHANGELOG.md

NOTE: - This project is based on Angular v1 - As that is now no longer maintained, this project should be considered to be on "life support". Small patches will be applied on a best can do basis, but there will be no major feature upgrades, and underlying security breakage may occur.

Dashboard example

Pre-requisites

The Node-RED-Dashboard requires Node-RED to be installed.

Install

To install the stable version use the Menu - Manage palette option and search for node-red-dashboard, or run the following command in your Node-RED user directory - typically ~/.node-red:

npm i node-red-dashboard

Restart your Node-RED instance and you should have UI nodes available in the palette and a new dashboard tab in the right side panel. The UI interface is available at http://localhost:1880/ui (if the default settings are used).

If you want to try the latest version from github, you can install it by

npm i node-red/node-red-dashboard

Settings

The default url for the dashboard is based off your existing Node-RED httpRoot path with /ui added. This can be changed in your Node-RED settings.js file.

ui: { path: "ui" },

You can also add your own express middleware to handle the http requests by using the ui: { middleware: your_function } property in settings.js. For example

ui: { middleware: function (req, res, next) {
            // Do something more interesting here.
            console.log('LOGGED')
            next()
        }
    },

You can also add middleware to the websocket connection using

ui: { ioMiddleware: function (socket, next) {
            // Do something more interesting here.
            console.log('HELLO')
            next()
        }
    },

Note: both of these also accept an array of functions if you need to pass in multiple middleware actions.

Setting your own ioMiddleware will disable the default cross domain origin check.

You can also set the dashboard to be read only by ui: { readOnly: true }. This does not stop the user interacting with the dashboard but does ignore all updates coming from the dashboard.

Finally you can customise the default Group name (for i18n) by setting

ui: { defaultGroup: "Better Default" }

You can of course combine any combination of these properties

Layout

The dashboard layout should be considered as a grid.

Each group element has a width - by default 6 'units' (a unit is 48px wide by default with a 6px gap).

Each widget in the group also has a width - by default, 'auto' which means it will fill the width of the group it is in, but you can set it to a fixed number of units.

The layout algorithm of the dashboard always tries to place items as high and to the left as they can within their container - this applies to how groups are positioned on the page, as well as how widgets are positioned in a group.

Given a group with width 6, if you add six widgets, each with a width of 2, then they will be laid out in two rows - three widgets in each.

If you add two groups of width 6, as long as your browser window is wide enough, they will sit alongside each other. If you shrink the browser, at some point the second group will shift to be below the first, in a column.

It is advisable to use multiple groups if possible, rather than one big group, so that the page can dynamically resize on smaller screens.

Features

Dashboard sidebar

The widget layout is managed by a dashboard tab in the sidebar of the Node-RED editor.

Layout
Site
Theme

You can also choose to use the basic Angular Material themes instead if you like, either just within any ui_templates or for the whole Dashboard. This will only affect angular components so some of the charts and so on may need extra work.

Note: For users creating their own templates the following CSS variable names are available to help pick up the theme colours.

Widgets

Don't forget there are also extra ui widgets available on the Node-RED flows website. Search for node-ui- or contrib-ui- .

Group labels are optional.

Most widgets can have a label and value - both of these can be specified by properties of the incoming msg if required, and modified by angular filters. For example the label can be set to {{msg.topic}}, or the value could be set to {{value | number:1}}% to round the value to one decimal place and append a % sign.

Each node may parse the msg.payload to make it suitable for display. This converted version is exposed as the variable called value, (see example above).

Any widget can be disabled by passing in a msg.enabled property set to false;. Note: this doesn't stop the widget receiving messages but does stop inputs being active and does re-style the widget.

Most widgets and the ui group can have a CSS class or multiple CSS class names. This permits the user to override styles one or more widgets and their inner contents. e.g to colourise a warning toast, add the CSS class notification-warn to the notification widget and add a ui-template (set to "Add to site head section")...

<style>
  md-toast.notification-warn {
    border-width: 10px;
    border-color: darkorange;
  }
  md-toast.notification-warn > h3 {
    background-color: orange;
  }
  md-toast.notification-warn > div {
    background: rgba(245, 173, 66, 0.5);
    color: darkorange;
  }
</style>

Additionally, any widget that has a Class field can be dynamically updated by passing in a msg.className string property set to one or more class names.

Most ui widgets can also be configured by using a msg.ui_control message - see config-fields.md for further details.

Tip: The Text widget will accept html - so you can use it together with the fa-icons we already use to create indicator type widgets.

Icons

The dashboard has 4 sets of icons built in. They are

And one that can only be used if you have a permanent connection to the internet

Again note you have to add iconify- to the icon name in the icon set of your choice. You may also optionally specify a size in standard px or em notation. Default is 24px. You must also add a ui_template node that loads the necessary iconify library into the header of the dashboard. It should contain

<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>

Once you have done that then you can also use them more generally, for example

<span class="iconify icon:wi:sunset icon-inline:false"></span>

You may also create your own set of icons using Icofont. Once downloaded you can serve them locally via Node-RED and add them to the head of the dashboard page by using a ui_template node : e.g.

<link rel="stylesheet" href="https://github.com/node-red/node-red-dashboard/blob/master/myserver/path/icofont.css">

then you can use then as per above by adding the icofont- prefix e.g. icofont-badge

Or just use them in a template

<link rel="stylesheet" href="https://github.com/node-red/node-red-dashboard/blob/master/css/icofont.css">
<div style="display: flex;height: 100%;justify-content: center;align-items: center;">
<i class="icofont icofont-4x icofont-hail"></i>
</div>

And finally via an image - https://{myserver/path/image.png}

You can use them in any of the Icon fields. You may also be able to use some of them for example in labels via their inline style eg <i class="fa fa-flag"></i>

Loading the Dashboard

Due to the size of the dashboard libraries it can take a long time to load if you are running on wireless network. It is possible add a custom loading page if you wish. To do so add a file called loading.html to the node_modules/node-red-dashboard/dist/ folder. A simple example could be

 <div><i class="fa fa-spin fa-5x fa-spinner"></i></div>

Securing the Dashboard

You can use the httpNodeAuth property in your Node-RED settings.js file to secure the Dashboard as it is created the same way as other HTTP nodes are. The details can be found at the bottom of this page in the docs http://nodered.org/docs/security

Multiple Users

This Dashboard does NOT support multiple individual users. It is a view of the status of the underlying Node-RED flow, which itself is single user. If the state of the flow changes then all clients will get notified of that change.

Messages coming from the dashboard do have a msg.socketid, and updates like change of tab, notifications, and audio alerts will be directed only to that session. Delete the msg.sessionid to send to all sessions.

Discussions and suggestions

Use the Node-RED Discourse Forum: https://discourse.nodered.org/c/dashboard or the Dashboard-ui channel in Slack to ask questions or to discuss new features.

The current work in progress list is shown in the Github Project.

Contributing

Before raising a pull-request, please read our contributing guide.

This project adheres to the Contributor Covenant 1.4. By participating, you are expected to uphold this code. Please report unacceptable behavior to any of the project's core team.

Developers

cd ~\.node-red\node_modules
git clone https://github.com/node-red/node-red-dashboard.git
cd node-red-dashboard
npm install

The plugin uses the dist folder if it exists. Make sure it has been deleted if you want to use the non-minified version while developing. After finishing changes to the front-end code in the src folder, you can use gulp to update and rebuild the minified files and update the appcache manifest.

gulp

We also have suggested lint and js styles that can be checked with:

gulp lint
gulp jscs

If submitting a Pull Request (PR) please do NOT include the minified /dist files.

Thank you.