Ok yes, that’s what I could notice during my tests 
Maybe adding it in the doc could help to understand 
Thanks for the work anyway, it seems to work well on my side
1 Like
It appears you may still be using the default theme (or mushroom)
You need to change your theme (under your profile settings, your icon at bottom left of left pane) to “minimalist-desktop” which should fix the multiple outline issue on your setup and make it look as intended.
Hello,
I really love the way this card looks but i don’t get the energie en remaining time working.
I do not use yaml mode for the frontend. so i have paste the template code in de raw config editor. but when i paste the code for the remaining time in my card setup i get the following error.
Configuration errors detected:
bad indentation of a mapping entry (7:61)4 | … r: switch.wasmachine
5 | … ine_state: sensor.wasmachine_washer_machine_state
6 | … state: sensor.wasmachine_washer_job_state
7 | … l_running: "[[[ return states["sensor.wasmachine_remaining_time …
-----------------------------------------^
this is my card set-up:
type: custom:button-card
template: custom_card_haven_washer
variables:
ulm_custom_card_washer_power: switch.wasmachine
ulm_custom_card_washer_machine_state: sensor.wasmachine_washer_machine_state
ulm_custom_card_washer_job_state: sensor.wasmachine_washer_job_state
ulm_custom_card_washer_label_running: "[[[ return states["sensor.wasmachine_remaining_time"].state; ]]]"
How can i get this working?
Start with reading the error? But my guess is that the template is incorrect
I am struggling with the SmartThings integration for my washer - only some entities are available for some reason, and I can’t figure out why? Anyone know how I can fix it?
The state and completion time doesn’t work, so I can’t use any of the nice cards here 
These are the entities filtered for my washer, some say “This entity is no longer being provided by the smartthings integration. If the entity is no longeri n use, delete it in settings.” …
My dryer seems a little better, but some entities also are problemtatic there, but only 4: switch.torretumbler, sensor.torretumbler_energy_meter, sensor.torretumbler_energy_saved and sensor.torretumbler_power_meter are “no longer available” …
I am also having the same issue which when I add the card:
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_job_state
ulm_custom_washer_grid_completion_timestamp: sensor.washer_remaining_time
and on the Card Configuration screen I get the Custom element doesn’t exist: button-card error message:
I have added the ‘button_card_templates’ codes in the top of the raw editor before as described.
Any idea what is wrong? Seen a few people say they have the same problem but didn’t find a solution.
Thank you.
Did he ever reply with a solution? I have been unable to get this template to work… I get the same errors…
You did install the custom component button-card via HACS before? Also, after doing so you need to restart Home Assistant.
I got it working, install the different HACS integrations as he said.
Add the template code to your configuration for the remaining time.
Add the button card template code to the raw configuration editor of your dashboard, add it on the first row.
Add the card configuration with your specific entity names of the washer:
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_job_state
ulm_custom_washer_grid_completion_timestamp: sensor.washer_remaining_time
Does the integration actually provide anyhting useful? I have both washer and dryer and would be happy with just integrating some status notifications, but my dryer seems to just alternate between “drying” and “weightSensing”.
1 Like
Smartthings is what you seek. At least, if you have a Samsung dryer / washer
Thanks for this example!
I have the washer card working but i’m stuck adding a separate dryer card.
- I copied and added the configuration template code for the remaining time and modified it for the washer:
- sensor:
- unique_id: dryer_completion_time
name: "Remaining Time"
state: >-
{% set rem_h = (as_timestamp(states.sensor.wasdroger_dryer_completion_time.state) - as_timestamp(now())) | timestamp_custom('%-H', false) %}
{% set rem_m = (as_timestamp(states.sensor.wasdroger_dryer_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 copied your washer template code and added it below the template code for the washer in the raw editor:
custom_dryer_state_job_state_grid_item_list:
styles:
card:
- box-shadow: none
- padding: 0px
- border-radius: var(--border-radius)
- pointer-events: none
- background-color: rgba(var(--color-theme), 0.05)
- justify-items: center
grid:
- grid-template-areas: '"item1 item2 item3"'
- grid-template-columns: 1fr 1fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
- justify-items: center
img_cell:
- justify-items: center
custom_dryer_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_dryer_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_dryer_state_grid:
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_dryer_state_grid_state_item_list
custom_fields:
item1:
card:
type: custom:button-card
template:
- icon_info
entity: '[[[ return variables.ulm_custom_dryer_grid_machine_state ]]]'
icon: mdi:tumble-dryer
name: Dryer
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_dryer_grid_machine_state
]]]
state: 'on'
card:
type: custom:button-card
template:
- icon_info
entity: >-
[[[ return
variables.ulm_custom_dryer_grid_completion_timestamp ]]]
icon: mdi:progress-clock
tap_action:
action: none
label: >-
[[[ return
states[variables.ulm_custom_dryer_grid_completion_timestamp].state
]]]
item2:
card:
type: custom:button-card
template: custom_dryer_state_job_state_grid_item_list
custom_fields:
item1:
card:
type: custom:button-card
icon: mdi:scale
template: custom_dryer_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_dryer_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:hair-dryer
template: custom_dryer_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_dryer_grid_job_state ]]]'
state:
- value: drying
styles:
icon:
- transform: scale(1.2)
- color: black
card:
- background-color: grey
item3:
card:
type: custom:button-card
icon: mdi:snowflake
template: custom_dryer_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_dryer_grid_job_state ]]]'
state:
- value: cooling
styles:
icon:
- transform: scale(1.2)
- color: black
card:
- background-color: grey
- I try to create a new custom button card:
type: custom:button-card
template: custom_dryer_state_grid
variables:
ulm_custom_washer_grid_machine_state: switch.wasdroger
ulm_custom_washer_grid_job_state: sensor.wasdroger_dryer_job_state
ulm_custom_washer_grid_completion_timestamp: sensor.wasdroger_dryer_completion_time
Generates the following error:
ButtonCardJSTemplateError: TypeError: Cannot read properties of undefined (reading ‘state’) in ‘return states[variables.ulm_custom_dryer_grid_completion_timestamp].state’
I don’t understand what and where to modify.
Who can point me in the right direction?
Thanks!
Hey, you’re almost there. You forgot to change your button card’s variable names from washer to dryer:
ulm_custom_washer_grid_machine_state: switch.wasdroger
ulm_custom_washer_grid_job_state: sensor.wasdroger_dryer_job_state
ulm_custom_washer_grid_completion_timestamp: sensor.wasdroger_dryer_completion_time
to:
ulm_custom_dryerr_grid_machine_state: switch.wasdroger
ulm_custom_dryer_grid_job_state: sensor.wasdroger_dryer_job_state
ulm_custom_dryer_grid_completion_timestamp: sensor.wasdroger_dryer_completion_time
As your dryer template will be looking for the dryer variables.
Hi,
This card is a goldmine but despite the discussion I can’t find why it’s not working for me.
I have the following error in my card:
Any idea?
1 Like
Wow, i just overlooked that one. Thanks a lot!!!
They both work now. The only thing that doesn’t work like its supposed to is the completion time.
I have the same issue as @asgeirsb
It’s noted as a full date and time + 00:00 instead of just a remain time (hours:minutes)
Any ideas on that?
Thanks!
This is my approach, more minimalistic, conditional chips at the top of the view, It only appears when it is turned on showing the remaining time. Finish event is announced thru samsung tv notification and alexa.
2 Likes
Replying to myself: In custom button card, I changed the name of the switch and sensor with the name of my switch and sensor.
I really like this, it is all I need.
If you don’t mind, could you please share your card and what all you had to add?
It’s been 1-2 years since I tried to set it all up and I don’t remember what I already did/added.
Sure!
First create a sensor to format the remaining time:
- sensor:
- name: "Lavadora tiempo"
state: >
{% set ct = states('sensor.lavadora_washer_completion_time') | as_datetime %}
{{ '00:00' if now() > ct else (ct - now()).total_seconds() | timestamp_custom('%H:%M', false) }}
Then add the mushroom chip (install thru HACS frontend)
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: switch.lavadora
state: 'on'
chip:
type: entity
entity: sensor.lavadora_tiempo
icon: mdi:washing-machine
name: Lavadora
icon_color: cyan
“switch.lavadora” is the only entity that have a switch in the washing machine device, to determinate if is on or off.
Similar to what @Lainol did with creating a new sensor by formatting the time, create template sensors:
template:
- sensor:
- name: 'Washer Remaining Time'
state: >-
{% 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 }}hr {{ rem_m }}m {% else %} {{ rem_m }}m {% endif %}
- name: 'Dryer Remaining Time'
state: >-
{% set rem_h = (as_timestamp(states.sensor.dryer_completion_time.state) - as_timestamp(now())) | timestamp_custom('%-H', false) %}
{% set rem_m = (as_timestamp(states.sensor.dryer_completion_time.state) - as_timestamp(now())) | timestamp_custom('%-M', false) %}
{% if int(rem_h) > 0.9 %} {{ rem_h }}hr {{ rem_m }}m {% else %} {{ rem_m }}m {% endif %}
And use those instead for your completion time
2 Likes