Did you sort your problem…I have the same error about “Button-card template ‘custom_washer_state_grid’ is missing”
Yeah i dont get it to work either.
I dont get any error anymore but just an empty box
It appears the instructions noted do not include a template design for “custom_washer_state_grid”. Perhaps the person who posted it initially can fill in the blanks?
Hello!
I am having a bit of trouble getting this card to work. I have followed blindly this guide, but I can’t get the card to even show up on my dashboard.
I have added the button_card_template to raw configuration and I have installed HACS. Also added the template in configuration file.
Also changed the sensor names to the appriopriate names. Not sure what I missed? Should I do something inside HACS after I have installed the button-card and card-mod?
Also, when I am in iOS HA app I get this message in the overview:
Ok I got a little further on my on trying various different things. I am now struggling with the card itself, why is the timestamp so wierd and the 4 buttons doesn’t actually do anything? Can click them but nothing happens.
So my card looks like this now:
The code for the card:
type: custom:button-card
template: custom_washer_state_grid
variables:
ulm_custom_washer_grid_machine_state: switch.vaskemaskin
ulm_custom_washer_grid_job_state: sensor.vaskemaskin_washer_job_state_job_state
ulm_custom_washer_grid_completion_timestamp: sensor.vaskemaskin_washer_completion_time
and the code for the UI:
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: var(--border-radius)
- 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: 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
Whereas the original card looks like this:
I would like the timestamp in the custom card to look like just like the original card: “XX minutes/hours left”
And I just want the “Job state” and “Machine State”
You can have a look at my version, made long time ago, maybe not as fancy as here
I’ve took the code from @rphlwnk, enhanced it and made it a custom card in minimalist, so it can be reused by others: Washer/Dryer/Dishwasher Custom-card - UI Lovelace Minimalist
Thnx @rphlwnk for the design!
1 Like
Hi , got this error
Configuration errors detected:
bad indentation of a mapping entry (30:63)27 | … [“sensor.washingmachine_energy”].attributes.unit_of_measurement;
28 | … lue + " " + measurement;
29 | …
30 | … _running: “[[[ return states[“sensor.remaining_time”].state; ]]]”
-----------------------------------------^
31 | … _configuring: >
32 | …
1 Like
Hi @Cruguah,
Already thank you for putting the code in minimalist UI, it’s a great job and I start to use it. Really great design, love it !
A question about your code, how do you change the icon of the card?
I tried to adapt it several times but it didn’t work. I’ve always the “flash” icon.
The only way I found is to change the icon in my entity “switch”, directly in the integration.
Don’t we have an uml variable for the icon?
Hello Kev14,
I didn’t add an icon variable in this card. The icon is used from the power variable (ulm_custom_card_washer_power) and if you change in manualy to the icon that you what, it will show up in the card.
Mine is set to mdi:washing-machine and mdi:tumble-dryer.
Hope this helps.
Kind regards,
Cruguah
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