Steve Lilley took my starter set of buttons and my css and js got carried away, adding SVG buttons - this is a sample FLOW for Node-Red - enjoy

[{"id":"87828878.d6dbe8","type":"ui_template","z":"7edf106f.cb744","group":"63826f2f.4db18","name":"blue","order":3,"width":"2","height":"2","format":"\n<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#2980b9\"   ng-click=\"send({payload: 'Hello World'})\"> \n    Blue<br/>button\n</md-button> \n\n","storeOutMessages":true,"fwdInMessages":true,"x":1005.6664123535156,"y":399.99999237060547,"wires":[[]]},{"id":"c7648e3a.d6f65","type":"ui_template","z":"7edf106f.cb744","group":"63826f2f.4db18","name":"red","order":1,"width":"2","height":"2","format":"\n<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#c0392b\" ng-click=\"send({payload: 'Hello World'})\"> \n    Red<br/>button\n</md-button> \n\n","storeOutMessages":true,"fwdInMessages":true,"x":1003.6663818359375,"y":315.99999237060547,"wires":[[]]},{"id":"7e95a266.d337ac","type":"ui_template","z":"7edf106f.cb744","group":"63826f2f.4db18","name":"green","order":2,"width":"2","height":"2","format":"\n<md-button class=\"filled touched bigfont rounded vibrate\" style=\"background-color:#27ae60\" ng-click=\"send({payload: 'Hello World'})\"> \n    Green<br/>button\n</md-button> \n\n","storeOutMessages":true,"fwdInMessages":true,"x":1005.6664123535156,"y":359.99999237060547,"wires":[[]]},{"id":"883ac02a.e8d3b","type":"ui_template","z":"7edf106f.cb744","group":"63826f2f.4db18","name":"","order":4,"width":"2","height":"1","format":"\n<md-button class=\"vibrate filled touched smallfont rounded\" style=\"background-color:#16a085\"   ng-click=\"send({payload: 'Hello World'})\"> \n    Blue<br/>button\n</md-button> \n\n","storeOutMessages":true,"fwdInMessages":true,"x":1015.6664123535156,"y":479.99999237060547,"wires":[[]]},{"id":"b437004e.fbafb","type":"ui_template","z":"7edf106f.cb744","group":"63826f2f.4db18","name":"","order":5,"width":"2","height":"1","format":"\n<md-button class=\"vibrate filled touched smallfont rounded\" style=\"background-color:#e67e22\" ng-click=\"send({payload: 'Hello World'})\"> \n    Red<br/>button\n</md-button> \n\n","storeOutMessages":true,"fwdInMessages":true,"x":1015.6664123535156,"y":439.99999237060547,"wires":[[]]},{"id":"c473d5ac.512c98","type":"ui_template","z":"7edf106f.cb744","group":"63826f2f.4db18","name":"on","order":6,"width":"1","height":"1","format":"\n<md-button class=\"vibrate filled touched smallfont rounded\" style=\"background-color:#34495e\" ng-click=\"send({payload: 'Hello World'})\"> \n    On\n</md-button> \n\n","storeOutMessages":true,"fwdInMessages":true,"x":1005.6664123535156,"y":519.9999923706055,"wires":[[]]},{"id":"1551be6.6047c42","type":"ui_template","z":"7edf106f.cb744","group":"63826f2f.4db18","name":"off","order":7,"width":"1","height":"1","format":"\n<md-button class=\"vibrate filled touched smallfont rounded\" style=\"background-color:#8e44ad\" ng-click=\"send({payload: 'Hello World'})\"> \n    Off\n</md-button> \n\n","storeOutMessages":true,"fwdInMessages":true,"x":1005.6664123535156,"y":559.9999923706055,"wires":[[]]},{"id":"1c0745b9.fcfc7a","type":"ui_template","z":"7edf106f.cb744","group":"63826f2f.4db18","name":"stuff","order":8,"width":"0","height":"0","format":"<style>\n  .filled { \n      height: 100% !important;\n\n      padding: 0 !important;\n      margin: 0 !important;\n  }\n  .nr-dashboard-template {\n      padding: 0;\n      margin: 0;\n  }\n  \n  .rounded {\n  border-radius: 2px 2px 2px 2px;\n}\n \n   .bigfont {\n  font-size: 18px;\n}\n\n   .smallfont {\n  font-size: 12px;\n}\n  \n</style>\n\n<script>\n$('.vibrate').on('click', function() {\n  navigator.vibrate(100);\n});\n\nfunction restore_bg(x) {\n            $(this).css(\"background-color\", x);\n    };\n\n$('.touched').on('mousedown', function() {\n    \n    var x= $(this).css(\"background-color\");\n    $(this).css(\"background-color\", \"yellow\");\n    \n    setTimeout(restore_bg.bind(this,x),100);\n    navigator.vibrate(80);\n    });\n    \n</script>","storeOutMessages":true,"fwdInMessages":true,"x":880.6664123535156,"y":313.99999237060547,"wires":[[]]},{"id":"388f723a.3396be","type":"ui_template","z":"7edf106f.cb744","group":"6641e44d.8eb86c","name":"Red Starter","order":10,"width":"2","height":"2","format":"\n<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#333333\" ng-click=\"send({payload: msg.payload })\"> \n\n<svg  width=\"105px\" height=\"105px\" version=\"1.1\" \nviewBox=\"0 0 76 76\">\n <g id=\"Button_1\">\n  <rect fill=\"#4B4B4D\" width=\"76\" height=\"76\"/>\n\n    <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#848688' : '#1A1A1A'}\">\n  <polygon stroke=\"black\" stroke-width=\"0.380524\" points=\"72,72 4,72 0,76 76,76 76,0 72,4 \"/>\n    </g>\n    <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#1A1A1A' : '#848688'}\">\n  <polygon  points=\"4,4 72,4 76,0 0,0 0,76 4,72 \"/>\n    </g>\n    <g ng-style=\"{stroke: (msg.payload || 0) % 2 === 0 ? 'black' : '#E6E7E8'}\">\n  <line fill=\"none\" stroke-width=\"0.380524\" x1=\"0\" y1=\"0\" x2=\"4\" y2= \"4\" />\n    </g>\n\n  <circle fill=\"none\" stroke=\"red\" stroke-width=\"1.8\" cx=\"38\" cy=\"38\" r=\"29\"/>\n    <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? 'red' : 'none'}\">\n      <circle  cx=\"38\" cy=\"38\" r=\"26\" />\n    </g>\n  <polyline fill=\"none\" stroke=\"#D2D3D5\" stroke-width=\"0.380524\" points=\"4,72 4,4 72,4 \"/>\n\n\n  <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? 'none' : '#FEFEFE'}\">\n    <text x=\"37\" y=\"44\" style=\"text-anchor:middle\" font-weight=\"normal\" font-size=\"19.0185\" font-family=\"Droid Sans\">OFF</text>\n  </g>\n  <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#FEFEFE' : 'none'}\">\n    <text x=\"37\" y=\"44\" style=\"text-anchor:middle\" font-weight=\"normal\" font-size=\"19.0185\" font-family=\"Droid Sans\">OFF</text>\n  </g>\n </g>\n</svg>\n</md-button>\n","storeOutMessages":false,"fwdInMessages":false,"x":1213.4997253417969,"y":624.3334274291992,"wires":[["32068455.ee1c8c"]]},{"id":"ebf05633.74cab8","type":"ui_template","z":"7edf106f.cb744","group":"63826f2f.4db18","name":"","order":11,"width":"2","height":"2","format":"\n<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#333333\" ng-click=\"send({payload: msg.payload })\"> \n\n<svg  width=\"105px\" height=\"105px\" version=\"1.1\" \nviewBox=\"0 0 76 76\">\n <g id=\"Button_1\">\n  <rect fill=\"#4B4B4D\" width=\"76\" height=\"76\"/>\n  <polygon fill=\"#1A1A1A\" stroke=\"black\" stroke-width=\"0.380524\" points=\"72,72 4,72 0,76 76,76 76,0 72,4 \"/>\n  <polygon fill=\"#848688\" points=\"4,4 72,4 76,0 0,0 0,76 4,72 \"/>\n\n    <g ng-style=\"{stroke: (msg.payload || 0) % 2 === 0 ? 'red' : '#FFF212'}\">\n  <circle fill=\"none\" stroke-width=\"1.8\" cx=\"38\" cy=\"38\" r=\"29\"/>\n    </g>\n    \n    <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#FFF212' : 'green'}\">\n      <circle  cx=\"38\" cy=\"38\" r=\"26\" />\n    </g>\n  <line fill=\"none\" stroke=\"#E6E7E8\" stroke-width=\"0.380524\" x1=\"0\" y1=\"0\" x2=\"4\" y2= \"4\" />\n  <polyline fill=\"none\" stroke=\"#D2D3D5\" stroke-width=\"0.380524\" points=\"4,72 4,4 72,4 \"/>\n\n\n  <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? 'none' : '#FFF212'}\">\n    <text x=\"37\" y=\"42\" style=\"text-anchor:middle\" font-weight=\"bold\" font-size=\"12\" font-family=\"Droid Sans\">GREEN</text>\n  </g>\n  <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? 'red' : 'none'}\">\n    <text x=\"37\" y=\"42\" style=\"text-anchor:middle\" font-weight=\"bold\" font-size=\"12\" font-family=\"Droid Sans\">YELLOW</text>\n  </g>\n </g>\n</svg>\n</md-button>\n\n","storeOutMessages":false,"fwdInMessages":false,"x":767.4998168945312,"y":789.3334121704102,"wires":[["cd6058af.5f8a88","43343592.67c9bc"]]},{"id":"2d22b04c.7cb2","type":"ui_template","z":"7edf106f.cb744","group":"63826f2f.4db18","name":"","order":12,"width":"2","height":"2","format":"\n<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#333333\" ng-click=\"send({payload: msg.payload })\"> \n\n<svg  width=\"105px\" height=\"105px\" version=\"1.1\" \nviewBox=\"0 0 76 76\">\n <g id=\"Button_1\">\n  <rect fill=\"#4B4B4D\" width=\"76\" height=\"76\"/>\n  <polygon fill=\"#1A1A1A\" stroke=\"black\" stroke-width=\"0.380524\" points=\"72,72 4,72 0,76 76,76 76,0 72,4 \"/>\n  <polygon fill=\"#848688\" points=\"4,4 72,4 76,0 0,0 0,76 4,72 \"/>\n  <circle fill=\"none\" stroke=\"green\" stroke-width=\"1.8\" cx=\"38\" cy=\"38\" r=\"29\"/>\n    <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? 'none' : 'green'}\">\n      <circle  cx=\"38\" cy=\"38\" r=\"26\" />\n    </g>\n  <line fill=\"none\" stroke=\"#E6E7E8\" stroke-width=\"0.380524\" x1=\"0\" y1=\"0\" x2=\"4\" y2= \"4\" />\n  <polyline fill=\"none\" stroke=\"#D2D3D5\" stroke-width=\"0.380524\" points=\"4,72 4,4 72,4 \"/>\n\n\n  <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? 'none' : '#FEFEFE'}\">\n    <text x=\"38\" y=\"35\" style=\"text-anchor:middle\" font-weight=\"bold\" font-size=\"12\" font-family=\"Droid Sans\">GREEN</text>\n  </g>\n  <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? 'none' : '#FEFEFE'}\">\n    <text x=\"38\" y=\"52\" style=\"text-anchor:middle\" font-weight=\"bold\" font-size=\"12\" font-family=\"Droid Sans\">ON</text>\n  </g>\n  <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#FEFEFE' : 'none'}\">\n    <text x=\"38\" y=\"42\" style=\"text-anchor:middle\" font-weight=\"normal\" font-size=\"12\" font-family=\"Droid Sans\">GREEN</text>\n  </g>\n </g>\n</svg>\n</md-button>\n\n\n\n","storeOutMessages":false,"fwdInMessages":false,"x":768.4998168945312,"y":884.3334121704102,"wires":[["6af300bd.ceee3"]]},{"id":"cd6058af.5f8a88","type":"debug","z":"7edf106f.cb744","name":"","active":false,"console":"false","complete":"false","x":995.4998779296875,"y":792.0000991821289,"wires":[]},{"id":"dae8c03d.3ba72","type":"ui_template","z":"7edf106f.cb744","group":"fa5f5d48.d1a27","name":"ON/OFF 1","order":14,"width":"2","height":"2","format":"\n<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#333333\" ng-click=\"send({payload: msg.payload })\"> \n\n<svg  width=\"105px\" height=\"105px\" version=\"1.1\" \nviewBox=\"0 0 76 76\">\n <g id=\"Button_1\">\n  <rect fill=\"#4B4B4D\" width=\"76\" height=\"76\"/>\n  <polygon fill=\"#1A1A1A\" stroke=\"black\" stroke-width=\"0.380524\" points=\"72,72 4,72 0,76 76,76 76,0 72,4 \"/>\n  <polygon fill=\"#848688\" points=\"4,4 72,4 76,0 0,0 0,76 4,72 \"/>\n  <circle fill=\"none\" stroke=\"#FFF212\" stroke-width=\"1.8\" cx=\"38\" cy=\"38\" r=\"29\"/>\n    <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? 'red' : 'green'}\">\n      <circle  cx=\"38\" cy=\"38\" r=\"26\" />\n    </g>\n  <line fill=\"none\" stroke=\"#E6E7E8\" stroke-width=\"0.380524\" x1=\"0\" y1=\"0\" x2=\"4\" y2= \"4\" />\n  <polyline fill=\"none\" stroke=\"#D2D3D5\" stroke-width=\"0.380524\" points=\"4,72 4,4 72,4 \"/>\n\n\n  <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? 'none' : '#FEFEFE'}\">\n    <text x=\"37\" y=\"44\" style=\"text-anchor:middle\" font-weight=\"normal\" font-size=\"19.0185\" font-family=\"Droid Sans\">ON</text>\n  </g>\n  <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#FEFEFE' : 'none'}\">\n    <text x=\"37\" y=\"44\" style=\"text-anchor:middle\" font-weight=\"normal\" font-size=\"19.0185\" font-family=\"Droid Sans\">OFF</text>\n  </g>\n </g>\n</svg>\n</md-button>\n\n\n","storeOutMessages":false,"fwdInMessages":false,"x":820.6663513183594,"y":520.0000762939453,"wires":[["25f16a7b.102316"]]},{"id":"8493d7a6.22e2a8","type":"ui_template","z":"7edf106f.cb744","group":"63826f2f.4db18","name":"Switch","order":15,"width":"2","height":"2","format":"\n<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#333333\" ng-click=\"send({payload: msg.payload })\"> \n\n<svg  width=\"105px\" height=\"105px\" version=\"1.1\" \nviewBox=\"0 0 76 76\">\n <g id=\"Button_1\">\n  <rect fill=\"#4B4B4D\" width=\"76\" height=\"76\"/>\n  <polygon fill=\"#1A1A1A\" stroke=\"black\" stroke-width=\"0.380524\" points=\"72,72 4,72 0,76 76,76 76,0 72,4 \"/>\n  <polygon fill=\"#848688\" points=\"4,4 72,4 76,0 0,0 0,76 4,72 \"/>\n  <circle fill=\"none\" stroke=\"#FFF212\" stroke-width=\"1.8\" cx=\"38\" cy=\"38\" r=\"29\"/>\n    <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? 'none' : '#FFF212'}\">\n      <circle  cx=\"38\" cy=\"38\" r=\"26\" />\n    </g>\n  <line fill=\"none\" stroke=\"#E6E7E8\" stroke-width=\"0.380524\" x1=\"0\" y1=\"0\" x2=\"4\" y2= \"4\" />\n  <polyline fill=\"none\" stroke=\"#D2D3D5\" stroke-width=\"0.380524\" points=\"4,72 4,4 72,4 \"/>\n\n\n  <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? 'none' : '#000'}\">\n    <text x=\"37\" y=\"42\" style=\"text-anchor:middle\" font-weight=\"bold\" font-size=\"12\" font-family=\"Droid Sans\">YELLOW</text>\n  </g>\n  <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#FEFEFE' : 'none'}\">\n    <text x=\"37\" y=\"42\" style=\"text-anchor:middle\" font-weight=\"bold\" font-size=\"12\" font-family=\"Droid Sans\">YELLOW</text>\n  </g>\n </g>\n</svg>\n</md-button>\n\n\n","storeOutMessages":false,"fwdInMessages":false,"x":762.6664428710938,"y":985.0001602172852,"wires":[["e2f3c6be.4f93d8"]]},{"id":"97a8a5df.595ef8","type":"ui_template","z":"7edf106f.cb744","group":"6641e44d.8eb86c","name":"Green Starter","order":9,"width":"2","height":"2","format":"\n<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#333333\" ng-click=\"send({payload: msg.payload })\"> \n\n<svg  width=\"105px\" height=\"105px\" version=\"1.1\" \nviewBox=\"0 0 76 76\">\n <g id=\"Button_1\">\n  <rect fill=\"#4B4B4D\" width=\"76\" height=\"76\"/>\n\n    <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#1A1A1A' : '#848688'}\">\n  <polygon stroke=\"black\" stroke-width=\"0.380524\" points=\"72,72 4,72 0,76 76,76 76,0 72,4 \"/>\n    </g>\n    <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#848688' : '#1A1A1A'}\">\n  <polygon  points=\"4,4 72,4 76,0 0,0 0,76 4,72 \"/>\n    </g>\n    <g ng-style=\"{stroke: (msg.payload || 0) % 2 === 0 ? '#E6E7E8' : 'black'}\">\n  <line fill=\"none\" stroke-width=\"0.380524\" x1=\"0\" y1=\"0\" x2=\"4\" y2= \"4\" />\n    </g>\n\n  <circle fill=\"none\" stroke=\"green\" stroke-width=\"1.8\" cx=\"38\" cy=\"38\" r=\"29\"/>\n    <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? 'none' : 'green'}\">\n      <circle  cx=\"38\" cy=\"38\" r=\"26\" />\n    </g>\n  <polyline fill=\"none\" stroke=\"#D2D3D5\" stroke-width=\"0.380524\" points=\"4,72 4,4 72,4 \"/>\n\n\n  <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? 'none' : '#FEFEFE'}\">\n    <text x=\"37\" y=\"44\" style=\"text-anchor:middle\" font-weight=\"normal\" font-size=\"19.0185\" font-family=\"Droid Sans\">RUN</text>\n  </g>\n  <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#FEFEFE' : 'none'}\">\n    <text x=\"37\" y=\"44\" style=\"text-anchor:middle\" font-weight=\"normal\" font-size=\"19.0185\" font-family=\"Droid Sans\">RUN</text>\n  </g>\n </g>\n</svg>\n</md-button>\n\n\n","storeOutMessages":false,"fwdInMessages":false,"x":1212.6663513183594,"y":493.0000534057617,"wires":[["c4b2f5e8.6e3a48"]]},{"id":"25f16a7b.102316","type":"function","z":"7edf106f.cb744","name":"","func":"\nif (msg.payload === false ){\n    msg.payload = true;\n}\nelse { msg.payload = false;\n}\nreturn msg;\n","outputs":1,"noerr":0,"x":808.4998168945312,"y":440.0000534057617,"wires":[["dae8c03d.3ba72"]]},{"id":"e2f3c6be.4f93d8","type":"function","z":"7edf106f.cb744","name":"","func":"\nif (msg.payload === false ){\n    msg.payload = true;\n}\nelse { msg.payload = false;\n}\nreturn msg;\n","outputs":1,"noerr":0,"x":761.4998474121094,"y":945.0000991821289,"wires":[["8493d7a6.22e2a8"]]},{"id":"c4b2f5e8.6e3a48","type":"function","z":"7edf106f.cb744","name":"","func":"\nif (msg.payload === false ){\n    msg.payload = true;\n}\nelse { msg.payload = true;\n}\nreturn msg;\n","outputs":1,"noerr":0,"x":1210.4997863769531,"y":426.99999237060547,"wires":[["97a8a5df.595ef8","388f723a.3396be"]]},{"id":"32068455.ee1c8c","type":"function","z":"7edf106f.cb744","name":"","func":"\nif (msg.payload === true ){\n    msg.payload = false;\n}\nelse { msg.payload = false;\n}\nreturn msg;\n","outputs":1,"noerr":0,"x":1204.4997863769531,"y":554.0001449584961,"wires":[["388f723a.3396be","97a8a5df.595ef8"]]},{"id":"43343592.67c9bc","type":"function","z":"7edf106f.cb744","name":"","func":"\nif (msg.payload === false ){\n    msg.payload = true;\n}\nelse { msg.payload = false;\n}\nreturn msg;\n","outputs":1,"noerr":0,"x":760.5,"y":751.0000534057617,"wires":[["ebf05633.74cab8"]]},{"id":"6af300bd.ceee3","type":"function","z":"7edf106f.cb744","name":"","func":"\nif (msg.payload === false ){\n    msg.payload = true;\n}\nelse { msg.payload = false;\n}\nreturn msg;\n","outputs":1,"noerr":0,"x":756.5,"y":847.0000534057617,"wires":[["2d22b04c.7cb2"]]},{"id":"13a26ccd.04aa43","type":"ui_template","z":"7edf106f.cb744","group":"fa5f5d48.d1a27","name":"ON/OFF 2","order":14,"width":"2","height":"2","format":"\n<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#333333\" ng-click=\"send({payload: msg.payload })\"> \n\n<svg  width=\"105px\" height=\"105px\" version=\"1.1\" \nviewBox=\"0 0 76 76\">\n <g id=\"Button_1\">\n  <rect fill=\"#4B4B4D\" width=\"76\" height=\"76\"/>\n\n    <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#1A1A1A' : '#848688'}\">\n  <polygon stroke=\"black\" stroke-width=\"0.380524\" points=\"72,72 4,72 0,76 76,76 76,0 72,4 \"/>\n    </g>\n    <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#848688' : '#1A1A1A'}\">\n  <polygon  points=\"4,4 72,4 76,0 0,0 0,76 4,72 \"/>\n    </g>\n    <g ng-style=\"{stroke: (msg.payload || 0) % 2 === 0 ? '#E6E7E8' : 'black'}\">\n  <line fill=\"none\" stroke-width=\"0.380524\" x1=\"0\" y1=\"0\" x2=\"4\" y2= \"4\" />\n    </g>\n\n <circle fill=\"none\" stroke=\"#FFF212\" stroke-width=\"1.8\" cx=\"38\" cy=\"38\" r=\"29\"/>\n    <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? 'red' : 'green'}\">\n      <circle  cx=\"38\" cy=\"38\" r=\"26\" />\n    </g>\n  <polyline fill=\"none\" stroke=\"#D2D3D5\" stroke-width=\"0.380524\" points=\"4,72 4,4 72,4 \"/>\n\n\n  <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? 'none' : '#FEFEFE'}\">\n    <text x=\"37\" y=\"44\" style=\"text-anchor:middle\" font-weight=\"normal\" font-size=\"19.0185\" font-family=\"Droid Sans\">ON</text>\n  </g>\n  <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#FEFEFE' : 'none'}\">\n    <text x=\"37\" y=\"44\" style=\"text-anchor:middle\" font-weight=\"normal\" font-size=\"19.0185\" font-family=\"Droid Sans\">OFF</text>\n  </g>\n </g>\n</svg>\n</md-button>\n\n\n","storeOutMessages":false,"fwdInMessages":false,"x":814.6664123535156,"y":626.3334274291992,"wires":[["98062059.39a67"]]},{"id":"98062059.39a67","type":"function","z":"7edf106f.cb744","name":"","func":"\nif (msg.payload === false ){\n    msg.payload = true;\n}\nelse { msg.payload = false;\n}\nreturn msg;\n","outputs":1,"noerr":0,"x":798.4998779296875,"y":568.3334045410156,"wires":[["13a26ccd.04aa43"]]},{"id":"6875e638.7b0438","type":"ui_template","z":"7edf106f.cb744","group":"69e41928.97f8e8","name":"Key 1","order":0,"width":"2","height":"2","format":"<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#333333\" ng-click=\"send({payload: '1' })\"> \n\n\n<svg width=\"105px\" height=\"105px\" version=\"1.1\" viewBox=\"0 0 200 200\">\n\n <g id=\"Keypad\">\n  <rect fill=\"#4D4D4D\" width=\"200\" height=\"200\" rx=\"12\" ry=\"12\"/>\n  <path fill=\"none\" stroke=\"#B3B3B3\" stroke-width=\"7.99957\" d=\"M6 194c-1,-1 -2,-3 -2,-6l0 -176c0,-4 4,-8 8,-8l176 0c2,0 4,1 6,2\"/>\n  <path fill=\"none\" stroke=\"#1A1A1A\" stroke-width=\"7.99957\" d=\"M194 6c1,1 2,3 2,6l0 176c0,4 -4,8 -8,8l-176 0c-2,0 -4,-1 -6,-2\"/>\n  <text x=\"59\" y=\"153\"  fill=\"#E6E6E6\" font-weight=\"normal\" font-size=\"149.999\" font-family=\"Arial\">1</text>\n </g>\n</svg>\n</md-button>\n","storeOutMessages":false,"fwdInMessages":false,"x":133.50003051757812,"y":361.3333740234375,"wires":[["3663688b.a3fef8"]]},{"id":"bae02a81.5aa848","type":"ui_template","z":"7edf106f.cb744","group":"69e41928.97f8e8","name":"Key 6","order":0,"width":"2","height":"2","format":"<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#333333\" ng-click=\"send({payload: '6' })\"> \n\n\n<svg width=\"105px\" height=\"105px\" version=\"1.1\" viewBox=\"0 0 200 200\">\n\n <g id=\"Keypad\">\n  <rect fill=\"#4D4D4D\" width=\"200\" height=\"200\" rx=\"12\" ry=\"12\"/>\n  <path fill=\"none\" stroke=\"#B3B3B3\" stroke-width=\"7.99957\" d=\"M6 194c-1,-1 -2,-3 -2,-6l0 -176c0,-4 4,-8 8,-8l176 0c2,0 4,1 6,2\"/>\n  <path fill=\"none\" stroke=\"#1A1A1A\" stroke-width=\"7.99957\" d=\"M194 6c1,1 2,3 2,6l0 176c0,4 -4,8 -8,8l-176 0c-2,0 -4,-1 -6,-2\"/>\n  <text x=\"59\" y=\"153\"  fill=\"#E6E6E6\" font-weight=\"normal\" font-size=\"149.999\" font-family=\"Arial\">6</text>\n </g>\n</svg>\n</md-button>\n","storeOutMessages":false,"fwdInMessages":false,"x":394.5,"y":413.99999237060547,"wires":[["3663688b.a3fef8"]]},{"id":"f5af6488.f588b8","type":"ui_template","z":"7edf106f.cb744","group":"69e41928.97f8e8","name":"Key 3","order":0,"width":"2","height":"2","format":"<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#333333\" ng-click=\"send({payload: '3' })\"> \n\n\n<svg width=\"105px\" height=\"105px\" version=\"1.1\" viewBox=\"0 0 200 200\">\n\n <g id=\"Keypad\">\n  <rect fill=\"#4D4D4D\" width=\"200\" height=\"200\" rx=\"12\" ry=\"12\"/>\n  <path fill=\"none\" stroke=\"#B3B3B3\" stroke-width=\"7.99957\" d=\"M6 194c-1,-1 -2,-3 -2,-6l0 -176c0,-4 4,-8 8,-8l176 0c2,0 4,1 6,2\"/>\n  <path fill=\"none\" stroke=\"#1A1A1A\" stroke-width=\"7.99957\" d=\"M194 6c1,1 2,3 2,6l0 176c0,4 -4,8 -8,8l-176 0c-2,0 -4,-1 -6,-2\"/>\n  <text x=\"59\" y=\"153\"  fill=\"#E6E6E6\" font-weight=\"normal\" font-size=\"149.999\" font-family=\"Arial\">3</text>\n </g>\n</svg>\n</md-button>\n","storeOutMessages":false,"fwdInMessages":false,"x":399.5000305175781,"y":362.99999237060547,"wires":[["3663688b.a3fef8","db67a18e.466ee"]]},{"id":"24ed0c0b.b30224","type":"ui_template","z":"7edf106f.cb744","group":"69e41928.97f8e8","name":"Key 4","order":0,"width":"2","height":"2","format":"<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#333333\" ng-click=\"send({payload: '4' })\"> \n\n\n<svg width=\"105px\" height=\"105px\" version=\"1.1\" viewBox=\"0 0 200 200\">\n\n <g id=\"Keypad\">\n  <rect fill=\"#4D4D4D\" width=\"200\" height=\"200\" rx=\"12\" ry=\"12\"/>\n  <path fill=\"none\" stroke=\"#B3B3B3\" stroke-width=\"7.99957\" d=\"M6 194c-1,-1 -2,-3 -2,-6l0 -176c0,-4 4,-8 8,-8l176 0c2,0 4,1 6,2\"/>\n  <path fill=\"none\" stroke=\"#1A1A1A\" stroke-width=\"7.99957\" d=\"M194 6c1,1 2,3 2,6l0 176c0,4 -4,8 -8,8l-176 0c-2,0 -4,-1 -6,-2\"/>\n  <text x=\"59\" y=\"153\"  fill=\"#E6E6E6\" font-weight=\"normal\" font-size=\"149.999\" font-family=\"Arial\">4</text>\n </g>\n</svg>\n</md-button>\n","storeOutMessages":false,"fwdInMessages":false,"x":130.5,"y":417,"wires":[["3663688b.a3fef8"]]},{"id":"9d010adf.4abf88","type":"ui_template","z":"7edf106f.cb744","group":"69e41928.97f8e8","name":"Key 5","order":0,"width":"2","height":"2","format":"<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#333333\" ng-click=\"send({payload: '5' })\"> \n\n\n<svg width=\"105px\" height=\"105px\" version=\"1.1\" viewBox=\"0 0 200 200\">\n\n <g id=\"Keypad\">\n  <rect fill=\"#4D4D4D\" width=\"200\" height=\"200\" rx=\"12\" ry=\"12\"/>\n  <path fill=\"none\" stroke=\"#B3B3B3\" stroke-width=\"7.99957\" d=\"M6 194c-1,-1 -2,-3 -2,-6l0 -176c0,-4 4,-8 8,-8l176 0c2,0 4,1 6,2\"/>\n  <path fill=\"none\" stroke=\"#1A1A1A\" stroke-width=\"7.99957\" d=\"M194 6c1,1 2,3 2,6l0 176c0,4 -4,8 -8,8l-176 0c-2,0 -4,-1 -6,-2\"/>\n  <text x=\"59\" y=\"153\"  fill=\"#E6E6E6\" font-weight=\"normal\" font-size=\"149.999\" font-family=\"Arial\">5</text>\n </g>\n</svg>\n</md-button>\n","storeOutMessages":true,"fwdInMessages":true,"x":255.5,"y":417.99999237060547,"wires":[["3663688b.a3fef8"]]},{"id":"c16b3365.9f78c","type":"ui_template","z":"7edf106f.cb744","group":"69e41928.97f8e8","name":"Key 7","order":0,"width":"2","height":"2","format":"<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#333333\" ng-click=\"send({payload: '7' })\"> \n\n\n<svg width=\"105px\" height=\"105px\" version=\"1.1\" viewBox=\"0 0 200 200\">\n\n <g id=\"Keypad\">\n  <rect fill=\"#4D4D4D\" width=\"200\" height=\"200\" rx=\"12\" ry=\"12\"/>\n  <path fill=\"none\" stroke=\"#B3B3B3\" stroke-width=\"7.99957\" d=\"M6 194c-1,-1 -2,-3 -2,-6l0 -176c0,-4 4,-8 8,-8l176 0c2,0 4,1 6,2\"/>\n  <path fill=\"none\" stroke=\"#1A1A1A\" stroke-width=\"7.99957\" d=\"M194 6c1,1 2,3 2,6l0 176c0,4 -4,8 -8,8l-176 0c-2,0 -4,-1 -6,-2\"/>\n  <text x=\"59\" y=\"153\"  fill=\"#E6E6E6\" font-weight=\"normal\" font-size=\"149.999\" font-family=\"Arial\">7</text>\n </g>\n</svg>\n</md-button>\n","storeOutMessages":false,"fwdInMessages":false,"x":129.50003051757812,"y":473,"wires":[["3663688b.a3fef8"]]},{"id":"ae6b0ad6.1a3dc8","type":"ui_template","z":"7edf106f.cb744","group":"69e41928.97f8e8","name":"Key 2","order":0,"width":"2","height":"2","format":"<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#333333\" ng-click=\"send({payload: '2' })\"> \n\n\n<svg width=\"105px\" height=\"105px\" version=\"1.1\" viewBox=\"0 0 200 200\">\n\n <g id=\"Keypad\">\n  <rect fill=\"#4D4D4D\" width=\"200\" height=\"200\" rx=\"12\" ry=\"12\"/>\n  <path fill=\"none\" stroke=\"#B3B3B3\" stroke-width=\"7.99957\" d=\"M6 194c-1,-1 -2,-3 -2,-6l0 -176c0,-4 4,-8 8,-8l176 0c2,0 4,1 6,2\"/>\n  <path fill=\"none\" stroke=\"#1A1A1A\" stroke-width=\"7.99957\" d=\"M194 6c1,1 2,3 2,6l0 176c0,4 -4,8 -8,8l-176 0c-2,0 -4,-1 -6,-2\"/>\n  <text x=\"59\" y=\"153\"  fill=\"#E6E6E6\" font-weight=\"normal\" font-size=\"149.999\" font-family=\"Arial\">2</text>\n </g>\n</svg>\n</md-button>\n","storeOutMessages":false,"fwdInMessages":false,"x":266.5,"y":361.0000305175781,"wires":[["3663688b.a3fef8"]]},{"id":"dd8aafe2.7f5d8","type":"ui_template","z":"7edf106f.cb744","group":"69e41928.97f8e8","name":"Key 8","order":0,"width":"2","height":"2","format":"<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#333333\" ng-click=\"send({payload: '8' })\"> \n\n\n<svg width=\"105px\" height=\"105px\" version=\"1.1\" viewBox=\"0 0 200 200\">\n\n <g id=\"Keypad\">\n  <rect fill=\"#4D4D4D\" width=\"200\" height=\"200\" rx=\"12\" ry=\"12\"/>\n  <path fill=\"none\" stroke=\"#B3B3B3\" stroke-width=\"7.99957\" d=\"M6 194c-1,-1 -2,-3 -2,-6l0 -176c0,-4 4,-8 8,-8l176 0c2,0 4,1 6,2\"/>\n  <path fill=\"none\" stroke=\"#1A1A1A\" stroke-width=\"7.99957\" d=\"M194 6c1,1 2,3 2,6l0 176c0,4 -4,8 -8,8l-176 0c-2,0 -4,-1 -6,-2\"/>\n  <text x=\"59\" y=\"153\"  fill=\"#E6E6E6\" font-weight=\"normal\" font-size=\"149.999\" font-family=\"Arial\">8</text>\n </g>\n</svg>\n</md-button>\n","storeOutMessages":false,"fwdInMessages":false,"x":267.5,"y":471.0000228881836,"wires":[["3663688b.a3fef8"]]},{"id":"820d3f6c.90e2a","type":"ui_template","z":"7edf106f.cb744","group":"69e41928.97f8e8","name":"Key 9","order":0,"width":"2","height":"2","format":"<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#333333\" ng-click=\"send({payload: '9' })\"> \n\n\n<svg width=\"105px\" height=\"105px\" version=\"1.1\" viewBox=\"0 0 200 200\">\n\n <g id=\"Keypad\">\n  <rect fill=\"#4D4D4D\" width=\"200\" height=\"200\" rx=\"12\" ry=\"12\"/>\n  <path fill=\"none\" stroke=\"#B3B3B3\" stroke-width=\"7.99957\" d=\"M6 194c-1,-1 -2,-3 -2,-6l0 -176c0,-4 4,-8 8,-8l176 0c2,0 4,1 6,2\"/>\n  <path fill=\"none\" stroke=\"#1A1A1A\" stroke-width=\"7.99957\" d=\"M194 6c1,1 2,3 2,6l0 176c0,4 -4,8 -8,8l-176 0c-2,0 -4,-1 -6,-2\"/>\n  <text x=\"59\" y=\"153\"  fill=\"#E6E6E6\" font-weight=\"normal\" font-size=\"149.999\" font-family=\"Arial\">9</text>\n </g>\n</svg>\n</md-button>\n","storeOutMessages":false,"fwdInMessages":false,"x":398.5,"y":476.0000228881836,"wires":[["3663688b.a3fef8"]]},{"id":"c43697b8.c29b58","type":"ui_template","z":"7edf106f.cb744","group":"69e41928.97f8e8","name":"Key *","order":0,"width":"2","height":"2","format":"<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#333333\" ng-click=\"send({payload: 'Reset' })\"> \n\n\n<svg width=\"105px\" height=\"105px\" version=\"1.1\" viewBox=\"0 0 200 200\">\n\n <g id=\"Keypad\">\n  <rect fill=\"#4D4D4D\" width=\"200\" height=\"200\" rx=\"12\" ry=\"12\"/>\n  <path fill=\"none\" stroke=\"#B3B3B3\" stroke-width=\"7.99957\" d=\"M6 194c-1,-1 -2,-3 -2,-6l0 -176c0,-4 4,-8 8,-8l176 0c2,0 4,1 6,2\"/>\n  <path fill=\"none\" stroke=\"#1A1A1A\" stroke-width=\"7.99957\" d=\"M194 6c1,1 2,3 2,6l0 176c0,4 -4,8 -8,8l-176 0c-2,0 -4,-1 -6,-2\"/>\n  <text x=\"42\" y=\"265\"  fill=\"#E6E6E6\" font-weight=\"normal\" font-size=\"300\" font-family=\"Arial\">*</text>\n </g>\n</svg>\n</md-button>\n","storeOutMessages":false,"fwdInMessages":false,"x":121.5,"y":531.0000839233398,"wires":[["3663688b.a3fef8"]]},{"id":"a6e6ed41.019b6","type":"ui_template","z":"7edf106f.cb744","group":"69e41928.97f8e8","name":"Key 0","order":0,"width":"2","height":"2","format":"<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#333333\" ng-click=\"send({payload: '0' })\"> \n\n\n<svg width=\"105px\" height=\"105px\" version=\"1.1\" viewBox=\"0 0 200 200\">\n\n <g id=\"Keypad\">\n  <rect fill=\"#4D4D4D\" width=\"200\" height=\"200\" rx=\"12\" ry=\"12\"/>\n  <path fill=\"none\" stroke=\"#B3B3B3\" stroke-width=\"7.99957\" d=\"M6 194c-1,-1 -2,-3 -2,-6l0 -176c0,-4 4,-8 8,-8l176 0c2,0 4,1 6,2\"/>\n  <path fill=\"none\" stroke=\"#1A1A1A\" stroke-width=\"7.99957\" d=\"M194 6c1,1 2,3 2,6l0 176c0,4 -4,8 -8,8l-176 0c-2,0 -4,-1 -6,-2\"/>\n  <text x=\"59\" y=\"153\"  fill=\"#E6E6E6\" font-weight=\"normal\" font-size=\"149.999\" font-family=\"Arial\">0</text>\n </g>\n</svg>\n</md-button>\n","storeOutMessages":false,"fwdInMessages":false,"x":267.5,"y":531.0000839233398,"wires":[["3663688b.a3fef8"]]},{"id":"ccdf1bd8.9bcb48","type":"ui_template","z":"7edf106f.cb744","group":"69e41928.97f8e8","name":"Key #","order":0,"width":"2","height":"2","format":"<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#333333\" ng-click=\"send({payload: 'Enter' })\"> \n\n\n<svg width=\"105px\" height=\"105px\" version=\"1.1\" viewBox=\"0 0 200 200\">\n\n <g id=\"Keypad\">\n  <rect fill=\"#4D4D4D\" width=\"200\" height=\"200\" rx=\"12\" ry=\"12\"/>\n  <path fill=\"none\" stroke=\"#B3B3B3\" stroke-width=\"7.99957\" d=\"M6 194c-1,-1 -2,-3 -2,-6l0 -176c0,-4 4,-8 8,-8l176 0c2,0 4,1 6,2\"/>\n  <path fill=\"none\" stroke=\"#1A1A1A\" stroke-width=\"7.99957\" d=\"M194 6c1,1 2,3 2,6l0 176c0,4 -4,8 -8,8l-176 0c-2,0 -4,-1 -6,-2\"/>\n  <text x=\"59\" y=\"153\"  fill=\"#E6E6E6\" font-weight=\"normal\" font-size=\"149.999\" font-family=\"Arial\">#</text>\n </g>\n</svg>\n</md-button>\n","storeOutMessages":true,"fwdInMessages":true,"x":399.5,"y":533.0000839233398,"wires":[["3663688b.a3fef8"]]},{"id":"ea8d5d92.5db3c","type":"ui_template","z":"7edf106f.cb744","group":"795fee6b.d6ead","name":"E-Stop","order":0,"width":"4","height":"4","format":"<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#333333\" ng-click=\"send({payload: msg.payload })\"> \n\n\n<svg xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" width=\"210px\" height=\"210px\" version=\"1.1\" shape-rendering=\"geometricPrecision\" text-rendering=\"geometricPrecision\" image-rendering=\"optimizeQuality\" fill-rule=\"evenodd\" clip-rule=\"evenodd\"\nviewBox=\"0 0 304 304\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <g id=\"Layer_x0020_1\">\n  <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? 'red' : '#B80000'}\">\n    <circle  stroke=\"#A10000\" stroke-width=\"2.08345\" cx=\"152\" cy=\"152\" r=\"150\"/>\n  </g>\n  <path fill=\"#A10000\" stroke=\"#A10000\" stroke-width=\"4.00037\" d=\"M152 2c83,0 150,67 150,150 0,83 -67,150 -150,150 -83,0 -150,-67 -150,-150 0,-83 67,-150 150,-150zm0 28c67,0 122,55 122,122 0,67 -55,122 -122,122 -67,0 -122,-55 -122,-122 0,-67 55,-122 122,-122z\"/>\n  <path fill=\"#B80000\" stroke=\"#A10000\" stroke-width=\"2.08345\" d=\"M152 2c83,0 150,67 150,150 0,83 -67,150 -150,150 -83,0 -150,-67 -150,-150 0,-83 67,-150 150,-150zm0 13c76,0 137,61 137,137 0,76 -61,137 -137,137 -76,0 -137,-61 -137,-137 0,-76 61,-137 137,-137z\"/>\n\n  <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#FEFEFE' : '000'}\">\n    <text x=\"150\" y=\"139\"  style=\"text-anchor:middle\" font-weight=\"bold\" font-size=\"99.9999\" font-family=\"Arial\">E</text>\n  </g>\n  <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#FEFEFE' : '000'}\">\n    <text x=\"155\" y=\"219\"  style=\"text-anchor:middle\" font-weight=\"bold\" font-size=\"66.6658\" font-family=\"Arial\">STOP</text>\n  </g>\n \n  <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? 'none' : '#FEFEFE'}\">\n    <text x=\"150\" y=\"125\"  style=\"text-anchor:middle\" font-weight=\"bold\" font-size=\"50.0\" font-family=\"Arial\">TAP TO</text>\n  </g>\n  <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? 'none' : '#FEFEFE'}\">\n    <text x=\"152\" y=\"215\"  style=\"text-anchor:middle\" font-weight=\"bold\" font-size=\"50.0\" font-family=\"Arial\">RESET</text>\n  </g>\n\n\n\n </g>\n</svg>\n</md-button>\n","storeOutMessages":false,"fwdInMessages":false,"x":204.5,"y":172.00000762939453,"wires":[["ee91aaac.af0148"]]},{"id":"ee91aaac.af0148","type":"function","z":"7edf106f.cb744","name":"","func":"\nif (msg.payload === false ){\n    msg.payload = true;\n}\nelse { msg.payload = false;\n}\nreturn msg;\n","outputs":1,"noerr":0,"x":203.5,"y":103.00000762939453,"wires":[["ea8d5d92.5db3c"]]},{"id":"6752438b.d7c98c","type":"ui_template","z":"7edf106f.cb744","group":"795fee6b.d6ead","name":"Push-Red","order":0,"width":"2","height":"2","format":"<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#333333\" ng-click=\"send({payload: msg.payload })\"> \n\n<svg width=\"105px\" height=\"105px\" version=\"1.1\" viewBox=\"0 0 200 200\">\n <g id=\"Button_Push\">\n  <rect fill=\"#333333\" width=\"200\" height=\"200\"/>\n  <circle fill=\"#999\" cx=\"100\" cy=\"100\" r=\"100\"/>\n  <circle fill=\"#666\" cx=\"100\" cy=\"100\" r=\"97\"/>\n  <circle fill=\"red\" stroke=\"#4D4D4D\" stroke-width=\"2.99999\" cx=\"100\" cy=\"100\" r=\"87\"/>\n  <path fill=\"#B3B3B3\" fill-opacity=\"0.501961\" d=\"M100 26c41,0 74,33 74,74 0,41 -33,74 -74,74 -41,0 -74,-33 -74,-74 0,-41 33,-74 74,-74zm0 15c33,0 59,26 59,59 0,33 -26,59 -59,59 -33,0 -59,-26 -59,-59 0,-33 26,-59 59,-59z\"/>\n  <path fill=\"none\" fill-opacity=\"0.501961\" d=\"M100 58c23,0 42,19 42,42 0,23 -19,42 -42,42 -23,0 -42,-19 -42,-42 0,-23 19,-42 42,-42zm0 8c18,0 33,15 33,33 0,18 -15,33 -33,33 -18,0 -33,-15 -33,-33 0,-18 15,-33 33,-33z\"/>\n  <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? 'none' : '#1A1A1A'}\">\n    <path fill-opacity=\"0.501961\" stroke=\"#4D4D4D\" stroke-width=\"2.99999\" stroke-opacity=\"0.501961\" d=\"M100 13c48,0 87,39 87,87 0,48 -39,87 -87,87 -48,0 -87,-39 -87,-87 0,-48 39,-87 87,-87z\"/>\n  </g>\n </g>\n</svg>\n\n</md-button>\n","storeOutMessages":false,"fwdInMessages":false,"x":487.5,"y":107.66666412353516,"wires":[["997a9799.612938"]]},{"id":"997a9799.612938","type":"function","z":"7edf106f.cb744","name":"","func":"\nif (msg.payload === false ){\n    msg.payload = true;\n}\nelse { msg.payload = false;\n}\nreturn msg;\n","outputs":1,"noerr":0,"x":479.5,"y":51.333335876464844,"wires":[["6752438b.d7c98c"]]},{"id":"c04e8f57.f84a9","type":"ui_template","z":"7edf106f.cb744","group":"795fee6b.d6ead","name":"Push-Yellow","order":0,"width":"2","height":"2","format":"<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#333333\" ng-click=\"send({payload: msg.payload })\"> \n\n<svg width=\"105px\" height=\"105px\" version=\"1.1\" viewBox=\"0 0 200 200\">\n <g id=\"Button_Push\">\n  <rect fill=\"#333333\" width=\"200\" height=\"200\"/>\n  <circle fill=\"#999\" cx=\"100\" cy=\"100\" r=\"100\"/>\n  <circle fill=\"#666\" cx=\"100\" cy=\"100\" r=\"97\"/>\n  <circle fill=\"yellow\" stroke=\"#4D4D4D\" stroke-width=\"2.99999\" cx=\"100\" cy=\"100\" r=\"87\"/>\n  <path fill=\"#B3B3B3\" fill-opacity=\"0.501961\" d=\"M100 26c41,0 74,33 74,74 0,41 -33,74 -74,74 -41,0 -74,-33 -74,-74 0,-41 33,-74 74,-74zm0 15c33,0 59,26 59,59 0,33 -26,59 -59,59 -33,0 -59,-26 -59,-59 0,-33 26,-59 59,-59z\"/>\n  <path fill=\"none\" fill-opacity=\"0.501961\" d=\"M100 58c23,0 42,19 42,42 0,23 -19,42 -42,42 -23,0 -42,-19 -42,-42 0,-23 19,-42 42,-42zm0 8c18,0 33,15 33,33 0,18 -15,33 -33,33 -18,0 -33,-15 -33,-33 0,-18 15,-33 33,-33z\"/>\n  <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? 'none' : '#1A1A1A'}\">\n    <path fill-opacity=\"0.501961\" stroke=\"#4D4D4D\" stroke-width=\"2.99999\" stroke-opacity=\"0.501961\" d=\"M100 13c48,0 87,39 87,87 0,48 -39,87 -87,87 -48,0 -87,-39 -87,-87 0,-48 39,-87 87,-87z\"/>\n  </g>\n </g>\n</svg>\n\n</md-button>\n","storeOutMessages":false,"fwdInMessages":false,"x":693.6665954589844,"y":112.66666412353516,"wires":[["11243426.dc972c"]]},{"id":"11243426.dc972c","type":"function","z":"7edf106f.cb744","name":"","func":"\nif (msg.payload === false ){\n    msg.payload = true;\n}\nelse { msg.payload = false;\n}\nreturn msg;\n","outputs":1,"noerr":0,"x":675.6665954589844,"y":56.333335876464844,"wires":[["c04e8f57.f84a9"]]},{"id":"72196f36.507aa","type":"ui_template","z":"7edf106f.cb744","group":"795fee6b.d6ead","name":"Push-Green","order":0,"width":"2","height":"2","format":"<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#333333\" ng-click=\"send({payload: msg.payload })\"> \n\n<svg width=\"105px\" height=\"105px\" version=\"1.1\" viewBox=\"0 0 200 200\">\n <g id=\"Button_Push\">\n  <rect fill=\"#333333\" width=\"200\" height=\"200\"/>\n  <circle fill=\"#999\" cx=\"100\" cy=\"100\" r=\"100\"/>\n  <circle fill=\"#666\" cx=\"100\" cy=\"100\" r=\"97\"/>\n  <circle fill=\"green\" stroke=\"#4D4D4D\" stroke-width=\"2.99999\" cx=\"100\" cy=\"100\" r=\"87\"/>\n  <path fill=\"#B3B3B3\" fill-opacity=\"0.501961\" d=\"M100 26c41,0 74,33 74,74 0,41 -33,74 -74,74 -41,0 -74,-33 -74,-74 0,-41 33,-74 74,-74zm0 15c33,0 59,26 59,59 0,33 -26,59 -59,59 -33,0 -59,-26 -59,-59 0,-33 26,-59 59,-59z\"/>\n  <path fill=\"none\" fill-opacity=\"0.501961\" d=\"M100 58c23,0 42,19 42,42 0,23 -19,42 -42,42 -23,0 -42,-19 -42,-42 0,-23 19,-42 42,-42zm0 8c18,0 33,15 33,33 0,18 -15,33 -33,33 -18,0 -33,-15 -33,-33 0,-18 15,-33 33,-33z\"/>\n  <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? 'none' : '#1A1A1A'}\">\n    <path fill-opacity=\"0.501961\" stroke=\"#4D4D4D\" stroke-width=\"2.99999\" stroke-opacity=\"0.501961\" d=\"M100 13c48,0 87,39 87,87 0,48 -39,87 -87,87 -48,0 -87,-39 -87,-87 0,-48 39,-87 87,-87z\"/>\n  </g>\n </g>\n</svg>\n\n</md-button>\n","storeOutMessages":false,"fwdInMessages":false,"x":498.6665954589844,"y":219.66665649414062,"wires":[["a8f28b63.db0ec8"]]},{"id":"a8f28b63.db0ec8","type":"function","z":"7edf106f.cb744","name":"","func":"\nif (msg.payload === false ){\n    msg.payload = true;\n}\nelse { msg.payload = false;\n}\nreturn msg;\n","outputs":1,"noerr":0,"x":480.6665954589844,"y":163.3333282470703,"wires":[["72196f36.507aa"]]},{"id":"4c925a2f.e9ba44","type":"ui_template","z":"7edf106f.cb744","group":"795fee6b.d6ead","name":"Push-Blue","order":0,"width":"2","height":"2","format":"<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#333333\" ng-click=\"send({payload: msg.payload })\"> \n\n<svg width=\"105px\" height=\"105px\" version=\"1.1\" viewBox=\"0 0 200 200\">\n <g id=\"Button_Push\">\n  <rect fill=\"#333333\" width=\"200\" height=\"200\"/>\n  <circle fill=\"#999\" cx=\"100\" cy=\"100\" r=\"100\"/>\n  <circle fill=\"#666\" cx=\"100\" cy=\"100\" r=\"97\"/>\n  <circle fill=\"blue\" stroke=\"#4D4D4D\" stroke-width=\"2.99999\" cx=\"100\" cy=\"100\" r=\"87\"/>\n  <path fill=\"#B3B3B3\" fill-opacity=\"0.501961\" d=\"M100 26c41,0 74,33 74,74 0,41 -33,74 -74,74 -41,0 -74,-33 -74,-74 0,-41 33,-74 74,-74zm0 15c33,0 59,26 59,59 0,33 -26,59 -59,59 -33,0 -59,-26 -59,-59 0,-33 26,-59 59,-59z\"/>\n  <path fill=\"none\" fill-opacity=\"0.501961\" d=\"M100 58c23,0 42,19 42,42 0,23 -19,42 -42,42 -23,0 -42,-19 -42,-42 0,-23 19,-42 42,-42zm0 8c18,0 33,15 33,33 0,18 -15,33 -33,33 -18,0 -33,-15 -33,-33 0,-18 15,-33 33,-33z\"/>\n  <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? 'none' : '#1A1A1A'}\">\n    <path fill-opacity=\"0.501961\" stroke=\"#4D4D4D\" stroke-width=\"2.99999\" stroke-opacity=\"0.501961\" d=\"M100 13c48,0 87,39 87,87 0,48 -39,87 -87,87 -48,0 -87,-39 -87,-87 0,-48 39,-87 87,-87z\"/>\n  </g>\n </g>\n</svg>\n\n</md-button>\n","storeOutMessages":false,"fwdInMessages":false,"x":683.6665954589844,"y":222.66665649414062,"wires":[["831fda46.743bc8"]]},{"id":"831fda46.743bc8","type":"function","z":"7edf106f.cb744","name":"","func":"\nif (msg.payload === false ){\n    msg.payload = true;\n}\nelse { msg.payload = false;\n}\nreturn msg;\n","outputs":1,"noerr":0,"x":665.6665954589844,"y":166.3333282470703,"wires":[["4c925a2f.e9ba44"]]},{"id":"7948bb88.8b0394","type":"ui_template","z":"7edf106f.cb744","group":"795fee6b.d6ead","name":"Push-Garage","order":0,"width":"8","height":"2","format":"<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#333333\" ng-click=\"send({payload: msg.payload })\"> \n\n\n<svg  width=\"360px\" height=\"90px\" version=\"1.1\" viewBox=\"0 0 800 200\">\n <g id=\"Button_Long\">\n  <rect fill=\"#333333\" width=\"800\" height=\"200\"/>\n  <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#E6E6E6' : '#333'}\">\n    <rect width=\"800\" height=\"200\" rx=\"100\" ry=\"100\"/>\n  </g>\n  <rect fill=\"#666666\" x=\"11\" y=\"10\" width=\"778\" height=\"180\" rx=\"90\" ry=\"90\"/>\n  <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#E6E6E6' : '#1A1A1A'}\">\n    <text x=\"400\" y=\"125\" style=\"text-anchor:middle\"  font-weight=\"bold\" font-size=\"75\" font-family=\"Arial\">GARAGE DOOR</text>\n  </g>\n </g>\n</svg>\n\n\n</md-button>\n","storeOutMessages":false,"fwdInMessages":false,"x":953.6665344238281,"y":113.66664123535156,"wires":[["e384341e.7b7458"]]},{"id":"e384341e.7b7458","type":"function","z":"7edf106f.cb744","name":"","func":"\nif (msg.payload === false ){\n    msg.payload = true;\n}\nelse { msg.payload = false;\n}\nreturn msg;\n","outputs":1,"noerr":0,"x":935.6665344238281,"y":57.33331298828125,"wires":[["7948bb88.8b0394"]]},{"id":"1e153581.e53e3a","type":"ui_template","z":"7edf106f.cb744","group":"795fee6b.d6ead","name":"Push-Sidewalk","order":0,"width":"8","height":"2","format":"<md-button class=\"vibrate filled touched bigfont rounded\" style=\"background-color:#333333\" ng-click=\"send({payload: msg.payload })\"> \n\n\n<svg  width=\"360px\" height=\"90px\" version=\"1.1\" viewBox=\"0 0 800 200\">\n <g id=\"Button_Long\">\n  <rect fill=\"#333333\" width=\"800\" height=\"200\"/>\n  <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#E6E6E6' : '#333'}\">\n    <rect width=\"800\" height=\"200\" rx=\"100\" ry=\"100\"/>\n  </g>\n  <rect fill=\"#666666\" x=\"11\" y=\"10\" width=\"778\" height=\"180\" rx=\"90\" ry=\"90\"/>\n  <g ng-style=\"{fill: (msg.payload || 0) % 2 === 0 ? '#E6E6E6' : '#1A1A1A'}\">\n    <text x=\"400\" y=\"125\"  style=\"text-anchor:middle\" font-weight=\"bold\" font-size=\"75\" font-family=\"Arial\">SIDEWALK LIGHTS</text>\n  </g>\n </g>\n</svg>\n\n\n</md-button>\n","storeOutMessages":false,"fwdInMessages":false,"x":1184.6665344238281,"y":116.66664123535156,"wires":[["fddc8db.8792c7"]]},{"id":"fddc8db.8792c7","type":"function","z":"7edf106f.cb744","name":"","func":"\nif (msg.payload === false ){\n    msg.payload = true;\n}\nelse { msg.payload = false;\n}\nreturn msg;\n","outputs":1,"noerr":0,"x":1156.6665344238281,"y":60.33331298828125,"wires":[["1e153581.e53e3a"]]},{"id":"db1d4141.a9cae","type":"ui_text","z":"7edf106f.cb744","group":"69e41928.97f8e8","order":0,"width":0,"height":0,"name":"Number","label":"Number:","format":"{{msg.payload}}","layout":"row-spread","x":622.4999694824219,"y":522.6667175292969,"wires":[]},{"id":"3663688b.a3fef8","type":"function","z":"7edf106f.cb744","name":"","func":"\n\n\nreturn msg;\n\n","outputs":1,"noerr":0,"x":610.4999694824219,"y":437.3333740234375,"wires":[["db1d4141.a9cae","db67a18e.466ee"]]},{"id":"db67a18e.466ee","type":"debug","z":"7edf106f.cb744","name":"","active":true,"console":"false","complete":"false","x":605.4999694824219,"y":317.99999237060547,"wires":[]},{"id":"63826f2f.4db18","type":"ui_group","z":"","name":"Group 2","tab":"e4ed500e.54dbe","order":3,"disp":true,"width":"6"},{"id":"6641e44d.8eb86c","type":"ui_group","z":"","name":"Starter","tab":"e4ed500e.54dbe","order":4,"disp":true,"width":"2"},{"id":"fa5f5d48.d1a27","type":"ui_group","z":"","name":"Group 1","tab":"e4ed500e.54dbe","order":2,"disp":true,"width":"2"},{"id":"69e41928.97f8e8","type":"ui_group","z":"","name":"Keypad","tab":"e4ed500e.54dbe","order":5,"disp":true,"width":"6"},{"id":"795fee6b.d6ead","type":"ui_group","z":"","name":"Control Panel","tab":"e4ed500e.54dbe","order":1,"disp":true,"width":"8"},{"id":"e4ed500e.54dbe","type":"ui_tab","z":"","name":"Button Panel","icon":"dashboard"}]