7 ms·

Canvas Gauges

149 points by Mikhus 10y ago

watty 10y ago
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?
- Pigo 10y ago
  They might mean for use in something that's built on Electron or another cross platform desktop library built with js.
- askmike 10y ago
  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 10y ago
    Exactly, that was I meant :)
- detaro 10y ago
  Maybe that client-rendering doesn't put load on the IoT device serving the page (vs. e.g. rendering an image on it and serving that)
unindented 10y ago
These are totally useless for people relying on assistive technologies, right? Tried VoiceOver and got absolutely nothing.
- Mikhus 10y ago
  Thank you for contribution. This definitely a good idea which I will take into account for next releases.
deleted 10y ago
[deleted]
ctoth 10y ago
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.
- Mikhus 10y ago
  Thank you, it is simply one of the most useful comments I (as developer) have for the moment. I will look forward to get a clue how to provide accessibility features in the next releases. Shame on me but this was exactly that feature I completely missed off.
  - brudgers 10y ago
    One of the properties of governments is tending to take things seriously, whether or not this is a good thing is a discussion that someone else can have. Anyway, the US Federal web guidelines are the sort of thing that a serious organization can produce: https://standards.usa.gov/getting-started/developers/ https://standards.usa.gov/getting-started/developers/ and so are the UK's: https://www.gov.uk/service-manual/helping-people-to-use-your-service/making-your-service-accessible-an-introduction https://www.gov.uk/service-manual/helping-people-to-use-your... On the flip side, because Google penalizes sites for not looking pretty on mobile but not for inaccessibility, day to day we can tend to get caught up in its priorities rather than thinking about accessibility. Good luck.
- kylecordes 10y ago
  I'm not sure whether it is all that useful for a generic gauge display component to be accessible - rather, when using them an application author could probably make the overall application far more accessible than the gauge could itself ever be. The application using it has much more context with which to provide an alternative text based representation of the data, right?
sakri 10y ago
I heard somebody say "it's a dashboard application, not the dashboard of a car" when discussing gauge components.
perilunar 10y ago
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 10y ago
  It is just demo to get a presentation of animation possibilities, it's up to user to define animation behavior.
throwawayReply 10y ago
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.
- throwawayIndian 10y ago
  > 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. If there is demand it's probably good to respond to it as it is. There is no need to fucking educate propaganda like you said about skeumorphism or no-skeuomorphism. Besides can you give one example of any software product that is not skeuomorphic? There is none to begin with. So please stop using this bullshit cultural kool-aid to troll and exclude designs that probably don't suit your elitism.
  - sctb 10y ago
    Please don't comment like this here.
- white-flame 10y ago
  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)
samsolomon 10y ago
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
- tamana 10y ago
  TIL "bullet graph", which makes this whole HN submission worthwhile
- rudedogg 10y ago
  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 10y ago
    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
__michaelg 10y ago
Doesn't work on Ubuntu 12.04's Chromium. (Chromium 37.0.2062.120 (Developer Build 281580) Ubuntu 12.04)
- phasmantistes 10y ago
  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.
SigmundA 10y ago
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.
gomox 10y ago
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.
PavlovsCat 10y ago
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.
konsumer 10y ago
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.

149 points by Mikhus 10y ago

watty 10y ago

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?

Pigo 10y ago
They might mean for use in something that's built on Electron or another cross platform desktop library built with js.
askmike 10y ago
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 10y ago
  Exactly, that was I meant :)
detaro 10y ago
Maybe that client-rendering doesn't put load on the IoT device serving the page (vs. e.g. rendering an image on it and serving that)

unindented 10y ago

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

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

deleted 10y ago

[deleted]

ctoth 10y ago

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.

Mikhus 10y ago
Thank you, it is simply one of the most useful comments I (as developer) have for the moment. I will look forward to get a clue how to provide accessibility features in the next releases. Shame on me but this was exactly that feature I completely missed off.
- brudgers 10y ago
  One of the properties of governments is tending to take things seriously, whether or not this is a good thing is a discussion that someone else can have. Anyway, the US Federal web guidelines are the sort of thing that a serious organization can produce: https://standards.usa.gov/getting-started/developers/ https://standards.usa.gov/getting-started/developers/ and so are the UK's: https://www.gov.uk/service-manual/helping-people-to-use-your-service/making-your-service-accessible-an-introduction https://www.gov.uk/service-manual/helping-people-to-use-your... On the flip side, because Google penalizes sites for not looking pretty on mobile but not for inaccessibility, day to day we can tend to get caught up in its priorities rather than thinking about accessibility. Good luck.
kylecordes 10y ago
I'm not sure whether it is all that useful for a generic gauge display component to be accessible - rather, when using them an application author could probably make the overall application far more accessible than the gauge could itself ever be. The application using it has much more context with which to provide an alternative text based representation of the data, right?

sakri 10y ago

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

perilunar 10y ago

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 10y ago
It is just demo to get a presentation of animation possibilities, it's up to user to define animation behavior.

throwawayReply 10y ago

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.

throwawayIndian 10y ago
> 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. If there is demand it's probably good to respond to it as it is. There is no need to fucking educate propaganda like you said about skeumorphism or no-skeuomorphism. Besides can you give one example of any software product that is not skeuomorphic? There is none to begin with. So please stop using this bullshit cultural kool-aid to troll and exclude designs that probably don't suit your elitism.
- sctb 10y ago
  Please don't comment like this here.
white-flame 10y ago
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)

samsolomon 10y ago

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

tamana 10y ago
TIL "bullet graph", which makes this whole HN submission worthwhile
rudedogg 10y ago
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 10y ago
  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

__michaelg 10y ago

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

phasmantistes 10y ago
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.

SigmundA 10y ago

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.

gomox 10y ago

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.

PavlovsCat 10y ago

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.

konsumer 10y ago

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.