Currently when you change the Repeat type of inject node from none to interval, a special mark is shown after node name. You can also change a node icon with this feature by changing an icon definition from the fixed file name to a function.

none: timestamp_none

interval: timestamp_interval

The sample code is:

icon: function() {
    if (!this.repeat && !this.crontab) {
        return "inject.png";
    } else {
        return "timer.png";
    }
},

With the above code, when you set interval and click OK button, the node icon will change.

Note that the above code is just for an explanation of this feature. This is not the actual code of an inject node.

User-defined icons

A user can deploy multiple nodes with a same type on a workspace. Although all of those nodes show a same icon now, the user may want to pick a custom icon for any node. This would override the icon specified by the node definition.

To be clear: this is not changing the icon in response to runtime events.

Use Cases

Use case 1: Change the icon of mqtt node to the picture of an actual device so that a user can recognize which device sends data to the mqtt node at a glance.

similar nodes: http, websocket, tcp/udp, etc.

Before

After

Use case 2: Use icons with different colors for comment nodes to express which one is important and which one is not.

Before

After

Use case 3: The icons of all function nodes on a workspace are same although each function node does a different thing. A user can choose an appropriate icon for each node with this feature.

similar nodes: template, subflow

UI design

How to specify icon files (t.b.d.)

There are several ways to let a user specify an icon file. Node-RED may have to support not only one of them but also some of them.

Proposal 1: Simple input type

select box or text input is a good starting point.

Proposal 2: Icon tile

Proposal 3: Specify URL of icon file

As some Node-RED servers have no internet connection such as Raspberry Pi, this proposal may not be chosen.

Necessary actions to realize this proposal:

Contributor
- deploys icon files somewhere on the Internet.
Node-RED user
- specifies URL of an icon file on an edit node dialog.

Select icon

User can select an icon on the node settings tab. Once you click OK button, the node icon will change.

Restriction: If a node has icon property by default, a user cannot select a user defined icon (e.g. ui_button node in node-red-dashboard).

API design

Icon property of flow data

Add a new property icon as one of core properties (Core properties of flow format).

The format of icon property is {module_name}/{icon_filename}. (e.g. node-red/trigger.png, node-red-dashboard/ui_button.png)

Admin API

This API is subject to manage icon files.

GET /icons - List icon files.

`GET /icons`

Returns a list of all icon files available in the editor for each module.

{
 "node-red": [
  "alert.png",
  "arduino.png",
  "arrow-in.png",
  ...
 ],
 "node-red-node-rbe": [
  "rbe.png"
 ]
}

The icons in the following directory will be traversed when Node-RED starts running.

icons directory in the installed node module.
$HOME/.node-red/lib/icons

Candidates of enhancement

Add "enableIconChange" parameter in settings.js to enable/disable this feature.
- Default value is true.
Enable it to choose font-awesome icon.
Show a node type:
- during mouse over
- in a small icon or string