Node.js
node-red

Node-REDのNode作成2歩目

More than 3 years have passed since last update.

前回に引き続き公式ドキュメントにあるNode作成のHTML Fileを読み解きます。

Nodeの.htmlファイルにはNodeのEditorでの描写を定義します。これは3つの<script>タグで構成されます。


  1. Editorに登録されている主Node定義。パレットのカテゴリ、編集可能なプロパティ(デフォルト)やアイコンを定義します。通常のJavascriptのScriptタグ内にあります。

  2. Nodeの編集ダイアログの内容を定義。typetext/x-reddata-template-nameにNodeのタイプ名を持つScriptタグで定義されています。

  3. サイドバーのinfoタブに表示されるヘルプテキスト。typetext/x-reddata-help-nameにNodeのタイプ名を持つScriptタグで定義されています。


Nodeの定義

NodeはRED.nodes.registerType関数を使用してEditorに登録する必要があります。この関数にはNodeのタイプとその定義の2つの引数があります。

<script type="text/javascript">

RED.nodes.registerType('Nodeのタイプ', {
// Nodeの定義
});
</script>


Nodeのタイプ

NodeタイプはEditor全体でNodeを識別するために使用されます。これは対応する.jsファイルとRED.nodes.registerTypeへの呼び出しで使用される値が一致する必要があります。

タイプはパレット内のNodeのラベルとして使用されます。タイプが"in"または"out"で終わる場合は"in/out"部分はラベルから消去されます。たとえば、"mqtt in"や"mqtt out"の場合はラベルに"mqtt"と表示されます。


Node定義

Node定義はEditorで必要なNodeに関するすべての情報が含まれています。それは次のプロパティを持つオブジェクトです。



  • category: (string) Nodeを配置するパレットのカテゴリ


  • defaults: (object) Nodeの編集可能なプロパティ


  • credentials: (object) Nodeの認証系プロパティ


  • inputs: (number) Nodeのインプットコネクタ数(0か1が指定可能)


  • outputs: (number) Nodeのアウトプットコネクタ数(0かそれ以上指定可能)


  • icon: (string) Nodeのアイコン


  • color: (string) Nodeの背景色


  • label: (string|function) Nodeのラベル


  • paletteLabel: (string|function) Nodeのパレット上のラベル


  • labelStyle: (string|function) ラベルのスタイル


  • align: (string) アイコンとラベルの位置


  • oneditprepare: (function) 編集ダイアログを開く時のイベント


  • oneditsave: (function) 編集ダイアログを保存する時のイベント


  • oneditcancel: (function) 編集ダイアログをキャンセルする時のイベント


  • oneditdelete: (function) 編集ダイアログの削除ボタンが押された時のイベント


  • onpaletteadd: (function) Nodeタイプがパレットに追加された時のイベント

  • `onpaletteremove: (function) Nodeタイプがパレットから削除された時のイベント


編集ダイアログ

Nodeの編集ダイアログの内容を定義しています。

<script type="text/x-red" data-template-name="node-type">

<div class="form-row">
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
<input type="text" id="node-input-name" placeholder="Name">
</div>
</script>

このテンプレートには以下の規則があります。



  • form-rowクラスを持つ<div>要素は編集ダイアログのひとつの行を表します

  • 典型的な行はアイコンを持つラベルと対応する<input>要素を持ちます

  • アイコンは<i>要素のクラスにAwesomeフォントを指定します


ヘルプテキスト

Nodeが選択されるとサイドバーのinfoタブにテキストが表示されます。ここで、Nodeへの入力メッセージと出力メッセージのプロパティの解説など、Nodeの内容について解説する必要があります。

パレット内のNodeをマウスオーバーすると<p>タグの内容がツールチップとして使用されます。

<script type="text/x-red" data-help-name="node-type">

<p>Some useful help text about the node.</p>
<p>Outputs an object called <b>msg</b> containing <b>msg.topic</b> and
<b>msg.payload</b>. msg.payload is a String.</p>
</script>