The size of the "0, PSIG, 250" text is very small compared to the size of the gauge. Is there a way to increase this? Any help is appreciated!
The way to do this kind of adjustments is shown here Dynamic label in gauge node
The parameters you need to change can be found here https://github.com/toorshia/justgage/blob/master/justgage.js#L42
// configurable parameters
There is a lot you can configure so try and enjoy.
2 Likes
I think I understand the example, but I can't figure our which parameter affects text size.
Looking at that list I would guess labelMinFontSize
How should the switch and gauge node be configured for those parameters? I'm struggling to picture how the flow should look.
Here is the example with comments.
[{"id":"e24c988b.699b78","type":"change","z":"15462191.80250e","name":"","rules":[{"t":"set","p":"ui_control.options.minLabelMinFontSize","pt":"msg","to":"16","tot":"num"},{"t":"set","p":"ui_control.options.maxLabelMinFontSize","pt":"msg","to":"16","tot":"num"},{"t":"set","p":"ui_control.options.labelMinFontSize","pt":"msg","to":"16","tot":"str"},{"t":"delete","p":"payload","pt":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":520,"y":340,"wires":[["8c14a7d9.681bb8"]]},{"id":"8c14a7d9.681bb8","type":"ui_gauge","z":"15462191.80250e","name":"","group":"39b7a5c6.1e9a8a","order":0,"width":0,"height":0,"gtype":"gage","title":"gauge","label":"units","format":"{{value|number:2}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"3","seg2":"7","x":690,"y":400,"wires":[]},{"id":"22d7d976.1fa2c6","type":"inject","z":"15462191.80250e","name":"","topic":"","payload":"","payloadType":"date","repeat":"1","crontab":"","once":false,"onceDelay":0.1,"x":390,"y":400,"wires":[["f0bfbde4.1a8cf"]]},{"id":"f97cda05.dde058","type":"ui_ui_control","z":"15462191.80250e","name":"","x":180,"y":200,"wires":[["95ef6d63.e77fd"]]},{"id":"2d8d8dd6.8c2a82","type":"comment","z":"15462191.80250e","name":"To send options when dashboard connects","info":"","x":270,"y":160,"wires":[]},{"id":"95ef6d63.e77fd","type":"delay","z":"15462191.80250e","name":"","pauseType":"delay","timeout":"40","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":320,"y":260,"wires":[["e24c988b.699b78"]]},{"id":"250f93b0.a9b97c","type":"comment","z":"15462191.80250e","name":"Let gauge to be initialized before change any options","info":"There will be browser errors otherwise ","x":460,"y":220,"wires":[]},{"id":"d94b0f1f.2a6f6","type":"comment","z":"15462191.80250e","name":"Change the options","info":"gauge scales according to predefined card size\ndefined font sizes are not absolute values but minimum values\nFor example if you make your gauge smaller, the changed font sizes may happen to be too large and will overlap.\n\nminLabelMinFontSize - minimum size of min field // number\nmaxLabelMinFontSize - minimum size of max field // number\nlabelMinFontSize - minimum size of units field // numbert\n\ndelete msg.payload cos it does not contain proper value","x":520,"y":300,"wires":[]},{"id":"f0bfbde4.1a8cf","type":"function","z":"15462191.80250e","name":"random","func":"msg.payload = Math.random()*10\nreturn msg;","outputs":1,"noerr":0,"x":530,"y":400,"wires":[["8c14a7d9.681bb8"]]},{"id":"a651e851.2a2a28","type":"comment","z":"15462191.80250e","name":"generate random value","info":"","x":470,"y":440,"wires":[]},{"id":"39b7a5c6.1e9a8a","type":"ui_group","z":"","name":"Default","tab":"ad12ad91.ab672","disp":true,"width":"6","collapse":false},{"id":"ad12ad91.ab672","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
Ah that makes much more sense now. I didn't realize the ui control node was required.
Thanks so much!
1 Like
Hello,
I'm pretty new to Node-RED but I'm trying to do the same thing - change the size of gauge text. I'm not really sure how I can use your solution? Do I add a template node or a control node and paste it into message payload or is it done in another way? Could you please explain how to use the solution you provided.
Thanks a lot in advance!
Did you import the example flow that @hotNipi provided and look at the comments he put in it?
If you don't understand some part of that flow, please describe what part you don't understand.
[UPDATE] you might be interesteed in this: [Announce] node-red-contrib-ui-artless-gauge 0.3.0
I'm having a problem increasing value font size. I used this -
{ "ui_control": { "options": { "pointer": true,"valueMinFontSize": 40 }, "seg1": 15, "seg2": 30, "max": 45 } }
Widget is set to 4x4 so there should be room for it to be bigger ?
All other settings there work except font size, what am I doing wrong please ?
