Anyone else had issue upgrading to HA 2023.4.1?
You updated to the newest version? Releases · custom-cards/button-card · GitHub But yes, this was one of the bigger discussions while Beta.
Having the same issue here - all HACS integrations updated
Hello. I solved it by updating the button-card integration and clearing the application cache
1 Like
Both of these look OK.
If you browse to this directory, are all images loaded correctly?
I’ve found that sometimes images downloaded to HA is corrupt or something.
When this happens to me, I’ve browsed to the image directory and I can clearly see that the thumbnail is not loading, and when I open that file, the image is not showing up.
To solve this I’ve deleted the image files and they’re automatically downloaded again.
Hello, can you share your GIF animation background image?
Hello, today I did a fresh HA install on my Proxmox server, uploaded backup of my HA instance and all was working as intended. Then I noticed that on my dashboard I started getting errors on all of my grid layouts. The error stated “can’t access property “config”, t is null”
Anybody experienced this issue? Before the fresh install and backup upload the dashboard was working perfectly without any issue.
After button-card update to newest version, different message, still issues
already did - expand the bottom of this post
You need to clean the cache off the app :
@Tarlak correct, had to do multiple clears and after 10-15 minutes it started displaying dashboard normally again. Thanks 
1 Like
Any chance you’ve found a fix for the recent error introduced in your swipe card title selection code?
Edit: for anyone with this issue, just replace the two instances of app-drawer-layout with ha-drawer
@D34DC3N73R if you’re willing, I’d love your code related to the 3 line layout you are using for the conditional media too, it looks very nice!
Felt like sharing this…
I’ve made an attempt to create similar popups now that the new ones have started to come out.
It’s not going to be a 100% the same as the new default, but as close as I was able to, for now.
The following is a modification to DBuit’s media player card, and the new ‘more-info’ cards - but transparent.
Preview
Media control, source input and volume control
2 Likes
Sure, but it’s dependent on the theme/extra_styles as well as the media.yaml template.
This is my state_display in button_card_templates/media.yaml
state_display: >
[[[
let horizontalStack = this.getRootNode().host,
swipeCard = horizontalStack.getRootNode().host,
gridTitle = swipeCard.getRootNode().querySelector("h1");
swipeCard.swiper.on("slideChange", () => {
if (swipeCard.swiper.realIndex === 0) {
gridTitle.textContent = "Media";
}
else if (swipeCard.swiper.realIndex === 1) {
gridTitle.textContent = "Players";
}
});
if (entity) {
let elt = this.shadowRoot,
await = setTimeout(marquee, 100),
data = entity.attributes.data,
series_title = entity.attributes.media_series_title,
title = entity.attributes.media_title,
season = entity.attributes.media_season,
episode = entity.attributes.media_episode,
game_title = entity.attributes.title_name;
if (data !== undefined) {
var number = data[variables.i].number === undefined && data[variables.i].aired !== undefined
? `(${data[variables.i].aired.split("-")[0]})`
: data[variables.i].number === undefined && data[variables.i].aired === undefined
? ' '
: data[variables.i].number,
output = `${data[variables.i].title} ${number}`;
} else {
var output = series_title === undefined && title !== undefined
? `${title}`
: game_title !== undefined
? `${game_title}`
: title === undefined && series_title !== undefined
? series_title
: title !== undefined && series_title !== undefined
? `<span style="font-weight: 700;">${series_title}</span> <br /> S${season} E${episode} - ${title}`
: variables.translate_idle;
}
function marquee() {
let state = elt.getElementById("state"),
container = elt.getElementById("container");
if (state && container) {
state.innerHTML = output;
let ro = new ResizeObserver(entries => {
let spacer = " ".repeat(3),
s = entries[0],
c = entries[1],
r = s && s.contentRect &&
c && c.contentRect &&
s.contentRect.width !== 0 &&
c.contentRect.width !== 0;
if (r && s.contentRect.width < c.contentRect.width) {
state.classList.remove("marquee");
}
else if (r && s.contentRect.width >= c.contentRect.width) {
state.innerHTML = `<div style="margin-right: 40px;float:left;">${output}</div><div">${output}</div>`;
state.classList.add("marquee");
}
});
ro.observe(state);
ro.observe(container);
}
}
return output;
}
return variables.translate_unknown;
]]]
I set this up primarily for android plex, so you might have to adjust some attribute names for other OS/players. Also, that will get you 3 lines, but won’t adjust uppercase or smaller size states fonts.
For the theme settings, I set a variable button-card-state-size: 0.3vw but I use it to subtract from the button card font size.
This is my button_card_templates/extra_styles.yaml base section
/* * * * * * * * * * * * * * * * * *
* *
* BASE *
* *
* * * * * * * * * * * * * * * * * */
#container {
text-align: left !important;
z-index: 1;
}
#card {
padding: 10.9% 9.9% 8.9% 10.9%;
}
#state::first-letter {
text-transform: uppercase;
}
#name {
font-size: var(--button-card-font-size);
font-weight: var(--button-card-font-weight);
letter-spacing: var(--button-card-letter-spacing);
}
#state {
font-size: calc(var(--button-card-font-size) - var(--button-card-state-size));
text-transform: uppercase;
font-weight: var(--button-card-font-weight);
letter-spacing: var(--button-card-letter-spacing);
}
/* portrait */
@media screen and (max-width: 1200px) {
#name {
font-size: calc(var(--button-card-font-size) * var(--card-portrait));
}
#state {
font-size: calc(calc(var(--button-card-font-size) - var(--button-card-state-size)) * var(--card-portrait));
}
}
/* phone */
@media screen and (max-width: 800px) {
#name {
font-size: calc(var(--button-card-font-size) * var(--card-phone));
}
#state {
font-size: calc(calc(var(--button-card-font-size) - var(--button-card-state-size)) * var(--card-phone));
}
}
${variables.tilt_enable === true ? `
So you might have to fine tune this to your needs, but it should give you a good base to work from. I also didn’t worry too much about styling the portrait mode since I don’t use that, so you might need to alter that if it’s something you care about.
4 Likes
Is there a trick to get it to work on an android tablet? I did the fixes and was able to empty caches on my browsers but whatever I do on the tablet Galaxy A10, those buttons stay as errors.
How do you empty the cache on fully browser?
I’m only using the HA android apps in my house, force stopping the process and clearing the app cache worked for me.
I’d maybe suggest looking up a specific guide to clear the cache of whichever browser app you are using. Or, uninstalling and reinstalling it entirely.
Yeah, I set it to clear cache on reload. I reload and nothing. Fully Kiosk’s FAQ doesn’t say anything of clearning the cache appart from clearing on load. Thanks. Not sure what to do.
Does anybody know why there is always a scroll bar on the right, where you can scroll around a few pixels, even if everything fits on the screen? Is it only me?
1 Like
it is only you, looks like you have modified the grid layout, things are to close to the top of the screen and to far from the bottom, share your code if you need help fixing it