mviamin
May 19, 2020, 5:11pm
3937
Hi everyone, struggling with this code, perhaps some one can help me ?
Objective : when the fan setting is set to low, have the button card display a spinning fan. issue : getting a syntax error on the state (my syntax in the use of the operator template is incorrect).
Thanks !
entity: 'fan.ceiling_fan'
icon: 'mdi:circle-slice-2'
name: LOW
type: 'custom:button-card'
action:
action: call service
service: fan.set_speed
service_data:
entity: fan.ceiling_fan
speed: low
state:
- operator: template
value: |
[[[return.states[''fan.ceiling_fan''].attributes.speed === 'low' ]]]
color: 'rgb(28, 128, 199)'
icon: 'mdi:fan'
spin: true
Itās written in the error message. You have a . that is unexpected. Also you have double single quotes.
[[[return states['fan.ceiling_fan'].attributes.speed === 'low' ]]]
1 Like
mviamin
May 19, 2020, 6:52pm
3939
Thanks @RomRider , exactly that
OK. Iām stuck and need help with templates. I havenāt had them working properly yet and am not sure why but here is my setup. I started by trying to use some of the code from: https://www.reddit.com/r/homeassistant/comments/gm1x5b/my_mobile_friendly_lovelace_ui/ but even trimming it back iām still getting stuck with applying a template to the button-card component as installed through HACS.
configuration.yaml
lovelace:
mode: yaml
ui-lovelace.yaml
resources:
- url: /hacsfiles/button-card/button-card.js
type: module
button_card_templates:
header:
styles:
card:
- background-color: '#EBF4FC'
- box-shadow: none
- border-radius: 0%
- padding: 0%
- color: ivory
- font-size: 10px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
icon:
- width: 15%
- margin-top: 0%
- margin-left: 0%
- color: white
name:
- font-size: 16px
- color: '#253B56'
- text-transform: capitalize
- justify-self: start
- margin-left: 1%
- font-family: avenir
standard_button:
styles:
card:
- font-size: 10px
icon:
- width: 30%
name:
- font-size: 12px
- color: '#6A7889'
- font-family: avenir
state:
- justify-self: start
- font-size: 10px
- padding: 0px 5px
- color: '#6A7889'
- font-family: avenir
I go into my dashboard, add card and manual then paste this text:
cards:
- name: Open Doors
template: header
type: 'custom:button-card'
- card: null
entities:
- binary_sensor.back_door
- binary_sensor.basement_door
- binary_sensor.front_door
show_empty: false
show_header: false
state_filter:
- 'on'
- open
type: entity-filter
type: vertical-stack
which then gives this error:
Button-card template āheaderā is missing!
Can anyone see where I am going wrong? I did try the same setup using the example code from the button-card instructions and that didnāt work but when I put some of the template code inline on the card itself it works.
In yaml mode I donāt see how you can modify the dashboard using the UI. So youāre probably modifying another dashboard and in this case youāll have to add the templates to this specific dashboard using the raw editor, not in ui-lovelace.yaml
Hi there, sorry it took so long for me to reply. My room card might take some work to copy because thereās a lot going on behind the scenes. My philosophy was having a tiny card for each room that could show me a fair bit of information at a glance, while allowing me to expand that information further with a click when I need it.
The five bottom row icons all change color/icon/blinkiness depending on the state of various entities in the room. These are all defined in the decluttering card.
The temperature and humidity sensors change color based on my preset ideal ranges. I went to a bit of extra effort to make sure these are customizable. For example, I have a washer/dryer room card that tracks the power usage of the washer/dryer instead of the temp/hum in that room.
The top right room icon changes based on if the room is currently being heated/cooled (based on thermostat activity)
If you click anywhere on the button card, browser_mod pops up a separate card that gives me more granular control of that particular room. This is where I control the room lights, devices, and thermostat in a given room. You could add whatever you wanted to this popup since itās done using a combination of vertical and horizontal stack cards. Number one on my wishlist for button card is clickable hot zones, but should that not be in the offing this still does the trick.
I spent a bit of effort making this all work within a decluttering card template to both simplify config for each room and also allow me to make universal changes to all of my room cards at once.
A gif of it in action ā
Iām happy to give some help if you need it.
If you want to use this as-is, youāll need to make sure you have the decluttering card and the browser_mod addon (for the pop-up action) installed. But to get started I recommend you remove the pop_up part (under tap_action) and go from there. You could add the pop-up again later.
Hereās the decluttering card template (this goes in the raw config editor)
decluttering_templates:
room:
card:
custom_fields:
icon1: |
[[[
if (states['[[icon1_ent]]'].state == '[[icon1_state1]]')
return '<ha-icon icon="mdi:[[icon1_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
if (states['[[icon1_ent]]'].state == '[[icon1_state2]]')
return '<ha-icon icon="mdi:[[icon1_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
else
return '<ha-icon icon="mdi:[[icon1_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
]]]
icon2: |
[[[
if (states['[[icon2_ent]]'].state == '[[icon2_state1]]')
return '<ha-icon icon="mdi:[[icon2_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
if (states['[[icon2_ent]]'].state == '[[icon2_state2]]')
return '<ha-icon icon="mdi:[[icon2_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
else
return '<ha-icon icon="mdi:[[icon2_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
]]]
icon3: |
[[[
if (states['[[icon3_ent]]'].state == '[[icon3_state1]]')
return '<ha-icon icon="mdi:[[icon3_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
if (states['[[icon3_ent]]'].state == '[[icon3_state2]]')
return '<ha-icon icon="mdi:[[icon3_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
else
return '<ha-icon icon="mdi:[[icon3_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
]]]
icon4: |
[[[
if (states['[[icon4_ent]]'].state == '[[icon4_state1]]')
return '<ha-icon icon="mdi:[[icon4_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
if (states['[[icon4_ent]]'].state == '[[icon4_state2]]')
return '<ha-icon icon="mdi:[[icon4_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
else
return '<ha-icon icon="mdi:[[icon4_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
]]]
icon5: |
[[[
if (states['[[icon5_ent]]'].state == '[[icon5_state1]]')
return '<ha-icon icon="mdi:[[icon5_icon1]]" style="width: 20px; height: 20px;"></ha-icon>';
if (states['[[icon5_ent]]'].state == '[[icon5_state2]]')
return '<ha-icon icon="mdi:[[icon5_icon2]]" style="width: 20px; height: 20px;"></ha-icon>';
else
return '<ha-icon icon="mdi:[[icon5_icon3]]" style="width: 20px; height: 20px;"></ha-icon>';
]]]
icon6: |
[[[
if (states['[[temp_ent]]'].state == "heat")
return '<ha-icon icon="mdi:fire" style="width: 20px; height: 20px;"></ha-icon>';
if (states['[[temp_ent]]'].state == "cool")
return '<ha-icon icon="mdi:snowflake" style="width: 20px; height: 20px;"></ha-icon>';
else
return '<ha-icon icon="mdi:[[icon]]" style="width: 20px; height: 20px;"></ha-icon>';
]]]
stat1: |
[[[
return `<ha-icon
icon="mdi:[[stat1_icon]]"
style="width: 15px; height: 15px; color: steelblue;">
</ha-icon><span>[[stat1_pre]]<span style="color: var(--text-color-sensor);">${states['[[stat1_ent]]'].state}[[stat1_suf]]</span></span>`
]]]
stat2: |
[[[
return `<ha-icon
icon="mdi:[[stat2_icon]]"
style="width: 15px; height: 15px; color: steelblue;">
</ha-icon><span>[[stat2_pre]]<span style="color: var(--text-color-sensor);">${states['[[stat2_ent]]'].state}[[stat2_suf]]</span></span>`
]]]
entity: '[[entity]]'
name: '[[name]]'
show_icon: false
show_label: false
show_state: false
size: 70%
state:
- styles:
custom_fields:
icon6:
- animation: blink 2s ease infinite
- color: crimson
value: heat
- styles:
custom_fields:
icon6:
- animation: blink 2s ease infinite
- color: lightblue
value: cool
styles:
card:
- font-size: 12px
- padding: 5px 3px 5px 3px
custom_fields:
icon1:
- padding: 0px 0px 0px 0px
- animation: |
[[[
if (states["[[icon1_ent]]"].state == '[[icon1_state1]]') return "[[icon1_animate]]";
else return null;
]]]
- color: |
[[[
if (states["[[icon1_ent]]"].state == '[[icon1_state1]]') return "[[icon1_color1]]";
if (states["[[icon1_ent]]"].state == '[[icon1_state2]]') return "[[icon1_color2]]";
if (states["[[icon1_ent]]"].state == '[[icon1_state3]]') return "[[icon1_color3]]";
else return null;
]]]
icon2:
- padding: 0px 0px 0px 0px
- animation: |
[[[
if (states["[[icon2_ent]]"].state == '[[icon2_state1]]') return "[[icon2_animate]]";
else return null;
]]]
- color: |
[[[
if (states["[[icon2_ent]]"].state == '[[icon2_state1]]') return "[[icon2_color1]]";
if (states["[[icon2_ent]]"].state == '[[icon2_state2]]') return "[[icon2_color2]]";
if (states["[[icon2_ent]]"].state == '[[icon2_state3]]') return "[[icon2_color3]]";
else return null;
]]]
icon3:
- padding: 0px 0px 0px 0px
- animation: |
[[[
if (states["[[icon3_ent]]"].state == '[[icon3_state1]]') return "[[icon3_animate]]";
else return null;
]]]
- color: |
[[[
if (states["[[icon3_ent]]"].state == '[[icon3_state1]]') return "[[icon3_color1]]";
if (states["[[icon3_ent]]"].state == '[[icon3_state2]]') return "[[icon3_color2]]";
if (states["[[icon3_ent]]"].state == '[[icon3_state3]]') return "[[icon3_color3]]";
else return null;
]]]
icon4:
- padding: 0px 0px 0px 0px
- animation: |
[[[
if (states["[[icon4_ent]]"].state == '[[icon4_state1]]') return "[[icon4_animate]]";
else return null;
]]]
- color: |
[[[
if (states["[[icon4_ent]]"].state == '[[icon4_state1]]') return "[[icon4_color1]]";
if (states["[[icon4_ent]]"].state == '[[icon4_state2]]') return "[[icon4_color2]]";
if (states["[[icon4_ent]]"].state == '[[icon4_state3]]') return "[[icon4_color3]]";
else return null;
]]]
icon5:
- padding: 0px 0px 0px 0px
- animation: |
[[[
if (states["[[icon5_ent]]"].state == '[[icon5_state1]]') return "[[icon5_animate]]";
else return null;
]]]
- color: |
[[[
if (states["[[icon5_ent]]"].state == '[[icon5_state1]]') return "[[icon5_color1]]";
if (states["[[icon5_ent]]"].state == '[[icon5_state2]]') return "[[icon5_color2]]";
if (states["[[icon5_ent]]"].state == '[[icon5_state3]]') return "[[icon5_color3]]";
else return null;
]]]
icon6:
- padding: 0px 0px 0px 0px
stat1:
- justify-self: start
- padding: 0px 0px 0px 0px
- '--text-color-sensor': |
[[[
if (states["[[stat1_ent]]"].state < 20) return "lightblue";
if (states["[[stat1_ent]]"].state >= 20 && states["[[stat1_ent]]"].state < 28) return "mediumaquamarine";
else return "tomato";
]]]
stat2:
- justify-self: start
- padding: 0px 0px 0px 0px
- '--text-color-sensor': |
[[[
if (states["[[stat2_ent]]"].state < 30) return "lightblue";
if (states["[[stat2_ent]]"].state >= 30 && states["[[stat2_ent]]"].state < 55) return "mediumaquamarine";
else return "tomato";
]]]
grid:
- grid-template-areas: >-
". n n n n icon6 ." ". stat1 stat1 stat1 stat1 stat1 ." ". stat2
stat2 stat2 stat2 stat2 ." ". icon1 icon2 icon3 icon4 icon5 ."
- grid-template-columns: 1fr 5fr 5fr 5fr 5fr 5fr 1fr
- grid-template-rows: 2fr 1fr 1fr 3fr
- padding: 0px 0px 0px 0px
icon:
- place-self: center
- padding: 0px 0px 3px 0px
name:
- justify-self: start
- font-size: 16px
- padding: 0px 0px 0px 3px
tap_action:
action: call-service
service: browser_mod.popup
service_data:
card:
cards:
- cards:
- cards:
- cards:
- color_type: '[[pu_light1_colortype]]'
dbltap_action:
action: more-info
entity: '[[pu_light1_ent]]'
hold_action:
action: more-info
name: '[[pu_light1_name]]'
show_last_changed: true
show_state: false
size: 40%
styles:
card:
- height: 70px
- padding: 0px 0px 0px 0px
grid:
- grid-template-areas: '"i ." "i n" "i l" "i ."'
- grid-template-columns: 2fr 3fr
- grid-template-rows: 1fr 3fr 1fr 1fr
icon:
- padding: 4px 0px 8px 10px
label:
- font-size: 11px
- padding: 0px 25px 20px 0px
- justify-self: right
- color: '#7babf7'
- align-self: start
name:
- font-size: 20px
- justify-self: right
- padding: 0px 25px 0px 0px
- align-self: start
tap_action:
action: toggle
type: 'custom:button-card'
- color_type: '[[pu_light2_colortype]]'
dbltap_action:
action: more-info
entity: '[[pu_light2_ent]]'
hold_action:
action: more-info
name: '[[pu_light2_name]]'
show_last_changed: true
show_state: false
size: 40%
styles:
card:
- height: 70px
- padding: 0px 0px 0px 0px
grid:
- grid-template-areas: '"i ." "i n" "i l" "i ."'
- grid-template-columns: 2fr 3fr
- grid-template-rows: 1fr 3fr 1fr 1fr
icon:
- padding: 4px 0px 8px 10px
label:
- font-size: 11px
- padding: 0px 25px 20px 0px
- justify-self: right
- color: '#7babf7'
- align-self: start
name:
- font-size: 20px
- justify-self: right
- padding: 0px 25px 0px 0px
- align-self: start
tap_action:
action: toggle
type: 'custom:button-card'
type: horizontal-stack
type: 'custom:vertical-stack-in-card'
type: horizontal-stack
- cards:
- color_type: '[[icon1_colortype]]'
entity: '[[icon1_ent]]'
hold_action:
action: '[[icon1_holdaction]]'
icon: 'mdi:[[icon1_icon2]]'
name: '[[icon1_name]]'
show_last_changed: true
show_state: false
size: 70%
state:
- icon: 'mdi:[[icon1_icon1]]'
styles:
icon:
- color: '[[icon1_color1]]'
- animation: '[[icon1_animate]]'
value: '[[icon1_state1]]'
styles:
card:
- height: 120px
icon:
- color: null
label:
- font-size: 9px
- color: '#7babf7'
tap_action:
action: '[[icon1_tapaction]]'
type: 'custom:button-card'
- color_type: '[[icon2_colortype]]'
entity: '[[icon2_ent]]'
hold_action:
action: '[[icon2_holdaction]]'
icon: 'mdi:[[icon2_icon2]]'
name: '[[icon2_name]]'
show_last_changed: true
show_state: false
size: 70%
state:
- icon: 'mdi:[[icon2_icon1]]'
styles:
icon:
- color: '[[icon2_color1]]'
- animation: '[[icon2_animate]]'
value: '[[icon2_state1]]'
styles:
card:
- height: 120px
icon:
- color: null
label:
- font-size: 9px
- color: '#7babf7'
tap_action:
action: '[[icon2_tapaction]]'
type: 'custom:button-card'
- color_type: '[[icon3_colortype]]'
entity: '[[icon3_ent]]'
hold_action:
action: '[[icon3_holdaction]]'
icon: 'mdi:[[icon3_icon2]]'
name: '[[icon3_name]]'
show_last_changed: true
show_state: false
size: 70%
state:
- icon: 'mdi:[[icon3_icon1]]'
styles:
icon:
- color: '[[icon3_color1]]'
- animation: '[[icon3_animate]]'
value: '[[icon3_state1]]'
styles:
card:
- height: 120px
icon:
- color: null
label:
- font-size: 9px
- color: '#7babf7'
tap_action:
action: '[[icon3_tapaction]]'
type: 'custom:button-card'
- color_type: '[[icon4_colortype]]'
entity: '[[icon4_ent]]'
hold_action:
action: '[[icon4_holdaction]]'
icon: 'mdi:[[icon4_icon2]]'
name: '[[icon4_name]]'
show_last_changed: true
show_state: false
size: 70%
state:
- icon: 'mdi:[[icon4_icon1]]'
styles:
icon:
- color: '[[icon4_color1]]'
- animation: '[[icon4_animate]]'
value: '[[icon4_state1]]'
styles:
card:
- height: 120px
icon:
- color: null
label:
- font-size: 9px
- color: '#7babf7'
tap_action:
action: '[[icon4_tapaction]]'
type: 'custom:button-card'
- color_type: '[[icon5_colortype]]'
entity: '[[icon5_ent]]'
hold_action:
action: '[[icon5_holdaction]]'
icon: 'mdi:[[icon5_icon2]]'
name: '[[icon5_name]]'
show_last_changed: true
show_state: false
size: 70%
state:
- icon: 'mdi:[[icon5_icon1]]'
styles:
icon:
- color: '[[icon5_color1]]'
- animation: '[[icon5_animate]]'
value: '[[icon5_state1]]'
styles:
card:
- height: 120px
icon:
- color: null
label:
- font-size: 9px
- color: '#7babf7'
tap_action:
action: '[[icon5_tapaction]]'
type: 'custom:button-card'
type: horizontal-stack
- color_type: '[[pu_therm_colortype]]'
custom_fields:
cardy:
card:
entity: '[[pu_climate_ent]]'
hide:
state: true
icon:
cool: 'mdi:snowflake'
heating: 'mdi:fire'
'off': 'mdi:stop-circle-outline'
modes:
cool: null
heating: null
'off': null
name: Thermostat
sensors:
- attribute: hvac_action
entity: '[[pu_climate_ent]]'
name: Currently
- entity: '[[pu_climate_hum]]'
name: Humidity
type: 'custom:simple-thermostat'
entity: light.curtis
show_icon: false
show_name: false
styles:
grid:
- grid-template-areas: '"cardy"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr
type: 'custom:button-card'
- cards:
- align_header: left
align_icon: left
animate: true
entities:
- color: '#f2ab48'
entity: '[[pu_climate_temp]]'
index: 0
name: LR
font_size: 80
hours_to_show: 48
name: Temperature - 48h
points_per_hour: 0.25
show:
fill: false
labels: true
points: hover
type: 'custom:mini-graph-card'
- align_header: left
align_icon: left
animate: true
entities:
- color: '#57a5f2'
entity: '[[pu_climate_hum]]'
index: 0
name: LR
font_size: 80
hours_to_show: 48
name: Humidity - 48h
points_per_hour: 0.25
show:
fill: false
labels: true
points: hover
type: 'custom:mini-graph-card'
type: horizontal-stack
type: 'custom:vertical-stack-in-card'
deviceID:
- this
large: false
title: '[[pu_title]]'
triggers_update:
- '[[icon1_ent]]'
- '[[icon2_ent]]'
- '[[icon3_ent]]'
- '[[icon4_ent]]'
- '[[icon5_ent]]'
- '[[icon6_ent]]'
- '[[stat1_ent]]'
- '[[stat2_ent]]'
- '[[pu_light1_ent]]'
- '[[pu_light2_ent]]'
type: 'custom:button-card'
And hereās the card config itself (youāll obviously want to replace all the entity IDs and icons/colors to suit your needs)
template: room
type: 'custom:decluttering-card'
variables:
- entity: climate.living_room_thermostat
- icon: sofa
- name: LIVING ROOM
- show_icon: false
- temp_ent: climate.living_room_thermostat
- stat1_icon: thermometer
- stat1_pre: 'Temp: '
- stat1_suf: Ā°
- stat1_ent: sensor.dev_lr_th_temp
- stat2_icon: water-percent
- stat2_pre: 'Hum: '
- stat2_suf: '%'
- stat2_ent: sensor.dev_lr_th_humidity
- icon1_ent: sensor.lr_status_door
- icon1_name: Door
- icon1_tapaction: more-info
- icon1_holdaction: more-info
- icon1_colortype: null
- icon1_color1: tomato
- icon1_color2: null
- icon1_color3: red
- icon1_animate: blink 2s ease infinite
- icon1_state1: Open
- icon1_state2: Closed
- icon1_state3: unknown
- icon1_icon1: shield-off
- icon1_icon2: door
- icon1_icon3: help-circle
- icon2_ent: sensor.lr_status_motion
- icon2_name: Motion
- icon2_tapaction: more-info
- icon2_holdaction: more-info
- icon2_colortype: null
- icon2_color1: coral
- icon2_color2: null
- icon2_color3: red
- icon2_animate: null
- icon2_state1: 'Yes'
- icon2_state2: 'No'
- icon2_state3: unknown
- icon2_icon1: motion-sensor
- icon2_icon2: walk
- icon2_icon3: help-circle
- icon3_ent: switch.dev_tv_lr
- icon3_name: LR TV
- icon3_tapaction: toggle
- icon3_holdaction: more-info
- icon3_colortype: null
- icon3_color1: mediumseagreen
- icon3_color2: null
- icon3_color3: red
- icon3_animate: blink 2s ease infinite
- icon3_state1: 'on'
- icon3_state2: 'off'
- icon3_state3: unknown
- icon3_icon1: television-guide
- icon3_icon2: television
- icon3_icon3: help-circle
- icon4_ent: switch.dev_fan_lr
- icon4_name: LR Fan
- icon4_tapaction: more-info
- icon4_holdaction: more-info
- icon4_colortype: null
- icon4_color1: darkolivegreen
- icon4_color2: null
- icon4_color3: red
- icon4_animate: blink 2s ease infinite
- icon4_state1: 'on'
- icon4_state2: 'off'
- icon4_state3: unknown
- icon4_icon1: weather-windy
- icon4_icon2: fan
- icon4_icon3: help-circle
- icon5_ent: sensor.lr_status_windows
- icon5_name: Windows
- icon5_tapaction: more-info
- icon5_holdaction: more-info
- icon5_colortype: null
- icon5_color1: tomato
- icon5_color2: null
- icon5_color3: red
- icon5_animate: blink 2s ease infinite
- icon5_state1: Open
- icon5_state2: Closed
- icon5_state3: unknown
- icon5_icon1: window-open
- icon5_icon2: window-closed
- icon5_icon3: help-circle
- pu_title: Living Room
- pu_light1_ent: light.lr_overhead_lights
- pu_light1_name: Overheads
- pu_light1_colortype: icon
- pu_light2_ent: light.lr_spots
- pu_light2_name: Spots
- pu_light2_colortype: icon
- pu_climate_ent: climate.living_room_thermostat
- pu_climate_hum: sensor.dev_lr_th_humidity
- pu_climate_temp: sensor.dev_lr_th_temp
17 Likes
Thatās a huge configuration
tom_l
May 21, 2020, 4:47am
3944
Is color: auto-no-temperature working for anyone?
The icon just shows the inactive icon colour for this config:
light_button:
aspect_ratio: 1/1
color_type: icon
styles:
icon:
- width: 28px
- padding: 0px 0px 0px 0px
- color: auto-no-temperature
This config has icon colour changes but includes colour temperature (which has an undesired effect for light groups, the icon shows white if any light is set to cool white):
light_button:
aspect_ratio: 1/1
color_type: icon
styles:
icon:
- color: var(--button-card-light-color)
- width: 28px
- padding: 0px 0px 0px 0px
tom_l:
color: auto-no-temperature
This is not a css style, it is a main config entry thatās why it doesnāt work for you.differently : --button-card-light-color-no-temperature
1 Like
ThaNerd
May 21, 2020, 2:17pm
3947
After the last update my icons got shrunk inside my buttons. Is there a style to align the icon to the center of the button?
1 Like
This is already fixed in the latest button-card with HA 0.110. You probably didnāt clear the cacheā¦
1 Like
billd
May 22, 2020, 6:05am
3949
How do I include a button_card_templates.yaml file in a Lovelace view?
Iām a noob to Home Assistant but have v0.108.2 up and running on macOS v10.12.6 (Sierra) in a venv using Lovelace non-manual mode and HACS which is how I installed the Button Card. Iāve found it a bit of a steep learning curve for the most part despite an IT background however if you want to do something, generally someone else has done it and this āCommunityā site has been my saving grace.
Iāve been experimenting with the Button Card and really like what it can offer however have one sticking point that I canāt find a solution to despite reviewing the documentation and searching this site. I have not been able to figure out how to include a button_card_templates.yaml file in a Lovelace view. All the documentation seems to be written for YAML mode Lovelace which Iād prefer to avoid at this stage. As Iāve seen posted elsewhere Iāve tried adding this ;
button_card_templates:
!include path_to/file_with_templates.yaml
by using the Configure UI/Raw configuration editor however I get this error;
As an experiment on one button only I can get it to work by adding this to the top of the Raw Configuration for that view;
button_card_templates:
light_button:
custom_fields:
temp: >
[[[ var bri = Math.round(entity.attributes.brightness / 2.55); if (bri
> 0) return (bri ? (bri+"%") : ''); else return `${entity.state}` ]]]
hold_action:
action: more-info
layout: icon_label
show_label: false
show_name: true
styles:
card:
- height: 120px
- padding-bottom: 15px
custom_fields:
temp:
- padding-left: 15%
- padding-bottom: '-15px'
- align-self: middle
- justify-self: start
- text-transform: uppercase
- font-size: 13px
- font-family: var(--primary-font-family)
grid:
- grid-template-areas: ' ". i temp ." "n n n n" '
- grid-template-columns: 1fr 60px 30px 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
icon:
- width: 55px
- height: 55px
name:
- font-size: 13px
- margin-bottom: 8%
- font-family: var(--primary-font-family)
Here is how it renders (as expected);
What am I missing?
You canāt include a file in the RAW editor, youāll have to declare the templates directly. The only way to use !include is to switch to yaml mode.
Oddly enough even with the fix that ripple effect doesnāt seem to be working on iOS mobile app
It never worked and I think it also doesnāt work in all the core cards. Apple is
Ah thanks @RomRider , you know what is weird is that prior to the update, the ripple effect was working only with a locked button but that doesnt seem to be working now after some testing
Yes, Iāve normalised the ripple effect for buttons with lock to be in line with the default ripple. I forgot it was differentā¦ Thatās why it used to work but not anymore, sorry
Fixed.
good job 
(thatās what they get for doing their own stuff instead of following normsā¦)
. As it doesnāt work only with the Home Assistant App on IOS, Iād suggest you open a bug on the appās side.