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
Here you are.
[
{
"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
}
]
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:
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!!
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:
[node-id='5d7f40e2f35fecbc'].nr-dashboard-ui_artlessgauge text{
fill:red !important;
}
The node-id can be found at the info tab.
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
This example changes gauges value field color based on payload value.
[
{
"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
}
]
Or you could ask the Artless Gauge maintainer to implement the custom class configuration which is in the default dashboard widgets. 
Happy to take PR 
1 Like
I'd love to try but I have no idea how to go about it.
Hi HN!
Yep...This does it! But, as you said:
If I actually knew how to do a:
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
1 Like
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?
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.
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
