Projects

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

A Bee-Wall on a computer + Leap Motion Controller

Posted on Updated on

A Bee-Wall on a computer + Leap Motion Controller = a fun video, and maybe a great idea ?

Presentation of Bee-Wall by Franck Lefevre (CEO)

Video Posted on Updated on

A little video of Frank Lefevre, Fundatrix CEO, in which he discusses his vision for the future of connected objects through technology, along with his goals for the Bee-Wall and its future development.