hotNipi / node-red-contrib-ui-artless-gauge

Node-RED dashboard widget, gauge with minimal design
MIT License
15 stars 4 forks source link

Problem with asymmetric range (differential mode) #10

Closed kais0r closed 4 years ago

kais0r commented 4 years ago

When using differential mode and asymmetric range, there is a problem with the zero marking. (Either zero marking or gauge behaviour)

When using a Range for example of -100 ... 300, then it behaves like this: Screenshot 2020-04-22 at 14 46 47

Screenshot 2020-04-22 at 14 47 17

Screenshot 2020-04-22 at 14 47 53

Screenshot 2020-04-22 at 14 56 02

In this example it has its virtual zero at +100. so Values smaller than 100 look like negative values.

There would be 2 Options to solve:

  1. Set zero mark to the real zero position of the range and start graph from this value
  2. or split ranges from the middle.

Snippet of this example: [{"id":"f9a45330.89b66","type":"ui_artlessgauge","z":"31363699.ff5a5a","group":"556c6fb0.b3e62","order":10,"width":0,"height":0,"name":"Fv","icon":"","label":"Fv","unit":"Newton","layout":"linear","decimals":0,"differential":true,"minmax":true,"colorTrack":"#555555","colorFromTheme":true,"sectors":[{"val":-100,"col":"#00f900","t":"min","dot":0},{"val":120,"col":"#fffb00","t":"sec","dot":0},{"val":220,"col":"#ff2600","t":"sec","dot":0},{"val":300,"col":"#ff2600","t":"max","dot":0}],"lineWidth":3,"bgcolorFromTheme":true,"x":1030,"y":1900,"wires":[]},{"id":"5505797f.50e388","type":"ui_slider","z":"31363699.ff5a5a","name":"","label":"slider","tooltip":"","group":"556c6fb0.b3e62","order":9,"width":0,"height":0,"passthru":true,"outs":"end","topic":"","min":"-100","max":"300","step":"1","x":790,"y":1900,"wires":[["f9a45330.89b66"]]},{"id":"556c6fb0.b3e62","type":"ui_group","z":"","name":"Modulbrücke 3 (West)","tab":"a7f6e62d.f7a4d8","order":4,"disp":true,"width":"6","collapse":false},{"id":"a7f6e62d.f7a4d8","type":"ui_tab","z":"","name":"Kraft","icon":"dashboard","order":4,"disabled":false,"hidden":false}]

hotNipi commented 4 years ago

I can't see the issue or I'm missing something? As sated in documentation - Value of center point is exactly between configured min and max.

From -100 to 300 makes center point to be exactly 100. Scale of track is linear and I can't see any way to change this..

!! The center value can be shown if you configure the unit field empty.

What I discovered during this is that with value === 0 the gauge shows min value (-100). That is bug and will be fixed immediately. Thank you for pointing me to discover this.

hotNipi commented 4 years ago

If you want to have zero marked on track with uneven configuration you can show the dot on that point. And if you don't want to change the line color when crossing the zero, there is a little configuration trick.

image

image

kais0r commented 4 years ago

Hi. Maybe it's not an issue if you did it on purpose :-).

It would be great to have an option that the line starts drawing from 0 (or any value between min and max), and not only from (config.min+config.max)/2.

Does this clearify what i mean?

kais0r commented 4 years ago

Here is another example: If i have 5kW Peak solar panels on my roof, and i want to gauge the main PowerMeter, then i would have a min power of -5kW and a max of 15kW.

When consuming 0.2kW, i want the Graph to be very tiny, almost 0. At the moment the graph would be as big as representing 4.8kW:

Screenshot 2020-04-22 at 23 27 49

Edit: When enabling differential mode, having an option to select the Start Point which can be Center or custom would be AMAZING!

kais0r commented 4 years ago

Here is a Sub-Issue (i don't want to make a new one, because i think it's the same code area)

In differential mode, the left hand side range marks have the wrong color. Since the graph comes form the right hand side, the range marking should have the color of the next range color. (The graph-color itself behaves correctly).

Screenshot 2020-04-22 at 23 55 06

Screenshot 2020-04-23 at 00 06 59

Edit: Sorry if i am too miserly

hotNipi commented 4 years ago

Well. I'll try to explain why it is bad idea. This is how it may look like.
image

Try to look at it like you just walked in the control room and at first look to the screen instantly understand what this gauge tries to tell to you. Very hard. Gauge in this situation is pretty unreadable.

And also, same functionality must be available for radial mode and this may turn out more confusing ....

But I am not telling that it is impossible to do. To convince me to add this option, it needs a bit wider support. So if you start a thread in https://discourse.nodered.org/ and there will be more support to your idea, I will implement it as an option.

The sub issue

About the sub issue (colors order in configuration) I knew it will rise at some day. But there is not much I can do about it. It is the way of thinking. You are thinking about two sides and moving to that direction, But there is only one line with mathematical order of marked points.

Can only advise to think linear and then it makes sense.

kais0r commented 4 years ago

I understand, but if you think about my example: 80035852-055a2500-84f1-11ea-869a-f9c148235ae9

If you walk my control room, first thing you think: "hell, why is there a power activity?".

1: Off-Center-Graph-starting-point: AsymZeroPos

I understand what you are trying to say. I think it depends on the case of use. In my case of use your example would be what i want to see. But i agree that it would be more convinient if everything starts from center for most applications.

I think the solution to both our opinions would be asymmetric scale factors. But in my opinion this is a bad idea, too:

2: Asymmetric scale factors: AsymScale

Having a option for setting the "Off-Center-Graph-starting-point" (1) would be cool.

kais0r commented 4 years ago

The sub issue:

For non-differential mode i agree. But when enabling differential-mode the interpretation (or thinking) is differential.

Graph goes from Center to the right and from center to the left. So it is "mirrored" from the center point.

But i agree that it is too complicated to make such detailed differences. Let's forget about the sub-isue.

hotNipi commented 4 years ago

Your examples of course make sense. But now let's go to the complicated area. The edge cases.

  1. As center point is free to move where you want, lets place it very near to edge. (preserve readability)
  2. Radial layout - runs out of space so nowhere to place the marker image
hotNipi commented 4 years ago

Th other thing. Differential mode around the "best" value. What i mean is again the readability - if the balanced situation is considered the best, the colored line is tiny dot. That is most unreadable situation. I put in another example to explain myself I have seen same issue many times with people doing with battery indicator. If battery goes empty, the gauge shows no value (or small dot in edge). But situation is for opposite - critical. So should be red and big to indicate it.

kais0r commented 4 years ago
  1. there is always a way to configure it wrong. I thing the users of this nice gauge are not that untalented.

  2. you are right. Maybe asymmetric scale fators make sense in Radial Layout. (if there would be space for the Center Marker value in Linear Layout, it would be good, too)

What if: When enabling "Set Center Value":

hotNipi commented 4 years ago
  1. (Linear). There is no value shown at that point to indicate what the value is. There is option to show value at that point (same manner as min and max). Now lets move the point near to edge and lets then deal with values in scale of 10000. And lets try to figure out how to not overlap them....
kais0r commented 4 years ago

There are endless examples for both pro and contra side. Thats why an option to enable it would be prefered.

Showing the SOC of a battery: When you use the non differential mode, There is this "problem" you mentions as well... Having no graph at for example 5% SOC then its not good as well, because u think browser does not function corretly.

Showing 0 is always critical. But i think most users know about that.

Maybe where whould always be at least 1px shown? But this is another issue i think.

Edit: If your Lithium-Ion battery has 0% SOC for a long time it is dead anyway :-D You need some heavy push messages when getting below 5%

kais0r commented 4 years ago

to 3: I agree... but this is a static configuration. Users (programmers) must take care about that. When showing such high values, most people consider to take the next decades....

I understand your point of view. you want to keep it simple to use. And thats good. I want to help to make it more suitable for even more situations, because its a really good gauge!

hotNipi commented 4 years ago

:) Just with half an hour of discussion about seamlessly simple option and the issue list with grows to the heaven. I'm not against it. But as you see .. many things to take account (and then to explain to public why some things can't be done)

But before to go on, I still need to think the possibility of it with radial layout. That is much more complicated thing as you can imagine.

hotNipi commented 4 years ago

So I think I can do following: The breaking point for differential mode can be even in the middle (current solution) or zero (0), but not any other custom value in range.

image

Ignore the radial in that image cos this is just tweaked graphics, no code changes (just indicates where zero point will go to get the ideas about what will happen)

Why only the zero? Because of all other possible configurations will create too many cases for fitting the elements and lead to overlaps and many other such side issues from layout perspective.

But if so limited, is it worth of doing at all??

At this point the topic started for more input at https://discourse.nodered.org/t/artless-gauge-features-i-need-second-and-third-opinion/25361

hotNipi commented 4 years ago

So something I did. You can move the cross point when in differential mode. Freely. Before to publish, Id like to get some comments. Install it from git to try

hotNipi commented 4 years ago

Version 0.1.25 published

kais0r commented 4 years ago

Sorry for my late reply. It's working perfect! I Really appreciate the quick implementation of this feature. Thanks so much!