1 00:00:00,720 --> 00:00:07,800 High in the lectures in this section, I'm going to give you a tour of the dashboard, its various widgets, 2 00:00:07,800 --> 00:00:14,760 and how you can put together dashboards that look a little like this so we can review how to utilize 3 00:00:14,760 --> 00:00:19,230 these widgets, how they interact with other nodes in a node. 4 00:00:19,230 --> 00:00:24,830 Read slow and steady with this lecture here, which is an overview lecture. 5 00:00:24,840 --> 00:00:26,880 Just want to show you a few things that you can do. 6 00:00:26,880 --> 00:00:33,840 And what I'm going to show you is drawing from the examples that be demonstrating in the various lectures 7 00:00:33,840 --> 00:00:34,860 in this section. 8 00:00:35,340 --> 00:00:38,520 So this is what a dashboard looks like. 9 00:00:38,520 --> 00:00:41,660 And you can organize the various widgets inside groups. 10 00:00:41,660 --> 00:00:46,290 So you can see here that this particular tab contains two groups. 11 00:00:46,530 --> 00:00:54,090 And then inside the groups, you can place your widgets in any position, essentially, that you want. 12 00:00:54,090 --> 00:00:57,600 And you can also have the might this size of each widget. 13 00:00:58,350 --> 00:01:00,350 There are also multiple tabs you can see here. 14 00:01:00,360 --> 00:01:05,310 I've got three example tabs and each tap has its own set of widgets. 15 00:01:05,610 --> 00:01:10,870 It can also set the widgets between tabs and between groups to communicate with each other. 16 00:01:11,580 --> 00:01:13,560 So let's have a look in tab one. 17 00:01:13,560 --> 00:01:18,510 For example, I've got a widget up here that just displays a bit of text. 18 00:01:19,320 --> 00:01:19,890 Go back. 19 00:01:20,970 --> 00:01:22,740 OK, so here's a little bit of text. 20 00:01:22,980 --> 00:01:28,950 And I've got another widget here which consists of a dropdown and I can use it to change colors in another 21 00:01:28,950 --> 00:01:29,490 widget. 22 00:01:29,580 --> 00:01:37,800 So the color of the text, for example, in another widget and down the bottom, I've got graphical 23 00:01:37,800 --> 00:01:38,460 representation. 24 00:01:38,460 --> 00:01:41,910 I've got a chart which displays random numbers. 25 00:01:41,910 --> 00:01:48,690 And you can see how you can create a line chart or a bi chart or other kinds of charts and then engage 26 00:01:49,260 --> 00:01:50,130 in another case. 27 00:01:50,130 --> 00:01:57,330 Here we've got a widget that allows me to change a number that essentially is that eventually is displayed 28 00:01:57,330 --> 00:01:59,000 in the gauge right below it. 29 00:01:59,790 --> 00:02:00,950 So that's the first tab. 30 00:02:00,960 --> 00:02:09,030 The second tab right here consists of two groups of God in the first one from the left side, actually, 31 00:02:09,030 --> 00:02:10,260 tab to group one. 32 00:02:10,630 --> 00:02:16,710 I've got a slider and as I move the slider around, you can see that the donut gauge updates itself 33 00:02:16,710 --> 00:02:19,800 with the number that I'm selecting in the slider. 34 00:02:20,160 --> 00:02:22,440 Very interesting combination. 35 00:02:22,710 --> 00:02:25,380 And I've got a group two with a button. 36 00:02:25,850 --> 00:02:30,960 You can see that I can register a click of a button and there's also a switch, which of course, I 37 00:02:30,960 --> 00:02:33,660 can also register the change of state. 38 00:02:34,590 --> 00:02:42,240 There's another tab right here which consists of a form so you can basically create a form that allows 39 00:02:42,240 --> 00:02:45,600 the user to input information and then submit that information. 40 00:02:45,640 --> 00:02:50,580 The first one is required and he can submit this information. 41 00:02:50,580 --> 00:02:58,110 And you can see here that the output is a Jason script should give back to the three that you can pass 42 00:02:58,110 --> 00:03:07,410 on to another node in your flow and communicate with other components inside your flow or perhaps Internet 43 00:03:07,410 --> 00:03:09,660 of Things components somewhere else on the Web. 44 00:03:10,650 --> 00:03:13,080 I just go back into the flow. 45 00:03:13,980 --> 00:03:21,240 This is the flow that makes these tabs and the dashboard work, and I'm going to show you what each 46 00:03:21,240 --> 00:03:22,500 of those components do. 47 00:03:23,040 --> 00:03:24,030 So here's the switch. 48 00:03:24,030 --> 00:03:26,790 Note a button node slider. 49 00:03:27,600 --> 00:03:31,710 There's the various gauges right here and text boxes and so on. 50 00:03:32,010 --> 00:03:42,720 But I wanted to show you here first on the right tool, Bob, what the dashboard edit area looks like. 51 00:03:43,170 --> 00:03:52,590 So since I've got three tabs in my dashboard, I can set them up in the edit tab of the dashboard like 52 00:03:52,590 --> 00:03:53,070 this. 53 00:03:53,430 --> 00:04:02,850 Each of those components makes up a component of the dashboard and each of those you can edit either 54 00:04:02,850 --> 00:04:06,480 from the tabs in links window like that. 55 00:04:06,480 --> 00:04:10,980 That's the edit node tab that comes up. 56 00:04:11,370 --> 00:04:17,250 Or you can simply double click on the node itself, just like with any other node, and access the same 57 00:04:17,250 --> 00:04:20,030 set of edit widgets of added fields. 58 00:04:21,360 --> 00:04:28,890 Also, you've got the side tab, which gives you access to some fields that you can configure that affect 59 00:04:28,890 --> 00:04:32,730 the whole dashboard so you can change the node of the dashboard. 60 00:04:32,730 --> 00:04:38,190 For example, right now, of course, that note read Dashboard and can see that it appears in the tab 61 00:04:38,550 --> 00:04:44,250 in the dashboard and there's various options that you can said, including its size down here. 62 00:04:45,660 --> 00:04:51,510 Of course, it's also the theme there's a few themes that you can select from this to this Allied. 63 00:04:52,590 --> 00:04:54,660 Looks like they spent diplomatist. 64 00:04:56,170 --> 00:04:58,600 It looks like this, and this is the dark. 65 00:05:01,420 --> 00:05:08,770 And looks like this, but you can customize the theme as well by choosing a base color and whatever 66 00:05:08,770 --> 00:05:10,120 font you want out of here. 67 00:05:11,500 --> 00:05:22,480 So then another thing that you can do is through the the layout tab is you can set the or the layout 68 00:05:22,480 --> 00:05:24,100 of the tab itself. 69 00:05:24,430 --> 00:05:29,320 So the size of the tab so you can increase it, decrease a bit, so on. 70 00:05:29,860 --> 00:05:37,060 And then the the height of their tab depends on how many widgets you have in it and the height of those 71 00:05:37,060 --> 00:05:47,710 widgets, and you can reorient those widgets around the tab in order to position them. 72 00:05:47,710 --> 00:05:48,550 Precisely. 73 00:05:49,000 --> 00:05:54,130 So you do have control over that, that you just have one that I was playing around with. 74 00:05:54,130 --> 00:05:58,420 And it now looks like these things are a little bit more compact this way. 75 00:05:59,620 --> 00:06:05,140 But you can also set the sizes from inside each widget as well. 76 00:06:05,470 --> 00:06:06,100 Which side? 77 00:06:06,220 --> 00:06:08,020 The properties of each note, I should say. 78 00:06:08,020 --> 00:06:17,320 So, for example, having a look at have no one there is say, this text filled up here. 79 00:06:18,220 --> 00:06:24,180 And I believe that this is coming out of this one here. 80 00:06:24,190 --> 00:06:29,580 So you can see that you can select it and you can make it longer, shorter or can make it automatic. 81 00:06:29,590 --> 00:06:35,230 And that will affect it's in the way that it looks in the dashboard. 82 00:06:35,590 --> 00:06:42,910 You do need to play around with these things a little because what you are doing in the edit properties 83 00:06:42,910 --> 00:06:49,930 or in the properties of the node may not reflect exactly the way that you think in the in the actual 84 00:06:49,930 --> 00:06:50,620 dashboard. 85 00:06:50,860 --> 00:06:56,530 So you do need a little bit of patience here to get things look exactly the way that you want them. 86 00:06:57,670 --> 00:06:58,210 All right. 87 00:06:58,400 --> 00:07:04,570 Another thing I want to show you is here, this button, once you have set up your dashboard, it gives 88 00:07:04,570 --> 00:07:05,950 you access to the dashboard. 89 00:07:05,950 --> 00:07:10,450 Just click on it and you open up a new tab and reveal the dashboard. 90 00:07:10,460 --> 00:07:14,020 So that's a shortcut for its identity type in the you are real. 91 00:07:14,860 --> 00:07:23,860 And in case you haven't done so yet, if you have not installed the dashboard set of notes, just go 92 00:07:23,860 --> 00:07:29,260 to the burger symbol of the top right corner of note. 93 00:07:29,260 --> 00:07:32,080 Read the editor, click on Manage Polit. 94 00:07:33,350 --> 00:07:39,080 And under Polet, you should already have the note read Dashboard. 95 00:07:39,860 --> 00:07:46,850 If not, though, just click on the install tab and search for dashboard like this. 96 00:07:46,850 --> 00:07:55,400 And the one that we will be working with in this project is this one here, Noad minus red, minus Dashboard's. 97 00:07:55,400 --> 00:07:58,210 Just click on install and that will be installed. 98 00:07:58,760 --> 00:08:04,370 And while I'm here, I'm just going to upgrade or update my installation to version two point twenty 99 00:08:04,370 --> 00:08:10,220 three so that I'm working with the latest available version of Dashboard. 100 00:08:17,320 --> 00:08:28,360 OK, so now need to restart note read to enable the credit modules to the command to restart note read 101 00:08:28,390 --> 00:08:33,190 is this you should be able to do a pseudo service node rate restart. 102 00:08:34,000 --> 00:08:40,330 In my experience, I've found that sometimes this command will stop but not be able to actually start 103 00:08:40,570 --> 00:08:42,960 the note read service. 104 00:08:43,240 --> 00:08:49,780 So if that happens, just break down this command into pseudo service nodes to stop. 105 00:08:50,320 --> 00:08:52,150 This will stop Modred. 106 00:08:54,970 --> 00:08:57,250 And then start. 107 00:09:00,560 --> 00:09:04,010 OK, and then let's go back into the ED. 108 00:09:06,050 --> 00:09:06,680 The. 109 00:09:07,910 --> 00:09:14,300 Ed has now turned to reconnect, to not read it's can to give it a hand by reloading the page. 110 00:09:15,790 --> 00:09:17,260 OK, it looks good. 111 00:09:17,470 --> 00:09:18,970 Let's check out the. 112 00:09:20,240 --> 00:09:27,800 Patriot and no dread dashboard is two point twenty three, so it is up to date. 113 00:09:28,120 --> 00:09:28,420 Awesome. 114 00:09:28,880 --> 00:09:35,240 Let's move on to the next election now where we'll have a look at the various, at least the most important 115 00:09:35,480 --> 00:09:41,210 nodes for the various widgets, starting with the text input and output.