Going on to the next step, implementing the disable and enable function for the button.
This is the code.
Alas all show, nothing actually working at the enabled level.
[{"id":"60f5af8a.3dee6","type":"ui_template","z":"8bb4de19.f72c88","group":"d3bcf885.d668a","name":"7","order":14,"width":1,"height":1,"format":"<style>\n.button {/*button styles*/}\n.B{ color: red;}\n.A{ color: lime;}\n.inactive{color:grey};\n</style>\n\n<button class=\"baseline {{msg.payload}} button {{msg.state}}\" ng-mousedown=\"send({payload: 'Down'})\" \nng-mouseup=\"send({payload: 'Up'})\">Press</button>\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":390,"y":1570,"wires":[["81920130.e2185","5c095424.5ceb14","9f7bb582.61b748"]]},{"id":"81920130.e2185","type":"trigger","z":"8bb4de19.f72c88","op1":"Down","op2":"0","op1type":"str","op2type":"str","duration":"-350","extend":false,"units":"ms","reset":"Up","bytopic":"all","name":"Repeat","x":550,"y":1620,"wires":[["91e50b05.3856b8"]]},{"id":"5c095424.5ceb14","type":"switch","z":"8bb4de19.f72c88","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"Down","vt":"str"},{"t":"eq","v":"Up","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":540,"y":1660,"wires":[[],["91e50b05.3856b8"]]},{"id":"9f7bb582.61b748","type":"debug","z":"8bb4de19.f72c88","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":560,"y":1570,"wires":[]},{"id":"91e50b05.3856b8","type":"function","z":"8bb4de19.f72c88","name":"toggle","func":"let msg1 = {};\nlet y = context.get(\"pressed\") || 0;\nvar x = context.get(\"counter\") || 0;\nif (msg.payload == \"Up\")\n{\n context.set(\"counter\",0);\n msg.payload = \"A\";\n context.set(\"pressed\",0); // Wipe count.\n// msg1.colour = \"lime\";\n\n return [msg,null];\n}\n\nif (x === 0)\n{\n if (y === 0)\n {\n // Send pressed message.\n y = y + 1;\n context.set(\"pressed\",y);\n // msg1 = {payload:\"Goo\"};\n msg1 = {payload:\"Pressed\"};\n node.send([null,msg1]);\n //node.send([null,msg1]);\n \n }\n msg.payload = \"B\";\n msg1.colour = \"red\";\n} else\nif (x === 1)\n{\n msg.payload = \"A\";\n msg1.colour = \"lime\";\n}\n\nx = (x + 1) % 2;\n\ncontext.set(\"counter\",x);\n\nreturn [msg,null];","outputs":2,"noerr":0,"x":700,"y":1620,"wires":[["bcbf190.c766ae8","60f5af8a.3dee6","fccc0cff.c1b98"],["38eeaa20.7d476e"]]},{"id":"b728961d.063848","type":"change","z":"8bb4de19.f72c88","name":"state","rules":[{"t":"move","p":"payload","pt":"msg","to":"state","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":220,"y":1650,"wires":[["60f5af8a.3dee6"]]},{"id":"4bd4c74f.5189f","type":"change","z":"8bb4de19.f72c88","name":"state","rules":[{"t":"move","p":"payload","pt":"msg","to":"state","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":220,"y":1690,"wires":[["60f5af8a.3dee6"]]},{"id":"bcbf190.c766ae8","type":"debug","z":"8bb4de19.f72c88","name":"PULSE OUTPUT","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":900,"y":1570,"wires":[]},{"id":"fccc0cff.c1b98","type":"ui_text","z":"8bb4de19.f72c88","group":"d3bcf885.d668a","order":15,"width":2,"height":1,"name":"","label":"7 : ","format":"{{msg.payload}}","layout":"row-spread","x":860,"y":1530,"wires":[]},{"id":"38eeaa20.7d476e","type":"debug","z":"8bb4de19.f72c88","name":"SINGLE OUTPUT","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":900,"y":1620,"wires":[]},{"id":"eff94fe9.186df8","type":"inject","z":"8bb4de19.f72c88","name":"Inactive","topic":"","payload":"inactive","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":100,"y":1650,"wires":[["b728961d.063848"]]},{"id":"41e1acb0.a460b4","type":"inject","z":"8bb4de19.f72c88","name":"Active","topic":"","payload":"active","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":100,"y":1690,"wires":[["4bd4c74f.5189f"]]},{"id":"2c4eab16.b45734","type":"ui_template","z":"8bb4de19.f72c88","group":"d3bcf885.d668a","name":"Base Line","order":17,"width":1,"height":1,"format":"<style>\n/* Best so far to fit 1x1 area */\n.baseline {\n border: none;\n border-radius: 8px;\n text-align: center;\n background-color: black; /* Backfound colour */\n color: {{msg.colour}}; /* \"Font\" (forground) colour */\n padding: 15px 0px;\n text-decoration: none;\n display: inline-block;\n font-size: 14px;\n margin: 0px 0px;\n cursor: pointer;\n}\n</style>\n\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":640,"y":150,"wires":[[]]},{"id":"d3bcf885.d668a","type":"ui_group","z":"","name":"Group 1","tab":"de5134a7.f0a0d","order":1,"disp":true,"width":"6","collapse":false},{"id":"de5134a7.f0a0d","type":"ui_tab","name":"Tab 6","icon":"dashboard","order":2}]
Walk through:
GUI side:
The button shows up black (background) and green text. "Press".
Press and hold button.
Text flashes red/green (lime - just to be precise.)
Release button, it stops flashing and goes back to green.
All that part works.
code side:
All being ok, things are usable.
But now press the Inactive (yeah, wrong word, but....) node.
Go back to the GUI.
The button has become grey text. For now, good enough to signal this button is disabled.
But that's where it falls apart.
The button DOES still work.
How do I implement/stop it working?
That's where I am stuck just now.
Oh, and while at it, another question:
Can you overlay font-awesom icons on text?
If my button has text (some will) my cop out idea for a button being disabled, I will simply overlay the ban icon.
