Homeotte41
October 13, 2022, 10:41am
3421
Only the inner side of the icon stops blinking, but the outside still is…Could you please have a look for me again?"
We have this now so:
type: custom:mushroom-template-card
icon: mdi:radiator
icon_color: '{{ ''red'' if is_state(entity, ''on'') else ''disabled'' }}'
primary: heater
secondary: ''
entity: switch.compressor
tap_action:
action: toggle
fill_container: true
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: rotation 1s linear infinite;' if is_state(config.entity, 'on') }}
transform-origin: 29% 88%;
}
@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;
}
}
rhysb
October 13, 2022, 10:42am
3422
And then do the same for the --shape-animation.
Also replace the example --icon-animation values with the correct ones for your animation.
Homeotte41
October 13, 2022, 11:02am
3423
Oké Thank you i look in the Evening, i hope that we can fix😊
Thekholm
October 13, 2022, 11:13am
3424
Thanks,
What I mean is the animated speaker icon you did. When I press the on/off button I want it do be animated for 1-2 seconds.
Best regards
Sylwester
October 13, 2022, 11:35am
3425
Can you explain more about:
input_select.mediaplayer_source
and
input_select.select_option
Thanks
1 Like
Homeotte41
October 13, 2022, 12:08pm
3426
Can you show me please? can you making for me, I try but it doesn’t work, sorry i feel my stupid
type: custom:mushroom-template-card
icon: mdi:radiator
icon_color: '{{ ''red'' if is_state(entity, ''on'') else ''disabled'' }}'
primary: heater
secondary: ''
entity: switch.compressor
tap_action:
action: toggle
fill_container: true
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: clip 1s linear infinite;' if is_state(config.entity, 'on') }}
transform-origin: 29% 88%;
}
@keyframes clip {
0% {
clip-path: inset(50% 0 0 0);
}
100% {
clip-path: inset(0 0 0 0);
}
}
.shape {
--shape-animation: ping 2s infinite;' if is_state(config.entity, 'on') }}
transform-origin: 29% 88%;
}
@keyframes ping {
0% {
box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);
}
Can you share the final code please?
1 Like
konradwalsh
October 13, 2022, 1:39pm
3429
sure
type: custom:mushroom-template-card
primary: '{{ states(''sensor.time'') }}'
secondary: '{{ states(''sensor.date'') }}'
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: '--popup-background-color: black;'
content:
type: custom:weather-card
entity: weather.dark_sky
number_of_forecasts: '5'
name: Home
card_mod:
style: |
mushroom-card {
text-align: center;
--primary-text-color: orange;
--primary-text-size: 300%;
--primary-text-weight: light;
#background: black
#center 0px;
#height: 40px;
#width: 600px;
--card-primary-font-size: 40px;
--primary-font-size: 600px;
--primary-text-weight: light;}
}
This includes a pop up for the weather
2 Likes
Homeotte41
October 13, 2022, 5:45pm
3430
how can we the machine stopped? whats wrong on the code?
type: custom:mushroom-template-card
primary: ''
secondary: |2
{{ states("sensor.wasmachine_electrical_measurement") }} watt |
{{ states("sensor.wasmachine_smartenergy_metering_summation_delivered") }} kwh
icon: >-
{{ 'mdi:washing-machine-off'if states('sensor.wasmachine_electrical_measurement') | float(0) > 5 else
'mdi:washing-machine' }}
entity: input_boolean.wasmachine
layout: vertical
icon_color: yellow
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;' if states('sensor.wasmachine_electrical_measurement') | float > 5 }}
transform-origin: 50% 110%;
}
@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); }
}
@keyframes drum {
50% { 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); }
}
stop washing under 5watt start above 5watt
Hello
1 Like
syntax is wrong on this line:
It should be:
{{ '--icon-animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;' if states('sensor.wasmachine_electrical_measurement') | float > 5 }}
1 Like
Using a template chip, you could set the content to:
{{ 123.4567 | round(1) }} SEK/kWh
where 123.45… should obviously be replaced with the sensor.
Homeotte41
October 13, 2022, 7:33pm
3434
thank you so much and happy now,
Posreg
October 13, 2022, 7:42pm
3435
I have a script (play.radio) that plays an url/stream depending on the mediaplayer_source entity inputselect.mediaplayer_source has a list of the stations, inside the script there are urls to the stations and input_select.select_option is used when I’m tapping the station picture
i know it might sounds complicated but it works
send a private message if you want to discuss further
3 Likes
rhysb
October 13, 2022, 8:56pm
3436
Almost there. Like this:
type: custom:mushroom-template-card
icon: mdi:radiator
icon_color: '{{ ''red'' if is_state(entity, ''on'') else ''disabled'' }}'
primary: heater
secondary: ''
entity: switch.compressor
tap_action:
action: toggle
fill_container: true
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: clip 1s linear infinite;' if is_state(config.entity, 'on') }}
transform-origin: 29% 88%;
}
@keyframes clip {
0% {
clip-path: inset(50% 0 0 0);
}
100% {
clip-path: inset(0 0 0 0);
}
}
.shape {
{{ '--shape-animation: ping 2s infinite;' if is_state(config.entity, 'on') }}
transform-origin: 29% 88%;
}
@keyframes ping {
0% { box-shadow: 0 0 1px 1px rgba(var(--rgb-red), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
1 Like
Hi. Great idea! How did you make the card for Utilia Terrazzo ? Is this also the climate card ?
Homeotte41
October 14, 2022, 4:52am
3438
thank you,so much but now heater its on and he don,t no flashing outside, whe trying this we remove {{ but no effects i Think we remove that, but i think you need the {{ but we trying,
Thekholm
October 14, 2022, 6:15am
3439
How can I get a thin divider line in the template card?
Best regards
poudenes
October 14, 2022, 7:23am
3440
Does someone can send me the code or example how to use those icons animations with a state
When entity is on then the animation is working with a given color. When entity is off then animation is off and color is different
Im trying and trying but can’t figure it out
1 Like
Kabala
October 14, 2022, 7:49am
3441
Hello, everyone.
square: false
columns: 2
type: grid
cards:
- type: custom:mushroom-template-card
primary: '{{ state_attr(entity, ''friendly_name'') }}'
secondary: '{{ states(entity) }}dBm'
icon: |-
{% set rssi_level = states(entity) | int %}
{% if -1 > rssi_level >= -50 %}
mdi:wifi-strength-4
{% elif -51 >= rssi_level > -61 %}
mdi:wifi-strength-3
{% elif -62 >= rssi_level > -72 %}
mdi:wifi-strength-2
{% elif -73 >= rssi_level > -83 %}
mdi:wifi-strength-1
{% elif -83 >= rssi_level > -94 %}
mdi:wifi-strength-outline
{% else %}
mdi:wifi-strength-off-outline
{% endif %}
entity: sensor.shelly1_ba015a_rssi
fill_container: false
icon_color: |-
{% set rssi_level = states(entity) | int %}
{% if -1 > rssi_level >= -50 %}
green
{% elif -51 >= rssi_level > -61 %}
lime-green
{% elif -62 >= rssi_level > -72 %}
yelow
{% elif -73 >= rssi_level > -83 %}
amber
{% elif -84 >= rssi_level > -94 %}
red
{% else %}
red
{% endif %}
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-template-card
primary: '{{ state_attr(entity, ''friendly_name'') }}'
secondary: '{{ states(entity) }}dBm'
icon: |-
{% set rssi_level = states(entity) | int %}
{% if -1 > rssi_level >= -50 %}
mdi:wifi-strength-4
{% elif -51 >= rssi_level > -61 %}
mdi:wifi-strength-3
{% elif -62 >= rssi_level > -72 %}
mdi:wifi-strength-2
{% elif -73 >= rssi_level > -83 %}
mdi:wifi-strength-1
{% elif -83 >= rssi_level > -94 %}
mdi:wifi-strength-outline
{% else %}
mdi:wifi-strength-off-outline
{% endif %}
entity: sensor.shellyswitch25_ba7900_rssi
fill_container: false
icon_color: |-
{% set rssi_level = states(entity) | int %}
{% if -1 > rssi_level >= -50 %}
green
{% elif -51 >= rssi_level > -61 %}
lime-green
{% elif -62 >= rssi_level > -72 %}
yelow
{% elif -73 >= rssi_level > -83 %}
amber
{% elif -84 >= rssi_level > -94 %}
red
{% else %}
red
{% endif %}
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
badge_color: ''
- type: custom:mushroom-template-card
primary: '{{ state_attr(entity, ''friendly_name'') }}'
secondary: '{{ states(entity) }}dBm'
icon: |-
{% set rssi_level = states(entity) | int %}
{% if -1 > rssi_level >= -50 %}
mdi:wifi-strength-4
{% elif -51 >= rssi_level > -61 %}
mdi:wifi-strength-3
{% elif -62 >= rssi_level > -72 %}
mdi:wifi-strength-2
{% elif -73 >= rssi_level > -83 %}
mdi:wifi-strength-1
{% elif -83 >= rssi_level > -94 %}
mdi:wifi-strength-outline
{% else %}
mdi:wifi-strength-off-outline
{% endif %}
entity: sensor.shellyswitch25_ba854b_rssi
fill_container: false
icon_color: |-
{% set rssi_level = states(entity) | int %}
{% if -1 > rssi_level >= -50 %}
green
{% elif -51 >= rssi_level > -61 %}
lime-green
{% elif -62 >= rssi_level > -72 %}
yelow
{% elif -73 >= rssi_level > -83 %}
amber
{% elif -84 >= rssi_level > -94 %}
red
{% else %}
red
{% endif %}
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
badge_color: |-
{% set rssi_level = states(entity) | int %}
{% if -1 > rssi_level >= -50 %}
green
{% elif -51 >= rssi_level > -61 %}
lime-green
{% elif -62 >= rssi_level > -72 %}
yelow
{% elif -73 >= rssi_level > -83 %}
amber
{% elif -84 >= rssi_level > -94 %}
red
{% else %}
red
{% endif %
- type: custom:mushroom-template-card
primary: '{{ state_attr(entity, ''friendly_name'') }}'
secondary: '{{ states(entity) }}dBm'
icon: |-
{% set rssi_level = states(entity) | int %}
{% if -1 > rssi_level >= -50 %}
mdi:wifi-strength-4
{% elif -51 >= rssi_level > -61 %}
mdi:wifi-strength-3
{% elif -62 >= rssi_level > -72 %}
mdi:wifi-strength-2
{% elif -73 >= rssi_level > -83 %}
mdi:wifi-strength-1
{% elif -83 >= rssi_level > -94 %}
mdi:wifi-strength-outline
{% else %}
mdi:wifi-strength-off-outline
{% endif %}
entity: sensor.shelly1_ba2c28_rssi
fill_container: false
icon_color: |-
{% set rssi_level = states(entity) | int %}
{% if -1 > rssi_level >= -50 %}
green
{% elif -51 >= rssi_level > -61 %}
lime-green
{% elif -62 >= rssi_level > -72 %}
yelow
{% elif -73 >= rssi_level > -83 %}
amber
{% elif -84 >= rssi_level > -94 %}
red
{% else %}
red
{% endif %}
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-template-card
primary: '{{ state_attr(entity, ''friendly_name'') }}'
secondary: '{{ states(entity) }}dBm'
icon: |-
{% set rssi_level = states(entity) | int %}
{% if -1 > rssi_level >= -50 %}
mdi:wifi-strength-4
{% elif -51 >= rssi_level > -61 %}
mdi:wifi-strength-3
{% elif -62 >= rssi_level > -72 %}
mdi:wifi-strength-2
{% elif -73 >= rssi_level > -83 %}
mdi:wifi-strength-1
{% elif -83 >= rssi_level > -94 %}
mdi:wifi-strength-outline
{% else %}
mdi:wifi-strength-off-outline
{% endif %}
entity: sensor.shellyswitch25_ba7900_rssi
fill_container: false
icon_color: |-
{% set rssi_level = states(entity) | int %}
{% if -1 > rssi_level >= -50 %}
green
{% elif -51 >= rssi_level > -61 %}
lime-green
{% elif -62 >= rssi_level > -72 %}
yelow
{% elif -73 >= rssi_level > -83 %}
amber
{% elif -84 >= rssi_level > -94 %}
red
{% else %}
red
{% endif %}
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
1 Like
