Node appearance

ノードの見た目として、アイコン、背景色、ラベルの3点を変更できます。

アイコン

ノードのアイコンは、定義内のthe icon プロパティに指定します。

プロパティの値は、文字列または関数を設定できます。

プロパティの値が文字列の場合は、その文字列をアイコン名として扱います。

プロパティの値が関数の場合は、ノードが最初に読み込まれた時、またはノードが編集された後に評価されます。関数はアイコン名として使う文字列を返すようにしてください。 関数は、ワークスペース上のノード(this が参照するノードインスタンス)と、パレット上のノードの両方のアイコンを表示するために使用されます。パレット上のノード向けの場合、 this は特定のノードインスタンスを参照しません。関数は有効な値を返す 必要があります。

            ...
            icon: "file.png",
            ...

用意されたアイコン、またはノードと一緒に提供されるアイコンを利用できます。

用意されたアイコン

  • 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

独自アイコン

ノードの .js ファイルや .html ファイルと同じディレクトリに存在する icons ディレクトリの中に、ノード固有の独自アイコンを配置します。アイコンのファイル名を指定すると、エディタは本ディレクトリ内からアイコンを探し出します。そのため、アイコンのファイル名は一意にする必要があります。

アイコンは、背景を透過色にした20 x 30 ピクセルの白い画像にしてください。

背景色

ノードの背景色は、異なるノードの型を素早く区別するための主な手段の1つです。ノードの背景色は、ノード定義の color プロパティに定義してください。

...
color: "#a6bbcf",
...

Node-REDでは落ち着いた色を採用しています。 新たなノードは、この色に合うようにしてみてください。

以下は、ノードの背景色として良く使われる色です。

  • #3FADB5
  • #87A980
  • #A6BBCF
  • #AAAA66
  • #C0C0C0
  • #C0DEED
  • #C7E9C0
  • #D7D7A0
  • #D8BFD8
  • #DAC4B4
  • #DEB887
  • #DEBD5C
  • #E2D96E
  • #E6E0F8
  • #E7E7AE
  • #E9967A
  • #F3B567
  • #FDD0A2
  • #FDF0C2
  • #FFAAAA
  • #FFCC66
  • #FFF0F0
  • #FFFFFF

ラベル

ノードのラベルについては、 labelpaletteLabeloutputLabel 、 inputLabel の4つのプロパティがあります。

ノードラベル

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.

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.

...
label: function() {
    return this.name||"lower-case";
},
...

Note that it is not possible to use credential properties in the label function.

パレットラベル

標準では、ノードの型をパレット上のノード名として使います。 paletteLabel プロパティを指定すると、標準のノード名を上書きします。

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.

Label style

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:

...
labelStyle: function() {
    return this.name?"node_label_italic":"";
},
...

Alignment

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:

...
align: 'right',
...

Port labels

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 port labels section of the configuration editor.

Note: Labels are not generated dynamically, and cannot be set by msg properties.