Video 2.2 getting to know the node read user interface. In this video, we will learn how to use the node read user interface and learn the different features present in them. So what are we waiting for? Let's go. Before we start, I have to tell you one important thing. In no dread, there are always different ways to find a solution.

We deployed node red as a boilerplate application in the last video, so make sure you are on the same page as me. Now this is called the editor window which consists of four parts. They are the header, the palette, the main workspace and the sidebar. The header, as you can see, consists of the node red logo, a button called deploy a user menu and the main menu. The palette on your left consists of all the nodes which are available to use. The main workspace is the space where you will be creating your flows and unordered application consists of one or more flows inside a workspace sounds Greek and Latin till now.

Well let me clear up things for you. First, let us start with what nodes are. On your left in the palette, you can see the little boxes with different colors right. These are called nodes. Here, each node has a unique functionality. every node is different and different nodes can be connected together to form a flow.

A node receives some data, it operates on the data and it passes on without needing to know what the other nodes which are connected to it. This is an important point A nodes behavior doesn't depend on what it's connected to. Let's take an Ice Cream Factory as an example. After all, who doesn't like ice creams right? In an Ice Cream Factory, there are different stages like the blending of the raw ingredients like milk and emulsifiers. Then the mixture goes to the pasteurization stage, which is then aged for around 24 hours, after which butterscotch flavor with butterscotch nuts are added in them, or whatever flavor you like, and it is frozen again and packaged.

So here, you can see that the ice cream goes through different stages before becoming an actual ice cream. The different stages are equivalent to the different nodes and the base product or the ice cream is the one which passes through the flow. And at each stage. It gets modified. Get it okay Enough with ice cream analogies. We are grownups.

Let's hear some technical stuff. notes are packaged as Node JS modules, which allows them to be published and distributed using NPM ecosystem or Node JS package manager ecosystem. An ordered module contains a JavaScript file to define the runtime behavior of the node, and the HTML file to define its appearance within the editor, and edit dialog and help text. It might also contain a custom icon and example flows at times. The module also contains a package dot JSON file for providing necessary metadata for NPM and node rate specific metadata to help the runtime discover the nodes if you don't understand a word of what I just said, Then you probably need to know some Node JS. Go through the previous section to know about Node JS.

Nodes on their own don't have much use, but when they are connected with other nodes, that is when the real power comes to your hands. A flow is basically a collection of nodes. In a flow, we will always have at least one input node and one output node and in between, it can have other nodes. The palette shows you that there are input nodes, output nodes and other different types of nodes like function nodes, social nodes, storage nodes, etc. You can search the palette to find a specific node. When you hover your mouse over the node, you can see the node information.

Generally, a node can have at most one input port and many output ports. Okay, let me show you how a flow looks. Now in this flow, I'm going to have only one input node and one output node. For that, we need to add nodes to our workspace. We can do that in three ways, and we'll see them one by one as we learn. The first way is by dragging the notes from the pallet.

So let us drag the inject node from the input category and the debug node from the output category of the pallet like this. You can see that not only inject, but all the input nodes have a small gray square on the right and all the output nodes have a small gray square on their left. These small gray squares are called ports. You can also see that when I select the node, there is an orange box around it indicating that It is being highlighted, you can click and drag your mouse over the nodes to select them. The ports on the nodes are used to connect them. Let me show you how to do a left click on the output port of the inject node and drag your mouse to the input port of the debug node.

When you do this, you can see that there is an orange line appearing, which is nothing but the wire that connects the nodes to create a flow. You can delete a wire by clicking on it and pressing Delete. To disconnect the wire from the inject node, click on the port of the inject node while pressing shift. This will be useful when you have complex flows. Now note that the flows always goes from left to right and not in any other direction. You can also connect nodes without driving them from the palette, how?

Press Ctrl on a Windows laptop, or command in Mac, and drag your mouse by clicking on the port on the input node. Now click on someplace where you want your note to be placed. You can see a quick ad dialog popping up showing different nodes available from the palette. You can also search for the nodes. I'm clicking on debug node and there it is. I find it oddly cool.

The sidebar on your right consists of the info panel, the debug panel, the configuration nodes, and context data panels. To know more about the nodes, you need to click on the icon on the sidebar. This is the node information panel. This is where you can see the information description and the node help Okay, so what is being passed in the flow? Good question. a JavaScript object called message is being passed through the flow from the input node to the output node.

The message object as a payload property, don't understand anything, not to worry. But now, consider the message object as a trolley which is used to carry the ice cream from one stage to another in the Ice Cream Factory, and the payload as the actual ice cream. You can also see that there are blue dots on these nodes. They indicate that the node properties have been changed. So how can we commit this change or save it? We can do that by clicking on the deploy button we saw in the header.

Once you've made the necessary changes, click on the deploy button to deploy Flow flow. Now you can see that the blue.is gone. Note that whenever you change the position of a node inside the workspace, the editor takes it as a change. And you have to deploy it again to make that annoying blue.go away. Okay, so we know the inject is an input node and debug is an output node. But what are they actually?

What kind of object does inject output? Let us see that. To configure a node, we have to double click on it. Doing so opens up a Properties tab. Here, you can see that there is a form but you need not necessarily fill everything. For now, I'm just going to send a text called ice cream as the message payload.

For that, first change the type of the payload to string and type the text Next. You don't have to change anything else here. But we can check out what else is there. The cogwheel icon denotes the Properties tab. The sheet icon denotes the description tab, where you can write your own definitions of the node. Like why you're using it for your own reference.

That is another icon beside this sheet icon. This is where you will configure the appearance of the node. You can check that out later. Click Done. Next, let us see what's inside the debug mode. Double click on it.

Okay, nothing much. We can see one thing clearly, the output field is set to message dot payload, which is what we will be sending from the inject node. We don't have to make any changes here too. Okay, but we have to debug nodes To delete one of them, I can do it by clicking on the node and pressing Delete. Or I can double click on the node, and then click on the delete button to delete it. But I want to show you something interesting.

So let us again add one debug node, by copy pasting the one we already have. In this debug node, we're going to change the output from message dot payload to complete message object. Why should we do that? Well, the payload is not the only property inside the message object. The message object has other stuff as well, like the trolley in the Ice Cream Factory has a batch number, or an ID or some other things like a topic, which includes what was the last stage the trolley went through. We'll see how this goes soon.

Also, did you notice that the debug node has a green button Turn on its side. When it is on, the data will be shown in the debug console. If it is off, the data present in the debug node will not be outputted to the debug screen. Now deploy the flu. Okay, we've configured the inject node, but has the data being sent. If it has not been sent, then how do we send it?

Good questions. You can notice that the inject node has a blue button on its side. When you click on it. The payload, which you have defined will be sent from the inject node to the debug node via the via the debug node will output its data on the debug console on your right. You can check that by clicking on the bug icon. Why don't we try it?

We have connected to debug nodes. So the deeper can Soul must output two pieces of data. One is message dot payload. And the next one is the complete message object. You can see that on the debug console, we can see the text which we inputted on the inject node. We can also see that the payload type is shown here, the date and time the message was received are also shown.

We can also see that there is a node colon some string. What is that? over your mouse on it, and you can see that it highlights a specific node. Since we have two debug nodes, we can see that there used to distinguish which output came from which node in the second debug node. The complete message object is outputted, which like I said, has underscore message ID, topic and payload. Remember the ice cream trolley analogy Now you get it.

Okay. In the first node, only message dot payload is outputted because we had set it that way. We can also copy the value of the output or copy the path of the output. There are two buttons on the top of the debug panel, all nodes filter and a dustbin icon or clear log. The clear log is used to clear the debug console. The all nodes filter helps you to filter what output you want to see in the debug console.

It can be all nodes, selected nodes or current flow. Okay, now let us understand how this workspace works. A workspace can have any number of flows. You can edit the name of the workspace and give it a description by double clicking on the flow one tab. When you have many workspaces, this will help you in understanding what the workspace is about. When we have more than one workspace, then we can delete flows by clicking the Delete option in the configuration panel.

Likewise, we can also disable or enable a workspace. We can add workspaces by clicking the plus icon. There is a list icon beside the plus icon, which will also be useful when you have many workspaces. You can use it to navigate between workspaces easily. The workspace also can be zoomed in or zoomed out the zoom And the reset. There is also a navigator which allows you to go to different parts of the workspace when you have many flows in a workspace.

Okay, palette done, workspace done. Next is the sidebar. We've already seen how debug console and the information panel works. We can see what else is there by clicking here. We have two other panels, configuration notes panel and context data. We'll look into them soon.

For now, understand that configuration nodes store configuration data, like your Twitter credentials, or any other data you store in a configuration node. The deploy button in the header can be configured in many ways, like committing all the changes or committing changes present In the modified flows, or committing changes present only in the modified nodes or restarting the current deployed flows. Note that only when you deploy your flow, the changes are saved. The other important thing is the main menu. The first one is the view option, which is used to configure the workspace like hiding the palette and sidebar, showing debug messages etc. We can import and export flows in the editor.

This is the third way to add notes into our workspace. We can do it by importing nodes from libraries or the clipboard. If you have to export the flow, then you have to select the nodes in the flow and then click on Export to clipboard or library. We can import the nodes in a similar manner. You can also notice that when you export or import a flow, the flow is present in JSON format. The other useful option in this menu is search flows.

You can also search by pressing Ctrl F. This is used to find nodes within the workspace, including the configuration nodes. The configuration nodes option links with the one we saw in the sidebar. So let's keep that the adding renaming and deleting of the flows can be done by using the flows option. The next is sub flows. Sub flows, as the name is our flows within flows. These are mostly used to reduce visual complexity, and sometimes used to reuse the same set of nodes elsewhere.

We can create a simple flow of nodes, either by selecting nodes and choosing the option selection to sub flow. You can configure the sub flow by double clicking it on the workspace just like any other node. You can also create sub flows separately. You can see the created sub flows under the sub flow section in the palette. The sub flows can also be edited in a separate flow tab, which appears when you double click on the sub flow created from the palette. The flow name will be the name of the sub flow, you can edit, add inputs or outputs, or delete your sub flow.

The next one is the Manage palette. This is used to install different nodes. You can see two tabs, nodes and install. The notes tab shows you the list of installed nodes, you even have the option to disable some nodes. The installed tab is used to install nodes by searching them in the search box. Or you can go to flows dot note rate dot orgy to search for the available nodes and download them from the palette.

You can also install nodes by editing the package dot Jason file which will be covered later. We will cover both of these in the upcoming videos. Then that is the user settings where you can change grid settings of your workspace. You can also make the notes snap to grid to have a neat workspace and there are other options which are self explanatory. You can also see that there are keyboard shortcuts are available for various functionalities, which you can modify as per your condition. In the no trade website link given in the menu, links with the node rate documentation page on the node rate.org website.

The last one denotes the version of node red. So that's about the node rate editor. In this video, we got familiar with the node red editor and got to know the various features of the node red editor. In the next video, we will learn how to deploy node red on your computer.