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>