Custom:Button-Card, that changes icon based on door sensor and border has animation with light on

Configuration
1

Hi all,

Thanks a million for any help!
What I’m trying to achieve is the following:

  • to have a room card for my front hall
  • the icon would be dependent on the state of the door sensor = mdi:door/mdi:door-open
  • what I’m also trying to integrate the whole fricking day is link my light to that icon, so when it’s on the icon’s border would have an animation.

I can do one or the other, but no matter what I do, I can’t achieve both.

Here’s my code, at this stage it’s a mess I changed everything like a million times:

type: custom:button-card
icon: mdi:door
name: xxx
entity: light.hallway_2nd_light
view_layout:
  grid-area: xxx
state:
  
  - entity: light.hallway_2nd_light
    value: 'on'
    styles:
      icon:
        - animation: borderFadeIn 4.5s ease-in-out infinite
        - border: 30px solid rgba(222,212,115,0.8)
        - border-radius: 50%
        - overflow: hidden
        - width: 40px
        - height: 40px
      img_cell:
        - border: 1px solid rgba(222,212,115,0.5)
        - overflow: hidden
  - entity: binary_sensor.door_sensor_contact
    value: 'on'
    icon: mdi:door
  - entity: binary_sensor.door_sensor_contact
    value: 'off'
    icon: mdi:door-open
extra_styles: |
  @keyframes borderFadeIn {
    0% { border-color: rgba(222,212,115,0.2); }
    50% { border-color: rgba(222,212,115,0.45); }
    100% { border-color: rgba(222,212,115,0.2); }
  }
  @keyframes borderFadeOut {
    0% { border-color: rgba(222,212,115,0.4); }
    50% { border-color: rgba(222,212,115,0.75); }
    100% { border-color: rgba(222,212,115,0.4); }
  }
styles:
  card:
    - height: 100%
    - padding: 5px
    - background: '#e7e7e6'
    - border-radius: 30px 20px 36px 6px
  grid:
    - grid-template-areas: '"n i" "temp temp"'
    - gridtemplate-rows: 1fr min-content
    - grid-template-columns: min-content 1fr
  img_cell:
    - justify-self: left
    - align-self: start
    - background: '#76906f'
    - border-radius: 100%
    - width: 55px
    - height: 55px
    - left: 100px
  icon:
    - width: 40px
    - color: black
    - padding-bottom: px
    - justify-self: right

As said, it’s a mess now, but at least you can get a picture and references.

omg, Boheme61, thank you so much for investing your time into me :pray:

2

As i can see there is no “traces” of the Custom:Room-Card, but yes your Custom:Button-Card is a mess ( Might be because you don’t understand the Code ( Your Code ) so i suggest you try with a simple approach and eventually " Fill In " as you get “More Warm” and familiar with i.e Custom:Button-Card

  1. There is a huge Topic ( Actually Severals ) For Custom:Button-Card
    (If you use the Search Function in top right Corner !)
  2. There is a comprehensive Documentation For Custom:Button-Card
    ( With simple And Advanced examples )

Now you mentioned it again, however it would possible help, if you actually post a picture of the current card, and explaining/drawing of how you would like it to be

Maybe i miss-interpret your Header, But if you don’t intend to use Room-Card, Don’t write it in the Header

GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant.

Lovelace: Button card.

Fun with custom:button-card.

Sorry if you got disappointed by my answer, But yes i invest time, but i need some level of understanding what you actually have for “problems” , other than you posting some messy code, which i btw haven’t invested time in “solving” , as nothing works, and i don’t “get the picture, how it suppose to look like” :wink:

A Simple entity-card does/show this by default, you could place this inside i.e Room-Card Or Native Glance Card

Yes For this you need a template, but for you i think you should start with making a card working, before you think of going into hard-styling

3

Here is the fully working card for bathroom:

type: custom:button-card
icon: mdi:bathtub
entity: light.bathroom_lght_lt
name: Bathroom
view_layout:
  grid-area: bathroom
state:
  - value: 'on'
    styles:
      icon:
        - animation: borderFadeIn 4.5s ease-in-out infinite
        - border: 30px solid rgba(222,212,115,0.8)
        - border-radius: 50%
        - overflow: not_hidden
        - width: 40px
        - height: 40px
      img_cell:
        - border: 1px solid rgba(222,212,115,0.5)
        - overflow: hidden
extra_styles: |
  @keyframes borderFadeIn {
    0% { border-color: rgba(222,212,115,0.4); }
    50% { border-color: rgba(222,212,115,0.75); }
    100% { border-color: rgba(222,212,115,0.4); }
  }
  @keyframes borderFadeOut {
    0% { border-color: rgba(222,212,115,0.4); }
    50% { border-color: rgba(222,212,115,0.75); }
    100% { border-color: rgba(222,212,115,0.4); }
  }
custom_fields:
  temp: |
    [[[
        var temp = states['sensor.bathroom_temperature'].state;
        var hum = states['sensor.bathroom_humidity'].state;

        return `
        ${parseFloat (temp).toFixed(1)}°
        <span style="font-size:10px;font-weight:250;opacity:0.6">
        ${parseFloat (hum).toFixed(1)}%
        `       
    ]]]
styles:
  card:
    - height: 100%
    - padding: 5px
    - background: '#858583'
    - border-radius: 6px 30px 6px 20px
  grid:
    - grid-template-areas: '"n i" "temp temp"'
    - gridtemplate-rows: 1fr min-content
    - grid-template-columns: min-content 1fr
  img_cell:
    - justify-self: en
    - align-self: start
    - background: '#CDE8E5'
    - border-radius: 100%
    - width: 55px
    - height: 55px
  icon:
    - width: 40px
    - color: black
    - padding-bottom: 0px
    - padding-left: 0px
  name:
    - position: absolute
    - border-bottom: 0.1px solid currentColor
    - text-decoration: none
    - left: 2
    - bottom: 31px
    - justify-self: left
    - height: null
    - align-self: start
    - text-align: left
    - font-size: px
    - font-weight: 400
    - color: black
    - opacity: 0.25
    - padding: px
  custom_fields:
    temp:
      - justify-self: start
      - font-size: 20px
      - line-height: 20px
      - font-weight: 300
      - color: black
      - padding: 0 0 0px 0px

By fully working I mean that it has that desired animation, light is fine. Have to tune up the appearance a bit, but overal, I’m happy with it.

But this one doesn’t have that combo I’m looking for for the “entry” card.

I tried to search everywhere, couldn’t find anything like that. I chatted more with GPT than with my wife over the last couple of days

1 Like
4

As mentioned above, I got all the rooms in working order already. The card I posted for bathroom doesn’t show that nicely without layout-card grid - but works, and in my grid looks nice.

The only card left is that “Entry” card which is driving me nuts :person_facepalming:

5

So you want to show the icon of the binary:sensor.door (changing open/close, as default) , and No matter the state of the door-sensor you want the fade around the icon, when lights are on/of ?

But you also want to use the button-card to turn the light on/of ? hopefully not by clicking the binary_sensor-icon ? , if so, you can use tab_action(run a script/automation :slight_smile:

Or you want (as attempted in your code) the light.entity-icon showing the icons from the state of the binary_sensor.door, and then the extra_styles around the icons, no matter which state the door icons represent

6

Yes, that sums it up nicely(first part).
And no, the light is automated, so it is not really important whether click/tap would trigger the light toggle.

That first part sound easier, doesn’t it?
The first messy code I sent, just ignore it. It was overwritten tousand times and it doesn’t make sence anymore :smiley:

1 Like
7

No, not really, thou u can add tab_action as-well to not turn_on/off the light
so keep your light.bath/hallway, and add:

icon: |
  [[[          
  if (states[ 'binary_sensor.door_sensor_contact' ].state == 'on')
    return 'mdi:door-open'
    ;
    else
    return 'mdi:door'
    ;
  ]]]

PS: And Change your Topic Header … Custom:Button-Card, …