is it possible to do the same animation inside( towards the icon) rather than outside(away from icon)
Ooh, I love this graph. Curious how to make that visible.
Looks amazing, much better than my current simple bar-graph. Anybody knows how to create it?
Not very Musroom-ish, but still…
Thanks in advance!
5 Likes
Can not help you with the code bur that appears to be a custom mini graph card
Yes, you can do a reverse Mushroom icon ping animation like this:
type: custom:mushroom-template-card
icon: mdi:mushroom
icon_color: red
primary: Mushroom
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: ping 3s infinite reverse;
border-radius: 50%;
}
@keyframes ping {
0% {
box-shadow: 0 0 1px 0px rgba(var(--rgb-red), 0.5);
}
100% {
box-shadow: 0 0 5px 15px transparent;
}
}
2 Likes
Hi @rhysb, absolutely loving your contributions, thank you for sharing your brain with us!
For the scent chip, for some reason, mine is not changing color, its just green the whole time, any ideas why that would be?
Also, how would I apply that to an icon in a mushroom template card? Would it be the same card mod and just change template-chip to ha-card? Or would there be other differences?
Thanks again!
1 Like
A little bit more to it, depending on whether you want the shape to also change color.
Mushroom Card scent animation:
type: custom:mushroom-template-card
primary: How's the serenity?
secondary: So much serenity
icon: mdi:scent
icon_color: green
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: wave 6s infinite;
}
@keyframes wave {
50% {
transform: rotatey(180deg);
--icon-color: rgb(var(--rgb-cyan));
}
}
.: |
mushroom-shape-icon {
animation: shape 6s infinite;
}
@keyframes shape {
50% {
--shape-color: rgba(var(--rgb-cyan), 0.2);
}
}
Share your code for the Chip issue.
2 Likes
thanks for responding quick and excellent skills…
actually animation first glows up and goes in reverse …instead on glowing up first is it possible to animate towards the icon directly (like how it works without reverse)?
wont this works because their is no anchors to start?
Sorry, not sure I follow what you mean. 
sorry !! let me try …if you zoom and look at the animation …First it pushes red (away from icon ) then it’s gets reversed ( towards the icon) .
What i want is it should start from icon shape inner border and animate towards the icon (which will look like reverse from icon perspective)
Hi,
Could you please share your count active climate template?
Kr,
Philippe
Sure, here it is:
- platform: template
sensors:
count_active_climate:
friendly_name: "Verwarming aan"
value_template: "{{ states.climate | selectattr('attributes.hvac_action', 'eq', 'heating') | list | count }}"
1 Like
Could I also get a complete screenshot of your dashboard and share the yaml as well, seems interesting with the swipe.
Hello, thanks for sharing all the possibilities with Mushroom!
I saw some awesome examples of @rhysb and maybe you (or someone else) can help me out:
I have a card (see attached) for my airconditioning. I’d like to have this icon spinning around.
Anyone who can help me out?
type: custom:mushroom-template-card
primary: |2-
{{ states("sensor.3d_printer_power") }} watt |
{{ states("sensor.3d_printer_energy") }} kwh
secondary: hybride/airco
icon: mdi:heat-pump-outline
entity: switch.3d_printer
layout: vertical
multiline_secondary: false
icon_color: green
fill_container: false
tap_action:
action: more-info
1 Like
Hello. how do I reduce the font. custom:mushroom-entity-card
card_mod:
style: |
ha-card {
font-size: 40px;
}
not work
1 Like
Add this to the bottom of your card code:
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: spin 1s linear infinite;
}
Try like this:
card_mod:
style: |
ha-card {
--card-primary-font-size: 10px;
}
Oh, I see. The effect uses box-shadow, which has to originate from the box/icon.
but how only rotation by more dan 21watt
Hey. Firstly thanks for all your hard work. Ive got the following problem with the card. Ive got THIS YT MUSIC PLAYER INTEGRATION installed and this is how i play all my music atm on my google homes. I cant get the buttons “next/previous” to display tho when i play the music via the “yt music player”. If i cast the music from YT music directly to the google home everything works as intended. Any chance u could help with that? Would be awesome!
type: custom:mushroom-media-player-card
entity: media_player.wohnzimmer
use_media_artwork: false
use_media_info: true
media_controls:
- play_pause_stop
- previous
- next
collapsible_controls: true
volume_controls:
- volume_set
- volume_mute
- volume_buttons
show_volume_level: true
fill_container: false
tap_action:
action: toggle
style: |
ha-card {
{% if is_state('media_player.wohnzimmer', 'off') %}
{% else %}
background-image: url( '{{ state_attr( "media_player.wohnzimmer", "entity_picture" ) }}' );
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(var(--rgb-card-background-color),0.8);
background-blend-mode: overlay;
position: relative;
{% endif %}
}
2 Likes
Thanks!!!
And where can I see all the code options?