With massive help on that forum, I played with my fan cards and ended up with the following.
On the main dashboard screen, I have a simple fan card with a couple of presets and a gear icon that takes me to the detailed settings screen. There I can control not only the fan but also the associated automation and their thresholds.
The cards also have an animated glow effect around the icon to indicate if the automation is on and a double tab action to toggle it on/off.
Simple view
Code
type: custom:stack-in-card
cards:
- type: custom:mushroom-fan-card
entity: fan.whisper_flex
name: Cooling Fan
icon_animation: true
show_percentage_control: true
collapsible_controls: true
tap_action:
action: call-service
service: script.fan_on_off_with_automation
hold_action:
action: navigate
navigation_path: /dashboard-mushroom/fan
double_tap_action:
action: navigate
navigation_path: /dashboard-mushroom/fan
card_mod:
style:
mushroom-shape-icon$: |
{% if is_state('input_boolean.auto_fan', 'on') %}
.shape {
--shape-animation: ping 5s infinite;
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-blue), 0.7);
}
100% {
box-shadow: 0 0 5px 5px transparent;
}
}
{% elif is_state('input_boolean.auto_fan', 'off') %}
{% endif %}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: scene.fan_15
icon_color: null
icon: mdi:fan-speed-2
content_info: none
tap_action:
action: call-service
service: script.fan_15
card_mod:
style: |
ha-card {
--chip-background: rgba(var({{ '--rgb-red' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
--icon-color: rgb(var(--rgb-disabled));
}
- type: entity
entity: scene.fan_20
icon_color: null
icon: mdi:fan-speed-3
content_info: none
tap_action:
action: call-service
service: script.fan_20
card_mod:
style: |
ha-card {
--chip-background: rgba(var({{ '--rgb-green' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
--icon-color: rgb(var(--rgb-disabled));
}
- type: entity
entity: fan.whisper_flex
icon_color: blue
icon: mdi:cog
content_info: none
tap_action:
action: navigate
navigation_path: /dashboard-mushroom/fan
card_mod:
style: |
ha-card {
--chip-background: rgba(var({{ '--rgb-purple' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
--icon-color: rgb(var(--rgb-disabled));
}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
top: 16px;
width: -webkit-fill-available;
right: 12px;
position: absolute;
}
.chip-container {
right: 0px;
position: absolute;
}
Detailed view
Code
type: custom:stack-in-card
cards:
#Main fan card
- type: custom:mushroom-fan-card
entity: fan.whisper_flex
icon_animation: true
show_percentage_control: true
collapsible_controls: false
tap_action:
action: call-service
service: script.fan_on_off_with_automation
hold_action:
action: navigate
navigation_path: /dashboard-mushroom/fan
card_mod:
style:
mushroom-shape-icon$: |
{% if is_state('input_boolean.auto_fan', 'on') %}
.shape {
--shape-animation: ping 5s infinite;
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-blue), 0.7);
}
100% {
box-shadow: 0 0 5px 5px transparent;
}
}
{% elif is_state('input_boolean.auto_fan', 'off') %}
{% endif %}
#Chips with presets
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: scene.fan_15
icon_color: null
icon: mdi:fan-speed-2
content_info: none
tap_action:
action: call-service
service: script.fan_15
card_mod:
style: |
ha-card {
--chip-background: rgba(var({{ '--rgb-red' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
--icon-color: rgb(var(--rgb-disabled));
}
- type: entity
entity: scene.fan_20
icon_color: null
icon: mdi:fan-speed-3
content_info: none
tap_action:
action: call-service
service: script.fan_20
card_mod:
style: |
ha-card {
--chip-background: rgba(var({{ '--rgb-green' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
--icon-color: rgb(var(--rgb-disabled));
}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
margin: 0px 12px 0px;
top: 16px;
width: -webkit-fill-available;
right: 12px;
position: absolute;
}
.chip-container {
right: 0px;
position: absolute;
}
#Header for Mode control
- type: custom:mushroom-title-card
subtitle: Mode
card_mod:
style: |
ha-card {
margin: -12px 0px 0px;
}
#Mode control
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: fan.whisper_flex
tap_action:
action: call-service
service: fan.set_preset_mode
data:
preset_mode: nature
target:
entity_id: fan.whisper_flex
icon: mdi:forest
content: Nature
card_mod:
style: |
ha-card {
justify-content: center;
{% if is_state('fan.whisper_flex', 'off') and is_state_attr('fan.whisper_flex','preset_mode','nature') %}
--chip-background: rgba(var(--rgb-disabled), 0.7);
{% elif is_state_attr('fan.whisper_flex','preset_mode','nature') %}
--chip-background: rgba(var(--rgb-green), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
- type: template
entity: fan.whisper_flex
tap_action:
action: call-service
service: fan.set_preset_mode
data:
preset_mode: sleep
target:
entity_id: fan.whisper_flex
icon: mdi:power-sleep
content: Sleep
card_mod:
style: |
ha-card {
justify-content: center;
{% if is_state('fan.whisper_flex', 'off') and is_state_attr('fan.whisper_flex','preset_mode','sleep') %}
--chip-background: rgba(var(--rgb-disabled), 0.7);
{% elif is_state_attr('fan.whisper_flex','preset_mode','sleep') %}
--chip-background: rgba(var(--rgb-green), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
- type: template
entity: fan.whisper_flex
tap_action:
action: call-service
service: fan.set_preset_mode
data:
preset_mode: smart
target:
entity_id: fan.whisper_flex
icon: mdi:fan
content: Smart
card_mod:
style: |
ha-card {
justify-content: center;
{% if is_state('fan.whisper_flex', 'off') and is_state_attr('fan.whisper_flex','preset_mode','smart') %}
--chip-background: rgba(var(--rgb-disabled), 0.7);
{% elif is_state_attr('fan.whisper_flex','preset_mode','smart') %}
--chip-background: rgba(var(--rgb-green), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
alignment: Center
card_mod:
style: |
mushroom-template-chip {
width: 100%;
}
div.chip-container {
justify-content: space-evenly;
flex-wrap: nowrap;
}
ha-card {
margin: -15px 12px 0px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--chip-box-shadow: none;
--chip-border-radius: 10px;
--chip-height: 42px;
--chip-padding:10px;
}
#Header for Oscillation control
- type: custom:mushroom-title-card
subtitle: Oscillation and Timer
card_mod:
style: |
ha-card {
margin: 0px 0px 0px;
}
#Oscillation control
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: switch.whisper_flex_horizontal_oscilation
tap_action:
action: call-service
service: switch.toggle
target:
entity_id: switch.whisper_flex_horizontal_oscilation
icon: mdi:pan-horizontal
content: Horizontal
card_mod:
style: |
ha-card {
justify-content: center;
{% if is_state('fan.whisper_flex', 'off') and is_state('switch.whisper_flex_horizontal_oscilation','on') %}
--chip-background: rgba(var(--rgb-disabled), 0.7);
{% elif is_state('switch.whisper_flex_horizontal_oscilation','on') %}
--chip-background: rgba(var(--rgb-green), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
- type: template
entity: switch.whisper_flex_vertical_oscilation
tap_action:
action: call-service
service: switch.toggle
target:
entity_id: switch.whisper_flex_vertical_oscilation
icon: mdi:pan-vertical
content: Vertical
card_mod:
style: |
ha-card {
justify-content: center;
{% if is_state('fan.whisper_flex', 'off') and is_state('switch.whisper_flex_vertical_oscilation','on') %}
--chip-background: rgba(var(--rgb-disabled), 0.7);
{% elif is_state('switch.whisper_flex_vertical_oscilation','on') %}
--chip-background: rgba(var(--rgb-green), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
- type: template
entity: select.whisper_flex_countdown
tap_action:
action: more-info
icon: mdi:timer-sand-complete
content: '{{states(''select.whisper_flex_countdown'') }} hours'
card_mod:
style: |
ha-card {
justify-content: center;
{% if is_state('fan.whisper_flex', 'off') and is_state_attr('fan.whisper_flex','preset_mode','smart') %}
--chip-background: rgba(var(--rgb-disabled), 0.7);
{% elif is_state_attr('fan.whisper_flex','preset_mode','smart') %}
--chip-background: rgba(var(--rgb-green), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
alignment: Center
card_mod:
style: |
mushroom-template-chip {
width: 100%;
}
div.chip-container {
justify-content: space-evenly;
flex-wrap: nowrap;
}
ha-card {
margin: -15px 12px 12px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--chip-box-shadow: none;
--chip-border-radius: 10px;
--chip-height: 42px;
--chip-padding:10px;
}
I had some trouble modifying the spacing before and after the title card but I somehow managed although it is probably not the cleanest approach
ha-card {
margin: -15px 12px 12px;