rhysb
December 10, 2022, 9:43pm
4396
Yes, this is how I use it for my Christmas Tree.
Mushroom Animated Christmas Tree Light:
type: custom:stack-in-card
cards:
- type: custom:mushroom-light-card
entity: light.christmas_tree
icon: mdi:pine-tree
use_light_color: true
show_brightness_control: true
show_color_temp_control: false
show_color_control: true
collapsible_controls: true
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
- type: custom:mushroom-template-card
icon: mdi:star-four-points
icon_color: yellow
primary: Star
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: star 8s ease infinite alternate;
}
@keyframes star {
0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -120px;
--ha-card-border-width: 0;
}
- type: custom:mushroom-template-card
icon: mdi:grain
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: flash 2s steps(1) infinite, lights 2s infinite;
clip-path: polygon(51% 15%, 24% 74%, 74% 74%);
}
@keyframes flash {
50% { transform: rotateY(180deg); }
}
@keyframes lights {
0%, 100% {--icon-color: rgb(var(--rgb-red)); }
6.25% { --icon-color: rgb(var(--rgb-deep-orange)); }
12.5% { --icon-color: rgb(var(--rgb-orange)); }
18.75% { --icon-color: rgb(var(--rgb-amber)); }
25% { --icon-color: rgb(var(--rgb-yellow)); }
31.25% { --icon-color: rgb(var(--rgb-lime)); }
37.5% { --icon-color: rgb(var(--rgb-light-green)); }
43.75% { --icon-color: rgb(var(--rgb-green)); }
50% { --icon-color: rgb(var(--rgb-teal)); }
56.25% { --icon-color: rgb(var(--rgb-cyan)); }
62.5% { --icon-color: rgb(var(--rgb-light-blue)); }
68.75% { --icon-color: rgb(var(--rgb-blue)); }
75% { --icon-color: rgb(var(--rgb-indigo)); }
81.25% { --icon-color: rgb(var(--rgb-deep-purple)); }
87.5% { --icon-color: rgb(var(--rgb-purple)); }
93.75% { --icon-color: rgb(var(--rgb-pink)); }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -186px;
--ha-card-border-width: 0;
}
- type: custom:mushroom-template-card
icon: mdi:gift
icon_color: red
entity: light.christmas_tree
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: surprise 4s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-2px) rotate(-27deg); }
5% { transform: translateY(-2px) rotate(21deg); }
7.5% { transform: translateY(-2px) rotate(-15deg); }
10% { transform: translateY(-2px) rotate(9deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-1.2px) }
}
.shape {
--shape-color: none;
--icon-size: 18px;
top: 18px;
left: 18px;
}
.: |
ha-card {
width: 66px;
top: -252px;
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card {
{{ 'height: 120px;' if is_state('light.christmas_tree', 'on') else 'height: 66px;' }}
{% set r = state_attr('light.christmas_tree', 'rgb_color')[0] %}
{% set g = state_attr('light.christmas_tree', 'rgb_color')[1] %}
{% set b = state_attr('light.christmas_tree', 'rgb_color')[2] %}
background-color: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
}
4 Likes
rhysb
December 10, 2022, 9:54pm
4397
Why don’t you just create an input_boolean helper for the on/off state?
thank you. i had a look in this code.
1 Like
rolfokevin
December 11, 2022, 2:33am
4399
You are an absolute wizard
2 Likes
No one who can help me. Thank you very much
eggman
December 11, 2022, 8:36am
4401
I have used this way to control the colours of state on and off in my picture element cards
- entity: cover.kitchen_curtain
style:
'--paper-item-icon-active-color': orange
'--paper-item-icon-color': green
left: 44%
top: 4%
tap_action:
action: toggle
type: state-icon
The paper-item-icon css is a breaking change. Unfortunately there is no description of how do define these colours anymore.
I am sure there is a way.
This is a really annoying breaking …
Lots of different ways, but a theme seems best, take a look at the thread and the post marked as the answer.
1 Like
Simone77
December 11, 2022, 8:43am
4402
Hi Rhys,
Do you have any tip to hide those?
Thanks!
1 Like
cob94440
December 11, 2022, 8:57am
4403
Nice job. Instead of currently playing entity wich doesn’t let me control music and speakers how can i make one card with multiple players?
1 Like
rhysb
December 11, 2022, 9:29am
4405
Oops, forgot to check the default theme. Add --chip-border-width: 0; to the bottom like this:
.: |
mushroom-template-chip:not(:first-child) {
--chip-background: none;
--chip-box-shadow: none;
--chip-border-width: 0;
}
2 Likes
wgumaa
December 11, 2022, 9:42am
4406
Thanks that worked beautifully!
1 Like
Tyfoon
December 11, 2022, 9:45am
4407
@rhysb love these but have a question;
Most of your designs & code you create a version that works with a ‘dark’ and ‘light’ theme modes. However that option only seems to work if you use the default HASS theme. If you have a custom theme like mine (Noctis, which has many dark colors) and I implement this card for example it reverts to the ‘light’ version of your card and I still have not found a way to trick the theme to HASS thinks it’s dark. So with the example above (Mushroom Media Player Ultrablur Background with Idle Art) I get the left but want to right (dark version).
I guess there is something in your code that checks light/dark. Could you tell me how to ‘trick it’ so it forces dark even tough the theme is not aware?
1 Like
HI All
I am trying to have an icon change its animation based on the weather. So, for example, when its sunny, it uses the sunny animation, and when it’s raining, it used the raining animation.
I have got it working with the weather-sunny icon, but when I do the weather-rain, it produces a funny result
See below
type: custom:mushroom-template-card
primary: '{{states(''sensor.highett_short_text_0'' ) }}'
secondary: ''
icon: '{{states(''sensor.highett_mdi_icon_0'') }}'
icon_color: |-
{% if is_state('sensor.highett_mdi_icon_0', 'mdi:weather-sunny') %}
yellow
{% elif is_state('sensor.highett_mdi_icon_0', 'mdi:weather-rainy') %}
blue
{% endif %}
card_mod:
style: |
mushroom-shape-icon {
{% set weather = states('sensor.highett_mdi_icon_0') %}
{% if weather == 'mdi:weather-sunny' %}
--card-mod-icon: mdi:weather-sunny;
animation: sunny 8s ease-in-out infinite alternate;
{% elif weather == 'mdi:weather-rainy' %}
--card-mod-icon: mdi:weather-rainy;
animation: cloudy 10s ease-in-out infinite, rain 1.5s infinite;
{% endif %}
display: flex;
}
@keyframes sunny {
70% { transform: rotate(360deg) scale(1); }
80% { transform: scale(1); }
90% { transform: scale(1.15); }
100% { transform: scale(1); }
}
@keyframes cloudy {
0%, 100% { transform: translateX(3px); }
30% { transform: translateX(-1px); }
45% { transform: translateX(1.5px); }
75% { transform: translateX(-3.2px); }
}
@keyframes rain {
50% { clip-path: polygon(0 0, 100% 0, 100% 73%, 71% 73%, 50% 39%, 29% 73%, 0 73%); }
}
@keyframes moon {
0%, 100% { transform: rotate(12deg); }
30% { transform: rotate(-6deg); }
45% { transform: rotate(8deg); }
75% { transform: rotate(-10deg); }
}
@keyframes stars {
0%, 3.1%, 14.1% { clip-path: inset(0 0 0 0); }
3% { clip-path: polygon(1% 1%, 0% 99%, 99% 100%, 99% 62%, 68% 62%, 62% 44%, 76% 34%, 100% 34%, 99% 0%); }
14% { clip-path: polygon(1% 1%, 0% 99%, 99% 100%, 100% 25%, 51% 45%, 38% 34%, 36% 0); }
}
Thanks
Mosher
December 11, 2022, 11:19am
4409
Amazing! thank you so much!
1 Like
Mosher
December 11, 2022, 1:44pm
4410
I have modified it a little bit to make a tree green .
OFF
@rhysb Thanks a lot again
Here is card-yaml:
type: custom:stack-in-card
cards:
- type: custom:mushroom-light-card
entity: light.christmas_lights
icon: mdi:pine-tree
use_light_color: true
show_brightness_control: true
show_color_temp_control: false
show_color_control: true
collapsible_controls: true
- type: custom:mushroom-template-card
icon: mdi:pine-tree
icon_color: green
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -120px;
}
- type: custom:mushroom-template-card
icon: mdi:star-four-points
icon_color: yellow
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: star 8s ease infinite alternate;
}
@keyframes star {
0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -186px;
}
- type: custom:mushroom-template-card
icon: mdi:grain
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: flash 2s steps(1) infinite, lights 2s infinite;
clip-path: polygon(51% 15%, 24% 74%, 74% 74%);
}
@keyframes flash {
50% { transform: rotateY(180deg); }
}
@keyframes lights {
0%, 100% {--icon-color: rgb(var(--rgb-red)); }
6.25% { --icon-color: rgb(var(--rgb-deep-orange)); }
12.5% { --icon-color: rgb(var(--rgb-orange)); }
18.75% { --icon-color: rgb(var(--rgb-amber)); }
25% { --icon-color: rgb(var(--rgb-yellow)); }
31.25% { --icon-color: rgb(var(--rgb-lime)); }
37.5% { --icon-color: rgb(var(--rgb-light-green)); }
43.75% { --icon-color: rgb(var(--rgb-green)); }
50% { --icon-color: rgb(var(--rgb-teal)); }
56.25% { --icon-color: rgb(var(--rgb-cyan)); }
62.5% { --icon-color: rgb(var(--rgb-light-blue)); }
68.75% { --icon-color: rgb(var(--rgb-blue)); }
75% { --icon-color: rgb(var(--rgb-indigo)); }
81.25% { --icon-color: rgb(var(--rgb-deep-purple)); }
87.5% { --icon-color: rgb(var(--rgb-purple)); }
93.75% { --icon-color: rgb(var(--rgb-pink)); }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -252px;
}
- type: custom:mushroom-template-card
icon: mdi:gift
icon_color: red
entity: light.christmas_lights
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: surprise 4s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-2px) rotate(-27deg); }
5% { transform: translateY(-2px) rotate(21deg); }
7.5% { transform: translateY(-2px) rotate(-15deg); }
10% { transform: translateY(-2px) rotate(9deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-1.2px) }
}
.shape {
--shape-color: none;
--icon-size: 18px;
top: 18px;
left: 18px;
}
.: |
ha-card {
width: 66px;
top: -318px;
}
card_mod:
style: |
ha-card {
{{ 'height: 120px;' if is_state('light.christmas_lights', 'on') else 'height: 66px;' }}
{% set r = state_attr('light.christmas_tree', 'rgb_color')[0] %}
{% set g = state_attr('light.christmas_tree', 'rgb_color')[1] %}
{% set b = state_attr('light.christmas_tree', 'rgb_color')[2] %}
background-color: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
}
4 Likes
hello, can you show your code? thank you
rhysb
December 11, 2022, 8:36pm
4412
That is because you are trying to animate mushroom-shape-icon which includes the Icon Shape (shaded circle around the icon). You will need to animate just the ha-icon. At the moment you are trying to change the Icon in two places, with a template in icon: and then with --card-mod-icon: in the CSS. Change the icon with icon: and icon_color: and then do just the animation with card_mod.
rhysb
December 11, 2022, 8:58pm
4413
That is because Noctis only has a ‘light’ mode. You could try changing the following line.
From this:
background: url( '{{ state_attr("media_player.currently_playing", "entity_picture") }}' ), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 50%);
To this:
background: url( '{{ state_attr("media_player.currently_playing", "entity_picture") }}' ), linear-gradient(to left, transparent, var(--ha-card-background) 50%);
1 Like
I really like the chips, if that’s the right word for it, on the future concept. Has anyone done anything similar?
rhysb
December 12, 2022, 3:31am
4415
Do you mean like this?
type: custom:mushroom-chips-card
chips:
- type: template
entity: climate.office_air_conditioner
icon: mdi:thermometer
icon_color: red
content: |-
Climate
{{ state_attr(entity, 'temperature') | round(1) }} °C
card_mod:
style: |
ha-card {
padding: 5px;
}
.content {
white-space: pre-wrap;
}
- type: template
icon: mdi:lightbulb
content: |-
Lights
{{ expand(states.group.all_lights) | selectattr( 'state', 'eq', 'on') |
list | count }} On
entity: group.all_lights
icon_color: yellow
tap_action:
action: none
card_mod:
style: |
ha-card {
padding: 5px;
{{ '--chip-background: rgba(var(--rgb-yellow), 0.2);' if is_state(config.entity, 'on') }}
}
.content {
white-space: pre-wrap;
}
- type: template
icon: '{{ ''mdi:lock'' if is_state(entity, ''locked'') else ''mdi:lock-open'' }}'
content: |-
Security
{{ expand(states.group.all_locks) | selectattr( 'state', 'eq', 'unlocked') | list | count }} Unlocked
entity: group.all_locks
icon_color: '{{ ''green'' if is_state(entity, ''locked'') else ''red'' }}'
tap_action:
action: none
card_mod:
style: |
ha-card {
padding: 5px;
}
.content {
white-space: pre-wrap;
}
13 Likes
