Thanks @TommyWelle and @paddy0174 ! Now it works!
@Stuartie
Love it.
I canât work out how to define sensor.count_living_room_lights_on in your code below
Can you help?
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Living Room
secondary: â{{ states(ââsensor.thermostat_1_current_temperatureââ) }} °Câ
icon: mdi:sofa
entity: light.living_room_lights
icon_color: |-
{% if is_state(âlight.living_room_lightsâ, âonâ) %}
orange
{% endif %}
hold_action:
action: toggle
tap_action:
action: navigate
navigation_path: livingroom
badge_icon: |-
{% if is_state(âsensor.count_living_room_lights_onâ, â0â) %}
{% elif is_state(âsensor.count_living_room_lights_onâ, â1â) %}
mdi:numeric-1
{% elif is_state(âsensor.count_living_room_lights_onâ, â2â) %}
mdi:numeric-2
{% elif is_state(âsensor.count_living_room_lights_onâ, â3â) %}
mdi:numeric-3
{% elif is_state(âsensor.count_living_room_lights_onâ, â4â) %}
mdi:numeric-4
{% elif is_state(âsensor.count_living_room_lights_onâ, â5â) %}
mdi:numeric-5
{% elif is_state(âsensor.count_living_room_lights_onâ, â6â) %}
mdi:numeric-6
{% elif is_state(âsensor.count_living_room_lights_onâ, â7â) %}
mdi:numeric-7
{% elif is_state(âsensor.count_living_room_lights_onâ, â8â) %}
mdi:numeric-8
{% elif is_state(âsensor.count_living_room_lights_onâ, â9â) %}
mdi:numeric-9
{% else %}
mdi:numeric-9-plus
{% endif %}
badge_color: orange
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host {
z-index: 1;
} - type: custom:mushroom-chips-card
chips:- type: conditional
conditions:- entity: binary_sensor.living_room_motion_sensor_occupancy
state: âonâ
chip:
type: template
icon_color: green
icon: mdi:window-open-variant
- entity: binary_sensor.living_room_motion_sensor_occupancy
- type: conditional
conditions:- entity: binary_sensor.living_room_window
state: âonâ
chip:
type: template
icon_color: red
icon: mdi:motion-sensor
alignment: end
card_mod:
style: |
ha-card {
âchip-box-shadow: none;
âchip-background: none;
âchip-spacing: 0;
top: -36px;
z-index: 0;
}
card_mod:
style: |
ha-card {
height: 66px;
}
- entity: binary_sensor.living_room_window
- type: conditional
Sorry for the late reply but this worked! Thanks alot!
put your code between Preformatted text
Sorry I donât understand - maybe my question was not clear
I wanted to know how we can declare sensor.count_living_room_lights_on
I tried in yaml but my coding is very bad and it does not work but I guess there might be a better way to define it somewhere else?
see my configuration.yaml code
sensor:
- platform: google_wifi
- platform: template
sensors:
count_living_room_lights_on:
friendly_name: â# Living Room Lights onâ
unit_of_measurement: âonâ
value_template: â{{ expand(state_attr(âlight.living_room_lightsâ, âentity_idâ) ) | selectattr(âstateâ, âeqâ, âonâ) | list | count }}â
No, the problem is, you need to format the code in your post properly. We canât help you, as long as you post the code like a written text. Itâs not that we donât want to, but YAML is very dependent on indentation. A small white space to much, and your code wonât work.
See here for how to post your code properly formatted:
So please post your code properly formatted, so we can have a look for errors.
Hello
A new Mushroom release is out with Assist action support : Release v3.0.0 · piitaya/lovelace-mushroom · GitHub
This release is a major version change because it has breaking change for
card_mod
users
Mushroom cards and chips now uses
ha-state-icon
instead ofha-icon
. You should update yourcard_mod
overrides to reflect that change.
With the new version and this breaking change, how would the following code need to be fixed?
I originally thought if I changed âha-iconâ to âha-state-iconâ this may be it. But it doesnât seem to be that easy
card_mod:
style:
mushroom-shape-icon$: |
{% if is_state('switch.office_monitor','on') %}
ha-icon {
--icon-animation: power 1.5s infinite;
}
@keyframes power {
0%, 100% { clip-path: inset(0 0 0 0); }
50% { clip-path: polygon(0 0, 42% 0, 42% 58%, 58% 58%, 58% 0, 100% 0, 100% 100%, 0 100%); }
}
{% else %}
{% endif %}
}
Yup, same situation. Tried to replace âha-iconâ to âha-state-iconâ but it does not work. I too would like to know how to fix this.
type: custom:mushroom-template-card
primary: Fan
secondary: |-
{% if states(config.entity)=='on' %}
On
{% else %}
Off
{% endif %}
icon: mdi:fan
icon_color: |-
{% if states(config.entity)=='on' %}
light-blue
{% endif %}
entity: switch.fan
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
badge_color: ''
badge_icon: ''
layout: horizontal
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: spin 1s linear infinite;' if is_state('switch.fan', 'on') }}
}
Also, @Murder3D.
This worked for me. Not sure how I figured out how to get it to work.
type: custom:mushroom-template-card
primary: Robot
icon: mdi:robot-outline
icon_color: deep-purple
entity: input_boolean.tester
card_mod:
style: |
ha-state-icon {
animation: rotation linear infinite 3s;
}
@keyframes rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg);}
}
I think this should work
card_mod:
style:
.: |
{% if is_state('switch.office_monitor','on') %}
ha-state-icon {
--icon-animation: power 1.5s infinite;
}
@keyframes power {
0%, 100% { clip-path: inset(0 0 0 0); }
50% { clip-path: polygon(0 0, 42% 0, 42% 58%, 58% 58%, 58% 0, 100% 0, 100% 100%, 0 100%); }
}
{% endif %}
Or this
card_mod:
style: |
{% if is_state('switch.office_monitor','on') %}
ha-state-icon {
--icon-animation: power 1.5s infinite;
}
@keyframes power {
0%, 100% { clip-path: inset(0 0 0 0); }
50% { clip-path: polygon(0 0, 42% 0, 42% 58%, 58% 58%, 58% 0, 100% 0, 100% 100%, 0 100%); }
}
{% endif %}
type: custom:mushroom-template-card
primary: Weeeee!
icon: mdi:pinwheel
icon_color: green
card_mod:
style: |
ha-state-icon {
animation: rotation 1s linear infinite;
}
@keyframes rotation {
100% {transform: rotate(360deg);
}
}type: ââ
#################################
OK
I had the same issue and I had to clear the cache in the app.
On Android: System Settings > Apps > Home Assistant > Storage & cache
On iOS: Home Assistant > Settings > Companion App > Debugging > Reset Frontend Cache
Both: Close and reload the app
OK! Thanks you
hi, is it possible to add shortcuts to the mushroom media player card? for example:
shortcuts:
columns: 4
buttons:
- type: script
name: Qmusic
id: script.play_qmusic_kantoor
- type: script
name: Arrow rock
id: script.play_arrow_rock
- type: script
name: Radio 10
id: script.play_radio_10
- type: script
name: Radio 538
id: script.play_radio_538
I apprecite that this is a fairly broad question but something is holding back my adoption of some of the great multi-faceted Mushroom cards in this thread.
Why are Mushroom template cards are seemingly so resource intensive ?
As soon as I deploy them my resource use rockets to the point that a R Pi4 become unusable and a VM on Proxmox with 2 cores from an i7 and 8GB slows too.
Is there an obvious explanation for this and/or a way to mitigate it beyond just throwing more and more horsepower at the problem ?
Edited to send an @ to @piitaya who is the founding father @rhysb who has been the most remarkable adopter !
Hello
Since version 3.0.1 my icons on the home assistant application are not centered.
They are centered on the Web version.
Do you have any idea whatâs wrong ?
I have a similar piece of code that I just havenât been able to get working since the update. I swapped out ha-icon to ha-state-icon and for some reason this one icon doesnât animate while other ones with similar code do
card_mod:
style:
mushroom-shape-icon:
$: |
.shape ha-state-icon
{
{{ '--icon-animation: rotation 1s linear infinite;' if not is_state('climate.bedroom_ac', 'off') }}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@shogun168 I had similar issue and was advised to strip it back toâŠ
card_mod:
style: |
mushroom-shape-icon {
{{ '--icon-animation: ....
}
There didnât seem to be a need for the $ and ha-state-icon and the | can go after the style.
Hope that works for you too.