Thanks tom_I
It is fixed.
1 Like
How have you setup template for this?
1 Like
quite simple really:
horizontal-filler:
color_type: blank-card
styles:
card:
- width: 3px
vertical-filler:
color_type: blank-card
styles:
card:
- height: 3px
1 Like
Hi guys,
Can someone help me change this button, so that it either:
- Becomes depressed for xx secs
- Is just a tap-button, meaning no depress animation?
Iām lost when it comes to styling.
- type: custom:button-card
entity: input_boolean.godnat
style:
top: 82.1%
left: 91.05%
width: 10%
tap_action:
action: toggle
hold_action:
action: none
custom_fields:
icon_home: >
[[[ const state = entity.state === 'on' ? 'animate' : null;
return `<svg viewBox="0 0 50 50"> <style>@keyframes animate{from, 20%, 40%, 60%, 80%, to{animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}0%{transform: scale(0.3);}20%{transform: scale(1.1);}40%{transform: scale(0.9);}60%{transform: scale(1.03);}80%{transform: scale(0.97);}to{transform: scale(1);}}.animate{animation: animate 1s; transform-origin: center;}</style>
<path class="${state}" d="M42.2 28.3c0-.8-.2-1-.2-1L26 12.1s-.5-.4-1-.4-1 .3-1 .3L8.2 27.1c-.4.5-.4.9-.4.9v18.3c0 1.1.9 2 1.9 2h8.2a1.47 1.47 0 0 0 1.5-1.5v-14a1.47 1.47 0 0 1 1.5-1.5h8.4a1.47 1.47 0 0 1 1.5 1.5v14a1.47 1.47 0 0 0 1.5 1.5h8.2c1.1 0 2-.9 2-1.9 0-.2-.3-18.1-.3-18.1zM7.3 25l-1.6 1.5s-.3.3-.5.3-.5 0-.8-.2c-.2-.2-2-2.8-2-2.8s-.1-.4-.1-.7c.1-.3.2-.7.3-.8.4-.1 21.5-20.1 21.5-20.1s.4-.3.9-.3c.4 0 .8.1.9.2s.5.4.5.4l8.9 8.5V6s.1-.4.2-.7c.1-.2.3-.3.4-.3s.3-.1.3-.1h3s.3.1.4.3a1.08 1.08 0 0 1 .3.7v9.8l7.2 6.9s.2.3.3.4c.1.2.1.7.1.7 0 .1-.1.4-.2.5s-1.6 2.5-1.6 2.5-.1.3-.3.3c-.2.1-.4.1-.7 0-.2-.1-.5-.4-.5-.4L26.4 9.4s-.3-.3-.5-.4-.4-.2-.8-.2-.5.1-.8.1c-.1.1-.4.3-.7.5C23.3 9.8 7.3 25 7.3 25z"/></svg>`; ]]]
styles:
card: [transition: all 0.3s ease-out]
custom_fields:
icon_home:
[top: 10.5%, left: 10.1%, width: 2.9vw, position: absolute,
fill: "[[[ return entity.state === 'on' ? '#c7983e' : '#9da0a2'; ]]]"]
template: switch
Secondly and not so important, can I get a timer on the card that counts down from xx secs, after being pressed? Should be instead of the āTilā.
Thanks in advance
(I should mention that I have used the great work of Mattias Persson)
@Mariusthvdb could you please show the exact syntax for the confirmation template that worked for you? I cannot make this work and the documentation does not seem to suggest you can use anything else but plain text.
sure:
lock:
enabled: true
unlock: hold
exemptions:
- username: !secret button_unlock_name
confirmation:
text: >
[[[ return `Are you sure you want to toggle ${entity.attributes.friendly_name}?` ]]]
Thanks! Is this only working for this action (lock), or for any other action? Like for example hold action?
Has anyone else seen this behavior since .113?
It only seems to happen when my Color Lights are set to white.
I had been ignoring at first as I thought it was my theme. But Iāve now tried a few themes and noticed the same behavior.
here is the lovelace for the button card
color: auto
color_type: icon
entity: light.left_shelf_lights
hold_action:
action: more-info
label: |
[[[
if (states['light.left_shelf_lights'].state == 'off') return "Off";
else return 'Brightness ' + (Math.round(states['light.left_shelf_lights'].attributes.brightness / 2.55)) + '%';
]]]
layout: icon_label
show_label: true
show_name: true
styles:
card:
- height: 100px
icon:
- align-self: flex-start
- height: 100%
- width: 100%
label:
- font-size: 12px
- justify-self: center
- text-overflow: unset
- white-space: unset
- word-break: break-word
name:
- font-size: 16px
- justify-self: center
- text-overflow: unset
- white-space: unset
- word-break: break-word
- font-weight: bold
type: 'custom:button-card'
The button syntax has been the same for months, was only since .113 I noticed this behavior
Hi , i am trying to leave the name visible above the cover , but only the 6 buttons remain visibleā¦as soon as i restore the size of the cover , the name disappear.
WHere should i place the tag to get him above the cover ?
Thanks
1 Like
Adding z-index: 10 to the name style part should probably fix your issue
1 Like
Hi,
is it possible to return a function like this:
label: >
[[[ {{now().strftime("%d.%m.%Y %H:%M")}} ]]]
I donāt have success with the code
templates on this card are JS, not Jinja. What you have in the {{ }} is jinja. Also, templates on the card donāt resolve real time. Meaning that will only be updated at specific times. If you want to get the current date and time into your system, itās better to use the date_time integration and use that. It will be updated properly.
Thanks so much!
Iām not sure if this is possible, but Iām going to ask anyways 
I tried searching the thread, but itās really long and that makes it very difficult to search.
I have multiple of these buttons setup for a Roboroc vacuum. Teach one run a script to clean a specific room. Iād like to change the color of the icon (or the button if need be) when the button is pushed/the script is on. I know I can do things based on the state of the entity (vacuum is docked, vacuum is cleaning etc.) but that would change the state of all the buttons, not the specific on that is running.
Here is an example of the code for one of the buttons:
entity: vacuum.roborock_s5_max
icon: 'mdi:television-classic'
name: Living Room
tap_action:
action: call-service
service: script.clean_living_room
type: 'custom:button-card'
TIA for any and all suggestions.
i have create a template input_select which is update with the script who is call by the button. I have 10 options on input_select which is 10 zones to clean. Each script update the input_select.
button_card:
- color: auto
color_type: icon
confirmation: Nettoyage de la Maison
entity: input_select.vacuum_aspiro_in_progress
icon: 'mdi:home'
name: Maison
show_icon: true
show_label: false
show_last_changed: false
show_name: true
show_state: false
state:
- styles:
icon:
- animation: blink 0.9s ease infinite
name:
- animation: blink 0.9s ease infinite
value: Maison
styles:
card:
- border-radius: 10px
- border: '2px solid #257236'
- height: 75px
- width: 75px
- margin: 5px 5px 0px 11px
- padding: 0px 0px
- background-color: '#319847'
grid:
- position: relative
icon:
- position: absolute
- left: 0px
- bottom: 20px
- color: var(--light-text-color)
name:
- position: absolute
- left: 5px
- bottom: 10px
- font-variant: small-caps
- font-size: 14px
- color: var(--light-text-color)
tap_action:
action: call-service
service: script.aspiro_maison
type: 'custom:button-card'
script:
aspiro_maison:
alias: "Maison entiĆØre"
sequence:
- service: script.aspiro_pause
- delay:
seconds: 1
- service: vacuum.send_command
data:
entity_id: vacuum.xiaomi_vacuum_cleaner
command: app_zoned_clean
params: [[13115,24786,29165,34836,2]]
- service: input_select.select_option
data_template:
entity_id: input_select.vacuum_aspiro_in_progress
option: Maison
input_select:
vacuum_aspiro_in_progress:
name: Aspiro - Programme en cours
options:
- Aucun
- Maison
- Jour
- Nuit
- LitiĆØre
- Repas
- EntrƩe
- Salon
- Buffet
- Cuisine
- Couloir
- Douche
- Toilettes
- AnaĆÆs
- Emma
- Parents
- InitCarte
initial: Aucun
Iām trying to resize a glance card as a custom_field entry within button-card. I have everything setup, but I canāt seem to change the size of the glance card. Is this even possible, or am I missing a simple step?
This is the working glance card within button card.
custom_fields:
sensor:
card:
columns: 1
entities:
- entity: sensor.iphone_xs_max_battery_level
- entity: sensor.travel_time
show_name: false
state_color: false
style: |
ha-card {
box-shadow: none;
background: none;
}
type: glance
and tying with style option, but I canāt seem to find the correct option.
styles:
custom_fields:
sensor:
- left: 50%
- position: absolute
entity_picture:
- border-radius: 50%
- font-size: 10px
- left: 10%
grid:
- grid-template-areas: '"i" "i" "sensor"'
Is this even possible, or am I missing a simple step?
So I succeeded at my attempt to get an icon (not really the āiconā more on that later) to glow.
I first tried to use text-shadow under icon but it wouldnāt work so then I used box-shadow:
icon:
- box-shadow: '0px 0px 15px yellow, 0px 0px 20px yellow'
But it would just put a glowing box around the icon and not make the contents glow.
I had use the html format for the label field and then used the appropriate text-shadow setting. I also had to add a size 1% to shrink the icon and set the icon to none as using the show_icon field to false just showed a big blank spot in place of the icon. This is all great since it worked, however, I have to put the source HTML as a link reference in there and I canāt get it to use the resource from the Configuration>Lovelace Dashboards>Resources when I add the URL as a CSS.
Iād much rather use a local source but Iām unsure how to make that happen so I tried just using the html link reference instead.
Iāve cleared cache, re-logged in, rebooted the server to no avail.
Any ideas on how to use the local source or the resource?
entity: switch.mud_room_lamp
size: .1%
icon: none
label: >-
<link rel="stylesheet"
href="http://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css"><i
class="mdi mdi-floor-lamp" </i>
show_label: true
state:
- styles:
card:
- background: black
- border-radius: 20px
label:
- color: yellow
- font-size: 5vw
- text-shadow: '0px 0px 15px yellow, 0px 0px 20px yellow'
- transition: all 1s ease
name:
- font-size: 1vw
- color: white
- text-shadow: '0px 0px 5px white, 0px 0px 10px white'
- transition: all 1s ease
value: 'on'
- styles:
card:
- background: black
- border-radius: 20px
label:
- color: grey
- font-size: 5vw
- transition: all 1s ease
name:
- font-size: 1vw
- color: white
- transition: all 1s ease
value: 'off'
type: 'custom:button-card'
Add a delay to the script and it will have an āonā / āoffā toggle to it. Otherwise it executes instantly. Your other option is to make a template switch.
use filter:
icon:
- filter: drop-shadow(0px 0px 1px rgba(0,0,0,1))
2 Likes
adjust the size of your grid areas:
- grid-template-areas: '"i" "sensor"'
- grid-template-rows: 1fr 10%