| layout | toc | title |
|---|---|---|
docs |
creating-nodes-toc.html |
Node appearance |
There are three aspects of a node's appearance that can be customised; the icon, background colour and its label.
The node's icon is specified by the icon property in its definition.
The value of the property can be either a string or a function.
If the value is a string, that is used as the icon.
If the value is a function, it will get evaluated when the node is first loaded, or after it has been edited. The function is expected to return the value to use as the icon.
The function will be called both for nodes in the workspace, where this references a node instance, as well as
for the node's entry in the palette. In this latter case, this will not refer to a particular node instance and
the function must return a valid value.
...
icon: "file.png",
...
There are some stock icons available for use, or the node can provide its own.
<style> .nr-icon-list { background: #666; } .nr-icon-list li { width: 31%; display: inline-block; color: #fff; vertical-align: middle; margin: 10px 5px; } .nr-icon-list li>img { vertical-align: middle; max-width: 20px; margin-right: 20px; } </style>
alert.png
arrow-in.png
bridge-dash.png
bridge.png
db.png
debug.png
envelope.png
feed.png
file.png
function.png
hash.png
inject.png
light.png
serial.png
template.png
white-globe.png
A node can provide its own icon in a directory called icons alongside its .js
and .html files. These directories get added to the search path when the editor
looks for a given icon filename. Because of this, the icon filename must be unique.
The icon should be white on a transparent background, 40 x 60 in size.
From Node-RED version 0.18 the node's icon can be overwritten by the user using the node settings section of the configuration editor.
The name of installed modules that contain one or more icon files or node-red for core nodes are shown on the left. The name of icon files in the module are shown on the right.
Note: If a node has icon property by default, the node's icon cannot be overwritten (e.g. ui_button node of node-red-dashboard).
The node background colour is one of the main ways to quickly distinguish different
node types. It is specified by the color property in the node definition.
{% highlight javascript %} ... color: "#a6bbcf", ... {% endhighlight %}
We have used a muted palette of colours. New nodes should try to find a colour that fits with this palette.
Here are some of the commonly used colours:
<style> .nr-color-list { } .nr-color-list li { text-align: center; border: 1px solid #333; width: 31%; display: inline-block; color: #333; vertical-align: middle; padding: 10px 5px; margin-bottom: 5px; } </style>- #3FADB5
- #87A980
- #A6BBCF
- #AAAA66
- #C0C0C0
- #C0DEED
- #C7E9C0
- #D7D7A0
- #D8BFD8
- #DAC4B4
- #DEB887
- #DEBD5C
- #E2D96E
- #E6E0F8
- #E7E7AE
- #E9967A
- #F3B567
- #FDD0A2
- #FDF0C2
- #FFAAAA
- #FFCC66
- #FFF0F0
- #FFFFFF
There are four label properties of a node; label, paletteLabel, outputLabel and inputLabel.
The label of a node in the workspace can either be a static piece of text, or
it can be set dynamically on a per-node basis according to the nodes properties.
The value of the property can be either a string or a function.
If the value is a string, that is used as the label. Use one of the following formats when naming nodes.
- Verb only (e.g. "update")
- Noun only (e.g. "server status")
- Verb + noun (e.g. "stop job")
Keep the following in mind:
- Words must begin with a lower-case letter.
- Use one single-byte space between words.
If the value is a function, it will get evaluated when the node is first loaded, or after it has been edited. The function is expected to return the value to use as the label.
As mentioned in a previous section, there is a convention for nodes to have a
name property to help distinguish between them. The following example shows
how the label can be set to pick up the value of this property or default to
something sensible.
{% highlight javascript %} ... label: function() { return this.name||"lower-case"; }, ... {% endhighlight %}
Note that it is not possible to use credential properties in the label function.
By default, the node's type is used as its label within the palette. The
paletteLabel property can be used to override this.
As with label, this property can be either a string or a function. If it is a
function, it is evaluated once when the node is added to the palette.
The css style of the label can also be set dynamically, using the labelStyle
property. Currently, this property must identify the css class to apply. If
not specified, it will use the default node_label class. The only other
predefined class is node_label_italic.
The following example shows how labelStyle can be set to node_label_italic
if the name property has been set:
{% highlight javascript %} ... labelStyle: function() { return this.name?"node_label_italic":""; }, ... {% endhighlight %}
By default, the icon and label are left-aligned in the node. For nodes that sit
at the end of a flow, the convention is to right-align the content. This is done
by setting the align property in the node definition to right:
{% highlight javascript %} ... align: 'right', ... {% endhighlight %}
From Node-RED version 0.17 onwards nodes can optionally provide labels on their input and output ports, that can be seen by hovering the mouse over the port.
These can either be set statically by the node's html file
...,
inputLabels: "parameter for input",
outputLabels: ["stdout","stderr","rc"],
...
or generated by a function, that is passed an index to indicate the output pin (starting from 0).
...,
outputLabels: function(index) {
return "my port number "+index;
}
...
In both cases they can be overwritten by the user using the node settings section of the configuration editor.
Note: Labels are not generated dynamically, and cannot be set by msg properties.