How To Modify Dashboard Button To Alternate Color / Text?

Randy · 22 January 2020 04:18

I have a push button that I would like to modify so it will alternate text and color with each press. Such as text ON with red background and OFF with green background. And naturally send the appropriate payload. Currently the button just sends a "lights on" payload with each press. Hopefully my first attempt at inserting first the CSS code then the button code will work?

CSS

<style>
  .filled { 
      height: 100% !important;

      padding: 0 !important;
      margin: 0 !important;
  }
  .nr-dashboard-template {
      padding: 0;
      margin: 0;
  }
  
  .rounded {
  border-radius: 12px 12px 12px 12px;
}
 
   .bigfont {
  font-size: 18px;
}

   .smallfont {
  font-size: 12px;
}
  
</style>

<script>
$('.vibrate').on('click', function() {
  navigator.vibrate(100);
});

function restore_bg(x) {
            $(this).css("background-color", x);
    };

$('.touched').on('mousedown', function() {
    
    var x= $(this).css("background-color");
    $(this).css("background-color", "yellow");
    
    setTimeout(restore_bg.bind(this,x),100);
    navigator.vibrate(80);
    });
    
</script>

Button

<md-button class="vibrate filled touched bigfont rounded" style="background-color:#ff0000" ng-click="send({payload: 'lights on'})"> 
    lights<br/>on
</md-button>

chucksteele · 11 February 2020 01:00

Not sure if this will help, but I did something like this:

<div ng-if="msg.payload == 1" class="switch"><div class="labelon">Zone 2 Power</div><div class="securitytexton" ng-bind-html="msg.change"></div></div>
<div ng-if="msg.payload == 0" class="switch"><div class="labeloff">Zone 2 Power</div><div class="securitytextoff" ng-bind-html="msg.change"></div></div>

The securitytexton/off and labelon/off is set to switch between white and yellow (text/label). (The msg.change I use with a timestamp for when the state has changed)

Randy · 12 February 2020 13:08

chucksteele, this would be a way to change the label and name of a button from an outside payload. But I wanted to change it when the button was pushed. Maybe seeing your flow would clarify?

dr_cave_dweller · 12 February 2020 22:10

I am no expert at Node-Red, but this is what I do.

You will need to understand how the flow.get flow.set scope context works. I use it to record the current status of the button.

https://nodered.org/docs/user-guide/writing-functions

[{"id":"485ef26f.0e7fe4","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"111148ee.cdb697","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false},{"id":"31529018.f1ea8","type":"ui_group","z":"","name":"Default","tab":"111148ee.cdb697","disp":true,"width":"6","collapse":false},{"id":"d93e5115.fae8a","type":"function","z":"485ef26f.0e7fe4","name":"Button_colors","func":"var x = flow.get(\"button_state\"); //use a global variable to record button state, get the last state\nmsg1={};    //if you use msg.payload you seem to get errors as it contains data already, so set up a new msg1.payload message\n\nif (x===0){\n    msg1.payload = \"background-color: red; color: black\"    //background and text colors\n    flow.set(\"button_state\",1)    //if previous state was 0, now make it 1\n}\nelse {\n    msg1.payload = \"background-color: green; color: white\"  //background and text colors\n    flow.set(\"button_state\",0)    //if previous state was 1, now make it 0\n}\nreturn msg1;","outputs":1,"noerr":0,"x":580,"y":120,"wires":[["ab2af49c.6bbd98","2bd7b2ff.b539ce"]]},{"id":"ab2af49c.6bbd98","type":"ui_template","z":"485ef26f.0e7fe4","group":"31529018.f1ea8","name":"Button","order":0,"width":0,"height":0,"format":"<md-button\n    style = {{msg.payload}}\n    ng-click=\"send(1)\">\n    button\n</md-button>","storeOutMessages":true,"fwdInMessages":false,"templateScope":"local","x":770,"y":120,"wires":[["5b529bb9.5a1c74","d93e5115.fae8a","613f5ec8.3fda88"]]},{"id":"118e5a46.c3d0e6","type":"inject","z":"485ef26f.0e7fe4","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":"1","x":150,"y":120,"wires":[["63dd9b08.2e4b44"]]},{"id":"63dd9b08.2e4b44","type":"function","z":"485ef26f.0e7fe4","name":"Set_initial_state","func":"flow.set(\"button_state\",0)\nreturn msg;","outputs":1,"noerr":0,"x":360,"y":120,"wires":[["d93e5115.fae8a"]]},{"id":"5b529bb9.5a1c74","type":"function","z":"485ef26f.0e7fe4","name":"Do_something_else","func":"","outputs":1,"noerr":0,"x":1000,"y":120,"wires":[[]]},{"id":"2bd7b2ff.b539ce","type":"debug","z":"485ef26f.0e7fe4","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":690,"y":220,"wires":[]},{"id":"613f5ec8.3fda88","type":"debug","z":"485ef26f.0e7fe4","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":900,"y":220,"wires":[]},{"id":"b7ee63d5.65ef48","type":"comment","z":"485ef26f.0e7fe4","name":"Required to start flow and set initial button condition","info":"","x":250,"y":80,"wires":[]}]

chucksteele · 21 February 2020 20:30

Randy, sorry I didn't see your question.
Let me take your flow and methodically go thru (aka mess around in hope of stumbling on a solution).
I don't use buttons - just switches, sliders and such..

chucksteele · 29 February 2020 16:36

Randy, I found this while looking for something else that may help you, if you havent found it out already.https://discourse.nodered.org/t/examples-of-colour-change-button-and-switch/3650

Randy · 29 February 2020 19:29

Yes I have ran across that posting but think I had issues getting the button to scale properly. Not dceejay's fault but my lack of knowledge instead. Tried to convince Pete Scargil to modify his pretty buttons https://flows.nodered.org/flow/4bfad41290eda31588ff63a23815ac5c but I think he has moved on to other things.

Maximus1 · 2 March 2020 22:31

this will read the mqtt status and set the color and text depending on the status

[{"id":"fc43797c.fb16e8","type":"mqtt in","z":"b3cf0d92.fa621","name":"wohnzimmerlampe","topic":"sonoffwohnzimmer/stat/POWER","qos":"2","datatype":"auto","broker":"330b0f73.614de","x":150,"y":40,"wires":[["ee0065b3.71efa8"]]},{"id":"b225288a.139c68","type":"mqtt out","z":"b3cf0d92.fa621","name":"wohnzimmerlampe","topic":"sonoffwohnzimmer/cmnd/Power","qos":"","retain":"","broker":"330b0f73.614de","x":1090,"y":40,"wires":[]},{"id":"ccf31a34.5bd388","type":"ui_button","z":"b3cf0d92.fa621","name":"Wohnzimmerlampe","group":"bd97a587.282d08","order":4,"width":"0","height":"0","passthru":false,"label":"Wohnzimmerlampe {{payload}}","tooltip":"","color":"","bgcolor":"{{background}}","icon":"fa-lightbulb-o fa-3x","payload":"TOGGLE","payloadType":"str","topic":"","x":890,"y":40,"wires":[["b225288a.139c68"]]},{"id":"fbb30b87.ef11e8","type":"change","z":"b3cf0d92.fa621","name":"","rules":[{"t":"set","p":"background","pt":"msg","to":"green","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":660,"y":20,"wires":[["ccf31a34.5bd388","75ca211.9562ae"]]},{"id":"a50506cf.f44b38","type":"change","z":"b3cf0d92.fa621","name":"","rules":[{"t":"set","p":"background","pt":"msg","to":"red","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":660,"y":60,"wires":[["ccf31a34.5bd388","75ca211.9562ae"]]},{"id":"eaf6480c.e99558","type":"switch","z":"b3cf0d92.fa621","name":"on/off","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"AN","vt":"str"},{"t":"eq","v":"AUS","vt":"str"}],"checkall":"false","repair":false,"outputs":2,"x":490,"y":40,"wires":[["fbb30b87.ef11e8"],["a50506cf.f44b38"]]},{"id":"ee0065b3.71efa8","type":"change","z":"b3cf0d92.fa621","name":"","rules":[{"t":"change","p":"payload","pt":"msg","from":"OFF","fromt":"str","to":"AUS","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":"ON","fromt":"str","to":"AN","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":340,"y":40,"wires":[["eaf6480c.e99558"]]},{"id":"75ca211.9562ae","type":"link out","z":"b3cf0d92.fa621","name":"","links":["37805384.b8af1c"],"x":835,"y":80,"wires":[]},{"id":"5ec3b8c5.764018","type":"link in","z":"b3cf0d92.fa621","name":"","links":["1b5ee40d.f83d8c"],"x":955,"y":80,"wires":[["b225288a.139c68"]]},{"id":"330b0f73.614de","type":"mqtt-broker","z":"","name":"Mosquitto","broker":"192.168.178.33","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"bd97a587.282d08","type":"ui_group","z":"","name":"Lampen","tab":"f486e905.377fb8","order":1,"disp":true,"width":"5","collapse":false},{"id":"f486e905.377fb8","type":"ui_tab","z":"","name":"Licht","icon":"fa-lightbulb-o","order":1,"disabled":false,"hidden":false}]

scott1 · 30 June 2020 20:08

Just starting out, this little flow is a gem! I have learned much from it. I just cannot figure out what the link nodes are doing. But I will keep at it. Thanks again.

matsk · 23 September 2021 06:28

Thx @Maximus1 , your flow was very close to what I was looking for.

I did some minor change and included a change so that the text also changes color.

The flow:

The dashboard button with on and off examples
Note. Lampor is Swedish for lights
flows_Dashboard_web_UI

[
    {
        "id": "f69161e18b83bd24",
        "type": "tab",
        "label": "Dashboard web UI",
        "disabled": false,
        "info": ""
    },
    {
        "id": "0c639817fd34a45c",
        "type": "group",
        "z": "f69161e18b83bd24",
        "name": "Dashboard Kitchen light",
        "style": {
            "label": true
        },
        "nodes": [
            "fc4f19460d54b95e",
            "cc8653fff265d40b",
            "ef7280bd71b43577",
            "26640232f1a9ed6f",
            "bee2955075dbf159",
            "a7bc7b22116cced4",
            "cf5d79beaf1e9903"
        ],
        "x": 14,
        "y": 159,
        "w": 1212,
        "h": 122
    },
    {
        "id": "a8e81dd47efe0fd9",
        "type": "group",
        "z": "f69161e18b83bd24",
        "name": "Dashboard TV light",
        "style": {
            "label": true
        },
        "nodes": [
            "ccb5c1654f6ee032",
            "6b39921d468ae802",
            "a2d813514d391b4c",
            "f0a83c3da0196ec1",
            "aeb8875148cd0f3d",
            "7d033825423704c4",
            "47c67c3f5435cc32"
        ],
        "x": 14,
        "y": 19,
        "w": 1192,
        "h": 122
    },
    {
        "id": "fc4f19460d54b95e",
        "type": "mqtt in",
        "z": "f69161e18b83bd24",
        "g": "0c639817fd34a45c",
        "name": "Kitchen light",
        "topic": "stat/tasmota_04DCC3/POWER",
        "qos": "2",
        "datatype": "auto",
        "broker": "9dd76909b217b4ad",
        "nl": false,
        "rap": false,
        "x": 110,
        "y": 220,
        "wires": [
            [
                "bee2955075dbf159"
            ]
        ]
    },
    {
        "id": "cc8653fff265d40b",
        "type": "mqtt out",
        "z": "f69161e18b83bd24",
        "g": "0c639817fd34a45c",
        "name": "Kitchen light",
        "topic": "cmnd/tasmota_04DCC3/Power",
        "qos": "",
        "retain": "",
        "respTopic": "",
        "contentType": "",
        "userProps": "",
        "correl": "",
        "expiry": "",
        "broker": "9dd76909b217b4ad",
        "x": 1130,
        "y": 220,
        "wires": []
    },
    {
        "id": "ef7280bd71b43577",
        "type": "ui_button",
        "z": "f69161e18b83bd24",
        "g": "0c639817fd34a45c",
        "name": "Kitchen light",
        "group": "bd97a587.282d08",
        "order": 4,
        "width": "0",
        "height": "0",
        "passthru": false,
        "label": "&nbsp;&nbsp;Kitchen light {{payload}}",
        "tooltip": "",
        "color": "{{text}}",
        "bgcolor": "{{background}}",
        "className": "",
        "icon": "fa-lightbulb-o fa-3x",
        "payload": "toggle",
        "payloadType": "str",
        "topic": "",
        "topicType": "str",
        "x": 950,
        "y": 220,
        "wires": [
            [
                "cc8653fff265d40b"
            ]
        ]
    },
    {
        "id": "26640232f1a9ed6f",
        "type": "switch",
        "z": "f69161e18b83bd24",
        "g": "0c639817fd34a45c",
        "name": "on/off",
        "property": "payload",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "on",
                "vt": "str"
            },
            {
                "t": "eq",
                "v": "off",
                "vt": "str"
            }
        ],
        "checkall": "false",
        "repair": false,
        "outputs": 2,
        "x": 490,
        "y": 220,
        "wires": [
            [
                "cf5d79beaf1e9903"
            ],
            [
                "a7bc7b22116cced4"
            ]
        ]
    },
    {
        "id": "bee2955075dbf159",
        "type": "change",
        "z": "f69161e18b83bd24",
        "g": "0c639817fd34a45c",
        "name": "Convert ON/OFF -> on/off",
        "rules": [
            {
                "t": "change",
                "p": "payload",
                "pt": "msg",
                "from": "OFF",
                "fromt": "str",
                "to": "off",
                "tot": "str"
            },
            {
                "t": "change",
                "p": "payload",
                "pt": "msg",
                "from": "ON",
                "fromt": "str",
                "to": "on",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 310,
        "y": 220,
        "wires": [
            [
                "26640232f1a9ed6f"
            ]
        ]
    },
    {
        "id": "a7bc7b22116cced4",
        "type": "change",
        "z": "f69161e18b83bd24",
        "g": "0c639817fd34a45c",
        "name": "off - Change text and background",
        "rules": [
            {
                "t": "set",
                "p": "background",
                "pt": "msg",
                "to": "gray",
                "tot": "str"
            },
            {
                "t": "set",
                "p": "text",
                "pt": "msg",
                "to": "#FFFFFF",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 700,
        "y": 240,
        "wires": [
            [
                "ef7280bd71b43577"
            ]
        ]
    },
    {
        "id": "cf5d79beaf1e9903",
        "type": "change",
        "z": "f69161e18b83bd24",
        "g": "0c639817fd34a45c",
        "name": "on - Change text and background",
        "rules": [
            {
                "t": "set",
                "p": "background",
                "pt": "msg",
                "to": "#FDF0C2",
                "tot": "str"
            },
            {
                "t": "set",
                "p": "text",
                "pt": "msg",
                "to": "#000000",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 700,
        "y": 200,
        "wires": [
            [
                "ef7280bd71b43577"
            ]
        ]
    },
    {
        "id": "ccb5c1654f6ee032",
        "type": "mqtt in",
        "z": "f69161e18b83bd24",
        "g": "a8e81dd47efe0fd9",
        "name": "TV light",
        "topic": "stat/tasmota_8BCF55/POWER",
        "qos": "2",
        "datatype": "auto",
        "broker": "9dd76909b217b4ad",
        "nl": false,
        "rap": false,
        "x": 90,
        "y": 80,
        "wires": [
            [
                "47c67c3f5435cc32"
            ]
        ]
    },
    {
        "id": "6b39921d468ae802",
        "type": "mqtt out",
        "z": "f69161e18b83bd24",
        "g": "a8e81dd47efe0fd9",
        "name": "TV light",
        "topic": "cmnd/tasmota_8BCF55/Power",
        "qos": "",
        "retain": "",
        "respTopic": "",
        "contentType": "",
        "userProps": "",
        "correl": "",
        "expiry": "",
        "broker": "9dd76909b217b4ad",
        "x": 1120,
        "y": 80,
        "wires": []
    },
    {
        "id": "a2d813514d391b4c",
        "type": "ui_button",
        "z": "f69161e18b83bd24",
        "g": "a8e81dd47efe0fd9",
        "name": "TV light",
        "group": "bd97a587.282d08",
        "order": 4,
        "width": "0",
        "height": "0",
        "passthru": false,
        "label": "&nbsp;&nbsp;TV light {{payload}}",
        "tooltip": "",
        "color": "{{text}}",
        "bgcolor": "{{background}}",
        "className": "",
        "icon": "fa-lightbulb-o fa-3x",
        "payload": "toggle",
        "payloadType": "str",
        "topic": "",
        "topicType": "str",
        "x": 940,
        "y": 80,
        "wires": [
            [
                "6b39921d468ae802"
            ]
        ]
    },
    {
        "id": "f0a83c3da0196ec1",
        "type": "change",
        "z": "f69161e18b83bd24",
        "g": "a8e81dd47efe0fd9",
        "name": "on - Change text and background",
        "rules": [
            {
                "t": "set",
                "p": "background",
                "pt": "msg",
                "to": "#FDF0C2",
                "tot": "str"
            },
            {
                "t": "set",
                "p": "text",
                "pt": "msg",
                "to": "#000000",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 700,
        "y": 60,
        "wires": [
            [
                "a2d813514d391b4c"
            ]
        ]
    },
    {
        "id": "aeb8875148cd0f3d",
        "type": "change",
        "z": "f69161e18b83bd24",
        "g": "a8e81dd47efe0fd9",
        "name": "off - Change text and background",
        "rules": [
            {
                "t": "set",
                "p": "background",
                "pt": "msg",
                "to": "gray",
                "tot": "str"
            },
            {
                "t": "set",
                "p": "text",
                "pt": "msg",
                "to": "#FFFFFF",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 700,
        "y": 100,
        "wires": [
            [
                "a2d813514d391b4c"
            ]
        ]
    },
    {
        "id": "7d033825423704c4",
        "type": "switch",
        "z": "f69161e18b83bd24",
        "g": "a8e81dd47efe0fd9",
        "name": "on/off",
        "property": "payload",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "on",
                "vt": "str"
            },
            {
                "t": "eq",
                "v": "off",
                "vt": "str"
            }
        ],
        "checkall": "false",
        "repair": false,
        "outputs": 2,
        "x": 490,
        "y": 80,
        "wires": [
            [
                "f0a83c3da0196ec1"
            ],
            [
                "aeb8875148cd0f3d"
            ]
        ]
    },
    {
        "id": "47c67c3f5435cc32",
        "type": "change",
        "z": "f69161e18b83bd24",
        "g": "a8e81dd47efe0fd9",
        "name": "Convert ON/OFF -> on/off",
        "rules": [
            {
                "t": "change",
                "p": "payload",
                "pt": "msg",
                "from": "OFF",
                "fromt": "str",
                "to": "off",
                "tot": "str"
            },
            {
                "t": "change",
                "p": "payload",
                "pt": "msg",
                "from": "ON",
                "fromt": "str",
                "to": "on",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 310,
        "y": 80,
        "wires": [
            [
                "7d033825423704c4"
            ]
        ]
    },
    {
        "id": "9dd76909b217b4ad",
        "type": "mqtt-broker",
        "name": "RedPi",
        "broker": "mosquitto",
        "port": "1883",
        "clientid": "",
        "usetls": false,
        "protocolVersion": "4",
        "keepalive": "60",
        "cleansession": true,
        "birthTopic": "",
        "birthQos": "0",
        "birthPayload": "",
        "birthMsg": {},
        "closeTopic": "",
        "closeQos": "0",
        "closePayload": "",
        "closeMsg": {},
        "willTopic": "",
        "willQos": "0",
        "willPayload": "",
        "willMsg": {},
        "sessionExpiry": ""
    },
    {
        "id": "bd97a587.282d08",
        "type": "ui_group",
        "name": "Lampor",
        "tab": "f486e905.377fb8",
        "order": 1,
        "disp": true,
        "width": "5",
        "collapse": false,
        "className": ""
    },
    {
        "id": "f486e905.377fb8",
        "type": "ui_tab",
        "name": "Lampor",
        "icon": "fa-lightbulb-o",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

Topic		Replies	Views
Button colour settings - need help Dashboard	8	393	24 April 2020
Dashboard - set background color of text node FAQs	5	20466	3 November 2019
Change theme options from code Dashboard	6	1932	25 February 2021
Help with (yet another) button Dashboard	9	479	14 May 2020
Change Page Background When Button is Pressed Dashboard	0	561	25 July 2019

How To Modify Dashboard Button To Alternate Color / Text?

Related topics