Change icon & lable based on switch status

Configuration Frontend
1

Hello together,

i have a code running on my dashboard, twice the same, one for the Coffee maker, one for the Grinder.

  • for the coffee maker it works pretty well
  • for the Grinder, sometimes the ichon changes, even if the lale still shows “on”

so i am wondering if the Grinder sometimes have even if on a “0” power consumption?

how can i solve this issue? Time stamp or not checking against float and better against status On or Off? any idea?

Thanks

      - type: custom:button-card
        show_entity_picture: false
        entity: switch.shellyswitch25_4855190321f1_channel_2
        name: GRINDER
        show_state: false
        show_label: true
        label: >
          [[[
          if (states['switch.shellyswitch25_4855190321f1_channel_2'].state ===
          "on")
          return "ON";
          else if (states['switch.shellyswitch25_4855190321f1_channel_2'].state
          === "off")
          return "OFF";
          ]]]
        card_mod:
          style: >
            :host {   {% set GrinderStatus =        states("sensor.shellyswitch25_4855190321f1_channel_2_power") | float
            %}  
              {% if GrinderStatus <= 1 %}    
              --card-mod-icon:mdi:coffee-maker;  
              --card-mod-icon-color: steelblue;    
            {% else %}     
             --card-mod-icon: mdi:coffee-maker-check; 
             --card-mod-icon-color: green;    
            {% endif  %}    
            }
2

which is

if (...) do smth
else if (...) do smth

and there is no default path provided - this may cause issues if your entity has no valid state.

Are you sure you need card-mod here?
The button-card has it’s own “styles” option.

3

Hi, thanks for your feedback.

no i am not sure if i need card-mod, i guess its based on a historical reason from a code which was build in 2 different periods of time last year.

so i am really open for any nice idea on update / change my below code, if i dont need card_mod, would be nice to get the info how then modify the color.

type: custom:button-card
show_entity_picture: false
entity: switch.shellyswitch25_4855190321f1_channel_2
name: GRINDER
show_state: false
show_label: true
label: |
  [[[ 
    if (states['switch.shellyswitch25_4855190321f1_channel_2'].state === "on") {
      return "ON";
    } else if (states['switch.shellyswitch25_4855190321f1_channel_2'].state === "off") {
      return "OFF";
    }
  ]]]
icon: |
  [[[ 
    if (states['switch.shellyswitch25_4855190321f1_channel_2'].state === "on") {
      return "mdi:coffee-maker-check";
    } else if (states['switch.shellyswitch25_4855190321f1_channel_2'].state === "off") {
      return "mdi:coffee-maker";
    }
  ]]]
card_mod:
  style: |
    :host {
      --card-mod-icon-color: 
        {% if states('switch.shellyswitch25_4855190321f1_channel_2') == "on" %}
          green;
        {% else %}
          steelblue;
        {% endif %}
    }
4

Check docs for button-card, you can use a template for “icon”

5

Just an example to get you started. There are multiple methods with the Custom Button Card

type: custom:button-card
entity: switch.kitchen_lights
icon: |
  [[[ return entity.state === 'on' ? 'mdi:arrow-up' : 'mdi:arrow-down';
   ]]]
show_state: true
name: GRINDER
styles:
  icon:
    - color: |
        [[[
          if (states['switch.kitchen_lights'].state == 'on') return 'green';
          if (states['switch.kitchen_lights'].state == 'off') return 'red';
          else return 'yellow';
        ]]]