rhysb
(Rhys)
September 17, 2022, 10:20am
2920
You can kind of do it like this.
Mushroom Chip Badge:
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: group.all_windows
state: 'on'
chip:
type: template
icon: mdi:window-open
content: >-
{{ expand(states.group.all_windows) | selectattr( 'state', 'eq', 'on') |
list | count }}
entity: group.all_windows
icon_color: light-blue
tap_action:
action: none
- type: conditional
conditions:
- entity: group.all_lights
state: 'on'
chip:
type: template
icon: mdi:lightbulb
content: >-
{{ expand(states.group.all_lights) | selectattr( 'state', 'eq', 'on') |
list | count }}
entity: group.all_lights
icon_color: amber
tap_action:
action: none
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
span {
position: relative;
right: 6px;
top: -6px;
width: 0px;
font-size: 10px;
margin-right: -5px;
}
mushroom-conditional-chip:nth-child(2):
mushroom-template-chip$: |
span {
position: relative;
right: 6px;
top: -6px;
width: 0px;
font-size: 10px;
margin-right: -5px;
}
.: |
ha-card {
height: 36px !important;
}
14 Likes
Vandana
(Vandana Dass)
September 17, 2022, 10:28am
2921
Thanks @rhysb for all these animation examples. These are really useful.
There was one animation example from your earlier post.
type: custom:mushroom-template-card
icon: mdi:radiator
icon_color: red
primary: Radiator
secondary: It's HOT!
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: clip 1s linear infinite;
}
@keyframes clip {
0% {
clip-path: inset(50% 0 0 0);
}
100% {
clip-path: inset(0 0 0 0);
}
}
.shape {
--shape-animation: ping 2s infinite;
}
@keyframes ping {
0% {
box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);
}
70% {
box-shadow: 0 0 0 10px transparent;
}
100% {
box-shadow: 0 0 0 0 transparent;
}
}
how can I apply this effect to a mushroom chip template card ?
1 Like
Vandana
(Vandana Dass)
September 17, 2022, 10:40am
2923
@rhysb I meant this kind of effect with red ring glowā¦ please guide
rhysb
(Rhys)
September 17, 2022, 10:53am
2924
You can change the default colors of the Mushroom Climate Card like this:
type: custom:mushroom-climate-card
entity: climate.air_conditioner
show_temperature_control: true
collapsible_controls: false
hvac_modes:
- heat_cool
- heat
- cool
- dry
- fan_only
card_mod:
style: |
:host {
--mush-rgb-state-climate-auto: var(--rgb-green);
--mush-rgb-state-climate-cool: var(--rgb-blue);
--mush-rgb-state-climate-dry: var(--rgb-amber);
--mush-rgb-state-climate-fan-only: var(--rgb-teal);
--mush-rgb-state-climate-heat: var(--rgb-deep-orange);
--mush-rgb-state-climate-heat-cool: var(--rgb-green);
--mush-rgb-state-climate-idle: var(--rgb-grey);
--mush-rgb-state-climate-off: var(--rgb-disabled);
}
5 Likes
rhysb
(Rhys)
September 17, 2022, 11:21am
2925
Ah, you can do that like this.
Mushroom Chip Ping animation:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:mushroom
icon_color: red
card_mod:
style:
mushroom-template-chip:nth-child(1)$:
mushroom-chip$: |
ha-card {
animation: ping 2s ease-out infinite ;
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-red), 1);
}
100% {
box-shadow: 0 0 5px 10px rgba(var(--rgb-red), 0);
}
}
15 Likes
Tim_Knowlden
(Tim Knowlden)
September 17, 2022, 11:22am
2926
100% @rhysb should be making his own custom dashboards or working for nabu casa!
4 Likes
rhysb
(Rhys)
September 17, 2022, 11:31am
2927
5 Likes
Vandana
(Vandana Dass)
September 17, 2022, 11:57am
2928
thank you so much @rhysb
You have really helped alot.
Please tell how to have the same red ring animation effect for mushroom-entity-card
type: custom:mushroom-entity-card
entity: person.myhome
primary_info: none
secondary_info: none
layout: vertical
use_entity_picture: true
Can we change the volume steps when we press volume up or volume down (currently its 5) ?
Kindly guide.
1 Like
Posreg
(Daros)
September 17, 2022, 4:33pm
2930
Seriously, this is insane what you are doing in this thread!
And the animations are just awesome!
2 Likes
gfandrea
(Andrea)
September 17, 2022, 6:20pm
2931
New room setup! Yesā¦ I canāt stopā¦
The base card is the climate card, all in idle now.
The rest are just the most used lights or covers
Other similar things
Code for one card
type: custom:stack-in-card
cards:
- type: custom:mushroom-climate-card
entity: climate.cameradalettoknx
icon: mdi:bed-double-outline
tap_action:
action: navigate
navigation_path: camere
hold_action:
action: more-info
multiline_secondary: true
card_mod:
style: |
:host {
--mush-rgb-state-climate-auto: var(--rgb-deep-purple);
--mush-rgb-state-climate-cool: var(--rgb-deep-purple);
--mush-rgb-state-climate-dry: var(--rgb-deep-purple);
--mush-rgb-state-climate-fan-only: var(--rgb-deep-purple);
--mush-rgb-state-climate-heat: var(--rgb-deep-purple);
--mush-rgb-state-climate-heat-cool: var(--rgb-deep-purple);
--mush-rgb-state-climate-idle: var(--rgb-gray);
--mush-rgb-state-climate-off: var(--rgb-deep-purple);
}
- type: custom:mushroom-chips-card
alignment: end
chips:
- type: light
entity: light.camera_da_letto_knx
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
- type: light
entity: light.lamp1_cloud_180911
content_info: none
icon: mdi:desk-lamp
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
- type: entity
entity: cover.camera_da_letto_tenda_alta_knx
content_info: none
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
18 Likes
Snille
(Erik Pettersson)
September 17, 2022, 8:07pm
2932
Hi all! This thread is a goldmine!
I have a question about the āchipā (using a template). Iām trying to āaddā some information after the āstatusā on the entity in the card. But when I pick the āstatusā manually, itās not translated to the selected language. Is there a way to get the translated status in the template card as well? So it appears the same way as in the unmodified entity card. Here is an example with both cardsā¦
And the actual codeā¦
type: custom:mushroom-chips-card
chips:
- type: template
entity: vacuum.rupert
icon: mdi:robot-mower
content: >
{{ states('vacuum.rupert') }}
- type: entity
entity: vacuum.rupert
content_info: state
alignment: center
Thank you!
Sddawson
September 18, 2022, 4:33am
2934
This is my favourite visualisation of a button press:
card_mod:
style: |
ha-card:active {
transform: scale(1.1);
transition: 0s;
}
A nice subtle āpopā that makes it much more obvious youāve activated an action, especially on a device with no haptics. Iād really like an option on cards for something like this. Thanks again @rhysb !
2 Likes
rhysb
(Rhys)
September 18, 2022, 8:48am
2935
The box-shadow animation for Mushroom Card is different for icon and picture.
Picture:
type: custom:mushroom-entity-card
entity: person.rhys
icon_type: entity-picture
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
animation: ping 2s infinite;
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-green), 0.7);
}
100% {
box-shadow: 0 0 5px 15px transparent;
}
}
Icon:
type: custom:mushroom-entity-card
entity: person.rhys
icon: mdi:face-man
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: ping 2s infinite;
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-blue), 0.7);
}
100% {
box-shadow: 0 0 5px 15px transparent;
}
}
13 Likes
Vandana
(Vandana Dass)
September 18, 2022, 8:50am
2936
thanks alot @rhysb , exactly what I was looking for.
Can we change the volume steps when we press volume up or volume down (currently its 5) ?
1 Like
rhysb
(Rhys)
September 18, 2022, 9:12am
2937
Here are a couple more ideas.
Mushroom Translate Animation:
type: custom:mushroom-template-card
primary: Activate Mushroom
icon: mdi:mushroom
icon_color: red
secondary: Translate
card_mod:
style: |
ha-card:active {
transform: translatey(1.5px);
transition: 0s;
box-shadow: 0px 0.5px 2px 0px rgba(0, 0, 0, 0.16);
}
Mushroom Scale-In Animation:
type: custom:mushroom-template-card
primary: Activate Mushroom
icon: mdi:mushroom
icon_color: red
secondary: Scale-In
card_mod:
style: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
9 Likes
Thanks this was really useful. I have tried adapting the code as i only need the icon colour to change when the media player is either on or off state
card_mod:
style: |
ha-card {
{% set state=states('media_player.living_room_tv') %}
--rgb-state-media-player:
{% if state=='off' %}
var(--rgb-blue)
{% elif state!='0' %}
var(--rgb-yellow)
{% endif %};
}
The icon changes to yellow when the device is powered on but no colour change is made when its in a powered off state. Have i missed something here? Thanks
rhysb
(Rhys)
September 18, 2022, 9:44am
2939
I think volume steps are determined by the media entity not the Mushroom Media Card.
Vandana
(Vandana Dass)
September 18, 2022, 9:53am
2940
Okā¦ I really appreciate you help and supportā¦
1 Like