Christmas is comming soon 
im Looking for a Switch for my Christmas Tree Animation Icon. Has anyone something like this?
@ rhysb
Thx Martin
@rhysb - Thanks for the amazing animation collection!
Is it possible to trigger animation only when a mushroom-template-card is tapped? - Rather than based on the state on an entity?
Iād like to just run a short animation once when the card is tapped, as a visual feedback - but as they are for scenes, iām not sure how to trigger the animation, since the scene doesnāt have a state that goes on/off.
Excellent! Please share your code.
I like your bearing rotation using card mod! I use 8 different mdi icons and a simple calculation instead, but I prefer your solution. Iāve got 2 chips for wind info, but the arrow icon and state info could be merged into one:
Code
type: custom:mushroom-chips-card
chips:
- type: template
icon: >-
{% if ((states('sensor.openweathermap_wind_speed')|float / 0.836)**(2/3))
| round() > 6 %} mdi:windsock {% else %} mdi:weather-windy {% endif %}
icon_color: grey
content: >-
{{((states('sensor.openweathermap_wind_speed')|float / 0.836)**(2/3)) |
round()}} Bft
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--mush-rgb-grey), 0.2);
}
- type: template
icon: >-
{% set dir = (states('sensor.openweathermap_wind_bearing')|int)/45 %} {%
if dir > 0.5 and dir <= 1.5 %} mdi:arrow-bottom-left {% elif dir > 1.5 and
dir <= 2.5 %} mdi:arrow-left {% elif dir > 2.5 and dir <= 3.5 %}
mdi:arrow-top-left {% elif dir > 3.5 and dir <= 4.5 %} mdi:arrow-up {%
elif dir > 4.5 and dir <= 5.5 %} mdi:arrow-top-right {% elif dir > 5.5 and
dir <= 6.5 %} mdi:arrow-right {% elif dir > 6.5 and dir <= 7.5 %}
mdi:arrow-bottom-right {% else %} mdi:arrow-down {% endif %}
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--mush-rgb-grey), 0.2);
}
alignment: start
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-border-radius: var(--mush-control-border-radius);
--chip-height: 38px;
}
3 Likes
oes anyone know if I can fix this myself.
Once I add the card-mod: to a mushroom card. Iām unable to use the visual editor in any way.
type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.dsmr_day_consumption_total_cost
icon: mdi:currency-eur
content: '{{ (states("sensor.dsmr_day_consumption_total_cost")) }}'
card_mod:
style: |
ha-card {
{% set daily_cost = (states("sensor.dsmr_day_consumption_total_cost") | float) %}
--text-color:
{% if daily_cost >= 20 %}
rgb(var(--rgb-red))
{% elif daily_cost >= 15 %}
rgb(var(--rgb-orange))
{% else %}
rgb(var(--rgb-white))
{% endif %};
}
Or is this on purpose.
I get the following message:
Visual editor is not supported for this configuration:
- At path: chips.0.card_mod ā Expected a value of type
never, but received:[object Object]You can still edit your config in YAML.
Move the card_mod part to the left to align it with type: custom:mushroom-chips-card
Edit: I think your code is fine and my proposal is nonsense, I have the same warning message and cannot edit in visual mode with my wind chips
There is this oneā¦
ā¦bottom of part 3
Iāll add one with lights when I get a chance.
Edit: And Iāve added one with Christmas lights to Part 5
7 Likes
You would need to use the complex CSS selector on the Chips as apposed to the Chip. Have a look here:
I would configure the Chip, then apply the card_mod.
1 Like
Yes, have a look at the Active animation at the bottom of Part 2. You can replace the animations with whatever you prefer.
Are there finer colors for light colors? For example like this:
Currently I cant really control the saturation, its just picking solid full colors
Hey @theandouz, I thought Iād revisit this and see if I could replicate the Plexamp Ultrablur.
Mushroom Media Player with Ultrablur:
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.currently_playing
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
media_controls:
- play_pause_stop
- previous
- next
volume_controls:
- volume_buttons
- volume_set
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
display: flex;
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
--card-mod-icon: mdi:television-classic;
animation: flicker 1s linear infinite alternate;
{% elif media_type == 'movie' %}
--card-mod-icon: mdi:movie-roll;
animation: spin 2s linear infinite reverse;
{% elif media_type == 'music' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% elif media_type == 'playlist' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% else %}
--card-mod-icon: mdi:play;
{% endif %}
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
--ha-card-border-width: 0;
}
- type: conditional
conditions:
- entity: media_player.currently_playing
state_not: 'off'
- entity: media_player.currently_playing
state_not: idle
card:
entity: media_player.currently_playing
hide:
icon: true
name: true
runtime: true
source: true
power: true
state_label: true
volume: true
info: true
progress: false
controls: true
more_info: false
type: custom:mini-media-player
toggle_power: false
group: true
card_mod:
style:
mmp-progress$: |
paper-progress {
{{ '--paper-progress-container-color: rgba(var(--rgb-indigo-color), 0.2) !important;' if is_state(config.entity, 'playing') }}
}
.: |
ha-card {
margin: 0px 12px 12px;
--mmp-progress-height: 12px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(var(--rgb-indigo-color));
--mmp-border-radius: 12px !important;
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
{% if not is_state('media_player.currently_playing', 'idle') %}
background: url( '{{ state_attr('media_player.currently_playing', "entity_picture") }}' ) center no-repeat;
{% endif %}
filter: blur(150px) saturate(400%);
background-size: cover;
}
9 Likes
Were you ever able to get this figured out? Iāve seen this on Dwains dashboard and would love to see a custom dashboard in mushroom.
Thanks
Hi,
is there a solution to open an external link (template) from a Mushroom card, maybee as tap_action? I want to open the standard pages for some intergrations or systems. For example show the NAS webpage from NAS entity card, open the router web front end or external service page / app for some intergrations (Ring, Google etc.) which do not allow iframes.
Thanks, Steffen
Iāve have changed the look of the wind-chip, although iām not 100% content.
Perhaps i should intergrate a custom iconā¦
Hereās the code:
type: template
icon: mdi:navigation-variant
card_mod:
style: |
ha-card
{
--chip-icon-size: var(--chip-icon-size);
}
ha-card:after {
content: "{{ state_attr('sensor.knmi_home_wind', 'beaufort') | round(0) }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: var(--icon-color);
color: var(--card-background-color);
font-weight: bold;
border-radius: 50%;
top: 12px;
right: 14.66px;
width: 12px;
height: 12px;
font-size: 10px;
}
.content {
transform: rotate({{state_attr('sensor.knmi_home_wind', 'graden')-45 | round(0)}}deg);
}
1 Like
Be ashamed I do not saw that, but problem I can not template the URL?!
I want to jump to special pages dependent on state or use dynamic url from a entity attribute.
Thanks, Steffen
You could probably do the first one.
Use a mushroom template card, use the entity you want more-info for as the entity. Use your other entity to populate the rest of the card.
Iāve not tried it, but I think you can template the URL when you use the mushroom template card.