Hi guys!
I just managed to finally configure a custom card using custom-card-features (GitHub - Nerwyn/custom-card-features: Home Assistant custom features for tile cards and more. Call any action using buttons, dropdowns, inputs, selectors, sliders, spinboxes, and toggles.) for my Siemens Dishwasher. I really wanted to keep my mushroom dashboard look and the custom-card-features was just what I needed.
Here are some examples:
And here is the code:
features:
- type: custom:service-call
entries:
- type: button
entity_id: button.dishwasher_stop_program
icon: mdi:stop
haptics: false
styles: |-
.icon {
color: #FA5F55;
}
label: Stop/Cancel
tap_action:
action: toggle
target:
entity_id: button.dishwasher_stop_program
data: {}
- type: toggle
entity_id: switch.dishwasher_power
tap_action:
action: toggle
target:
entity_id: switch.dishwasher_power
data: {}
checked_values:
- "on"
unchecked_icon: mdi:power
checked_icon: mdi:power-plug-off
icon: ""
styles: |2
.background {
--color: {% if is_state(config.entity, 'on') %} #66FFA0 {% else %} #FF5F4D {% endif %};
}
.icon {
color: {% if is_state(config.entity, 'on') %} #66FFA0 {% else %} #FF5F4D {% endif %};
}
thumb: default
value_attribute: State
label: "{{ value }}"
styles: |2-
:host {
--feature-height: 50px;
}
- type: custom:service-call
entries:
- type: dropdown
entity_id: select.dishwasher_active_program
options:
- entity_id: select.dishwasher_active_program
option: dishcare_dishwasher_program_quick_65
tap_action:
action: perform-action
perform_action: select.select_option
data:
option: dishcare_dishwasher_program_quick_65
target:
entity_id: select.dishwasher_active_program
label: Quick 65
icon: mdi:clock-fast
styles: |-
.icon{
color: #00FFF2;
}
- entity_id: select.dishwasher_active_program
option: dishcare_dishwasher_program_quick_45
tap_action:
action: perform-action
perform_action: select.select_option
data:
option: dishcare_dishwasher_program_quick_45
target:
entity_id: select.dishwasher_active_program
label: Quick 45
icon: mdi:clock-fast
styles: |-
.icon{
color: #00FFF2;
}
- entity_id: select.dishwasher_active_program
option: dishcare_dishwasher_program_eco_50
tap_action:
action: perform-action
perform_action: select.select_option
data:
option: dishcare_dishwasher_program_eco_50
target:
entity_id: select.dishwasher_active_program
label: Eco 50
icon: mdi:leaf
styles: |-
.icon{
color: #29FF8F;
}
- entity_id: select.dishwasher_active_program
option: dishcare_dishwasher_program_pre_rinse
tap_action:
action: perform-action
perform_action: select.select_option
data:
option: dishcare_dishwasher_program_pre_rinse
target:
entity_id: select.dishwasher_active_program
label: Pre Rinse
icon: mdi:water
styles: |-
.icon{
color: #29C2FF;
}
- entity_id: select.dishwasher_active_program
option: dishcare_dishwasher_program_intensiv_70
tap_action:
action: perform-action
perform_action: select.select_option
data:
option: dishcare_dishwasher_program_intensiv_70
target:
entity_id: select.dishwasher_active_program
label: Intensiv 70
icon: mdi:dishwasher-alert
styles: |-
.icon{
color: #FF684D;
}
- entity_id: select.dishwasher_active_program
option: dishcare_dishwasher_program_auto_2
tap_action:
action: perform-action
perform_action: select.select_option
data:
option: dishcare_dishwasher_program_auto_2
target:
entity_id: select.dishwasher_active_program
label: Auto
icon: mdi:auto-fix
styles: |-
.icon{
color: #29C2FF;
}
- entity_id: select.dishwasher_active_program
option: dishcare_dishwasher_program_machine_care
tap_action:
action: perform-action
perform_action: select.select_option
data:
option: dishcare_dishwasher_program_machine_care
target:
entity_id: select.dishwasher_active_program
label: Machine care
icon: mdi:auto-fix
styles: |-
.icon{
color: #29C2FF;
}
value_attribute: options
autofill_entity_id: true
haptics: false
styles: |
:host {
flex-basis: 200%;
height: 50px;
}
- type: custom:service-call
entries:
- type: slider
entity_id: sensor.dishwasher_program_progress
tap_action:
action: perform-action
target:
entity_id: switch.dishwasher_power
data: {}
range:
- 0
- 100
label: "{{ value | float }}%"
thumb: flat
styles: ""
- type: custom:service-call
entries:
- type: button
entity_id: switch.dishwasher_half_load
hold_action:
action: toggle
target:
entity_id: switch.dishwasher_half_load
data: {}
label: Half Load
icon: mdi:fraction-one-half
styles: |2
.background {
--color: {% if is_state(config.entity, 'on') %} #66FFA0 {% else %} #C7C7C7 {% endif %};
}
.icon {
color: {% if is_state(config.entity, 'on') %} #66FFA0 {% else %} #C7C7C7 {% endif %};
}
- type: button
entity_id: switch.dishwasher_intensive_zone
hold_action:
action: toggle
target:
entity_id: switch.dishwasher_intensive_zone
data: {}
label: Extra Scrub
icon: mdi:car-turbocharger
styles: |2-
.background {
--color: {% if is_state(config.entity, 'on') %} #66FFA0 {% else %} #C7C7C7 {% endif %};
}
.icon {
color: {% if is_state(config.entity, 'on') %} #66FFA0 {% else %} #C7C7C7 {% endif %};
}
- type: button
entity_id: switch.dishwasher_silence_on_demand
label: Quiet now
icon: mdi:volume-off
styles: |2-
.background {
--color: {% if is_state(config.entity, 'on') %} #66FFA0 {% else %} #C7C7C7 {% endif %};
}
.icon {
color: {% if is_state(config.entity, 'on') %} #66FFA0 {% else %} #C7C7C7 {% endif %};
}
- type: button
entity_id: switch.dishwasher_vario_speed
hold_action:
action: toggle
target:
entity_id: switch.dishwasher_vario_speed
data: {}
label: Speed +
icon: mdi:speedometer
styles: |2-
.background {
--color: {% if is_state(config.entity, 'on') %} #66FFA0 {% else %} #C7C7C7 {% endif %};
}
.icon {
color: {% if is_state(config.entity, 'on') %} #66FFA0 {% else %} #C7C7C7 {% endif %};
}
styles: |2-
:host {
--feature-height: 60px;
}
- type: custom:service-call
entries:
- type: spinbox
entity_id: number.dishwasher_start_in_relative
tap_action:
action: perform-action
target:
entity_id:
- number.dishwasher_start_in_relative
perform_action: number.set_value
data:
value: "{{ value }}"
range:
- 0
- 100
hold_action:
action: repeat
value_from_hass_delay: 86400
unit_of_measurement: s
label: "start in: {{ value }}{{ unit }}"
icon: mdi:home-clock-outline
value_attribute: min
step: 1
styles: |2-
:host {
--feature-height: 50px;
}
type: tile
show_entity_picture: false
vertical: false
layout_options:
grid_columns: 4
grid_rows: 2
features_position: bottom
icon: mdi:dishwasher
color: purple
name: Siemens Dishwasher
hide_state: false
entity: switch.dishwasher_power
tap_action:
action: none
icon_tap_action:
action: none
card_mod:
style:
ha-tile-info$: |
.secondary:after {
visibility: visible;
content: " ⸱ {{ states('sensor.dishwasher_program_progress') }}%";
}
It really took a lot of time to find out how to make this to work so if it helps someone do the job quicker, you’re welcome!
