1 00:00:00,720 --> 00:00:08,370 Let's have a look at the first couple of widgets from the note trade dashboard set of notes, and the 2 00:00:08,370 --> 00:00:12,640 first one I want to show you is the text input and text output. 3 00:00:13,050 --> 00:00:13,540 Let's do that. 4 00:00:13,560 --> 00:00:16,680 I'm just going to clean up my dashboard example flow. 5 00:00:16,890 --> 00:00:19,380 Just delete all the notes out of here. 6 00:00:19,770 --> 00:00:30,180 And I'm also going to delete the dashboard elements like the tabs and everything in them and start from 7 00:00:30,180 --> 00:00:30,930 scratch. 8 00:00:30,960 --> 00:00:31,400 All right. 9 00:00:31,410 --> 00:00:38,510 So here we go down the bottom of the left toolbar, you'll find the dashboard nodes. 10 00:00:39,150 --> 00:00:42,240 So we've got a button, dropdown switch, etc.. 11 00:00:42,420 --> 00:00:51,090 I want to start with something simple, and that is a text output node with its matching text input. 12 00:00:51,930 --> 00:00:58,600 Of course, text can be sent to a text output node from any other widget. 13 00:00:58,620 --> 00:01:00,780 It could be a function widget, for example. 14 00:01:01,230 --> 00:01:08,310 But I want to use these two in tandem so I can show you how to work inside a dashboard. 15 00:01:08,940 --> 00:01:14,790 So all you got to do here is to connect them and then have a look inside the text input node. 16 00:01:14,790 --> 00:01:21,750 You need to see that it's asking to place it somewhere inside a group, inside a tab to remember that 17 00:01:21,750 --> 00:01:25,800 we've got tabs which contain multiple groups, one or more. 18 00:01:26,010 --> 00:01:30,820 And then inside a group of widgets, you can have multiple widgets. 19 00:01:31,260 --> 00:01:32,270 We don't have any. 20 00:01:32,490 --> 00:01:34,630 So let's set one up. 21 00:01:34,770 --> 00:01:36,570 Can you set up a new UI group? 22 00:01:36,870 --> 00:01:39,330 Click on the pencil to do that. 23 00:01:39,890 --> 00:01:44,730 The name of this group is going to be Group one. 24 00:01:46,500 --> 00:01:49,500 Not very imaginative, but let's make it Group one. 25 00:01:49,530 --> 00:01:53,190 And I want to play group one inside a new tab. 26 00:01:53,190 --> 00:01:55,370 So click on the pencil again. 27 00:01:55,650 --> 00:01:57,750 And here is my new tab again. 28 00:01:57,820 --> 00:02:00,000 Going to call it tab one. 29 00:02:00,000 --> 00:02:02,070 Not very imaginative. 30 00:02:02,400 --> 00:02:11,220 You can also assign an icon to the tab as well as other widgets in a node rate dashboard. 31 00:02:11,550 --> 00:02:18,290 They can sit down here in the yellow box that you get information about what kind of icons you can use. 32 00:02:18,750 --> 00:02:21,030 So, for example, we can use font awesome icons. 33 00:02:21,030 --> 00:02:24,210 We can open that up a new tab and have a look at them. 34 00:02:24,210 --> 00:02:27,370 So here's the number of icons. 35 00:02:27,370 --> 00:02:32,010 There's a search button here that you can use to quickly find what you're looking for. 36 00:02:32,310 --> 00:02:33,840 But I'm just going to pick one. 37 00:02:33,840 --> 00:02:35,730 So let's say the thermometer. 38 00:02:36,330 --> 00:02:37,620 So I'm going to click on that. 39 00:02:38,370 --> 00:02:39,180 There's a thermometer. 40 00:02:39,180 --> 00:02:40,320 That's what it looks like. 41 00:02:40,330 --> 00:02:50,490 I can just take a copy of its name and then go into my note red icon field and replace the existing 42 00:02:50,490 --> 00:02:52,740 one with the thermal mirror icon. 43 00:02:53,280 --> 00:03:02,310 And that's when I have a tab and then inside the type of code a group and we can go back to our text 44 00:03:02,310 --> 00:03:02,700 input. 45 00:03:02,700 --> 00:03:11,850 And I just want to say something like into some text and you can put a tooltip here if you want, in 46 00:03:11,850 --> 00:03:13,080 terms of its size. 47 00:03:13,080 --> 00:03:18,210 I'll give it about three blocks and that's it. 48 00:03:18,390 --> 00:03:22,500 Whatever I type in is going to be then passed into the text output. 49 00:03:23,160 --> 00:03:29,340 Let's go to the text output note now and first give it some. 50 00:03:30,330 --> 00:03:39,180 I'll give it a size instead of automatic, I will set it into tab one group one, which is where the 51 00:03:39,660 --> 00:03:43,050 text input node exists as well. 52 00:03:44,510 --> 00:03:48,980 And give it a label you typed. 53 00:03:51,580 --> 00:03:56,020 Something like this, and then there's a few things you can do with the message, Paillot, I'm just 54 00:03:56,020 --> 00:04:02,500 going to keep it simple now, since we are just sending out some text or printing out some text. 55 00:04:02,500 --> 00:04:05,670 But you can see that the syntax is very simple. 56 00:04:06,010 --> 00:04:14,610 We've got a message object and we just want to print out the value of the payload parameter or the payload 57 00:04:14,620 --> 00:04:16,620 attribute of the message object. 58 00:04:17,110 --> 00:04:20,080 And they also can control the layout. 59 00:04:20,090 --> 00:04:22,120 So I'm going to go for this layout here. 60 00:04:22,120 --> 00:04:30,070 And actually, because of that, I'm going to change the size of the text output widget to something 61 00:04:30,070 --> 00:04:30,450 like this. 62 00:04:30,450 --> 00:04:34,180 So the top line is where the label is going to go, which is this. 63 00:04:34,510 --> 00:04:36,520 And then below that is going to be the value. 64 00:04:37,060 --> 00:04:48,910 And I'm going to give this node a name, for example, text output node. 65 00:04:50,410 --> 00:04:51,070 All right. 66 00:04:52,410 --> 00:04:52,880 That's it. 67 00:04:52,980 --> 00:04:58,230 Let's deploy and then got to have a look at our dashboard. 68 00:05:00,020 --> 00:05:00,610 Close that. 69 00:05:01,590 --> 00:05:02,590 All right, so here it is. 70 00:05:02,620 --> 00:05:10,000 I'm going to enter some text testing and the text comes out because it's not exactly how I'd like it 71 00:05:10,000 --> 00:05:16,490 to look like at like the field to be at the top and then just below it at like the output to come out. 72 00:05:16,510 --> 00:05:19,600 So let's do a little customization of that. 73 00:05:20,380 --> 00:05:30,490 Going to go into the tab, click on layout and then move the output to that location just below the 74 00:05:30,490 --> 00:05:32,620 input and just rearrange it. 75 00:05:32,650 --> 00:05:41,440 I can also reduce the width so that the two components, the two widgets are confined within the group 76 00:05:41,440 --> 00:05:42,190 dimensions. 77 00:05:42,940 --> 00:05:51,130 OK, and to deploy again and have a look, you go testing again. 78 00:05:52,330 --> 00:05:52,840 Perfect. 79 00:05:53,140 --> 00:06:01,780 All right, of course, apart from sending simple text from another text input note to the text output, 80 00:06:01,780 --> 00:06:09,610 you can do things such as inject something like, let's say I will inject the timestamp. 81 00:06:11,490 --> 00:06:17,400 Right, and our trigger, the time stamp inject Nood, and that's the time. 82 00:06:19,640 --> 00:06:20,990 All right, so that was pretty simple. 83 00:06:21,300 --> 00:06:23,630 Next up, let's have a look at the button.