Dashboard gauges - improvements I'd like to see

Ideas / Suggestions On Cayenne Roadmap
1

The current online dashboard gauge is more like a 3 position indicator light than it is a gauge. All it really indicates is low (green), medium (amber), and high (red) in only 3 positions in the 10, noon, and 2 o’clock positions.

1373×541 50.3 KB

I would like to see a gauge that proportionately represents the value across the arc, utilizing more of the arc say 270° instead of the current 160°ish arc.

I would also like a user selectable range based on the value instead of the current ‘threshold’ setting that makes no sense to me in how it works.

Having user assigned green zones and warning ranges would be helpful also.

Examples- for my outdoor temperature sensor I would set the range at -10° to 110°F because that is the range of temperatures we see around here, with a red warning zone from -10° to 32°F (because I’m in the water business and that is when my work turns to rock, and daaamn it’s cold), and another red zone from 95° to 110°F. For my aquarium the gauge range might be from 70° to 85°F with red zones from 70-74 and 81-85. Both sensors are waterproof DS18B20’s.

I hope this makes sense, if not you know where to find me :slight_smile:

-Ian

2

Haha, I never really noticed that there are only 3 positions for the gauges. +1 on these suggestions from me!

3

@Ian @ats1080s I was wondering how long the 3 position gauges would hold out… I agree with you here, we can definitely improve our gauge widgets.

So how it works is if the value is below the lower threshold, then it’s in the low (green) position. If value is above the upper threshold, then it’s in the high (red) position. In between is the Medium (amber). This was sort of a hack until we had time to improve the gauge to what you’ve described; with an actual percentage and a min/max.

Okay, here is my brain dump on this:

User assigned zones is a great idea! Question, what would you expect the color of the gauge to be at the time when the value is not inside one of the assigned green / red zones? …Amber?

For example, in your aquarium would the middle range of 75-80 be green or amber?

Or would you want to be able to also specify that 75 and 80 are Amber (since you are approaching the warning zones) and that 76-79 are green…this scenario leads to much more customization, but the trade-off being a potentially cluttered and (hopefully not) confusing set up.

Perhaps there should only be a red zone? After all in your examples you only list red zone ranges. Or actually maybe what is best would be the ability to set ‘danger zones’ that are red, ‘warning zones’ that are amber, and then anything else would be green.

I think what may also be helpful is to allow for a no ‘zones’ setting to be set, and you could use, say, a black arrow instead of various colored arrows if you rather not set up the ‘danger zones’ and ‘warning zones’.

We really appreciate your input here! If you’d rather say “I don’t know, you guys figure out what’s best stop making me think!” that’s okay too :slight_smile: .

Interested to hear your thoughts on this too @ats1080s

P.S. moving this to Ideas / Suggestions

-B

4

User defined ranges would be best. I think the scale of the gauge and color ranges should both be customized, even multiple ranges for the same color. For example in the fish tank category low and high are both bad, and probably only need to see 50-90 degrees (maybe less) on the gauge. I can see a lot of situations where you want to keep a value centered with low and high values marked as red, and maybe a warning zone before the red.

5

My favorite gauge (on another platform :rolling_eyes:) which apparently comes from Google allows the setting of warning arcs by adjusting the redFrom redTo yellowFrom yellowTo variables. As we discussed, a green arc would be nice also. All this rolled up into the Cayenne GUI is all we are asking. No pressure :grin:.

From the .js header on the ‘other’ site-
https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
https://www.google.com/jsapi

The variables-
options = {width: 120, height: 120, redFrom: 90, redTo: 100, yellowFrom:75, yellowTo: 90, minorTicks: 5}

-Ian

1 Like
7

@hmuller can you elaborate more about this?

8

THanks @shramik_salgaonkar, issue was solved, was an miss interpretation from my side.

1 Like