Problem changing button colors

General
,
1

Hello,

I am running the latest version of Node Red. I am trying to create a control interface for a dust collection system for a wood shop. I have the basic functionality working well. I have a relay board HAT for a Raspberry Pi that does the heavy lifting. Now I am trying to make the interface nice. I created flows for the 13 buttons and I used the function node to switch the state of the gate from open to closed and back and that works. My problem is I want to change the color of the button from Red (closed) to Green (open) when I push the button. I followed some examples online and I sorta have it working. It does change the color, but I have to push the button twice.

I will try to upload my flow here for everyone to see. If anyone has any suggestions as to what I am doing wrong, any help would be appreciated!

Thanks,

Keith

2

OK, I am a new user, so I can’t upload the flow. If anyone is interested, send me a message with your email and I will email you the flow.json file.

3

Hi, Welcome to Node-red Forum
is it older dashboard or dashboard 2 ? assuming it is the new flowfuse dashboard, here is one way of doing it. (it has a contrib node..you may have to install)

[{"id":"5c5f4d942f136ebf","type":"group","z":"9cd9fa2d0d2e7202","name":"Color Changing Button","style":{"stroke":"#92d04f","fill":"#addb7b","label":true,"color":"#001f60"},"nodes":["e8d505f66b0b5b78","d2c0ef7a20c7f729","d9c64d70.401e88","cfc94f9612461c5f","e2e89a257803d486","9ac6bbf24ce7af48","cf70dd4f0bade21a","f0c2a9c0a84fc05a"],"x":134,"y":2719,"w":572,"h":142},{"id":"e8d505f66b0b5b78","type":"ui-button","z":"9cd9fa2d0d2e7202","g":"5c5f4d942f136ebf","group":"a7a5b8170da2bea4","name":"","label":"button","order":0,"width":"0","height":"0","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"-","payloadType":"str","topic":"-","topicType":"str","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":370,"y":2800,"wires":[["d9c64d70.401e88"]]},{"id":"d2c0ef7a20c7f729","type":"inject","z":"9cd9fa2d0d2e7202","g":"5c5f4d942f136ebf","name":"","props":[{"p":"ui_update","v":"{}","vt":"json"},{"p":"ui_update.buttonColor","v":"red","vt":"str"},{"p":"topic","vt":"str"},{"p":"ui_update.label","v":"Click me!","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"-","x":230,"y":2800,"wires":[["e8d505f66b0b5b78"]]},{"id":"d9c64d70.401e88","type":"toggle","z":"9cd9fa2d0d2e7202","g":"5c5f4d942f136ebf","name":"","onOffTopic":"","onValue":"on","onType":"str","offValue":"off","offType":"str","toggleTopic":"","toggleValue":"","toggleType":"any","passOnOff":"ifChanged","x":465,"y":2800,"wires":[["cf70dd4f0bade21a"]],"l":false},{"id":"cfc94f9612461c5f","type":"change","z":"9cd9fa2d0d2e7202","g":"5c5f4d942f136ebf","name":"","rules":[{"t":"set","p":"ui_update.buttonColor","pt":"msg","to":"green","tot":"str"},{"t":"set","p":"ui_update.label","pt":"msg","to":"This is now green, click to make it red","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":595,"y":2780,"wires":[["e2e89a257803d486"]],"l":false},{"id":"e2e89a257803d486","type":"link out","z":"9cd9fa2d0d2e7202","g":"5c5f4d942f136ebf","name":"link out 594","mode":"link","links":["9ac6bbf24ce7af48"],"x":665,"y":2800,"wires":[]},{"id":"9ac6bbf24ce7af48","type":"link in","z":"9cd9fa2d0d2e7202","g":"5c5f4d942f136ebf","name":"link in 377","links":["e2e89a257803d486"],"x":285,"y":2760,"wires":[["e8d505f66b0b5b78"]]},{"id":"cf70dd4f0bade21a","type":"switch","z":"9cd9fa2d0d2e7202","g":"5c5f4d942f136ebf","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"on","vt":"str"},{"t":"eq","v":"off","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":535,"y":2800,"wires":[["cfc94f9612461c5f"],["f0c2a9c0a84fc05a"]],"l":false},{"id":"f0c2a9c0a84fc05a","type":"change","z":"9cd9fa2d0d2e7202","g":"5c5f4d942f136ebf","name":"","rules":[{"t":"set","p":"ui_update.buttonColor","pt":"msg","to":"red","tot":"str"},{"t":"set","p":"ui_update.label","pt":"msg","to":"This is now red, click to make it green","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":595,"y":2820,"wires":[["e2e89a257803d486"]],"l":false},{"id":"a7a5b8170da2bea4","type":"ui-group","name":"Knob","page":"17179e7821c4a787","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"17179e7821c4a787","type":"ui-page","name":"Page 08","ui":"0aa5ac292a3ec726","path":"/page8","icon":"home","layout":"grid","theme":"b0fed2b0e19988c3","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":15,"className":"","visible":"true","disabled":"false"},{"id":"0aa5ac292a3ec726","type":"ui-base","name":"DEL MONTE HOSUR","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control","ui-form","ui-text-input","ui-number-input","ui-file-input","ui-button","ui-button-group","ui-radio-group","ui-slider","ui-switch","ui-text","ui-table","ui-chart","ui-gauge","ui-markdown","ui-template","ui-tabulator"],"showPathInSidebar":true,"headerContent":"dashboard","navigationStyle":"temporary","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":"1","showDisconnectNotification":true,"allowInstall":true},{"id":"b0fed2b0e19988c3","type":"ui-theme","name":"MyTheme","colors":{"surface":"#000000","primary":"#059bd6","bgPage":"#050505","groupBg":"#303030","groupOutline":"#297500"},"sizes":{"density":"compact","pagePadding":"1px","groupGap":"1px","groupBorderRadius":"2px","widgetGap":"1px"}}]

button_color

contrib node: node-red-contrib-toggle

4

Well I am not sure. I checked and the “Dashboard” node I have installed in the Pallet is version 3.6.5

Here is my code, assuming it will paste in here.

[
{
"id": "c9c2f19d847f9a50",
"type": "tab",
"label": "Dust Collection 2",
"disabled": false,
"info": "",
"env": [ ]
},
{
"id": "84b10cfa3f14fe82",
"type": "16relind",
"z": "c9c2f19d847f9a50",
"name": "",
"stack": "0",
"relay": "1",
"payload": "payload",
"payloadType": "msg",
"x": 600,
"y": 100,
"wires": \[
\[
"489f18bab9bf4b2f",
"9bd849affbd4245e"
\]
\]
},
{
"id": "622216744987f557",
"type": "16relind",
"z": "c9c2f19d847f9a50",
"name": "",
"stack": "0",
"relay": "2",
"payload": "payload",
"payloadType": "msg",
"x": 700,
"y": 400,
"wires": \[
\[
"32b91942cff4fe40",
"2bb9b2126792f3c9"
\]
\]
},
{
"id": "17c6047175ba9e28",
"type": "16relind",
"z": "c9c2f19d847f9a50",
"name": "",
"stack": "0",
"relay": "3",
"payload": "payload",
"payloadType": "msg",
"x": 700,
"y": 500,
"wires": \[
\[
"68707f8165865aa4"
\]
\]
},
{
"id": "88cbda91fa028e6f",
"type": "16relind",
"z": "c9c2f19d847f9a50",
"name": "",
"stack": "0",
"relay": "4",
"payload": "payload",
"payloadType": "msg",
"x": 700,
"y": 600,
"wires": \[
\[
"28d6534e2e4de1a0"
\]
\]
},
{
"id": "89dc3e2f258923b4",
"type": "16relind",
"z": "c9c2f19d847f9a50",
"name": "",
"stack": "0",
"relay": "5",
"payload": "payload",
"payloadType": "msg",
"x": 700,
"y": 700,
"wires": \[
\[
"6ed6de98a4546d0b"
\]
\]
},
{
"id": "1f55a460dd4302d9",
"type": "16relind",
"z": "c9c2f19d847f9a50",
"name": "",
"stack": "0",
"relay": "6",
"payload": "payload",
"payloadType": "msg",
"x": 700,
"y": 800,
"wires": \[
\[
"d573bbe770c1eecd"
\]
\]
},
{
"id": "6ec1135739a8f067",
"type": "16relind",
"z": "c9c2f19d847f9a50",
"name": "",
"stack": "0",
"relay": "7",
"payload": "payload",
"payloadType": "msg",
"x": 700,
"y": 900,
"wires": \[
\[
"6d82717d2fc659a2"
\]
\]
},
{
"id": "a821621535471764",
"type": "16relind",
"z": "c9c2f19d847f9a50",
"name": "",
"stack": "0",
"relay": "8",
"payload": "payload",
"payloadType": "msg",
"x": 700,
"y": 1000,
"wires": \[
\[
"51ce5d842d1fbb35"
\]
\]
},
{
"id": "3911681cc472d7e7",
"type": "16relind",
"z": "c9c2f19d847f9a50",
"name": "",
"stack": "0",
"relay": "9",
"payload": "payload",
"payloadType": "msg",
"x": 700,
"y": 1100,
"wires": \[
\[
"608464203e21497f"
\]
\]
},
{
"id": "ead575f055c4fa0f",
"type": "16relind",
"z": "c9c2f19d847f9a50",
"name": "",
"stack": "0",
"relay": "10",
"payload": "payload",
"payloadType": "msg",
"x": 700,
"y": 1200,
"wires": \[
\[
"74ad9d958cdaf8c5"
\]
\]
},
{
"id": "0202d9ebb7ab6d37",
"type": "16relind",
"z": "c9c2f19d847f9a50",
"name": "",
"stack": "0",
"relay": "11",
"payload": "payload",
"payloadType": "msg",
"x": 700,
"y": 1300,
"wires": \[
\[
"8578f605d6781291"
\]
\]
},
{
"id": "5e0c8194609eb1e0",
"type": "16relind",
"z": "c9c2f19d847f9a50",
"name": "",
"stack": "0",
"relay": "12",
"payload": "payload",
"payloadType": "msg",
"x": 700,
"y": 1400,
"wires": \[
\[
"7b2b5b541849dedc"
\]
\]
},
{
"id": "c0c893458e3411a9",
"type": "16relind",
"z": "c9c2f19d847f9a50",
"name": "",
"stack": "0",
"relay": "13",
"payload": "payload",
"payloadType": "msg",
"x": 700,
"y": 1500,
"wires": \[
\[
"89cd21f94d796a95"
\]
\]
},
{
"id": "ca1786b55ee68f5c",
"type": "ui_button",
"z": "c9c2f19d847f9a50",
"name": "",
"group": "edc73090c74155fd",
"order": 26,
"width": 0,
"height": 0,
"passthru": false,
"label": "Gate 1",
"tooltip": "",
"color": "",
"bgcolor": "{{msg.bgcolor}}",
"className": "",
"icon": "",
"payload": "true",
"payloadType": "bool",
"topic": "topic",
"topicType": "msg",
"x": 190,
"y": 100,
"wires": \[
\[
"7518e893d987e04a"
\]
\]
},
{
"id": "7518e893d987e04a",
"type": "function",
"z": "c9c2f19d847f9a50",
"name": "function 1",
"func": " // Get the current state from flow context, or initialize to false (off)\\n    let state = flow.get('buttonState') || false; \\n\\n    // Toggle the state\\n    state = !state; \\n\\n    // Store the new state\\n    flow.set('buttonState', state);\\n\\n    // Set the payload based on the new state\\n    if (state) {\\n        msg.payload = true; // Or "ON", 1, etc.\\n    } else {\\n        msg.payload = false; // Or "OFF", 0, etc.\\n    }\\n\\n    return msg;\\n",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [ ],
"x": 380,
"y": 100,
"wires": \[
\[
"84b10cfa3f14fe82",
"8e9f0cd13e626303"
\]
\]
},
{
"id": "9bd849affbd4245e",
"type": "function",
"z": "c9c2f19d847f9a50",
"name": "function 21",
"func": "// Example using a Function node\\nif (msg.payload === true) {\\n    msg.bgcolor = "green";\\n} else {\\n    msg.bgcolor = "red";\\n}\\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [ ],
"x": 890,
"y": 100,
"wires": \[
\[
"ca1786b55ee68f5c",
"d13be6f4672d1f24"
\]
\]
},
{
"id": "8e9f0cd13e626303",
"type": "debug",
"z": "c9c2f19d847f9a50",
"name": "debug 1",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"statusVal": "",
"statusType": "auto",
"x": 700,
"y": 180,
"wires": [ ]
},
{
"id": "489f18bab9bf4b2f",
"type": "debug",
"z": "c9c2f19d847f9a50",
"name": "debug 2",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"statusVal": "",
"statusType": "auto",
"x": 880,
"y": 20,
"wires": [ ]
},
{
"id": "d13be6f4672d1f24",
"type": "debug",
"z": "c9c2f19d847f9a50",
"name": "debug 3",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "bgcolor",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 1120,
"y": 180,
"wires": [ ]
},
{
"id": "042e9818402bb3f5",
"type": "ui_button",
"z": "c9c2f19d847f9a50",
"name": "",
"group": "edc73090c74155fd",
"order": 26,
"width": 0,
"height": 0,
"passthru": false,
"label": "Gate 2",
"tooltip": "",
"color": "",
"bgcolor": "{{msg.bgcolor}}",
"className": "",
"icon": "",
"payload": "true",
"payloadType": "bool",
"topic": "topic",
"topicType": "msg",
"x": 210,
"y": 400,
"wires": \[
\[
"3c702607b5495abc"
\]
\]
},
{
"id": "7be648bd1063b138",
"type": "ui_button",
"z": "c9c2f19d847f9a50",
"name": "",
"group": "edc73090c74155fd",
"order": 26,
"width": 0,
"height": 0,
"passthru": false,
"label": "Gate 3",
"tooltip": "",
"color": "",
"bgcolor": "{{msg.bgcolor}}",
"className": "",
"icon": "",
"payload": "true",
"payloadType": "bool",
"topic": "topic",
"topicType": "msg",
"x": 210,
"y": 500,
"wires": \[
\[
"5eead95a5a05b389"
\]
\]
},
{
"id": "3e9a19aa6c40328e",
"type": "ui_button",
"z": "c9c2f19d847f9a50",
"name": "",
"group": "edc73090c74155fd",
"order": 26,
"width": 0,
"height": 0,
"passthru": false,
"label": "Gate 4",
"tooltip": "",
"color": "",
"bgcolor": "{{msg.bgcolor}}",
"className": "",
"icon": "",
"payload": "true",
"payloadType": "bool",
"topic": "topic",
"topicType": "msg",
"x": 210,
"y": 600,
"wires": \[
\[
"df31dacead1fdaf9"
\]
\]
},
{
"id": "6a5515252779524e",
"type": "ui_button",
"z": "c9c2f19d847f9a50",
"name": "",
"group": "edc73090c74155fd",
"order": 26,
"width": 0,
"height": 0,
"passthru": false,
"label": "Gate 5",
"tooltip": "",
"color": "",
"bgcolor": "{{msg.bgcolor}}",
"className": "",
"icon": "",
"payload": "true",
"payloadType": "bool",
"topic": "topic",
"topicType": "msg",
"x": 210,
"y": 700,
"wires": \[
\[
"03ecca105e518d76"
\]
\]
},
{
"id": "17732e6da7c242be",
"type": "ui_button",
"z": "c9c2f19d847f9a50",
"name": "",
"group": "edc73090c74155fd",
"order": 26,
"width": 0,
"height": 0,
"passthru": false,
"label": "Gate 6",
"tooltip": "",
"color": "",
"bgcolor": "{{msg.bgcolor}}",
"className": "",
"icon": "",
"payload": "true",
"payloadType": "bool",
"topic": "topic",
"topicType": "msg",
"x": 210,
"y": 800,
"wires": \[
\[
"4d2c75361f2948c2"
\]
\]
},
{
"id": "82c08585a9e4fb3e",
"type": "ui_button",
"z": "c9c2f19d847f9a50",
"name": "",
"group": "edc73090c74155fd",
"order": 26,
"width": 0,
"height": 0,
"passthru": false,
"label": "Gate 7",
"tooltip": "",
"color": "",
"bgcolor": "{{msg.bgcolor}}",
"className": "",
"icon": "",
"payload": "true",
"payloadType": "bool",
"topic": "topic",
"topicType": "msg",
"x": 210,
"y": 900,
"wires": \[
\[
"71af3bc6e5a9b408"
\]
\]
},
{
"id": "88b553a669eefb25",
"type": "ui_button",
"z": "c9c2f19d847f9a50",
"name": "",
"group": "edc73090c74155fd",
"order": 26,
"width": 0,
"height": 0,
"passthru": false,
"label": "Gate 8",
"tooltip": "",
"color": "",
"bgcolor": "{{msg.bgcolor}}",
"className": "",
"icon": "",
"payload": "true",
"payloadType": "bool",
"topic": "topic",
"topicType": "msg",
"x": 210,
"y": 1000,
"wires": \[
\[
"1f861ed518ced38c"
\]
\]
},
{
"id": "3859131800905974",
"type": "ui_button",
"z": "c9c2f19d847f9a50",
"name": "",
"group": "edc73090c74155fd",
"order": 26,
"width": 0,
"height": 0,
"passthru": false,
"label": "Gate 9",
"tooltip": "",
"color": "",
"bgcolor": "{{msg.bgcolor}}",
"className": "",
"icon": "",
"payload": "true",
"payloadType": "bool",
"topic": "topic",
"topicType": "msg",
"x": 210,
"y": 1100,
"wires": \[
\[
"23bfcb2bc81ee018"
\]
\]
},
{
"id": "18411b1e1d12223e",
"type": "ui_button",
"z": "c9c2f19d847f9a50",
"name": "",
"group": "edc73090c74155fd",
"order": 26,
"width": 0,
"height": 0,
"passthru": false,
"label": "Gate 10",
"tooltip": "",
"color": "",
"bgcolor": "{{msg.bgcolor}}",
"className": "",
"icon": "",
"payload": "true",
"payloadType": "bool",
"topic": "topic",
"topicType": "msg",
"x": 220,
"y": 1200,
"wires": \[
\[
"1ee2823812cb7e2b"
\]
\]
},
{
"id": "929a0a527b7495a5",
"type": "ui_button",
"z": "c9c2f19d847f9a50",
"name": "",
"group": "edc73090c74155fd",
"order": 26,
"width": 0,
"height": 0,
"passthru": false,
"label": "Gate 11",
"tooltip": "",
"color": "",
"bgcolor": "{{msg.bgcolor}}",
"className": "",
"icon": "",
"payload": "true",
"payloadType": "bool",
"topic": "topic",
"topicType": "msg",
"x": 220,
"y": 1300,
"wires": \[
\[
"74e0cda531324b12"
\]
\]
},
{
"id": "857e3d915261b0d3",
"type": "ui_button",
"z": "c9c2f19d847f9a50",
"name": "",
"group": "edc73090c74155fd",
"order": 26,
"width": 0,
"height": 0,
"passthru": false,
"label": "Gate 12",
"tooltip": "",
"color": "",
"bgcolor": "{{msg.bgcolor}}",
"className": "",
"icon": "",
"payload": "true",
"payloadType": "bool",
"topic": "topic",
"topicType": "msg",
"x": 220,
"y": 1400,
"wires": \[
\[
"88a0fb2767de4404"
\]
\]
},
{
"id": "ca1a549e4066738a",
"type": "ui_button",
"z": "c9c2f19d847f9a50",
"name": "",
"group": "edc73090c74155fd",
"order": 26,
"width": 0,
"height": 0,
"passthru": false,
"label": "Gate 13",
"tooltip": "",
"color": "",
"bgcolor": "{{msg.bgcolor}}",
"className": "",
"icon": "",
"payload": "true",
"payloadType": "bool",
"topic": "topic",
"topicType": "msg",
"x": 220,
"y": 1500,
"wires": \[
\[
"2463e7009a925a54"
\]
\]
},
{
"id": "5eead95a5a05b389",
"type": "function",
"z": "c9c2f19d847f9a50",
"name": "function 3",
"func": " // Get the current state from flow context, or initialize to false (off)\\n    let state = flow.get('buttonState') || false; \\n\\n    // Toggle the state\\n    state = !state; \\n\\n    // Store the new state\\n    flow.set('buttonState', state);\\n\\n    // Set the payload based on the new state\\n    if (state) {\\n        msg.payload = true; // Or "ON", 1, etc.\\n    } else {\\n        msg.payload = false; // Or "OFF", 0, etc.\\n    }\\n\\n    return msg;\\n",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [ ],
"x": 420,
"y": 500,
"wires": \[
\[
"17c6047175ba9e28"
\]
\]
},
{
"id": "df31dacead1fdaf9",
"type": "function",
"z": "c9c2f19d847f9a50",
"name": "function 4",
"func": " // Get the current state from flow context, or initialize to false (off)\\n    let state = flow.get('buttonState') || false; \\n\\n    // Toggle the state\\n    state = !state; \\n\\n    // Store the new state\\n    flow.set('buttonState', state);\\n\\n    // Set the payload based on the new state\\n    if (state) {\\n        msg.payload = true; // Or "ON", 1, etc.\\n    } else {\\n        msg.payload = false; // Or "OFF", 0, etc.\\n    }\\n\\n    return msg;\\n",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [ ],
"x": 420,
"y": 600,
"wires": \[
\[
"88cbda91fa028e6f"
\]
\]
},
{
"id": "03ecca105e518d76",
"type": "function",
"z": "c9c2f19d847f9a50",
"name": "function 5",
"func": " // Get the current state from flow context, or initialize to false (off)\\n    let state = flow.get('buttonState') || false; \\n\\n    // Toggle the state\\n    state = !state; \\n\\n    // Store the new state\\n    flow.set('buttonState', state);\\n\\n    // Set the payload based on the new state\\n    if (state) {\\n        msg.payload = true; // Or "ON", 1, etc.\\n    } else {\\n        msg.payload = false; // Or "OFF", 0, etc.\\n    }\\n\\n    return msg;\\n",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [ ],
"x": 420,
"y": 700,
"wires": \[
\[
"89dc3e2f258923b4"
\]
\]
},
{
"id": "4d2c75361f2948c2",
"type": "function",
"z": "c9c2f19d847f9a50",
"name": "function 6",
"func": " // Get the current state from flow context, or initialize to false (off)\\n    let state = flow.get('buttonState') || false; \\n\\n    // Toggle the state\\n    state = !state; \\n\\n    // Store the new state\\n    flow.set('buttonState', state);\\n\\n    // Set the payload based on the new state\\n    if (state) {\\n        msg.payload = true; // Or "ON", 1, etc.\\n    } else {\\n        msg.payload = false; // Or "OFF", 0, etc.\\n    }\\n\\n    return msg;\\n",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [ ],
"x": 420,
"y": 800,
"wires": \[
\[
"1f55a460dd4302d9"
\]
\]
},
{
"id": "71af3bc6e5a9b408",
"type": "function",
"z": "c9c2f19d847f9a50",
"name": "function 7",
"func": " // Get the current state from flow context, or initialize to false (off)\\n    let state = flow.get('buttonState') || false; \\n\\n    // Toggle the state\\n    state = !state; \\n\\n    // Store the new state\\n    flow.set('buttonState', state);\\n\\n    // Set the payload based on the new state\\n    if (state) {\\n        msg.payload = true; // Or "ON", 1, etc.\\n    } else {\\n        msg.payload = false; // Or "OFF", 0, etc.\\n    }\\n\\n    return msg;\\n",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [ ],
"x": 420,
"y": 900,
"wires": \[
\[
"6ec1135739a8f067"
\]
\]
},
{
"id": "1f861ed518ced38c",
"type": "function",
"z": "c9c2f19d847f9a50",
"name": "function 8",
"func": " // Get the current state from flow context, or initialize to false (off)\\n    let state = flow.get('buttonState') || false; \\n\\n    // Toggle the state\\n    state = !state; \\n\\n    // Store the new state\\n    flow.set('buttonState', state);\\n\\n    // Set the payload based on the new state\\n    if (state) {\\n        msg.payload = true; // Or "ON", 1, etc.\\n    } else {\\n        msg.payload = false; // Or "OFF", 0, etc.\\n    }\\n\\n    return msg;\\n",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [ ],
"x": 420,
"y": 1000,
"wires": \[
\[
"a821621535471764"
\]
\]
},
{
"id": "23bfcb2bc81ee018",
"type": "function",
"z": "c9c2f19d847f9a50",
"name": "function 9",
"func": " // Get the current state from flow context, or initialize to false (off)\\n    let state = flow.get('buttonState') || false; \\n\\n    // Toggle the state\\n    state = !state; \\n\\n    // Store the new state\\n    flow.set('buttonState', state);\\n\\n    // Set the payload based on the new state\\n    if (state) {\\n        msg.payload = true; // Or "ON", 1, etc.\\n    } else {\\n        msg.payload = false; // Or "OFF", 0, etc.\\n    }\\n\\n    return msg;\\n",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [ ],
"x": 420,
"y": 1100,
"wires": \[
\[
"3911681cc472d7e7"
\]
\]
},
{
"id": "1ee2823812cb7e2b",
"type": "function",
"z": "c9c2f19d847f9a50",
"name": "function 10",
"func": " // Get the current state from flow context, or initialize to false (off)\\n    let state = flow.get('buttonState') || false; \\n\\n    // Toggle the state\\n    state = !state; \\n\\n    // Store the new state\\n    flow.set('buttonState', state);\\n\\n    // Set the payload based on the new state\\n    if (state) {\\n        msg.payload = true; // Or "ON", 1, etc.\\n    } else {\\n        msg.payload = false; // Or "OFF", 0, etc.\\n    }\\n\\n    return msg;\\n",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [ ],
"x": 420,
"y": 1200,
"wires": \[
\[
"ead575f055c4fa0f"
\]
\]
},
{
"id": "74e0cda531324b12",
"type": "function",
"z": "c9c2f19d847f9a50",
"name": "function 11",
"func": " // Get the current state from flow context, or initialize to false (off)\\n    let state = flow.get('buttonState') || false; \\n\\n    // Toggle the state\\n    state = !state; \\n\\n    // Store the new state\\n    flow.set('buttonState', state);\\n\\n    // Set the payload based on the new state\\n    if (state) {\\n        msg.payload = true; // Or "ON", 1, etc.\\n    } else {\\n        msg.payload = false; // Or "OFF", 0, etc.\\n    }\\n\\n    return msg;\\n",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [ ],
"x": 430,
"y": 1300,
"wires": \[
\[
"0202d9ebb7ab6d37"
\]
\]
},
{
"id": "88a0fb2767de4404",
"type": "function",
"z": "c9c2f19d847f9a50",
"name": "function 12",
"func": " // Get the current state from flow context, or initialize to false (off)\\n    let state = flow.get('buttonState') || false; \\n\\n    // Toggle the state\\n    state = !state; \\n\\n    // Store the new state\\n    flow.set('buttonState', state);\\n\\n    // Set the payload based on the new state\\n    if (state) {\\n        msg.payload = true; // Or "ON", 1, etc.\\n    } else {\\n        msg.payload = false; // Or "OFF", 0, etc.\\n    }\\n\\n    return msg;\\n",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [ ],
"x": 430,
"y": 1400,
"wires": \[
\[
"5e0c8194609eb1e0"
\]
\]
},
{
"id": "2463e7009a925a54",
"type": "function",
"z": "c9c2f19d847f9a50",
"name": "function 13",
"func": " // Get the current state from flow context, or initialize to false (off)\\n    let state = flow.get('buttonState') || false; \\n\\n    // Toggle the state\\n    state = !state; \\n\\n    // Store the new state\\n    flow.set('buttonState', state);\\n\\n    // Set the payload based on the new state\\n    if (state) {\\n        msg.payload = true; // Or "ON", 1, etc.\\n    } else {\\n        msg.payload = false; // Or "OFF", 0, etc.\\n    }\\n\\n    return msg;\\n",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [ ],
"x": 430,
"y": 1500,
"wires": \[
\[
"c0c893458e3411a9"
\]
\]
},
{
"id": "3c702607b5495abc",
"type": "function",
"z": "c9c2f19d847f9a50",
"name": "function 2",
"func": " // Get the current state from flow context, or initialize to false (off)\\n    let state = flow.get('buttonState') || false; \\n\\n    // Toggle the state\\n    state = !state; \\n\\n    // Store the new state\\n    flow.set('buttonState', state);\\n\\n    // Set the payload based on the new state\\n    if (state) {\\n        msg.payload = true; // Or "ON", 1, etc.\\n    } else {\\n        msg.payload = false; // Or "OFF", 0, etc.\\n    }\\n\\n    return msg;\\n",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [ ],
"x": 420,
"y": 400,
"wires": \[
\[
"622216744987f557",
"ec6e46a2ac928d55"
\]
\]
},
{
"id": "32b91942cff4fe40",
"type": "function",
"z": "c9c2f19d847f9a50",
"name": "function 14",
"func": "// Example using a Function node\\nif (msg.payload === true) {\\n    msg.bgcolor = "green";\\n} else {\\n    msg.bgcolor = "red";\\n}\\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [ ],
"x": 970,
"y": 400,
"wires": \[
\[
"042e9818402bb3f5",
"052e42c75fd88a68"
\]
\]
},
{
"id": "68707f8165865aa4",
"type": "function",
"z": "c9c2f19d847f9a50",
"name": "function 15",
"func": "// Example using a Function node\\nif (msg.payload === true) {\\n    msg.bgcolor = "green";\\n} else {\\n    msg.bgcolor = "red";\\n}\\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [ ],
"x": 970,
"y": 500,
"wires": \[
\[
"7be648bd1063b138"
\]
\]
},
{
"id": "28d6534e2e4de1a0",
"type": "function",
"z": "c9c2f19d847f9a50",
"name": "function 16",
"func": "// Example using a Function node\\nif (msg.payload === true) {\\n    msg.bgcolor = "green";\\n} else {\\n    msg.bgcolor = "red";\\n}\\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [ ],
"x": 970,
"y": 600,
"wires": \[
\[
"3e9a19aa6c40328e"
\]
\]
},
{
"id": "6ed6de98a4546d0b",
"type": "function",
"z": "c9c2f19d847f9a50",
"name": "function 17",
"func": "// Example using a Function node\\nif (msg.payload === true) {\\n    msg.bgcolor = "green";\\n} else {\\n    msg.bgcolor = "red";\\n}\\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [ ],
"x": 970,
"y": 700,
"wires": \[
\[
"6a5515252779524e"
\]
\]
},
{
"id": "d573bbe770c1eecd",
"type": "function",
"z": "c9c2f19d847f9a50",
"name": "function 18",
"func": "// Example using a Function node\\nif (msg.payload === true) {\\n    msg.bgcolor = "green";\\n} else {\\n    msg.bgcolor = "red";\\n}\\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [ ],
"x": 970,
"y": 800,
"wires": \[
\[
"17732e6da7c242be"
\]
\]
},
{
"id": "6d82717d2fc659a2",
"type": "function",
"z": "c9c2f19d847f9a50",
"name": "function 19",
"func": "// Example using a Function node\\nif (msg.payload === true) {\\n    msg.bgcolor = "green";\\n} else {\\n    msg.bgcolor = "red";\\n}\\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [ ],
"x": 970,
"y": 900,
"wires": \[
\[
"82c08585a9e4fb3e"
\]
\]
},
{
"id": "51ce5d842d1fbb35",
"type": "function",
"z": "c9c2f19d847f9a50",
"name": "function 20",
"func": "// Example using a Function node\\nif (msg.payload === true) {\\n    msg.bgcolor = "green";\\n} else {\\n    msg.bgcolor = "red";\\n}\\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [ ],
"x": 970,
"y": 1000,
"wires": \[
\[
"88b553a669eefb25"
\]
\]
},
{
"id": "608464203e21497f",
"type": "function",
"z": "c9c2f19d847f9a50",
"name": "function 21",
"func": "// Example using a Function node\\nif (msg.payload === true) {\\n    msg.bgcolor = "green";\\n} else {\\n    msg.bgcolor = "red";\\n}\\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [ ],
"x": 970,
"y": 1100,
"wires": \[
\[
"3859131800905974"
\]
\]
},
{
"id": "74ad9d958cdaf8c5",
"type": "function",
"z": "c9c2f19d847f9a50",
"name": "function 22",
"func": "// Example using a Function node\\nif (msg.payload === true) {\\n    msg.bgcolor = "green";\\n} else {\\n    msg.bgcolor = "red";\\n}\\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [ ],
"x": 970,
"y": 1200,
"wires": \[
\[
"18411b1e1d12223e"
\]
\]
},
{
"id": "8578f605d6781291",
"type": "function",
"z": "c9c2f19d847f9a50",
"name": "function 23",
"func": "// Example using a Function node\\nif (msg.payload === true) {\\n    msg.bgcolor = "green";\\n} else {\\n    msg.bgcolor = "red";\\n}\\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [ ],
"x": 970,
"y": 1300,
"wires": \[
\[
"929a0a527b7495a5"
\]
\]
},
{
"id": "7b2b5b541849dedc",
"type": "function",
"z": "c9c2f19d847f9a50",
"name": "function 24",
"func": "// Example using a Function node\\nif (msg.payload === true) {\\n    msg.bgcolor = "green";\\n} else {\\n    msg.bgcolor = "red";\\n}\\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [ ],
"x": 970,
"y": 1400,
"wires": \[
\[
"857e3d915261b0d3"
\]
\]
},
{
"id": "89cd21f94d796a95",
"type": "function",
"z": "c9c2f19d847f9a50",
"name": "function 25",
"func": "// Example using a Function node\\nif (msg.payload === true) {\\n    msg.bgcolor = "green";\\n} else {\\n    msg.bgcolor = "red";\\n}\\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [ ],
"x": 970,
"y": 1500,
"wires": \[
\[
"ca1a549e4066738a"
\]
\]
},
{
"id": "ec6e46a2ac928d55",
"type": "debug",
"z": "c9c2f19d847f9a50",
"name": "debug 4",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"statusVal": "",
"statusType": "auto",
"x": 580,
"y": 300,
"wires": [ ]
},
{
"id": "2bb9b2126792f3c9",
"type": "debug",
"z": "c9c2f19d847f9a50",
"name": "debug 5",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"statusVal": "",
"statusType": "auto",
"x": 880,
"y": 300,
"wires": [ ]
},
{
"id": "052e42c75fd88a68",
"type": "debug",
"z": "c9c2f19d847f9a50",
"name": "debug 6",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "bgcolor",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 1180,
"y": 300,
"wires": [ ]
},
{
"id": "edc73090c74155fd",
"type": "ui_group",
"name": "Dust Collection System",
"tab": "c08f9a3c51d49dad",
"order": 2,
"disp": true,
"width": "6",
"collapse": false,
"className": ""
},
{
"id": "c08f9a3c51d49dad",
"type": "ui_tab",
"name": "Dust Collection System",
"icon": "dashboard",
"order": 1,
"disabled": false,
"hidden": false
}
]

admin edit: wrap code in triple back ticks

5

Also, the code you posted for me, using the toggle node, isn’t clear. Can you post it again in a more readable format? Sorry if I am doing this wrong, but I am new to this and having a great time, but it is complicated.

6

I tried correcting your code posting but it has backlashes throughout.

In order to make code readable and usable it is necessary to surround your code with three backticks (also known as a left quote or backquote ```)

``` 
   code goes here 
```

You can edit and correct your post by clicking the pencil :pencil: icon.

See this post for more details - How to share code or flow json

7

it means it is older dashboard. since you are new, I would recommend to check flowfuse dashboard.

the flow i posted, was specific to newer dashboard.

try this. there may be other simpler way of doing this, but this is one way.

[{"id":"2fb0f38a9ae0dc0f","type":"group","z":"be6d7a036125d1ad","style":{"stroke":"#999999","stroke-opacity":"1","fill":"none","fill-opacity":"1","label":true,"label-position":"nw","color":"#a4a4a4"},"nodes":["227339d1b89173eb","109c830bfd64aaa2","41731d1ead340cf3","40b2b8cc59c1454f","f19a4818998155d8","13ba9bc4cc361d63","10fddb7660aaabbd","98d79c018d1bc776","6ad25703e6caf711"],"x":354,"y":1409,"w":627,"h":157},{"id":"227339d1b89173eb","type":"ui_button","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"","group":"5b5ee9f169c93ecf","order":12,"width":"6","height":"1","passthru":false,"label":"{{label}}","tooltip":"","color":"{{fcolor}}","bgcolor":"{{bcolor}}","className":"","icon":"","payload":"-","payloadType":"str","topic":"-","topicType":"str","x":550,"y":1500,"wires":[["109c830bfd64aaa2"]]},{"id":"109c830bfd64aaa2","type":"toggle","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"","onOffTopic":"","onValue":"on","onType":"str","offValue":"off","offType":"str","toggleTopic":"","toggleValue":"","toggleType":"any","passOnOff":"ifChanged","x":660,"y":1500,"wires":[["41731d1ead340cf3"]],"l":false},{"id":"41731d1ead340cf3","type":"switch","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"on","vt":"str"},{"t":"eq","v":"off","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":735,"y":1500,"wires":[["f19a4818998155d8"],["40b2b8cc59c1454f"]],"l":false},{"id":"40b2b8cc59c1454f","type":"change","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"HIDE","rules":[{"t":"set","p":"label","pt":"msg","to":"This is green, click to turn red","tot":"str"},{"t":"set","p":"bcolor","pt":"msg","to":"green","tot":"str"},{"t":"set","p":"fcolor","pt":"msg","to":"white","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":785,"y":1525,"wires":[["6ad25703e6caf711"]],"l":false},{"id":"f19a4818998155d8","type":"change","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"SHOW","rules":[{"t":"set","p":"label","pt":"msg","to":"This is red, click to turn green","tot":"str"},{"t":"set","p":"bcolor","pt":"msg","to":"red","tot":"str"},{"t":"set","p":"fcolor","pt":"msg","to":"black","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":785,"y":1475,"wires":[["6ad25703e6caf711"]],"l":false},{"id":"13ba9bc4cc361d63","type":"link out","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"link out 401","mode":"link","links":["10fddb7660aaabbd"],"x":940,"y":1500,"wires":[]},{"id":"10fddb7660aaabbd","type":"link in","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"link in 411","links":["13ba9bc4cc361d63"],"x":460,"y":1500,"wires":[["227339d1b89173eb"]]},{"id":"98d79c018d1bc776","type":"inject","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"","props":[{"p":"label","v":"Click me!","vt":"str"},{"p":"bcolor","v":"blue","vt":"str"},{"p":"fcolor","v":"white","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":450,"y":1450,"wires":[["227339d1b89173eb"]]},{"id":"6ad25703e6caf711","type":"junction","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","x":850,"y":1500,"wires":[["13ba9bc4cc361d63"]]},{"id":"5b5ee9f169c93ecf","type":"ui_group","name":"demo","tab":"195948bb680041dd","order":1,"disp":false,"width":"32","collapse":false,"className":""},{"id":"195948bb680041dd","type":"ui_tab","name":"Demo","icon":"dashboard","order":15,"disabled":false,"hidden":false}]
8

if you are using Dashboard 2:

Use a change node, and set the property msg.ui_update.buttoncolor to the colour of your choice, this will override any colour you might have defined in your button properties under background.

If you are using Dashboard 1:

Set the background colour field in your button to {{background}}

Use a change node, and set the property msg.background to the colour of your choice

For both dashboards your can define the colour, using plain text (“blue”, “red”, “green”, etc) or you can use a hex code, may be even a rgb code.

This is explained in the documention of the button node for both dashboard versions.

9

I hope you are copying the code and inserting the same in your flow through ctrl+i (Import) route. I assume since you have not installed dashboard 2, the button node may not be rendered when you download the code.

this code should work for you, if you have downloaded the contrib code, i am not very fluent in javascript, else the toggle node can be replaced with a function node.

it will help if you could try again pasting the part of code that you are struggling with, the code you pasted, cannot be used even with @Steve-Mcl 's attempt in trying to clean the code.

10

Mrb32,

That is what my code does for what I guess is Dashboard 1. It does work, but my problem is I have 13 relays I am controlling. I created the flow for the first one and it worked perfect. Press the button once and it changed the color from the default Grey to Green and the Relay turned on. Press again and the button changed color from Green to Red and the relay turned off.

My problem is when I added the 12 additional relays. The code works sorta. I press a button (any of the 13) nothing happens. I press it again or any other button, and the color change happens and the relay turns on or off. So my problem is that I have to press the buttons twice to get the action to happen. If I remove the color option, then a single press causes the relay to turn on or off.

So my problem isn’t so much the color change not working but more that I have press things twice.

I am going to load Dashboard 2 today and see if that makes any different.

Thanks everyone for the help!

11

I exported the code from Node Red and I tried to upload, but being new, I can’t upload, so I opened the json file in Notepad and copied everything in it and pasted it into the post.

12

but you should be able to download the code as a file and then upload the file, sorry i cant remember how a 'new' member is supposed to share the code correctly.

13 
[{"id":"2fb0f38a9ae0dc0f","type":"group","z":"be6d7a036125d1ad","style":{"stroke":"#999999","stroke-opacity":"1","fill":"none","fill-opacity":"1","label":true,"label-position":"nw","color":"#a4a4a4"},"nodes":["227339d1b89173eb","109c830bfd64aaa2","41731d1ead340cf3","40b2b8cc59c1454f","f19a4818998155d8","13ba9bc4cc361d63","10fddb7660aaabbd","98d79c018d1bc776","6ad25703e6caf711","d6b809bfcf84913b","43cf88e6fde37874","5cf237d4686b2aca","d0b00517c7c34791","b7d13ffbe9f95c58","b7f4e1d2a14be9f9","370edb746677a8c1","98e4a8b93fe72f42","8016183b604e83c4","73f2a375347d6923","40e1019b9533907e","d245cf025c5251ed","56d734ac113ee1db","2fde9011c592d7ea","3bdbee0410fe3ab5","78833f6fb816fecc","827b922c0f508889","1ca9776895f6efed","b4932d4d042633b2","aac04f57ab219c02","0483f4af6b4eb227","72bd7ba1053292c1","a60b6b1abc80b0ac","3b1fc1fca8ee0a11","7c362cd0bb4c4447","38eed79d140331d5","85c5cadcb907a363"],"x":329,"y":1409,"w":627,"h":457},{"id":"227339d1b89173eb","type":"ui_button","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"","group":"5b5ee9f169c93ecf","order":12,"width":"6","height":"1","passthru":false,"label":"{{label}}","tooltip":"","color":"{{fcolor}}","bgcolor":"{{bcolor}}","className":"","icon":"","payload":"-","payloadType":"str","topic":"-","topicType":"str","x":525,"y":1500,"wires":[["109c830bfd64aaa2"]]},{"id":"109c830bfd64aaa2","type":"toggle","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"","onOffTopic":"","onValue":"on","onType":"str","offValue":"off","offType":"str","toggleTopic":"","toggleValue":"","toggleType":"any","passOnOff":"ifChanged","x":635,"y":1500,"wires":[["41731d1ead340cf3"]],"l":false},{"id":"41731d1ead340cf3","type":"switch","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"on","vt":"str"},{"t":"eq","v":"off","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":710,"y":1500,"wires":[["f19a4818998155d8"],["40b2b8cc59c1454f"]],"l":false},{"id":"40b2b8cc59c1454f","type":"change","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"HIDE","rules":[{"t":"set","p":"label","pt":"msg","to":"This is green, click to turn red","tot":"str"},{"t":"set","p":"bcolor","pt":"msg","to":"green","tot":"str"},{"t":"set","p":"fcolor","pt":"msg","to":"white","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":760,"y":1525,"wires":[["6ad25703e6caf711"]],"l":false},{"id":"f19a4818998155d8","type":"change","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"SHOW","rules":[{"t":"set","p":"label","pt":"msg","to":"This is red, click to turn green","tot":"str"},{"t":"set","p":"bcolor","pt":"msg","to":"red","tot":"str"},{"t":"set","p":"fcolor","pt":"msg","to":"black","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":760,"y":1475,"wires":[["6ad25703e6caf711"]],"l":false},{"id":"13ba9bc4cc361d63","type":"link out","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"link out 401","mode":"link","links":["10fddb7660aaabbd"],"x":915,"y":1500,"wires":[]},{"id":"10fddb7660aaabbd","type":"link in","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"link in 411","links":["13ba9bc4cc361d63"],"x":435,"y":1500,"wires":[["227339d1b89173eb"]]},{"id":"98d79c018d1bc776","type":"inject","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"","props":[{"p":"label","v":"Click me!","vt":"str"},{"p":"bcolor","v":"blue","vt":"str"},{"p":"fcolor","v":"white","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":425,"y":1450,"wires":[["227339d1b89173eb"]]},{"id":"6ad25703e6caf711","type":"junction","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","x":825,"y":1500,"wires":[["13ba9bc4cc361d63"]]},{"id":"d6b809bfcf84913b","type":"inject","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"","props":[{"p":"label","v":"Click me!","vt":"str"},{"p":"bcolor","v":"blue","vt":"str"},{"p":"fcolor","v":"white","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":425,"y":1550,"wires":[["43cf88e6fde37874"]]},{"id":"43cf88e6fde37874","type":"ui_button","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"","group":"5b5ee9f169c93ecf","order":12,"width":"6","height":"1","passthru":false,"label":"{{label}}","tooltip":"","color":"{{fcolor}}","bgcolor":"{{bcolor}}","className":"","icon":"","payload":"-","payloadType":"str","topic":"-","topicType":"str","x":525,"y":1600,"wires":[["d0b00517c7c34791"]]},{"id":"5cf237d4686b2aca","type":"link in","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"link in 412","links":["98e4a8b93fe72f42"],"x":435,"y":1600,"wires":[["43cf88e6fde37874"]]},{"id":"d0b00517c7c34791","type":"toggle","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"","onOffTopic":"","onValue":"on","onType":"str","offValue":"off","offType":"str","toggleTopic":"","toggleValue":"","toggleType":"any","passOnOff":"ifChanged","x":635,"y":1600,"wires":[["b7d13ffbe9f95c58"]],"l":false},{"id":"b7d13ffbe9f95c58","type":"switch","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"on","vt":"str"},{"t":"eq","v":"off","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":710,"y":1600,"wires":[["b7f4e1d2a14be9f9"],["370edb746677a8c1"]],"l":false},{"id":"b7f4e1d2a14be9f9","type":"change","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"SHOW","rules":[{"t":"set","p":"label","pt":"msg","to":"This is red, click to turn green","tot":"str"},{"t":"set","p":"bcolor","pt":"msg","to":"red","tot":"str"},{"t":"set","p":"fcolor","pt":"msg","to":"black","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":760,"y":1575,"wires":[["8016183b604e83c4"]],"l":false},{"id":"370edb746677a8c1","type":"change","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"HIDE","rules":[{"t":"set","p":"label","pt":"msg","to":"This is green, click to turn red","tot":"str"},{"t":"set","p":"bcolor","pt":"msg","to":"green","tot":"str"},{"t":"set","p":"fcolor","pt":"msg","to":"white","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":760,"y":1625,"wires":[["8016183b604e83c4"]],"l":false},{"id":"98e4a8b93fe72f42","type":"link out","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"link out 402","mode":"link","links":["5cf237d4686b2aca"],"x":915,"y":1600,"wires":[]},{"id":"8016183b604e83c4","type":"junction","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","x":825,"y":1600,"wires":[["98e4a8b93fe72f42"]]},{"id":"73f2a375347d6923","type":"inject","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"","props":[{"p":"label","v":"Click me!","vt":"str"},{"p":"bcolor","v":"blue","vt":"str"},{"p":"fcolor","v":"white","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":425,"y":1650,"wires":[["40e1019b9533907e"]]},{"id":"40e1019b9533907e","type":"ui_button","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"","group":"5b5ee9f169c93ecf","order":12,"width":"6","height":"1","passthru":false,"label":"{{label}}","tooltip":"","color":"{{fcolor}}","bgcolor":"{{bcolor}}","className":"","icon":"","payload":"-","payloadType":"str","topic":"-","topicType":"str","x":525,"y":1700,"wires":[["56d734ac113ee1db"]]},{"id":"d245cf025c5251ed","type":"link in","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"link in 413","links":["827b922c0f508889"],"x":435,"y":1700,"wires":[["40e1019b9533907e"]]},{"id":"56d734ac113ee1db","type":"toggle","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"","onOffTopic":"","onValue":"on","onType":"str","offValue":"off","offType":"str","toggleTopic":"","toggleValue":"","toggleType":"any","passOnOff":"ifChanged","x":635,"y":1700,"wires":[["2fde9011c592d7ea"]],"l":false},{"id":"2fde9011c592d7ea","type":"switch","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"on","vt":"str"},{"t":"eq","v":"off","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":710,"y":1700,"wires":[["3bdbee0410fe3ab5"],["78833f6fb816fecc"]],"l":false},{"id":"3bdbee0410fe3ab5","type":"change","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"SHOW","rules":[{"t":"set","p":"label","pt":"msg","to":"This is red, click to turn green","tot":"str"},{"t":"set","p":"bcolor","pt":"msg","to":"red","tot":"str"},{"t":"set","p":"fcolor","pt":"msg","to":"black","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":760,"y":1675,"wires":[["1ca9776895f6efed"]],"l":false},{"id":"78833f6fb816fecc","type":"change","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"HIDE","rules":[{"t":"set","p":"label","pt":"msg","to":"This is green, click to turn red","tot":"str"},{"t":"set","p":"bcolor","pt":"msg","to":"green","tot":"str"},{"t":"set","p":"fcolor","pt":"msg","to":"white","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":760,"y":1725,"wires":[["1ca9776895f6efed"]],"l":false},{"id":"827b922c0f508889","type":"link out","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"link out 403","mode":"link","links":["d245cf025c5251ed"],"x":915,"y":1700,"wires":[]},{"id":"1ca9776895f6efed","type":"junction","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","x":825,"y":1700,"wires":[["827b922c0f508889"]]},{"id":"b4932d4d042633b2","type":"inject","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"","props":[{"p":"label","v":"Click me!","vt":"str"},{"p":"bcolor","v":"blue","vt":"str"},{"p":"fcolor","v":"white","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":425,"y":1750,"wires":[["aac04f57ab219c02"]]},{"id":"aac04f57ab219c02","type":"ui_button","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"","group":"5b5ee9f169c93ecf","order":12,"width":"6","height":"1","passthru":false,"label":"{{label}}","tooltip":"","color":"{{fcolor}}","bgcolor":"{{bcolor}}","className":"","icon":"","payload":"-","payloadType":"str","topic":"-","topicType":"str","x":525,"y":1800,"wires":[["72bd7ba1053292c1"]]},{"id":"0483f4af6b4eb227","type":"link in","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"link in 414","links":["38eed79d140331d5"],"x":390,"y":1800,"wires":[["aac04f57ab219c02"]]},{"id":"72bd7ba1053292c1","type":"toggle","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"","onOffTopic":"","onValue":"on","onType":"str","offValue":"off","offType":"str","toggleTopic":"","toggleValue":"","toggleType":"any","passOnOff":"ifChanged","x":635,"y":1800,"wires":[["a60b6b1abc80b0ac"]],"l":false},{"id":"a60b6b1abc80b0ac","type":"switch","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"on","vt":"str"},{"t":"eq","v":"off","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":710,"y":1800,"wires":[["3b1fc1fca8ee0a11"],["7c362cd0bb4c4447"]],"l":false},{"id":"3b1fc1fca8ee0a11","type":"change","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"SHOW","rules":[{"t":"set","p":"label","pt":"msg","to":"This is red, click to turn green","tot":"str"},{"t":"set","p":"bcolor","pt":"msg","to":"red","tot":"str"},{"t":"set","p":"fcolor","pt":"msg","to":"black","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":760,"y":1775,"wires":[["85c5cadcb907a363"]],"l":false},{"id":"7c362cd0bb4c4447","type":"change","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"HIDE","rules":[{"t":"set","p":"label","pt":"msg","to":"This is green, click to turn red","tot":"str"},{"t":"set","p":"bcolor","pt":"msg","to":"green","tot":"str"},{"t":"set","p":"fcolor","pt":"msg","to":"white","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":760,"y":1825,"wires":[["85c5cadcb907a363"]],"l":false},{"id":"38eed79d140331d5","type":"link out","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","name":"link out 404","mode":"link","links":["0483f4af6b4eb227"],"x":915,"y":1800,"wires":[]},{"id":"85c5cadcb907a363","type":"junction","z":"be6d7a036125d1ad","g":"2fb0f38a9ae0dc0f","x":825,"y":1800,"wires":[["38eed79d140331d5"]]},{"id":"5b5ee9f169c93ecf","type":"ui_group","name":"demo","tab":"195948bb680041dd","order":1,"disp":false,"width":"32","collapse":false,"className":""},{"id":"195948bb680041dd","type":"ui_tab","name":"Demo","icon":"dashboard","order":15,"disabled":false,"hidden":false}]

try this for dashboard 1

14

To post code here Export it direct to the clipboard, then paste it here. Notepad may have messed with it.

15

I’ve updated you to a basic user so you should be able to upload a flow. When you go to export your flow select the ‘compact’ option and it won’t take as much room when you post it.

In order to make code readable and usable it is necessary to surround your code with three backticks (also known as a left quote or backquote ```)

``` 
   code goes here 
```

You can edit and correct your post by clicking the pencil :pencil: icon.

See this post for more details - How to share code or flow json

16

All, I am sorry, but you guys are giving me lots of good advice, but some of it makes a lot of sense and a lot of it is very confusing unless you are a node red expert, which I am not.

I have looked and there are lots of “nodes” for Dashboard 2, but I can’t see where you install Dashboard 2 at all, nor how to do chose to use it instead of Dashboard 1.

I have changed the code to have an LED at the end instead of trying to change the button color and I am running into the same problem.

Let me try again to explain my issue. So I create the button and the output relay with the necessary functions to change the relay state and I create a function to change the relay state into a color and I have been able to pass that back to the button background color or to the LED. My problem is that you have to click twice on the buttons most of the time. I can deploy the flow and then click the Gate 1 button and the LED and if I did it correctly, the button background will change color to green. Now I want to turn it off or turn another gate on and I have to then click the second gate button twice before it works. It appears that I can click a single gate on and off all the time and it works, but the moment I turn on gate 1 and then try to turn on any other gate, I have to click that gate button twice. Once the second gate is on, then I can turn it off in a single click or if I go back to gate 1, then I have to click the button twice. I hope that makes sense.

Here is the code in compact format copied to the clipboard and then pasted here.

[{"id":"c9c2f19d847f9a50","type":"tab","label":"Dust Collection 2","disabled":false,"info":"","env":},{"id":"84b10cfa3f14fe82","type":"16relind","z":"c9c2f19d847f9a50","name":"","stack":"0","relay":"1","payload":"payload","payloadType":"msg","x":600,"y":100,"wires":[["489f18bab9bf4b2f","e2712436a95355d5","9bd849affbd4245e"]]},{"id":"622216744987f557","type":"16relind","z":"c9c2f19d847f9a50","name":"","stack":"0","relay":"2","payload":"payload","payloadType":"msg","x":700,"y":400,"wires":[["03fc620386eee4f7"]]},{"id":"17c6047175ba9e28","type":"16relind","z":"c9c2f19d847f9a50","name":"","stack":"0","relay":"3","payload":"payload","payloadType":"msg","x":700,"y":500,"wires":[["844bf27f9804b421"]]},{"id":"88cbda91fa028e6f","type":"16relind","z":"c9c2f19d847f9a50","name":"","stack":"0","relay":"4","payload":"payload","payloadType":"msg","x":700,"y":600,"wires":[["aa83a2fd3b98a1c8"]]},{"id":"89dc3e2f258923b4","type":"16relind","z":"c9c2f19d847f9a50","name":"","stack":"0","relay":"5","payload":"payload","payloadType":"msg","x":700,"y":700,"wires":[["f5589ee82d137637"]]},{"id":"1f55a460dd4302d9","type":"16relind","z":"c9c2f19d847f9a50","name":"","stack":"0","relay":"6","payload":"payload","payloadType":"msg","x":700,"y":800,"wires":[["410d633f76b33a6f"]]},{"id":"6ec1135739a8f067","type":"16relind","z":"c9c2f19d847f9a50","name":"","stack":"0","relay":"7","payload":"payload","payloadType":"msg","x":700,"y":900,"wires":[["786356c72968f161"]]},{"id":"a821621535471764","type":"16relind","z":"c9c2f19d847f9a50","name":"","stack":"0","relay":"8","payload":"payload","payloadType":"msg","x":700,"y":1000,"wires":[["8e2261c596675f47"]]},{"id":"3911681cc472d7e7","type":"16relind","z":"c9c2f19d847f9a50","name":"","stack":"0","relay":"9","payload":"payload","payloadType":"msg","x":700,"y":1100,"wires":[["13ce6c53ac972bf7"]]},{"id":"ead575f055c4fa0f","type":"16relind","z":"c9c2f19d847f9a50","name":"","stack":"0","relay":"10","payload":"payload","payloadType":"msg","x":700,"y":1200,"wires":[["4a40457185e0eda4"]]},{"id":"0202d9ebb7ab6d37","type":"16relind","z":"c9c2f19d847f9a50","name":"","stack":"0","relay":"11","payload":"payload","payloadType":"msg","x":700,"y":1300,"wires":[["d70a0be92e85d627"]]},{"id":"5e0c8194609eb1e0","type":"16relind","z":"c9c2f19d847f9a50","name":"","stack":"0","relay":"12","payload":"payload","payloadType":"msg","x":700,"y":1400,"wires":[["3b8877978e88fd4a"]]},{"id":"c0c893458e3411a9","type":"16relind","z":"c9c2f19d847f9a50","name":"","stack":"0","relay":"13","payload":"payload","payloadType":"msg","x":700,"y":1500,"wires":[["2b091c51bab45d6e"]]},{"id":"ca1786b55ee68f5c","type":"ui_button","z":"c9c2f19d847f9a50","name":"","group":"edc73090c74155fd","order":1,"width":6,"height":1,"passthru":false,"label":"Gate 1","tooltip":"","color":"","bgcolor":"msg.bgcolor","className":"","icon":"","payload":"true","payloadType":"bool","topic":"topic","topicType":"msg","x":190,"y":100,"wires":[["7518e893d987e04a"]]},{"id":"7518e893d987e04a","type":"function","z":"c9c2f19d847f9a50","name":"function 1","func":" // Get the current state from flow context, or initialize to false (off)\n    let state = flow.get('buttonState') || false; \n\n    // Toggle the state\n    state = !state; \n\n    // Store the new state\n    flow.set('buttonState', state);\n\n    // Set the payload based on the new state\n    if (state) {\n        msg.payload = true; // Or "ON", 1, etc.\n    } else {\n        msg.payload = false; // Or "OFF", 0, etc.\n    }\n\n    return msg;\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":,"x":380,"y":100,"wires":[["84b10cfa3f14fe82","8e9f0cd13e626303"]]},{"id":"9bd849affbd4245e","type":"function","z":"c9c2f19d847f9a50","name":"function 21","func":"// Example using a Function node\nif (msg.payload === true) {\n    msg.bgcolor = "green";\n} else {\n    msg.bgcolor = "red";\n}\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":,"x":1030,"y":160,"wires":[["d13be6f4672d1f24","ca1786b55ee68f5c"]]},{"id":"8e9f0cd13e626303","type":"debug","z":"c9c2f19d847f9a50","name":"debug 1","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":700,"y":180,"wires":},{"id":"489f18bab9bf4b2f","type":"debug","z":"c9c2f19d847f9a50","name":"debug 2","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":880,"y":20,"wires":},{"id":"d13be6f4672d1f24","type":"debug","z":"c9c2f19d847f9a50","name":"debug 3","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"bgcolor","targetType":"msg","statusVal":"","statusType":"auto","x":1480,"y":200,"wires":},{"id":"042e9818402bb3f5","type":"ui_button","z":"c9c2f19d847f9a50","name":"","group":"edc73090c74155fd","order":3,"width":6,"height":1,"passthru":false,"label":"Gate 2","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"true","payloadType":"bool","topic":"topic","topicType":"msg","x":210,"y":400,"wires":[["3c702607b5495abc"]]},{"id":"7be648bd1063b138","type":"ui_button","z":"c9c2f19d847f9a50","name":"","group":"edc73090c74155fd","order":5,"width":6,"height":1,"passthru":false,"label":"Gate 3","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"true","payloadType":"bool","topic":"topic","topicType":"msg","x":210,"y":500,"wires":[["5eead95a5a05b389"]]},{"id":"3e9a19aa6c40328e","type":"ui_button","z":"c9c2f19d847f9a50","name":"","group":"edc73090c74155fd","order":7,"width":6,"height":1,"passthru":false,"label":"Gate 4","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"true","payloadType":"bool","topic":"topic","topicType":"msg","x":210,"y":600,"wires":[["df31dacead1fdaf9"]]},{"id":"6a5515252779524e","type":"ui_button","z":"c9c2f19d847f9a50","name":"","group":"edc73090c74155fd","order":9,"width":6,"height":1,"passthru":false,"label":"Gate 5","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"true","payloadType":"bool","topic":"topic","topicType":"msg","x":210,"y":700,"wires":[["03ecca105e518d76"]]},{"id":"17732e6da7c242be","type":"ui_button","z":"c9c2f19d847f9a50","name":"","group":"edc73090c74155fd","order":11,"width":6,"height":1,"passthru":false,"label":"Gate 6","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"true","payloadType":"bool","topic":"topic","topicType":"msg","x":210,"y":800,"wires":[["4d2c75361f2948c2"]]},{"id":"82c08585a9e4fb3e","type":"ui_button","z":"c9c2f19d847f9a50","name":"","group":"edc73090c74155fd","order":13,"width":6,"height":1,"passthru":false,"label":"Gate 7","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"true","payloadType":"bool","topic":"topic","topicType":"msg","x":210,"y":900,"wires":[["71af3bc6e5a9b408"]]},{"id":"88b553a669eefb25","type":"ui_button","z":"c9c2f19d847f9a50","name":"","group":"edc73090c74155fd","order":15,"width":6,"height":1,"passthru":false,"label":"Gate 8","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"true","payloadType":"bool","topic":"topic","topicType":"msg","x":210,"y":1000,"wires":[["1f861ed518ced38c"]]},{"id":"3859131800905974","type":"ui_button","z":"c9c2f19d847f9a50","name":"","group":"edc73090c74155fd","order":17,"width":6,"height":1,"passthru":false,"label":"Gate 9","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"true","payloadType":"bool","topic":"topic","topicType":"msg","x":210,"y":1100,"wires":[["23bfcb2bc81ee018"]]},{"id":"18411b1e1d12223e","type":"ui_button","z":"c9c2f19d847f9a50","name":"","group":"edc73090c74155fd","order":19,"width":6,"height":1,"passthru":false,"label":"Gate 10","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"true","payloadType":"bool","topic":"topic","topicType":"msg","x":220,"y":1200,"wires":[["1ee2823812cb7e2b"]]},{"id":"929a0a527b7495a5","type":"ui_button","z":"c9c2f19d847f9a50","name":"","group":"edc73090c74155fd","order":21,"width":6,"height":1,"passthru":false,"label":"Gate 11","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"true","payloadType":"bool","topic":"topic","topicType":"msg","x":220,"y":1300,"wires":[["74e0cda531324b12"]]},{"id":"857e3d915261b0d3","type":"ui_button","z":"c9c2f19d847f9a50","name":"","group":"edc73090c74155fd","order":23,"width":6,"height":1,"passthru":false,"label":"Gate 12","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"true","payloadType":"bool","topic":"topic","topicType":"msg","x":220,"y":1400,"wires":[["88a0fb2767de4404"]]},{"id":"ca1a549e4066738a","type":"ui_button","z":"c9c2f19d847f9a50","name":"","group":"edc73090c74155fd","order":25,"width":6,"height":1,"passthru":false,"label":"Gate 13","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"true","payloadType":"bool","topic":"topic","topicType":"msg","x":220,"y":1500,"wires":[["2463e7009a925a54"]]},{"id":"5eead95a5a05b389","type":"function","z":"c9c2f19d847f9a50","name":"function 3","func":" // Get the current state from flow context, or initialize to false (off)\n    let state = flow.get('buttonState') || false; \n\n    // Toggle the state\n    state = !state; \n\n    // Store the new state\n    flow.set('buttonState', state);\n\n    // Set the payload based on the new state\n    if (state) {\n        msg.payload = true; // Or "ON", 1, etc.\n    } else {\n        msg.payload = false; // Or "OFF", 0, etc.\n    }\n\n    return msg;\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":,"x":420,"y":500,"wires":[["17c6047175ba9e28"]]},{"id":"df31dacead1fdaf9","type":"function","z":"c9c2f19d847f9a50","name":"function 4","func":" // Get the current state from flow context, or initialize to false (off)\n    let state = flow.get('buttonState') || false; \n\n    // Toggle the state\n    state = !state; \n\n    // Store the new state\n    flow.set('buttonState', state);\n\n    // Set the payload based on the new state\n    if (state) {\n        msg.payload = true; // Or "ON", 1, etc.\n    } else {\n        msg.payload = false; // Or "OFF", 0, etc.\n    }\n\n    return msg;\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":,"x":420,"y":600,"wires":[["88cbda91fa028e6f"]]},{"id":"03ecca105e518d76","type":"function","z":"c9c2f19d847f9a50","name":"function 5","func":" // Get the current state from flow context, or initialize to false (off)\n    let state = flow.get('buttonState') || false; \n\n    // Toggle the state\n    state = !state; \n\n    // Store the new state\n    flow.set('buttonState', state);\n\n    // Set the payload based on the new state\n    if (state) {\n        msg.payload = true; // Or "ON", 1, etc.\n    } else {\n        msg.payload = false; // Or "OFF", 0, etc.\n    }\n\n    return msg;\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":,"x":420,"y":700,"wires":[["89dc3e2f258923b4"]]},{"id":"4d2c75361f2948c2","type":"function","z":"c9c2f19d847f9a50","name":"function 6","func":" // Get the current state from flow context, or initialize to false (off)\n    let state = flow.get('buttonState') || false; \n\n    // Toggle the state\n    state = !state; \n\n    // Store the new state\n    flow.set('buttonState', state);\n\n    // Set the payload based on the new state\n    if (state) {\n        msg.payload = true; // Or "ON", 1, etc.\n    } else {\n        msg.payload = false; // Or "OFF", 0, etc.\n    }\n\n    return msg;\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":,"x":420,"y":800,"wires":[["1f55a460dd4302d9"]]},{"id":"71af3bc6e5a9b408","type":"function","z":"c9c2f19d847f9a50","name":"function 7","func":" // Get the current state from flow context, or initialize to false (off)\n    let state = flow.get('buttonState') || false; \n\n    // Toggle the state\n    state = !state; \n\n    // Store the new state\n    flow.set('buttonState', state);\n\n    // Set the payload based on the new state\n    if (state) {\n        msg.payload = true; // Or "ON", 1, etc.\n    } else {\n        msg.payload = false; // Or "OFF", 0, etc.\n    }\n\n    return msg;\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":,"x":420,"y":900,"wires":[["6ec1135739a8f067"]]},{"id":"1f861ed518ced38c","type":"function","z":"c9c2f19d847f9a50","name":"function 8","func":" // Get the current state from flow context, or initialize to false (off)\n    let state = flow.get('buttonState') || false; \n\n    // Toggle the state\n    state = !state; \n\n    // Store the new state\n    flow.set('buttonState', state);\n\n    // Set the payload based on the new state\n    if (state) {\n        msg.payload = true; // Or "ON", 1, etc.\n    } else {\n        msg.payload = false; // Or "OFF", 0, etc.\n    }\n\n    return msg;\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":,"x":420,"y":1000,"wires":[["a821621535471764"]]},{"id":"23bfcb2bc81ee018","type":"function","z":"c9c2f19d847f9a50","name":"function 9","func":" // Get the current state from flow context, or initialize to false (off)\n    let state = flow.get('buttonState') || false; \n\n    // Toggle the state\n    state = !state; \n\n    // Store the new state\n    flow.set('buttonState', state);\n\n    // Set the payload based on the new state\n    if (state) {\n        msg.payload = true; // Or "ON", 1, etc.\n    } else {\n        msg.payload = false; // Or "OFF", 0, etc.\n    }\n\n    return msg;\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":,"x":420,"y":1100,"wires":[["3911681cc472d7e7"]]},{"id":"1ee2823812cb7e2b","type":"function","z":"c9c2f19d847f9a50","name":"function 10","func":" // Get the current state from flow context, or initialize to false (off)\n    let state = flow.get('buttonState') || false; \n\n    // Toggle the state\n    state = !state; \n\n    // Store the new state\n    flow.set('buttonState', state);\n\n    // Set the payload based on the new state\n    if (state) {\n        msg.payload = true; // Or "ON", 1, etc.\n    } else {\n        msg.payload = false; // Or "OFF", 0, etc.\n    }\n\n    return msg;\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":,"x":420,"y":1200,"wires":[["ead575f055c4fa0f"]]},{"id":"74e0cda531324b12","type":"function","z":"c9c2f19d847f9a50","name":"function 11","func":" // Get the current state from flow context, or initialize to false (off)\n    let state = flow.get('buttonState') || false; \n\n    // Toggle the state\n    state = !state; \n\n    // Store the new state\n    flow.set('buttonState', state);\n\n    // Set the payload based on the new state\n    if (state) {\n        msg.payload = true; // Or "ON", 1, etc.\n    } else {\n        msg.payload = false; // Or "OFF", 0, etc.\n    }\n\n    return msg;\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":,"x":430,"y":1300,"wires":[["0202d9ebb7ab6d37"]]},{"id":"88a0fb2767de4404","type":"function","z":"c9c2f19d847f9a50","name":"function 12","func":" // Get the current state from flow context, or initialize to false (off)\n    let state = flow.get('buttonState') || false; \n\n    // Toggle the state\n    state = !state; \n\n    // Store the new state\n    flow.set('buttonState', state);\n\n    // Set the payload based on the new state\n    if (state) {\n        msg.payload = true; // Or "ON", 1, etc.\n    } else {\n        msg.payload = false; // Or "OFF", 0, etc.\n    }\n\n    return msg;\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":,"x":430,"y":1400,"wires":[["5e0c8194609eb1e0"]]},{"id":"2463e7009a925a54","type":"function","z":"c9c2f19d847f9a50","name":"function 13","func":" // Get the current state from flow context, or initialize to false (off)\n    let state = flow.get('buttonState') || false; \n\n    // Toggle the state\n    state = !state; \n\n    // Store the new state\n    flow.set('buttonState', state);\n\n    // Set the payload based on the new state\n    if (state) {\n        msg.payload = true; // Or "ON", 1, etc.\n    } else {\n        msg.payload = false; // Or "OFF", 0, etc.\n    }\n\n    return msg;\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":,"x":430,"y":1500,"wires":[["c0c893458e3411a9"]]},{"id":"3c702607b5495abc","type":"function","z":"c9c2f19d847f9a50","name":"function 2","func":" // Get the current state from flow context, or initialize to false (off)\n    let state = flow.get('buttonState') || false; \n\n    // Toggle the state\n    state = !state; \n\n    // Store the new state\n    flow.set('buttonState', state);\n\n    // Set the payload based on the new state\n    if (state) {\n        msg.payload = true; // Or "ON", 1, etc.\n    } else {\n        msg.payload = false; // Or "OFF", 0, etc.\n    }\n\n    return msg;\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":,"x":420,"y":400,"wires":[["622216744987f557"]]},{"id":"03fc620386eee4f7","type":"ui_led","z":"c9c2f19d847f9a50","order":4,"group":"edc73090c74155fd","width":6,"height":1,"label":"","labelPlacement":"left","labelAlignment":"left","colorForValue":[{"color":"#ff0000","value":"false","valueType":"bool"},{"color":"#008000","value":"true","valueType":"bool"}],"allowColorForValueInMessage":false,"shape":"circle","showGlow":true,"name":"","x":950,"y":400,"wires":},{"id":"844bf27f9804b421","type":"ui_led","z":"c9c2f19d847f9a50","order":6,"group":"edc73090c74155fd","width":6,"height":1,"label":"","labelPlacement":"left","labelAlignment":"left","colorForValue":[{"color":"#ff0000","value":"false","valueType":"bool"},{"color":"#008000","value":"true","valueType":"bool"}],"allowColorForValueInMessage":false,"shape":"circle","showGlow":true,"name":"","x":950,"y":500,"wires":},{"id":"aa83a2fd3b98a1c8","type":"ui_led","z":"c9c2f19d847f9a50","order":8,"group":"edc73090c74155fd","width":6,"height":1,"label":"","labelPlacement":"left","labelAlignment":"left","colorForValue":[{"color":"#ff0000","value":"false","valueType":"bool"},{"color":"#008000","value":"true","valueType":"bool"}],"allowColorForValueInMessage":false,"shape":"circle","showGlow":true,"name":"","x":950,"y":600,"wires":},{"id":"f5589ee82d137637","type":"ui_led","z":"c9c2f19d847f9a50","order":10,"group":"edc73090c74155fd","width":6,"height":1,"label":"","labelPlacement":"left","labelAlignment":"left","colorForValue":[{"color":"#ff0000","value":"false","valueType":"bool"},{"color":"#008000","value":"true","valueType":"bool"}],"allowColorForValueInMessage":false,"shape":"circle","showGlow":true,"name":"","x":950,"y":700,"wires":},{"id":"410d633f76b33a6f","type":"ui_led","z":"c9c2f19d847f9a50","order":12,"group":"edc73090c74155fd","width":6,"height":1,"label":"","labelPlacement":"left","labelAlignment":"left","colorForValue":[{"color":"#ff0000","value":"false","valueType":"bool"},{"color":"#008000","value":"true","valueType":"bool"}],"allowColorForValueInMessage":false,"shape":"circle","showGlow":true,"name":"","x":950,"y":800,"wires":},{"id":"786356c72968f161","type":"ui_led","z":"c9c2f19d847f9a50","order":14,"group":"edc73090c74155fd","width":6,"height":1,"label":"","labelPlacement":"left","labelAlignment":"left","colorForValue":[{"color":"#ff0000","value":"false","valueType":"bool"},{"color":"#008000","value":"true","valueType":"bool"}],"allowColorForValueInMessage":false,"shape":"circle","showGlow":true,"name":"","x":950,"y":900,"wires":},{"id":"8e2261c596675f47","type":"ui_led","z":"c9c2f19d847f9a50","order":16,"group":"edc73090c74155fd","width":6,"height":1,"label":"","labelPlacement":"left","labelAlignment":"left","colorForValue":[{"color":"#ff0000","value":"false","valueType":"bool"},{"color":"#008000","value":"true","valueType":"bool"}],"allowColorForValueInMessage":false,"shape":"circle","showGlow":true,"name":"","x":950,"y":1000,"wires":},{"id":"13ce6c53ac972bf7","type":"ui_led","z":"c9c2f19d847f9a50","order":18,"group":"edc73090c74155fd","width":6,"height":1,"label":"","labelPlacement":"left","labelAlignment":"left","colorForValue":[{"color":"#ff0000","value":"false","valueType":"bool"},{"color":"#008000","value":"true","valueType":"bool"}],"allowColorForValueInMessage":false,"shape":"circle","showGlow":true,"name":"","x":950,"y":1100,"wires":},{"id":"4a40457185e0eda4","type":"ui_led","z":"c9c2f19d847f9a50","order":20,"group":"edc73090c74155fd","width":6,"height":1,"label":"","labelPlacement":"left","labelAlignment":"left","colorForValue":[{"color":"#ff0000","value":"false","valueType":"bool"},{"color":"#008000","value":"true","valueType":"bool"}],"allowColorForValueInMessage":false,"shape":"circle","showGlow":true,"name":"","x":950,"y":1200,"wires":},{"id":"d70a0be92e85d627","type":"ui_led","z":"c9c2f19d847f9a50","order":22,"group":"edc73090c74155fd","width":6,"height":1,"label":"","labelPlacement":"left","labelAlignment":"left","colorForValue":[{"color":"#ff0000","value":"false","valueType":"bool"},{"color":"#008000","value":"true","valueType":"bool"}],"allowColorForValueInMessage":false,"shape":"circle","showGlow":true,"name":"","x":950,"y":1300,"wires":},{"id":"3b8877978e88fd4a","type":"ui_led","z":"c9c2f19d847f9a50","order":24,"group":"edc73090c74155fd","width":6,"height":1,"label":"","labelPlacement":"left","labelAlignment":"left","colorForValue":[{"color":"#ff0000","value":"false","valueType":"bool"},{"color":"#008000","value":"true","valueType":"bool"}],"allowColorForValueInMessage":false,"shape":"circle","showGlow":true,"name":"","x":950,"y":1400,"wires":},{"id":"2b091c51bab45d6e","type":"ui_led","z":"c9c2f19d847f9a50","order":26,"group":"edc73090c74155fd","width":6,"height":1,"label":"","labelPlacement":"left","labelAlignment":"left","colorForValue":[{"color":"#ff0000","value":"false","valueType":"bool"},{"color":"#008000","value":"true","valueType":"bool"}],"allowColorForValueInMessage":false,"shape":"circle","showGlow":true,"name":"","x":950,"y":1500,"wires":},{"id":"e2712436a95355d5","type":"ui_led","z":"c9c2f19d847f9a50","order":2,"group":"edc73090c74155fd","width":6,"height":1,"label":"","labelPlacement":"left","labelAlignment":"left","colorForValue":[{"color":"#ff0000","value":"false","valueType":"bool"},{"color":"#008000","value":"true","valueType":"bool"}],"allowColorForValueInMessage":false,"shape":"circle","showGlow":true,"name":"","x":970,"y":80,"wires":},{"id":"edc73090c74155fd","type":"ui_group","name":"Dust Collection System","tab":"c08f9a3c51d49dad","order":2,"disp":true,"width":12,"collapse":false,"className":""},{"id":"c08f9a3c51d49dad","type":"ui_tab","name":"Dust Collection System","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
17

unfortunately, still your flow is not read by node-red.

did you try the code i posted ? is it not working ?

Edit:

I fed the flow to a google gemini, and it somewhat corrected and gave back. i dont have the contrib nodes so the flow was not started, however,

i see that the config of the button node is like below

image
image327×389 8.12 KB

and the function node has this

image
image222×122 5.18 KB

can you try replaceing the msg.bgcolor in the button node to {{bgcolor}} and try again ?

18

image
image1102×367 37.1 KB

The forum software strips out any HTML tags and other things from your code.
The square at the end of the first line above is an example.
Presumably your code actually contains empty square brackets []
These changes make it impossible to import the code into Node-red.

To protect the code from this sort of mangling, you need a line above and below it with 3 back ticks. There is a </> button to help do this.

image

If you exported the code in compact form, the same 3 ticks wrapper will result in it being displayed on a single line too.

19

See node-red-dashboard (node) - Node-RED

Also see Getting Started | Node-RED Dashboard 2.0 for docs and links to video tutorials for Dashboard 2.0 (@flowfuse/node-red-dashboard)

If you use the old dashboard nodes then it will use the old one, if you use the new dashboard nodes then it will use those ones. You can have both in use at once (they are accessed via different URLs as described in the docs.

20

If you read the suggestion that both Steve and I posted about ‘How to post code or flow’ people could import your flow.

I edited your post so your flow could be copied.

HOWEVER, you have a issue with your flow because it can not be imported, I get an error message:

SyntaxError: JSON Parse error: Unexpected token '}