Sneaky trick with Dashboard 2 CLASSIC Gauge node for needles

Dashboard
1

(Ok, I'm pedantic and petty)

I've just started using the new DB-2 and CLASSIC gauge node.
Mostly because rather than having 5 x gauges, the new (Classic) gauge node supports multiple indicators/needles.

A problem (for me) is that there is always this rogue needle visible as per:

Screenshot from 2024-08-25 20-48-34

As I was told it is the 5'th needle's colour this great idea happened.

If you have 5 sets of data to be displayed, make the gauge (CLASSIC) have one more and make it's colour white (or what ever the background colour is.

Then it kind of is hidden.

As per:

Screenshot from 2024-08-26 06-54-15

NOT perfect, but it addresses the Problem I had.

Why?

Well, ok there is/are 5 sets of data to be displayed.
But these are not CONSTANT values.

If that thing is not sending data, the needle can be dismissed.

And so this is my work around to the problem.

Hope someone finds it handy/helpful.

2

Sneaky, but I like it :slight_smile:

I have added an issue to added unique class names to the needles so they can be hidden or the colour changed dynamically.

3

Sorry, I didn't mean to ........ what ever.
Just - as explained - it kind of is a problem for how I am using that gauge.

The idea to change colours of the needles would be a good idea.

4

I have just released version 1.3.0 of the classic gauge. This includes support for dynamically adding classes using msg.class or msg.ui_update.class. Also I have added classes to each needle so that it is possible to individually address individual needles in CSS. This means that needles can now be hidden, or their colour can be changed etc.

How to do hide needles is describes in the node's readme and the Multi-needle example provided with the node has been extended to show how to do it.

1 Like
5

Not yet.

It is 00:22 here and the puta is only only because I am doing a job that needs doing.

I'm actually in bed and just got up to look at how things are going

6

Um... good.

But as the node was updated, why isn't it included locally in the node's readme part of node-red?

Just wondering.

7

I'm not understanding how to use what is written in the docs to hide a needle.

Could you indulge me some help with how to do it?

8

Does the example work for you? It is referenced in the linked readme.

If it does, but your flow does not then post a simple flow that does not work. Just an Inject node sending in the hide message, the CSS template and the gauge node please.

9

Oh.

I installed it and had to so a restart.

Then looked at/in the import/examples but didn't see a new one showing how to hide the needles.

Ok, maybe I'm not looking hard enough.

I also accidentally used the wrong template node.
Realised that when I didn't see the correct dashboard names listed.

I gave the CSS group a name and also put that in the gauge node.
But.....

Anyway....

Ok, I stand slightly corrected:

Now looking at the node's documentation it has changed.
But still it is only words with no context for me.

10

From my previous post

As I said, the multi needle example has been extended to show it.

11

Yeah, sorry, as I just edited my previous post: something must have not worked with the install/update and only a cold boot got things all on the same page.

I'll look at the mult-needle example again.

12

Ok, all good now.

Thanks.

13

AARRGGHH!!

This code:

[{"id":"cf5a29ee76a46ba9","type":"debug","z":"d6026c14350dea74","name":"A4","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":640,"y":530,"wires":[]},{"id":"3aa12236c755b6f8","type":"function","z":"d6026c14350dea74","name":"Move to payload","func":"let msg1 = {};\nlet power = msg.payload.ENERGY.Today;\nmsg1.payload = power;\nmsg1.topic = \"A4\";\nreturn msg1;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":670,"y":500,"wires":[["c5af06e77fe26629","72c98d3060450d48"]]},{"id":"4d4a4c32f711a182","type":"ui-gauge","z":"d6026c14350dea74","d":true,"name":"Gauge","group":"9d0aa235d37c5289","order":1,"width":3,"height":"2","gtype":"gauge-battery","gstyle":"needle","title":"gauge","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#ea5353"},{"from":"40","color":"#ffc800"},{"from":"70","color":"#5cd65c"}],"min":0,"max":"100","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":1180,"y":290,"wires":[]},{"id":"aa774e2285d75616","type":"ui-gauge-classic","z":"d6026c14350dea74","d":true,"name":"Classic","group":"9d0aa235d37c5289","order":2,"width":"3","height":"3","min":0,"max":"0.1","sectors":[],"major_division":"0.01","minor_division":"0.001","value_decimal_places":"3","scale_decimal_places":"2","label":"Recharging","measurement":"milliWatts","units":"milliWatts","needles":[{"topic":"A1","color":"green","lengthPercent":"100"},{"topic":"A2","color":"yellow","lengthPercent":"100"},{"topic":"A3","color":"orange","lengthPercent":"100"},{"topic":"A4","color":"black","lengthPercent":"100"},{"topic":"A5","color":"brown","lengthPercent":"100"}],"sweep_angle":"180","myclass":"","x":1190,"y":330,"wires":[]},{"id":"3958009ac6c49b50","type":"debug","z":"d6026c14350dea74","name":"A5","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":640,"y":600,"wires":[]},{"id":"3a2a6894c704884d","type":"function","z":"d6026c14350dea74","name":"Move to payload","func":"let msg1 = {};\nlet power = msg.payload.ENERGY.Today;\nmsg1.payload = power;\nmsg1.topic = \"A5\";\nreturn msg1;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":670,"y":570,"wires":[["027db0045e511521"]]},{"id":"dc08c5f98fa021e6","type":"debug","z":"d6026c14350dea74","name":"A3","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":640,"y":460,"wires":[]},{"id":"45fa51a010276816","type":"function","z":"d6026c14350dea74","name":"Move to payload","func":"let msg1 = {};\nlet power = msg.payload.ENERGY.Today;\nmsg1.payload = power;\nmsg1.topic = \"A3\";\nreturn msg1;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":670,"y":430,"wires":[["17be4774931ab231"]]},{"id":"aeff4bdae00c4e3f","type":"debug","z":"d6026c14350dea74","name":"A1","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":640,"y":320,"wires":[]},{"id":"5392bba75ecdbeb4","type":"function","z":"d6026c14350dea74","name":"Move to payload","func":"let msg1 = {};\nlet power = msg.payload.ENERGY.Today;\nmsg1.payload = power;\nmsg1.topic = \"A1\";\nreturn msg1;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":670,"y":290,"wires":[["a733610f066c935d"]]},{"id":"951b4184cbf8de11","type":"debug","z":"d6026c14350dea74","name":"A2","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":640,"y":390,"wires":[]},{"id":"fa4127f220e09bea","type":"function","z":"d6026c14350dea74","name":"Move to payload","func":"let msg1 = {};\nlet power = msg.payload.ENERGY.Today;\nmsg1.payload = power;\nmsg1.topic = \"A2\";\nreturn msg1;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":670,"y":360,"wires":[["2662e1f0c33e58fb"]]},{"id":"0f47080ef1c017d5","type":"debug","z":"d6026c14350dea74","name":"To gauge","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":1190,"y":240,"wires":[]},{"id":"a733610f066c935d","type":"change","z":"d6026c14350dea74","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"A1","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":785,"y":290,"wires":[["8fb20ae72d0d7e0f"]],"l":false},{"id":"2662e1f0c33e58fb","type":"change","z":"d6026c14350dea74","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"A2","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":785,"y":360,"wires":[["8fb20ae72d0d7e0f"]],"l":false},{"id":"17be4774931ab231","type":"change","z":"d6026c14350dea74","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"A3","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":785,"y":430,"wires":[["8fb20ae72d0d7e0f"]],"l":false},{"id":"c5af06e77fe26629","type":"change","z":"d6026c14350dea74","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"A4","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":785,"y":500,"wires":[["8fb20ae72d0d7e0f"]],"l":false},{"id":"027db0045e511521","type":"change","z":"d6026c14350dea74","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"A5","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":785,"y":570,"wires":[["8fb20ae72d0d7e0f"]],"l":false},{"id":"ac0d932f0e48cf6c","type":"inject","z":"d6026c14350dea74","name":"Wipe?","props":[{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"blah","x":640,"y":230,"wires":[["e7c7d1014c09ce36"]]},{"id":"2f8943b8d097e51b","type":"ui-gauge-classic","z":"d6026c14350dea74","name":"Classic","group":"9d0aa235d37c5289","order":3,"width":"3","height":"3","min":0,"max":"100","sectors":[],"major_division":"10","minor_division":"1","value_decimal_places":"1","scale_decimal_places":"0","label":"Device Recharging","measurement":"","units":"","needles":[{"topic":"A1","color":"green","lengthPercent":"100"},{"topic":"A2","color":"yellow","lengthPercent":"100"},{"topic":"A3","color":"orange","lengthPercent":"100"},{"topic":"A4","color":"black","lengthPercent":"100"},{"topic":"A5","color":"brown","lengthPercent":"100"},{"topic":"X","color":"white","lengthPercent":"100"}],"sweep_angle":"180","myclass":"powergauge","x":1190,"y":380,"wires":[]},{"id":"19d7b31b68fbfc9c","type":"function","z":"d6026c14350dea74","name":"Upscale","func":"let x = msg.payload;\nmsg.payload = x * 1000;\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1085,"y":380,"wires":[["2f8943b8d097e51b","ba6347f91569402b"]],"l":false},{"id":"ba6347f91569402b","type":"debug","z":"d6026c14350dea74","name":"Displayed power","active":true,"tosidebar":false,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":1220,"y":430,"wires":[]},{"id":"f9c249d1cc7690bd","type":"trigger","z":"d6026c14350dea74","name":"Indicator","op1":"1","op2":"0","op1type":"str","op2type":"str","duration":"10","extend":false,"overrideDelay":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":990,"y":240,"wires":[[]]},{"id":"a5d9130bc3160a1e","type":"ui-template","z":"d6026c14350dea74","group":"","page":"","ui":"81d0a76c830e3379","name":"CSS to allow hiding of needles on any page","order":0,"width":0,"height":0,"head":"","format":"/** this allows hiding of individual needles by sending needle identifier in msg.class to a gauge, for example\n * msg.class = \"hide_needle-1\"                // hide needle 1 and show others\n * msg.class = \"hide-needle-2 hide-needle-3\"  // hide needles 2 and 3 and show others\n * msg.class = \"\"                             // shows all needles\n*/\n.hide-needle-1 .o-needle-1,\n.hide-needle-2 .o-needle-2,\n.hide-needle-3 .o-needle-3 {\n    visibility: hidden;\n}","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"site:style","className":"","x":1010,"y":120,"wires":[[]]},{"id":"e9b7526258bd4b35","type":"inject","z":"d6026c14350dea74","name":"Hide needle 1","props":[{"p":"class","v":"hide-needle-1","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":660,"y":50,"wires":[["122137e11bd88ff2"]]},{"id":"7bc1b50a14f583a9","type":"inject","z":"d6026c14350dea74","name":"Hide needle 2","props":[{"p":"class","v":"hide-needle-2","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":660,"y":90,"wires":[["122137e11bd88ff2"]]},{"id":"6827487794a4182d","type":"inject","z":"d6026c14350dea74","name":"Hide needle 3","props":[{"p":"class","v":"hide-needle-3","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":660,"y":130,"wires":[["122137e11bd88ff2"]]},{"id":"3e6aee1c7c8590ce","type":"inject","z":"d6026c14350dea74","name":"Hide needle 4","props":[{"p":"class","v":"hide-needle-4","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":660,"y":170,"wires":[["122137e11bd88ff2"]]},{"id":"8fb20ae72d0d7e0f","type":"junction","z":"d6026c14350dea74","x":940,"y":290,"wires":[["6926509cac9da0bb","f9c249d1cc7690bd"]]},{"id":"6926509cac9da0bb","type":"junction","z":"d6026c14350dea74","x":1000,"y":290,"wires":[["aa774e2285d75616","4d4a4c32f711a182","0f47080ef1c017d5","19d7b31b68fbfc9c"]]},{"id":"e7c7d1014c09ce36","type":"junction","z":"d6026c14350dea74","x":780,"y":230,"wires":[["2662e1f0c33e58fb","c5af06e77fe26629","027db0045e511521","a733610f066c935d","17be4774931ab231"]]},{"id":"122137e11bd88ff2","type":"junction","z":"d6026c14350dea74","x":810,"y":170,"wires":[["2f8943b8d097e51b"]]},{"id":"9d0aa235d37c5289","type":"ui-group","name":"My Group","page":"0aef6b45c70fc7e6","width":"3","height":"1","order":1,"showTitle":false,"className":"","visible":"true","disabled":"false"},{"id":"81d0a76c830e3379","type":"ui-base","name":"My Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"0aef6b45c70fc7e6","type":"ui-page","name":"Power Gauges","ui":"81d0a76c830e3379","path":"/page1","icon":"home","layout":"grid","theme":"b608c93778d60f83","order":2,"className":"","visible":"true","disabled":"false"},{"id":"b608c93778d60f83","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

Sorry I left of the inject nodes to send example data.

I send data on A1 and A2.

I get this on the screen/dashboard

Screenshot from 2024-09-02 18-28-24
Screenshot from 2024-09-02 18-28-241920Ă—1080 352 KB

Screenshot from 2024-09-02 18-29-51
Screenshot from 2024-09-02 18-29-511920Ă—1080 327 KB

Screenshot from 2024-09-02 18-29-18
Screenshot from 2024-09-02 18-29-181920Ă—1080 120 KB

Now, as you can see there is ONE needle visible.
(Yellow) which is A2. Ok. But what happened to A1?
If I turn off A2 I see this

Screenshot from 2024-09-02 18-35-34
Screenshot from 2024-09-02 18-35-341920Ă—1080 116 KB

Sorry....

This didn't happen before.

OOPS

Ok, so if they are turned off, before they can be used again they have to be turned on - yes?

That's going to make it even more fun. But not impossible.

SORRY!

But could you please confirm this?
And how do I turn on singular needles?
(I'm trying but so far I'm confused)

Ok, things are not working like that either!

Yeah, ok, I stuffed up.
Didn't RTFM - as it were.

But wiping the needles is STILL problematic.

Restating the problem seen:

(with given code)

Inject values with topic A1 and A2. (Different values so you see both needles.)

Turn off one of them and the other (maybe) moves to the other's value.
Turn off the second one and the first one comes back on.
INDIVIDUALLY turning off the needles doesn't seem to work.

14

(All cards on the table)

This is the ENTIRE code - sorry.
Nothing too serious for importing.
Excuse the foreign node. Not important.
And the MQTT nodes....

[{"id":"af11fc823595f51f","type":"mqtt in","z":"d6026c14350dea74","name":"","topic":"A4/tele/SENSOR","qos":"2","datatype":"auto-detect","broker":"4178d9f.f883728","nl":false,"rap":true,"rh":0,"inputs":0,"x":370,"y":500,"wires":[["cf5a29ee76a46ba9","3aa12236c755b6f8"]]},{"id":"cf5a29ee76a46ba9","type":"debug","z":"d6026c14350dea74","name":"A4","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":640,"y":530,"wires":[]},{"id":"3aa12236c755b6f8","type":"function","z":"d6026c14350dea74","name":"Move to payload","func":"let msg1 = {};\nlet power = msg.payload.ENERGY.Today;\nmsg1.payload = power;\nmsg1.topic = \"A4\";\nreturn msg1;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":670,"y":500,"wires":[["c5af06e77fe26629","72c98d3060450d48"]]},{"id":"4d4a4c32f711a182","type":"ui-gauge","z":"d6026c14350dea74","d":true,"name":"Gauge","group":"9d0aa235d37c5289","order":1,"width":3,"height":"2","gtype":"gauge-battery","gstyle":"needle","title":"gauge","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#ea5353"},{"from":"40","color":"#ffc800"},{"from":"70","color":"#5cd65c"}],"min":0,"max":"100","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":1180,"y":290,"wires":[]},{"id":"aa774e2285d75616","type":"ui-gauge-classic","z":"d6026c14350dea74","d":true,"name":"Classic","group":"9d0aa235d37c5289","order":2,"width":"3","height":"3","min":0,"max":"0.1","sectors":[],"major_division":"0.01","minor_division":"0.001","value_decimal_places":"3","scale_decimal_places":"2","label":"Recharging","measurement":"milliWatts","units":"milliWatts","needles":[{"topic":"A1","color":"green","lengthPercent":"100"},{"topic":"A2","color":"yellow","lengthPercent":"100"},{"topic":"A3","color":"orange","lengthPercent":"100"},{"topic":"A4","color":"black","lengthPercent":"100"},{"topic":"A5","color":"brown","lengthPercent":"100"}],"sweep_angle":"180","myclass":"","x":1190,"y":330,"wires":[]},{"id":"9ee45062ba3c8cb5","type":"mqtt in","z":"d6026c14350dea74","name":"","topic":"A5/tele/SENSOR","qos":"2","datatype":"auto-detect","broker":"4178d9f.f883728","nl":false,"rap":true,"rh":0,"inputs":0,"x":450,"y":570,"wires":[["3958009ac6c49b50","3a2a6894c704884d"]]},{"id":"3958009ac6c49b50","type":"debug","z":"d6026c14350dea74","name":"A5","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":640,"y":600,"wires":[]},{"id":"3a2a6894c704884d","type":"function","z":"d6026c14350dea74","name":"Move to payload","func":"let msg1 = {};\nlet power = msg.payload.ENERGY.Today;\nmsg1.payload = power;\nmsg1.topic = \"A5\";\nreturn msg1;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":670,"y":570,"wires":[["027db0045e511521"]]},{"id":"3a67f99798cf8111","type":"mqtt in","z":"d6026c14350dea74","name":"","topic":"A3/tele/SENSOR","qos":"2","datatype":"auto-detect","broker":"4178d9f.f883728","nl":false,"rap":true,"rh":0,"inputs":0,"x":450,"y":430,"wires":[["dc08c5f98fa021e6","45fa51a010276816"]]},{"id":"dc08c5f98fa021e6","type":"debug","z":"d6026c14350dea74","name":"A3","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":640,"y":460,"wires":[]},{"id":"45fa51a010276816","type":"function","z":"d6026c14350dea74","name":"Move to payload","func":"let msg1 = {};\nlet power = msg.payload.ENERGY.Today;\nmsg1.payload = power;\nmsg1.topic = \"A3\";\nreturn msg1;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":670,"y":430,"wires":[["17be4774931ab231"]]},{"id":"3e1fcc438fed5ff8","type":"mqtt in","z":"d6026c14350dea74","name":"","topic":"A1/tele/SENSOR","qos":"2","datatype":"auto-detect","broker":"4178d9f.f883728","nl":false,"rap":true,"rh":0,"inputs":0,"x":450,"y":290,"wires":[["aeff4bdae00c4e3f","5392bba75ecdbeb4"]]},{"id":"aeff4bdae00c4e3f","type":"debug","z":"d6026c14350dea74","name":"A1","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":640,"y":320,"wires":[]},{"id":"5392bba75ecdbeb4","type":"function","z":"d6026c14350dea74","name":"Move to payload","func":"let msg1 = {};\nlet power = msg.payload.ENERGY.Today;\nmsg1.payload = power;\nmsg1.topic = \"A1\";\nreturn msg1;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":670,"y":290,"wires":[["a733610f066c935d"]]},{"id":"efa4923d349d3299","type":"mqtt in","z":"d6026c14350dea74","name":"","topic":"A2/tele/SENSOR","qos":"2","datatype":"auto-detect","broker":"4178d9f.f883728","nl":false,"rap":true,"rh":0,"inputs":0,"x":450,"y":360,"wires":[["951b4184cbf8de11","fa4127f220e09bea"]]},{"id":"951b4184cbf8de11","type":"debug","z":"d6026c14350dea74","name":"A2","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":640,"y":390,"wires":[]},{"id":"fa4127f220e09bea","type":"function","z":"d6026c14350dea74","name":"Move to payload","func":"let msg1 = {};\nlet power = msg.payload.ENERGY.Today;\nmsg1.payload = power;\nmsg1.topic = \"A2\";\nreturn msg1;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":670,"y":360,"wires":[["2662e1f0c33e58fb"]]},{"id":"0f47080ef1c017d5","type":"debug","z":"d6026c14350dea74","name":"To gauge","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":1190,"y":240,"wires":[]},{"id":"72c98d3060450d48","type":"q-gate","z":"d6026c14350dea74","name":"A4","controlTopic":"control","defaultState":"queueing","openCmd":"open","closeCmd":"close","toggleCmd":"toggle","queueCmd":"queue","defaultCmd":"default","triggerCmd":"trigger","flushCmd":"flush","resetCmd":"reset","peekCmd":"peek","dropCmd":"drop","statusCmd":"status","maxQueueLength":"1","keepNewest":true,"qToggle":false,"persist":false,"storeName":"memory","x":770,"y":650,"wires":[["c5af06e77fe26629"]]},{"id":"c4e2f1c945cf0860","type":"inject","z":"d6026c14350dea74","name":"Resend","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"control","payload":"peek","payloadType":"str","x":770,"y":700,"wires":[["72c98d3060450d48"]]},{"id":"afd12ab3197588de","type":"inject","z":"d6026c14350dea74","name":"A1","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"A1","payload":"0.003","payloadType":"num","x":1180,"y":690,"wires":[["ab8047171f62a989"]]},{"id":"a733610f066c935d","type":"change","z":"d6026c14350dea74","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"A1","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":785,"y":290,"wires":[["8fb20ae72d0d7e0f"]],"l":false},{"id":"2662e1f0c33e58fb","type":"change","z":"d6026c14350dea74","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"A2","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":785,"y":360,"wires":[["8fb20ae72d0d7e0f"]],"l":false},{"id":"17be4774931ab231","type":"change","z":"d6026c14350dea74","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"A3","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":785,"y":430,"wires":[["8fb20ae72d0d7e0f"]],"l":false},{"id":"c5af06e77fe26629","type":"change","z":"d6026c14350dea74","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"A4","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":785,"y":500,"wires":[["8fb20ae72d0d7e0f"]],"l":false},{"id":"027db0045e511521","type":"change","z":"d6026c14350dea74","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"A5","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":785,"y":570,"wires":[["8fb20ae72d0d7e0f"]],"l":false},{"id":"ac0d932f0e48cf6c","type":"inject","z":"d6026c14350dea74","name":"Wipe?","props":[{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"blah","x":640,"y":250,"wires":[["e7c7d1014c09ce36"]]},{"id":"2f8943b8d097e51b","type":"ui-gauge-classic","z":"d6026c14350dea74","name":"Classic","group":"9d0aa235d37c5289","order":3,"width":"3","height":"3","min":0,"max":"100","sectors":[],"major_division":"10","minor_division":"1","value_decimal_places":"1","scale_decimal_places":"0","label":"Device Recharging","measurement":"","units":"","needles":[{"topic":"A1","color":"green","lengthPercent":"100"},{"topic":"A2","color":"yellow","lengthPercent":"100"},{"topic":"A3","color":"orange","lengthPercent":"100"},{"topic":"A4","color":"black","lengthPercent":"100"},{"topic":"A5","color":"brown","lengthPercent":"100"},{"topic":"X","color":"white","lengthPercent":"100"}],"sweep_angle":"180","myclass":"powergauge","x":1190,"y":380,"wires":[]},{"id":"19d7b31b68fbfc9c","type":"function","z":"d6026c14350dea74","name":"Upscale","func":"let x = msg.payload;\nmsg.payload = x * 1000;\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1085,"y":380,"wires":[["2f8943b8d097e51b","ba6347f91569402b"]],"l":false},{"id":"ba6347f91569402b","type":"debug","z":"d6026c14350dea74","name":"Displayed power","active":true,"tosidebar":false,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":1220,"y":430,"wires":[]},{"id":"f9c249d1cc7690bd","type":"trigger","z":"d6026c14350dea74","name":"Indicator","op1":"1","op2":"0","op1type":"str","op2type":"str","duration":"10","extend":false,"overrideDelay":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":990,"y":240,"wires":[[]]},{"id":"859607f1d4932f09","type":"inject","z":"d6026c14350dea74","name":"A1","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"A1","payload":"0.006","payloadType":"num","x":1180,"y":740,"wires":[["ab8047171f62a989"]]},{"id":"314c570d1b610a5f","type":"inject","z":"d6026c14350dea74","name":"A1","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"A1","payload":"0.009","payloadType":"num","x":1180,"y":790,"wires":[["ab8047171f62a989"]]},{"id":"c41f6ab322e838a4","type":"inject","z":"d6026c14350dea74","name":"A1","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"A1","payload":"0.015","payloadType":"num","x":1180,"y":840,"wires":[["ab8047171f62a989"]]},{"id":"ded114ac03f09c0b","type":"inject","z":"d6026c14350dea74","name":"A1","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"A1","payload":"-1","payloadType":"num","x":1180,"y":650,"wires":[["ab8047171f62a989"]]},{"id":"92d8919dcd97c509","type":"inject","z":"d6026c14350dea74","name":"A2","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"A2","payload":"0.003","payloadType":"num","x":1360,"y":690,"wires":[["e86649a746d53424"]]},{"id":"b5645fbff7146d7f","type":"inject","z":"d6026c14350dea74","name":"A2","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"A2","payload":"0.006","payloadType":"num","x":1360,"y":740,"wires":[["e86649a746d53424"]]},{"id":"3e5f6fcc89d80e9d","type":"inject","z":"d6026c14350dea74","name":"A2","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"A2","payload":"0.009","payloadType":"num","x":1360,"y":790,"wires":[["e86649a746d53424"]]},{"id":"6433dda2b21106d7","type":"inject","z":"d6026c14350dea74","name":"A2","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"A2","payload":"0.015","payloadType":"num","x":1360,"y":840,"wires":[["e86649a746d53424"]]},{"id":"cb0e6e394bd06cdf","type":"inject","z":"d6026c14350dea74","name":"A2","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"A2","payload":"-1","payloadType":"num","x":1360,"y":650,"wires":[["e86649a746d53424"]]},{"id":"a5d9130bc3160a1e","type":"ui-template","z":"d6026c14350dea74","group":"","page":"","ui":"81d0a76c830e3379","name":"CSS to allow hiding of needles on any page","order":0,"width":0,"height":0,"head":"","format":"/** this allows hiding of individual needles by sending needle identifier in msg.class to a gauge, for example\n * msg.class = \"hide_needle-1\"                // hide needle 1 and show others\n * msg.class = \"hide-needle-2 hide-needle-3\"  // hide needles 2 and 3 and show others\n * msg.class = \"\"                             // shows all needles\n*/\n.hide-needle-1 .o-needle-1,\n.hide-needle-2 .o-needle-2,\n.hide-needle-3 .o-needle-3 {\n    visibility: hidden;\n}","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"site:style","className":"","x":1010,"y":120,"wires":[[]]},{"id":"e9b7526258bd4b35","type":"inject","z":"d6026c14350dea74","name":"Hide needle 1","props":[{"p":"class","v":"hide-needle-1","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":660,"y":50,"wires":[["122137e11bd88ff2"]]},{"id":"7bc1b50a14f583a9","type":"inject","z":"d6026c14350dea74","name":"Hide needle 2","props":[{"p":"class","v":"hide-needle-2","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":660,"y":90,"wires":[["122137e11bd88ff2"]]},{"id":"6827487794a4182d","type":"inject","z":"d6026c14350dea74","name":"Hide needle 3","props":[{"p":"class","v":"hide-needle-3","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":660,"y":130,"wires":[["122137e11bd88ff2"]]},{"id":"3e6aee1c7c8590ce","type":"inject","z":"d6026c14350dea74","name":"Hide needle 4","props":[{"p":"class","v":"hide-needle-4","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":660,"y":170,"wires":[["122137e11bd88ff2"]]},{"id":"6593ac4019458110","type":"inject","z":"d6026c14350dea74","name":"Show all needles","props":[{"p":"class","v":"","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":890,"y":50,"wires":[["122137e11bd88ff2"]]},{"id":"11ad21e4229c6977","type":"mqtt in","z":"d6026c14350dea74","name":"","topic":"A4/tele/#","qos":"2","datatype":"auto-detect","broker":"4178d9f.f883728","nl":false,"rap":true,"rh":0,"inputs":0,"x":240,"y":790,"wires":[["d6bd1068eb9e8473"]]},{"id":"d6bd1068eb9e8473","type":"switch","z":"d6026c14350dea74","name":"","property":"topic","propertyType":"msg","rules":[{"t":"cont","v":"SENSOR","vt":"str"},{"t":"cont","v":"LWT","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":380,"y":790,"wires":[["3aa12236c755b6f8"],["adfde90782ffa4ae","7339f82343f6843e"]],"outputLabels":["SENSOR","LWT"]},{"id":"f4646181756f0172","type":"inject","z":"d6026c14350dea74","name":"Hide needle 5","props":[{"p":"class","v":"hide-needle-5","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":660,"y":210,"wires":[["122137e11bd88ff2"]]},{"id":"736158aa37366c9c","type":"change","z":"d6026c14350dea74","name":"Hide 4","rules":[{"t":"delete","p":"payload","pt":"msg"},{"t":"set","p":"class","pt":"msg","to":"hide-needle-4","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":520,"y":900,"wires":[[]]},{"id":"adfde90782ffa4ae","type":"debug","z":"d6026c14350dea74","name":"LWT","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":420,"y":850,"wires":[]},{"id":"7339f82343f6843e","type":"switch","z":"d6026c14350dea74","name":"Off/Online","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"Offline","vt":"str"},{"t":"eq","v":"Online","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":415,"y":910,"wires":[["736158aa37366c9c"],[]],"l":false},{"id":"8b9b72d4e1ad7c07","type":"comment","z":"d6026c14350dea74","name":"New way for needle control","info":"","x":360,"y":740,"wires":[]},{"id":"8fb20ae72d0d7e0f","type":"junction","z":"d6026c14350dea74","x":940,"y":290,"wires":[["6926509cac9da0bb","f9c249d1cc7690bd"]]},{"id":"6926509cac9da0bb","type":"junction","z":"d6026c14350dea74","x":1000,"y":290,"wires":[["aa774e2285d75616","4d4a4c32f711a182","0f47080ef1c017d5","19d7b31b68fbfc9c"]]},{"id":"ab8047171f62a989","type":"junction","z":"d6026c14350dea74","x":1270,"y":720,"wires":[["6926509cac9da0bb"]]},{"id":"e86649a746d53424","type":"junction","z":"d6026c14350dea74","x":1460,"y":690,"wires":[["6926509cac9da0bb"]]},{"id":"e7c7d1014c09ce36","type":"junction","z":"d6026c14350dea74","x":780,"y":250,"wires":[["2662e1f0c33e58fb","c5af06e77fe26629","027db0045e511521","a733610f066c935d","17be4774931ab231"]]},{"id":"122137e11bd88ff2","type":"junction","z":"d6026c14350dea74","x":810,"y":170,"wires":[["2f8943b8d097e51b"]]},{"id":"4178d9f.f883728","type":"mqtt-broker","name":"TimePi","broker":"192.168.17.39","port":"1883","clientid":"","autoConnect":true,"usetls":false,"protocolVersion":"4","keepalive":"20","cleansession":true,"autoUnsubscribe":true,"birthTopic":"","birthQos":"2","birthPayload":"'Nas-T-Nuc online'","birthMsg":{},"closeTopic":"","closePayload":"'Nas-T-Nuc shutting down'","closeMsg":{},"willTopic":"EOM","willQos":"0","willPayload":"'Nas-T-Nuc telemetry failure'","willMsg":{},"userProps":"","sessionExpiry":""},{"id":"9d0aa235d37c5289","type":"ui-group","name":"My Group","page":"0aef6b45c70fc7e6","width":"3","height":"1","order":1,"showTitle":false,"className":"","visible":"true","disabled":"false"},{"id":"81d0a76c830e3379","type":"ui-base","name":"My Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"0aef6b45c70fc7e6","type":"ui-page","name":"Power Gauges","ui":"81d0a76c830e3379","path":"/page1","icon":"home","layout":"grid","theme":"b608c93778d60f83","order":2,"className":"","visible":"true","disabled":"false"},{"id":"b608c93778d60f83","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

What to do to see/get the problem:

Inject the Show all needles button. (Top)
Inject A1 3rd button down.
Inject A2 4th button down.

Check you have 2 needles on the gauge.
Yellow (0.9) and green. (0.6)

Click Hide needle 1
You now have/see the yellow needle. 0.9

Click Hide needle 2
You now have green on 0.6

Yeah, but now both needles should be hidden.

Click Hide needle 1 again.
Now you see the yellow needle pointing at 0.9

I seem to be missing something. Or: I've found a bug.
I'm not looking for points.
But I don't understand what is happening.

You may se I am wanting to change how the messages (MQTT) are parsed.
If it gets a LWT message and it is offline then it turns off the needle.
But I don't know how to turn it on again.
(Other than turning them ALL on. Which is not wanted.)

Update with more information:

I added the inject nodes for needles 3 and 4.
All 4 needles visible. All with different values.
4 will NOT turn off.

If I turn off any of the others that needle turns off.
But when I turn off another one, the new one turns off, but the previous one turns back on.

15

When you say tell it to hide needle 2 that means hide that one and show the others. The example showed how to hide more than one at a time. For example, to hide 1 and 2 and show the rest then you need to send in "hide-needle-1 hide-needle-2". That sets both classes on the gauge, then the individual needles see the one of interest to them.

16

Have you included 4 in the CSS template?

17

Ok, as I read it, I realised I hadn't.

Thoughts on the other problems?

18

Which other problems? If you mean turn just one back on then you will have to remember which are currently on/off and send the appropriate message.

19

Well, I'm confused then how you turn off individual needles if I have 4 needles active (displaying a value) and turn any of them off that needle turns off.

Then when I turn a second one off, the first one comes back on and the second one is off.

I seem to be missing something then how turning a specific needle off.

Does it work that way or if I turn one off then another when I turn the second one off I then have to turn BOTH of them off?

20

Looking on github:

Then sending msg.class or msg.ui_update.class to the node containing values as shown above will selectively hide or show needles. If more than three needles are required then add those needles to the class list in the template.

selectively hide or show needles

Could you elaborate on the SHOW part?