How to check for gauge clicks

[HuOliveiraWork]

Hello ereryone!

I have a project with a list of gauges and I need to detect the individual click of each of them. I don't know the best way to do this, nor do I know if there is a library that will help me with this situation.

This is my individual gauge configuration:

Can anyone help me?

Thanks in advance!

[hotNipi]

As you see, the gauge node has no output. So there is no way to get any kind of feedback when you do click on the gauge.

[HuOliveiraWork]

Thanks for the reply!

Does that mean there is no way to do click management in javascript being like that?

So my only solution in this case is to add a button to each of my gauges?

[hotNipi]

There is of course way to add click handler to any element on your dashboard but it really depends on too many things so I can't give fully working solution or any better advise.

But if you can figure out the technique from this example - you may be get closer to your goal.

[{"id":"60121bbf4de72aee","type":"ui_gauge","z":"9141c3fbcc7d9e2b","name":"","group":"f6124e036e2d2ffb","order":14,"width":"2","height":"2","gtype":"gage","title":"gauge 1","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","className":"gauge-clickable","x":380,"y":1400,"wires":[]},{"id":"dfbf8667ded5e478","type":"ui_gauge","z":"9141c3fbcc7d9e2b","name":"","group":"f6124e036e2d2ffb","order":14,"width":"2","height":"2","gtype":"gage","title":"gauge 2","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","className":"gauge-clickable","x":380,"y":1440,"wires":[]},{"id":"fd313c3c6dde471f","type":"ui_template","z":"9141c3fbcc7d9e2b","group":"f6124e036e2d2ffb","name":"gauge's clickhandler","order":16,"width":0,"height":0,"format":"<script>\n    (function(scope) {\n      setTimeout(init,500)\n      function init(){\n        let gauges = document.querySelectorAll(\".gauge-clickable\")       \n        Array.from(gauges, (gauge) => {         \n            gauge.addEventListener(\"click\", function(e) {          \n              scope.send({payload:$(gauge).children('p').first().text()})\n            })\n         })\n      }\n  \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":420,"y":1540,"wires":[["a99fe1fa59345834"]]},{"id":"a99fe1fa59345834","type":"debug","z":"9141c3fbcc7d9e2b","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":630,"y":1540,"wires":[]},{"id":"ef025df640d76f1d","type":"ui_gauge","z":"9141c3fbcc7d9e2b","name":"","group":"f6124e036e2d2ffb","order":14,"width":"2","height":"2","gtype":"gage","title":"gauge 5","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","className":"gauge-clickable","x":380,"y":1480,"wires":[]},{"id":"f6124e036e2d2ffb","type":"ui_group","name":"Default","tab":"34ab7d39f3e308fc","order":1,"disp":true,"width":"5","collapse":false,"className":""},{"id":"34ab7d39f3e308fc","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

[HuOliveiraWork]

Ohh nice example. I think I can handle it from here now.

Thanks for the help!