Momentary button on Dashboard

Dashboard
1

Hello,

I'm trying to create a momentary button on the dashboard.
When I press it, payload should go "true", when I let go, "false"

this doesn't do the trick as it sends both after I release the button:

[{"id":"c07efd27.1cb3f8","type":"debug","z":"6880e39e.295cac","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":530,"y":500,"wires":[]},{"id":"d3589e5b.0c4448","type":"ui_template","z":"6880e39e.295cac","group":"c713dff5.21ab3","name":"Toggle Button","order":1,"width":"3","height":"2","format":"<md-button\n    class=\"vibrate filled bigfont\"\n    ng-style=\"{background: !msg.payload ? 'red' : 'green' }\"\n    ng-mousedown=\"send({payload: true})\"\n    ng-mouseup=\"send({payload: false})\"\n    > \n    Jalousie<br/>Auf\n    </md-button>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":350,"y":500,"wires":[["c07efd27.1cb3f8"]]},{"id":"c713dff5.21ab3","type":"ui_group","z":"","name":"Arbeitszimmer","tab":"a2b4d00e.93a548","order":1,"disp":false,"width":"10","collapse":false},{"id":"a2b4d00e.93a548","type":"ui_tab","z":"","name":"Arbeitszimmer","icon":"book","order":1}]

any ideas?
Thank you!

2

Hi!
I tried your button and it works well for me, it doesn't output both on-release. Not sure why it would behave that way on your setup...

3

you are right, its working on my mac with a mouse/trackpad, but not on my tablets
I need it to work at my tablets, I forgot to mention that ...is there a different way of implementation?

4

Ah yes, for mobile, ng-touch, ng-touchstart and ng-touchend are not implemented, I believe there is no easy way for that unfortunately.

5

Try the following, it should work for both mobile and desktop:

<div class="momentary">
   <md-button> Momentary Button</md-button>
</div>

<script>

(function($scope) {
    
$('.momentary').on('touchstart mousedown', function(e) {
    e.preventDefault(); //prevent default behavior
    $scope.send({"payload": true});
});

$('.momentary').on('touchend mouseup', function(e) {
    e.preventDefault(); //prevent default behavior
    $scope.send({"payload": false});
});
    
})(scope);
</script>
2 Likes
6

i had some issue with multiple buttons in the same dashboard tab, so, i simplified the template

<script>
this.scope.on = {payload: 1};
this.scope.off = {payload: 0};
</script>
<md-button
   ng-touchstart="send(on)"
   ng-mousedown="send(on)"
   ng-touchend="send(off)"
   ng-mouseup="send(off)">
       Agua
</md-button>
3 Likes
7

I used the delay widget and switch widget to create a momentary on/off switch. Works on a pc and android phone. My app is used to open/close a garage door via relay switch. Using the delay widget I can vary the length of time before switching.
[{"id":"76600076.3fd63","type":"ui_button","z":"d25a6ab2.08881","name":"Garage switch-1","group":"ca3c903e.e3b568","order":4,"width":0,"height":0,"passthru":false,"label":"Open/Close Switch","tooltip":"","color":"","bgcolor":"","icon":"","payload":"0","payloadType":"num","topic":"","x":200,"y":540,"wires":[["3ff04a7f.846e06","6eaff12e.8bcb3"]],"outputLabels":["msg.payload"]},{"id":"9619bc56.877948","type":"debug","z":"d25a6ab2.08881","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":860,"y":500,"wires":[]},{"id":"654ba9e7.345c68","type":"rpi-gpio out","z":"d25a6ab2.08881","name":"G.Door Relay (Pin 16)","pin":"16","set":"","level":"0","freq":"","out":"out","x":950,"y":560,"wires":[],"inputLabels":["msg.payload"]},{"id":"3ff04a7f.846e06","type":"function","z":"d25a6ab2.08881","name":"Relay switch function","func":"/* from python program\n{\n system("gpio -g mode 23 out"); //activates relay\n system("gpio -g write 23 0");\n sleep(2);\n system("gpio -g write 23 1");\n } \n*/\n/\nsetTimeout(function(){\n node.status({fill:"red", shape:"ring", text:" "});\n msg['payload'] = 'finished';\n node.send(msg);\n}, 3000);\nnode.status({fill:"blue", shape:"ring", text:' '});\n/\n\n//msg.payload = 0; \nmsg.payload=msg.payload;\n\nsetTimeout(function(){\n node.status({fill:"red", text: msg.payload});\n},5000);\n//msg.payload = 0;\nreturn msg;\n","outputs":1,"noerr":0,"x":420,"y":560,"wires":[["9619bc56.877948","654ba9e7.345c68","737d9ad0.a963ec"]],"inputLabels":["msg.payload"],"outputLabels":["msg.payload"]},{"id":"6eaff12e.8bcb3","type":"debug","z":"d25a6ab2.08881","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":520,"y":500,"wires":[]},{"id":"2dfda18c.b9abee","type":"change","z":"d25a6ab2.08881","name":"Zero switch","rules":[{"t":"change","p":"payload","pt":"msg","from":"0","fromt":"num","to":"1","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":730,"y":620,"wires":[["e30c5002.8a6fe","654ba9e7.345c68"]]},{"id":"e30c5002.8a6fe","type":"debug","z":"d25a6ab2.08881","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":940,"y":620,"wires":[]},{"id":"737d9ad0.a963ec","type":"delay","z":"d25a6ab2.08881","name":"","pauseType":"delay","timeout":"20","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":560,"y":600,"wires":[["2dfda18c.b9abee"]]},{"id":"ca3c903e.e3b568","type":"ui_group","z":"","name":"dht11","tab":"7df96487.6d8cac","disp":true,"width":"6","collapse":false},{"id":"7df96487.6d8cac","type":"ui_tab","z":"","name":"DHT11","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

8

Hi, I as well have had issues using multiple buttons in the same tab using the nice code @hugobox provided us. Sadly, I found @NoGRo's solution didn't work for me since I want the momentary buttons to work on mobile too, and neither ng-touchstart or ng-touchend seem to do anything, in my dashboard at least.

I don't know angular or html that much and even though I tried to modify Hugo's code I can't seem to solve the fact that one button works well, but as soon as I deploy more on the same tab, one touchstart on any of those sends out the payload in all of them, the same on touchend of course. Has anyone else found out the solution to this?

9

Hi @Cardansan, try renaming the css class and jquery class selector for each instance ("momentary1",momentary2", etc.) for example your 1st instance could be:

<div class="momentary1">
   <md-button> Momentary Button</md-button>
</div>

<script>

(function($scope) {
    
$('.momentary1').on('touchstart mousedown', function(e) {
    e.preventDefault(); //prevent default behavior
    $scope.send({"payload": true});
});

$('.momentary1').on('touchend mouseup', function(e) {
    e.preventDefault(); //prevent default behavior
    $scope.send({"payload": false});
});
    
})(scope);
</script>
10

Here is my effort.

You can configure the button's output by editing the function node.

And what the button looks like.

[{"id":"88254a00.5a9cf8","type":"inject","z":"df652827.d02c3","name":"Setup","topic":"","payload":"X","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"3","x":150,"y":540,"wires":[["2c05e41b.fe66e4"]]},{"id":"2c05e41b.fe66e4","type":"function","z":"df652827.d02c3","name":"With icon on press","func":"if (msg.payload == \"X\")\n{\n    //\n    //node.warn(\"X received\");\n    msg.payload = \"Button pressed\";\n\n//    msg.icon = '<i class=\"material-icons md-48\"> check_circle_outline style:\"color:black\"></i>';\n//    msg.icon = '<i class=\"material-icons\"> check_circle_outline style:\"color:\"black\">';\n//    msg.icon = '<i class=\"material-icons\"> check_circle_outline</i>'\n    msg.icon = '<font color = \"white\"><i class=\"material-icons\"> check_circle_outline</i></font>'\n\n\n//    msg  = {icon: '<font color = \"black\" i class=\"fa fa-book fa-2x\"></i>',\"payload\": \"Button pressed\"};\n}\nelse\n{\n    msg.payload = \"Buttom released\";\n    msg.icon  = \"Ok\";\n//    msg  = {icon: '<font color = \"white\" i class=\"fa fa-book fa-2x\"></i>',\"payload\": \"Button released\"};\n}\nreturn msg;","outputs":1,"noerr":0,"x":380,"y":540,"wires":[["a9def673.de2e48","b3dde6.bea68218","30f0ad84.2c8752"]]},{"id":"a309a001.38ab5","type":"trigger","z":"df652827.d02c3","op1":"","op2":"Z","op1type":"nul","op2type":"str","duration":"2","extend":false,"units":"s","reset":"","bytopic":"all","name":"","x":340,"y":620,"wires":[["2c05e41b.fe66e4"]]},{"id":"a9def673.de2e48","type":"switch","z":"df652827.d02c3","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"Button pressed","vt":"str"}],"checkall":"true","repair":false,"outputs":1,"x":340,"y":580,"wires":[["a309a001.38ab5"]]},{"id":"b3dde6.bea68218","type":"ui_button","z":"df652827.d02c3","name":"Push Button","group":"373c4fb2.a22078","order":5,"width":"1","height":"1","passthru":false,"label":"{{msg.icon}}","tooltip":"","color":"black","bgcolor":"{{msg.colour}}","icon":"","payload":"X","payloadType":"str","topic":"","x":350,"y":500,"wires":[["2c05e41b.fe66e4"]]},{"id":"30f0ad84.2c8752","type":"debug","z":"df652827.d02c3","name":"Output","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":550,"y":540,"wires":[]},{"id":"373c4fb2.a22078","type":"ui_group","name":"Group 1","tab":"bca4b6a6.5ee09","order":1,"disp":true,"width":6},{"id":"bca4b6a6.5ee09","type":"ui_tab","z":"","name":"Pushbutton","icon":"dashboard","order":44,"disabled":false,"hidden":false}]
11

Hi @Cardansan, try renaming the css class and jquery class selector for each instance ("momentary1",momentary2", etc.) for example your 1st instance could be:

Sorry for the late reply, couldn't try it out during the weekend. However it works great! Multiple momentary buttons on mobile achieved. Thanks for the help. :slight_smile:

2 Likes
12

Hi,

I'm trying to use a momentary push button control but I'm having issues as all the flows that I use via the dashboard are activating all together on the relay board.

I'm trying to add 8 momentary push commands to a 8 channel relay board but all seem to activate on the 1 command or 0

I need to activate each relay individually via the UI interface.

Thanks in advance

[{"id":"e45836a5.272ae8","type":"switch","z":"c4c7f80e.ac4cd8","name":"","property":"payload","propertyType":"env","rules":[{"t":"eq","v":"","vt":"num"},{"t":"eq","v":"1","vt":"num"}],"checkall":"true","repair":false,"outputs":2,"x":370,"y":120,"wires":[["63047ad.4b16c84"],["63047ad.4b16c84"]]},{"id":"63047ad.4b16c84","type":"rpi-gpio out","z":"c4c7f80e.ac4cd8","name":"","pin":"40","set":"","level":"0","freq":"","out":"out","x":700,"y":140,"wires":[]},{"id":"9f7b9e7e.c2e73","type":"ui_template","z":"c4c7f80e.ac4cd8","group":"3baf3315.4b84bc","name":"","order":4,"width":0,"height":0,"format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":130,"y":200,"wires":[["e45836a5.272ae8"]]},{"id":"724cdd85.162564","type":"ui_template","z":"c4c7f80e.ac4cd8","group":"3baf3315.4b84bc","name":"G Car Call ","order":1,"width":11,"height":2,"format":"<style>\n.nr-dashboard-template {\n    padding: 0px;\n}\n</style>\n<div class=\"momentary\">\n   <md-button style=\"width:100%; height:48px; margin: 0px\"> Momentary Button</md-button>\n</div>\n\n<script>\n\n(function($scope) {\n    \n$('.momentary').on('touchstart mousedown', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"payload\":0});\n});\n\n$('.momentary').on('touchend mouseup', function(e) {\n    e.preventDefault(); //prevent default behavior\n    $scope.send({\"payload\":1});\n});\n    \n})(scope);\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":120,"y":120,"wires":[["e45836a5.272ae8"]]},{"id":"3baf3315.4b84bc","type":"ui_group","z":"","name":"Welcome to the IoT online Portal","tab":"67be06b.76a2bf8","order":1,"disp":true,"width":11,"collapse":false,"info":"helloe dash board"},{"id":"67be06b.76a2bf8","type":"ui_tab","z":"","name":"Group A","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
13

This is my take on a momentary button with ajdustable latching.

[{"id":"57be3015.329b2","type":"tab","label":"Flow 3","disabled":false,"info":""},{"id":"6db5213c.818eb","type":"ui_button","z":"57be3015.329b2","name":"O1 On","group":"f939857c.dafb1","order":10,"width":0,"height":0,"passthru":true,"label":"Reset1","tooltip":"","color":"","bgcolor":"","icon":"","payload":"true","payloadType":"bool","topic":"","x":110,"y":60,"wires":[["647c7b57.f2986c"]]},{"id":"647c7b57.f2986c","type":"trigger","z":"57be3015.329b2","name":"","op1":"1","op2":"0","op1type":"num","op2type":"num","duration":"2","extend":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":2,"x":340,"y":60,"wires":[["5691c189.486888","7df9bc07.eaf54c","afe4324b.f05098"],["5db49b94.87d194"]]},{"id":"5691c189.486888","type":"pccc out","z":"57be3015.329b2","endpoint":"32383bbb.254bc4","variable":"HMI Reset","name":"","x":620,"y":60,"wires":[]},{"id":"7df9bc07.eaf54c","type":"pccc out","z":"57be3015.329b2","endpoint":"32383bbb.254bc4","variable":"Output2","name":"","x":620,"y":100,"wires":[]},{"id":"5db49b94.87d194","type":"trigger","z":"57be3015.329b2","name":"","op1":"0","op2":"","op1type":"num","op2type":"nul","duration":"3","extend":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":620,"y":140,"wires":[["d288f57b.4f7838","bd15d5cc.4cd068","c946dafa.cb9ff8"]]},{"id":"d288f57b.4f7838","type":"pccc out","z":"57be3015.329b2","endpoint":"32383bbb.254bc4","variable":"HMI Reset","name":"","x":780,"y":120,"wires":[]},{"id":"bd15d5cc.4cd068","type":"pccc out","z":"57be3015.329b2","endpoint":"32383bbb.254bc4","variable":"Output2","name":"","x":780,"y":160,"wires":[]},{"id":"afe4324b.f05098","type":"debug","z":"57be3015.329b2","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":630,"y":20,"wires":[]},{"id":"c946dafa.cb9ff8","type":"debug","z":"57be3015.329b2","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":790,"y":200,"wires":[]},{"id":"f939857c.dafb1","type":"ui_group","z":"","name":"Boyd Wilson Demo Pump","tab":"c454a31f.5cf1b8","order":3,"disp":true,"width":"6","collapse":false},{"id":"32383bbb.254bc4","type":"pccc endpoint","z":"","address":"192.168.001.151","port":"44818","userouting":false,"routing":"0x01,0x00,0x01,0x00","cycletime":"500","timeout":"6000","name":"","vartable":[{"addr":"N100:0/0","name":"Output1"},{"addr":"N101:0/0","name":"Input1"},{"addr":"N99:1/0","name":"Alarm1"},{"addr":"N99:1/1","name":"Alarm2"},{"addr":"N99:1/2","name":"Alarm3"},{"addr":"N99:1/3","name":"Alarm4"},{"addr":"N200:0/0","name":"Sewer 1 FTR"},{"addr":"N9:0/1","name":"N9:0/1"},{"addr":"N10:0/0","name":"HMI Reset"},{"addr":"N100:0/1","name":"Output2"}]},{"id":"c454a31f.5cf1b8","type":"ui_tab","z":"","name":"SD750 DRIVES","icon":"dashboard","disabled":false,"hidden":false}]
14

Thank you!!!! You just saved my sanity! 3 days I'm trying to figure out why more than 1 momentary button would not work.

1 Like