
Canvas Gauges - Mikhus
https://canvas-gauges.com/
======
ctoth
These do not appear to be accessible at all. If you use this on your site, I
will not be able to read whatever you're trying to tell me, other than by
making me look at source. Please don't do that. I know accessibility is hard,
and the developers of this were just trying to make something that looks nice
and gets the job done. Every time an inaccessible reusable {component,
library, toolkit\, framework} is released, the inaccessibility spreads like a
cancer to every single downstream project. What this translates to is a web,
that for me, is slowly going dark. This sucks, but I don't see any way to fix
it other than trying to be some sort of front-line accessibility cop when I
see new stuff on HN. But I'm not an expert in all forms of accessibility, and
I am already stretched thin trying to build my own accessible apps.

I don't have a good answer here, just a plea to consider accessibility when
designing stuff that's meant to be some variety of reusable widget.

~~~
strictnein
I'm the defacto accessibility guy at work, and I'm trying to think of a good
way to present this type of data in an accessible way, but I'm having trouble.
When the gauges are fixed, it would be pretty straight forward, but as the
gauges change, I'm not sure of a good way to present that, especially when the
gauges are moving quickly.

~~~
ctoth
I would probably use an invisible aria-live region coupled with some logic to
not spew messages to it too frequently or a minimum change to actually
autoread. Could also do something like providing checkboxes only visible to
the screen reader to subscribe/unsubscribe from gauge updates. I wonder if any
actual web access experts could chime in?

~~~
ctoth
This is the actual underlying problem, and don't think I'm not aware of it.
Everything is inaccessible by default, and takes special code and knowledge to
make it accessible, specialized knowledge that a majority of devs don't have.
Heck, I'm swimming in this every day and I wouldn't consider myself an
expert/not sure if my idea for making this particular component accessible
would even be the right way (tm) though I'm pretty certain it would at least
work.

Probably the long term answer is to just cure blindness. ¯\\_(ツ)_/¯

~~~
daxelrod
> Everything is inaccessible by default

In the early days of the web, when web pages were mostly text, and people
weren't using tables for layout, things were a heck of a lot more accessible
by default than they are now.

------
throwawayReply
Radial gauges are an example of bad skeuomorphism.

They don't convey any history and more importantly they don't have useful
meaning unless you have a measurable first differential (i.e. no step change).

They're useful for literal physical speed, because the movement of the needle
helps give a sense of acceleration as well as speed. But if you don't care
about acceleration (or more generally the delta of the primary variable) then
it's not helpful to have a needle wobble about.

And if that wobble is just artificially added (such as the bouncing
thermometer) because it's responding to a step change in a discrete sequence,
then it's now removed any sense of reality.

And I've seen even worse of gauges, for example for things which can't even
reduce. There's no point having a speedometer type gauge for "percent
complete" or other monotonic variable!

Sorry for the rant, you're just responding to a demand. It's a demand I'd
rather see met through educating better data visualisation than through
prettier gauges.

~~~
white-flame
There's a reason that automobiles continue using radial gauges: They're the
quickest way to convey a scalar value at a glance. It has little to do with
acceleration. If you're going to have a monitoring dashboard, radial gauges
make immediate sense.

(The wobble is dumb, though)

~~~
coredog64
They take up a lot of real estate on a display and aren't particularly easy to
read unless you get up close. If you already know what thresholds are it is
far better to display a number and use the color to indicate where that is
within the continuum of states.

There are practical uses for steam gauges, but I would argue that monitoring
complex IT systems is not one of them.

~~~
white-flame
Taking up lots of real estate on a display is kind of the point of high-
visibility indicators.

Regarding "aren't particularly easy to read", are you talking about reading
numbers on the ticks? That's not the point of those indicators; the point is
to be familiar with the low/expected/high ranges of the needle for various
situations and be able to see with clarity the current state of
expected/unexpected range of an indicator. Which then can be further inspected
if necessary to focus in and see an exact number.

------
samsolomon
Gauges generally make for a poor UI. Unless you need real time information to
help grasp a change in value, please consider another way to showcase
information.

Consider showing either a single number, or perhaps a bullet graph if targets,
averages or historical values are important.
[https://en.wikipedia.org/wiki/Bullet_graph](https://en.wikipedia.org/wiki/Bullet_graph)

~~~
rudedogg
I've done quite a bit of reading about digital dashboards, and agree. The
first example in "Information Dashboard Design" is filled with gauges - and an
explanation of why it's a bad design.

Edward Tufte's books are absolutely amazing, and filled with beautiful
visualizations:
[https://www.edwardtufte.com/tufte/books_vdqi](https://www.edwardtufte.com/tufte/books_vdqi).

Stephen Few has several books on dashboards/charting that are really
practical. See
[http://www.perceptualedge.com/examples.php](http://www.perceptualedge.com/examples.php)
for a taste.

~~~
snowwindwaves
Why are gauges bad design? Or was it just that the screen was filled with
gauges - too much information to be absorbed?

I design power plant control systems and part of that is an HMI using one of
wonderware, citect, factory talk, etc.

In general where a number is primarily presented, on the screen where the
controls are that will change that number, I try to use a gauge (mostly
vertical bar gauges) to show the context for the number. The gauge shows what
values are high and low by the scale and I put the low alarm, low trip, high
alarm, high trip points on the gauge as yellow and red bands so the operator
knows when the value is approaching one of those thresholds. If the alarm or
trip is raised the bar colour changes to amber or red if it is alarm/trip so
that when the alarm or trip appears in the sequence of event log and they go
to the screen where they know what system is displayed it is immediately
obvious which variables are over their limits and by how much.

I also usually put a line chart so the operator can see how the variables have
changed with time.

I based much of the design on "Alarm Management for Process Control" by
Rothenberg and "The High Performance HMI Handbook" by Hollifield and Habibi.

Edit: my vertical bar gauges look pretty similar to the bullet graphs linked
by the parent. I generally call the circular car dashboard gauges "wiper
gauges" because of the action of the needle I suppose

------
watty
Looks nice, I may use them.

I noticed in the docs you said they are great for desktop, mobile, or
(emphasized) "IoT devices with limited resources". These run on the client
side which means they won't typically run on IoT devices unless I'm missing
something. What does it have to do with IoT?

~~~
askmike
I guess the author is talking about the small codebase, which means every IoT
device that has some kind of webinterface has to store and serve less data
(library is 10kb gzipped, while a high level chart library like d3 is 77kb).
At least in the case where you don't serve libraries from a CDN..

~~~
Mikhus
Exactly, that was I meant :)

------
unindented
These are totally useless for people relying on assistive technologies, right?
Tried VoiceOver and got absolutely nothing.

~~~
Mikhus
Thank you for contribution. This definitely a good idea which I will take into
account for next releases.

------
PavlovsCat
About all this meta-discussion about gauges: What if an application requires
constant real-time updates of a lot of little values? Say, a music sequencer?
What if you have bars for things where the resolution matters, and then little
gauges where you just need a rough ballpark estimate _that doesn 't take up a
lot of screen space_? Yes, you can make an accessible music sequencer, and
good headphones and hearing are probably more useful than look at a
spectrograph or level meters. But still.

What about games? There should be more accessible games. But there will always
be inaccessible ones and that's fine, too. Let them have gauges, too, why not.

These gauges can be used irresponsibly, yeah. You know what that reminds me
of? Every other web thing. Imagine every time any program or article relating
to images on the web is published discussion of it devolved into how images
without alt tags are bad, and that images should just be a bonus on top of an
accessible description. I'm exaggerating, but to make a point.

I think these gauges look really neat, and while I can't think of a use for
them for myself right now either, well, let's come up with some, or don't.
Let's look at the code and iterate on it if we want and post our findings. But
all this _" oh, thing X! all the best practices related to X, let me tell you
them"_ should be a thing on the side, not the predictable main event.

------
sakri
I heard somebody say "it's a dashboard application, not the dashboard of a
car" when discussing gauge components.

------
gomox
For as long as I have worked in products, I have heard customers request and
praise round gauge displays in applications.

I think they are amongst the worst data display widgets you can possibly use.
They have terrible visual SNR, since most of the visual representation is just
borders, backgrounds and other visual gimmicks.

------
perilunar
The bounce on that first thermometer-style gauge is just weird, and breaks the
illusion. Who ever saw an alcohol or mercury gauge bounce like that?

~~~
Mikhus
It is just demo to get a presentation of animation possibilities, it's up to
user to define animation behavior.

------
konsumer
I made something similar, but a bit more accessible using SVG, that works in
ractive (but would be happy to change it to vanilla js or react, if there is a
demand) [https://www.npmjs.com/package/ractive-
gauge](https://www.npmjs.com/package/ractive-gauge) it can be styled, or the
SVG can be swapped out fairly easily.

------
SigmundA
I prefer [http://justgage.com/](http://justgage.com/) less skeuomorphic and
more modern looking.

Used by [https://freeboard.io/](https://freeboard.io/) which is a decent
dashboard I have forked for some personal IoT stuff.

------
__michaelg
Doesn't work on Ubuntu 12.04's Chromium. (Chromium 37.0.2062.120 (Developer
Build 281580) Ubuntu 12.04)

~~~
phasmantistes
Please update (perhaps by switching to getting Chromium from a PPA). Chromium
37 is nearly 2 years old, and is missing many features and many security
fixes.

