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
Change ; with : between open and closed.
works, thankyou
Need some assistance. I am trying to use the reference state entities (“entity.state”, etc.) in a card. They work great in a standard view, but do not work in a browser_mod popup.
Not sure if there is something else I need to consider with button-card in a popup, it is intended to work that way, or if it is a bug. And if a bug, in what code (button-card, browser-mod, or the frontend).
snippet below. Happy to provide more if necessary of course. I am also using the “entity.state” reference in other places with the same result.
TIA
img_cell:
- background-color: >
[[[ return ((entity.state === 'on') ? "rgba(var(--rgb-primary-color),0.2)" : "rgba(var(--rgb-secondary-text-color),0.2)")
]]]
- border-radius: 50%
- width: 60%
- hight: 40%
I might be wrong, but I was led to believe that all lines in JavaScript starting with return need to end with a semi-colon ;
Does that make a difference here?
CORRECT:
line;
line;
line;
still CORRECT - but does not look good:
line;line;line;
WRONG:
some_expression(xxx;xxxx;xxxx;)
Gave it a shot with the same results. It is definitely the “entity.state” bit that is not rendering properly. But at least now my script looks better.
Again, the config works fine in a standard Lovelace view; just not in a browser_mod popup. So for whatever reason, the local state variables in button-card are not available in a browser_mod popup. I searched the issues in both repositories, but did not see anything like this. Given the prevalence of both, I am surprised that there is nothing there, so am assuming I am doing something wrong. Is anyone using these local variables successfully in a popup?
you need to return the entity in the popup otherwise it will not work. Is your popup in the same config as your card or are you using templates outside the card config? Something like this will work.
type: "custom:button-card"
entity: "define_entity_here"
tap_action:
action: "fire-dom-event"
browser_mod:
service: "browser_mod.popup"
data:
hide_header: true
content:
type: "custom:button-card"
entity: "[[[ return entity.entity_id ]]]"
styles:
img_cell:
- background-color: >
[[[
return entity.state == "on"
? "rgba(var(--rgb-primary-color),0.2)"
: "rgba(var(--rgb-secondary-text-color),0.2)"
]]]
- border-radius: 50%
- width: 60%
- hight: 40%
yeah, good question. I always use them. the thing is, if you do, you are 100% certain the interpreter does what you instruct it to do, which in this case is see the end of that specific instruction/variable/template etc etc Those are called ‘statements’.
and this would be the formal rule:
A semicolon is not necessary after a statement if it is written on its own line. But if more than one statement on a line is desired, then they must be separated by semicolons.
otoh, search Google on
javascript semicolon
and you’ll see a plethora of different opinions.
Interesting. The popup contains several cards with different entities, so not sure how this would work. So in that example, it passes the state object from the calling function? nice.
If for whatever reason the local state object is not getting loaded, I wonder if I could force it to load somehow? will play with that.
Here is a fuller snippet. The popup typically contains several button-cards (and other cards) that follow.
- type: 'custom:button-card'
aspect_ratio: 1/1
show_name: false
show_icon: true
entity: group.all_occupancy
icon: 'mdi:home'
tap_action:
haptic: medium
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Occupancy
content:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: grid
columns: 2
square: false
cards:
- type: 'custom:button-card'
entity: binary_sensor.hk_presence_pa
name: Pa
icon: mdi:home-account
aspect_ratio: 4/1
color: auto
show_name: true
show_icon: true
layout: icon_name
tap_action:
action: none
haptic: medium
show_state: false
styles:
icon:
- width: 70%
name:
- justify-self: start
img_cell:
- background-color: >
[[[ return ((entity.state === 'on') ? "rgba(var(--rgb-primary-color),0.2)" : "rgba(var(--rgb-secondary-text-color),0.2)")
]]]
- border-radius: 50%
- width: 60%
- hight: 40%
card_mod:
class: opaque
- type: 'custom:button-card'
entity: binary_sensor. ........ > additional cards
Everyone facing localization issues - please test this (a very small & possibly insufficient fix):
Before:
After:
But how to test ? We can’t build it, and can not edit the resource with that change?
Do you have a shareable .js file we can download?
My edit was very “brute-force”:
- Open js-file in VSC (/www/community/button-card/button-card.js).
- Find the only occurrence of “component.${r}.state._.${i.state}”.
- Replace
state._
with
entity_component._.state
Again, this is a temporarily fix. I realized that in 2023.4 localization keys were changed; so I searched a code for patterns and found these “xxxx.state._.xxxxx” old keys in button-card, multiple-entity-row, slider-entity-row, config-template-card, history-explorer-card (means - all these cards have or may have issues).
Probably a REAL fix should be more complex)))
Anyway, I decided to create a PR with this small change - to urge a developer(s) to dig this issue in this card with a more attention.
Update: one more thing should be changed to support different device_classes:
replace
component.${domain}.state.${stateObj.attributes.device_class}.${stateObj.state}
with
component.${domain}.entity_component.${stateObj.attributes.device_class}.state.${stateObj.state}
1 Like
Just FYI, I updated to 2023.5.0 and it now works as expected. Not sure what changed, but happy it did!
Edit: Got excited and spoke too soon. After further testing, still no joy.