Mikhus / canvas-gauges

HTML5 Canvas Gauge. Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.
http://canvas-gauges.com/
MIT License
1.57k stars 396 forks source link

Is there some way to draw multiple needles on single gauge ? #86

Open softfoot opened 7 years ago

softfoot commented 7 years ago

I was thinking in terms of having a main needle for the current value and one each for the Max and Min. Each needle should have different color and Max and Min need not have a value box. I feel it would look better than 3 separate gauges.

If not - would it be possible to turn off all but the needle on a gauge and overlay them in some way ??

BTW I love the package :-) Dave

mainstreetmark commented 7 years ago

You might be able to present it better using small Highlight ranges to make tickmarks, or a highlight from min_val to max_val to denote the range. Multiple needles would be difficult to easily see.

(multiple highlight radii would help here, for when min/max overlap alarm bands)

SeuHkx commented 6 years ago

I need this, too. Hey, how did you solve the problem? Can you please share?

softfoot commented 6 years ago

I didn't - I'm patiently waiting for the gentleman to implement it :-) Dave

3h50 commented 6 years ago

Has this been solved yet? I would love a compass gauge that spins (radial gauge) with a needl that spins based on the ration of the radial gauge (allows the static needle to show a heading and the second needle to show something like say wind direction) then you can see three relationships clearly in one gauge. I'm thinking I could stack two gauges, top one being transparent with just a needle that spins on an invisible radial gauge. Setting plate color to transparent makes it see thru.

caverna commented 5 years ago

@Mikhus, it's a possible duplicate of #75, but a more detailed way. A very good usage is to have a "setpoint" and "current" value shown at the same time... I'd like to try to archive that (creating a DualRadialGauge like). I know typescript enough to do that, but I'm still having problem to compile it to a single file without modifying a lot the config files (I'm using TSC inside VS Code). Would you allow me to refactor some functions of RadialGauge? Also, I'd like to ask, how do you compile your code?

snicklen commented 3 years ago

I'm interested in something similar - I'd like to display two different temperature values on one gauge (i.e. two needles with different values). I don't think this is supported, but I thought I would ask. Love Canvas Gauges - thanks for all your hard wok @Mikhus !

mwolter805 commented 3 years ago

Interested in being able to have tic marks for additional passed in values, for example a min and max and being able set the style (chevron, dash, color, width, opacity) of the tic. The gauge shouldnt need to store values or perform statistical analysis, just display additional passed in values as a tics on the gauge.

unxs0 commented 3 years ago

Upvote+1 this feature

PaulMcGuinness commented 2 years ago

+1 upvote