I’ve updated to latest v3.5.0 and i’ve still got the error - any ideas? do my templates need to be moved to a different location?
I can confirm also that there is an issue.
When I updated to 2023.4.0, all my custom button cards errored out with the “null” warning and reading ‘t.config’. I then found the version 3.5 on github, updated, and on PC, it started working again, but on devices (iphones/ipads), using the HA app, the error still remains. Tried refreshing, reboots, everything I could think of, nothing helped.
Thanks.
You need to clear cache on mobile as well. On iOS I believe it’s in the companion settings panel. On Android you need to clear caches through the Android settings page (where you have all apps listed)
But I don’t understand why everyone here jumps on 2023.4 the minute it’s released. There are numerous reports in here that cards like button card, decluttering and kiosk mode are broken because of some major changes.
Just wait a few weeks till they get new releases and bugfixes of those releases and 2023.4 gets more bugfixes anyway. Running 2023.3.6 for a few weeks longer will not stop the earth from spinning.
1 Like
Here also the same issues. Just did a restore to 2023.3x because my complete dashboard is ruined
there were numerous of updates of cards to comply with 2023.4. But, (at least on windows) you must totally clear all: in chrome or edge: press F12 (to enter developer mode), then right-click on “refresh” icon and select “empty cache and hard refresh”. Only then it shows correctly - only CTRL+F5 doesn’t help.
1 Like
Thank you - that worked for me!
Yes. Or just use HACS which breaks the cache and loads the new one for you when you update
Hm… how do you do that? if so, HACS should persuade browser not to use cached files…
I did some research regarding this “refresh”: here’s explanation:
Normal reload
The same thing as pressing F5. This will use the cache but revalidate everything during page load, looking for “304 Not Modified” responses. If the browser can avoid re-downloading cached JavaScript files, images, text files, etc. then it will.
Hard reload
Don’t use anything in the cache when making the request. (which is equal to SHIFT+F5 No need to open Developer console) Force the browser do re-download every JavaScript file, image, text file, etc.
Empty Cache and Hard Reload
Obviously, if the cache is empty then it will have to do a hard reload. This will again force the browser to re-download everything. However, if the page makes any after-the-fact downloads via JavaScript that weren’t part of page load, then these might still use the cache, which is where emptying the cache helps because it makes sure that even these won’t use cached files.
After my initial post, I reverted to a backup. Today I updated everything on HACS first, then loaded 2023.4.1. For a minute, it look liked like it was working, but eventually I needed to Empty Cache and Hard Reload.
hi, is it possible to incorporate a standard toggle switch in this card?
I do not there is still some updates being made on the github but assume its by other contributors. might be time to start moving away from this over the coming months.
Does anyone know:
Is there an Empty Cache and Hard Reload way within the companion app as well?
Depends on whether its iOS or Android. I think there’s a dedicated option on the iOS app, but can’t confirm since I don’t own Ny iOS devices.
On Android, you have to go through your phone’s Settings>App Management>Select the HA app>Storage usage>Delete data. This will log you out and reset all the app’s settings.
On ipad (i guess it’s similar on iphone) you must go to settings (inside ha app), then phone app settings, debugging, clear/reset frontend cache (something like that, since i’m translating from my language).
1 Like
how can I check the date of last change of a sensor ?
why are you asking here? this topic is on custom:button-card…
that simply uses:
show_last_changed: true
if your question is related to this topic
more generically, check State Objects - Home Assistant
{{states.sensor.your_sensor.last_changed}}
1 Like
sorry. It was a reply on a post I found here… I ask it somewhere else…
I have a problem, after the update everywhere show state shows only on off. Before, it said open and closed on the windows and doors. Please advise how to change it again
the card needs an update to the new HA frontend logic. meanwhile, you can use state_display:
[[[ return (entity.state === 'on') ? 'open' ; 'closed'; ]]]
Hey Button Card Experts! I’m just getting my feet wet with more “advanced” HA things, like CSS modifying. I’m working on a mobile music dashboard, with the help of a few great resources like this one, I’ve almost got what I need to get figured out to finalize it. I’m just having one issue. I’m using the container template, but I can’t figure out how to get my buttons to center within the horizontal stack (IE the icons on the top and the music control buttons). Code below, if anyone can help me.
Template code:
button_card_templates:
container:
color_type: label-card
color: rgb(240, 240, 240)
styles:
card:
- padding: 0
name:
- border-radius: 0.4em 0.4em 0 0
- padding: 0.1em
- width: 100%
grid:
- grid-template-areas: '"buttons"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
custom_fields:
buttons:
- margin: 0
- padding: 0.3em
Top Navigation Bar
type: custom:button-card
template: container
name: Speakers
show_name: false
custom_fields:
buttons:
card:
type: horizontal-stack
cards:
- type: custom:button-card
entity: input_boolean.sonos_playing_status
name: Sonos
icon: mdi:sofa
show_icon: true
show_name: false
show_state: false
size: 50%
tap_action:
action: toggle
hold_action:
action: more-info
styles:
card:
- height: 60px
- width: 60px
- border-radius: 100%
- background-color: rgb(254, 254, 254, 1)
- border: 1px solid rgb(0, 0, 0, 0.5)
- box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.15)
- align-self: middle
icon:
- color: rgb(90, 153,92,1)
state:
- value: 'on'
styles:
card:
- box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.35)
- border: 2px solid rgb(0, 167, 11)
- type: custom:button-card
entity: input_boolean.everywhere_playing_status
name: Everywhere
show_icon: true
show_name: false
show_state: false
size: 50%
icon: mdi:home
tap_action:
action: toggle
hold_action:
action: more-info
styles:
card:
- height: 60px
- width: 60px
- border-radius: 100%
- background-color: rgb(254, 254, 254, 1)
- border: 1px solid rgb(0, 0, 0, 0.5)
- box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.15)
- align-self: middle
icon:
- color: rgb(255, 202, 55, 1)
state:
- value: 'on'
styles:
card:
- box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.35)
- border: 3px solid rgb(0, 167, 11)
- type: custom:button-card
entity: input_boolean.bathroom_playing_status
name: Bathroom
show_icon: true
show_name: false
show_state: false
icon: mdi:bathtub
size: 50%
tap_action:
action: toggle
hold_action:
action: more-info
styles:
card:
- height: 60px
- width: 60px
- border-radius: 100%
- background-color: rgb(254, 254, 254, 1)
- border: 1px solid rgb(0, 0, 0, 0.5)
- box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.15)
- align-self: middle
icon:
- color: rgb(65, 106, 154, 1)
state:
- value: 'on'
styles:
icon:
- color: rgb(90, 153 ,92, 1)
card:
- box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.35)
- border: 3px solid rgb(0, 167, 11)
view_layout:
grid-area: A
In case it is helpful, I’m using grid layout and this is the code in the layout options:
grid-template-columns: auto 400px auto
grid-template-rows: auto
grid-template-areas: |
"Gutter1 A Gutter2"
"Gutter1 B Gutter2"
"Gutter1 C Gutter2"
"Gutter1 D Gutter2"
2 Likes