Looked so much and it was right in front of me 
Thanks a million!
Hi everyone
I have a Hoval homevent house ventallation system which I can control via MQTT (integration is MQTT template sensors in the yaml)
Everything works as expected, my only struggle is the mushroom-humidifier-card dispaying the configured target humidity as a secondary info.
This is what I have at the moment:
Secondary info on both cards is on the default, which should be state.
Dev tools for the entites:
I understand that the state is literally āonā and the ā50%ā target humidity is only in the attributes, but the same is true for the fan control too, and that picks up the 50% percentage.
If I interpret the source code correctly, it should pick up the humidity?
https://github.com/piitaya/lovelace-mushroom/blob/dc54101a9b787b55794eee38620886306deba318/src/cards/humidifier-card/humidifier-card.ts#L119
If anyone has any hints if Iām doing someething wrong please let me know
Thanks
I interpret the source code differently. The target humidity only shows when onCurrentHumidityChange is triggered.
If you enact a humidity change the target humidity appears when the slider is engaged, not as the secondary info.
Iām eager for additional opinionsā¦
Iām almost there, thanks for the help!! :). Is there a way to change the SVG image that it lookslike the mdi:fire in color red? (Like the image in the top right corner). Or do i have to edit the image itself?
The image is working with this code:
type: custom:mushroom-template-card
primary: Badkamer
secondary: '{{ states(''sensor.temperatuur_ruimte_taster_badkamer_1_5'') }} Ā°C'
icon: mdi:shower-head
entity: light.lampen_badkamer_1_5
badge_color: |-
{% if is_state('switch.radiator_badkamer_1_5', 'on') %}
red
{% endif %}
icon_color: |-
{% if is_state('light.lampen_badkamer_1_5', 'on') %}
orange
{% endif %}
hold_action:
action: toggle
tap_action:
action: navigate
navigation_path: /badkamer-kim-en-jos
layout: vertical
badge_icon: |-
{% if is_state('switch.radiator_badkamer_1_5', 'on') %}
mdi:fire
{% endif %}
card_mod:
style: |
{% if is_state('switch.vloerverwarming_badkamer_1_5', 'on') %}
ha-state-icon::after {
content: "";
position: absolute;
top: +60%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
border-radius: 50%;
background-repeat: no-repeat;
background-image: url("/local/animated/fire.svg") !important;
background-position: top;
background-size: cover;
}
{% endif %}
Youāll have to edit the image yourself or download another one. There are plenty of available colored images for that icon.
1 Like
Adding overflow: visible will make it worse, it will hide the rest of stack:
type: custom:stack-in-card
mode: vertical
keep:
margin: false
card_mod:
style: |
ha-card {
overflow: hidden;
}
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-climate-card
entity: climate.living_room_ac
layout: vertical
hvac_modes:
- heat_cool
- heat
- cool
- 'off'
tap_action:
action: more-info
icon: mdi:air-conditioner
card_mod:
style: |
ha-card {
border: none;
border-right: 1px solid #333;
}
- type: custom:mushroom-climate-card
entity: climate.office_ac
layout: vertical
hvac_modes:
- heat_cool
- heat
- cool
- 'off'
tap_action:
action: more-info
icon: mdi:air-conditioner
card_mod:
style: |
ha-card {
border: none;
}
card_mod:
style: |
ha-card {
border: none;
margin-bottom: none !important
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.living_room_ac_relative_humidity_measurement
alignment: center
card_mod:
style: |
ha-card {
--chip-padding: 0 !important;
--chip-border-width: 0 !important;
--chip-height: 44px;
}
- type: custom:mushroom-select-card
entity: input_select.living_room_ac_timer
icon: mdi:progress-clock
name: Living Room AC Timer
primary_info: none
secondary_info: none
icon_type: none
card_mod:
style: |
ha-card {
border: none;
overflow: visible;
}
.type-custom-mushroom-select-card {
padding: 0 10px 0 0;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.office_ac_relative_humidity_measurement
alignment: center
card_mod:
style: |
ha-card {
border: none;
--chip-padding: 0 !important;
--chip-border-width: 0 !important;
--chip-height: 44px;
}
- type: custom:mushroom-select-card
entity: input_select.office_ac_timer
icon: mdi:progress-clock
name: Office AC Timer
primary_info: none
secondary_info: none
icon_type: none
card_mod:
style: |
ha-card {
border: none;
}
.type-custom-mushroom-select-card {
padding: 0 12px 0 0;
}
card_mod:
style: |
ha-card {
border: none;
padding-bottom: 12px;
}
Also, how can I can not 25-25-25-25% but like 15-35-15-35% columns width?
1 Like
@MrGrey suggested Adding overflow: visible and I hoped it would help. I have to crash, but layout-card with the grid option will help you a ton.
An example
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 20% 80%
margin: 0px 0px 0px 0px
cards:
1 Like
thank you! I had to put in both stacks and this layout-card is awesome.
1 Like
my card dont animate based on state. What im doing wrong?
Can anyone help? thanks in advance
type: custom:mushroom-template-card
entity: binary_sensor.lxc_pialert_106_status
icon: mdi:washing-machine
icon_color: amber
primary: Washing Machine
card_mod:
style: |
ha-state-icon { {
{{'animation: shake 400ms ease-in-out infinite, drum 2s ease infinite; transform-origin: 50% 110%;' if is_state(config.entity, 'on')}}
}}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
}
I changed cards and now I no longer know where to go to put the code you recommended (āicon-size: 60px !important;) to increase the image, and I would also like to know how to eliminate the edges of the cards
type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-person-card
entity: person.mario
alignment: left
style: |
ha-card {
height: 170px !important;
width: 240px !important;
padding: 12px 20px 12px 20px !important;
}
use_entity_picture: true
icon_type: entity-picture
entity_picture: "/local/pictures/person_mario.png"
name: mario
layout: vertical
tap_action:
action: more-info
browser_mod:
command: popup
deviceID: this
title: mario
card:
type: custom:mod-card
style: |
ha-card {
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
}
card:
type: vertical-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.iphone_x_mario_geocoded_location
primary_info: none
icon: mdi:map-marker
icon_color: yellow
- type: horizontal-stack
cards:
- type: map
entities:
- entity: device_tracker.iphone_x_mario
aspect_ratio: '2'
use_entity_picture: true
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: none;
--chip-height: 43px;
}
chips:
- type: template
icon_color: |
{% set state = states('sensor.iphone_x_mario_battery_state') %}
{% if state == 'In carica' %}
green
{% elif state == 'Non in carica' %}
#6f6f6f
{% endif %}
entity: sensor.iphone_x_mario_battery_state
content: '{{ states(entity) }}'
icon: mdi:power-plug
tap_action:
action: more-info
- type: template
entity: sensor.iphone_x_mario_battery_level
content: '{{ states(entity) }} %'
icon: |
{% set bl = states('sensor.iphone_x_mario_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |
{% set bl = states('sensor.iphone_x_mario_battery_level') | int %}
{% if bl < 10 %} red
{% elif bl < 20 %} red
{% elif bl < 30 %} red
{% elif bl < 40 %} orange
{% elif bl < 50 %} orange
{% elif bl < 60 %} green
{% elif bl < 70 %} green
{% elif bl < 80 %} green
{% elif bl < 90 %} green
{% elif bl < 100 %} green
{% elif bl == 100 %} green
{% else %} grey
{% endif %}
tap_action:
action: more-info
- type: entity
entity: proximity.home
icon_color: white
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
Trying to replicate the People card using Template card in order to add additional secondary sensors info, but struggling to get the Badge icon to show for all zones created not just home/away.
Iāve used input_selectors, but wasnāt sure if this was the correct way and didnāt like this method, as I have to specify each zone individually which isnāt a viable solution, so I removed the code.
type: custom:mushroom-template-card
entity: person.hazio
primary: hazio
secondary: >-
{{ states('person.hazio')|capitalize }} Ā· {{
states('sensor.hazio_iphone_battery_level') }}%
picture: |
{{ state_attr(config.entity, 'entity_picture') }}
badge_icon: |
tap_action:
action: more-info
badge_color:
icon: ''
multiline_secondary: false
How do I go abouts achieving this? thanks
This all looks correct. do you have card mod installed from HACS?
yes, i already reinstalledā¦
can you try this instead? you have extra { } in front and behind your ha-state-icon
type: custom:mushroom-template-card
entity: binary_sensor.lxc_pialert_106_status
icon: mdi:washing-machine
icon_color: amber
primary: Washing Machine
card_mod:
style: |
ha-state-icon {
{{'animation: shake 400ms ease-in-out infinite, drum 2s ease infinite; transform-origin: 50% 110%;' if is_state(config.entity, 'on') }}
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
}
Please help me with an attached image, I would like to create a single card by inserting the status and battery level, enlarging the image and the status, am I clear? kindly I need some help
type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-person-card
entity: person.mario
alignment: left
style: |
ha-card {
height: 170px !important;
width: 240px !important;
padding: 12px 20px 12px 20px !important;
}
use_entity_picture: true
icon_type: entity-picture
entity_picture: "/local/pictures/person_mario.png"
name: mario
layout: vertical
tap_action:
action: more-info
browser_mod:
command: popup
deviceID: this
title: mario
card:
type: custom:mod-card
style: |
ha-card {
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
}
card:
type: vertical-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.iphone_x_mario_geocoded_location
primary_info: none
icon: mdi:map-marker
icon_color: yellow
- type: horizontal-stack
cards:
- type: map
entities:
- entity: device_tracker.iphone_x_mario
aspect_ratio: '2'
use_entity_picture: true
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: none;
--chip-height: 43px;
}
chips:
- type: template
icon_color: |
{% set state = states('sensor.iphone_x_mario_battery_state') %}
{% if state == 'In carica' %}
green
{% elif state == 'Non in carica' %}
#6f6f6f
{% endif %}
entity: sensor.iphone_x_mario_battery_state
content: '{{ states(entity) }}'
icon: mdi:power-plug
tap_action:
action: more-info
- type: template
entity: sensor.iphone_x_mario_battery_level
content: '{{ states(entity) }} %'
icon: |
{% set bl = states('sensor.iphone_x_mario_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |
{% set bl = states('sensor.iphone_x_mario_battery_level') | int %}
{% if bl < 10 %} red
{% elif bl < 20 %} red
{% elif bl < 30 %} red
{% elif bl < 40 %} orange
{% elif bl < 50 %} orange
{% elif bl < 60 %} green
{% elif bl < 70 %} green
{% elif bl < 80 %} green
{% elif bl < 90 %} green
{% elif bl < 100 %} green
{% elif bl == 100 %} green
{% else %} grey
{% endif %}
tap_action:
action: more-info
- type: entity
entity: proximity.home
icon_color: white
card_mod: null
style: |
ha-card {
box-shadow: 0px 0px;
}
yes, it works, i see after i will reply you 
many thanks , now i can anymate the chipcardā¦
type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.lxc_pialert_106_status
icon: mdi:pi-hole
icon_color: red
card_mod:
style: |
ha-state-icon {
{'animation: shake 400ms ease-in-out infinite, drum 2s ease infinite; transform-origin: 50% 110%;' if is_state(config.entity, 'on')}
}
@keyframes wink {
0%, 100% { transform: scale(1, 1); }
19% { transform: scale(1.05, 0.6); }
20% { clip-path: polygon(0 100%, 100% 100%, 100% 49%, 86% 51%, 79% 59%, 70% 66%, 57% 71%, 43% 71%, 29% 65%, 21% 57%, 13% 49%, 0 49%); }
25% { transform: scale(1, 1); }
28% { transform: scale(0.95, 1.05); }
30% { clip-path: inset(0 0 0 0); }
}
You are very likely correct. Iām hoping to achieve a similar behavior as to what the fan card does, hence in all screenshot I tried including the fan entity and fan card. Would it be better to raise this on github as a bug report or feature request? Thanks
chips are a little more complicated as for animations you need to drill from the main chip card to the specific chip like this:
type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.lxc_pialert_106_status
icon: mdi:eye
icon_color: red
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{{'animation: wink 4s ease-in-out infinite;' if is_state('binary_sensor.lxc_pialert_106_status', 'on')}}
}
@keyframes wink {
0%, 100% { transform: scale(1, 1); }
19% { transform: scale(1.05, 0.6); }
20% { clip-path: polygon(0 100%, 100% 100%, 100% 49%, 86% 51%, 79% 59%, 70% 66%, 57% 71%, 43% 71%, 29% 65%, 21% 57%, 13% 49%, 0 49%); }
25% { transform: scale(1, 1); }
28% { transform: scale(0.95, 1.05); }
30% { clip-path: inset(0 0 0 0); }
}
nth-child(1) needs to match the number that the chip actually is in your main chip card, so if the animation is for the 3rd chip in your code, change the number to 3.
You also mean you cant use config.entity anymore as you arent targetting the chip directly, so you need to specify your entity.
does this get you closer?
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-person-card
entity: person.mario
alignment: left
card_mod:
style: |
ha-card {
height: 170px !important;
width: 240px !important;
padding: 12px 20px 12px 20px !important;
--icon-size: 100px !important;
}
use_entity_picture: true
icon_type: entity-picture
entity_picture: /local/pictures/person_mario.png
name: mario
layout: vertical
tap_action:
action: more-info
browser_mod:
command: popup
deviceID: this
title: mario
card:
type: custom:mod-card
card_mod:
style: |
ha-card {
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
}
card:
type: vertical-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.iphone_x_mario_geocoded_location
primary_info: none
icon: mdi:map-marker
icon_color: yellow
- type: horizontal-stack
cards:
- type: map
entities:
- entity: device_tracker.iphone_x_mario
aspect_ratio: '2'
use_entity_picture: true
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: none;
--chip-height: 43px;
}
chips:
- type: template
icon_color: |
{% set state = states('sensor.iphone_x_mario_battery_state') %}
{% if state == 'In carica' %}
green
{% elif state == 'Non in carica' %}
#6f6f6f
{% endif %}
entity: sensor.sm_g991b_battery_state
content: '{{ states(entity) }}'
icon: mdi:power-plug
tap_action:
action: more-info
- type: template
entity: sensor.sm_g991b_battery_level
content: '{{ states(entity) }} %'
icon: |
{% set bl = states('sensor.iphone_x_mario_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |
{% set bl = states('sensor.iphone_x_mario_battery_level') | int %}
{% if bl < 10 %} red
{% elif bl < 20 %} red
{% elif bl < 30 %} red
{% elif bl < 40 %} orange
{% elif bl < 50 %} orange
{% elif bl < 60 %} green
{% elif bl < 70 %} green
{% elif bl < 80 %} green
{% elif bl < 90 %} green
{% elif bl < 100 %} green
{% elif bl == 100 %} green
{% else %} grey
{% endif %}
tap_action:
action: more-info
- type: entity
entity: proximity.home
icon_color: white
card_mod:
style: |
ha-card {
box-shadow: 0px 0px;
}
you had a bunch of sections where it is just style: | with no card_mod in front. this is required. should always be like this:
card_mod:
style: |
just remembered that you can do this with the native tile cards actually instead. so maybe just look at using that one for this instead
