I told you, I'm going to show you how this meter works.
So let's get cracking.
Let's just do a meter element with nothing, right?
And we look at the browser.
This is what it looks like.
And let me actually have a comment here so you can follow along.
This is no attributes ... attributes.
So there you go.
Nothing crazy.
And it's very similar to the progress bar.
Let's put a progress bar there, and go to the browser. And you can see it's very similar.
They're not quite exactly the same, but they are very similar.
Let's remove the progress, and let's start coding.
Let's give you another example here.
Let's look at an example where the value is less than the max.
You're going to notice here
if we don't define a max, the default is low at 0, and max at 1.
Let me prove that to you.
Now let me show you.
So here we can define our second meter.
Right.
But now I want a value of 0.5.
I just wanted the value to be less than the max.
And we know the max is 1.
Refresh the browser, and there we go.
We've got two ...
oh, you know what?
I don't want to display these meters,
meters inline.
So let's just apply some styling to these meters.
Display block.
Refresh the browser.
There we go.
At least they are one beneath each other.
It's always going to be green in this instance,
right? The value is 1, refresh. Value at 0.9, refresh.
And if our value is 1, refresh, it's green.
And the reason it's always green is because we haven't defined any optimum values,
lows and highs.
etc
etc.
Okay, so that's just the green bar.
It's always going to be green, because how does the browser know what's optimum and what's not?
Okay, let's look at another example
now. I want to show you the different colors, right?
So let's say here that our value in the meter is higher than our high part of the range. So, don't get
confused.
This isn't like an exam score where 100% is better than high.
This is almost like a warning, right?
Maybe it's a heat gauge and we don't want it to get too hot.
So, for example, let's look at another meter here where our high value is set to 0.8, but the actual
value itself is 0.9.
This is not a good thing.
And if we refresh the browser, we can see it's approaching a very dangerous level, which is why the
color has changed.
If it's 8, and we refresh, it's green.
If it's below, what do you think would happen?
That's right.
It should also be green because we haven't defined a low value.
So let's leave it above so you can kind of see the orange.
Let's look at another example.
Now let's say the value is less than low.
What do you think would happen there?
Can you try and figure it out before I type it here?
So let's say the low is 0.4 and let's say our actual value is what?
0.3.
What do you think would happen when I refresh this browser?
Well, that's right.
I would expect orange to occur as well.
It's the same thing with high,
just the complete opposite,
right?
Maybe this is like a temperature point where you don't want something to drop below a certain temperature,
it also gets dangerous.
So here are you giving a visual warning to the user.
It's a meter.
Can you see how it's different, by the way, semantically to a progress element?
Meters are kind of a gauge.
That's how I view them.
Now I want to show you about this optimum attribute, and let me just write here for you,
the optimum attribute gives the position that is optimum..
And how does this work?
Well, it can be very confusing.
Let me just give you one example, then I want to show you something else quickly.
Let me give you an example where the value is lower than low, which is lower than the high value,
which is lower than the optimum value.
Let me show you what this looks like.
Okay.
Let's create our meter element.
Let's give it a value of 0.3.
Let's define the low as 0.4,
the high as 0.8, and the optimum as 0.9.
What do you think is going to happen?
I mean, this is in like the worst possible range, right?
Because the optimum is 0.9,
the highest, 0.8,
the lowest 0.4.
And we've got a value of 0.3.
So I would imagine it to be red, and it is.
How cool is that?
But.
This optimum can be a bit tricky to figure out.
You just kind of have to view it as it's splitting the entire meter into different segments.
What?
Okay.
Don't stress.
Let me hop over to PowerPoint and I'll quickly show you.
So here we go.
I want to show you, you know, why it's red, why it's orange versus why it's green.
And the way that I visually think about these things is I split it into segments like this.
So here's a meter bar.
And let's say in this example, we've defined all attributes on our meter bar
in this order of value, min is lower than low, which is lower than optimum, which is lower than high,
which is lower than max.
Can you see that
we've actually got four different segments here?
Well, yeah, you can kind of say we got three, right?
The first segment is this optimum segment.
It's kind of the first section, the first block between low and high.
So any value that's between low and high, where your optimum is set here, is going to be green. But
the outer blocks are going to be the next worst, which is orange.
But here there is not an outer-outer block, so we will never get to red no matter what value you have.
And you can try it.
You can put all these attributes on your own meter and play around with value,
starting from naught, going to one.
You'll see you never get red.
And the reason is, well, the reason is why I've showed you on the screen,
we've only got these different segments.
Have you got it?
Well, let me give you a few more examples.
Let's say we don't have a low attribute.
We've only got min, then we've got optimum, high and max.
What's going to happen here?
Well, here we've only got two segments, don't we?
The optimum range is going to be anywhere between min and high, and then we're going to have kind of
a suboptimal range between high and Max.
Again, we're not going to have any red blocks.
"Okay, Clyde, but how do we have a red block?"
Good, Good question.
All right.
Let's give you this example.
Let's say we've defined min low, high, optimum and max, but we've now placed the optimum value between
high and max.
Obviously, the easiest is that we're going to get a green bar every time the value is between high
and max. We're going to get an orange meter bar when the value is between low and high.
And of course we've got that third segment which is like sub, sub, sub-optimal.
And of course that is going to be shown as a red meter control.
Is that making sense?
Well, if it is, let me put you to the test.
Can you figure out here what's going to happen between min and low?
That's right.
We're going to have green.
What about between low and high?
That's right.
Orange. And the sub sub optimal range is going to be red, which will be any value between high and max.
So there you go, my dear students, sometimes you just need to put pen to paper, to also draw and visually
figure out what it is you're trying to create in your code.
It'll make it a lot easier for you to know what values to assign each of these attributes when you code.
Hope it's making a lot of sense, and I'll see you back in the lecture. (music starts)