Is there a Javascript UI framework or toolkit to assist in creating analog user interfaces?

Question

Remember when we had meters with needles, toggle switches, rotary dials, lighted rockers and push buttons? I'm trying to re-create that with a web based control panel I'm working on, and I'm having a bit of a difficult time.

I've found plenty of examples of how to simulate an analog meter with all of the graphics needed included, but I haven't found anything that helps me create the other control elements. I've also dug through the venerable jQuery UI library, but have yet to find anything that's got an analog theme to it. It's got plenty of sliders and pickers and stuff, but all modern.

This is one of those things where I get to thinking that I can't possibly be the only one that wanted to build something like this, so I'm hoping there's a library that exists, and distributed along with graphics and styles needed to make everything work.

Must-have features:

• Provides analog style control elements and meters with all graphics and styles needed for them to work
• Compatible with IE 10+, latest and previous version of Chrome & Firefox
• Has at least sparse documentation

Nice to have:

• Released under any OSI approved software license
• Greater browser compatibility (IE 9+), Opera Mini, Etc
• Isn't an idiot on mobile devices
• Light-ish footprint

Context

The best physical examples of what I'm trying to achieve can be found by doing a Google image search on "analog console". A lot of those are related to sound, but they show the older style feel I'm trying to get. I thought of including a few images from that result here, but I don't want to step on anyone's copyright.

I'm working on something that lets me keep an eye on a great many things from many places, and I'm trying to make that a little more fun. These things lend well to being visualized by classic style "VU" meters, and allow a degree of control where buttons and knobs would make very good sense.

I've seen this done many times using Flash (think .. Enigma simulator), but I can't seem to locate a pure Javascript solution, I feel like there must be one, and I'm just not finding it.

Note: I found (and am using) jQuery Analogue Meter. What I'm hoping for is a more complete kit, which features matching buttons / switches / rockers / etc.

Answer 1

There is the YUI Dial control: http://yuilibrary.com/yui/docs/dial/

And the slider control: http://yuilibrary.com/yui/docs/slider/

you could probably start with that. They both have several different skins available from YUI (eg: http://yuilibrary.com/yui/docs/slider/#skins).

The button control: http://yuilibrary.com/yui/docs/button/ can be used as a Toggle Switch or a Push Button, but I'm not sure if they already have skins for that or not. If not, my suggestion would be to use those, and pull a bunch of images from the web under a permissive license and use them to skin the buttons. I know that YUI makes it very easy to skin their controls with just CSS.

Have a look at the icon buttons at http://yuilibrary.com/yui/docs/button/cssbutton.html for examples of how to do this.

I'm not sure what you'd do about lighted rockers. My guess is that it would be very similar to a pushbutton.

For the meter control, maybe a bunch of progress bars like they've done here: http://yui.github.io/yui2/docs/yui_2.9.0_full/examples/progressbar/pb_vumeter.html but I'd use the YUI3 version from the same author here: http://satyam.com.ar/yui/3.0.0/progressbar/

For needles, what you want is Google's Gauge charts: https://developers.google.com/chart/interactive/docs/gallery/gauge

I do not think YUI has an equivalent.

The best part I like about the YUI controls is that they are all accessible, so you could have an awesome UI, and it would still work for people with screen readers, or for keyboard users.

Lastly, if you do in fact build skins for the remaining controls, it would be awesome to submit them back to YUI.

Hope this helps.