I don’t even remember where I got everything from so I can’t give credit but it’s things from here on the forum.
My dishwasher is a Siemens but I expect this to work for any “Home assistant” connected dishwasher. If you don’t have a specific sensor, delete that part of the card or adapt it to something else.
I’ve been changing and improving the dishwasher card for ages; recently I had to do it from scratch due to a problem and I like the new look so, here are the:
- image used for the card header
- during and before a “wash cycle” screenshots to see what it looks like
- code used for the card
Requirements:
- Mushroom
- mini-graph-card
- button-card
- card-mod
- Home Connect Alt
Here’s the header image I used (from Google, use whatever you prefer):
Before a program starts:
During the wash cycle:
Here’s the code for the entire card:
Note: You’ll need to add your entities, you’ll see “edited” wherever it’s needed
- title: Dishwasher
path: dishwasher
icon: mdi:dishwasher
subview: false
visible:
- user: edited
theme: Mushroom Square
badges: []
cards:
- type: vertical-stack
cards:
- type: picture
image: /local/siemens_dishwasher.jpeg
tap_action:
action: none
hold_action:
action: none
- type: horizontal-stack
cards:
- show_name: true
show_icon: true
show_state: true
type: button
entity: binary_sensor.edited_bsh_common_status_doorstate
icon: mdi:dishwasher
name: Door
theme: Mushroom
icon_height: 20px
card_mod:
style: |
ha-card {
--ha-card-background: black;
color: var(--primary-color);
--state-binary_sensor-on-color: red;
--state-binary_sensor-off-color: green;
}
- show_name: true
show_icon: true
show_state: true
type: button
tap_action:
action: toggle
entity: switch.edited_bsh_common_setting_powerstate
icon: mdi:power
name: Power
theme: Mushroom
icon_height: 20px
card_mod:
style: |
ha-card {
--ha-card-background: black;
color: var(--primary-color);
--state-switch-on-color: green;
--state-switch-off-color: lightsteelblue;
}
- type: vertical-stack
cards:
- type: custom:button-card
entity: button.012010386603001997_start_pause
name: Status
show_state: true
tap_action:
action: toggle
icon: |
[[[
if (states['sensor.dishwasher_operation_state'].state === 'Run') {
return 'mdi:dishwasher-alert';
} else {
return 'mdi:play';
}
]]]
state_display: |
[[[
if (states['sensor.dishwasher_operation_state'].state === 'Run') {
return 'Running';
} else {
return 'Idle';
}
]]]
styles:
card:
- background-color: black
icon:
- color: |
[[[
if (states['sensor.dishwasher_operation_state'].state === 'Run') {
return 'orange';
} else {
return 'green';
}
]]]
- height: 25px
- margin-top: 20px
- margin-bottom: 5px
name:
- color: var(--primary-color)
- margin-top: 0px
- margin-bottom: 5px
state:
- font-size: 14px
- color: gray
- margin-bottom: 10px
- type: horizontal-stack
cards:
- animate: true
color_thresholds:
- color: '#4b7bec'
value: 1
- color: '#2d98da'
value: 2
- color: '#45aaf2'
value: 3
- color: '#0fb9b1'
value: 4
- color: '#2bcbba'
value: 5
- color: '#20bf6b'
value: 6
- color: '#26de81'
value: 7
- color: '#fed330'
value: 8
- color: '#f7b731'
value: 9
- color: '#fd9644'
value: 10
- color: '#fa8231'
value: 11
- color: '#fc5c65'
value: 12
- color: '#eb3b5a'
value: 13
entities:
- entity: >-
sensor.edited_bsh_common_option_waterforecast_2
show_state: true
state_adaptive_color: true
hour24: true
hours_to_show: 3
line_width: 3
name: Water consumption
points_per_hour: 60
lower_bound: 0
upper_bound: 13
show:
graph: line
points: false
type: custom:mini-graph-card
- animate: true
color_thresholds:
- color: '#4b7bec'
value: 0.2
- color: '#2d98da'
value: 0.3
- color: '#45aaf2'
value: 0.4
- color: '#0fb9b1'
value: 0.5
- color: '#2bcbba'
value: 0.6
- color: '#20bf6b'
value: 0.7
- color: '#26de81'
value: 0.8
- color: '#fed330'
value: 0.9
- color: '#f7b731'
value: 1
- color: '#fd9644'
value: 1.1
- color: '#fa8231'
value: 1.2
- color: '#fc5c65'
value: 1.3
- color: '#eb3b5a'
value: 1.4
entities:
- entity: >-
sensor.edited_bsh_common_option_energyforecast_2
show_state: true
state_adaptive_color: true
hour24: true
hours_to_show: 3
line_width: 3
name: Energy consumption
points_per_hour: 60
lower_bound: 0
upper_bound: 1.5
show:
graph: line
points: false
type: custom:mini-graph-card
- type: entities
entities:
- entity: sensor.edited_bsh_common_status_operationstate
secondary_info: last-changed
icon: mdi:state-machine
name: Operation status
- entity: >-
sensor.edited_bsh_common_option_remainingprogramtime
icon: mdi:timer-cog
name: Operation done
- entity: select.edited_programs
- entity: select.edited_bsh_common_option_startinrelative
- entity: >-
switch.edited_dishcare_dishwasher_option_intensivzone
- entity: >-
switch.edited_dishcare_dishwasher_option_brilliancedry
- entity: >-
switch.edited_dishcare_dishwasher_option_variospeedplus
