How To Modify Dashboard Button To Alternate Color / Text?

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> 


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)

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?

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":[]}]

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..

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

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.

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}]
1 Like

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.