Is there anything showing in the logs that some entities were not loaded?
no errors and logs. Sometimes when I turn on the light, the card appears and then disappears
I’m looking for away to display a camera live feed, in a standard button it’s too small, I think the size of 4 buttons ( like the media card) is good.
I came a cross this card/code:
card_pool:
styles:
card:
- padding: "0px"
grid:
- grid-template-areas: "'cam overlay' 'measures measures'"
- grid-template-columns: "1fr 0"
- grid-template-rows: "180px min-content"
custom_fields:
overlay:
- height: 180px
- background: linear-gradient(180deg, rgba(var(--rgb-card-background-color),0) 45%, rgba(var(--rgb-card-background-color),1) 100%)
- opacity: 1
- padding: 0
custom_fields:
cam:
card:
type: picture-glance
camera_image: camera.poolcamera
entities: []
card_mod:
style:
hui-image:
$: |
div img {
height: 180px;
object-fit: cover;
object-position: center -25px;
}
.: |
hui-image {
height: 100%;
}
.: |
ha-card {
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
box-shadow: none;
}
ha-card .box {
display: none;
}
overlay: <div></div>
measures:
card:
type: custom:button-card
name: Indicateurs de l'eau
label: "[[[ return states['sensor.pool_analysed_at'].state; ]]]"
show_name: true
show_label: true
styles:
card:
- padding: 4%
- border-radius: 0px
- box-shadow: "none"
grid:
- grid-template-areas: "'n tmp . ph . redox . sel' 'l tmp . ph . redox . sel'"
- grid-template-columns: "1fr 45px 5px 45px 5px 45px 5px 45px"
- grid-template-rows: "min-content min-content"
name:
- font-weight: "bold"
- font-size: "14px"
- place-self: end left
label:
- font-size: "10px"
- place-self: start
- filter: "opacity(40%)"
custom_fields:
tmp:
card:
type: custom:button-card
template: button_pool_measure
name: Temp
label: 23.5°C
variables:
color: "blue"
ph:
card:
type: custom:button-card
template: button_pool_measure
name: pH
label: 7.2
variables:
color: "green"
redox:
card:
type: custom:button-card
template: button_pool_measure
name: RedOx
label: 650mV
variables:
color: "yellow"
sel:
card:
type: custom:button-card
template: button_pool_measure
name: Sel
label: 3.3g/l
variables:
color: "red"
button_pool_measure:
variables:
color: "blue"
show_name: true
show_label: true
aspect_ratio: 1/1
styles:
card:
- padding: "0px"
- box-shadow: none
- background-color: var(--primary-background-color)
- background-image: >
[[[
let theme = hass.themes.themes[hass.themes.theme].modes[(hass.themes.darkMode ? "dark" : "light")];
let color_bckg = theme[`google-${variables.color}`].replace('#', '%23');
let opacity = theme['opacity-bg'];
return "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 1440 1440'><path fill='"+color_bckg+"' fill-opacity='"+opacity+"' d='m 0,566 48,26.7 C 96,619 192,673 288,699.3 384,726 480,726 576,710 c 96,-16 192,-48 288,-42.7 96,5.7 192,47.7 288,58.7 96,11 192,-11 240,-21.3 l 48,-10.7 v 754 H 1392 1152 864 576 288 48 0 Z'></path></svg>\")";
]]]
- background-size: 100%
grid:
- grid-template-areas: "'n' 'l'"
- grid-template-columns: "1fr"
- grid-template-rows: "auto auto"
name:
- font-size: "10px"
- place-self: center
label:
- font-size: "10px"
- place-self: center
- font-weight: "bold"
- color: >
[[[
if (hass.themes.darkMode){
return "#FFFFFF";
} else {
return `rgba(var(--color-${variables.color}), 1)`;
}
]]]
Does anyone know if I can implement this card, as the media card size? Maybe with some motion sensors instead of the pool sensors.
1 Like
For me it fixed reload all yaml configurations in developer tools or reload template entitites.
When I logged in on the computer, I see an error that I don’t see on the phone
Check your extra_styles.yaml according to Matts latest one. It should fix this.
Now I have this problem too, probably there is something in the extra_styles file, hopefully the button card will come with a fix soon. 
edit: so far as a workaround, I created a template sensor for individual zones and removed the entity: light in the button card. , used instead entity: sensor…
# SENSOR - BEDROOM ACTIVITY
- unique_id: bedroom_active
name: 'Bedroom Active'
state: >-
{% if not is_state('light.bedroom_group', 'off') %} yes
{% elif not is_state('media_player.bedroom_tv', 'off') %} yes
{% elif is_state('media_player.bedroom_homepod', 'playing') %} yes
{% else %} no
{% endif %}
icon: >-
{% set state = states('sensor.bedroom_active') %}
{% if state == 'no' %} mdi:thumb-down
{% else %} mdi:thumb-up
{%- endif %}
type: custom:button-card
entity: sensor.bedroom_active
name: Bedroom
double_tap_action: !include ../popup/rooms/bedroom.yaml
hold_action: !include ../popup/honeycomb/bedroom.yaml
template:
- rooms_base
- icon_double_bed
- babycam
# - icon_bedroom
# - icon_bed
variables:
babycam: switch.lidl_3_gang_socket_l3
light_entity: light.bedroom_group
state_on: >
[[[
let state = states['sensor.bedroom_active'].state;
if (state == 'yes') return state;
]]]
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: >
[[[ return variables.light_entity; ]]]
So here I was, thinking I could just grab the values from the original sensor.sidebar by changing your code for this:
sensor:
- unique_id: sidebar_content
state: template
attributes:
greet: "{{ states('sensor.template_sidebar.greet') }}"
time: "{{ states('sensor.template_sidebar-time') }}"
date: "{{ states('sensor.template_sidebar.date') }}"
...
But that didn’t work. What else do I need to change?
This is with the new update of ha?
anyone has any lead on why light template doesn’t work for me and all other template works?
how do you guys get the "netflix, yutube"icon etc next to youre tv icon?
i think its a extra template?
everything works fine for me. I noticed I had an old extra style file
1 Like
Matti, for exactly a year now your dashboard has driven our living dashboard for our family and I can’t thank you enough.
It’s been an inspiration and wonderful starting point. It’s a pain to customize though, and hard to keep up with home assistant updates — but your dashboard is the only design I was happy to accept at my home.
As we all have, I still have plans to extend it, but it’s been pretty stable for the year and has the most basic functions we need in our home. I did make some customizations from your base:
Big tiles
- Audio player with radio station buttons and volume and off control
- Shade control with vertical progress indicator
- Show next bus with rudimentary Text-only cards
- Each header opens a popup with all Scenes, all Lights and all Covers
Notification tiles at the bottom
- Car charge and status > opens view to control charge box settings
- Current coverage of electricity need by solar in % > opens electricity dashboard
- Last heard bird from a BirdNET-Pi > opens flickr photo and audio recording
- Current planes in vicinity, provided by an ADSB-Antenna and Raspi-4 running a couple of docker containers > opens tracking map
- Indicator about status of cat litter boxes (simply a time-based timeout since last clean)
- Next trash day > opens trash calendar PDF
I’m super duper happy with how this turned out. I’m about to update from HA 2023.03 to 2023.11 and see if I can fix the update… So i finally wnated to post this and thank you for your work, because I don’t know if this dashboard can survive the update 
Thank you again!
Johannes
6 Likes
do anyone know why i get this error, want to use the weather card from VietNgoc config.
Sidebar.yaml
- type: custom:button-card
entity: weather.home
name: København
variables:
temp_min: sensor.tomorrow_weather_templow
temp_max: sensor.tomorrow_weahter_tempmax
humidity: sensor.tomorrow_weather_humidity
current_weather: weather.tomorrow_io_hjem_daily
template:
- widget_weather
Button card template
widget_weather:
template:
- base
variables:
temp_min: ''
temp_max: ''
humidity: ''
current_weather: ''
is_bellow_horrizon: >
it has something to do with this block, but what i can see it should be fine?
label: >
[[[
return `
<ha-icon icon="mdi:water-percent" style="width: 1em; height: 1em; margin-right: -0.3em;"></ha-icon>
<span>${states[variables.humidity].state}%</span>
<ha-icon icon="mdi:chevron-up" style="width: 1.5em; height: 1.5em; margin-right: -0.3em;"></ha-icon>
<span>${states[variables.temp_max].state}°</span>
<ha-icon icon="mdi:chevron-down" style="width: 1.5em; height: 1.5em; margin-right: -0.3em;"></ha-icon>
<span>${states[variables.temp_min].state}°</span>
`
]]]
There’s a typo in „weather“
1 Like
you have a template from somewhere else, not from Mattias 
It’s asesome.
I thought I had your code pretty much cleaned up, but yours is more upgraded. haha
I’ll have to change my 3d floor to my house soon and try to do the same.
2 Likes
yes saw that thanks, but it still says the same error
Are all entities available?
yes there are