You can use whatever mini-media-player supports.
Hi RhysbâŠ
Is there a way to greyout chip pictures depending on the state of an input boolean ?
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.ana_sayfa_menu
state: 'off'
chip:
type: template
entity: input_boolean.futbol
picture: /local/icons/besiktas2.png
content: |
{% if is_state('input_boolean.futbol', 'off') %}
Maç Yok
{% elif is_state('input_boolean.futbol', 'on') %}
Maç GĂŒnĂŒ
{% else %}
HATA
{% endif %}
icon: |-
{% set state=states(entity) %}
{% if state=='off' %}
mdi:soccer
{% elif state=='on' %}
mdi:soccer
{% else %}
mdi:door
{% endif %}
icon_color: |-
{% set state=states(entity) %}
{% if state=='off' %}
grey
{% elif state=='on' %}
amber
{% else %}
grey
{% endif %}
tap_action:
action: more-info
Like in this one :
âMaç Yokâ is appearing during the state off. I would also like to greyout the logo based on the state. If the boolean is off the color of the picture should be grey ? Is this possible ? I trıed with card mode but had no luck.
1 Like
Hello everyone!
Is there a way to hide the one chip card if one condition is set?
Example: I use one chip card with the couter of lights that are on at the moment.
If the number of this counter = 0, the chip should not be displayed.
Is it possible?
Simply use a conditional chip.
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: light.lights
state: 'on'
chip:
type: light
entity: light.lights
1 Like
Yes, probably like this 
:
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.ana_sayfa_menu
state: 'off'
chip:
type: template
entity: input_boolean.futbol
picture: /local/icons/besiktas2.png
content: |
{% if is_state(entity, 'off') %}
Maç Yok
{% elif is_state(entity, 'on') %}
Maç GĂŒnĂŒ
{% else %}
HATA
{% endif %}
icon: |-
{% set state=states(entity) %}
{% if state=='off' %}
mdi:soccer
{% elif state=='on' %}
mdi:soccer
{% else %}
mdi:door
{% endif %}
icon_color: |-
{% set state=states(entity) %}
{% if state=='off' %}
grey
{% elif state=='on' %}
amber
{% else %}
grey
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
{{ 'filter: grayscale(100%);' if is_state('input_boolean.futbol', 'off') }}
}
BTW, using picture has precedence over icon and icon_color, so you can remove them.
1 Like
popup_cards:
light.all_lights:
title: All Lights
card:
type: entity-filter
entities:
- light.ambilight_wled
- light.bedroom_light
- light.cabinet_lights
- light.entryway
- light.front_lights
- light.kitchen
- light.living_room
- light.minecraft_wled
- light.mirrorlight
- light.wled
- light.office_ambient
- light.office_led_strip
- light.office_lights
state_filter:
- 'on'
this shows a popup card using browser mod of only lights that are on in that list.
7 Likes
Animated SVG icons do not work for me using your method.
type: custom:mushroom-template-card
primary: light.arbeitszimmer
icon: ''
picture: /local/3D-printing.svg
entity: light.arbeitszimmer_deckenleuchte
secondary: ''
Weird, are you able to share your SVG and I can test here?
You can grab the animated weather icons I used here:
4 Likes
Funny, the SVGs you recommended work. I donât know why the SVG I have didnât work.
Works: rainy.svg (from the Free animated SVG weather icons - amCharts)
Does not work: deckenleuchte2_an.svg (Link: https://file.io/cDxOiCKbcF6X)
But I have found another (less user-friendly) solution for animated icons: Animated SVG Icon - Album on Imgur
love that - is there any way you can get the effect to apply for a few seconds only when an entity changes state ?
I everything I tried so far applies the effect on page load too⊠but Iâm not sure if itâs actually possible to only apply it when the state changes (after the page has loaded).
card_mod:
style: |
ha-card {
{{ 'filter: grayscale(100%);' if is_state('input_boolean.futbol', 'off') }}
}
Iâm using this with a person card, is there a way to keep the (away) badge the original (red) color?
1 Like
Thank you so much!!! This works great!
picture: |
{% if is_state('climate.john_s_device', 'cool') %}
/local/animated/spinning.gif
{% else %}
/local/animated/afan.gif
{% endif %}
1 Like
Iâm replying to my own post to show my solution.
I was trying to find a way to combine a conditional chip and a template chip together, so that I could display the below template chip ONLY if the AC is turned on and actively cooling.
I found a solution with the help of this older post # 195 (thanks @pedolsky!) that had worked on the same issue, modified for my purposes.
Also tagging @berkans who had liked my earlier post and presumably was also looking for a solution to this.
The solution requires the card-mod addon installed.
Using card-mod, I have two Air Conditioner template chips - but each will only appear if that particular AC is turned on. See below if this is something youâd like to achieve!
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:snowflake
icon_color: blue
content: |
Bedroom AC on / Set to {{ state_attr('climate.bedroom_ac', 'temperature') }}°
tap_action:
action: toggle
card_mod:
style: |
:host {
display:
{%- if states('climate.bedroom_ac') == 'cool' %}inline;
{%- else %}none
{%- endif %}
- type: template
icon: mdi:snowflake
icon_color: blue
content: |
Living Room AC on / Set to {{ state_attr('climate.living_room_ac', 'temperature') }}°
tap_action:
action: toggle
card_mod:
style: |
:host {
display:
{%- if states('climate.living_room_ac') == 'cool' %}inline;
{%- else %}none
{%- endif %}
4 Likes
Love the new climate card but I have a problem with my thermostat setup that is a x-comfort 12channel controller for water heating.
This is not a regular thermostat and the hvac-modes does not set the states automatic. This has to be done manually. How can this be done in the new climate card?
To get a button glow on press you could try something like this:
type: custom:mushroom-template-card
primary: Activate
secondary: null
icon: mdi:radioactive
icon_color: red
hold_action:
action: none
card_mod:
style: |
ha-card:active {
box-shadow: 0 0 20px red;
}
5 Likes
Your SVG does animate, it just does it once. The SVG animation needs to loop/repeat.
You can do that like this:
card_mod:
style: |
mushroom-shape-avatar {
filter: grayscale(100%);
}
1 Like
I tried this, unfortunately this doesnât work.
- type: custom:mushroom-person-card
entity: person.step
primary_info: none
secondary_info: none
use_entity_picture: true
card_mod:
style: |
mushroom-shape-avatar {
filter: grayscale(100%);
}
Nothing changed, I expected it to always be grayscale, also tried it with this:
{{ 'filter: grayscale(100%);' if is_state('person.step', 'not_home') }}
The above works on the entire card (including the badge using ha-card without card_mod), but not on âmushroom-shape-avatarâ.
Any ideas? Itâs like it is not recognizing the mushroom-shape-avatar.
Hi rhysb,
im little bit struggling with your code. Im trying to use your code and just changed the entities, but im always getting this result:
Do you have an idea whats wrong here?
type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.docker_cpu
color: rgb(255, 87, 34)
max: 90
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
legend:
show: false
chart:
height: 240
- type: custom:mushroom-entity-card
entity: sensor.docker_cpu
primary_info: state
secondary_info: name
name: CPU Temp
icon_color: deep-orange
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -90px;
width: 140px;
margin-left: auto;
margin-right: auto;
}
That works like a charm. Thank you very much.
I have a last question and I think that question could also interest others as well.
Can we change the color of the chip picture depending on the state ?
For example an air condition. I have a white picture of an air condition.
So can the color of this picture change depending on whether its on âcoolâ state or other. I would like it to be red when itâs on heat mode and blue when on cool.
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.ana_sayfa_menu
state: 'off'
chip:
type: template
entity: climate.146235046506144_climate
icon: mdi:home-thermometer
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state=='cool' %}
blue
{% elif state=='heat' %}
red
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card {
--chip-icon-size: 22px;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 15px;
margin-left: 15px;
margin-bottom: -auto;
width: 400px;
}
alignment: start
I know I can easily change it with using conditional card but I guess card mode will be a shorter way.
1 Like