Video 3.8 no trait dashboard. In this video, we learn how to create dashboards in Node trade. For people who don't know what a dashboard is, it is a user interface kind of thing for viewing all of the live data you wish to see through charts, gauges, notifications, texts, etc. You would have probably seen the dashboard in some of the IoT platforms, like think speak cane and UB dots. No trade provides a similar option with a lot more flexibility as you can change the user view and you even have a node for adding a custom template. Let's start by adding the dashboard nodes to the palette, install them from the Manage palette.

As you can see, there are a lot of nodes here. The dark blue ones are the output nodes and the rest of them are the input nodes. I'll teach the basic ones in this video. First, let's try the text node. Other than this, we need an input node to send some text. Now I want you to pause the video and build the flow.

Done. Good. I'm going to send a nice text. All right, now we need to configure this text node. There is something called a group here. let's configure that first.

Yeah, there's something called a tab. let's configure that to tab. Select tabs in your browser's, and groups or sections within a tab to organize our widgets. Here, by default, a home tab has been created. If you want, you can change the name. You can also have custom icons here.

I'm going to leave it just like that. Next Try toggling the state and nav menu and check out the icon links. You will find what they are. For the group node, I'm going to give the name as group one. Likewise, you can change the size of the group. Also by changing the width.

The rest of it is self explanatory. You can choose the label, value, format and layout. When you are satisfied with how you want it to appear, click Done. I want to show you something else as well. Click on this bar graph I can on the sidebar. Here, you can configure your dashboard.

You can see the tab and group we created here. You can also add new tabs and groups and edit the existing ones. You can also add links to other tabs. Like you can have other static pages whose links can be included. Hear. Next, move on to the site tab.

You can edit your site's title, you can go through other options below that. These are mainly given for your customization. Next, you can edit the theme. There is also everyone's favorite dark theme. You can also edit the color and font of your site. Okay, the tour's over, let's deploy and launch our site.

Note that the site will be having the URL URL colon 8080 slash UI, and you need to authenticate using the credentials we created in the HTTP node auth property to log into the dashboard page. Since we have not input any text, the label alone is being shown. When you inject the flow, the text gets updated besides the label. Now, let's add some other notes like notification chart engage. Wait, this will only output this text. If only there was a way to produce continuously varying random data.

Actually, there is a node which generates random numbers, and we can add the interval time in the inject node so that the flow will generate continuously varying random data. Let's install a random node. From the Manage palette. We can connect this to other nodes. You can configure the random node to generate numbers within some integer range. I want the range to be from one to hundred.

Now configure the gauge chart and notification nodes, like we configured the text node. Don't forget to change the value format to message dot payload. These notes can only get familiar as you keep working it if you don't know something, then use the node help to know it. Now deploy and check the dashboard. Cool, isn't it? I'm going to change the size and see how it looks super corny.

Okay, now I want you to add and configure the button, switch slider, numeric text input, date picker, and color picker. I'm going to connect the button and switch to a new chart node and the slider to the old chart node. I'm doing it for a reason. Then connect the rest of the nodes to a new notification node Take your time to customize them as per your wish. Now check the dashboard. It looks like some high tech dashboard which comes in Avengers right?

Let me change the size and see what happens now this looks even neater. I have included flows incorporating the rest of the dashboard nodes in the resources for you to check out. Okay, I have an activity for you. I want you to try using the audio node from the dashboard. You You need to have some audio, right? Yes, you can get it from TTS Watson node or from the CEOs database.

I want you to try both ways. In case you're stuck, you can find the flows in the resources of the next video. You can use dashboard nodes like this in many ways. You can display sensor values from Raspberry Pi, or Arduino, which we will be seeing soon. We can also control the actuators connected with raspberry pi, or Arduino using the control nodes. This is why dashboard nodes are important.

In this video, you've learned about how to use dashboard nodes. In the next video, we will build a practical application using Twitter nodes