mgluchgit
November 16, 2023, 10:02am
162
Hi guys
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- condition: state
entity: input_boolean.vd_test
state: 'on'
chip:
type: template
tap_action:
action: toggle
entity: input_boolean.vd_test
icon: mdi:test-tube
icon_color: red
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
ha-state-icon {
animation: pulse 2s ease-in-out infinite;
}
But when I create a classic “custom:mushroom-template-card” the animation works normally
type: custom:mushroom-template-card
icon: mdi:pulse
icon_color: accent
primary: ''
secondary: Aktivita domácnosti
card_mod:
style: |
ha-state-icon {
animation: pulse 2s ease-in-out infinite;
}
ha-card {
border: unset;
background: unset;
padding-left: 0px !important;
{
Does anyone know where the problem might be?
For example, if the washing machine is on, show the icon and animate it.
Thank you in advance for any help!
@dimitri.landerloos , i tried this card mod code. the static boder line works. the animated border does not work on this card.
im trying to show the border when there is motion, for now the border stays ad all time. Can you pherhaps point me in the right direction?
show_state: false
show_name: false
camera_view: live
type: picture-entity
entity: camera.oprit
camera_image: camera.oprit
aspect_ratio: 16x9
card_mod:
style: |
ha-card {
-- if (binary_sensor.motion_sensor_inloopkast_occupancy == 'on') return;
border: 2.5px outset red
}
the output:
the red border is there all the time.
Hi Jeroen,
Your question has nothing to do with mushroom cards. This topic can only really help you with that.
What you seem to be applying is not yaml or css.
A yaml template controlling whether the border should be shown or not would be something like this:
type: custom:mushroom-template-card
icon: mdi:test-tube
card_mod:
style: |
ha-card {
{% if states('binary_sensor.hallway_motion_sensor_occupancy') == 'on' %}
border: red outset 2px !important;
{% endif %}
}
You can only mix yaml templates with the CSS in card mod. Nothing else. Any state output of the yaml template is rendered as is in the CSS btw.
Thx @dimitri.landerloos
point 1, youre right! i have a lot of mushroom card, and this is I think the only not mushroom card, found youre ‘card mod’ guide
but , it is working now wiht youre code! So thank you verry much.
I have the same problem, I think chips don’t support animation icons.
Not true. But there does seem to be an issue with the built in animations:
Found your problem. But please for the future dont cross-post. I would have got back to you in the other thread in due course.
The built in animations seem to not work for chips on chrome and mobile app (works on firefox not tested elsewhere).
Add some keyframes and it will work.
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- condition: state
entity: input_boolean.bedroom_all_lights_dropdown
state: 'off'
chip:
type: template
…
I see you pointed out to at some keyframes, I tried the dishwasher etc, they have already keyframes.
On an entity card they work, when I take a chips card it won’t work.
Show me what you have tried. I have multiple chip animations.
Examples:
On a entity card its working code:
type: custom:mushroom-template-card
icon: mdi:dishwasher
icon_color: '{{ ''blue'' if is_state(''binary_sensor.vaatwasser_status'', ''on'') }}'
primary: ''
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;' if is_state('binary_sensor.vaatwasser_status', 'on') }}
transform-origin: 50% 75%;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0); }
40% { transform: translateY(-1.2px) rotate(5deg); }
60% { transform: translateY(-1.1px) rotate(-4deg); }
}
@keyframes wash {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
on a chip card not, code
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:dishwasher
icon_color: |-
{% if is_state('binary_sensor.vaatwasser_status', 'on') %}
blue
{%endif%}
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;' if is_state('binary_sensor.vaatwasser_status', 'on') }}
transform-origin: 50% 75%;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0); }
40% { transform: translateY(-1.2px) rotate(5deg); }
60% { transform: translateY(-1.1px) rotate(-4deg); }
}
@keyframes wash {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
Not how you apply almost anything to the chips. You can only do things to the background of the chip by targeting the chip directly like this.
You are using an old animation. I have updated those animations from Rhysb. Its in the first post in the topic.
Do it like this instead.
Code
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:dishwasher
icon_color: |-
{% if is_state('binary_sensor.vaatwasser_status', 'on') %}
blue
{%endif%}
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{{ 'animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;' if is_state('binary_sensor.vaatwasser_status', 'on') }}
transform-origin: 50% 75%;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0); }
40% { transform: translateY(-1.2px) rotate(5deg); }
60% { transform: translateY(-1.1px) rotate(-4deg); }
}
@keyframes wash {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
I dont mean this in any rude way or with any slight, but it does not feel like you have actually read any of these posts? There is a specific chip section even with animation examples for both the background and icon of the chips…
Also just to add that there is no way that your first card animation works either unless you are using a version of mushroom from at least 6 months ago.
For your template card it would be like this:
Code
type: custom:mushroom-template-card
icon: mdi:dishwasher
icon_color: '{{ ''blue'' if is_state(''binary_sensor.vaatwasser_status'', ''on'') }}'
primary: ''
card_mod:
style: |
ha-state-icon {
{{ 'animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;' if is_state('binary_sensor.vaatwasser_status', 'on') }}
transform-origin: 50% 75%;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0); }
40% { transform: translateY(-1.2px) rotate(5deg); }
60% { transform: translateY(-1.1px) rotate(-4deg); }
}
@keyframes wash {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
2 Likes
thx for youre reply,
the code for the chip is not working for me, i get the coler etc. but not the animation.
And the new code that you showd me for the entity card… strange… but not working, while my ’ old’ code of the animation is working
What version of mushroom - card mod - etc are you using?
card mod: 3.2.2
both have update’s, i will make a back-up, update both, and try again.
That will be why. Both outdated. Get ready for all your existing mushroom animations breaking and needing an update.
Dont forget to manually clear your cache from browser/app after any card mod update.
oke, i have update card mod + mushroom, youre code for the chips is working now! thx.
i will search for the post about the new animation codes
1 Like
It worked out! ( for the most part) only the dryer animation won’t work
For the moment I have the dishwasher animation on the dryer…. Fine by me
Thank you for the patience and the guiding,
1 Like
If you want to show the dryer i can help
Maybe tomorrow, the pc is off for today
I will take a look tomorrow.
edit:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:tumble-dryer
icon_color: |-
{% if is_state('binary_sensor.droger_status', 'on') %}
teal
{%endif%}
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{{ 'animation: shake 400ms ease-in-out infinite, drum 1s infinite;' if is_state('binary_sensor.droger_status', 'on') }}
transform-origin: 50% 65%;
}
@keyframes shake {
0%, 100% { transform: rotate(4deg); }
50% { transform: rotate(-4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
1 Like
Can anyone help me with scrolling text on a mushroom template card. I have got the whole text scrolling but ideally i only want the secondary information to scroll. Also when i add the cards next to each other the text gets shorterned with … Is there a way to expand this to scroll all the text?
card_mod:
style: |
mushroom-state-info {
{{ 'animation: my-animation 15s linear infinite;' if is_state('media_player.front_room_tv_2', 'on') }}
transform-origin: 0% 100%;
}
@keyframes my-animation {
0%, 100% { transform: translateX(30%); }
50% { transform: translateX(0%); }
}
Example card at bottom + when in horizontal stack above
the rest I changed like you said.
.
.