How to : make a node-RED node

Posted on Updated on

A node is composed by two files : a .js and a .html file. They must have the same name.
Nodes are loaded from a folder in alphanumeric order. So you can prefix the name with a number to control a node, e.g 42-example.js an 42-example.js.

We will create a node example which display message in console.
In node-red/nodes, create a folder ‘example’.
Then create in this folder an example.js and an example.html file. Create a folder ‘icons’ and place a picture in it if you want to have one.

JS File

The .js contain the code of the node, that is to say it indicates what the node has to do.

example.js :

red is required for create the node. It’s better to write Require at the top as synchronous function.

var RED = require(process.env.NODE_RED_HOME+"/red/red");

Then, we implement the main function, called at the launch of node-RED, the parameter ‘n’ contains the data filled by the user in the user interface (UI).

function ExampleNode(n) {RED.nodes.createNode(this,n); // Create a RED node this.on("input", function(msg) { // when a message arrive var name = n.name; console.log(name+" receive : "+msg.payload); });

finally, we match the name “example” with the ExampleNode function

RED.nodes.registerType("example",ExampleNode);

HTML File

The .html file is used to describe the node in the UI.

example.html :

We begin with the form filled by the user

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

Add a div for each properties.The for and id attributes identify the corresponding property (with the ‘node-input-‘ prefix)

<div class="form-row">
    <label for="node-input-topic"><i class="icon-tasks"></i> Topic</label>
    <input type="text" id="node-input-topic" placeholder="Topic">
</div>

By convention, most nodes have a ‘name’ property.

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

To finish this part of code, close the script tag :

 </script>

Next, we add the documentation displayed on the right of node-RED

<script type="text/x-red" data-help-name="example">
<!-- The first <p> is used as the pop-up tool tip when hovering over a node in the palette -->
<p>Example Node : display payload in console.</p>

And close again the script tag :

</script>

Finally, the node type is registered along with all of its properties

 <script type="text/javascript">
 RED.nodes.registerType('example',{ // match "example" with these properties
     category: 'input',      // the palette category - palette are define in public/index.html
     defaults: {             // defines the editable properties of the node
         name: {value:""},   //  along with default values.
         topic: {value:"", required:true}
     },
     inputs:1,                // set the number of inputs - only 0 or 1
     outputs:0,               // set the number of outputs - 0 to n
     color:"#FFCD45"          // "rgb(231, 231, 174)" can be used too
     icon: "arrow-in.png",    // set the icon (have to be in a icons folder, public/icons is priority)
     label: function() {      // sets the default label contents
         return this.name||this.topic||"example";
     },
     labelStyle: function() { // sets the class to apply to the label
         return this.name?"node_label_italic":"";
     }
 });
 </script>

 

Now, launch or reboot node-RED and you will see the example node on the left. If not, be sure your .js and .html have the same name, and check your .html. A node is displayed if there is a .html and a .js with the same name in the same folder, the .js has to exist but can be empty

.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s