I have been looking for a card to show my Samsung Washing Machine on my dashboard, eventually I found find this awesome post from @rphlwnk, where they had done most of the hard work, thanks!
I just wanted to break down the steps for anyone else who is looking for a Samsung Washing Machine card and is on a more basic level like me, so it’s a bit easier to follow.
This guide assumes you have
- A smartphone with SmartThings installed
- A smart washing machine like this connected to your SmartThings account
- Home Assistant Cloud/Nabu Casa
- The SmartThings Integration
Once you’ve got these, let’s go!
- If you haven’t already, install HACS. In the side menu go to Configuration > Devices & Services > + Add Integration, and search for ‘HACS’ (You may need to restart after this)
- In the side menu go to HACS > Frontend > + Explore & Download Repositories, and search for ‘card-mod’
- In the side menu go to HACS > Frontend > + Explore & Download Repositories, and search for ‘button-card’ (You may need to restart after this)
- Install a code editing add-on like Studio Code Server and open it
- Open your
configuration.yamlfile and paste the following code from @rphlwnk on a new line with no indentation before ‘template’, replacing the sensor names in bold if needed with your sensor names:
NOTE: Go to Developer Tools in the sidebar menu and in ‘Filter entities’ type “wash” to check whether your sensors are sensor.washer… or sensor.washing_machine…
template:
- sensor:
- unique_id: washer_remaining_time
name: '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 }} hour(s) and {{ rem_m }} minute(s) {% else %} {{ rem_m }} minute(s) {% endif %}
- Save and restart
- Go to the page where you want to include the washing machine card and click the three dots in the top-right corner > Edit Dashboard > three dots again > Raw configuration editor
- In the top of the editor, paste the following if you have a washer dryer…:
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 item5"'
- 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
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
- Or the following if you have just a washing machine:
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
- Restart and hopefully, eureka!
Big thanks again to @rphlwnk!
