meter ... ⁄meter segments, values, colors, attributes
1 SEGMENT (optimal), 1 COLOR (green), 3 ATTRIBUTES (min, value, max)
- ATTRIBUTES PRESENT: min, value, max
- ATTRIBUTES ABSENT: optimum, low, high
- in this case:
→ the optimum value represents the value from the middle of the range
→ the middle of the range is between the min and max values
→ the optimal segment is between the min and max value (=the whole meter (any value inside the range))
→ the measured value is also on the meter, between the min and max values → will be represented in green on meter
1 SEGMENT (optimal), 1 COLOR (green), 4 ATTRIBUTES (min, optimum, value, max)
- ATTRIBUTES PRESENT: min, optimum, value, max
- ATTRIBUTES ABSENT: low, high
- in this case:
→ the optimum value is between the min and max values
→ the optimal segment is between the min and max value (=the whole meter (any value inside the range))
→ the measured value is also on the meter, between the min and max values → will be represented in green on meter
2 SEGMENTS (optimal, suboptimal), 2 COLORS (green, yellow), 5 ATTRIBUTES (min, low⁄high, optimum, value, max)
- ATTRIBUTES PRESENT: min, low⁄high, optimum, value, max
- ATTRIBUTE ABSENT: low⁄high
- 4 cases:
- optimum value inside low segment + the value inside low segment → green
- optimum value inside low segment + the value outside low segment → yellow
- optimum value outside low segment + the value outside low segment → green
- optimum value outside low segment + the value inside low segment → yellow
3 SEGMENTS (optimal, suboptimal, less suboptimal), 3 COLORS (green, yellow, red), 6 ATTRIBUTES (min, low, optimum, value, high, max)
- ATTRIBUTES PRESENT: min, low, optimum, value, high, max
- ATTRIBUTE ABSENT: -
- 9 cases:
- optimum value inside low segment + the value inside low segment (optimal) → green
- optimum value inside low segment + the value inside the middle segment (suboptimal) → yellow
- optimum value outside low segment + the value inside the high segment (less suboptimal) → red
- optimum value inside high segment + the value inside high segment (optimal) → green
- optimum value inside high segment + the value inside the middle segment (suboptimal) → yellow
- optimum value outside high segment + the value inside the low segment (less suboptimal) → red
- optimum value inside middle segment (between low and high) + the value inside middle segment (optimal) → green
- optimum value inside middle segment (between low and high) + the value inside the low segment (suboptimal)→ yellow
- optimum value inside middle segment (between low and high) + the value inside the high segment (suboptimal) → yellow
Video demonstration meter: segments, values, colors, attributes
HTML5 meter: segments, values, colors, attributes Tutorial
| min | video details |
|---|---|
| 00:01 | video tutorial: segments, values, colors, attributes on meter element |
| 00:07 | - how many segments a meter can have? - how many colors can be displayed? - how many specific attributes are involved? |
| 00:14 | for example purpose: each meter element has a corresponding textarea and the length of the textarea is transferred, through javascript, to meter element as value of the value attribute |
| 00:28 | by default, on meter is displayed the value of 2 (= the value of the value attribute) |
| 00:30 | but as soon as we type inside the textarea, that length is transferred as value of the value attribute, in order to highlight the existing segments and their colors |
| 00:38 | - 3 attributes: min, value, max - 1 segment: optimal - 1 color: green |
| 00:43 | between min and max values there's only 1 segment |
| 00:46 | this segment is optimal (because optimum when absent represents the midpoint between min and max values) |
| 00:51 | the value="2" is inside this optimal segment → will display in green |
| 00:58 | because the whole meter is optimal, any value between min(0) and max(6) will display in green → 1 color |
| 01:08 | - 4 attributes: min, value, optimum, max - 1 segment: optimal - 1 color: green |
| 01:11 | optimum attribute specified this time |
| 01:14 | just like above, between min and max values there's 1 segment only |
| 01:19 | the whole segment is optimal (because optimum(3) when specified can be only between min(0) and max(6) values) |
| 01:23 | the measured value(2) is inside the optimal segment → will display in green |
| 01:30 | the whole segment is optimal, so any value between min(0) and max(6) will display in green → 1 color |
| 01:40 | - 5 attributes: min, low⁄high, value, optimum, max - 2 segments: optimal, suboptimal - 2 colors: green, yellow |
| 01:45 | low or high included (we included the low attribute) |
| 01:48 | between min and max are 2 segments: min → low low → max |
| 01:59 | the optimum value(3) is inside the first segment: min(0) → low(3), →that segment is optimal |
| 02:03 | the value of 2 is inside the optimal segment → will display in green |
| 02:12 | the 2nd segment : low → max = suboptimal → the values within it will display in yellow |
| 02:17 | 1st segment: optimal: green : values: 0.1.2.3 |
| 02:22 | 2nd segment: suboptimal: yellow: values: 4,5,6 |
| 02:26 | - 6 attributes: min, low, value, optimum, high, max - 3 segments: optimal, suboptimal, even less suboptimal - 3 colors: green, yellow, red |
| 02:31 | both low and high attributes are included |
| 02:35 | between min and max are 3 segments: min → low low → high high → max |
| 02:42 | the optimum value(3) is inside the first segment: min(0) → low(3) , → that segment is optimal |
| 02:45 | the value of 2 is inside the optimal segment => will display in green |
| 02:51 | any value inside the optimal segment will display in green: 0,1,2,3 |
| 02:55 | any value inside the suboptimal segment (low→high) will display in yellow: 4,5 |
| 03:03 | and any value inside the less suboptimal segment (high→max) will display in red: 6 |