Love these cards but having one issue with the Chips that is almost certainly an error on my part. Tried to add a ātap_actionā to a conditional chip. When the condition is true and the chip is visible, tapping on it ādismissesā the chip, it goes away, and the tap_action is not called. Any ideas what Iām doing wrong or is a tap_action not supported on a conditional chip?
Hi
How do I show/hide a chip based on its content?
Thanks
you can use the conditional chip
- type: conditional
conditions:
- entity: binary_sensor.multisensor_motion
state: "on"
chip:
type: entity
entity: binary_sensor.multisensor_motion
icon_color: yellow
1 Like
My updated mobile weather pageā¦
icons and gifs are dynamic depending on the weather conditions at your area.
Wiki is coming soon including the download links of gifs and icons used in the page.
7 Likes
With chip cards you can use a condition. Very handy. However I have a list of about 30 entities (switches & lights_ that only should be shown if their state is āonā. Is there any other way then below to create this card? Quite tedious of I need to add 30 entities this way.
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: light.costanza
state: 'on'
chip:
type: light
entity: light.costanza
content_info: name
- type: conditional
conditions:
- entity: light.bank_tolomeo_40
state: 'on'
chip:
type: light
entity: light.bank_tolomeo_40
content_info: name
- type: conditional
conditions:
- entity: light.eettafel_dim_41
state: 'on'
chip:
type: light
entity: light.eettafel_dim_41
content_info: name
You could first create groups for your lights and for your switches and use that group sensor for your conditional chip @Tyfoon .
For example this is my conditional chip card with my light group. It shows up when a light is on. When I click on it, I can see which lights are on and take action:
- type: conditional
conditions:
- entity: light.alle_lampen
state: 'on'
chip:
type: template
icon: fapro:fad_lightbulb-on
content: >-
{{ expand(states.light.alle_lampen) | selectattr( 'state', 'eq',
'on') | list | count }}
entity: light.alle_lampen
icon_color: yellow
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Lampen die aan staan
content:
type: custom:auto-entities
filter:
include:
- group: light.alle_lampen
state: 'on'
options:
type: custom:mushroom-light-card
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
}
- entity_id: light.alle_lampen
state: 'on'
options:
type: custom:mushroom-light-card
layout: horizontal
secondary_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-state-light), 0.1);
}
exclude: []
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
The same I have for windows, doors and curtains.
7 Likes
Hello! A big thank you for this frontend card! Amazing work 
QQ. Is there a way to invert the slider fill for shutters? Currently it fills the chip while opening. I would prefer the opposite 
Thanks,
anthonws.
Maybe its just me, but since the upgrade to 2022.11, the actions section of all my mushroom cards are no longer visible in the card configuration UI. I can still edit them in YAML mode, but it isnāt quite as convenient. Any suggestions?
Hey, how did ju get the alligment white side of your dashboard.
This works for me (on a template card) for resizing and repositioning the main icon:
card_mod:
style: |
:host {
--mush-icon-size: 52px;
height: 55px;
margin-left: -20px !important;
margin-top: -1px !important;
}
Itās fixed in the latest version.
for me it worked with
type: custom:mushroom-template-card
icon: mdi:home-assistant
icon_color: blue
primary: Home Assistant
layout: horizontal
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: boing 3s ease infinite;
transform-origin: 50% 90%;
--mdc-icon-size: 32px !important;
}
@keyframes boing {
0% { transform: scale3d(1, 1, 1); }
7% { transform: scale3d(1.25, 0.75, 1); }
10% { transform: scale3d(0.75, 1.25, 1); }
12% { transform: scale3d(1.15, 0.85, 1); }
16% { transform: scale3d(0.95, 1.05, 1); }
19% { transform: scale3d(1.05, 0.95, 1); }
25% { transform: scale3d(1, 1, 1); }
}
1 Like
I had v2.3.3 installed earlier today, but just cleared the browser cache and its all back! Thanks for letting me know.
Can someone help me how to use a title card also as a back click
tap_action:
action: navigate
doest not work
A bit off topic but does anybody have an idea how to create a similar floating navigation bar as seen in the screenshot?
Thanks in advance
2 Likes
Will we see Haptics support in Mushroom?
Thanks thatās a start, now i need to figure out how to clip the icon
Iām trying to re-create you have with a chip button at the top that displays the number of lights on and then when you tap it, has a popup with lights that are on. Using this code I am able to get a popup with the title, but no lights show. Any ideas?
type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.lights_on_count
icon_color: yellow
icon: mdi:lightbulb
tap_action:
action: call-service
service: browser_mod.popup
data:
title: Lights On
card:
type: entity-filter
entities:
- group.all_lights
- light.nightlight
- switch.front_door_light
- light.lightstrip
state_filter:
- 'on'
Edit - I figured it out. I couldnāt get a simple entities card to work in the popup either, so I dug around the browser_mod documentation (which I should have done in the first place rather than simply copy-pasteā¦).
So here is a short summary for the newer people like me, be careful when copy pasting code that has been provided in this thread as browser_mod has been updated since most of the posts were made, and the way you call the popup service has been changed.
From:
action: fire-dom-event
browser_mod:
command: popup
title: My title
card:
type: ...etc...
type or paste code here
to
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: My title
content:
type: ...etc...
I personally caught the command change, but missed changing card to content which is why the popup worked but not what was in the popupā¦ This was my final config:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.lights_on_count
icon_color: yellow
icon: mdi:lightbulb
tap_action:
action: call-service
service: browser_mod.popup
data:
title: Lights On
content:
type: entity-filter
entities:
- group.all_lights
- light.nightlight
- switch.front_door_light
- light.lightstrip
- light.staircase
- light.desk_light
state_filter:
- 'on'
1 Like
Love the mushroom design for HA and Iām a newly convert from Homebridge. All round great stuff.
Im trying to do something reasonably simple which is: Display the color of the icon, based on the battery level of my wireless door bell, And - have the battery level as the Secondary Information.
Im sure its easy as all hell - I have the battery icon working fine, but I just cant get the secondary information working. Im sure its just as simple as getting the value, and presenting it (but I donāt know how to do it - being new and all to HA from homebridge).
Many thanks for help!
type: custom:mushroom-template-card
primary: Front Doorbell
secondary: <<MAKE THE BATTERY PERCENTAGE END UP HERE>>
icon: |-
{% if states('sensor.front_door_battery') | float > 80 %}
mdi:battery-80
{% elif states('sensor.front_door_battery') | float > 60 %}
mdi:battery-60
{% elif states('sensor.front_door_battery') | float > 40 %}
mdi:battery-40
{% elif states('sensor.front_door_battery') | float > 20 %}
mdi:battery-20
{% else %}
mdi:battery-10
{% endif %}
icon_color: |-
{% if states('sensor.front_door_battery') | float > 80 %}
green
{% elif states('sensor.front_door_battery') | float > 60 %}
yellow
{% elif states('sensor.front_door_battery') | float > 40 %}
orange
{% elif states('sensor.front_door_battery') | float > 20 %}
red
{% else %}
black
{% endif %}
entity: sensor.front_door_battery