Change font & color inside widget?

Dashboard
1

Hi all,
i tried to change Font , color, of the data displayed inside a widget . Sometime it's working , sometime not .
The "Label" is displayed in Small Grey Color = good ! BUT the "Value format" not !
small

diff

I know it's Angular filters , in this last . But how to translate html to Angular to have the desired font in "Value format"?

Not easy for a newbie like me :wink: Any idea ?
Thanks

2

Another way to change ui elements is to use UI Widget configuration via msg.ui_control
See justgauge parameters at the end of document.

3

I've scoured the forums, and I can't find any REAL answer to this question. Sending us to see justgauge parameters, checking widget config parameters, etc, doesn't help people like me that need to see the solution when we're not coders!

I have a wave widget. I'd like to change the colour of the circle, circle size, wave height and wave colour.

Please SHOW me how I can do that globally, for all of the gauges in my UI.

HELP!

image
image644×639 31.9 KB

EDIT: I've been trying to use the UI </> template globally but I can't figure it out!

4

What is wrong with the example in the document linked in the post before yours?

5

It doesn't show me how it's done.

I've tried to follow about 5 different directions, but I haven't been successful and I haven't seen an example.

I've tried multiple different settings, too... I've tried changing the messages going into the template node, I can't successfully change anything other than what is allowed in the main settings in the right hand information bar.

I've changed the dashboard from ANGULAR, to USE ANGULAR IN TEMPLATE to NODE-RED EVERYWHERE.

image

image

6

image
image308×584 11.7 KB

Just trying to change the outline circle black... If I can understand this, I can adjust the remaining options successfully... but I can't even change this.

Please, help me... :crazy_face:

7

No need to change dashboard configuration.

I know, the example for liquid-fill gauge is nearly last rows on the page but it exists. So read documents more carefully.

Here is the example.

[{"id":"4844a355.05b42c","type":"ui_gauge","z":"6d08d5ab.a8aa3c","name":"","group":"595895b0.98866c","order":1,"width":0,"height":0,"gtype":"wave","title":"gauge","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":720,"y":1480,"wires":[]},{"id":"92529f02.637eb","type":"inject","z":"6d08d5ab.a8aa3c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":300,"y":1440,"wires":[["2fb7daa6.16a636"]]},{"id":"6634c4e4.184f7c","type":"random","z":"6d08d5ab.a8aa3c","name":"","low":"1","high":"10","inte":"true","property":"payload","x":500,"y":1480,"wires":[["4844a355.05b42c"]]},{"id":"d431e799.8805d8","type":"inject","z":"6d08d5ab.a8aa3c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"3","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"num","x":290,"y":1480,"wires":[["6634c4e4.184f7c"]]},{"id":"2fb7daa6.16a636","type":"change","z":"6d08d5ab.a8aa3c","name":"","rules":[{"t":"set","p":"ui_control","pt":"msg","to":"{\"options\":{\"circleColor\":\"#FF7777\",\"textColor\":\"#FF4444\",\"waveTextColor\":\"#FFAAAA\",\"waveColor\":\"#FFDDDD\",\"circleThickness\":0.3,\"textVertPosition\":0.2,\"waveHeight\":0.05,\"waveCount\":8}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":490,"y":1440,"wires":[["4844a355.05b42c"]]},{"id":"595895b0.98866c","type":"ui_group","name":"Default","tab":"c9285c84.26c5a","order":1,"disp":true,"width":"12","collapse":false},{"id":"c9285c84.26c5a","type":"ui_tab","name":"Home","icon":"dashboard","order":1}]
8

I added that, deployed, changed the circle colour to 000000, but nothing changed.

image

:frowning:

image
image1248×601 40.6 KB

9

Works for me perfectly

10

But did you pressed inject after deploy?

11

Yes... I had to change the hex to 000001 to get it to change... and I have the single gauge changed. Thank you for the example!

Now I have to figure out how to change the group, or I have to change every gauge displayed individually.

12

Send same configuration for every gauge. Or if they must be different make one configuration for everyone. Configuration overrides are not permanent. You'll need to send it every time the gauge initialzes itself. That is at deploy, restart, change dashboard tab ....

13

Is there a method to make them global and persistent? That would be very helpful.

If not, I will drive them into the individual gauges.

Thank you again for the example. With an example, I understand. With understanding, I can apply!

14

Overrides are not permanent. There's ui_control node to fire the inject for you when dashboard connects so your config is always sent to node when you are seeing the dashboard.
It is reasonable to use only one ui_control node and connect it to all nodes for configuration changing paths.

image
image737×275 28.8 KB

15

Okay, thank you for the information.

So, based on this, the functions in the dashboard configuration (Angular Them in ui_template), then configuring the template don't work for this application?

16

That configuration affects ui_template nodes. Not gauges nor nothing in server side.

17

There are some overall settings in the main sidebar for configuring the overall look and feel, and spacing, menu visibility, etc. Then each widget has some of it's own configuration, mostly parameters, ranges, etc - and then finally there is the control message that lets you get under the covers of some widgets to alter extra things. There are often too many possible parameters to try and expose them all in a "simple" config page for each widget.

18

Thank you, all!

You helped me with this configuration issue and it is greatly appreciated!