Ok, update to things done.
I've sort of got some buttons the size I want, and the look I want.
But then when I try to add them sending a payload when pressed, it all goes pear shaped.
The red volume button is great. But despite my efforts, I can't get an output.
xOx
(group2) is great. It is more probable to supply two messages - (down and up).
But again: as soon as I set the payload stuff, it goes to looking like the xOx
button in group3.
Here are the codes:
Volume:
[{"id":"38b8cfd4.6bdd18","type":"inject","z":"b25fd092.bcc758","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":590,"y":1230,"wires":[["b7cb74fe.5a31d"]]},{"id":"b7cb74fe.5a31d","type":"change","z":"b25fd092.bcc758","name":"yellow / black","rules":[{"t":"set","p":"colour","pt":"msg","to":"yellow","tot":"str"},{"t":"set","p":"background","pt":"msg","to":"black","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":600,"y":1290,"wires":[["e357141b.503fb","bc9f58ce.51ceb8","42c89a7e.830f8c"]]},{"id":"46e6efd0.6c182","type":"change","z":"b25fd092.bcc758","name":"black / green","rules":[{"t":"set","p":"colour","pt":"msg","to":"black","tot":"str"},{"t":"set","p":"background","pt":"msg","to":"green","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":600,"y":1330,"wires":[["e357141b.503fb","bc9f58ce.51ceb8","42c89a7e.830f8c"]]},{"id":"3e2e22d5.c855e6","type":"inject","z":"b25fd092.bcc758","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":580,"y":1370,"wires":[["46e6efd0.6c182"]]},{"id":"42c89a7e.830f8c","type":"ui_template","z":"b25fd092.bcc758","group":"28891e50.95dcb2","name":"Button (Volume up)","order":1,"width":"1","height":1,"format":"<style= background:{{msg.background}}>\n<button ng-mousedown=\"send({payload: 'Down'})\" ng-mouseup=\"send({payload: 'Up'})\"> \n<i class=\"material-icons\"> <span style=\"color:{{msg.colour}}\"> volume_up </i>\n</button>\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":850,"y":1370,"wires":[["b42faea.561865"]]},{"id":"b42faea.561865","type":"debug","z":"b25fd092.bcc758","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":1100,"y":1370,"wires":[]},{"id":"28891e50.95dcb2","type":"ui_group","z":"","name":"Group 2","tab":"273de47d.2d2bac","order":2,"disp":true,"width":"7","collapse":false},{"id":"273de47d.2d2bac","type":"ui_tab","z":"","name":"TEST","icon":"dashboard","disabled":false,"hidden":false}]
oXo
(Group 2)
[{"id":"ca93012e.a3437","type":"ui_template","z":"b25fd092.bcc758","group":"28891e50.95dcb2","name":"Best so far xOx","order":8,"width":"1","height":"1","format":"<style>\n/* Best so far to fit 1x1 area */\n.button2 {\n border: none;\n border-radius: 8px;\n text-align: center;\n background-color: #097479; /* Green */\n color: black; /* \"Font\" colour */\n/* padding: 15px 10px;*/ /* This seems to change the area of blue visible 15 - height 20 - width */\n padding: 15px 0px;\n text-decoration: none;\n display: inline-block;\n font-size: 15px;\n margin: 0px 0px; /* Was 0 20 */\n cursor: pointer;\n}\n</style>\n<button class=\"button2\">xOx</button>\n\n\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":340,"y":1050,"wires":[[]]},{"id":"28891e50.95dcb2","type":"ui_group","z":"","name":"Group 2","tab":"273de47d.2d2bac","order":2,"disp":true,"width":"7","collapse":false},{"id":"273de47d.2d2bac","type":"ui_tab","z":"","name":"TEST","icon":"dashboard","disabled":false,"hidden":false}]
oXo
group 3
[{"id":"de8ba5a8.3231a8","type":"ui_template","z":"b25fd092.bcc758","group":"d9a63921.b84ff","name":"Best so far xOx","order":8,"width":"1","height":"1","format":"<style>\n/* Best so far to fit 1x1 area */\n.buttonX {\n border: none;\n border-radius: 8px;\n text-align: center;\n background-color: #097479; /* Green */\n color: black; /* \"Font\" colour */\n/* padding: 15px 10px;*/ /* This seems to change the area of blue visible 15 - height 20 - width */\n padding: 15px 0px;\n text-decoration: none;\n display: inline-block;\n font-size: 15px;\n margin: 0px 0px; /* Was 0 20 */\n cursor: pointer;\n}\n</style>\n<button class=\"mybuttonX\" click=\"send({topic:'clicked', payload:'button was clicked'})\">xOx</button>\n\n\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":370,"y":1880,"wires":[["48406f5a.e6282"]]},{"id":"48406f5a.e6282","type":"debug","z":"b25fd092.bcc758","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":560,"y":1880,"wires":[]},{"id":"d9a63921.b84ff","type":"ui_group","z":"","name":"Group 3","tab":"273de47d.2d2bac","order":3,"disp":true,"width":"7","collapse":false},{"id":"273de47d.2d2bac","type":"ui_tab","z":"","name":"TEST","icon":"dashboard","disabled":false,"hidden":false}]
I am really missing how the button sizes are changing, and not sure the comments I have written are correct or not. But I have to start somewhere, and document what I am seeing.
The other problem is that some of the buttons work great at size 2x1....
Oh, they are cropped.
Some other time.