# Artless Gauge - Font Colour

**URL:** <https://discourse.nodered.org/t/artless-gauge-font-colour/67795>\
**Category:** General\
**Created:** [16 September 2022 10:25 UTC](https://discourse.nodered.org/t/artless-gauge-font-colour/67795 "2022-09-16T10:25:54Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)\
**Post date:** [16 September 2022 10:25 UTC](https://discourse.nodered.org/t/artless-gauge-font-colour/67795/1 "2022-09-16T10:25:54Z")

</div>

Hi All,

I have a need to set the font colour on "Artless Gauge" .... Both the Label and the primary/secondary fields... Individually if possible, but as a whole would also be ok...

Is this possible?

TIA  
Ed

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [16 September 2022 11:09 UTC](https://discourse.nodered.org/t/artless-gauge-font-colour/67795/2 "2022-09-16T11:09:29Z")

</div>

Here you are.

```auto
[
    {
        "id": "0b6139a9c3dff325",
        "type": "ui_artlessgauge",
        "z": "98fb9802851faeed",
        "group": "68c477fe180b2ad2",
        "order": 0,
        "width": "5",
        "height": "5",
        "name": "",
        "icon": "fa-fire",
        "label": "Gauge",
        "unit": "kg",
        "layout": "radial",
        "decimals": 0,
        "differential": false,
        "minmax": true,
        "colorTrack": "#555555",
        "style": "",
        "colorFromTheme": true,
        "property": "payload",
        "secondary": "secondary",
        "inline": true,
        "animate": true,
        "sectors": [
            {
                "val": 0,
                "col": "#ff9900",
                "t": "min",
                "dot": 0
            },
            {
                "val": 10,
                "col": "#ff9900",
                "t": "max",
                "dot": 0
            }
        ],
        "lineWidth": 3,
        "bgcolorFromTheme": true,
        "diffCenter": "",
        "x": 320,
        "y": 150,
        "wires": []
    },
    {
        "id": "a51079536a43c5b4",
        "type": "inject",
        "z": "98fb9802851faeed",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            },
            {
                "p": "secondary",
                "v": "100 km",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "6",
        "payloadType": "num",
        "x": 110,
        "y": 120,
        "wires": [
            [
                "0b6139a9c3dff325"
            ]
        ]
    },
    {
        "id": "09d96facad77ed26",
        "type": "ui_template",
        "z": "98fb9802851faeed",
        "group": "68c477fe180b2ad2",
        "name": "aetless gauge color override",
        "order": 1,
        "width": 0,
        "height": 0,
        "format": "<style>\n .nr-dashboard-ui_artlessgauge text{\n fill:red !important;\n }\n .nr-dashboard-ui_artlessgauge text.small{\n fill:orange !important;\n }\n .nr-dashboard-ui_artlessgauge text.medium{\n fill:steelblue !important;\n }\n .nr-dashboard-ui_artlessgauge tspan.big{\n fill:yellow !important;\n }\n .nr-dashboard-ui_artlessgauge tspan.medium{\n fill:green !important;\n }\n .nr-dashboard-ui_artlessgauge i{\n color:blue !important;\n }\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 360,
        "y": 90,
        "wires": [
            []
        ]
    },
    {
        "id": "68c477fe180b2ad2",
        "type": "ui_group",
        "name": "Default",
        "tab": "6e7f9da.d28aee4",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "6e7f9da.d28aee4",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "order": 2,
        "disabled": false,
        "hidden": false
    }
]

```

---

<div class="post-metadata">

**Author:** ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)\
**Post date:** [16 September 2022 11:43 UTC](https://discourse.nodered.org/t/artless-gauge-font-colour/67795/3 "2022-09-16T11:43:59Z")

</div>

Hi and thank you sire....

Fortunately/unfortunately, it works exactly as I asked for!! All AG's adopt the new colour scheme throughout the dashboard set!

On reading my request, I saw that I kinda left out a couple of very important words...

I should have asked, (and my deepest apologies for messing you around):

I have a need to _ **dynamically** _ set the font colour on _ **an** _ "Artless Gauge" .... Both the Label and the primary/secondary fields _ **of the specific gauge** _... Individually _ **coloured fields** _ if possible, but as a whole would also be ok..._**(Not All of the gauges on the dashboards, just a selected few gauges to highlight problem areas.)**_

Further: I was hoping to this control via a function node -  
Kinda like I am doing the label, ie:

```auto
var label = "A/C" 
if (Bk == 1) { label = label + " B" } 
if (Sk == 1) { label = label + " S" }
if (Lk == 1) { label = label + " L" }
if (Fk == 1) { label = label + " F" }
msg.control = { label: label }

```

Here's hoping!!

Thanks Again!!

Regds  
Ed

PS: I hope I didn't leave out any other important words - AGAIN!!

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [16 September 2022 12:03 UTC](https://discourse.nodered.org/t/artless-gauge-font-colour/67795/4 "2022-09-16T12:03:54Z")

</div>

To change styles of specific gauge, you'll need to address it with the `node-id`  
So the CSS override rules should look like this:

```auto
 [node-id='5d7f40e2f35fecbc'].nr-dashboard-ui_artlessgauge text{
        fill:red !important;
    }

```

The node-id can be found at the info tab.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/4/c4990b66f578a3546e7eebc45d3cb85287b9afad.png)

To change the label it should work fine just as you are doing it.  
Just as it is not permanent change, you'll need to send that control message with proper label any time the dashboard connects or you do change tabs on dashboard.

EDIT:  
I reread and if I understand correctly you want to change styles on fly via control message. That is not supported any way. But not impossible. I'll try to do an example. It is kind of expert level stuff ... Takes a bit time

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [16 September 2022 12:45 UTC](https://discourse.nodered.org/t/artless-gauge-font-colour/67795/5 "2022-09-16T12:45:19Z")

</div>

This example changes gauges value field color based on payload value.

```auto
[
    {
        "id": "09d96facad77ed26",
        "type": "ui_template",
        "z": "98fb9802851faeed",
        "group": "68c477fe180b2ad2",
        "name": "artless gauge color override",
        "order": 1,
        "width": 0,
        "height": 0,
        "format": "<style> [node-id='5d7f40e2f35fecbc'].nr-dashboard-ui_artlessgauge text{\n fill:red;\n }\n \n .nr-dashboard-ui_artlessgauge text.small{\n fill:orange;\n }\n .nr-dashboard-ui_artlessgauge text.medium{\n fill:steelblue;\n }\n .nr-dashboard-ui_artlessgauge tspan.big{\n fill:yellow;\n }\n .nr-dashboard-ui_artlessgauge tspan.medium{\n fill:green;\n }\n .nr-dashboard-ui_artlessgauge i{\n color:blue ;\n }\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 600,
        "y": 130,
        "wires": [
            []
        ]
    },
    {
        "id": "5d7f40e2f35fecbc",
        "type": "ui_artlessgauge",
        "z": "98fb9802851faeed",
        "group": "68c477fe180b2ad2",
        "order": 0,
        "width": "5",
        "height": "5",
        "name": "",
        "icon": "fa-fire",
        "label": "Gauge",
        "unit": "kg",
        "layout": "radial",
        "decimals": 0,
        "differential": false,
        "minmax": true,
        "colorTrack": "#555555",
        "style": "",
        "colorFromTheme": true,
        "property": "payload",
        "secondary": "secondary",
        "inline": true,
        "animate": true,
        "sectors": [
            {
                "val": 0,
                "col": "#ff9900",
                "t": "min",
                "dot": 0
            },
            {
                "val": 10,
                "col": "#ff9900",
                "t": "max",
                "dot": 0
            }
        ],
        "lineWidth": 3,
        "bgcolorFromTheme": true,
        "diffCenter": "",
        "x": 710,
        "y": 210,
        "wires": []
    },
    {
        "id": "619c6812540414cd",
        "type": "inject",
        "z": "98fb9802851faeed",
        "name": "",
        "props": [
            {
                "p": "control",
                "v": "",
                "vt": "date"
            }
        ],
        "repeat": "1",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "x": 110,
        "y": 210,
        "wires": [
            [
                "7e6faa776c944cae"
            ]
        ]
    },
    {
        "id": "7e6faa776c944cae",
        "type": "random",
        "z": "98fb9802851faeed",
        "name": "",
        "low": 1,
        "high": 10,
        "inte": "true",
        "property": "payload",
        "x": 250,
        "y": 210,
        "wires": [
            [
                "c78c7615a9fd4d89"
            ]
        ]
    },
    {
        "id": "c78c7615a9fd4d89",
        "type": "ui_template",
        "z": "98fb9802851faeed",
        "group": "68c477fe180b2ad2",
        "name": "dynamically change gauge style",
        "order": 2,
        "width": 0,
        "height": 0,
        "format": "<script>\n\n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n // choose color based on payload value\n let col = 'geen'\n if(msg.payload > 5){\n col = 'red'\n }\n //select the gauge by class and the node-id -- $(\".nr-dashboard-ui_artlessgauge[node-id='5d7f40e2f35fecbc']\")\n // find an element inside the gauge -- class big is only used for the value field\n // change the attribute 'style' with complete sentence - \"fill:red\"\n $(\".nr-dashboard-ui_artlessgauge[node-id='5d7f40e2f35fecbc']\").find('.big').attr(\"style\",\"fill:\"+col+\"\");\n\n \n }\n});\n})(scope);\n\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 470,
        "y": 210,
        "wires": [
            [
                "5d7f40e2f35fecbc"
            ]
        ]
    },
    {
        "id": "68c477fe180b2ad2",
        "type": "ui_group",
        "name": "Default",
        "tab": "6b520bda.e997a4",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "6b520bda.e997a4",
        "type": "ui_tab",
        "name": "Testing",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

```

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [16 September 2022 13:08 UTC](https://discourse.nodered.org/t/artless-gauge-font-colour/67795/6 "2022-09-16T13:08:08Z")

</div>

Or you could ask the Artless Gauge maintainer to implement the custom class configuration which is in the default dashboard widgets. 😜

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [16 September 2022 13:09 UTC](https://discourse.nodered.org/t/artless-gauge-font-colour/67795/7 "2022-09-16T13:09:13Z")

</div>

Happy to take PR 😃

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [16 September 2022 13:10 UTC](https://discourse.nodered.org/t/artless-gauge-font-colour/67795/8 "2022-09-16T13:10:17Z")

</div>

I'd love to try but I have no idea how to go about it.

---

<div class="post-metadata">

**Author:** ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)\
**Post date:** [16 September 2022 14:56 UTC](https://discourse.nodered.org/t/artless-gauge-font-colour/67795/9 "2022-09-16T14:56:05Z")

</div>

Hi HN!

Yep...This does it! But, as you said:

> [@hotNipi](#):
>
> It is kind of expert level stuff

If I actually knew how to do a:

> [@hotNipi](#):
>
> Happy to take PR 😃

I would certainly do so!

Meantime, I will find new and innovative ways to screw up your example in trying to "customise" it to my needs!!

Many thanx

Ed

---

<div class="post-metadata">

**Author:** ![mhardy6351](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mhardy6351/32/68294_2.png) [@mhardy6351](https://discourse.nodered.org/u/mhardy6351)\
**Post date:** [26 September 2022 16:27 UTC](https://discourse.nodered.org/t/artless-gauge-font-colour/67795/10 "2022-09-26T16:27:29Z")

</div>

Thanks for the great gauge. Your example flows have been quite helpful.

Now to my observation:  
Im not sure I have a misunderstanding of use of the msg.secondary and allowing the flow to update on a regular interval? When using your example flow, if i use the radial gauge in differential mode. Whenever the msg.secondary updates, the gauge will swing from the center point to the negative value then back to the msg.payload value. Then the display will update the msg.secondary. Im not sure if there is a way to prevent this swing to the negative then back to the value? Very distracting when the update is a minimal change. How can i turn off this value swing?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [26 September 2022 16:40 UTC](https://discourse.nodered.org/t/artless-gauge-font-colour/67795/11 "2022-09-26T16:40:47Z")

</div>

If you send last know value alongside `msg.secondary`, the gauge behaves like payload has not be changed. Means that if you send the `msg.secondary` alone, the incoming `msg` treated as `msg.payload = 0`.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [10 October 2022 16:41 UTC](https://discourse.nodered.org/t/artless-gauge-font-colour/67795/12 "2022-10-10T16:41:39Z")

</div>

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