At the moment i am trying to get depper into the template function to reduce the amount of the same definitions over and over…
Is it possible to include the template definition with a separate file?
That would be great because i use different Dashboards for different devices
The custom decluttering card can handle it.
Is there a way to colour an SVG part based on a state?
I have the following custom field which creates a hue bulb. At the moment the base (bulb) is a set colour of #C0C0C0 and the light is filled with “var(–button-card-light-color)” which for Hue bulbs works fine as the light part displays the light of the bulb nicely and it goes grey when off.
custom_fields:
icon_hue: >
<svg viewBox="0 0 32 32"><path id="Bulb" d="M16,11.999c1.523,0 3.746,-0.143
5.539,-0.553c-1.358,4.219 -1.591,8.078 -1.545,9.176c0.011,0.255 -0.076,0.496
-0.242,0.689l-0.441,0.504c-0.952,0.113 -2.055,0.184 -3.311,0.184c-1.256,0
-2.359,-0.071 -3.311,-0.184l-0.441,-0.504c-0.166,-0.193 -0.253,-0.434
-0.242,-0.689c0.046,-1.098 -0.187,-4.957 -1.545,-9.176c1.793,0.41
4.016,0.553 5.539,0.553Zm-2.998,10.862c1.042,0.101 2.188,0.138
3.002,0.138c0.814,0 1.96,-0.037 3.002,-0.138l-0.501,3.108c-0.026,0.218
-0.132,0.42 -0.3,0.573l-0.467,0.424c-0.032,0.029 -0.061,0.06
-0.089,0.092l-0.493,0.583c-0.19,0.226 -0.48,0.358
-0.787,0.358l-0.365,0l-0.365,0c-0.307,0 -0.596,-0.132
-0.786,-0.358l-0.495,-0.583c-0.027,-0.032 -0.056,-0.063
-0.087,-0.092l-0.467,-0.424c-0.168,-0.153 -0.275,-0.355
-0.301,-0.573l-0.501,-3.108Z" style="fill:#C0C0C0;"/><path id="Light"
d="M22.304,5.398c1.525,1.402 0.137,3.985 -0.329,4.907c-1.257,0.366
-3.269,0.695 -5.975,0.695c-2.706,0 -4.717,-0.329 -5.974,-0.695c-0.466,-0.922
-1.855,-3.505 -0.329,-4.907c1.631,-1.499 6.028,-1.396 6.303,-1.396c0.276,0
4.672,-0.103 6.304,1.396Z"
style="fill:var(--button-card-light-color)"/></svg>
However when the light is off i would also like the bulb part to be dimmer as #C0C0C0 is quite bright. I have tried the following but with no success:
state:
- styles:
custom_fields:
icon_hue:
- fill: red
state:
- color: var(--disabled-text-color)
label:
- color: var(--disabled-text-color)
value: 'off'
Normally the bulb is a sudo element and is access via the .bulb entity within CSS and fill being the value but in the button card its handled differently.
Any ideas how to achieve this?
–
Side note, after setting this up i have noticed that Hue bulbs go grey when off however zigbee bulbs dont and stay the last colour/temp they where at. Not sure exactly why this happens.
Edit: above comment, just noticed --button-card-light-color-no-temperature value can be used however this sets it to the icon active colour from the theme. Anyway to override this value without changing the theme?
That’s how YAML works, so yes you can split your templates, but that’s not up to button-card, but how YAML works. Use !include to split your code.
See docs for more info: Splitting up the configuration - Home Assistant
I have separate files for button-card templates, decluttering-card, popup cards, markdown style options and more.
thx, sometimes… i made an error an then i thought the simple way does not work…
And then my idea’s get more and more complex…
There’s a thread about the creation of the card
how to add the off button to the red position, and remove box-shadow below the button thanks.
type: 'custom:button-card'
custom_fields:
speed:
card:
type: 'custom:button-card'
show_name: false
size: 45%
icon: 'mdi:weather-windy'
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.rm3_mini_remote
device: fan_senko
command: speed
osc:
card:
type: 'custom:button-card'
size: 50%
icon: 'mdi:cached'
show_name: false
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.rm3_mini_remote
device: fan_senko
command: osc
mode:
card:
type: 'custom:button-card'
size: 50%
name: MOD
show_name: faldse
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.rm3_mini_remote
device: fan_senko
command: mode
styles:
grid:
- grid-template-areas: '"i i i i i" "n n n n n" ". speed osc mode ."'
- grid-template-rows: min-content 1fr 2fr
- grid-template-columns: 5% 1fr 1fr 1fr 5%
card:
- max-width: 200px
- max-height: 300px
- padding-bottom: 0
icon: 'mdi:fan'
I’m trying to use a button card to track an input_boolean. The card is inside of a popup, and when I update the sensor while it’s open, it reflects the changes. But as soon as I close the popup and reopen it, the card thinks the sensor is off, even it’s still on?
Here’s my code
https://pastebin.ubuntu.com/p/hgkHF5xhQZ/
You should create a custom field and set the position: absolute style and then move it around using top: 10px, left: 10px for eg.
Probably because of if (entity.state = 'off'). This should be if (entity.state == 'off')
thanks for the reply, but can you use the grid? and how to remove box-shadow below the button
Hi,
Anyone know a way to make the ripple effect less square when tapping on a button on mobile app?
Is that possible at all?
That is not happening by default so your config is probably producing that. Mind sharing it?
Hi,
Sure, this is one of my buttons. Actually I am using a lot of decluttering card templates, but I have created one clean example to past here, without templates.
- type: custom:button-card
entity: light.work_room
#icon: '[[icon]]'
aspect_ratio: 1/1
name: Work Room
color: auto
color_type: icon
show_last_changed: false
lock:
enabled: false
duration: 5
unlock: tap
styles:
card:
- padding: 10%
- font-size: 12px
- font-weight: bold
- text-transform: capitalize
- border-radius: 16px
- background-color: 'rgba(47, 49, 54, 0.8)'
- color: '#8D8E93'
- backdrop-filter: blur(20px)
grid:
- grid-template-areas: '"svg_icon corner" "svg_icon corner_2" "n n" "cust_1 cust_2"'
- grid-template-columns: 2fr 3fr
- grid-template-rows: 1fr 2fr 4fr 1fr
name:
- font-size: 1.20em #15px
- align-self: middle
- justify-self: start
- align-self: end
- padding-top: 8px
- padding-bottom: 4px
lock:
- color: '#BEBEBE'
custom_fields:
svg_icon:
- justify-content: start
- align-items: start
- margin: none
- height: 100%
- padding-bottom: 0px
corner:
- align-self: start
- justify-self: end
- font-size: 1em #14px
- font-weight: bold
- color: '#797A7F'
- min-width: 12px
- line-height: 22px
- padding: 0px 5px
- height: 22px
corner_2:
- padding-top: 8px
- align-self: start
- justify-self: end
- color: '#797A7F'
cust_1:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- color: '#797A7F'
cust_2:
- padding-bottom: 2px
- align-self: middle
- justify-self: end
- color: '#797A7F'
custom_fields:
svg_icon: "[[[
const state = entity.state === 'on' ? 'animate' : null;
return `<svg viewBox='0 0 24 24'>
<path fill='#9da0a2' d='M8,9H11V4H13V9H16L20,17H4L8,9M14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18H14Z'/>
<path class='${state}' fill='var(--button-card-light-color-no-temperature)' d='m 7.957375,9 h 3 -3 8 -3 3 l 4.062,8 h -16 l 3.938,-8 m 6.06975,5.256348 c 0.763134,0.727302 -0.531684,1.303507 -1.636253,1.303507 -1.104569,0 -3.0516803,-1.562904 -3.0602403,-2.667473 z'/> </svg>`;
]]]"
corner: ""
corner_2: ""
cust_1: "[[[ return entity.state ]]]"
cust_2: ""
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
state:
- value: "on"
styles:
card:
- background-color: '#393C43'
- color: '#F0F0F0'
custom_fields:
cust_1:
- color: '#A5A7AB'
cust_2:
- color: '#A5A7AB'
- value: "unavailable"
styles:
icon:
- color: '#7F848E'
name:
- color: '#7F848E'
custom_fields:
svg_icon:
- --button-card-light-color-no-temperature: '#7F848E'
corner:
- color: '#7F848E'
corner_2:
- color: '#7F848E'
cust_1:
- color: '#7F848E'
cust_2:
- color: '#7F848E'
I’m trying to create a template for buttons like yours. Would you mind sharing the coffee for these buttons?
How do I define background color for cards based on states?
I.e. State On sets red, off sets blue etc…
Peace 
I cant get the circle to be seen. The value at State On is shown…
I’m using a light template, is that the fault here?
Would be helpful if you posted your config…
Do you have active-color in your theme?.
For testing purposes, try a hard coded color.
cards:
- type: grid
cards:
- type: grid
cards:
- entity: light.kok
icon: 'mdi:silverware-variant'
name: Köket
theme: noctis
template: light
type: 'custom:button-card'
- entity: light.tv_vardagsrum_och_hall
icon: 'mdi:lightbulb-group-outline'
name: Hela VDR
template: light
type: 'custom:button-card'
- entity: light.tv_rum
icon: 'mdi:sofa-outline'
name: 'Lampor vid TV:n'
template: light
type: 'custom:button-card'
- entity: light.sovrummets_fonsterlampor
icon: 'mdi:bed-outline'
name: Sovrummet
template: light
type: 'custom:button-card'
square: false
columns: 4
- type: grid
cards:
- type: 'custom:slider-entity-row'
entity: light.kok
name: hide_state
full_row: true
hide_state: true
- type: 'custom:slider-entity-row'
entity: light.tv_vardagsrum_och_hall
name: hide_state
full_row: true
hide_state: true
- type: 'custom:slider-entity-row'
entity: light.tv_rum
name: hide_state
full_row: true
hide_state: true
- type: 'custom:slider-entity-row'
entity: light.sovrummets_fonsterlampor
name: hide_state
full_row: true
hide_state: true
columns: 4
square: false
columns: 1
square: false
light:
aspect_ratio: 1/1
color: auto-no-temperature
color_type: card
tap_action:
action: toggle
hold_action:
action: more-info
show_icon: true
show_name: true
custom_fields:
info: |
[[[ if (entity.state == 'on' && entity.attributes.brightness) {
const brightness = Math.round(entity.attributes.brightness/2.54);
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}"
stroke="var(--active-color)" stroke-width="2" fill="none"
style="transform: rotate(-90deg); transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - brightness / 100 * circumference};" />
<text x="50%" y="54%" fill="white" font-size="16"
text-anchor="middle" alignment-baseline="middle">
${brightness}<tspan font-size="10">%</tspan></text></svg>`;} ]]]
styles:
custom_fields:
info:
- position: absolute
- right: 5%
- top: 10%
- width: 30%
card:
- font-size: 90%
- border-radius: 1ems
state:
- value: 'off'
styles:
icon:
- color: black
- value: 'on'
styles:
icon:
- color: white
did you test the hard coded color, and, do you have the var(–active-color) in your theme?
Hi
To the best of my knowledge i don’t have the var(--active-color) in my theme.
I have no theme implemented in HA yet…