====== 2.4 Add device process data to Node-RED ======

After ensuring that your device is properly connected, you can add the device specific node to Node-RED.

Node-RED is an open-source visual programming tool used for wiring together hardware devices, APIs, and online services. It provides a browser-based flow editor, which allows users to create flows using nodes (blocks) and connect them together to define the logic of their application or automation task. Each node represents a function or service, and they can be dragged and dropped onto the editor canvas and connected together to create a flow. Node-RED is pre-installed on the Pinebox.

===== Export the node data from the web interface =====

To integrate the IO-Link device data in Node-RED, a device specific node needs to be exported from the web interface and later imported into Node-RED. In this example, we are using the process data from our distance sensor.

In the “Process Data” section of the port sub-page of the web interface, select the lower link (red background) labeled “[R/W] “. The upper (grey background) link is used for raw JSON access. This link is usually hidden and can be enabled with a switch at the bottom of the page.

|{{:pinebox:manual:2_getting-started:export-1.png?500&direct}}|

A new tab in your browser will open. The box contains the text description of the node. No worries: You do not need to understand this section.

Click on the “Copy to clipboard” button to copy the content of the box (you will need it in the Node-RED environment).

|{{:pinebox:manual:2_getting-started:export-2.png?500&direct}}|

===== Import the node data into Node-RED =====

Now switch to the Node-RED Flows page by clicking on “Node-RED Flows” menu item:

|{{:pinebox:manual:2_getting-started:import-1.png?150&direct}}|

The Node-RED Flow editor opens in a new tab of your browser. The Node-RED environment is available under the same IP-Address as the web interface, only on port 1880:

|{{:pinebox:manual:2_getting-started:import-2.png?500&direct}}|

Import the flow from the clipboard by selecting “Import” from the top-right menu:

|{{:pinebox:manual:2_getting-started:import-3.png?200&direct}}|

Select the tab “Flow1” and paste the text from the clipboard (1) (Ctrl-v or right-click and select “paste”)and press “Import” (2):

|{{:pinebox:manual:2_getting-started:import-4.png?550&direct}}|

|{{:pinebox:manual:2_getting-started:import-5.png?500&direct}}|

Place the blocks on the canvas. The dimensions of the blocks are adjusted after placing.

|{{:pinebox:manual:2_getting-started:import-6.png?550&direct}}|

<WRAP center round tip 60%>
Done! You created a device specific node for the connected IO-Link device in Node-RED.
</WRAP>