Send a click to a button on a dashboard in node red function

General
1

Hello everyone! The code below is from a dashboard button. How can I send this button an on-click using http-request? (Either function or other) In id="microphone_control_3910" "3910" always changes to node red Deploy

<button class="nr-ui-microphone-button md-button md-ink-ripple" type="button" ng-transclude="" aria-label="capture audio" id="microphone_control_3910" style="height:100% !important;" ng-disabled="!enabled" ng-click="toggleMicrophone()"><i class="fa fa-microphone fa-2x"></i><div class="md-ripple-container" style=""></div></button>

Or ui_microphone.js:

 html += String.raw`<md-button aria-label="capture audio" id="microphone_control_{{$id}}" class="nr-ui-microphone-button" style="height:100% !important;" ng-disabled="!enabled" ng-mousedown="toggleMicrophone(true)" ng-mouseup="toggleMicrophone()"><i class="fa fa-microphone"></i></md-button>`;
2

Hello @azxo1

I think that you have a button on a dashboard.
Is the dashboard the "official" node-red-dashboard?
Is the button a ui-button node?

"How can I send this button an on-click ...?
There is a tickbox in the button config - If msg arrives on input, emulate a button click.
If you tick this box, a message arriving at the input will be as if the button was clicked. That message can come from an Inject node, an MQTT message, a sensor reading or whatever.

"...using http-request?"
What do you mean?

"(Either function or other) In id="microphone_control_3910" "3910" always changes to node red Deploy"
Sorry but this makes no sense to me.

I fail to see the relevance of your snippets of HTML and Javascript. I think you should be trying to solve the problem in Node-red editor, not by focussing on minutiae of the dashboard HTML

3

ui_microphone node. There is a button on the dashboard. I want to simulate it in the flow in some way as if I clicked on it. Sorry for my poor English.

id="microphone_control_{{$id}}"     //Here the "id" changes after every Deploy

I'm trying this but it doesn't work:

[{"id":"161da2822f34d844","type":"inject","z":"b0bfefcd25edc510","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"toggleMicrophone(true)","payloadType":"str","x":200,"y":1260,"wires":[["ba74117a2a609ca9"]]},{"id":"ba74117a2a609ca9","type":"http request","z":"b0bfefcd25edc510","name":"","method":"GET","ret":"txt","paytoqs":"body","url":"http://192.168.5.151:1880/ui/#!/1","tls":"","persist":false,"proxy":"","insecureHTTPParser":false,"authType":"","senderr":false,"headers":[],"credentials":{},"x":490,"y":1260,"wires":[["8349576698dbb524","c873c5d3dfa8fd97","9444ef06cc7d11c4","5794aa224ebd4a95","bebe8a1e734e773f"]]},{"id":"bebe8a1e734e773f","type":"html","z":"b0bfefcd25edc510","name":"","property":"payload","outproperty":"payload","tag":".nr-ui-microphone-button","ret":"text","as":"single","x":770,"y":1320,"wires":[[]]}]

The first code in the question is the button inspect code in chrome. The second code is an excerpt of the ui_microphone javascript code.

4

If you use the scope.$watch() function of the ui-template node you can simulate a press by sending the ui-template a msg.
simple example

[{"id":"161da2822f34d844","type":"inject","z":"b9860b4b9de8c8da","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":430,"y":4740,"wires":[["b3c736598f469d13"]]},{"id":"b3c736598f469d13","type":"ui_template","z":"b9860b4b9de8c8da","group":"2d4fe667.28f8ba","name":"","order":24,"width":0,"height":0,"format":"<button \n    class=\"nr-ui-microphone-button md-button md-ink-ripple\" \n    type=\"button\" \n    aria-label=\"capture audio\" \n    id=\"microphone_control_3910\" \n    style=\"height:100% !important;\" \n    ng-click=\"send({payload:true})\">\n    <i class=\"fa fa-microphone fa-2x\"></i>\n    <div class=\"md-ripple-container\" \n    style=\"\"></div></button> \n</button>\n<script>\n    (function(scope) {\n  scope.$watch('msg', function(msg) {\n    if (msg.payload === true) {\n    scope.send({payload: true})\n    }\n  });\n})(scope);\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":600,"y":4740,"wires":[["1ebd5abff29bb166"]]},{"id":"1ebd5abff29bb166","type":"debug","z":"b9860b4b9de8c8da","name":"debug 316","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":770,"y":4740,"wires":[]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":2,"disp":true,"width":"12","collapse":false,"className":""},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
5 
id="microphone_control_{{$id}}"     //Here the "id" changes after every Deploy
6

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