How to add sectors in a gauge?

Dashboard
1

Hi,
I'm starting with node-red, I'm trying to learn quickly by myself but I need help here :slight_smile:

image
image443Ă—535 11.6 KB

I need a 3rd sector:

  • green : 0 - 50
  • yellow : 50 - 70
  • orange : 70 - 80
  • red : 80 - 100

can you help me? Thank you

2

The gauge only supports 3 sectors.

3

Have a look at node-red-contrib-ui-artless-gauge which can use more sectors.

4

There are examples of gauges with more sectors in this thread: September giveaway.
Needs some CSS knowledge though.

5

Still, it is possible with dashboard native gauge.

[{"id":"5c4c5120.bb035","type":"ui_gauge","z":"69a83901969741f7","name":"","group":"dc4d8303.df87","order":0,"width":0,"height":0,"gtype":"gage","title":"gauge","label":"units","format":"{{value | number:1}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"5","seg2":"7","x":770,"y":760,"wires":[]},{"id":"b26a6748.70f428","type":"function","z":"69a83901969741f7","name":"options","func":"msg.ui_control = {options:{customSectors: {\n  percents: false, \n  ranges: [{\n    color : \"#009900\",\n    lo : 0,\n    hi : 2\n  },{\n    color : \"#33cccc\",\n    lo : 2.1,\n    hi : 4\n  },{\n    color : \"#3366ff\",\n    lo : 4.1,\n    hi : 6\n  },{\n    color : \"#ff00ff\",\n    lo : 6.1,\n    hi : 8\n  },{\n    color : \"#ff0000\",\n    lo : 8.1,\n    hi : 10\n  }]\n    \n}}}\ndelete msg.payload\nreturn msg;","outputs":1,"noerr":0,"x":580,"y":860,"wires":[["5c4c5120.bb035"]]},{"id":"ef9011e5.8e00d","type":"ui_slider","z":"69a83901969741f7","name":"","label":"slider","tooltip":"","group":"dc4d8303.df87","order":1,"width":0,"height":0,"passthru":true,"outs":"end","topic":"","min":0,"max":10,"step":"2","x":430,"y":760,"wires":[["5c4c5120.bb035"]]},{"id":"b2eb7e33.b3416","type":"ui_button","z":"69a83901969741f7","name":"","group":"dc4d8303.df87","order":2,"width":0,"height":0,"passthru":false,"label":"2 colors","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":420,"y":820,"wires":[["22f666e0.f2ceda"]]},{"id":"d3416f08.ad98e","type":"ui_button","z":"69a83901969741f7","name":"","group":"dc4d8303.df87","order":2,"width":0,"height":0,"passthru":false,"label":"5 colors","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":420,"y":860,"wires":[["b26a6748.70f428"]]},{"id":"22f666e0.f2ceda","type":"function","z":"69a83901969741f7","name":"options","func":"msg.ui_control = {options:{customSectors: {\n  percents: false, \n  ranges: [{\n    color : \"#ffff00\",\n    lo : 0,\n    hi : 5\n  },{\n    color : \"#3399ff\",\n    lo : 5.01,\n    hi : 10\n  }]\n    \n}}}\ndelete msg.payload\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":580,"y":820,"wires":[["5c4c5120.bb035"]]},{"id":"dc4d8303.df87","type":"ui_group","name":"Charts","tab":"18e7297.06310d7","order":1,"disp":true,"width":"6"},{"id":"18e7297.06310d7","type":"ui_tab","name":"Home","icon":"dashboard"}]
2 Likes
6

Hello,
thank you very much for your support.
I have a preference for the modification of the native gauge. But I will study the other options

bye

7

Hi
It's me again,

How to integrate variables to define my sectors ?

msg.ui_control = {options:{customSectors: {
  percents: false, 
  ranges: [{
    color : "#009900",
    lo : 0,
    hi : 2
  },{
    color : "#33cccc",
    lo : 2.1,
    hi : 4
  },{
    color : "#3366ff",
    lo : 4.1,
    hi : 6
  },{
    color : "#ff00ff",
    lo : 6.1,
    hi : 8
  },{
    color : "#ff0000",
    lo : 8.1,
    hi : 10
  }]
    
}}}
delete msg.payload
return msg;

I would like to do something like this

msg.ui_control = {options:{customSectors: {
  percents: false, 
  ranges: [{
    color : "#33FF5E",
    lo : 0,
    hi : msg1.payload,
  },{
    color : "#FFFF33",
    lo : msg1.payload,
    hi : msg2.payload,
  },{
    color : "#FFBB33",
    lo : msg2.payload,
    hi : msg3.payload,
  },{
    color : "#FF3333",
    lo : msg3.payload,
    hi : 100,
  }]
    
}}}
delete msg.payload
return msg;

the node-red paradigm confuses me

thanks in advance

8

As all of your flow data will need to arrive at the same time, it would probably be better to format the data into the one msg, instead of separate msg's - msg2, msg3.

Something like;

msg.payload.one
msg.payload.two
msg.payload.three
9

Hi,

I did this and it works

msg.ui_control = {options:{customSectors: {
  percents: false, 
  ranges: [{
    color : "#33FF5E",
    lo : 0,
    hi : msg.payload[0],
  },{
    color : "#FFFF33",
    lo : msg.payload[0],
    hi : msg.payload[1],
  },{
    color : "#FFBB33",
    lo : msg.payload[1],
    hi : msg.payload[2],
  },{
    color : "#FF3333",
    lo : msg.payload[2],
    hi : 100,
  }]
    
}}}
delete msg.payload
return msg;

Thanks again

2 Likes
10

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.