Design: Dynamic node's icon
This is a work in progress.
This feature allows a node to dynamically change its icon based on its configuration.
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:
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.
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 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
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.
select box or text input is a good starting point.
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.
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).
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)
This API is subject to manage icon files.
-
GET /icons
- List icon files.
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
- 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