Artless Gauge: how to show positive and negative values with different colours

Dashboard
1

I'm using the very nice artless gauge node here (thanks to hotnipi) in differential mode.

artlessnode
artlessnode746Ă—322 18.7 KB

I would like to display negative values in orange and positive ones in green.
Following the guidelines I created two sectors, one for negative and the other for positive with orange and green colours respectively.
make the node formatting like that:

let oExchange = { topic: 'S', payload: msg.payload };

var newSectors = [{ t: "min", val: -10, col: "#FF7F0E", dot: 3 }, { t: "max", val: 6, col: "#H2CA02C", dot: 3 }];

oExchange.control = { unit: "kW", label: "Energy Exchange", icon: "fa-plug", center: 0, decimals: 2, sectors: newSectors }

return oExchange;

I was expecting that with positive values the bar would be drawn in green (#H2CA02C), but it's always in orange (#FF7F0E). What am I doing wrong here?

Thanks in advance.

i enclose the test flow here:

[
    {
        "id": "dd1c5748828d0ac9",
        "type": "inject",
        "z": "641efd2eb7d562cf",
        "name": "reset data",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": "",
        "topic": "",
        "payload": "[]",
        "payloadType": "json",
        "x": 1780,
        "y": 980,
        "wires": [
            [
                "f7280487dacbf516"
            ]
        ]
    },
    {
        "id": "f7280487dacbf516",
        "type": "ui_artlessgauge",
        "z": "641efd2eb7d562cf",
        "group": "4552fe72.fdfa5",
        "order": 2,
        "width": 0,
        "height": 0,
        "name": "Scambio",
        "icon": "fa-plug",
        "label": "Energia Elettrica",
        "unit": "kW",
        "layout": "linear",
        "decimals": "2",
        "differential": true,
        "minmax": true,
        "colorTrack": "#48cb51",
        "style": "",
        "colorFromTheme": true,
        "property": "payload",
        "secondary": "secondary",
        "inline": false,
        "animate": true,
        "sectors": [
            {
                "val": -10,
                "col": "#2ca02c",
                "t": "min",
                "dot": 3
            },
            {
                "val": 6,
                "col": "#2ca02c",
                "t": "max",
                "dot": 3
            }
        ],
        "lineWidth": "5",
        "bgcolorFromTheme": true,
        "diffCenter": "0",
        "x": 1980,
        "y": 920,
        "wires": []
    },
    {
        "id": "89835f2094530cd2",
        "type": "function",
        "z": "641efd2eb7d562cf",
        "name": "FormatGauge",
        "func": "let oExchange = { topic: 'S', payload: msg.payload };\nvar newSectors = [{ t: \"min\", val: -10, col: \"#FF7F0E\", dot: 3 }, { t: \"max\", val: 6, col: \"#H2CA02C\", dot: 3 }];\noExchange.control = { unit: \"kW\", label: \"Energy Exchange\", icon: \"fa-plug\", center: 0, decimals: 2, sectors: newSectors }\nreturn oExchange;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 1780,
        "y": 920,
        "wires": [
            [
                "f7280487dacbf516"
            ]
        ]
    },
    {
        "id": "8ec4a283e5a7af92",
        "type": "ui_button",
        "z": "641efd2eb7d562cf",
        "name": "negative value",
        "group": "4552fe72.fdfa5",
        "order": 3,
        "width": 3,
        "height": 1,
        "passthru": true,
        "label": "- value",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "-5",
        "payloadType": "num",
        "topic": "",
        "topicType": "str",
        "x": 1560,
        "y": 940,
        "wires": [
            [
                "89835f2094530cd2"
            ]
        ]
    },
    {
        "id": "d5d8e1e3310fa854",
        "type": "ui_button",
        "z": "641efd2eb7d562cf",
        "name": "positive value",
        "group": "4552fe72.fdfa5",
        "order": 5,
        "width": 3,
        "height": 1,
        "passthru": true,
        "label": "+ value",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "3",
        "payloadType": "num",
        "topic": "",
        "topicType": "str",
        "x": 1560,
        "y": 900,
        "wires": [
            [
                "89835f2094530cd2"
            ]
        ]
    },
    {
        "id": "4552fe72.fdfa5",
        "type": "ui_group",
        "name": "Artless differentail +/- values",
        "tab": "2ecb90e3.af7a5",
        "order": 3,
        "disp": true,
        "width": "7",
        "collapse": false,
        "className": ""
    },
    {
        "id": "2ecb90e3.af7a5",
        "type": "ui_tab",
        "name": "TestArea",
        "icon": "dashboard",
        "order": 7,
        "disabled": false,
        "hidden": false
    }
]
2

Couple of mistakes
1.

Is not valid color in hex

  1. By configuring only min and max, you'll miss the breaking point where one color starts and the other ends. As you wont to have breaking point at the 0 value, add one sector config with type "sec" (and dot: 0 if you don't want the dot visible et the 0 point)
var newSectors = [
{ t: "min", val: -10, col: "#FF7F0E", dot: 3 },
{ t: "sec", val: 0, col: "#some-valid-green-code", dot: 0 }, 
{ t: "max", val: 6, col: "#some-valid-green-code", dot: 3 }
];
3

Hi hotNipi,
Thank you very much for your prompt response.

  1. true, When typing the hex code I red the “#” as a “H” (need new glasses)
  2. I missed the central point attribute!

Now it works like a charm!

Case closed!

1 Like
4

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