Hi all. Im just getting started with home assistant and have installed the custom button card. I’m trying to get the button’s icon to change to red and start flashing when the switch is on for over one hour. But I cant seem to get it to work.
Here’s what I tried:
type: 'custom:button-card'
entity: switch.coffee_maker
name: Coffee Maker
icon: mdi:coffee
color_type: card
state:
- value: 'on'
operator: '>'
options:
hours: 1
styles:
icon:
- color: red
- animation: blink 2s ease infinite
- value: 'on'
operator: '<='
options:
hours: 1
styles:
icon:
- color: orange
tap_action:
action: toggle
Any help would be appreciated!
Disregard. Bing chat to the rescue…
This code is working:
type: custom:button-card
entity: switch.coffee_maker
name: Coffee Maker
show_state: true
state:
- value: 'on'
styles:
icon:
- color: orange
- operator: template
value: >
[[[ return new Date().getTime() - new Date(entity.last_changed).getTime() > 3600000; ]]]
styles:
card:
- animation: blink 2s ease infinite
- color: red
styles:
icon:
- color: white
- width: 40px
- height: 40px
tap_action:
action: toggle
hold_action:
action: more-info
chivakaa
(chivakaa)
July 26, 2023, 7:12pm
3
Hi @ryanjj509 unfortunately, your code does not work for me. Using your code or the following one:
type: custom:button-card
entity: binary_sensor.tuya_water_leak_sensor_n1_ad0_water_leak
state:
- value: 'on'
color: blue
icon: mdi:dishwasher
- operator: template
color: blue
icon: mdi:dishwasher
value: >
[[[ return new Date().getTime() - new Date(entity.last_changed).getTime() > 3600000; ]]]
styles:
card:
- animation: blink 2s ease infinite
color: white
icon: mdi:dishwasher
color_type: card
name: Dishwasher - active 30s
tap_action:
action: toggle
hold_action:
action: more-info
When entity change from ‘on’ value, does not blink 1h neither 1ms. Looks like
value: >
[[[ return new Date().getTime() - new Date(entity.last_changed).getTime() > 3600000; ]]]
is not right? Trying to resolve with Google Bard without success please any consideration?
Trigun1
(Trigun)
October 15, 2023, 4:18pm
4
Hi All,
Perhaps anyone is able to help me out here.
I am using the blink option for a while now but somehow it stopped blinking.
Has there been any changes that you know of?
type: custom:button-card
color_type: card
entity: sensor.target_alert_temp_probe_1
show_state: true
show_name: false
size: 55%
state:
- value: Unavailable
color: royalblue
icon: mdi:grill
- value: Grill too Hot
color: Red
icon: mdi:grill
styles:
card:
- animation: blink 2s ease infinite
- value: Correct temp Range
color: Green
icon: mdi:grill
styles:
card:
- animation: blink 2s ease infinite
- operator: default
color: white
icon: mdi:grill
Having the same trouble. Did you figure this out?
I reached out to Dave from 3ATIVE VFX Studio on his discord. He was able to provide me with code to make the card blink after x seconds.
Here is a simple example. When light.office_lamps
is on for 10 seconds, the card will start blinking.
type: custom:button-card
entity: light.office_lamps
state:
- value: 'on'
styles:
card:
- animation: blink 1.5s ease 10s infinite
hartitman
(Hartitman)
January 8, 2024, 11:05am
7
Hi, I can get the card to flash and works well, I want to make the border of the card to flash.
Is this possible? and if so can you provide and example, please see my code below.
type: custom:button-card
entity: binary_sensor.office_motion_sensor_iaszone
name: Bedroom 2
icon: mdi:shield-check
tap_action:
action: more-info
show_state: false
styles:
card:
- background-color: rgb(173, 216, 230)
- filter: opacity(80%)
- height: 60px
- border-color: green
- border-width: 4px
icon:
- height: 25px
- color: black
name:
- font-size: 12px
- color: black
state:
value: ‘on’
icon: mdi:motion-sensor
styles:
card:
- height: 60px
- border-color: red
- border-width: 4px
icon:
- height: 25px
- color: black
name:
- font-size: 11px
- color: black
value: unavailable
icon: mdi:exclamation-thick
styles:
card:
- height: 60px
- border-color: grey
- border-width: 4px
- animation: blink 1s ease infinite
icon:
- color: black
name:
- font-size: 11px
- color: black