1 00:00:00,690 --> 00:00:08,100 In this lecture, I'm going to show you how to use the gauge to the gauge is a single note that actually 2 00:00:08,310 --> 00:00:12,120 gives us access to three different styles or types of gauges. 3 00:00:12,480 --> 00:00:16,620 So you have the normal gauge, the donut compass and level. 4 00:00:16,920 --> 00:00:25,830 So we'll play with all four of those to drive the gauge or to create a value that is displayed in the 5 00:00:25,830 --> 00:00:26,400 gauge. 6 00:00:26,400 --> 00:00:29,040 I'm going to simply use and inject. 7 00:00:30,060 --> 00:00:33,740 No, you'd like that and just inject a number. 8 00:00:35,340 --> 00:00:37,050 Into the equation. 9 00:00:37,110 --> 00:00:39,750 So let's put a number here, let's make that 10. 10 00:00:40,920 --> 00:00:48,150 All right, let's have a look at the simplest possible version of a gauge before I show you the variations. 11 00:00:48,630 --> 00:00:53,130 So double click on the game, show the edit tab or the property tab. 12 00:00:53,590 --> 00:00:57,180 Going to give it a nice large size like that. 13 00:00:57,810 --> 00:01:00,720 And I'm going to actually cancel out of that. 14 00:01:00,840 --> 00:01:07,470 I'm going to create a new user interface group and actually I'm going to put it in the new tab as well. 15 00:01:08,250 --> 00:01:14,100 So let's choose a new group and I'm going to put that into a new tab as well. 16 00:01:14,550 --> 00:01:21,390 And it's called that tab, too, OK? 17 00:01:21,690 --> 00:01:27,090 And then in inside here, I'm going to have to be gages. 18 00:01:30,990 --> 00:01:36,660 Group and for its width, I'll make it make it quite large or make it 12. 19 00:01:37,440 --> 00:01:37,890 All right. 20 00:01:37,910 --> 00:01:38,520 At that. 21 00:01:38,790 --> 00:01:44,490 And then inside this, we have tab two and then the gauges group. 22 00:01:46,340 --> 00:01:54,890 And now that I have defined this size or the width of the group, I'm going to make my gauge larger 23 00:01:54,920 --> 00:01:55,700 six by six. 24 00:01:57,970 --> 00:02:04,360 So for Labor just going to call a case, I know exactly which type, I'm using the volume to pass the 25 00:02:04,360 --> 00:02:11,890 value that is coming from the inject new value units here, you can put in whatever you like, for example. 26 00:02:11,890 --> 00:02:12,670 It could be. 27 00:02:16,370 --> 00:02:23,780 Kilometers per second or something like this, or it could be a percentage or degrees Celsius or whatever 28 00:02:23,780 --> 00:02:34,130 it is that your gauge is displaying, then for the range you can define the minimum and maximum values 29 00:02:34,130 --> 00:02:35,720 that you gauge displays. 30 00:02:35,720 --> 00:02:42,890 And then these three colors will be applied to the gauge depending on the input that the gauge is displaying. 31 00:02:42,920 --> 00:02:48,800 So, for example, if it's two words, the maximum, the 20, it's the gauge is going to be red if it's 32 00:02:48,800 --> 00:02:51,080 towards the minimum zero. 33 00:02:51,110 --> 00:02:56,860 In this case, the gauge is going to be green and then you think it will be will be yellow. 34 00:02:58,340 --> 00:03:03,560 And for the name, I'm just going to say I'm just going to say a regular. 35 00:03:07,120 --> 00:03:14,290 All right, now let's have a look at how that looks like, so we've deployed the dashboard and let's 36 00:03:14,290 --> 00:03:16,100 switch to tab two. 37 00:03:17,200 --> 00:03:22,540 Here's OK, I'm going to inject the number 10 done. 38 00:03:22,960 --> 00:03:26,080 And you can see that this is, what, 10 looks like. 39 00:03:26,470 --> 00:03:32,950 Let's make that into a 16 and redeploy. 40 00:03:34,160 --> 00:03:35,570 And inject. 41 00:03:36,560 --> 00:03:38,720 And that's what 16 looks like. 42 00:03:39,200 --> 00:03:40,560 All right, looks good. 43 00:03:40,580 --> 00:03:42,440 Now, let's make a copy of this. 44 00:03:44,890 --> 00:03:51,730 And change it's type to a doughnut, so then change the label to doughnut. 45 00:03:54,500 --> 00:03:56,540 So this is now a donor to gauge. 46 00:03:57,760 --> 00:04:07,030 And leave everything else the same night, they inject note to the new gauge and deploy. 47 00:04:08,430 --> 00:04:13,230 And press the inject button and this is what the doughnut looks like. 48 00:04:14,170 --> 00:04:17,080 Let's switch it to something else, like, for example. 49 00:04:19,040 --> 00:04:20,090 Making a six. 50 00:04:24,790 --> 00:04:29,100 And it did not work and to inject it actually to press the button. 51 00:04:29,320 --> 00:04:30,730 That's what six looks like. 52 00:04:31,510 --> 00:04:31,990 All right. 53 00:04:32,950 --> 00:04:36,220 How about create a copy of this? 54 00:04:37,690 --> 00:04:40,900 And try out the compas type. 55 00:04:45,970 --> 00:04:47,740 So there's now a composite sketch. 56 00:04:51,120 --> 00:04:51,840 Connected. 57 00:04:54,620 --> 00:05:03,620 And inject, actually to deploy and then inject, and this is what the compass looks like, change the 58 00:05:03,620 --> 00:05:07,220 valley to 19. 59 00:05:09,290 --> 00:05:11,840 Inject and that's what it looks like. 60 00:05:12,170 --> 00:05:19,610 All right, and there's one more to try out again, I'm going to copy and create a copy of the Compass 61 00:05:19,610 --> 00:05:24,440 Gauge, and this is going to be level level type. 62 00:05:24,440 --> 00:05:26,660 There's this level gauge. 63 00:05:34,620 --> 00:05:35,400 Inject. 64 00:05:37,110 --> 00:05:40,640 And that's what the little gauge looks like, let's make it empty. 65 00:05:42,330 --> 00:05:44,220 Or close to McCain, make it a full. 66 00:05:49,680 --> 00:05:52,590 And there you are, the four different kinds of cages. 67 00:05:53,900 --> 00:05:59,330 Another thing that I want to show you is the slider widget or the slide on node, which produces the 68 00:05:59,330 --> 00:06:05,840 slider widget, which is right here, instead of creating a separate lecture for this, I'm going to 69 00:06:05,840 --> 00:06:13,790 give you an example that uses a slider in this lecture so that we can control the gauge widgets using 70 00:06:13,790 --> 00:06:14,510 this slider. 71 00:06:14,930 --> 00:06:20,840 And therefore, we're not going to have to switch back and forth from the flow to the dashboard to change 72 00:06:20,840 --> 00:06:21,380 the values. 73 00:06:21,590 --> 00:06:27,710 So what I'll do is I'm going to insert a slider widget or slider. 74 00:06:27,710 --> 00:06:33,740 No to produce the slider widget and I'm going to connect it to all gages. 75 00:06:36,670 --> 00:06:49,210 Like this, then I'm going to place the widget to take the full width of the group and place that in 76 00:06:49,390 --> 00:06:50,850 tab to Gauger's. 77 00:06:50,860 --> 00:07:00,340 It's going to go right to the bottom of the stack of widgets can call this slider, and I'm going to 78 00:07:00,340 --> 00:07:06,130 set it so that we've got a minimum of zero and maximum 20 insteps going to be one. 79 00:07:08,030 --> 00:07:13,190 So you can see you've got a few options, you can either update its value or whatever follows continuously 80 00:07:13,190 --> 00:07:16,520 while sliding or only on release. 81 00:07:16,820 --> 00:07:20,160 So I'm going to go for the continuous update of the output. 82 00:07:20,840 --> 00:07:21,550 All right. 83 00:07:21,560 --> 00:07:25,620 So this is going to be an example, know. 84 00:07:30,510 --> 00:07:31,270 Like these. 85 00:07:33,020 --> 00:07:38,940 So let's deploy and have a look at what this looks like, so there's a slate up here. 86 00:07:39,080 --> 00:07:43,040 I'm going to reallocate it to the bottom of the stack in a moment. 87 00:07:43,040 --> 00:07:46,400 But let's see, I'm going to move it towards the right. 88 00:07:46,400 --> 00:07:52,640 And you can see at all of the widgets update themselves. 89 00:07:57,120 --> 00:08:04,350 It's a nice, interesting effect, so the images themselves are very responsive and they do have a nice 90 00:08:04,350 --> 00:08:06,390 animation as they change the value. 91 00:08:07,830 --> 00:08:14,940 So another thing that I want to show you here is what happens if you get an input to a widget that does 92 00:08:14,940 --> 00:08:17,660 not match with the range of the widget. 93 00:08:18,090 --> 00:08:26,100 So let's say, for example, that the input to the widget, which is now represented by the slider, 94 00:08:26,340 --> 00:08:29,770 was from zero to a max of two hundred. 95 00:08:30,120 --> 00:08:36,510 Of course, we now have a max out very quick. 96 00:08:38,100 --> 00:08:43,890 You can see the donor doesn't care so much, although he can see displays of its value, but it's all 97 00:08:43,900 --> 00:08:52,800 red, it's red and it doesn't really give us a proper graphical representation of what is happening, 98 00:08:52,800 --> 00:08:57,120 because once we hit 20, then all we did just maximum. 99 00:08:58,440 --> 00:09:06,450 Even though they show the correct numerical value, so to fix this issue, we need to insert a range 100 00:09:06,450 --> 00:09:06,970 note. 101 00:09:07,800 --> 00:09:09,420 So let's look for the Range A.. 102 00:09:11,570 --> 00:09:16,400 This is something that you've learned in the previous section, so here's a range note is the equivalent 103 00:09:16,400 --> 00:09:21,440 of the map function in the Arduino language. 104 00:09:21,890 --> 00:09:29,300 So with the range note, we can take input of one range that belongs to one range and convert it to 105 00:09:29,300 --> 00:09:32,510 output that belongs in another target range. 106 00:09:34,190 --> 00:09:38,780 Like that coin to rewire, my fellow. 107 00:09:40,580 --> 00:09:50,330 And a input to the range note comes from the slider, then a slider will convert it to will convert 108 00:09:50,330 --> 00:09:56,340 the input to the appropriate range and then pass it on to the cage, which it's OK, deploy. 109 00:09:57,020 --> 00:09:58,550 And now let's have a look. 110 00:09:59,810 --> 00:10:00,320 All right. 111 00:10:00,470 --> 00:10:01,210 Much better. 112 00:10:02,590 --> 00:10:08,770 Now the cases are able to show the appropriate range of the value that is coming from the Slater. 113 00:10:10,790 --> 00:10:15,080 The only thing that doesn't look very good, of course, is the number itself, we can see that in some 114 00:10:15,080 --> 00:10:17,620 cases we've got way too many decimals to make them fit. 115 00:10:17,660 --> 00:10:24,490 So let's fix that back in the Range A. We can click on this button to round the results to the nearest 116 00:10:24,550 --> 00:10:28,790 integer and to redeploy into now. 117 00:10:29,890 --> 00:10:31,170 We've got a much better result. 118 00:10:37,890 --> 00:10:42,210 One last thing, let's say that you wanted to put this lighter down the bottom of this stack, so instead 119 00:10:42,210 --> 00:10:47,040 of having this lighter at the top of the group, we'll put it in the bottom of the group. 120 00:10:47,190 --> 00:10:51,960 So to do that, we're going to type two and edit the layout. 121 00:10:53,110 --> 00:11:01,960 And you can see that the slider is already down the bottom, maybe see if I can force it like this. 122 00:11:04,690 --> 00:11:07,210 And see if that makes it any better. 123 00:11:07,540 --> 00:11:14,860 This is what I said, that we need to actually sometimes experiment with locations of the various components 124 00:11:14,860 --> 00:11:17,170 that make up a dashboard. 125 00:11:17,440 --> 00:11:26,200 And by adding a gap between the bottom row of the widgets and the slider, the slider now appears down 126 00:11:26,200 --> 00:11:26,710 the bottom. 127 00:11:30,050 --> 00:11:32,530 Right now, let's move on to the next lecture. 128 00:11:32,530 --> 00:11:34,700 We'll show you how to use the switch.