I don’t know if the regex is correct, but your code was not valid (missing closing brace and double return). Try
entity_picture: |
[[[
const str = states[variables.my_entity].state;
const regex = (\d+).(\d+).(\d+).(\d+);
if ( str.match(regex) )
return `/local/images/vpn.png`;
else return `/local/images/vpn-off.png`;
]]]
Both codes are working:
extra_styles: |
@keyframes music {
0% { box-shadow: 0 0 5px -2px var(--button-card-light-color) }
90% { box-shadow: 0 0 5px 12px var(--button-card-light-color) }
}
or
extra_styles: |
[[[
let col1 = 'rgba('+entity.attributes.rgb_color+',1)',
col2 = 'rgba('+entity.attributes.rgb_color+',0)';
return `
@keyframes music {
0% { box-shadow: 0 0 5px -2px ${col1} }
90% { box-shadow: 0 0 5px 12px ${col2} }
}`
]]]
EDIT: I’d overlooked the different transparencies.
You have to style the card in the custom field as well:
custom_fields:
info:
card:
type: custom:button-card
icon: mdi:information-box
tap_action:
action: more-info
entity: light.hue_iris
styles:
card:
- border-width: 0
- background-color: rgba(0,0,0,0)
- '--mdc-ripple-press-opacity': 0 # if you don’t want the ripple effect
styles:
custom_fields:
info:
- border-radius: 50%
- box-shadow: none
- position: absolute
- left: 65%
- top: 5%
- height: 20px
- width: 80px
- font-size: 8px
- line-height: 20px
Thanks a lot 
styles:
card:
- background-image: url("/local/buttons/button_basic_red.png")
- background-size: cover
- background-position: 50% 50%
I got it now, I also have to style inside as well. It’s working as expected, thanks a lot !
Thank you. I’ll give it a try.
Has anyone tried to display an HA timer countdown in a notification: section??
HA timer entities states are either active or idle and when the entity is displayed via entities card the state is magically transformed into a countdown by some internal computation using now() and the attribute finishes_at, which is removed when timer is “idle”.
I can get the button-card’s overall state to display the countdown by using entity: timer.bathroom_light_timer & show_state: true but I do not want that! I’d like to display the countdown in a notification area but can’t figure out the javascript.
Simple text display:
My failed attempt thus far:
type: custom:button-card
name: Bathroom
icon: mdi:vanity-light
entity: light.bathroom_light
tap_action:
action: navigate
navigation_path: /lovelace/bathroom
show_state: false
styles:
grid:
- position: relative
custom_fields:
notification1:
- background-color: |
[[[
if (states['binary_sensor.bathroom_occupancy'].state == 'off')
return "";
return "";
]]]
- border-radius: 10%
- position: absolute
- left: 5%
- top: 25%
- height: 30px
- width: 30px
- font-size: 6px
- line-height: 25px
notification2:
- background-color: |
[[[
if (states['timer.bathroom_light'].state == 'idle')
return "";
return "green";
]]]
- border-radius: 50%
- position: absolute
- left: 75%
- top: 10%
- height: 25px
- width: 25px
- font-size: 8px
- line-height: 25px
custom_fields:
notification1: |
[[[
if (states['binary_sensor.bathroom_occupancy'].state == 'on')
return `<ha-icon
icon="mdi:motion-sensor"
style="width: 22px; height: 22px; color: yellow;">
</ha-icon>`
return "";
]]]
notification2: |
[[[
if (states['timer.bathroom_light'].attributes.finishes_at)
return helpers.formatDateTime(timer.bathroom_light.attribute.finishes_at);
return helpers.formatDateTime(timer.bathroom_light.attribute.finishes_at);
]]]
Simple text display working code:
type: custom:button-card
name: Bathroom
icon: mdi:vanity-light
entity: light.bathroom_light
tap_action:
action: navigate
navigation_path: /lovelace/bathroom
show_state: false
styles:
grid:
- position: relative
custom_fields:
notification1:
- background-color: |
[[[
if (states['binary_sensor.bathroom_occupancy'].state == 'off')
return "";
return "";
]]]
- border-radius: 10%
- position: absolute
- left: 5%
- top: 25%
- height: 30px
- width: 30px
- font-size: 6px
- line-height: 25px
notification2:
- background-color: |
[[[
if (states['timer.bathroom_light'].state == 'idle')
return "";
return "green";
]]]
- border-radius: 50%
- position: absolute
- left: 75%
- top: 10%
- height: 25px
- width: 25px
- font-size: 8px
- line-height: 25px
custom_fields:
notification1: |
[[[
if (states['binary_sensor.bathroom_occupancy'].state == 'on')
return `<ha-icon
icon="mdi:motion-sensor"
style="width: 22px; height: 22px; color: yellow;">
</ha-icon>`
return "";
]]]
notification2: |
[[[
if (states['timer.bathroom_light'].state == 'idle')
return ' ';
return 'Active';
]]]
Mission accomplished!
- type: custom:button-card
name: Bathroom
icon: mdi:vanity-light
entity: light.bathroom_light
show_state: false
tap_action:
action: navigate
navigation_path: /lovelace/bathroom
custom_fields:
motion: |
[[[
if (states['binary_sensor.bathroom_occupancy'].state == 'on')
return `<ha-icon
icon=mdi:motion-sensor
style="width: 22px; height: 22px; color: yellow;">
</ha-icon>`
return "";
]]]
timer:
card:
type: custom:button-card
entity: timer.bathroom_light
aspect_ratio: 1/1
show_icon: false
show_name: false
show_state: |
[[[
if (states['timer.bathroom_light'].state == 'active')
return true;
return false;
]]]
styles:
card:
- border: none
state:
- font-size: 70%
- color: yellow
styles:
custom_fields:
motion:
- display: block
- position: absolute
- top: 30%
- left: 2%
- width: 30%
- height: 30%
timer:
- display: block
- position: absolute
- top: 20%
- right: 2%
- width: 30%
- height: 30%
I am trying to implement this as you have noted, but I am struggling to figure it out. I have read through the button card documentation and can only find one reference to “background image.” It shows it as an “extra style” and it just and image background swap loop. Where would I insert the background image code at?
Put it in styles —> card:
card:
- '--c-color-home': '#32a852'
- '--c-color-away': rgb(255,0,0)
- '--c-color-zone': '#ffbf00'
- '--c-color-stationary': '#3182b7'
- '--c-stroke-width': 2.3
- '--c-icon-color-on': rgb(0,0,0)
- '--c-icon-color-off': '#97989c'
- border-radius: 10px
- border-width: 0px
- '-webkit-tap-highlight-color': rgba(0,0,0,0)
- transition: none
- '--mdc-ripple-color': |
[[[
return variables.state_on
? 'rgb(0,0,0)'
: '#97989c';
]]]
- color: |
[[[
return variables.state_on
? 'rgb(0,0,0)'
: '#97989c';
]]]
- background-color: |
[[[
return variables.state_on
? 'rgba(255,255,255, 0.85)'
: 'rgba(115, 115, 115, 0.25)';
]]]
- background-image: |
[[[
return variables.state_on
? 'linear-gradient(to bottom, rgba(255,0,0,.5) 0%, rgba(255,0,0,.5) 50%, rgba(0,0,0,0) 50%)'
: 'rgba(115, 115, 115, 0.25)';
]]]
Perfect. Thanks. I’ll give it a try and report back. I’ve actually got three colors I want to choose from, but I think this will point me in the right direction.
You can also use variables:
variables:
state_on: …
…
…
bg: green
styles:
…
…
- background-image: |
[[[
return variables.state_on
? 'linear-gradient(to bottom, ' + variables.bg + ' 0%, ' + variables.bg + ' 50%, rgba(0,0,0,0) 50%)'
: 'rgba(115, 115, 115, 0.25)';
]]]
Thank you so much for your help. I’ve got it working now. Still deciding if I like it or not, but it will make it easier to see on the wall-mounted tablet from a distance.
Card variables in extra_styles CSS.
Does anybody know how (or even if) you can use the card variables inside the extra_styles section?
I’m creating an animated image slideshow, but I really need tu put the images as variables since I’m using the card as template on multiple places. I have it working without variables.
extra_styles: |
@keyframes slideshow {
0% {
background: [[[ return variables.img1 ]]];
}
100% {
background: [[[ return variables.img2 ]]];
}
}
square: false
type: grid
cards:
- type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:button-card
entity: sensor.termometr_kukhnia_temperature
show_icon: false
name: Living
styles:
card:
- border-style: none
- box-shadow: 0px 0px 10px -9px black
custom_fields:
temp:
- filter: opacity(100%)
- justify-self: start
- margin-left: 10px
- margin-top: 20px
- padding-bottom: 10%
- font-size: 65%
graph:
- padding-top: 0%
- width: 100%
- height: 100%
- margin-bottom: '-3%'
icon:
- width: 25px
- color: auto
name:
- font-size: 87%
- font-weight: var(--mcg-title-font-weight, 500)
- justify-self: start
- margin-top: 6px
- margin-left: 12px
- opacity: 0.65
grid:
- grid-template-areas: '"n n" "temp temp" "graph graph"'
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content min-content
custom_fields:
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width:18px; height: 18px; color:#ff8c00;">
</ha-icon><span style="font-size:120%; font-weight: 300;">
${states['sensor.termometr_kukhnia_temperature'].state}°C </span>
<ha-icon
icon="mdi:water-percent"
style="width: 18px; height: 18px; color: #3399ff;">
</ha-icon><span style="font-size:120%; font-weight: 300; text-align: center;">
${states['sensor.termometr_kukhnia_humidity'].state}%</span>`
]]]
card_mod:
style: |
ha-card {
z-index: 1;
height: 70px !important;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.termometr_kukhnia_temperature
name: Temperature
color: '#ff8c00'
- entity: sensor.termometr_kukhnia_humidity
name: Humidity
color: '#3399ff'
y_axis: secondary
height: 50
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.verkhnii_svet_gostinaia
content_info: none
card_mod:
style: |
ha-card {
border: none;
box-shadow: none !important;
background: none !important;
}
alignment: end
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
z-index: 1;
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.svetilnik_kukhnia
content_info: none
card_mod:
style: |
ha-card {
border: none;
box-shadow: none !important;
background: none !important;
}
alignment: end
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 95%;
top: 0px;
z-index: 1;
}
- type: custom:stack-in-card
cards:
- type: custom:button-card
entity: sensor.termometr_kukhnia_temperature
show_icon: false
name: Kitcten
styles:
card:
- border-style: none
- box-shadow: 0px 0px 10px -9px black
custom_fields:
temp:
- filter: opacity(100%)
- justify-self: start
- margin-left: 10px
- margin-top: 20px
- padding-bottom: 10%
- font-size: 65%
graph:
- padding-top: 0%
- width: 100%
- height: 100%
- margin-bottom: '-3%'
icon:
- width: 25px
- color: auto
name:
- font-size: 87%
- font-weight: var(--mcg-title-font-weight, 500)
- justify-self: start
- margin-top: 6px
- margin-left: 12px
- opacity: 0.65
grid:
- grid-template-areas: '"n n" "temp temp" "graph graph"'
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content min-content
custom_fields:
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width:18px; height: 18px; color:#ff8c00;">
</ha-icon><span style="font-size:120%; font-weight: 300;">
${states['sensor.termometr_kukhnia_temperature'].state}°C </span>
<ha-icon
icon="mdi:water-percent"
style="width: 18px; height: 18px; color: #3399ff;">
</ha-icon><span style="font-size:120%; font-weight: 300; text-align: center;">
${states['sensor.termometr_kukhnia_humidity'].state}%</span>`
]]]
card_mod:
style: |
ha-card {
z-index: 1;
height: 70px !important;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.termometr_kukhnia_temperature
name: Temperature
color: '#ff8c00'
- entity: sensor.termometr_kukhnia_humidity
name: Humidity
color: '#3399ff'
y_axis: secondary
height: 50
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.verkhnii_svet_gostinaia
content_info: none
card_mod:
style: |
ha-card {
border: none;
box-shadow: none !important;
background: none !important;
}
alignment: end
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
z-index: 1;
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.svetilnik_kukhnia
content_info: none
card_mod:
style: |
ha-card {
border: none;
box-shadow: none !important;
background: none !important;
}
alignment: end
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 95%;
top: 0px;
z-index: 1;
}
columns: 1
how to make the entire card clickable?
square: false
type: grid
cards:
- type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:button-card
entity: sensor.termometr_kukhnia_temperature
show_icon: false
name: Living
tap_action:
action: url
url_path: http://google.com
this does not work
This worked for me at a higher level as I’m not using custom:stack-in-card…
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
name: Aquarium
icon: mdi:fish
layout: vertical
tap_action:
action: navigate
navigation_path: /lovelace/aquarium
- type: custom:button-card
name: Bedroom
icon: mdi:bed
entity: light.bedroom_lighting
tap_action:
action: url
url_path: https://www.google.ca
hold_action:
action: toggle
entity: light.bedroom_lighting
custom_fields:
motion: |
type: custom:button-card
tap_action:
action: none
custom_fields:
wuguan:
card:
type: custom:button-card
entity: device_tracker.neo6
show_entity_picture: true
card mode:
style: |
ha-card {
box-shadow: none;
}
tap_action:
action: none
show_name: true
name: |
[[[ return states['sensor.wu_guan_bu_shu'].state + '步';]]]
entity_picture: /local/header/wuguan.png
aspect_ratio: 1/1.4
styles:
card:
- background-color: transparent
img_cell:
- padding: 60%
- margin-top: '-50%'
name:
- font-weight: bold
- font-size: 13px
- color: black
- align-self: middle
- justify-self: center
- padding-bottom: 4px
- margin-top: '-50%'
state:
- value: not_home
styles:
card:
- filter: opacity(100%)
icon:
- filter: grayscale(100%)
baby:
card:
type: custom:button-card
entity: device_tracker.neo8
show_name: true
name: |
[[[ return states['sensor.bao_bao_bu_shu'].state + 'setup; ]]]
show_entity_picture: true
entity_picture: /local/header/baby.png
aspect_ratio: 1/1.4
tap_action:
action: none
styles:
img_cell:
- padding: 60%
- margin-top: '-50%'
name:
- font-weight: bold
- font-size: 13px
- color: black
- align-self: middle
- justify-self: center
- padding-bottom: 4px
- margin-top: '-50%'
state:
- value: not_home
styles:
card:
- filter: opacity(100%)
icon:
- filter: grayscale(100%)
weather:
card:
type: custom:button-card
entity: weather.yinchuan
show_name: true
name: >
[[[ return states['weather.yinchuan'].attributes.apparent_temperature +
'℃'; ]]]
show_entity_picture: false
aspect_ratio: 1/1.4
tap_action:
action: none
styles:
icon:
- padding: 20%
- margin-top: '-50%'
- color: '#f9d840'
name:
- font-weight: bold
- font-size: 13px
- color: black
- align-self: middle
- justify-self: center
- padding-bottom: 4px
- margin-top: '-50%'
styles:
custom_fields:
wuguan:
- background-color: transparent
- padding-left: 0%
- width: 55px
- align-self: start
- justify-self: start
- justify-content: start
- align-items: start
baby:
- padding-left: 30%
- width: 55px
- align-self: start
- justify-self: start
- justify-content: start
- align-items: start
weather:
- padding-left: 30%
- width: 55px
- align-self: start
- justify-self: end
- justify-content: start
- align-items: start
notice:
- width: 100%
info:
- width: 100%
card:
- overflow: unset
- height: min-content
- border-radius: 0%
- padding-left: 0%
- padding-top: 0%
- padding-bottom: 0%
grid:
- grid-template-areas: '"wuguan baby weather" "notice notice notice" "info info info"'
- grid-template-columns: min-content min-content 1fr
- grid-template-rows: min-content min-content min-content
Set tap_action to none, there is no click result but the click effect cannot be deleted
How to delete click effects
Hi,
I want to move entity picture inside button card according to value of a sensor.
Is it possible to get current position of it to convert into variable and use it inside animations keyframe statement?
TIA
Hi,
I created a binary sensor (Aqara T1 Door Sensor) button card which calls a script to turn on my A/C on tap action. This function works fine, and I’m also able to change the state name to On/Off instead of the default Open/Closed.
However, I have difficulty changing the icon color based on the state. Below is my code, is there anything I’m doing wrong?
type: custom:button-card
entity: binary_sensor.living_room_air_con_sensor_contact
name: Air Con
show_name: false
show_state: true
size: 30%
tap_action:
action: call-service
service: script.living_room_air_con_toggle
color_type: icon
color: |
[[[
if (entity.state === 'off')
return 'Green'
else
return 'Grey'
]]]
state_display: |
[[[
if (entity.state === 'off')
return 'Off'
else
return 'On'
]]]
I’ve also tried using;
state:
- value: 'On'
color: Green
- value: 'Off'
color: Grey
The icon color changes to yellow despite the above coding, which seems to be the default color for this senor/entity.
Thanks.