Template Button Msg Payload

Dashboard
1

I have a template button with the following send config. I am seeing the "stringvalue" in the debug output but can't figure out how to reference it when the path is simply "payload". Thanks.

$scope.send({"topic":topic,"payload":"stringvalue"});

2

Do you mean it is in msg.payload?
Show us what you see in the debug window and tell us where you are trying to reference it.

3

If I have this send: $scope.send({"topic":topic,"payload":"manual"}); this is what I get in the debug:

image ... this path is simply "payload".

I need to send it into a function where I need to reference in am "if statement

4

The path shown is the path inside the message, so you should use msg.payload. For example

if (msg.payload === "manual") {
    ....
}
5

Don't forget that often you don't need to use a Function. Perhaps a Switch node will do what you want, for example. It does depend on what you want to do of course.

6

Ok, I got it (not sure where I went wrong before) - thank you. Question why === , not == (which is what I've always been using).

7
8

I am still having a problem. In the UI template I have a bunch of text fields with a submit button + plus a toggle button to cycle between auto/manual. Is the toggle button msg out interfering with with the other data? Can it be called something else to differentiate?


<div flex="" style="margin 3px 0px 0px 7px" layout="row">

<div flex="35" style="padding:0 5px">    
    <div layout="column">
       <div><md-input-container><input aria-label="amt" ng-model="amt"></md-input-container></div> 
     <div layout="row">
        <div><md-checkbox ng-model="aut" aria-label="aut">A</md-checkbox></div> 
        <div><md-checkbox ng-model="sl_trl" aria-label="sl_trl">l*</md-checkbox></div> 
     </div>
    </div> 
    </div>

<div flex="15" style="padding:0 5px">    

      <div style="text-align:center"><md-input-container><input ng-model="sl" aria-label="sl"><span class=mylabel>SL</span></md-input-container></div>

</div>

<div flex="20" style="padding:0 5px">    

       <div style="text-align:center"><md-input-container><input ng-model="tp" aria-label="tp"><span class=mylabel>TP</span></md-input-container></div> 
</div>
<div flex="15" style="padding:0 5px">

       <div style="text-align:center"><md-input-container><input aria-label="tp_trl" ng-model="tp_trl"><span class=mylabel>TR</span></md-input-container></div>        

</div>
<div flex="15" style="padding:0 5px">

       <div style="text-align:center"><md-input-container><input aria-label="tm" ng-model="tm"><span class=mylabel>T</span></md-input-container></div>        

</div>

</div>

<div flex="" layout="row">
  <div flex="64" style = "text-align:center; margin: 0px 5px 0px 15px;"><md-button aria-label="set" class="md-accent md-hue-2 md-raised" ng-click="send({payload:{amt:amt, aut:aut, sl_trl:sl_trl, sl:sl, tp:tp, tp_trl:tp_trl, tm:tml}})">SET</md-button></div>
  <div flex="30" ><md-button id="mute-button" class="md-button remote-button" data-state="on"  ng-click="toggleMute()" ><i class="material-icons md-48">handshake</i></md-button></div>
</div>
<script>

(function($scope) {

    var btnSelector = "#mute-button";//Set the selector to match the button ID above
    var topic = "mode"; //edit me to suit - this is sent to your flow as msg.topic
    var icon1 = "toll";//on icon
    var icon2 = "handshake";//muted icon
    
    //create a function to call in ng-click (see the md-button attributes above)
    scope.toggleMute = function(){
        debugger
        var $btn = $(btnSelector);
        var currentState = $btn.data("state");
        //if currently on, change to off state & send new payload
        if(currentState == "on"){
            mute($btn);
            $scope.send({"topic":topic,"payload":"manual"});
        } else {
            unmute($btn);
            $scope.send({"topic":topic,"payload":"auto"});
        }
    } 
    //watch for node-red msgs
    scope.$watch('msg', function(msg) {
        var $btn = $(btnSelector);
        if (msg) {
            if(msg.payload == "auto"){
                unmute($btn);
            } else if(msg.payload == "manual"){
                mute($btn);
            }
          
        }
    }); 
    //helper function to set the correct icon & update the "data-state" memory
    function mute($btn){
        var $ico = $btn.find("i");
        $btn.data("state","off");//set data-state to off (remember state)
        // $ico.removeClass("fa-volume_mute")
        // $ico.addClass("fa-volume_off")
        $ico.text(icon2);
    }
    //helper function to set the correct icon & update the "data-state" memory
    function unmute($btn){
        var $ico = $btn.find("i");
        $btn.data("state","on");//set data-state to on (remember state)
        // ico.removeClass("fa-volume_off");
        // ico.addClass("fa-volume_mute");
        $ico.text(icon1);
    }

})(scope);
</script>
9

I just realized that the toggle button sends out data from ALL of the input fields. I assumed it was only going to be the auto | manual flag. Does that make sense?

10

Sorry, that sort of code is not something I do often. Hopefully someone else can help.

11

Works for me. Output from toggle button;

{"topic":"mode",
"payload":"auto",
"socketid":"61eEHm5Pgfdc5O2-AAAB",
"_msgid":"4902b5d7fd19069f"}

Set button

{"payload":
   {"amt":"21",
    "aut":true,
    "sl":"0",
    "tp":"0",
    "tp_trl":"0"
   },
"socketid":"61eEHm5Pgfdc5O2-AAAB",
"_msgid":"be898a0e5527a5c9"
}
12

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