ChileHA
February 2, 2023, 7:52pm
5357
So, IĀ“m creating a Fan card, with conditional card so when is off the card ācollapseā.
The expected results are:
Off:
On:
but IĀ“m getting:
How can I get rid of that annoying line?? I have try everythig!
Here is the code:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
cards:
- type: custom:mushroom-fan-card
entity: fan.fan_1
show_percentage_control: false
icon_animation: false
name: Ventiladores
collapsible_controls: false
fill_container: true
style: |
ha-card {
padding-bottom: 1px !important;
}
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:sun-thermometer
entity: input_select.fan_1_direction
icon_color: >-
{% if is_state('input_select.fan_1_direction', 'forward') and
is_state('fan.fan_1', 'on') %}
orange
{% endif %}
layout: vertical
fill_container: true
tap_action:
action: call-service
service: fan.set_direction
data:
direction: forward
target:
entity_id: fan.fan_1
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:snowflake-thermometer
entity: input_select.fan_1_direction
icon_color: >-
{% if is_state('input_select.fan_1_direction', 'reverse') and
is_state('fan.fan_1', 'on') %}
blue
{% endif %}
layout: vertical
fill_container: true
tap_action:
action: call-service
service: fan.set_direction
data:
direction: reverse
target:
entity_id: fan.fan_1
multiline_secondary: false
- type: conditional
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
conditions:
- entity: fan.fan_1
state: 'on'
card:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-fan-card
entity: fan.fan_1
collapsible_controls: false
show_percentage_control: true
show_oscillate_control: false
primary_info: none
secondary_info: none
icon_type: none
card_mod:
style: |
ha-card {
--ha-card-border-width: 0; }
- type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
--ha-card-border-width: 0; }
cards:
- type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: 'Timer:'
title_tap_action:
action: none
subtitle_tap_action:
action: none
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:numeric-1-box
tap_action:
action: call-service
service: script.fan_1_timer_1
data: {}
target: {}
icon_color: >-
{% if is_state('input_number.fan_1_timer', "1.0") and
is_state('fan.fan_1', 'on') %}
green
{% endif %}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:numeric-2-box
tap_action:
action: call-service
service: script.fan_1_timer_2
data: {}
target: {}
icon_color: >-
{% if is_state('input_number.fan_1_timer', "2.0") and
is_state('fan.fan_1', 'on') %}
green
{% endif %}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:numeric-4-box
tap_action:
action: call-service
service: script.fan_1_timer_4
data: {}
target: {}
icon_color: >-
{% if is_state('input_number.fan_1_timer', "4.0") and
is_state('fan.fan_1', 'on') %}
green
{% endif %}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:numeric-8-box
tap_action:
action: call-service
service: script.fan_1_timer_8
data: {}
target: {}
icon_color: >-
{% if is_state('input_number.fan_1_timer', "8.0") and
is_state('fan.fan_1', 'on') %}
green
{% endif %}
1 Like
SPESINO
February 2, 2023, 8:06pm
5358
Wonderful, Could you please share the code so I can develop it. Thank you very much in advance.
Moss
February 2, 2023, 8:32pm
5359
Of course
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Sonos Multiroom Sound System
- type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.sonos_esszimmer
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
media_controls:
- play_pause_stop
- previous
- next
volume_controls:
- volume_buttons
- volume_set
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
display: flex;
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'music' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% elif media_type == 'playlist' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% else %}
--card-mod-icon: mdi:play;
{% endif %}
{{ 'animation: none;' if not is_state(config.entity, 'playing') }}
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
--ha-card-border-width: 0;
}
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/images/multimedia/sonos.png') center no-repeat;
{% if is_state(config.entity, 'playing') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
margin: 4px 4px 16px;
filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
border-radius: var(--control-border-radius);
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
aspect-ratio: 16 / 9;
{% elif media_type == 'movie' %}
aspect-ratio: 2 / 3;
{% else %}
aspect-ratio: 1 / 1;
{% endif %}
}
- type: conditional
conditions:
- entity: media_player.sonos_esszimmer
state: playing
card:
entity: media_player.sonos_esszimmer
hide:
icon: true
name: true
runtime: true
source: true
power: true
state_label: true
volume: true
info: true
progress: false
controls: true
more_info: false
type: custom:mini-media-player
toggle_power: false
group: true
card_mod:
style:
mmp-progress$: |
paper-progress {
{{ '--paper-progress-container-color: rgba(var(--rgb-indigo-color), 0.2) !important;' if is_state(config.entity, 'playing') }}
}
.: |
ha-card {
margin: 0px 12px 12px;
--mmp-progress-height: 12px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(var(--rgb-indigo-color));
--mmp-border-radius: 12px !important;
--ha-card-border-width: 0;
}
- type: conditional
conditions:
- entity: media_player.sonos_esszimmer
state: playing
card:
entity: media_player.sonos_esszimmer
hide:
icon: true
name: true
runtime: true
source: true
power: true
state_label: true
volume: true
info: true
progress: true
controls: true
speaker_group:
platform: sonos
show_group_count: true
entities:
- entity_id: media_player.sonos_esszimmer
name: Sonos Esszimmer
- entity_id: media_player.sonos_buro
name: Sonos BĆ¼ro
- entity_id: media_player.sonos_kuche
name: Sonos KĆ¼che
- entity_id: media_player.sonos_wc
name: Sonos WC
- entity_id: media_player.sonos_wohnzimmer
name: Sonos Wohnzimmer
more_info: false
type: custom:mini-media-player
toggle_power: false
group: true
card_mod:
style: |
ha-card {
margin-left: 20px;
margin-right: 20px;
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url('/local/images/multimedia/sonos.png') center no-repeat;
{% if is_state('media_player.sonos_esszimmer', 'playing') %}
background: url( '{{ state_attr('media_player.sonos_esszimmer', "entity_picture") }}' ) center no-repeat;
{% endif %}
filter: blur(150px) saturate(200%);
background-size: 100% 100%;
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
4 Likes
weppa
February 2, 2023, 9:07pm
5360
Sure, see @rhysb ās response to my post
2 Likes
piKolin
February 2, 2023, 9:59pm
5361
Just put another
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
at the end of the code. At the same level as type: custom:stack-in-card below conditional
2 Likes
tmchow
February 2, 2023, 10:51pm
5362
Valdorama:
icon_color: {{ iif(is_state(āswitch.kids_room_sound_machineā, āonā), āorangeā, ā#44739e ā) }}
Not working:
Configuration errors detected:
missed comma between flow collection entries (3:66)
1 | ...
2 | ... hine
3 | ... .kids_room_sound_machine', 'on'), 'orange', '#44739e') }}
-----------------------------------------^
tmchow
February 2, 2023, 11:00pm
5363
tmchow:
Iām missing something obvious hereā¦ the āsound machineā chip is not orange even though the template code run in dev tools will return āorangeā. If i remove the templating syntax and just set icon_color to orange the chip icon turns orange.
what is wrong with this code?
type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.kids_room_temperature
- type: entity
entity: binary_sensor.kids_room_motion
- type: entity
entity: sensor.kids_room_humidity
- type: entity
entity: switch.kids_room_sound_machine
double_tap_action:
action: none
tap_action:
action: toggle
hold_action:
action: none
icon_color: |
{% if is_state("switch.kids_room_sound_machine", "on") %}
orange
{% else %}
#44739e
{% endif %}
Not sure if this is the only solution but i got this to work by using a template card. I wouldāve expected to get icon_color with a template to work with the standard entity card so not sure whatās going on. But this worked:
type: template
entity: switch.kids_room_sound_machine
icon: mdi:unicorn
icon_color: |-
{% if is_state("switch.kids_room_sound_machine", "on") %}
orange
{% else %}
black
{% endif %}
content: |-
{% if is_state("switch.kids_room_sound_machine", "on") %}
On
{% else %}
Off
{% endif %}
tap_action:
action: call-service
service: switch.toggle
data: {}
target:
entity_id: switch.kids_room_sound_machine
Is there a better way than this that doesnāt require a template card?
tmchow
February 2, 2023, 11:06pm
5364
can you show the full yaml code youāre using? I tried just removing the mush- strings and still canāt get that card to work
Not as far as I know - if you want to use templates in the card/chip config, you have to use the template type.
I want to change the icon Rotating speed, based on the state of my heat pump fan.
type: custom:mushroom-entity-card
entity: sensor.mlp_ladepumpendrehzahl
icon: none
primary: Radial
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: spin 0.2s linear infinite;
border-radius: 50%;
border: 3px solid rgb(var(--rgb-blue));
border-right-color: transparent;
}
.shape {
border: 4px solid rgb(var(--rgb-red));
border-right-color: transparent;
--shape-animation: spin 5s linear infinite;
--shape-color: none;
--icon-symbol-size: 24px;
--icon-size: 36px;
}
transform-origin: 50% 110%;
}
style:
top: 40%
left: 93%
tmchow
February 3, 2023, 4:49am
5367
After playing with mushroom cards for the last week and following this thread more closely, there sure is a lot of yaml customization going on.
Am I crazy or wasnāt that the whole value prop of this over Minimalist? Or is the idea that mushroom still has a huge net time savings because most cards are not customIed so heavily?
And for those that are doing intense customization, why not just use minimalist?
(Iām asking because Iām trying to decide whether to keep going down mushroom path or to jump ship to minimalist)
2 Likes
I have some entities (tasmota switches, an air conditioner + potentially others) where Iām unable to change the icon colors. Is this a known bug? No matter what I do, the color remains black. If I change the device, the color instantly changes. Is there a solution?
burg93
February 3, 2023, 8:30am
5369
Thereās no point in posting it as itās exactly the original post minus mush-. Have you got all the relevant components installed?
brewston
February 3, 2023, 8:45am
5370
Iāve got an example of that. My hot tub pump has HI or LO (or off)
type: custom:mushroom-template-card
primary: Pump
secondary: null
icon: mdi:pump
icon_color: green
picture: ''
card_mod:
style: |
{% if (state_attr('fan.hot_tub_pump_1', 'preset_mode') == "LO") %}
mushroom-shape-icon {
display: flex;
border-radius: 60%;
animation: rotation-pulse 3s linear infinite;
}
@keyframes rotation-pulse {
0% {
box-shadow: 0 0 0 0 rgb(var(--rgb-blue), 0.8);
transform: rotate(0deg);
}
70% {
box-shadow: 0 0 0 10px rgba(var(--rgb-blue), 0);
}
100% {
box-shadow: 0 0 0 0 rgba(var(--rgb-), 0);
transform: rotate(360deg);
}
}
70% {
box-shadow: 0 0 0 10px rgba(var(--rgb-blue), 0);
}
100% {
box-shadow: 0 0 0 0 rgba(var(--rgb-blue), 0);
transform: rotate(360deg);
}
}
{% elif (state_attr('fan.hot_tub_pump_1', 'preset_mode') == "HI") %}
mushroom-shape-icon {
display: flex;
border-radius: 60%;
animation: rotation-pulse 1s linear infinite;
}
@keyframes rotation-pulse {
0% {
box-shadow: 0 0 0 0 rgb(var(--rgb-blue), 0.8);
transform: rotate(0deg);
}
70% {
box-shadow: 0 0 0 10px rgba(var(--rgb-blue), 0);
}
100% {
box-shadow: 0 0 0 0 rgba(var(--rgb-blue), 0);
transform: rotate(360deg);
}
}
70% {
box-shadow: 0 0 0 10px rgba(var(--rgb-blue), 0);
}
100% {
box-shadow: 0 0 0 0 rgba(var(--rgb-blue), 0);
transform: rotate(360deg);
}
}
{% else %}
{% endif %}
1 Like
Thanks you, i have it now with this:
type: custom:mushroom-entity-card
entity: sensor.mlp_ladepumpendrehzahl
icon: none
primary: Radial
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{% set state = states('sensor.mlp_ladepumpendrehzahl') %}
{% if is_number(state) and state | float < 25%}
--icon-animation: spin 1s linear infinite;
{% elif is_number(state) and state | float > 25 %}
--icon-animation: spin 0.8s linear infinite;
{% elif is_number(state) and state | float > 75 %}
--icon-animation: spin 0.2s linear infinite;
{% endif %}
border-radius: 50%;
border: 3px solid rgb(var(--rgb-blue));
border-right-color: transparent;
}
.shape {
border: 4px solid rgb(var(--rgb-red));
border-right-color: transparent;
--shape-animation: spin 5s linear infinite;
--shape-color: none;
--icon-symbol-size: 24px;
--icon-size: 36px;
}
transform-origin: 50% 110%;
}
style:
top: 40%
left: 93%
brewston
February 3, 2023, 12:55pm
5372
Your code looks better than mine
denveronly
February 3, 2023, 5:01pm
5373
hi friend, mind take a look at mine
dont have any number in circle and dont have number of weather outside in the circle patch.
- type: custom:mushroom-climate-card
entity: climate.dining_room
icon: none
show_temperature_control: true
layout: horizontal
card_mod:
style:
mushroom-shape-icon$: |
.shape:after {
content: "{{ state_attr('config.entity', 'current_temperature')|replace('.', ',') }}Ā°";
font-size: 14px;
font-weight: bolder;
color: white;
position: absolute;
}
.shape {
{% set mode = state_attr(config.entity, 'hvac_action') %}
--shape-color: rgba(var(--rgb-
{%- if mode == 'heating' -%}
orange
{%- elif mode == 'cooling' -%}
blue
{%- else -%}
grey
{% endif %}));
}
.: |
mushroom-badge-icon:after {
content: "{{ states('sensor.sensor_weather' ) }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-green));
color: rgb(var(--rgb-white));
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.7em;
}
mushroom-badge-icon$: |
.badge {
{{ 'display: none !important;' if state_attr(config.entity, 'hvac_action') == 'idle' }}
}
tmchow
February 3, 2023, 5:16pm
5374
What is the best way to set the color for the else clause in this based on light vs dark mode? If itās light mode, I want it to be black. If dark mode, the icon should be white.
{% if is_state("switch.kids_room_sound_machine", "on") %}
orange
{% else %}
black
{% endif %}
denveronly
February 3, 2023, 5:18pm
5375
can you post a link to your lovelace.yaml somewhere?
tmchow
February 3, 2023, 5:27pm
5376
I have the components installedā¦ I just retried it and it now works. I mustāve not removed all instances of mush-. Doh!
With mush-:
Removing mush- behaves correctly, although Iād probably add more spacing between the inset chips:
2 Likes
