WEBVTT

0
00:00.410 --> 00:02.600
I told you, I'm going to show you how this meter works.

1
00:02.750 --> 00:04.010
So let's get cracking.

2
00:04.940 --> 00:09.200
Let's just do a meter element with nothing, right?

3
00:09.200 --> 00:10.370
And we look at the browser.

4
00:10.610 --> 00:12.130
This is what it looks like.

5
00:12.140 --> 00:14.960
And let me actually have a comment here so you can follow along.

6
00:14.960 --> 00:18.500
This is no attributes ... attributes.

7
00:18.500 --> 00:19.420
So there you go.

8
00:19.430 --> 00:20.300
Nothing crazy.

9
00:20.300 --> 00:22.880
And it's very similar to the progress bar.

10
00:23.420 --> 00:28.670
Let's put a progress bar there, and go to the browser. And you can see it's very similar.

11
00:28.700 --> 00:31.310
They're not quite exactly the same, but they are very similar.

12
00:32.150 --> 00:34.830
Let's remove the progress, and let's start coding.

13
00:34.850 --> 00:36.110
Let's give you another example here.

14
00:36.110 --> 00:40.520
Let's look at an example where the value is less than the max.

15
00:40.550 --> 00:42.110
You're going to notice here

16
00:42.110 --> 00:50.810
if we don't define a max, the default is low at 0, and max at 1.

17
00:51.260 --> 00:52.040
Let me prove that to you.

18
00:52.070 --> 00:53.330
Now let me show you.

19
00:53.330 --> 00:56.930
So here we can define our second meter.

20
00:57.960 --> 00:58.560
Right.

21
00:58.830 --> 01:03.360
But now I want a value of 0.5.

22
01:04.220 --> 01:06.200
I just wanted the value to be less than the max.

23
01:06.200 --> 01:07.490
And we know the max is 1.

24
01:07.910 --> 01:09.980
Refresh the browser, and there we go.

25
01:10.010 --> 01:11.060
We've got two ...

26
01:11.510 --> 01:12.170
oh, you know what?

27
01:12.170 --> 01:13.740
I don't want to display these meters, 

28
01:13.760 --> 01:15.140
meters inline.

29
01:15.260 --> 01:19.250
So let's just apply some styling to these meters.

30
01:19.280 --> 01:21.290
Display block.

31
01:21.410 --> 01:22.550
Refresh the browser.

32
01:22.550 --> 01:23.300
There we go.

33
01:23.330 --> 01:26.010
At least they are one beneath each other.

34
01:26.030 --> 01:27.920
It's always going to be green in this instance,

35
01:27.920 --> 01:32.930
right? The value is 1, refresh. Value at 0.9, refresh.

36
01:32.930 --> 01:35.930
And if our value is 1, refresh, it's green.

37
01:35.930 --> 01:41.540
And the reason it's always green is because we haven't defined any optimum values,

38
01:41.570 --> 01:42.650
lows and highs.

39
01:42.650 --> 01:43.040
etc

40
01:43.040 --> 01:43.730
etc.

41
01:43.820 --> 01:45.310
Okay, so that's just the green bar.

42
01:45.320 --> 01:49.220
It's always going to be green, because how does the browser know what's optimum and what's not?

43
01:49.260 --> 01:50.660
Okay, let's look at another example

44
01:50.660 --> 01:52.540
now. I want to show you the different colors, right?

45
01:52.550 --> 02:00.680
So let's say here that our value in the meter is higher than our high part of the range. So, don't get

46
02:00.680 --> 02:01.070
confused.

47
02:01.070 --> 02:04.590
This isn't like an exam score where 100% is better than high.

48
02:04.620 --> 02:06.330
This is almost like a warning, right?

49
02:06.330 --> 02:10.700
Maybe it's a heat gauge and we don't want it to get too hot.

50
02:10.710 --> 02:20.850
So, for example, let's look at another meter here where our high value is set to 0.8, but the actual

51
02:20.850 --> 02:22.920
value itself is 0.9.

52
02:22.920 --> 02:24.060
This is not a good thing.

53
02:24.060 --> 02:29.100
And if we refresh the browser, we can see it's approaching a very dangerous level, which is why the

54
02:29.100 --> 02:30.360
color has changed.

55
02:30.360 --> 02:32.790
If it's 8, and we refresh, it's green.

56
02:32.790 --> 02:34.510
If it's below, what do you think would happen?

57
02:34.530 --> 02:35.130
That's right.

58
02:35.130 --> 02:38.340
It should also be green because we haven't defined a low value.

59
02:38.580 --> 02:41.820
So let's leave it above so you can kind of see the orange.

60
02:41.910 --> 02:42.900
Let's look at another example.

61
02:42.900 --> 02:45.390
Now let's say the value is less than low.

62
02:45.420 --> 02:46.800
What do you think would happen there?

63
02:47.280 --> 02:49.400
Can you try and figure it out before I type it here?

64
02:50.890 --> 02:57.250
So let's say the low is 0.4 and let's say our actual value is what?

65
02:57.340 --> 02:58.090
0.3.

66
02:59.530 --> 03:01.990
What do you think would happen when I refresh this browser?

67
03:03.020 --> 03:03.590
Well, that's right.

68
03:03.590 --> 03:05.480
I would expect orange to occur as well.

69
03:05.480 --> 03:06.560
It's the same thing with high,

70
03:06.590 --> 03:07.640
just the complete opposite,

71
03:07.640 --> 03:07.940
right?

72
03:07.940 --> 03:12.560
Maybe this is like a temperature point where you don't want something to drop below a certain temperature,

73
03:12.560 --> 03:13.520
it also gets dangerous.

74
03:13.520 --> 03:16.400
So here are you giving a visual warning to the user. 

75
03:16.400 --> 03:17.210
It's a meter.

76
03:17.240 --> 03:22.100
Can you see how it's different, by the way, semantically to a progress element?

77
03:22.130 --> 03:24.440
Meters are kind of a gauge.

78
03:24.440 --> 03:25.640
That's how I view them.

79
03:25.640 --> 03:31.010
Now I want to show you about this optimum attribute, and let me just write here for you, 

80
03:31.010 --> 03:37.100
the optimum attribute gives the position that is optimum..

81
03:37.460 --> 03:39.530
And how does this work?

82
03:39.530 --> 03:41.540
Well, it can be very confusing.

83
03:41.540 --> 03:44.660
Let me just give you one example, then I want to show you something else quickly.

84
03:44.690 --> 03:50.750
Let me give you an example where the value is lower than low, which is lower than the high value,

85
03:50.780 --> 03:53.720
which is lower than the optimum value.

86
03:54.410 --> 03:55.700
Let me show you what this looks like.

87
03:55.700 --> 03:56.120
Okay.

88
03:56.150 --> 03:58.190
Let's create our meter element.

89
03:58.220 --> 04:03.030
Let's give it a value of 0.3.

90
04:04.230 --> 04:07.860
Let's define the low as 0.4,

91
04:07.890 --> 04:17.310
the high as 0.8, and the optimum as 0.9.

92
04:17.310 --> 04:18.510
What do you think is going to happen?

93
04:19.110 --> 04:21.920
I mean, this is in like the worst possible range, right?

94
04:21.930 --> 04:23.430
Because the optimum is 0.9,

95
04:23.460 --> 04:24.300
the highest, 0.8,

96
04:24.330 --> 04:25.170
the lowest 0.4.

97
04:25.170 --> 04:26.970
And we've got a value of 0.3.

98
04:27.000 --> 04:30.500
So I would imagine it to be red, and it is.

99
04:30.510 --> 04:32.220
How cool is that?

100
04:32.400 --> 04:33.330
But.

101
04:33.740 --> 04:36.950
This optimum can be a bit tricky to figure out.

102
04:36.950 --> 04:42.530
You just kind of have to view it as it's splitting the entire meter into different segments.

103
04:42.560 --> 04:43.370
What?

104
04:43.400 --> 04:43.730
Okay.

105
04:43.730 --> 04:44.060
Okay.

106
04:44.060 --> 04:44.360
Okay.

107
04:44.390 --> 04:45.140
Don't stress.

108
04:45.170 --> 04:48.530
Let me hop over to PowerPoint and I'll quickly show you.

109
04:49.040 --> 04:49.880
So here we go.

110
04:49.880 --> 04:55.610
I want to show you, you know, why it's red, why it's orange versus why it's green.

111
04:55.610 --> 05:00.890
And the way that I visually think about these things is I split it into segments like this.

112
05:00.890 --> 05:02.690
So here's a meter bar.

113
05:02.690 --> 05:06.590
And let's say in this example, we've defined all attributes on our meter bar

114
05:06.590 --> 05:11.930
in this order of value, min is lower than low, which is lower than optimum, which is lower than high,

115
05:11.930 --> 05:13.310
which is lower than max.

116
05:13.580 --> 05:14.390
Can you see that

117
05:14.390 --> 05:16.480
we've actually got four different segments here?

118
05:16.490 --> 05:19.430
Well, yeah, you can kind of say we got three, right?

119
05:19.460 --> 05:22.250
The first segment is this optimum segment.

120
05:22.250 --> 05:27.320
It's kind of the first section, the first block between low and high.

121
05:27.350 --> 05:34.070
So any value that's between low and high, where your optimum is set here, is going to be green. But

122
05:34.070 --> 05:38.750
the outer blocks are going to be the next worst, which is orange.

123
05:38.750 --> 05:44.300
But here there is not an outer-outer block, so we will never get to red no matter what value you have.

124
05:44.330 --> 05:45.230
And you can try it.

125
05:45.230 --> 05:48.740
You can put all these attributes on your own meter and play around with value,

126
05:48.740 --> 05:50.030
starting from naught, going to one.

127
05:50.030 --> 05:51.380
You'll see you never get red.

128
05:51.380 --> 05:55.250
And the reason is, well, the reason is why I've showed you on the screen,

129
05:55.250 --> 05:57.230
we've only got these different segments.

130
05:57.320 --> 05:58.280
Have you got it?

131
05:58.310 --> 05:59.690
Well, let me give you a few more examples.

132
05:59.690 --> 06:02.240
Let's say we don't have a low attribute.

133
06:02.270 --> 06:06.170
We've only got min, then we've got optimum, high and max.

134
06:07.050 --> 06:08.220
What's going to happen here?

135
06:08.250 --> 06:10.500
Well, here we've only got two segments, don't we?

136
06:10.530 --> 06:15.330
The optimum range is going to be anywhere between min and high, and then we're going to have kind of

137
06:15.330 --> 06:17.650
a suboptimal range between high and Max.

138
06:17.670 --> 06:20.270
Again, we're not going to have any red blocks.

139
06:20.280 --> 06:22.650
"Okay, Clyde, but how do we have a red block?"

140
06:23.400 --> 06:24.610
Good, Good question.

141
06:24.630 --> 06:25.320
All right.

142
06:25.350 --> 06:26.760
Let's give you this example.

143
06:26.760 --> 06:34.590
Let's say we've defined min low, high, optimum and max, but we've now placed the optimum value between

144
06:34.590 --> 06:35.490
high and max.

145
06:35.940 --> 06:40.740
Obviously, the easiest is that we're going to get a green bar every time the value is between high

146
06:40.740 --> 06:46.230
and max. We're going to get an orange meter bar when the value is between low and high.

147
06:46.230 --> 06:51.420
And of course we've got that third segment which is like sub, sub, sub-optimal.

148
06:51.420 --> 06:55.680
And of course that is going to be shown as a red meter control.

149
06:55.920 --> 06:57.120
Is that making sense?

150
06:57.240 --> 06:59.340
Well, if it is, let me put you to the test.

151
06:59.340 --> 07:03.150
Can you figure out here what's going to happen between min and low?

152
07:03.960 --> 07:04.620
That's right.

153
07:04.620 --> 07:05.280
We're going to have green.

154
07:05.280 --> 07:06.670
What about between low and high?

155
07:06.670 --> 07:07.300
That's right.

156
07:07.330 --> 07:14.740
Orange. And the sub sub optimal range is going to be red, which will be any value between high and max.

157
07:14.740 --> 07:19.750
So there you go, my dear students, sometimes you just need to put pen to paper, to also draw and visually

158
07:19.750 --> 07:22.600
figure out what it is you're trying to create in your code.

159
07:22.630 --> 07:29.260
It'll make it a lot easier for you to know what values to assign each of these attributes when you code.

160
07:29.290 --> 07:32.830
Hope it's making a lot of sense, and I'll see you back in the lecture. 
(music starts)