PLs insert code
Hope you are willing to share this, so it can be implemented before season starts 
Can anyone help me with this?
1 Like
been working on the chips animation, really cool feature 
. Still wondering why the animation doesnāt seem to do anything (I think it has to do with the background color that isnāt present on the chips ? or something)
alignment: end
chips:
- type: light
entity: light.hue_filament_bulb_4
content_info: none
icon: mdi:ceiling-light
use_light_color: true
- type: light
entity: light.livingroom
content_info: none
icon: mdi:lamp
use_light_color: true
- type: template
entity: media_player.samsung_tv
icon: mdi:monitor
primary: Monitor
icon_color: white
card_mod:
style:
mushroom-template-chip:nth-child(3)$: |
ha-icon {
margin: 6%;
animation: refresh 300ms linear infinite;
}
@keyframes refresh {
0% { background: linear-gradient(180deg, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 0%, transparent 50%, transparent 100%); }
25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 25%, transparent 100%); }
50% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 50%, transparent 100%); }
75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 75%, transparent 100%); }
100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 100%); }
}
Basically this show a static televisionā¦
Changing the animation for other animation found in this thread, thanks @ [rhysb] (Profile - rhysb - Home Assistant Community) <3, it seems to be workingā¦ But I would love to conditionally display an animation when the media player (television) is on.
1 Like
Is there a way to set this up so the badge only shows when the count is greater than 0? ie. no badge when all are off?
https://drive.google.com/drive/folders/1Wr8LdZD9gyrMyPXyCmwCFW9OXMdaJskX?usp=sharing
Here it is my friend, sorry I forget about it!
So this concept is 100% what I am trying to build.
Is this partially possible at this point in time with Mushroom, or is it purely concept at this point in time?
If it is possible, Iād love to have a talk about this so I can try to bring this concept to reality.
Having a brain fart with animations, they donāt seem to be working on my iPad dashboard. Any idea why this wouldnāt be working for the basic lightbulb animation, is it an iOS thing?
mushroom-shape-icon$: |
ha-icon {
--icon-animation: illumination 2s infinite;
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
Yes, you can put a condition around content: like this:
type: custom:mushroom-chips-card
chips:
- type: template
entity: group.all_lights
icon: mdi:lightbulb
icon_color: amber
card_mod:
style: |
ha-card:after {
{% set lights_on = (expand(states.group.all_lights) | selectattr('state', 'eq', 'on') | list | count) %}
{% if lights_on > 0 %}
content: "{{ lights_on }}";
{% endif %}
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
3 Likes
So I figured out why the blur isnāt working on iOS. The āfilter: blur(150px)ā has to be 97px or less, then it works.
1 Like
You could try -webkit-clip-path instead of clip-path.
Thatās great! I have another solution that I will post tonight.
1 Like
You should be able to most of that with Mushroom and card_mod now.
1 Like
Very nice, thanks
For the blur to work correctly on iOS we need to enable HW acceleration. To do that we can add the following lines:
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
Once we add it to the Mushroom Media Player we have:
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 {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
{% if not is_state('media_player.currently_playing', 'idle') %}
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url( '{{ state_attr('media_player.currently_playing', "entity_picture") }}' ) center no-repeat;
filter: blur(150px) saturate(400%);
background-size: 100% 100%;
{% endif %}
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
--ha-card-border-width: 0;
{% if not is_state('media_player.currently_playing', 'idle') %}
background: url( '{{ state_attr("media_player.currently_playing", "entity_picture") }}' ), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 50%);
{% if state_attr('media_player.currently_playing', 'media_content_type') == 'tvshow' %}
background-size: auto 100%, cover;
{% else %}
background-size: 50% auto, cover;
{% endif %}
background-position: right;
background-repeat: no-repeat;
background-blend-mode: saturation;
{% endif %}
}
Thanks to @theandouz for help to track down the issue and testing 
4 Likes
Hi,
how could I use this weather icon package with the Mushroom Template card? I would like to make my own weather card with template card and with this icon set.
Thanks in advanced!
Here is a version with full artwork that would suit a tablet layout. It dynamically adjusts to the aspect ratio of the media, but you can fix it to a square aspect ratio with aspect-ratio: 1 / 1;.
Mushroom Media Player Blurred Album Art Tablet Mode:
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 %}
{{ 'animation: none;' if not is_state(config.entity, 'playing') }}
}
@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;
}
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/idle_art.png') center no-repeat;
{% if not is_state(config.entity, 'idle') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
margin: 4px 4px 16px;
filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
border-radius: var(--control-border-radius);
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
aspect-ratio: 16 / 9;
{% elif media_type == 'movie' %}
aspect-ratio: 2 / 3;
{% else %}
aspect-ratio: 1 / 1;
{% endif %}
}
- 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 {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url('/local/idle_art.png') center no-repeat;
{% 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(200%);
background-size: 100% 100%;
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
Updated with rounded art corners and idle album art.
42 Likes
Wow @rhysb you are a machine! Just want to thank you for your help in this group. Iāve been using HASS for +5 years and mushroom + your tips have changed my look and feel tremendously!
Would you have a solution (or alternative route) for my Q posted here?
1 Like
This is an example I did a while ago. It should get you started.
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: >-
{{ state_attr(entity, 'temperature') | round(1) }} Ā°C
secondary: '{{ states(entity) | title }}'
icon: none
entity: weather.weatherflow_hourly_based_forecast
picture: >-
{% set condition = states(entity) %} {% if condition == 'partlycloudy' and
is_state('sun.sun', 'below_horizon') %}
{% set condition = condition + '-night' %}
{% endif %} /local/weather_icons/anim/{{ condition }}.svg
card_mod:
style: |
ha-card {
--icon-border-radius: 0;
}
1 Like
You can do it like this.
Mushroom Title Single Line:
type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Bathroom
subtitle: >-
{{ states('sensor.bathroom_sensor_temperature') | round(1) }}Ā°C / {{
states('sensor.bathroom_sensor_humidity') | round(1) }}%
card_mod:
style:
mushroom-title-card$: |
.header {
display: table !important;
}
.subtitle {
display: table-cell;
text-align: right;
width: 100%;
}
7 Likes