Not to give up on the help requested elsewhere I am asking for help here to maybe get an answer here.
The scenario:
I want a button that when pressed sends an output.
It accepts input to set the background image for the button - .svg format.
I can get the latter working fine. I send it different messages and it cycles through the files and I see the different/changing .svg images.
But as soon as I make a push button the size of the image shrinks by about 10 pixels and I don't get an output anyway.
Sorry.... I have asked and got help in the past with .CSS structures.
In a prefect world - which mine isn't - I should know how to do this.
I don't.
This is a very simple flow I have made to test the .svg files are working.
I can't attach them so for the sake of trying to help, I'll attach them as .png files.
[{"id":"ab9b0354a0a1f2fa","type":"switch","z":"0918ee609bf69fc7","name":"","property":"count","propertyType":"msg","rules":[{"t":"eq","v":"0","vt":"num"},{"t":"eq","v":"1","vt":"num"},{"t":"eq","v":"2","vt":"num"}],"checkall":"true","repair":false,"outputs":3,"x":3050,"y":1260,"wires":[["d3da114345d9a6ee"],["561b02de064f4b6d"],["d791736a04b93441","d5acf83a41b2167f"]]},{"id":"3fde420cf0e27448","type":"counter","z":"0918ee609bf69fc7","name":"","init":"0","step":"1","lower":"","upper":"","mode":"increment","outputs":"1","x":2910,"y":1260,"wires":[["ab9b0354a0a1f2fa","b188fc566ec7bcd4"]]},{"id":"d3da114345d9a6ee","type":"change","z":"0918ee609bf69fc7","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"/Pictures/ENABLE1.svg","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":3240,"y":1170,"wires":[["fc8cf4608cd9d5c7"]]},{"id":"561b02de064f4b6d","type":"change","z":"0918ee609bf69fc7","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"/Pictures/ON1.svg","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":3240,"y":1210,"wires":[["fc8cf4608cd9d5c7"]]},{"id":"d791736a04b93441","type":"delay","z":"0918ee609bf69fc7","name":"","pauseType":"delay","timeout":"1","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"allowrate":false,"outputs":1,"x":3060,"y":1320,"wires":[["5f01092596a5ab8f","706d38ccf1ab360d"]]},{"id":"d5acf83a41b2167f","type":"change","z":"0918ee609bf69fc7","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"/Pictures/OFF1.svg","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":3240,"y":1250,"wires":[["fc8cf4608cd9d5c7"]]},{"id":"1d96e566d03627e6","type":"inject","z":"0918ee609bf69fc7","name":"Stop","props":[{"p":"reset","v":"true","vt":"bool"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":2740,"y":1260,"wires":[["63e8890cd7323960","3fde420cf0e27448"]]},{"id":"63e8890cd7323960","type":"trigger","z":"0918ee609bf69fc7","name":"","op1":"1","op2":"0","op1type":"str","op2type":"str","duration":"-3","extend":false,"overrideDelay":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":2890,"y":1220,"wires":[["3fde420cf0e27448"]]},{"id":"5f01092596a5ab8f","type":"change","z":"0918ee609bf69fc7","name":"","rules":[{"t":"set","p":"reset","pt":"msg","to":"true","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":3230,"y":1320,"wires":[["3fde420cf0e27448","4958ffc858c5d0c2"]]},{"id":"b188fc566ec7bcd4","type":"debug","z":"0918ee609bf69fc7","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"count","targetType":"msg","statusVal":"","statusType":"auto","x":3050,"y":1190,"wires":[]},{"id":"fc8cf4608cd9d5c7","type":"ui_template","z":"0918ee609bf69fc7","group":"d9a63921.b84ff","name":"","order":10,"width":"2","height":"1","format":"<img width=\"100%\" height=\"100%\" alt=\"Image not found\" src = {{msg.payload}} />\n\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":3050,"y":1060,"wires":[["978dcefec289a7d3","6e96e43353cb65ef"]]},{"id":"2c071b4ea64b76bc","type":"inject","z":"0918ee609bf69fc7","name":"Start","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"date","x":2740,"y":1220,"wires":[["63e8890cd7323960"]]},{"id":"9198abd8e0762f13","type":"inject","z":"0918ee609bf69fc7","name":"Inject","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"/Pictures/ENABLE1.svg","payloadType":"str","x":2740,"y":1020,"wires":[["fc8cf4608cd9d5c7"]]},{"id":"19fa2445dad47f83","type":"inject","z":"0918ee609bf69fc7","name":"Inject","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"/Pictures/ON1.svg","payloadType":"str","x":2740,"y":1060,"wires":[["fc8cf4608cd9d5c7"]]},{"id":"fdc85d919a354347","type":"inject","z":"0918ee609bf69fc7","name":"Inject","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"/Pictures/OFF1.svg","payloadType":"str","x":2740,"y":1100,"wires":[["fc8cf4608cd9d5c7"]]},{"id":"978dcefec289a7d3","type":"debug","z":"0918ee609bf69fc7","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":3220,"y":1060,"wires":[]},{"id":"6e96e43353cb65ef","type":"ui_text","z":"0918ee609bf69fc7","group":"d9a63921.b84ff","order":13,"width":0,"height":0,"name":"","label":"CLICK - ","format":"{{msg.payload}}","layout":"row-spread","x":3210,"y":1020,"wires":[]},{"id":"d9a63921.b84ff","type":"ui_group","name":"Group 3","tab":"273de47d.2d2bac","order":8,"disp":true,"width":"7","collapse":false},{"id":"273de47d.2d2bac","type":"ui_tab","name":"TEST","icon":"dashboard","order":22,"disabled":false,"hidden":false}]
Now something else to understand.
I'm not sure which size these are.
(I'll explain in a moment)
Ideally these are 2 x 1 size for the dashboard being 48 x 48 pixel unit size.
When I made the button part, the size shown reduced and I had to make them 38 pixels high.
Don't ask me how/why. But I reduced them to that and they fitted and looked ok.
Ideally 48 x 48 (or sorry: 96) pixels is the nominal size.
There is going to be a fourth image in this set, but as I can't get the button working I decided to not make it just now.
Other caveats:
I know that you can have 3 types of CSS visibility. Global, tab/flow and local.
Global - obvious.
tab/flow - the settings are limited to that tab/flow.
local - only to this node.
I would prefer to keep this all local, as I would like to release this as a node for people to use - if they want. (Probably not, but who knows?)
Sorry for asking the dumb question, but I have tried many times and failed.
I get it that I have to put in the effort to learn but this is still WAY above my skill set.
I'm surprised I am where I am with Java Script.
Thanks in advance.
