Professional Meters' UI
© 2012, Martin Rinehart
Recommended display device: content creation, 700+ pixel width preferred.
Sample meters above are drawn with our Meter UI API. Those are not images, they are actual meters. See the Meters I/O page for input meters you can set and see results on output meters.
The goal of the Meter UI is to give the designer the freedom to design professional meters (thermometers, progress meters, RGB color selectors, HSB sliders and thousands more). This means the meters' UI must not require a Herculean effort by the frontend engineer (who invariably is facing other deadline issues). Any of the above meters can be completed in a few minutes using our Meter UI API.
Note: The two meters on the left are input meters, missing the handle that your visitor will drag up and down. See the Meter I/O page (next on the menu above) for input meters with handles.
Why Not HTML5
We have two new tags in HTML5:
meter, for output meters, and we have one new input type:
<input type='range'> for meter-style input. Why not just use one?
There are two reasons. The first is IE9 (and earlier). If you wish to support HTML4-based browsers, HTML5 widgets aren't an alternative.
Second, the HTML5 specification does nothing for the background that these widgets require. You normally want some meter divisions (tic marks are the most common) and some numeric legends ('0' ... '255' for a color picker, '0.0' ... '1.0' for transparency, '0%' ... '100%' for progress, for examples). The meter UI here provides backgrounds that work well behind any meter, HTML5, jQuery UI or whatever.
For a more complete discussion of the rather sorry state of HTML5 meters, see our Meters HTML5 page (also on the menu above).
What About [My Favorite Library]?
Most slider widgets (the meter kind, not the photo display slider) are like the jQuery UI slider: naked. Like HTML5, they often need more information. Here, for example, is a screenshot of a graphic equalizer from the jQuery UI documentation:
This seems to cry out for a little work behind the sliders. Our Meter UI will happily back up jQuery's, or any other library's, meters. If you are not already using a library blessed with meters, our own alternative, Meters I/O page, will give you the functionality you want without wasted bytes.
Actually, "Our UI" is a misnomer. Our goal is to make that "Your UI." We want it to work on your pages, not ours. Here are some points to note about the above examples.
- On the far left, two slider input meters (waiting for their handles) show, on top, a moderate amount of fussing and, on bottom, a precision look good for scientific instrumentation.
- In the thermometer we've gone a little crazy with those tic marks and labels. Yes, that's celsius on the left, farenheit on the right.
- On the right, the top meter shows the near-ultimate minimalist approach. We've used a background color that you can barely see. In practice you might want to use no background at all.
- As you go down the sample horizontal meters, features are added. Going from the default 12pt type to 8pt makes a big difference. Our API lets you ask the frontend engineer for fussy changes like this because they no longer require much programming. At the end, our restraint gives way! (That oval will be a rectangle in IE8 and below.)
You get to style your meters your way. This includes styling the whole meter and styling the bar, the bar's end caps and even the tic marks' labels.
There is really no end to the ways one can elaborate on meters. We've just begun.
How about built-in text labels? And how about running a text label vertically (90 degree rotation is easy in CSS3!) up the side of the meter?
We do this for fun, and we do it commercially. So send us that PSD. Or the cocktail napkin you scribbled on at the bar. As The Jazz Singer almost said, "You ain't seen nothin' yet!"
Feedback: MartinRinehart at gmail dot com
# # #