rhysb
January 16, 2023, 8:57pm
4965
Unfortunately, you can’t reference config. for the Chips, only when using card_mod on a Chip.
You can add that animation to a Chip like this:
card_mod:
style:
mushroom-template-chip:nth-child(3)$: |
ha-icon:before {
content: "";
position: absolute;
width: 40%;
height: 30%;
margin: 6%;
animation: refresh 300ms linear infinite;
}
@keyframes refresh {
0% { background: linear-gradient(180deg, rgba(var(--rgb-primary-text-color), 0.3) 0%, transparent 50%, transparent 100%); }
25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-primary-text-color), 0.3) 25%, transparent 100%); }
50% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-primary-text-color), 0.3) 50%, transparent 100%); }
75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-primary-text-color), 0.3) 75%, transparent 100%); }
100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(var(--rgb-primary-text-color), 0.3) 100%); }
}
Can you share your code please?
rhysb
January 16, 2023, 9:30pm
4969
You would use a Template Cover for this:
Sure, I have an small HA Brazilian youtube channel, the links are on description of this video.
2 Likes
rhysb
January 16, 2023, 9:45pm
4971
Something like this:
type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.ups_battery_runtime
content: 'Runtime: {{ (states(entity) | int / 60) | round(0) }} minutes'
icon: mdi:weight-lifter
icon_color: null
tap_action: none
xbmcnut
January 16, 2023, 9:54pm
4972
Thank you! I was failing to add the preceding ( before states when appending the additional code.
I was trying Runtime: {{ states(entity) | int / 60) | round(0) }} minutes when it should be Runtime: {{ (states(entity) | int / 60) | round(0) }} minutes as you’ve typed.
1 Like
sheddc75
January 16, 2023, 10:41pm
4973
Thanks. This fixed it. Although if you are using a dark theme background you can’t see the animation. Needs a white or light theme.
1 Like
atomicpapa
January 16, 2023, 10:50pm
4974
I amattempting to animate an icon for a conditional chip card and the method referenced for chip cards in Part 5 of your animation series doesn’t seem to work. Is there something different that needs to be done if the chip in question is a conditional type? I have tried referencing it as mushroom-conditional-chip:nth-child(4)$ and as mushroom-entity-chip:nth-child(4)$. I have also tried changing --icon-animation: shake 400ms ease-in-out infinite; to just animation: shake 400ms ease-in-out infinite; as I noticed was done with some of your examples. Here’s my card code in full:
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: sensor.lights_active
state_not: <font color='#6a7377'>Everything is off!</font>
chip:
type: template
entity: sensor.lights_active
icon: mdi:lightbulb
icon_color: yellow
content: '{{ states(''sensor.lights_active'')}}'
tap_action:
action: more-info
- type: conditional
conditions:
- entity: sensor.open_windows
state_not: No windows are open.
chip:
type: template
icon: mdi:window-open
entity: sensor.open_windows
content: '{{ states(''sensor.open_windows'')}}'
tap_action:
action: navigate
navigation_path: /phone-devices
- type: conditional
conditions:
- entity: sensor.open_doors
state_not: No doors are open.
chip:
type: template
entity: sensor.open_doors
icon: mdi:door-open
content: '{{ states(''sensor.open_doors'')}}'
tap_action:
action: navigate
navigation_path: /phone-devices
- type: conditional
conditions:
- entity: binary_sensor.washer_on
state: 'on'
chip:
type: entity
entity: binary_sensor.washer_on
content_info: none
icon: mdi:washing-machine
icon_color: green
styles:
color: green
alignment: center
view_layout:
grid-area: messages
card_mod:
style:
mushroom-conditional-chip:nth-child(4)$: |
ha-icon {
--icon-animation: shake 400ms ease-in-out infinite;
transform-origin: 50% 58%;
clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0);
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
Thank you for any help you can provide.
milandzuris
January 16, 2023, 11:24pm
4975
HI please code for thermostat card zhx
rhysb
January 17, 2023, 1:50am
4976
It’s easy to miss
Dig the Rackstuds BTW. Started using them when CDL first got them in.
1 Like
rhysb
January 17, 2023, 1:52am
4977
Just remove icon_color: white from the last Chip.
1 Like
rhysb
January 17, 2023, 2:11am
4978
With Conditional Chips you need to specify the mushroom-conditional-chip:nth-child() then the Chip and Shadow Root. Like this:
card_mod:
style:
mushroom-conditional-chip:nth-child(4):
mushroom-template-chip$: |
ha-icon {
If you need to correct the Chip height, you can do so like this:
.: |
mushroom-conditional-chip {
height: calc(var(--chip-height));
}
Just use animation not --icon-animation for Chips.
2 Likes
atomicpapa
January 17, 2023, 3:25am
4979
Thank you for your quick reply!! I have made the changes you suggested and it still isn’t animating. Here’s what I have now:
- type: conditional
conditions:
- entity: binary_sensor.washer_on
state: 'on'
chip:
type: entity
entity: binary_sensor.washer_on
content_info: none
icon: mdi:washing-machine
icon_color: green
alignment: center
view_layout:
grid-area: messages
card_mod:
style:
mushroom-conditional-chip:nth-child(4)$:
mushroon-entity-chip$: |
ha-icon {
animation: shake 400ms ease-in-out infinite;
transform-origin: 50% 58%;
clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0);
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
Thank you
edit: I also tried verbatim to your example with mushroom-template-chip$:
rhysb
January 17, 2023, 4:10am
4980
Should be just nth-child(4): not nth-child(4)$:
1 Like
atomicpapa
January 17, 2023, 4:49am
4981
Thank you once again. I should have looked closer.
1 Like
vaemarr
January 17, 2023, 7:15am
4982
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-person-card
entity: person.firstname_lastname
icon_type: entity-picture
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.sm_g998b_battery_level
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: var(--ha-card-background);
}
rhysb
January 17, 2023, 7:40am
4983
Only issue I can see there is card_mod needs to be two tabs over:
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-person-card
entity: person.firstname_lastname
icon_type: entity-picture
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.sm_g998b_battery_level
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: var(--ha-card-background);
}
jono
January 17, 2023, 7:43am
4984
I changed the colour of the icon from green to orange (I’m using it with a fan heater), and want to show last used or changed as secondary info.
- type: custom:mushroom-fan-card
entity: switch.fan_heater
icon_animation: true
layout: vertical
fill_container: true
secondary_info: >
{% if relative_time(states.switch.fan_heater.last_updated) == '0 seconds' %}
Now
{% else %}
{{ relative_time(states.switch.fan_heater.last_updated) }} ago
{% endif %}
style: |
mushroom-shape-icon{
--icon-color: orange !important;
--shape-color: rgba(242, 169, 59, 0.25) !important;
}
This doesn’t show anything for secondary info.
Is there a way to make this work with the mushroom fan card? If not, is there a way to use the mushroom template card (which will show the secondary info), and animate the icon?
I’m trying to mode the animated fan card, & could do with a little help 