Can someone help/explain button animation

Configuration Frontend
1

I have this yaml configuration for a button-card and I would like that my MDI:motion-sensor icon(5) can change to MDI: motion-sensor-off when there is no motion detected I tried a few options but couldn’t get it working

type: custom:button-card
aspect_ratio: 1/1
styles:
  custom_fields:
    icon1:
      - position: absolute
      - bottom: 5%
      - left: 5%
      - height: 20%
      - width: 20%
      - color: |
          [[[
            return states['switch.my-switch'].state === 'on' ? '#ffff00' : '#000000';
          ]]]
    icon2:
      - position: absolute
      - bottom: 5%
      - left: 50%
      - height: 20%
      - width: 20%
      - color: |
          [[[
            return states['lock.my-lock'].state === 'unlocked' ? '#008000' : '#FF0000';
          ]]]
    icon3:
      - position: absolute
      - bottom: 5%
      - left: 75%
      - height: 20%
      - width: 20%
      - color: |
          [[[
            var temperature = parseFloat(states['sensor.my-motion-sensor].state);
            if (temperature < 10) {
              return '#0000ff';  // Blue
            } else if (temperature >= 10 && temperature <= 22) {
              return '#ffa500';  // Orange
            } else {
              return '#ff0000';  // Red
            }
          ]]]
    icon4:
      - position: absolute
      - bottom: 25%
      - left: 13%
      - height: 75%
      - width: 75%
      - color: '#0000FF'
    icon5:
      - position: absolute
      - bottom: 5%
      - left: 30%
      - height: 20%
      - width: 20%
      - color: '#FFC0CB'
      - animation: blink 1s infinite
custom_fields:
  icon1: |
    <ha-icon icon="mdi:lightbulb-on"></ha-icon>
  icon2: |
    <ha-icon icon="mdi:lock"></ha-icon>
  icon3: |
    <ha-icon icon="mdi:thermometer"></ha-icon>
  icon4: |
    <ha-icon icon="mdi:home"></ha-icon>
  icon5: |
    <ha-icon icon="mdi:motion-sensor"></ha-icon>
2

Have you tried changing

state === 'unlocked'

to

state === 'off'

?
The state should be either locked/unlocked (which is the user-friendly display) or on/off (which is the actual state found in dev tools)

3

Hi thx for your reply

I have no problem with the lock/change of the color
The licht icon(1) and the lock icon(2) color change works

But I like to do the same as the color for the icon
So for icon(1) when the light is on its yellow/MDI:light-bulb and when off black/MDI:light-bulb-off

And same effect for icon(5) when on blinking-pink/MDI: motion-sensor and when off black/MDI:licht-bulb-off

And expand icon(2) from the lock it already changed color on the state but I would like to have it when unlocked red/MDI:lock-open and when unlocked locked green/MDI:lock

1000013186
10000131861080×268 25.4 KB

4

Sorry, I missed the fact that you were referencing 2 separate entities (switch & lock) in icon & icon2.

Unfortunately that is the depth of my skills, so cannot help any further with your issue

5

i didn’t see a way to do that in the “right” way. but i offer this solution for you knowing that someone will puke all over it and smack me. but hey… if there’s no better answer, this one’s better than nothing:

type: custom:button-card
entity: input_boolean.testbool
styles:
  custom_fields:
    icon1on:
      - position: absolute
      - bottom: |
          [[[
            return states['input_boolean.testbool'].state === 'on' ? '-50%' : '5%';
          ]]]
      - left: 5%
      - height: 50%
      - width: 20%
      - color: |
          [[[
            return states['input_boolean.testbool'].state === 'on' ? '#ffff00' : '#000000';
          ]]]
    icon1off:
      - position: absolute
      - bottom: |
          [[[
            return states['input_boolean.testbool'].state === 'on' ? '5%' : '-50%';
          ]]]
      - left: 5%
      - height: 50%
      - width: 20%
      - color: |
          [[[
            return states['input_boolean.testbool'].state === 'on' ? '#ffff00' : '#000000';
          ]]]
custom_fields:
  icon1on: |
      <ha-icon icon="mdi:lightbulb"></ha-icon>      
  icon1off: |
      <ha-icon icon="mdi:lightbulb-off"></ha-icon>

:duck:ing

1 Like