Button enable flow

Have you buttons on your "dashboads"? Do you ever want to prevent accidental pressing? This is a nice effort. You have 3 buttons: "Enable", "ON" and "OFF". As well as an indicator of the state. Normally the buttons are all red, but when you are allowed to press them, they turn lime. (I prefer that to green.) If you press the ON button, the indicator will turn green.

There are two outputs. 1 - an "on/off" message. You can customise this to your heart's content. (More on that later) 2 - the indicator.

The time allowed to press the button/s is determined by the timer node. I have it set to 3 seconds.

The messages sent for "on" and "off" are in the setup (change) node. (top middle of the flow, just above the two buttons and the green debug node.

I'm no expert but I think this is a long way from where I started. I hope it is useful for someone.

[{"id":"f64521da.ed6a","type":"tab","label":"Button Enable flow","disabled":false,"info":""},{"id":"aa10aef2.892ed","type":"debug","z":"f64521da.ed6a","name":"Action","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":1000,"y":310,"wires":[]},{"id":"f7e80dda.64dbf8","type":"ui_template","z":"f64521da.ed6a","group":"7401752b.90d6a4","name":"Status","order":3,"width":"2","height":"2","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1000,"y":350,"wires":[[]]},{"id":"5e869200.ff2c44","type":"ui_template","z":"f64521da.ed6a","group":"7401752b.90d6a4","name":"Enable/Disable","order":1,"width":"3","height":"1","format":"<md-button class=\"vibrate filled touched font rounded\" style=\"background-color:#333333\" ng-click=\"send({payload: msg.payload })\"> \n\n<svg  width=\"80px\" height=\"40px\" version=\"1.1\" viewBox=\"0 0 380 160\">\n <g id=\"Button_Long\">\n  \n  <rect fill=\"#333333\" width=\"300\" height=\"100\"/>\n  <g ng-style=\"{fill: (msg.payload || 0) ? 'lime' : 'red'}\">\n    <rect width=\"380\" height=\"160\" rx=\"80\" ry=\"80\"/>\n  </g>\n  <rect fill=\"#333333\" x=\"11\" y=\"10\" width=\"358\" height=\"140\" rx=\"90\" ry=\"90\"/>\n  <g ng-style=\"{fill: (msg.payload || 0) ? 'lime' : 'red'}\">\n      \n    <text x=\"200\" y=\"95\" style=\"text-anchor:middle\"  font-weight=\"bold\" font-size=\"50\" font-family=\"Arial\">{{(msg.payload||0)? \"ENABLED \" : \"DISABLED\"}} </text>\n    </g>\n  </g>\n</svg>\n</md-button>\n","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":150,"y":270,"wires":[["e374e51.ebff098"]]},{"id":"e374e51.ebff098","type":"function","z":"f64521da.ed6a","name":"Function","func":"msg.payload =!msg.payload; \nreturn msg;\n","outputs":1,"noerr":0,"x":170,"y":310,"wires":[["5e869200.ff2c44","5af74232.7180a4","fb635dce.6cb468"]]},{"id":"b1e62eb7.b0bf68","type":"inject","z":"f64521da.ed6a","name":"","topic":"","payload":"false","payloadType":"bool","repeat":"","crontab":"","once":true,"onceDelay":"2","x":180,"y":230,"wires":[["5e869200.ff2c44"]]},{"id":"fddd4b43.d7c7d8","type":"trigger","z":"f64521da.ed6a","op1":"","op2":"false","op1type":"nul","op2type":"bool","duration":"5","extend":false,"units":"s","reset":"","bytopic":"all","name":"","x":170,"y":390,"wires":[["5e869200.ff2c44"]]},{"id":"fb635dce.6cb468","type":"switch","z":"f64521da.ed6a","name":"","property":"payload","propertyType":"msg","rules":[{"t":"true"}],"checkall":"true","repair":false,"outputs":1,"x":180,"y":350,"wires":[["fddd4b43.d7c7d8"]]},{"id":"5af74232.7180a4","type":"switch","z":"f64521da.ed6a","name":"","property":"payload","propertyType":"msg","rules":[{"t":"true"}],"checkall":"true","repair":false,"outputs":1,"x":320,"y":310,"wires":[["67c5df2f.12a7f"]]},{"id":"67c5df2f.12a7f","type":"trigger","z":"f64521da.ed6a","op1":"GO","op2":"STOP","op1type":"str","op2type":"str","duration":"3","extend":false,"units":"s","reset":"","bytopic":"all","name":"","x":330,"y":350,"wires":[["a5e53942.87af88","d7817982.83e18"]]},{"id":"a5e53942.87af88","type":"change","z":"f64521da.ed6a","name":"CTL","rules":[{"t":"set","p":"topic","pt":"msg","to":"CONTROL","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":460,"y":350,"wires":[["e67dd437.2a634","5a765e3d.c0e9b"]]},{"id":"d7817982.83e18","type":"switch","z":"f64521da.ed6a","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"GO","vt":"str"},{"t":"eq","v":"STOP","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":340,"y":390,"wires":[["c8f9488a.b571c8"],["7bf620b8.d05238"]]},{"id":"7bf620b8.d05238","type":"change","z":"f64521da.ed6a","name":"Colour","rules":[{"t":"set","p":"colour","pt":"msg","to":"red","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":460,"y":420,"wires":[["7324226a.7ac7bc","647c8ad8.5f6a6c"]]},{"id":"c8f9488a.b571c8","type":"change","z":"f64521da.ed6a","name":"Colour","rules":[{"t":"set","p":"colour","pt":"msg","to":"lime","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":460,"y":390,"wires":[["7324226a.7ac7bc","647c8ad8.5f6a6c"]]},{"id":"7324226a.7ac7bc","type":"ui_button","z":"f64521da.ed6a","name":"","group":"7401752b.90d6a4","order":2,"width":"2","height":"1","passthru":false,"label":"OFF","tooltip":"","color":"black","bgcolor":"{{msg.colour}}","icon":"","payload":"DEACTIVATE","payloadType":"str","topic":"RESET","x":600,"y":400,"wires":[["b6068645.70bbe","e67dd437.2a634"]]},{"id":"647c8ad8.5f6a6c","type":"ui_button","z":"f64521da.ed6a","name":"","group":"7401752b.90d6a4","order":2,"width":"2","height":"1","passthru":false,"label":"ON","tooltip":"","color":"black","bgcolor":"{{msg.colour}}","icon":"","payload":"ACTIVATE","payloadType":"str","topic":"RESET","x":600,"y":430,"wires":[["b6068645.70bbe","e67dd437.2a634"]]},{"id":"b6068645.70bbe","type":"debug","z":"f64521da.ed6a","name":"De/Activate","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":580,"y":470,"wires":[]},{"id":"e67dd437.2a634","type":"function","z":"f64521da.ed6a","name":"WIP","func":"//  2019 06 02 15:00\n//  block = 1 - allow.\n//          0 - block.\n//\n//  topics:     CONTROL  GO/!GO   Allow editing of state\n//              SETUP   Messages sent for states of \"off\" and \"on\" condition.\nvar msg1;\nvar msg2;\nvar off_message;        //  Not needed?\nvar on_message;         //  Not needed?\nif (msg.topic == \"CONTROL\")\n{\n    if (msg.payload == \"GO\")\n    {\n        //\n        //  Allow things to pass.\n        //\n        context.set(\"BLOCK\",1);\n        node.status({fill: \"green\",text:\"Not Blocking\"});\n    } else\n    {\n        //\n        //  Don't allow things to pass.\n        //\n        context.set(\"BLOCK\",0);\n        node.status({fill: \"red\",text:\"Blocking\"});\n    }\n}\nif (msg.topic == \"SETUP\")\n{\n    //\n    //  Set up messages for \"on\" and \"off\" conditions to be sent.\n    //\n    //node.warn(\"Setting On/Off messages\");\n    //node.warn(msg.on_message);\n    //node.warn(msg.off_message);\n    context.set(\"ON_MESSAGE\", msg.on_message);\n    context.set(\"OFF_MESSAGE\",msg.off_message);\n    return;\n}\nvar block = context.get(\"BLOCK\") || 0;\nif (block == 1)\n{\n    //\n//    node.warn(\"Passing messages\");\n    if (msg.payload == \"ACTIVATE\")\n    {\n        //\n        //  All good.\n        //\n        //msg = context.get(\"ON_MESSAGE\");\n        msg = {payload: \"ENABLED\"};\n        msg1 = {payload: '<font color = \"lime\" <i class=\"fa fa-bullseye fa-2x\"></i>'};\n        msg2 = {colour:\"red\"};\n        return [msg, msg1,msg2];\n    } else\n    if (msg.payload == \"DEACTIVATE\")\n    {\n        //\n        //  All good\n        //\n        //msg = context.get(\"OFF_MESSAGE\");\n        msg = {payload: \"DISABLED\"};\n        msg1 = {payload: '<font color = \"red\" <i class=\"fa fa-bullseye fa-2x\"></i>'};\n        msg2 = {colour:\"red\"};\n        return [msg, msg1,msg2];\n    }\n}","outputs":3,"noerr":0,"x":730,"y":350,"wires":[["aa10aef2.892ed"],["f7e80dda.64dbf8"],["647c8ad8.5f6a6c","7324226a.7ac7bc","53fcfbc8.274eb4"]]},{"id":"5a765e3d.c0e9b","type":"debug","z":"f64521da.ed6a","name":"Go/Stop","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":590,"y":330,"wires":[]},{"id":"8e86111d.a9b3d","type":"link out","z":"f64521da.ed6a","name":"","links":["54a42427.bd9ff4"],"x":855,"y":410,"wires":[]},{"id":"54a42427.bd9ff4","type":"link in","z":"f64521da.ed6a","name":"","links":["8e86111d.a9b3d"],"x":215,"y":190,"wires":[["5e869200.ff2c44"]]},{"id":"53fcfbc8.274eb4","type":"change","z":"f64521da.ed6a","name":"Colour","rules":[{"t":"set","p":"payload","pt":"msg","to":"false","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":765,"y":410,"wires":[["8e86111d.a9b3d"]]},{"id":"11e38a10.c30ff6","type":"comment","z":"f64521da.ed6a","name":"Enable button press","info":"","x":470,"y":190,"wires":[]},{"id":"fb9e2fd8.c74888","type":"inject","z":"f64521da.ed6a","name":"","topic":"","payload":"blah","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"2","x":340,"y":420,"wires":[["7bf620b8.d05238","d11fac24.356be"]]},{"id":"d11fac24.356be","type":"change","z":"f64521da.ed6a","name":"Setup","rules":[{"t":"set","p":"topic","pt":"msg","to":"SETUP","tot":"str"},{"t":"set","p":"payload","pt":"msg","to":"null","tot":"jsonata"},{"t":"set","p":"on_message","pt":"msg","to":"On Message","tot":"str"},{"t":"set","p":"off_message","pt":"msg","to":"Off Message","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":580,"y":290,"wires":[["e67dd437.2a634"]]},{"id":"7401752b.90d6a4","type":"ui_group","z":"","name":"Group 1","tab":"b5ae1056.1d289","order":1,"disp":true,"width":"9","collapse":false},{"id":"b5ae1056.1d289","type":"ui_tab","z":"","name":"Master Control prototype","icon":"dashboard","order":39,"disabled":false,"hidden":false}]

Flow Info

Created 6 years, 5 months ago
Rating:

Actions

Rate:

Node Types

Core
  • change (x5)
  • comment (x1)
  • debug (x3)
  • function (x2)
  • inject (x2)
  • link in (x1)
  • link out (x1)
  • switch (x3)
  • trigger (x2)
Other
  • tab (x1)
  • ui_button (x2)
  • ui_group (x1)
  • ui_tab (x1)
  • ui_template (x2)

Tags

  • buttons
  • accidental_pressing_prevention
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option