But why cannot a push-button be added to the palette's dashboard as an additional widget? I'd suggest this to the developer.
Did you get the label to work?
I don't understant this question. what do you mean by a push button and what would make it different from the ui-button?
BTW - if the label will always contain the same text, you can just put that text in the ui-button's label configuration
I meat to add a push-button alread preset with some variables like timing ON to OFF to ON in the ui-dashboard just like the switch widget.
Will go back to my issue in an hour or so. Need to feed my burnt out neurons. Thanks for helping out.
It is not so hard to make momentary button. Even with the look and feel similar to the dashboard standard buttons.
There is many different examples shared but one more does not harm anybody
[
{
"id": "9a19901ff0e3f29d",
"type": "ui_template",
"z": "e490bfdba10fb48a",
"group": "d1ae1ccfedfa70c5",
"name": "momentary button 1/0",
"order": 7,
"width": "2",
"height": "1",
"format": "<div class=\"momentary-button\" id=\"{{'momentary_'+$id}}\">\n <md-button id=\"{{'m_button_'+$id}}\"></md-button>\n</div>\n\n<script>\n (function(scope) {\n const push = 1\n const release = 0\n const pushLabel = \"<i class='fa fa-2x fa-user'></i>\"\n const releaseLabel = \"<i class='fa fa-2x fa-home'></i>\"\n function init(){\n $(\"#m_button_\"+scope.$id).html(releaseLabel);\n $(\"#momentary_\"+scope.$id).on('touchstart mousedown', function(e) {\n e.preventDefault();\n $(\"#m_button_\"+scope.$id).html(pushLabel)\n scope.send({\"payload\": push});\n });\n\n $(\"#momentary_\"+scope.$id).on('touchend mouseup', function(e) {\n e.preventDefault();\n $(\"#m_button_\"+scope.$id).html(releaseLabel)\n scope.send({\"payload\": release});\n });\n }\n\n if($(\"#momentary_\"+scope.$id).is(\"div\")){\n init()\n } \n else{\n setTimeout(init,200)\n }\n \n})(scope);\n</script>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 270,
"y": 1170,
"wires": [
[
"c9964afd7d132807"
]
]
},
{
"id": "c9964afd7d132807",
"type": "ui_text",
"z": "e490bfdba10fb48a",
"group": "d1ae1ccfedfa70c5",
"order": 8,
"width": 0,
"height": 0,
"name": "",
"label": "Momentary button activity: ",
"format": "{{msg.payload}}",
"layout": "row-spread",
"className": "",
"x": 540,
"y": 1140,
"wires": []
},
{
"id": "bf78ce5db8cd46c8",
"type": "ui_template",
"z": "e490bfdba10fb48a",
"group": "d1ae1ccfedfa70c5",
"name": "momentary button ON/OFF",
"order": 7,
"width": "2",
"height": "1",
"format": "<div class=\"momentary-button\" id=\"{{'momentary_'+$id}}\">\n <md-button id=\"{{'m_button_'+$id}}\"></md-button>\n</div>\n\n<script>\n \n (function(scope) {\n const push = \"ON\"\n const release = \"OFF\"\n const pushLabel = \"ON\"\n const releaseLabel = \"OFF\"\n function init(){\n $(\"#m_button_\"+scope.$id).html(releaseLabel);\n $(\"#momentary_\"+scope.$id).on('touchstart mousedown', function(e) {\n e.preventDefault();\n $(\"#m_button_\"+scope.$id).html(pushLabel)\n scope.send({\"payload\": push});\n });\n\n $(\"#momentary_\"+scope.$id).on('touchend mouseup', function(e) {\n e.preventDefault();\n $(\"#m_button_\"+scope.$id).html(releaseLabel)\n scope.send({\"payload\": release});\n });\n }\n\n if($(\"#momentary_\"+scope.$id).is(\"div\")){\n init()\n } \n else{\n setTimeout(init,200)\n }\n \n})(scope);\n</script>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 250,
"y": 1120,
"wires": [
[
"c9964afd7d132807"
]
]
},
{
"id": "e7731dddbe92fbf0",
"type": "ui_template",
"z": "e490bfdba10fb48a",
"group": "d1ae1ccfedfa70c5",
"name": "CSS",
"order": 10,
"width": 0,
"height": 0,
"format": "<style id=\"custom-styles\">\n .momentary-button > button{\n min-width:100% !important;\n }\n</style>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "global",
"className": "",
"x": 300,
"y": 1070,
"wires": [
[]
]
},
{
"id": "d1ae1ccfedfa70c5",
"type": "ui_group",
"name": "Default",
"tab": "b15d581341d0093f",
"order": 1,
"disp": false,
"width": "8",
"collapse": false,
"className": ""
},
{
"id": "b15d581341d0093f",
"type": "ui_tab",
"name": "Home",
"icon": "dashboard",
"order": 1,
"disabled": false,
"hidden": false
}
]
1 Like
FYI, While testing your flow, I found a weird edge case (which I will report) that if the inject node does not contain a msg.payload, and the ui-button node has If msg arrives on input, emulate a button click: checked, the ui-button will NOT return a msg. But once the ui-button receives a msg with a msg.payload, then the msgs from the inject without the msg.payload will work.
1 Like
I'm hard headed and I don't stop till I understand what I'm doing wrong.
So, I cleaned up my code and now, seems to work as designed.
Thank you all.
[
{
"id": "a8fd423c.f1f4f",
"type": "rpi-gpio out",
"z": "d2d5d2de2e29a4b5",
"name": "relayS",
"pin": "33",
"set": "",
"level": "0",
"freq": "",
"out": "out",
"x": 470,
"y": 80,
"wires": []
},
{
"id": "7f19db02.fc5264",
"type": "ui_button",
"z": "d2d5d2de2e29a4b5",
"name": "btnS",
"group": "b7650ad6.bcc6",
"order": 1,
"width": "3",
"height": "1",
"passthru": false,
"label": "{{msg.label}}",
"tooltip": "",
"color": "white",
"bgcolor": "{{msg.background}}",
"icon": "local_laundry_service",
"payload": "X",
"payloadType": "str",
"topic": "",
"x": 290,
"y": 60,
"wires": [
[
"4bed650f.761c1c"
]
]
},
{
"id": "4bed650f.761c1c",
"type": "function",
"z": "d2d5d2de2e29a4b5",
"name": "FlipFlop",
"func": "if (msg.payload == \"X\")\n{\n msg.payload = \"0\";\n msg.label = \"Activado\";\n msg.background = \"red\";\n}\nelse\n{\n msg.payload = \"1\";\n msg.label = \"Lavadora S\";\n msg.background = \"#0094ce\";\n}\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 280,
"y": 140,
"wires": [
[
"7f19db02.fc5264",
"b5e515d.94727e8",
"706403a615fa0be1"
]
]
},
{
"id": "b5e515d.94727e8",
"type": "switch",
"z": "d2d5d2de2e29a4b5",
"name": "",
"property": "payload",
"propertyType": "msg",
"rules": [
{
"t": "eq",
"v": "0",
"vt": "num"
}
],
"checkall": "true",
"repair": false,
"outputs": 1,
"x": 470,
"y": 180,
"wires": [
[
"34f617a0.51a2e8"
]
]
},
{
"id": "34f617a0.51a2e8",
"type": "trigger",
"z": "d2d5d2de2e29a4b5",
"name": "",
"op1": "",
"op2": "Z",
"op1type": "nul",
"op2type": "str",
"duration": "1",
"extend": false,
"overrideDelay": false,
"units": "s",
"reset": "",
"bytopic": "all",
"topic": "topic",
"outputs": 1,
"x": 280,
"y": 240,
"wires": [
[
"4bed650f.761c1c"
]
]
},
{
"id": "706403a615fa0be1",
"type": "debug",
"z": "d2d5d2de2e29a4b5",
"name": "",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"statusVal": "",
"statusType": "auto",
"x": 490,
"y": 140,
"wires": []
},
{
"id": "5ba4a9384c0d9ec7",
"type": "inject",
"z": "d2d5d2de2e29a4b5",
"name": "Set at start",
"props": [
{
"p": "payload"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "{{label}}",
"payloadType": "msg",
"x": 100,
"y": 60,
"wires": [
[
"7f19db02.fc5264"
]
]
},
{
"id": "b7650ad6.bcc6",
"type": "ui_group",
"name": "Control",
"tab": "ef5d65ce.36e6b",
"order": 1,
"disp": true,
"width": "6",
"collapse": true
},
{
"id": "ef5d65ce.36e6b",
"type": "ui_tab",
"name": "Washup",
"icon": "dashboard",
"disabled": false,
"hidden": false
}
]
1 Like
easy for you to say 
Still working on my first coffee, so unsure if I read enough to fully understand your desired action...
But assuming your relay is active LOW, and you want to start HIGH with button displaying "Lavadora S" in blue, Start with the inject set as this:
I may not have this "wired" totally correct, but seems to work.
[{"id":"6d77caf313345d43","type":"rpi-gpio out","z":"e77af6359c6ce6d6","name":"relayS","pin":"12","set":"","level":"0","freq":"","out":"out","x":1010,"y":320,"wires":[]},{"id":"19d49de0ca33701d","type":"ui_button","z":"e77af6359c6ce6d6","name":"btnS","group":"23a52a846f6fc199","order":1,"width":"3","height":"1","passthru":false,"label":"{{msg.label}}","tooltip":"","color":"white","bgcolor":"{{msg.background}}","className":"","icon":"local_laundry_service","payload":"X","payloadType":"str","topic":"","topicType":"str","x":810,"y":200,"wires":[["6abeceadcf99551e"]]},{"id":"6abeceadcf99551e","type":"function","z":"e77af6359c6ce6d6","name":"FlipFlop","func":"if (msg.payload == \"X\")\n{\n msg.payload = \"0\";\n msg.label = \"Activado\";\n msg.background = \"red\";\n}\nelse\n{\n msg.payload = \"1\";\n msg.label = \"Lavadora S\";\n msg.background = \"#0094ce\";\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":820,"y":260,"wires":[["19d49de0ca33701d","d0b0372762937f0b","2e32ec5416ec4942","6d77caf313345d43"]]},{"id":"d0b0372762937f0b","type":"switch","z":"e77af6359c6ce6d6","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"0","vt":"num"}],"checkall":"true","repair":false,"outputs":1,"x":810,"y":320,"wires":[["682ed3b1c6b529ef"]]},{"id":"682ed3b1c6b529ef","type":"trigger","z":"e77af6359c6ce6d6","name":"","op1":"","op2":"Z","op1type":"nul","op2type":"str","duration":"1","extend":false,"overrideDelay":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":820,"y":380,"wires":[["6abeceadcf99551e","6d77caf313345d43"]]},{"id":"2e32ec5416ec4942","type":"debug","z":"e77af6359c6ce6d6","name":"","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":1030,"y":260,"wires":[]},{"id":"9b48879ca32afe69","type":"inject","z":"e77af6359c6ce6d6","name":"Set at start","props":[{"p":"payload"},{"p":"label","v":"Lavadora S","vt":"str"},{"p":"background","v":"#0094ce","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"1","payloadType":"num","x":610,"y":200,"wires":[["19d49de0ca33701d"]]},{"id":"23a52a846f6fc199","type":"ui_group","name":"Default","tab":"0a57de3958fc9319","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"0a57de3958fc9319","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
Thank you. I basically did the same. Nevertheless, your initial tip was the clue I needed. Thank you.
Ya, it took me awhile to figure out that I can just type in what I needed after the msg. 
Just to add if its a dropdown item that you want to refresh to the selected value a persist node to the in and out of the button and it will reload the selected value at start up. also can be used to refresh data from anything ive used it to keep chart data after a restart.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
