Toggle CSS with Boolean values from Inject

Dashboard
1

Hello, I am testing out a way on trying toggle the visibility of a gauge by using a boolean inject.

I know how to set the display of different classes to none and it works, but I cannot figure out how I would be able to toggle it.

My thought process was to inject a true value that would enable the css and false to disable. But it's not as simple as that.

Here is my flow:

[{"id":"9d192016.b578b","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"66329fd.c63a66","type":"ui_gauge","z":"9d192016.b578b","name":"","group":"db7e5206.b1ddd","order":0,"width":0,"height":0,"gtype":"gage","title":"Test","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","className":"","x":350,"y":160,"wires":[]},{"id":"2f6b7fec.8cfa2","type":"ui_template","z":"9d192016.b578b","group":"db7e5206.b1ddd","name":"Toggle Visibility","order":1,"width":0,"height":0,"format":"<style>\n    .nr-dashboard-cardcontainer{\n        display: none;\n    }\n        \n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":370,"y":240,"wires":[[]]},{"id":"9719bad7.c3e7b8","type":"inject","z":"9d192016.b578b","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":150,"y":220,"wires":[["2f6b7fec.8cfa2"]]},{"id":"135a84b0.24f51b","type":"inject","z":"9d192016.b578b","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":150,"y":260,"wires":[["2f6b7fec.8cfa2"]]},{"id":"db7e5206.b1ddd","type":"ui_group","name":"Test","tab":"4fc05e71.5ca16","order":2,"disp":false,"width":"6","collapse":false,"className":""},{"id":"4fc05e71.5ca16","type":"ui_tab","name":"Test","icon":"dashboard","disabled":false,"hidden":false}]

Any ideas?

2

I'm not an expert, but.....

The node which you are using to disable the display accepts both the true and false messages.

Depending on how you want to do it, you send one of the messages to that node and send the other message to a similar node which enables the displaying.

But I don't know how to do that.

Hope that helps.

3

I appreciate the help!

I figured out a much easier way to display this in fact. This below post made use of passing a JSON object to UI control and its much easier than what I initially wanted to do.

1 Like
4

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