The king is dead. Long live @RomRider
1 Like
So Iād like to change the ālockā duration from 5 seconds to 1 or 2 seconds. I tried this but it doesnāt work:
- type: custom:button-card
entity: input_boolean.alarmgaragedoor
icon: mdi:security
color_type: icon
lock: true
styles:
lock:
- -webkit-animation-duration: 1s
- animation-duration: 1s
- -webkit-animation-fill-mode: both
- animation-fill-mode: both
- margin: unset
state:
- value: 'off'
color: var(--paper-item-icon-color) # rgb(54, 95, 140)
- value: 'on'
color: var(--secondary-text-color) # rgb(251, 210, 41)
name: Exit-Enter
show_state: false
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.alarmgaragedoor
I just copied in the default style for lock and put it in what looked like the correct format but did I screw up?
Unfortunately that will not work, the lock is handled in javascript and the 5 seconds are hard-coded, itās not an animation, itās 2 animations + a delay between both.
If youāre interested in the code: https://github.com/custom-cards/button-card/blob/9ef93a2a350176d9d1e86adee9d86908ff13a270/src/button-card.ts#L776-L793
Well thatās a pityā¦
I just logged a Feature Request for this.
once again you were right. I forgot I have double setups for Lovelace and legacy. I meant to say the legacy tiles works correct. It uses this:
- entity: device_tracker.life360_name
style_template: >
if (state === 'home' || state === 'not_home') return 'background-image: url(\"/local/tiles/family/name_' + state + '.png\")';
return 'background-color: #643aac;background-image: url(\"/local/tiles/family/name_' + entities['sensor.name_location_picture'].state + '.png\")';
more_info: group.name
and this jinja template sensor for state, since I couldnāt get my head around creating 1 template for all, had to make a dedicated image template for the non home/not_home states (zones):
value_template: >
{% set state = states('device_tracker.life360_name') %}
{{ state|replace(' ','_')| lower }}
so jinja does it for all occurrencesā¦ no javascript
pretty much every language but javascript does it for all occurrences. Javascript had to be that guy.
Hi there
Iām struggling to make button_card_templates: work, can someone please shed some light? Gotta be something simple that I canāt see.
What is ui-lovelace-card.yaml? Never saw another reference to this file.
I built a view using the example on the documentation but that also donāt work:
title: Home
resources:
- url: /local/button-card.js
type: module
button_card_templates:
header:
styles:
card:
- padding: 5px 15px
- background-color: var(--paper-item-icon-active-color)
name:
- text-transform: uppercase
- color: var(--primary-background-color)
- justify-self: start
- font-weight: bold
label:
- text-transform: uppercase
- color: var(--primary-background-color)
- justify-self: start
- font-weight: bold
header_red:
template: header
styles:
card:
- background-color: '#FF0000'
views:
- title: "Test View"
icon: mdi:wrench
cards:
- type: custom:button-card
template: header_red
name: "My Test Header"
This is what is rendered:
Thanks for any hint.
Tales Maschio
That looks like a caching issue. Clear your cache or add ?v=12345 at the end of your resource URL to validate. Also verify that you are using the latest version.
Solved. Awesome, thank you!
Revamped my weather card a bit and itās gotten pretty slick, albeit an awful looking configuration 
type: custom:button-card
layout: icon_label
color: auto
aspect_ratio: 1/1
tap_action:
action: more-info
haptic: light
show_state: false
show_label: true
styles:
grid:
- grid-template-rows: 42px auto 42px
- grid-template-columns: 42px auto
card:
- border-radius: 15px
- margin: 5px 5px 0px 0px
- padding: 0px 0px
icon:
- height: 30px
- width: 30px
name:
- justify-self: start
- padding: 0px 10px
- font-size: 10px
label:
- padding: 7px
- font-size: 11px
- font-weight: bold
- font-family: Helvetica
entity: weather.dark_sky
label_template: >
var options = { hour: 'numeric', minute: 'numeric' };
var sunrise_date = new Date(states['sun.sun'].attributes.next_rising);
var sunrise_time = sunrise_date.toLocaleDateString("en-US", options).split(",")[1];
var sunset_date = new Date(states['sun.sun'].attributes.next_setting);
var sunset_time = sunset_date.toLocaleDateString("en-US", options).split(",")[1];
return '<div align="left">' +
'<div style="font-weight: normal; font-size: 10px; margin-top: 0px;">' +
'<ha-icon icon="mdi:weather-sunset-up" style="width: 12px; color: #f4e842; padding-bottom: 4px;"></ha-icon> ' +
sunrise_time +
'</div>' +
'<div style="font-weight: normal; font-size: 10px; margin-top: -10px;">' +
'<ha-icon icon="mdi:weather-sunset-down" style="width: 12px; color: #f4e842; padding-bottom: 4px;"></ha-icon> ' +
sunset_time +
'</div>' +
'</div>';
name_template: >
var degree = 45;
var angle = entity.attributes.wind_bearing + 22.5;
var direction = (angle >= 0 * degree && angle < 1 * degree) ? "N" :
(angle >= 1 * degree && angle < 2 * degree) ? "NE" :
(angle >= 2 * degree && angle < 3 * degree) ? "E" :
(angle >= 3 * degree && angle < 4 * degree) ? "SE" :
(angle >= 4 * degree && angle < 5 * degree) ? "S" :
(angle >= 5 * degree && angle < 6 * degree) ? "W" :
(angle >= 6 * degree && angle < 7 * degree) ? "NW" : "N";
return '<div align="left" style="padding-top: 40px;">' +
'<div style="font-size: 11px;">' + entity.attributes.temperature + 'Ā°F - ' + entity.attributes.forecast[0].temperature + 'Ā°F / ' + entity.attributes.forecast[0].templow + 'Ā°F</div>' +
'<div style="font-weight: normal; font-size: 10px; margin-top: -5px;">' +
'<ha-icon icon="mdi:water" style="width: 12px; color: #03a9f4; padding-bottom: 2px;"></ha-icon> ' +
(entity.attributes.forecast[0].precipitation || 0) + ' in' +
'</div>' +
'<div style="font-weight: normal; font-size: 10px; margin-top: -10px;">' +
'<ha-icon icon="mdi:weather-windy" style="width: 12px; color: #03a9f4; padding-bottom: 2px;"></ha-icon> ' +
direction + ' ' + (entity.attributes.wind_speed || 0) + ' mph ' +
'</div>' +
'<div style="font-weight: normal; font-size: 10px; margin-top: -10px;">' +
'<ha-icon icon="mdi:water-percent" style="width: 12px; color: #03a9f4; padding-bottom: 2px;"></ha-icon> ' +
(entity.attributes.pressure || 0) + ' %' +
'</div>' +
'</div>';
icon: mdi:weather-sunny
state:
- value: clear-night
icon: mdi:weather-night
- value: cloudy
icon: mdi:weather-cloudy
styles:
card:
- box-shadow: 0px 0px 10px 3px purple
icon:
- color: purple
- value: overcast
icon: mdi:weather-cloudy-arrow-right
styles:
card:
- box-shadow: 0px 0px 10px 3px purple
icon:
- color: purple
- value: fog
icon: mdi:weather-fog
styles:
card:
- box-shadow: 0px 0px 10px 3px purple
icon:
- color: purple
- value: hail
icon: mdi:weather-hail
styles:
card:
- box-shadow: 0px 0px 10px 3px white
icon:
- color: white
- value: lightning
icon: mdi:weather-lightning
styles:
card:
- box-shadow: 0px 0px 10px 3px #03a9f4
icon:
- color: #03a9f4
- value: lightning-rainy
icon: mdi:weather-lightning-rainy
styles:
card:
- box-shadow: 0px 0px 10px 3px #03a9f4
icon:
- color: #03a9f4
- value: partlycloudy
icon: mdi:weather-partlycloudy
- value: pouring
icon: mdi:weather-pouring
styles:
card:
- box-shadow: 0px 0px 10px 3px #03a9f4
icon:
- color: #03a9f4
- value: rainy
icon: mdi:weather-rainy
styles:
card:
- box-shadow: 0px 0px 10px 3px #03a9f4
icon:
- color: #03a9f4
- value: snowy
icon: mdi:weather-snowy
styles:
card:
- box-shadow: 0px 0px 10px 3px white
icon:
- color: white
- value: snowy-rainy
icon: mdi:weather-snowy-rainy
styles:
card:
- box-shadow: 0px 0px 10px 3px white
icon:
- color: white
- value: sunny
icon: mdi:weather-sunny
styles:
card:
- box-shadow: 0px 0px 10px 3px yellow
icon:
- color: yellow
- value: windy
icon: mdi:weather-windy
- value: windy-variant
icon: mdi:weather-windy-variant
16 Likes
amazing button,i love it,just one thingā¦u have the attribute pression instead of humidity at name_templates.
congratulations to the creator of this card and all community that bring new ideas,im really very glad with this card in my configuration,thanks lot to all
'<div style="font-weight: normal; font-size: 10px; margin-top: -10px;">' +
'<ha-icon icon="mdi:water-percent" style="width: 12px; color: #03a9f4; padding-bottom: 2px;"></ha-icon> ' +
(entity.attributes.pressure || 0) + ' %' +
2 Likes
Thanks for catching that 
This looks pretty cool, I might use some of it to replace the simple-weather-card as I would love to use as less custom-cards as possible (this isnāt easy though).
1 Like
The simple-weather-card was my starting point for it 
1 Like
HI
how can i add timer ( count down ) to button?
If you have a timer entity, you should just have to add it as the entity for the card
like that?
- type: "custom:button-card"
icon: mdi:air-filter
color_type: icon
color: 'var(--accent-color)'
name: Air Cleaner
entities:
- input_boolean.air_cleaner
- timer.air_cleaner
tap_action:
action: toggle
hold_action:
action: more-info
Thereās no entities config, just entity
So I thought Iād try to recreate the old badges sensor icons we had from the old ui and this is small I can get it without looking crappy but on mobile is cuts them off. Is there a way to be able to scroll with my finger? or does anyone who has done this before have any tips?
You know badges still exist?
Anyways, to get a scrolling ārowā, you need to integrate a custom card that scrolls.