I’m getting this error, any idea what might be happening?
ButtonCardJSTemplateError: TypeError: Cannot read properties of undefined (reading 'state') in 'return states[variables.ulm_custom_washer_grid_completion_timestamp].state'
tap_action:
action: none
type: custom:button-card
group_expand: false
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
size: 40%
color_type: icon
show_name: true
show_state: false
show_icon: true
show_units: true
show_label: false
show_entity_picture: false
show_live_stream: false
card_size: 3
styles:
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item1:
card:
type: custom:button-card
template: custom_washer_state_grid_state_item_list
custom_fields:
item1:
card:
type: custom:button-card
template:
- icon_info
entity: '[[[ return variables.ulm_custom_washer_grid_machine_state ]]]'
icon: mdi:washing-machine
name: Washing machine
tap_action:
action: more-info
label: not running
state:
- value: 'on'
label: running
styles:
icon:
- color: rgba(var(--color-blue), 1)
img_cell:
- background-color: rgba(var(--color-background-blue), 0.2)
item2:
card:
type: conditional
conditions:
- entity: '[[[ return variables.ulm_custom_washer_grid_machine_state ]]]'
state: 'on'
card:
type: custom:button-card
template:
- icon_info
entity: >-
[[[ return variables.ulm_custom_washer_grid_completion_timestamp
]]]
icon: mdi:progress-clock
tap_action:
action: none
label: >-
[[[ return
states[variables.ulm_custom_washer_grid_completion_timestamp].state
]]]
item2:
card:
type: custom:button-card
template: custom_washer_state_job_state_grid_item_list
custom_fields:
item1:
card:
type: custom:button-card
icon: mdi:scale
template: custom_washer_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_washer_grid_job_state ]]]'
state:
- value: weightSensing
styles:
icon:
- transform: scale(1.2)
- color: black
card:
- background-color: grey
item2:
card:
type: custom:button-card
icon: mdi:waves
template: custom_washer_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_washer_grid_job_state ]]]'
state:
- value: wash
styles:
icon:
- transform: scale(1.2)
- color: black
card:
- background-color: grey
item3:
card:
type: custom:button-card
icon: mdi:water
template: custom_washer_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_washer_grid_job_state ]]]'
state:
- value: rinse
styles:
icon:
- transform: scale(1.2)
- color: black
card:
- background-color: grey
item4:
card:
type: custom:button-card
icon: mdi:fan
template: custom_washer_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_washer_grid_job_state ]]]'
state:
- value: spin
styles:
icon:
- transform: scale(1.2)
- color: black
card:
- background-color: grey
item5:
card:
type: custom:button-card
icon: mdi:tumble-dryer
template: custom_washer_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_washer_grid_job_state ]]]'
state:
- value: drying
styles:
icon:
- transform: scale(1.2)
- color: black
card:
- background-color: grey
template: custom_washer_state_grid
variables:
ulm_custom_washer_grid_machine_state: switch.laundry_room_washer
ulm_custom_washer_grid_job_state: sensor.laundry_room_washer_washer_job_state
ulm_custom_washer_grid_completion_timestamp: sensor.washer_remaining_time
state: []
lock:
enabled: false
duration: 5
unlock: tap
Replying to myself. I redid every step in this thread and got it working flawlessly.
I’ve noticed that with presented template after end of washing / drying cycle it’s still counting:
{% set rem_h = (as_timestamp(states.sensor.washer_completion_time.state) - as_timestamp(now())) | timestamp_custom('%-H', false) %}
{% set rem_m = (as_timestamp(states.sensor.washer_completion_time.state) - as_timestamp(now())) | timestamp_custom('%-M', false) %}
{% if int(rem_h) > 0.9 %} {{ rem_h }} hour(s) and {{ rem_m }} minute(s) {% else %} {{ rem_m }} minute(s) {% endif %}
I’ve changed it to assure that completion_time is in the future (and therefore avoiding every-minute-entry in the Logbook with irrelevant data):
{% set completion_time = states.sensor.washer_completion_time.state %}
{% set completion_timestamp = as_timestamp(completion_time) %}
{% set current_timestamp = as_timestamp(now()) %}
{% if completion_timestamp > current_timestamp %}
{% set rem_h = ((completion_timestamp - current_timestamp) | timestamp_custom('%-H', false)) | int %}
{% set rem_m = ((completion_timestamp - current_timestamp) | timestamp_custom('%-M', false)) | int %}
{% if rem_h > 0.9 %}
{{ rem_h }} hour(s) and {{ rem_m }} minute(s)
{% else %}
{{ rem_m }} minute(s)
{% endif %}
{% else %}
Off
{% endif %}
1 Like
Gathaeryx
April 17, 2024, 1:34pm
45
Does anyone know how to remove the borders that appear when creating this card? I updated HA docker from version 2023.10.3 to 2024.4.3 today, but for some reason this card now has borders around every button.
1 Like
Check Theme Settings => I’ve experienced similar issues which could be fixed by choosing the right one.
I’ve got that set (and still have, just checked!) but after one of the recent updates it brokes. No icon visible
Finally got it running. Had to check all the sensors 3 times to solve every issue.
Fixing it made it work.
But does anyone know how to get round corners?
jbhobson
May 3, 2024, 1:15pm
49
@dennisschmitz55m is there any chance you could paste a copy of the latest working version, seems to be lots of changes and hard to tell what is the actual working code. TIA.
I used the template in the first post on configuration.yaml
#washer sensor
template:
- sensor:
- unique_id: washer_remaining_time
name: 'Remaining Time'
state: >-
{% set rem_h = (as_timestamp(states.sensor.washer_washer_completion_time.state) - as_timestamp(now())) | timestamp_custom('%-H', false) %}
{% set rem_m = (as_timestamp(states.sensor.washer_washer_completion_time.state) - as_timestamp(now())) | timestamp_custom('%-M', false) %}
{% if int(rem_h) > 0.9 %} {{ rem_h }} hour(s) and {{ rem_m }} minute(s) {% else %} {{ rem_m }} minute(s) {% endif %}
The resulting sensor has the name: sensor.remaining_time instead if sensor.washer_remaining_time and I have no clue why…,
Anyway, just had to adjust that inside the button card itself which here looks like this:
type: custom:button-card
template: custom_washer_state_grid
variables:
ulm_custom_washer_grid_machine_state: switch.washer
ulm_custom_washer_grid_job_state: sensor.washer_washer_job_state
ulm_custom_washer_grid_completion_timestamp: sensor.remaining_time
The template for the raw configuration looks like this here with the only adjustment I made was for rounded corners
button_card_templates:
icon_info:
color: var(--color-theme)
show_icon: true
show_name: true
show_label: true
size: 20px
custom_fields:
notification: |
[[[
if (entity.state =='unavailable'){
return `<ha-icon icon="mdi:exclamation" style="width: 12px; height: 12px; color: var(--primary-background-color);"></ha-icon>`
}
]]]
state:
- styles:
custom_fields:
notification:
- border-radius: 50%
- position: absolute
- left: 24px
- top: '-2px'
- height: 16px
- width: 16px
- border: 2px solid var(--card-background-color)
- font-size: 12px
- line-height: 14px
- background-color: |
[[[
return "rgba(var(--color-red),1)";
]]]
value: unavailable
styles:
card:
- border-radius: 21px 8px 8px 21px
- box-shadow: none
- padding: 0px
grid:
- grid-template-areas: '"i n" "i l"'
- grid-template-columns: min-content auto
- grid-template-rows: min-content min-content
icon:
- color: rgba(var(--color-theme),0.2)
img_cell:
- background-color: rgba(var(--color-theme),0.05)
- border-radius: 50%
- place-self: center
- width: 42px
- height: 42px
name:
- align-self: end
- justify-self: start
- font-weight: bold
- font-size: 14px
- margin-left: 12px
label:
- justify-self: start
- align-self: start
- font-weight: bolder
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
state:
- justify-self: start
- align-self: start
- font-weight: bolder
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
custom_washer_state_job_state_grid_item_list:
styles:
card:
- box-shadow: none
- padding: 0px
- border-radius: 10px
- pointer-events: none
- background-color: rgba(var(--color-theme), 0.05)
- justify-items: center
grid:
- grid-template-areas: '"item1 item2 item3 item4"'
- grid-template-columns: 1fr 1fr 1fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
- justify-items: center
img_cell:
- justify-items: center
custom_washer_state_grid_job_state_item_list_items:
show_icon: true
show_name: false
size: 20px
tap_action:
action: none
styles:
card:
- box-shadow: none
- padding: 0px
- border-radius: 50%
- place-self: center
- height: 42px
- width: 42px
- pointer-events: auto
- background-color: transparent
grid:
- grid-template-areas: '"i"'
icon:
- color: var(--color-theme)
custom_washer_state_grid_state_item_list:
styles:
card:
- box-shadow: none
- padding: 0px
grid:
- grid-template-areas: '"item1 item2"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
custom_washer_state_grid:
styles:
card:
- border-radius: 10px
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item1:
card:
type: custom:button-card
template: custom_washer_state_grid_state_item_list
custom_fields:
item1:
card:
type: custom:button-card
template:
- icon_info
entity: '[[[ return variables.ulm_custom_washer_grid_machine_state ]]]'
icon: mdi:washing-machine
name: Washing machine
tap_action:
action: more-info
label: not running
state:
- value: 'on'
label: running
styles:
icon:
- color: rgba(var(--color-blue), 1)
img_cell:
- background-color: rgba(var(--color-background-blue), 0.2)
item2:
card:
type: conditional
conditions:
- entity: >-
[[[ return variables.ulm_custom_washer_grid_machine_state
]]]
state: 'on'
card:
type: custom:button-card
template:
- icon_info
entity: >-
[[[ return
variables.ulm_custom_washer_grid_completion_timestamp ]]]
icon: mdi:progress-clock
tap_action:
action: none
label: >-
[[[ return
states[variables.ulm_custom_washer_grid_completion_timestamp].state
]]]
item2:
card:
type: custom:button-card
template: custom_washer_state_job_state_grid_item_list
custom_fields:
item1:
card:
type: custom:button-card
icon: mdi:scale
template: custom_washer_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_washer_grid_job_state ]]]'
state:
- value: weightSensing
styles:
icon:
- transform: scale(1.2)
- color: black
card:
- background-color: grey
item2:
card:
type: custom:button-card
icon: mdi:waves
template: custom_washer_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_washer_grid_job_state ]]]'
state:
- value: wash
styles:
icon:
- transform: scale(1.2)
- color: black
card:
- background-color: grey
item3:
card:
type: custom:button-card
icon: mdi:water
template: custom_washer_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_washer_grid_job_state ]]]'
state:
- value: rinse
styles:
icon:
- transform: scale(1.2)
- color: black
card:
- background-color: grey
item4:
card:
type: custom:button-card
icon: mdi:fan
template: custom_washer_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_washer_grid_job_state ]]]'
state:
- value: spin
styles:
icon:
- transform: scale(1.2)
- color: black
card:
- background-color: grey
1 Like
Goofi
May 11, 2024, 9:31am
52
Hey hello
type: custom:button-card
template: custom_washer_state_grid
variables:
ulm_custom_washer_grid_machine_state: switch.wasmachinenl_switch
ulm_custom_washer_grid_job_state: sensor.wasmachinenl_washer_job_state
ulm_custom_washer_grid_completion_timestamp: sensor.wasmachinenl_washer_completion_time
1 Like
It looks like something is wrong with the template sensor in your configuration.yaml and outputting the wrong numbers.
1 Like
Goofi
May 27, 2024, 12:23am
54
Can you please also tell me how to make it bigger the icon and time.
Lainol
July 7, 2024, 4:34pm
55
Chips Card
Sections are split:
Main Icon Styling You can style the main icon of each chip type like this:
Change the icon type/mdi.
[image]
The weather chip icon cannot be modified as it is not a normal HA icon.
Note that when you have a conditional chip (like the first chip in this config is) with another chip inside of it you need to go 1 layer deeper.
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
ha-state-icon {
--card-…
Here you go! Sorry for the delay.
i tried the whole stuff but my button card is just empty. any changes which are know to be done because auf new HA version(s)?
What could that be?
