My primary role at Atomic Object is an embedded developer. Most of my business hours are spent reading and writing C code. However, over the past couple months, I have been dabbling in web application development in my free time.
HTML5 Progress Element
progress tag is a tool intended to visually display the progress of a task. Using it is as simple as setting the min and max attributes and then adjusting the value attribute to display the current progress. Here’s an example:
progress tag turned out to be exactly what I was looking for. But I also had some temperature information that I wanted to display on my webpage. While I was reading through some of the documentation for the progress tag, I came across another similar tag that I found very interesting: the
HTML5 Meter Element
meter tag is useful for displaying a value within a given range and applying a style to the display to indicate how close the current value is to the optimum range. Like the
meter includes min, max, and value attributes. But it also includes low, high, and optimum attributes, which can be used to define what ranges of values are high, medium or low.
The optimum attribuite defines which section of the range is desirable. If the high range is optimal, values in the high range are represented with a green bar, values in the medium range are yellow, and values in the low range are red. If the low range is optimal, the colors are reversed. If the medium range is optimal, then values between high and low are green and values in the high and low ranges are displayed as yellow.
The meter element could be perfect for showing the output of something like a thermostat or temperature controller. The target temperature could be marked as the optimum value. Then, the current temperature could be assigned to value and the control would provide colorful feedback of how well the temperature controller is operating.
Customizing Progress & Meter
Adjusting the Style
The engineer side of me loves the
progress and the
Check out this page for more information on styling progress bars if your interested.
Adding a Scale
Unfortunately, neither the
progress tag nor the
meter tag have a built-in way of displaying a scale along with the graph. However, with a little extra HTML and CSS, you can make one that automatically sizes to fill a parent container.