Custom: button-card - change icon based on state

mmillner · March 21, 2022, 4:11pm

Hi,

I have the custom card working as far as opening and closing my garage door but I’m trying to change the icon (or color) based on the state of opened or closed.
I’m using the shelly 1 relay and I’m fine (for now) to get the state from the shelly cloud. The shelly app opens and closes with a button which changes color based on state.
Here is my code:

type: custom:button-card
show_entity_picture: true
state:
  - value: 'off'
    icon: mdi:garage-lock
  - value: 'on'
    icon: mdi:garage-open
tap_action:
  action: toggle
entity: switch.shelly_shsw_1_e8db84d7180f
show_state: false
show_label: true
size: 20%
label: |
  [[[
    if (states['switch.shelly_shsw_1_e8db84d7180f'].state === "on")
      return "Open";
    else if (states['switch.shelly_shsw_1_e8db84d7180f'].state === "off")
      return "Closed";
  ]]]

Any guidance would be appreciated. New to HA so still learning.

Thank You
Mike

browetd · March 21, 2022, 4:32pm

Here is an example (it is a template with variables I am using to create a lot of button-cards but just replace variables with what you need to create a unique card)
For creating defining the icon, I am using a different way (using “icon”) rather than the “state” as I can have very complex decision tree to display the icon for an entity… same for color and background color…
Let me know if you have questions…

#
#
#
    card_light:
        variables:
          icon_on: ""
          icon_off: ""
          color_background: ""
        color_type: card
        show_label: true
        size: 50%
        aspect_ratio: 1/1
        icon: >
                  [[[ if (entity.state == "on") return variables.icon_on;
                      else return variables.icon_off; ]]]
        styles:
          name:
            - font-size: 13px
            - font-weight: bold
          label:
            - font-size: 13px
            - font-weight: bold
          icon:
            - color: >
                [[[ if (entity.state == "on") return "var(--icon-dark-color)" ;
                    else return "var(--icon-color)"; ]]]
          card:
            - color: >
                [[[ if (entity.state == "on") return "var(--icon-dark-color)" ;
                    else return "var(--icon-color)"; ]]]
            - background-color: >
                [[[ if (entity.state == "off") return "";
                    else return variables.color_background; ]]]

Here is the card using the template:

  - type: custom:button-card
    entity: switch.plan_de_travail_cuisine
    name: 'Cuisine'
    label: 'Plan de Travail'
    variables:
      icon_on: "mdi:lightbulb-on"
      icon_off: "mdi:lightbulb-off-outline"
      color_background: "var(--button-card-light-background)"
    template:
      - card_light

dexstar · March 21, 2022, 5:14pm

You nearly had it.

type: custom:button-card
show_entity_picture: true
state:
  - value: 'off'
    icon: mdi:garage-lock
    color: green
  - value: 'on'
    icon: mdi:garage-open
    color: red
tap_action:
  action: toggle
entity: switch.shelly_shsw_1_e8db84d7180f
show_state: false
show_label: true
size: 20%
label: |
  [[[
    if (states['switch.shelly_shsw_1_e8db84d7180f'].state === "on")
      return "Open";
    else if (states['switch.shelly_shsw_1_e8db84d7180f'].state === "off")
      return "Closed";
  ]]]

mmillner · March 21, 2022, 5:50pm

I really appreciate the advice but unfortunately these changes have the same result. The garage opens and closes but the icon and the color stays in the ‘off’ position.

Any thing else to try?

I haven’t tried the template advice from the first reply yet as I’m hoping it is a simple change that is needed.

Thank You again!
-Mike

dexstar · March 21, 2022, 6:31pm

Maybe try with the template, but all good here.

mmillner · March 21, 2022, 6:34pm

can you please paste the exact code you have for this?

dexstar · March 21, 2022, 6:41pm

Same as above.

dexstar · March 21, 2022, 6:44pm

Does it show the correct state in a different card ?

mmillner · March 21, 2022, 6:58pm

The only other card I have is for a light which turns on at sunset and off at 10:00pm…which works perfectly…changes icons and colors

I changed the entity on the light card to switch.shelly_shsw_1_e8db84d7180f’ and it acts like the card we’ve been messing with so I’d say the answer is no…it doesn’t show the correct state…only the closed or off state.

sorry, at the edge of my knowledge here

dexstar · March 21, 2022, 8:25pm

All good my friend, I’m no expert, just picked up things along my journey with plenty of fails along the way too.

Since it shows correct in the Shelly app, try the following.

Go to Developer Tools → States and select your device switch.shelly_shsw_1_e8db84d7180f, I’ve got my Kitchen Plug here as an example.

Then turn it ON in the Shelly app.
Near Set state, Refresh. The state should change to ON.

If this is not happening, then looks like there is something broken somewhere.
For your device, I believe you need to put in a Host address.

shelly

See that this hasn’t changed in your router settings. If it’s changed, try and give it a FIXED address.

Some things you could try ???

Check your logs for any errors.
Clearing Cache.
Restart Home Assistant.

Worst case scenario, Uninstall/Reinstall the Shelly Integration and check all information is correct.

Just some troubleshooting to try. Let us know how you get on.
All the best

mmillner · March 21, 2022, 9:17pm

wow, can’t thank you enough! It get’s weirder. I made the change in the developer tools. I can watch the state change from on to off and then back as I open and close the door. In another tab I have the overview page up and it actually worked once. I saw the icon change and the color. But it was only that one time. Even more confused now. Couple screen shots attached. Hopefully that tells you if I followed the instructions properly
The IP is static.

The log is full of entries like this for opening and closing
Garage Door Closed - Shelly Green has been triggered by state of binary_sensor.shelly_shsw_1_e8db84d7180f_switch by Garage binary switch

2:59:23 PM - 15 minutes ago - Show trace

Garage binary switch turned on

2:59:23 PM - 15 minutes ago

Garage Door Open - Shelly Red has been triggered by state of binary_sensor.shelly_shsw_1_e8db84d7180f_switch by Garage binary switch

2:58:23 PM - 16 minutes ago - Show trace

Garage binary switch turned off

2:58:23 PM - 16 minutes ago

dexstar · March 21, 2022, 10:32pm

It looks like your entity is wrong then. In the code
You have switch.shelly…, What happens when you put that binary_sensor entity into the code ?

dexstar · March 21, 2022, 10:51pm

Yeah, looks like if you change the code with the correct entity you should be good. That’s why nothing’s happening. Wrong entity.

And just 'cause my OCD is kicking in , why not just rename your device to something simple like

binary_sensor.garage_door

Try first with the exact entity details from the Developer Tools.

Take care

mmillner · March 21, 2022, 11:12pm

I had the right entity…when I change it to the one with binary in it’s name the door doesn’t open or close. I think I had changed the state in the wrong entity. Not sure what, maybe I wasn’t waiting long enough for the icon and color to change but it’s working now!!!

I can’t thank you enough for hanging in there with me…really appreciate it!!

Thank you
Mike

dexstar · March 21, 2022, 11:18pm

All good

Maybe mark your post as solved and share your final code.

Take care my friend

mmillner · March 21, 2022, 11:37pm

Thanks do much to @dexstar

final code:

type: custom:button-card
show_entity_picture: true
state:
  - value: 'off'
    icon: mdi:garage-open
    color: red
  - value: 'on'
    icon: mdi:garage-lock
    color: green
tap_action:
  action: toggle
entity: binary_sensor.shelly_shsw_1_e8db84d7180f_switch
show_state: false
show_label: true
size: 20%
label: |
  [[[
    if (states['binary_sensor.shelly_shsw_1_e8db84d7180f_switch'].state === "on")
      return "closed";
    else if (states['binary_sensor.shelly_shsw_1_e8db84d7180f_switch'].state === "off")
      return "open";
  ]]]

dexstar · March 22, 2022, 2:46am

So, your initial entity, was wrong?

mmillner · March 22, 2022, 3:05am

yes, seems so. I didn’t realize until I checked again just now. I thought I had tried the one which is working earlier. I was in this mode of trying different things and I got a bit lost.

thanks again!

Meisteryoda1994 · July 1, 2022, 1:20pm

Can someone help me out the background wont change

custom:button-card
entity: sensor.cyclus_gft
icon: true
show_name: false
show_state: true
secondairy_info: true
aspect_ratio: null
styles:
  card:
    - background-color: >-
        {{ '#E8D727' if is_state('input_select.gft_afval_kleur','Niks') else
        '#E8D747' }}
    - background-size: cover
    - border-radius: 2%
    - height: 50%
  grid:
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: 1fr
    - grid-template-areas: '"names s "'
custom_fields:
  names: >
    <span style= "font-size: 120%"> <span style= "color:white"> GFT
    Afval:</span>

petro · July 1, 2022, 2:07pm

You have to use JS templates, not Jinja Templates. Look at the marked solution.