something Iām doing wrong, but I think I followed the installation steps, have all the HACS required resources (even the recommended). Added the lines to the configuration.yaml and restarted HA.
Result: Mutliple ButtonCardJSTemplateError, so no luck for meā¦
Please help
Hi @NoClaim,
Can you post the full error? Its possible that it is asking for a sensor which is not available because I created it myself.
Sorry for the late replyā¦ I was a cache issueā¦ seems to be solved
if anyone interested, I made a lock card based on the security card.
Template:
---
custom_card_lock:
type: custom:button-card
show_state: false
show_icon: true
icon: |
[[[
if (entity.state === "locked") return "fas:lock";
if (entity.state === "unlocked") return "fas:lock-open";
if (entity.state === "jammed") return "mdi:lock-alert";
return "mdi:lock-question";
]]]
show_name: true
show_last_changed: true
show_label: true
styles:
grid:
- grid-template-areas: |
"icon icon"
"n action_card"
"l action_card"
- grid-template-rows: auto min-content 1fr
card:
- overflow: hidden
- padding: 10px
name:
- justify-self: start
- font-size: 1.2rem
- font-weight: bold
- font-family: montserrat
label:
- justify-self: start
- align-self: start
- font-family: montserrat
- font-size: 0.9rem
- font-weight: 500
- color: var(--color-dark-gray)
img_cell:
- position: absolute
- top: 40%
- right: 40%
- overflow: visible
icon:
- position: relative
- width: 10rem
- justify-self: center
- align-self: center
- opacity: 30%
- color: var(--color-gold)
state:
- value: locked
name: Locked
- value: unlocked
name: Unlocked
- value: jammed
name: Jammed
- value: unknown
name: Unknown
styles:
name:
- color: var(--color-dark-gray)
custom_fields:
action_card:
card:
type: custom:button-card
styles:
grid:
- grid-template-areas: '"item1" "item2"'
- row-gap: 8px
card:
- padding: 5px
- border-radius: 20px
- background: var(--contrast-background)
custom_fields:
item1:
card:
type: custom:button-card
entity: "[[[ return entity.entity_id ]]]"
show_name: false
show_state: false
icon: fas:lock
styles:
icon:
- width: 30px # Increased icon width
- height: 30px # Increased icon height
- color: var(--text)
card:
- padding: 10px
- border-radius: 500px
- box-shadow: none
state:
- value: locked
styles:
card:
- background: var(--navbar-icon-color)
icon:
- color: var(--color-white)
- animation: rotate 4s linear infinite
extra_styles: |
@keyframes rotate {
from {transform: rotateY(-deg);}
to {transform: rotateY(360deg);}
}
tap_action:
action: call-service
service: lock.lock
target:
entity_id: "[[[ return entity.entity_id ]]]"
item2:
card:
type: custom:button-card
entity: "[[[ return entity.entity_id ]]]"
show_name: false
show_state: false
icon: fas:lock-open
styles:
icon:
- width: 30px # Increased icon width
- height: 30px # Increased icon height
- color: var(--text)
card:
- padding: 10px
- border-radius: 500px
- box-shadow: none
state:
- value: unlocked
styles:
card:
- background: var(--color-red)
- box-shadow: none
icon:
- color: var(--color-white)
- animation: rotate 4s linear infinite
- value: arming
styles:
icon:
- animation: rotate 4s linear infinite
card:
- background: var(--color-orange)
- animation: flash 2s linear infinite
- box-shadow: none
extra_styles: |
@keyframes rotate {
from {transform: rotateY(-deg);}
to {transform: rotateY(360deg);}
}
@keyframes flash {
0% {opacity: 100%;}
50% {opacity: 0%;}
100% {opacity: 100%;}
}
tap_action:
action: call-service
service: lock.unlock
target:
entity_id: "[[[ return entity.entity_id ]]]"
View:
- type: custom:button-card
template:
- custom_card_lock
entity: lock.front_door
name: Front Door
Hereās cover card I created for my useā¦only thing I canāt make it work is that arrow-up icon to change when cover is closed to arrow-down.
---
custom_card_cover:
entity: "[[[ return entity.entity_id ]]]"
name: |
[[[
var position = entity.attributes.current_position;
var state;
if (entity.state === 'open') state = 'Open';
else if (entity.state === 'closed') state = 'Closed';
else if (entity.state === 'opening') state = 'Opening';
else if (entity.state === 'closing') state = 'Closing';
else state = 'Unknown';
return `${state} | ${position !== undefined ? position + '%' : 'Unknown'}`;
]]]
show_name: true
show_icon: true
show_label: true
show_state: false
styles:
grid:
- grid-template-areas: |
"i switch"
"n n"
"l l"
"slider slider"
- grid-template-rows: 3rem 1fr min-content min-content
- grid-template-columns: 1fr 1fr
card:
- height: 100%
- padding: 10px
img_cell:
- justify-self: start
- align-self: start
- width: 20px
- height: 20px
- overflow: visible
icon:
- justify-self: start
- align-self: start
- width: 18px
- height: 18px
- overflow: visible
name:
- text-align: left
- font-size: "var(--fs-400)"
- font-family: Montserrat
- font-weight: 700
- justify-self: start
- align-self: end
- overflow: visible
- font-size: 1.2rem
label:
- text-align: left
- font-size: "var(--fs-300)"
- font-family: Montserrat
- font-weight: 500
- justify-self: start
- align-self: center
- color: var(--color-dark-gray)
- overflow: visible
- padding-bottom: 10px
custom_fields:
switch:
- width: 25px
- justify-self: end
- align-self: start
- color: var(--color-dark-gray)
- margin-top: -4px
state:
- value: "closed"
icon: mdi:curtains-closed
styles:
icon:
- color: var(--color-dark-gray)
custom_fields:
switch:
- color: var(--color-light-gray-nav)
- transform: rotate(180deg)
- value: "open"
icon: mdi:curtains
styles:
card:
- background: "#A3D5D3"
name:
- color: "var(--color-white)"
label:
- color: "var(--color-white)"
icon:
- color: "var(--color-white)"
custom_fields:
switch:
- color: "var(--color-white)"
- value: "unavailable"
name: "?"
icon: mdi:window-shutter-alert
styles:
icon:
- color: var(--color-dark-gray)
custom_fields:
slider:
card:
type: custom:my-slider-v2
entity: "[[[ return entity.entity_id ]]]"
mode: position
vertical: false
styles:
card:
- height: 30px
container:
- border-radius: 8px
- width: 100%
progress:
- height: 100%
- background: white
track:
- background: "#EEEEEE"
thumb:
- height: 30%
- background: var(--color-blue)
- position: absolute
- right: 7px
- top: 11px
- width: 3px
- border-radius: 500px
switch: >
[[[
if (entity.state == "open") {
return '<ha-icon icon="mdi:arrow-up"></ha-icon>';
} else if (entity.state == "closed") {
return '<ha-icon icon="mdi:arrow-down"></ha-icon>';
} else if (entity.state == "opening") {
return '<ha-icon icon=mdi:window-shutter-alert"></ha-icon>';
} else if (entity.state == "closing") {
return '<ha-icon icon="mdi:window-shutter-alert"></ha-icon>';
} else {
return '<ha-icon icon="mdi:alert"></ha-icon>';
}
]]]
hold_action:
action: more-info
hi chintito,
I used this code and the icon does change here
---
custom_card_cover:
entity: "[[[ return entity.entity_id ]]]"
name: |
[[[
var position = entity.attributes.current_position;
var state;
if (entity.state === 'open') state = 'Open';
else if (entity.state === 'closed') state = 'Closed';
else if (entity.state === 'opening') state = 'Opening';
else if (entity.state === 'closing') state = 'Closing';
else state = 'Unknown';
return `${state} | ${position !== undefined ? position + '%' : 'Unknown'}`;
]]]
show_name: true
show_icon: true
show_label: true
show_state: false
styles:
grid:
- grid-template-areas: |
"i switch"
"n n"
"l l"
"slider slider"
- grid-template-rows: 3rem 1fr min-content min-content
- grid-template-columns: 1fr 1fr
card:
- height: 100%
- padding: 10px
img_cell:
- justify-self: start
- align-self: start
- width: 20px
- height: 20px
- overflow: visible
icon:
- justify-self: start
- align-self: start
- width: 18px
- height: 18px
- overflow: visible
name:
- text-align: left
- font-size: "var(--fs-400)"
- font-family: Montserrat
- font-weight: 700
- justify-self: start
- align-self: end
- overflow: visible
- font-size: 1.2rem
label:
- text-align: left
- font-size: "var(--fs-300)"
- font-family: Montserrat
- font-weight: 500
- justify-self: start
- align-self: center
- color: var(--color-dark-gray)
- overflow: visible
- padding-bottom: 10px
custom_fields:
switch:
- width: 25px
- justify-self: end
- align-self: start
- color: var(--color-dark-gray)
- margin-top: -4px
state:
- value: "closed"
icon: mdi:curtains-closed
styles:
icon:
- color: var(--color-dark-gray)
custom_fields:
switch:
- color: var(--color-dark-gray)
- value: "open"
icon: mdi:curtains
styles:
card:
- background: "#A3D5D3"
name:
- color: "var(--color-white)"
label:
- color: "var(--color-white)"
icon:
- color: "var(--color-white)"
custom_fields:
switch:
- color: "var(--color-white)"
- value: "unavailable"
name: "?"
icon: mdi:window-shutter-alert
styles:
icon:
- color: var(--color-dark-gray)
custom_fields:
slider:
card:
type: custom:my-slider-v2
entity: "[[[ return entity.entity_id ]]]"
mode: position
vertical: false
styles:
card:
- height: 30px
container:
- border-radius: 8px
- width: 100%
progress:
- height: 100%
- background: white
track:
- background: "#EEEEEE"
thumb:
- height: 30%
- background: var(--color-blue)
- position: absolute
- right: 7px
- top: 11px
- width: 3px
- border-radius: 500px
switch: >
[[[
if (entity.state == "open") {
return '<ha-icon icon="mdi:arrow-up"></ha-icon>';
} else if (entity.state == "closed") {
return '<ha-icon icon="mdi:arrow-down"></ha-icon>';
} else if (entity.state == "opening") {
return '<ha-icon icon=mdi:window-shutter-alert"></ha-icon>';
} else if (entity.state == "closing") {
return '<ha-icon icon="mdi:window-shutter-alert"></ha-icon>';
} else {
return '<ha-icon icon="mdi:alert"></ha-icon>';
}
]]]
hold_action:
action: more-infotype or paste code here
hi everyone,
i edited the climate card so i can turn it on and off from the card
this is my code
custom_card_climate_auto:
show_label: true
show_state: true
state_display: >
[[[ return "Currently " +
states[entity.entity_id].attributes.current_temperature + '<p
style="font-size:10px;display:inline;vertical-align:text-top">Ā°C</p>' ]]]
label: |
[[[
return states[entity.entity_id].attributes.temperature + '<sup style="font-size: 40px;">Ā°C</sup>'
]]]
show_icon: false
styles:
grid:
- grid-template-areas: |
'l auto buttons'
'n auto buttons'
's auto buttons'
- grid-template-rows: min-content min-content
card:
- padding: 20px
name:
- justify-self: start
- align-self: start
- font-family: montserrat
- font-weight: 500
label:
- font-size: 5em
- justify-self: start
- align-self: start
- font-weight: 700
- font-family: montserrat
state:
- justify-self: start
- color: var(--color-dark-gray)
- font-size: 12px
- font-family: montserrat
custom_fields:
buttons:
card:
type: custom:button-card
styles:
grid:
- grid-template-areas: |
'item_3 item_1'
'item_4 item_2'
- row-gap: 3rem
card:
- padding: 10px
- background: var(--contrast-background)
custom_fields:
item_1:
card:
type: custom:button-card
icon: mdi:chevron-up
styles:
icon:
- width: 40px
card:
- box-shadow: none
- background: none
tap_action:
action: call-service
service: climate.set_temperature
data:
temperature: |
[[[
return states[entity.entity_id].attributes.temperature + 0.5;
]]]
target:
entity_id: "[[[ return entity.entity_id ]]]"
item_2:
card:
type: custom:button-card
icon: mdi:chevron-down
styles:
icon:
- width: 40px
card:
- box-shadow: none
- background: none
tap_action:
action: call-service
service: climate.set_temperature
data:
temperature: |
[[[
return states[entity.entity_id].attributes.temperature - 0.5;
]]]
target:
entity_id: "[[[ return entity.entity_id ]]]"
item_3:
card:
type: custom:button-card
entity: "[[[ return entity.entity_id ]]]"
show_name: false
icon: mdi:fire
styles:
icon:
- width: 20px
card:
- box-shadow: none
- background: none
state:
- value: heat
styles:
icon:
- color: var(--color-red)
tap_action:
action: call-service
service: climate.turn_on
data: null
target:
entity_id: "[[[ return entity.entity_id ]]]"
item_4:
card:
type: custom:button-card
icon: mdi:power
styles:
icon:
- width: 20px
card:
- box-shadow: none
- background: none
tap_action:
action: call-service
service: climate.turn_off
data: null
target:
entity_id: "[[[ return entity.entity_id ]]]"
Hi, what is that kind of dock at the bottom? looks very nice!
hi,
its the dock from the theme from damiantje99,
its a very nice theme/dashboard
Thank you so much! wish more people would contribute to this project.
There is much work ongoing in the background, so stay tunedā¦
I have this as welā¦ were you able to get this solved?
It looks like you do not have the HaCasa theme selected.
I had the same issue. Thereās a typo in the installation guide. You need to have a folder āthemesā in the root directory instead of āthemeā. Then you should be able to select the HaCasa Theme in the UI and the dashboard will load normally.
Hi everyone, please some help here. I tried installing this dashboard, twice, really step by step and all I get is an empty dashboard. Even the weather that I managed to config has no icons at all. Could someone throw some insight?
you are a savior!!
Have you activated the theme? And restarted Homeassistant - you have to restart at least once after installing all resourcesā¦
Hi,
I almost install this dashboard but I have an issue with weather,
my code
- type: custom:button-card
template:
- custom_card_weather_forecast
variables:
hc_enable_forecast: false
name: '[[[ return states["sensor.interieur_module_exterieur_temperature"].state + " Ā°C"]]]'
entity: weather.home
tap_action:
action: navigate
navigation_path: "weather"
Any ideas?
thank you 
