“I encountered an error while trying to add a card to my air conditioner. I used the climate template to add the card, but the card prompted the button that the card template was missing. I have confirmed that the template exists. On the button,”_ card_ There is a climate.yaml template file in the templates folder, button_ card_ The templates.yaml file also contains the card information for climate, but I don’t know why it indicates that the card template is missing. The following is my configuration code. Please help me take a look, thank you
button_card_templates.yaml
base:
aspect_ratio: 1/1
show_state: true
show_icon: false
state:
- value: 'on'
styles:
card: [background-color: 'rgba(255, 255, 255, 0.8)']
name: [color: 'rgba(0, 0, 0, 0.6)']
state: [color: 'rgba(0, 0, 0, 0.6)']
tap_action:
ui_sound: |
[[[ if (entity.state === 'off' && states['switch.fullykiosk_screensaver'].state === 'off') {
hass.callService('media_player', 'play_media', {entity_id: 'media_player.tablet', media_content_id: '/local/sound/on.m4a', media_content_type: 'music'}); }
else if (entity.state === 'on' && states['switch.fullykiosk_screensaver'].state === 'off') {
hass.callService('media_player', 'play_media', {entity_id: 'media_player.tablet', media_content_id: '/local/sound/off.m4a', media_content_type: 'music'}); } ]]]
action: toggle
haptic: light
styles:
name:
[top: 57.7%, left: 11%, line-height: 2vw, position: absolute]
state:
[top: 74%, left: 11%, line-height: 2vw, position: absolute]
card:
[font-family: Sf Display, letter-spacing: 0.05vw, font-weight: 400, color: 'rgba(255, 255, 255, 0.3)', font-size: 1.34vw,
background-color: 'rgba(115, 115, 115, 0.2)', border-radius: 0.8vw, box-shadow: none, transition: none]
custom_fields:
circle:
[top: 8.5%, left: 56.2%, width: 3.5vw, position: absolute, letter-spacing: 0.03vw]
loader:
custom_fields:
loader: >
[[[ if (states[entity.entity_id.replace(entity.entity_id.split('.')[0], 'input_boolean')].state === 'on') {
return '<img src="/local/loader.svg" width="100%">'; } ]]]
styles:
custom_fields:
loader:
[filter: "[[[ return entity.state === 'off' ? 'invert(1)' : 'none'; ]]]",
top: 3%, left: 60%, width: 3.7vw, position: absolute, opacity: 0.6]
person:
template: ['base']
show_entity_picture: true
state_display: >
[[[ return entity.state === 'home' ? 'Ja' : 'Nej'; ]]]
state:
- value: 'home'
styles:
card: [background-color: 'rgba(255, 255, 255, 0.8)']
name: [color: 'rgba(0, 0, 0, 0.6)']
state: [color: 'rgba(0, 0, 0, 0.6)']
styles:
entity_picture:
[clip-path: circle(50% at center), top: 7.5%, left: 11.2%, width: 3vw, position: absolute]
custom_fields:
circle: >
[[[ function time(c) {
var s = (c / 1000); var m = (c / (1000 * 60)); var h = (c / (1000 * 60 * 60)); var d = (c / (1000 * 60 * 60 * 24));
if (s < 60) { return parseInt(s) + 's'; } else if (m < 60) { return parseInt(m) + 'm'; }
else if (h < 24) { return parseInt(h) + 'h'; } else { return parseInt(d) + 'd'; }
}
const last_changed = time(Date.now() - Date.parse(states[entity.entity_id].last_changed));
const stroke_color = entity.state === 'home' ? '#b2b2b2' : '#313638';
const fill_color = entity.state === 'home' ? 'none' : '#FFFFFF08';
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="20.5" stroke="${stroke_color}" stroke-width="1.5" fill="${fill_color}" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${last_changed}</text></svg>`; ]]]
light:
template: ['base']
custom_fields:
circle: >
[[[ 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="#b2b2b2" stroke-width="1.5" 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="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${brightness}<tspan font-size="10">%</tspan></text></svg>`; } ]]]
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: '[[[ return entity.attributes.friendly_name ]]]'
deviceID: this
card:
type: entities
entities:
- type: custom:light-popup-card
entity: '[[[ return entity.entity_id ]]]'
icon: none
fullscreen: false
brightnessWidth: 130px
brightnessHeight: 360px
borderRadius: 1.7em
sliderColor: '#c7c7c7'
sliderTrackColor: rgba(25, 25, 25, 0.9)
actionSize: 4.5em
actionsInARow: 2
actions:
- service: light.turn_on
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
color_temp: 153
color: "#d8d9e1"
- service: light.turn_on
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
color_temp: 326
color: "#d5b08d"
- service: light.turn_on
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
color_temp: 500
color: "#ce944b"
- service: browser_mod.popup
service_data:
title: '[[[ return entity.attributes.friendly_name ]]]'
deviceID: this
card:
type: entities
show_header_toggle: false
entities:
- entity: '[[[ return entity.entity_id ]]]'
secondary_info: last-changed
- type: custom:light-entity-card
entity: '[[[ return entity.entity_id ]]]'
brightness: false
color_temp: true
full_width_sliders: true
hide_header: true
show_slider_percent: true
smooth_color_wheel: true
consolidate_entities: true
shared_media:
tap_action:
action: >
[[[ if (entity.state === 'off' || entity.state === 'idle' || entity.state === 'standby') {
return 'none'; } else { return 'call-service'; } ]]]
service: media_player.media_play_pause
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
double_tap_action:
action: call-service
service: >
[[[ if (entity.state === 'off' || entity.state === 'idle' || entity.state === 'standby') {
return 'media_player.turn_on'; } else { return 'media_player.turn_off'; } ]]]
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
styles:
card:
[color: "[[[ if (entity.state === 'off' || entity.state === 'idle' || entity.state === 'standby' ||
entity.state === 'unknown' || entity.state === 'unavailable') { return 'rgba(255, 255, 255, 0.3)'; }
if ((entity.state != 'off' && entity.state != 'idle' && entity.state != 'standby') && (entity.attributes.entity_picture == null)) {
return 'rgba(0, 0, 0, 0.6)'; } else { return '#efefef'; } ]]]",
text-shadow: "[[[ if (entity.attributes.entity_picture == null) return 'none';
else return '1px 1px 5px rgba(18, 22, 23, 0.9)' ; ]]]"]
media:
template: ['base', 'shared_media']
styles:
custom_fields:
icon:
[opacity: "[[[ return entity.attributes.entity_picture == null ? 1 : 0; ]]]",
top: 11.5%, left: 11.5%, width: 2.9vw, position: absolute, fill: '#9da0a2']
card:
[background-color: none, background-size: cover,
background-image:
"[[[ if (entity.state === 'off' || entity.state === 'idle' || entity.state === 'standby' ||
entity.state === 'unknown' || entity.state === 'unavailable') {
return 'linear-gradient(0deg, rgba(115, 115, 115, 0.2) 0%, rgba(115, 115, 115, 0.2) 100%)'; }
if ((entity.state != 'off' && entity.state != 'idle' && entity.state != 'standby') && (entity.attributes.entity_picture == null)) {
return 'linear-gradient(0deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%)'; }
else { return 'linear-gradient(0deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 100%), url(' + entity.attributes.entity_picture + ')'; } ]]]"]
conditional_media:
template: ['base', 'shared_media']
state_display: >
[[[ if (entity.attributes.media_title === 'Nothing playing' || entity.attributes.media_title === 'No title' && entity.state === 'paused' ) { return 'Inget spelas'; }
if (entity.attributes.media_title === 'No title' && entity.state === 'playing') { return 'Ingen titel'; }
else { return entity.attributes.media_title; } ]]]
custom_fields:
media_image: >
<svg viewBox="0 0 50 50" />
blur: >
[[[ if (entity.attributes.entity_picture != null) {
return '<svg viewBox="0 0 50 50" />'; } ]]]
overlay: >
[[[ if (entity.state != 'off' && entity.state != 'idle' && entity.state != 'standby' && entity.state != 'unavailable') {
return '<svg viewBox="0 0 50 50" />'; } ]]]
play_pause: >
[[[ const style = `<style>.scale-up { animation: scale-up 0.3s; cubic-bezier(.05,.5,.3,1) 1; transform-origin: center center; }
@keyframes scale-up { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } }</style>`;
if (entity.state === 'playing') { return `<svg viewBox="0 0 166 166">${style}<path class="scale-up" d="M0 0h59.9v166H0zm106.1 0H166v166h-59.9z"/></svg>`; }
if (entity.state === 'paused') { return `<svg viewBox="0 0 166 166">${style}<path class="scale-up" d="M0 0l166 83L0 166z"/></svg>`; } ]]]
styles:
custom_fields:
media_image:
[background-image:
"[[[ return entity.attributes.entity_picture == null ? 'linear-gradient(0deg, rgba(115, 115, 115, 0.2) 0%, rgba(115, 115, 115, 0.2) 100%)'
: 'linear-gradient(0deg, rgba(13,17,19,0.9) 0%, rgba(13,17,19,0) 50%), url(' + entity.attributes.entity_picture + ')'; ]]]",
background-size: cover, top: 0%, left: 0%, width: 100%, position: absolute]
blur:
[background-image:
"[[[ return entity.attributes.entity_picture == null ? 'none' : 'url(' + entity.attributes.entity_picture + ')'; ]]]",
background-size: cover, top: 0%, left: 0%, width: 100%, filter: blur(4px), clip-path: inset(16vw 0 0 0), position: absolute]
overlay:
[background:
"[[[ return entity.attributes.entity_picture == null ? 'rgba(255, 255, 255, 0.8)' : 'rgba(0, 0, 0, 0.4)'; ]]]",
background-size: cover, z-index: 0, top: 16vw, left: 0%, width: 100%, opacity: 1, position: absolute]
play_pause:
[filter:
"[[[ return entity.attributes.entity_picture == null ? 'none' : 'drop-shadow(0 0 1.3vw rgba(0,0,0,0.7))'; ]]]",
fill: '#dedede', top: 0, right: 0, bottom: 0, left: 0, margin: auto, width: 21%, height: 21%, position: absolute]
icon:
[fill:
"[[[ if (entity.state === 'off' || entity.state === 'idle' || entity.state === 'standby' ||
entity.state === 'unknown' || entity.state === 'unavailable') return '#9da0a2';
else return 'rgba(255, 255, 255, 0.8)'; ]]]",
top: 5.35%, left: 5.35%, width: 2.95vw, position: absolute]
name:
[top: 79.8%, left: 5.3%, position: absolute, line-height: 2vw, z-index: 10]
state:
[top: 87.5%, left: 5.3%, position: absolute, line-height: 2vw, z-index: 10,
white-space: nowrap, overflow: hidden, text-overflow: ellipsis, max-width: 90%]
icon_action:
color: '#9da0a2'
styles:
card:
[background: '#FFFFFF10', border-radius: 0.6em, box-shadow: none,
transition: none, width: 4em, height: 3.7em]
name_action:
styles:
name:
[display: flex, align-items: center, justify-content: center, margin-top: 0.5px]
card:
[background: '#FFFFFF10', color: '#9da0a2', border-radius: 0.6em, box-shadow: none,
transition: none, width: 100%, padding: 1em 1.4em 1em 1.2em, font-size: 1.06em,
font-weight: 500, letter-spacing: 0.015em]
style: '#name > ha-icon {width: 1.4em; margin-right: 0.3em; }'
#################################################
# #
# CLIMATE #
# #
#################################################
climate_base:
show_icon: false
styles:
name:
- padding: 12px 13px
- font-size: 0.8em
- font-weight: 600
card:
- border-radius: 10px
climate_fan_mode:
show_icon: false
variables:
fan_mode: false
tap_action:
action: call-service
service: climate.set_fan_mode
service_data:
entity_id: >
[[[
return !entity || entity.entity_id;
]]]
fan_mode: >
[[[
return variables.fan_mode;
]]]
styles:
card:
- background-color: >
[[[
return !entity || entity.attributes.fan_mode === variables.fan_mode ? "rgba(158, 158, 158, 0.2)" : "rgba(189, 189, 189, 0.05)";
]]]
template:
- climate_base
climate_swing_mode:
tap_action:
action: call-service
service: climate.set_swing_mode
service_data:
entity_id: >
[[[
return !entity || entity.entity_id;
]]]
swing_mode: >
[[[
return !entity || entity.attributes.swing_mode === 'off' ? 'on' : 'off';
]]]
styles:
card:
- background-color: >
[[[
return !entity || entity.attributes.swing_mode === "on" ? "rgba(158, 158, 158, 0.2)" : "rgba(189, 189, 189, 0.05)";
]]]
template:
- climate_base
climate:
template:
- circle
state_display: >
[[[
if (variables.state == 'heat_cool') {
return 'Auto';
}
]]]
variables:
circle_input: >
[[[
if (states['sensor.temperature_average_upstairs'].state) {
return (Math.round(states['sensor.temperature_average_upstairs'].state));
}
]]]
circle_input_unit: '°C'
styles:
custom_fields:
circle:
- display: initial
- width: 90%
- letter-spacing: 0.03vw
- margin: -6% -6% 0 0
- justify-self: end
- opacity: 1
ui-lovelace.yaml
- type: custom:button-card
entity: climate.acn05_cloud_419957
name: ac
template:
- base
- icon_climate
- climate
climate.yaml
climate_base:
show_icon: false
styles:
name:
- padding: 12px 13px
- font-size: 0.8em
- font-weight: 600
card:
- border-radius: 10px
climate_fan_mode:
variables:
fan_mode: false
tap_action:
action: call-service
service: climate.set_fan_mode
service_data:
entity_id: >
[[[ return !entity || entity.entity_id; ]]]
fan_mode: >
[[[ return variables.fan_mode; ]]]
styles:
card:
- background-color: >
[[[
return !entity || entity.attributes.fan_mode === variables.fan_mode
? "rgba(158, 158, 158, 0.2)"
: "rgba(189, 189, 189, 0.05)";
]]]
template:
- climate_base
climate_swing_mode:
tap_action:
action: call-service
service: climate.set_swing_mode
service_data:
entity_id: >
[[[ return !entity || entity.entity_id; ]]]
swing_mode: >
[[[
return !entity || entity.attributes.swing_mode === 'off'
? 'on'
: 'off';
]]]
styles:
card:
- background-color: >
[[[
return !entity || entity.attributes.swing_mode === "on"
? "rgba(158, 158, 158, 0.2)"
: "rgba(189, 189, 189, 0.05)";
]]]
template:
- climate_base
