# Dashboard buttons easy colour state change?

**URL:** <https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645>\
**Category:** Dashboard\
**Created:** [27 November 2020 19:51 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645 "2020-11-27T19:51:46Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![scargill](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scargill/32/1118_2.png) [@scargill](https://discourse.nodered.org/u/scargill)\
**Post date:** [27 November 2020 19:51 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/1 "2020-11-27T19:51:46Z")

</div>

Here is the dashboard for my home control. Most of my items have states on, off or auto, some have colour change.In order to show the current state which may have ben set by a button touch in the dashboard or may have been set by a timer, I have a coloured icon on the left next to the description. Tehe colour depicts ON, OFF, auto-on or auto off. I'd rather the actual buttons or at least the button icon actually changed colour when the state changes. Any ideas for a simple way to do that?

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/2/42ffecf7b3e268b2faca181ebdb51c88402250c5.png)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [27 November 2020 20:05 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/2 "2020-11-27T20:05:49Z")

</div>

You can use a msg property to set it. Eg. {{some\_property}} in the Colour field to set the text/icon colour

---

<div class="post-metadata">

**Author:** ![scargill](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scargill/32/1118_2.png) [@scargill](https://discourse.nodered.org/u/scargill)\
**Post date:** [27 November 2020 22:22 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/3 "2020-11-27T22:22:43Z")

</div>

SORTED - Thanks Dave - I set {{msg.payload}} and now the buttons change colour on demand.  
My buttons use fa-icons - all I need now is to change the icon size in the button.

In a template - setting the button radius was easy - setting the icon sizea is proving more challenging.

.md-button { border-radius: 25%; }

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/3/f3811818ec805a0fa49012bf011362354d8d5358.png)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [27 November 2020 23:20 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/4 "2020-11-27T23:20:56Z")

</div>

With fa its easy. Just add fa-2x. 3x etc. So the icon is like. `fa-flame fa-3x` etc. fa-spin also works (if required)

---

<div class="post-metadata">

**Author:** ![scargill](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scargill/32/1118_2.png) [@scargill](https://discourse.nodered.org/u/scargill)\
**Post date:** [28 November 2020 13:27 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/5 "2020-11-28T13:27:11Z")

</div>

Figured out fa-2x etc all by myself yesterday but didn't know about fa-spin, Just tested - it seems you need to make the field dynamic to make use of the latter. Not much point in a constantly-rotating button 🙂

If you are still there - erm, I never did crack haptic feedback on those buttons - it's nice that they now change buton on selection but a short (on mobile phones obviously) "brrp" on touch would finish them off nicely. I've always preferred real-button TV remotes as the LCD ones you have to look at in case you missed the button 🙂

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/e/cee302cc81a30acb18d92ddf64dd5c976e7701c7.png)

The 3 middle buttons have the new icon change (larger and prettier) and the one on the right is the active button (BigTimer, blue means auto off, would be green if on). Manual ON turns red when active.... still experimenting.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/1/f16f356f223d932173c9cc76b7dff7f0abfa969c.png)  
In case its not obvious that purple square is the colour control - opens up when touched - not pretty but works..

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/d/9d77166efa645848291cae6bb7b8245ab6bfc110.png)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [28 November 2020 14:28 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/6 "2020-11-28T14:28:46Z")

</div>

> [@scargill](#):
>
> opens up when touched - not pretty but works..

You can style it a bit. I don't know of course how do you like it but ..

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/1/e152217f440e89782758325d7c784ea9e5b6aa61.png)

```auto
<style>
.color-picker-input-wrapper.input-group > span{
    border-radius:20%;
    width: 24px !important;
    height:24px !important;
    
}
.color-picker-wrapper.color-picker-swatch-only.color-picker-open {
    width: unset;
    border-width: 0px;
}
</style>

```

---

<div class="post-metadata">

**Author:** ![scargill](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scargill/32/1118_2.png) [@scargill](https://discourse.nodered.org/u/scargill)\
**Post date:** [28 November 2020 14:59 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/7 "2020-11-28T14:59:56Z")

</div>

> [@hotNipi](#):
>
> ```auto
> .color-picker-input-wrapper.input-group > span{
> border-radius:20%;
> width: 24px !important;
> height:24px !important;
>     
> }
> .color-picker-wrapper.color-picker-swatch-only.color-picker-open {
> width: unset;
> border-width: 0px;
> }
> 
> ```

hotNipi

Am I being thick here? I just added your great suggestion to the template that is already rounding the buttons - and no change to the colour picker square,

.md-button { border-radius: 25%; }

.color-picker-input-wrapper.input-group \> span{  
border-radius:20%;  
width: 24px !important;  
height:24px !important;

}  
.color-picker-wrapper.color-picker-swatch-only.color-picker-open {  
width: unset;  
border-width: 0px;  
}

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [28 November 2020 15:03 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/8 "2020-11-28T15:03:35Z")

</div>

Aah, you are using text input color picker maybe?

---

<div class="post-metadata">

**Author:** ![scargill](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scargill/32/1118_2.png) [@scargill](https://discourse.nodered.org/u/scargill)\
**Post date:** [28 November 2020 15:09 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/9 "2020-11-28T15:09:11Z")

</div>

Back to the msg.payload that Dave first suggested - works a treat and I'm using it to programatically change the background colour depending on which button was last pressed or the state of auto. LOVELY.

My next innovation would be to reduce down to one button and have it's ICON change depending on state... FAIL

All I've tried to change here is, instead of the PERGOLA AUTO icon being a fixed timer as above, I made it a variable (msg.myIcon" and in the preceeding function, set msg.myIcon to the same fixed value (for now) that the button originally had. Instead I'm seeing a question mark as the icon. Anyone wiser than me care to comment?

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/9/39862a9df6e866d76cfc6b31475cda012984c1e0.jpeg)

---

<div class="post-metadata">

**Author:** ![scargill](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scargill/32/1118_2.png) [@scargill](https://discourse.nodered.org/u/scargill)\
**Post date:** [28 November 2020 15:15 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/10 "2020-11-28T15:15:22Z")

</div>

Yes, the original colour picker with round picker (with grey in the middle) is AWFUL - I abandoned that ages ago, with the grey colour picker etc, so I'm using the text one on lots of lights - not pretty but eorks just fine... but msking thst little square (with strange underline underneath it) round would be GREAT. Got any idea how to mod your suggestion to make it work?? My colour picker says "mode: color picker" and at the top "text mode"

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/6/46b690f75a5ebc0561c0afdde3e4d449b38f3d2c.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/4/941a50d3d3c1f9f14dac322187254d2f206f358c.png)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [28 November 2020 15:16 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/11 "2020-11-28T15:16:56Z")

</div>

It can be tweaked for sure. Takes a little more than the color picker version but doable. Ill try a bit ..

Edit: I cant see any mistake in the "msg.myIcon" stuff you tried. Works for me seamlessly ..

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [28 November 2020 15:23 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/12 "2020-11-28T15:23:50Z")

</div>

As long as you are on last weeks dashboard update... 2.24.1

---

<div class="post-metadata">

**Author:** ![scargill](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scargill/32/1118_2.png) [@scargill](https://discourse.nodered.org/u/scargill)\
**Post date:** [28 November 2020 15:29 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/13 "2020-11-28T15:29:59Z")

</div>

I just realised it was DAVE who responded about 2.24.0 - right - I'm NOW on 2.24.1 and indeed the icon changes. WHEEE. Getting there.

---

<div class="post-metadata">

**Author:** ![scargill](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scargill/32/1118_2.png) [@scargill](https://discourse.nodered.org/u/scargill)\
**Post date:** [28 November 2020 16:14 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/14 "2020-11-28T16:14:30Z")

</div>

All right as I'm pushing my luck here..  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/9/69283e85947c85a8f70a68f41385303bf22e1e73.png)  
the button payload - instead of on, off or auto on press I need it to change depending on the feedback as to what mode I'm already in - ie. cycle auto, on, off without disappearing in a loop. I must be missing something here - you have to send msg.payload which cant seem to be msg.state but has to be literal?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [28 November 2020 16:33 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/15 "2020-11-28T16:33:35Z")

</div>

For textinput colorpicker, it is of course totally different element and not so friendly.  
But something can be done.

```auto
/*
The selector which selects only element in one tab and one group
Starts with # followed by tab name
then group name
then "cards"
All connected with underscore

#Tabname_Groupname_cards
*/

#Home_TEST_cards > md-card > md-input-container {
   padding:0 !important;
   margin:0 !important;
}

.nr-dashboard-theme .nr-dashboard-textinput input[type="color"]{
    border: none !important;
    width: 48px;
    height: 48px;
    margin: 0 !important;
    padding: 0 !important;
}

```

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [28 November 2020 17:18 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/16 "2020-11-28T17:18:12Z")

</div>

> [@scargill](#):
>
> he button payload - instead of on, off or auto on press I need it to change depending on the feedback as to what mode I'm already in - ie. cycle auto, on, off without disappearing in a loop.

Let the button be dummy. The only smartness the button should have is that it can represent the states. (backgeound color, icon color, label)

Button gets input which bases on the current **state of something**. (if state == "on" then backgound color shouldbe green ....)  
The output of button can be anything. What you'll need is the event that button was cliked. That's all.  
Next after button make function which asks for **current state for that same something**. Then based on this state, figure out what kind of payload should be sent out to the following flow. Also if you are sure that at this point the state of that something can be also changed, change the state and store it. I'd be happy if the state changes are changed and stored somewhere else where actual state is received from the device or what ever is the thing you are controlling.  
If everything went OK the "before button function" gets an input and you can figure out the look for the button by (may be) changed state.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/4/74d20205fe70d203e90eacdf9b6fdf438d7c5e0c.png)

---

<div class="post-metadata">

**Author:** ![scargill](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scargill/32/1118_2.png) [@scargill](https://discourse.nodered.org/u/scargill)\
**Post date:** [28 November 2020 17:32 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/17 "2020-11-28T17:32:19Z")

</div>

I got button working with ONE bglobal which I'll try to get rid of...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/d/bd5b5fcb4e957ba5109d5891e8e42638c286cdd8.png)  
OFF and ON are now redundant..

LEFT function  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/7/976151ff90fbc2648a508fc23c2bab0184f2288b.png)  
RIGHT function

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/5/b5fbc653da7a0d5e935b6ba5dd0634bcd6cbb8df.png)  
The button  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/7/97762898708d6f91f1f45c33f559ba054cb0ecbf.png)

Realised now I only need 2 colours for on and off as the button icon talls you if it is manual or auto

---

<div class="post-metadata">

**Author:** ![scargill](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scargill/32/1118_2.png) [@scargill](https://discourse.nodered.org/u/scargill)\
**Post date:** [28 November 2020 17:43 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/18 "2020-11-28T17:43:58Z")

</div>

Getting there.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/b/2b4a50a6842d57ca9f61f591f42e694b4d0ff1ea.png)

Only need one button now and the colour picker fits ehere one of the other buttons went originally.  
I could almost fit 2 devices on one line on the phone now.... 🙂

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [28 November 2020 18:22 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/19 "2020-11-28T18:22:48Z")

</div>

A little bit can be done better for color picker 🙂  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/d/3d4c65514324dc94304ae64fa8849e00262a4636.png)

```auto
#Home_Default_cards > md-card > md-input-container {
   padding:0 !important;
   margin:0 !important;
   border-radius:25%;
   background-color:var(--nr-dashboard-widgetColor);
}

.nr-dashboard-theme .nr-dashboard-textinput input[type="color"]{
    border: none !important;
    width: 48px;
    height: 48px;
    margin: 0 !important;
    padding: 10% !important;
}

```

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [28 November 2020 18:25 UTC](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/20 "2020-11-28T18:25:29Z")

</div>

Just don’t try it on safari

[Next page](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645.md?page=2)