Hello all,
I am having a hard problem to solve. I don't think that it should be difficult.
So basically, I have a material design icon that defaults to a transparent background when the flow first loads. However, when I refresh the browser on that flow, the icon displays the correct color which is white.
Now, if I use my navigation buttons to switch to a different flow and back, the icon is again with the transparent background.
I am not sure if this is reproducible on other dashboards. however, I have attached some sample code of what I am doing along with some pics.
Also I should note that I tried to add in a remedy to this where I have a template node that will send out a message to set the color of the icon on start up. However, I have noticed that the message does not get sent out at all.
Please let me know if anyone has had a similar issue to this and how I can solve it.
[ { "id": "95cb52d6d488839f", "type": "function", "z": "6cad017069b129d8", "g": "97c472b7c6b71f5d", "name": "Toggle Value", "func": "var state = context.state | false;\n\n// If this function node was triggered by the button, then invert the state variable\n// Otherwise, set the state based on the payload input value\nif (msg.payload == \"press\")\n state = !state\nelse\n state = (msg.payload == \"on\");\n\n// Set the button graphics based on the current state\nif (state == true)\n{\n msg.color = \"green\";\n msg.state = \"on\";\n}\nelse\n{\n msg.color = \"gray\";\n msg.state = \"off\";\n}\n\ncontext.state = state;\n\nif (msg.payload == \"press\")\n return [msg, msg];\nelse\n return [msg, null];", "outputs": 2, "noerr": 0, "initialize": "// Code added here will be run once\n// whenever the node is started.\nvar state = context.state | false;\n\nmsg = {};\n\nif (state == true)\n{\n msg.color = \"green\";\n msg.state = \"on\";\n}\nelse\n{\n msg.color = \"white\";\n msg.state = \"off\";\n}\n\nmsg,payload = state\n\nreturn [msg, null];", "finalize": "", "libs": [], "x": 530, "y": 240, "wires": [ [ "9ffb312d59fc0c97", "bb84009f48136d8c" ], [ "9931a028d96f961f" ] ] }, { "id": "bb84009f48136d8c", "type": "debug", "z": "6cad017069b129d8", "g": "97c472b7c6b71f5d", "name": "State In", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "true", "targetType": "full", "statusVal": "", "statusType": "auto", "x": 520, "y": 300, "wires": [] }, { "id": "9931a028d96f961f", "type": "change", "z": "6cad017069b129d8", "g": "97c472b7c6b71f5d", "name": "", "rules": [ { "t": "set", "p": "payload", "pt": "msg", "to": "state", "tot": "msg" }, { "t": "delete", "p": "color", "pt": "msg" }, { "t": "delete", "p": "state", "pt": "msg" } ], "action": "", "property": "", "from": "", "to": "", "reg": false, "x": 720, "y": 300, "wires": [ [ "2eec194b500e86b5", "59e350de59642ac0" ] ] }, { "id": "9ffb312d59fc0c97", "type": "ui_button", "z": "6cad017069b129d8", "g": "97c472b7c6b71f5d", "name": "B1", "group": "4760bf464542df14", "order": 5, "width": 2, "height": 2, "passthru": false, "label": "<i class=\"mdi mdi-power icon-3x\" style=\"fill: white\"></i>", "tooltip": "", "color": "", "bgcolor": "{{color}}", "className": "", "icon": "", "payload": "press", "payloadType": "str", "topic": "topic", "topicType": "msg", "x": 730, "y": 240, "wires": [ [ "95cb52d6d488839f" ] ] }, { "id": "59e350de59642ac0", "type": "debug", "z": "6cad017069b129d8", "g": "97c472b7c6b71f5d", "name": "State Out", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "payload", "targetType": "msg", "statusVal": "", "statusType": "auto", "x": 900, "y": 260, "wires": [] }, { "id": "4760bf464542df14", "type": "ui_group", "name": "CH1", "tab": "a77c59bcf550b022", "order": 2, "disp": true, "width": 2, "collapse": false, "className": "" }, { "id": "a77c59bcf550b022", "type": "ui_tab", "name": "Lighting", "icon": "fa-lightbulb-o", "order": 15, "disabled": false, "hidden": false } ]
