rhysb
August 11, 2022, 11:53am
2268
Is this what you wanted?
type: custom:mushroom-template-card
primary: '{{ states[entity].name }}'
secondary: '{{ states(entity) | title }}'
entity: light.office_light
picture: local/icons/custom_icons/ceiling-lamp.png
hold_action:
action: toggle
double_tap_action:
action: more-info
layout: vertical
tap_action:
action: none
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;
}
ha-card {
background: transparent;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
--icon-border-radius: 0;
}
Yes that’s exactly what I was looking for.
I’m having an issue with the rotation animation.
It works in a regular template card but not a chip template card.
What I have to spin a regular template card
card_mod:
style:
mushroom-shape-icon:
$: |
.shape ha-icon {
{% set status = state_attr('climate.daniel_s','hvac_action') %}
{% if status == 'cooling' or status == 'heating' %}
--icon-animation: rotation 1s linear infinite;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
This is not working in a template chips card. The status template is correct.
card_mod:
style:
mushroom-shape-icon:
$: |
.shape ha-icon {
{% set status = state_attr('climate.daniel_s','fan_mode') %}
{% if status == 'Low' %}
--icon-animation: rotation 1s linear infinite;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
rhysb
August 11, 2022, 12:02pm
2270
The method is different for Mushroom Chips. Have a look here:
So, figured how to individually reference Chips.
[more cookies]
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:cookie
icon_color: brown
content: 1 Cookie
- type: template
icon: mdi:cookie
icon_color: brown
content: 2 Cookies
- type: template
icon: mdi:cookie
icon_color: brown
content: 3 Cookies
card_mod:
style:
mushroom-template-chip:nth-child(3)$: |
ha-icon {
animation: rotation 1s linear infinite;
}
…
I figured that.
This doesn’t seem to be working.
card_mod:
style:
div:
mushroom-template-chip:
$:
mushroom-chip: |
ha-icon {
{% set status = state_attr('climate.daniel_s','fan_mode') %}
{% if status == 'Low' %}
--icon-animation: rotation 1s linear infinite;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Great catch. Oddly enough, I did spell it correctly in the household overview popup. Thank you very much!
berkans
August 11, 2022, 12:52pm
2273
Try this
type: template
icon_color: white
icon: mdi:snowflake-alert
card_mod:
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
animation: rotation linear infinite;
animation-duration: 2s;
}
sashaz
August 11, 2022, 1:06pm
2275
Thanks, I will use this for the two electric cars we have. Do you know if it can be altered so the colour changes depending on the value? For instance, below 20% the bar is red, 20%-80% the bar is green and above 80% its a totally different colour?
Not sure if that will work as it’s targeting the card and not the icon?
berkans
August 11, 2022, 1:34pm
2277
Write down your full code. It works on my climate.
As expected it rotates the entire chip card and not the icon.
- type: template
entity: climate.daniel_s
content: |
{{ state_attr(entity,'fan_mode') }}
icon: |-
{% set mode = state_attr(entity,'fan_mode') %}
{% if mode == 'Auto low' %}
mdi:fan-off
{% elif mode == 'Low' %}
fas:fan
{% endif %}
icon_color: |-
{% set status = state_attr(entity,'fan_mode') %}
{% if status == 'Auto low' %}
grey
{% elif status == 'Low' and states(entity) == 'cool' %}
blue
{% elif status == 'Low' and states(entity) == 'heat' %}
red
{% else %}
grey
{% endif %}
tap_action: none
card_mod:
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
{% set status = state_attr('climate.daniel_s','fan_mode') %}
{% if status == 'Low' %}
animation: rotation linear infinite;
animation-duration: 2s;
{% endif %}
}
1 Like
I’m going to follow this guide.
I’ve built the sensor up but haven’t yet flashed the code. I’ve moved to unraid since I last flashed an esp so need to work out if I can with unraid
filikun
August 11, 2022, 5:28pm
2280
I’m trying to get only the icon to spin as well, like the fan card does it. Can’t figure it out either.
I can get it to spin with a template card just not a template chip card.
filikun
August 11, 2022, 5:43pm
2282
How do you get it to spin with the template card?
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
primary: Daniels
secondary: >
Currently: {{ state_attr('climate.daniel_s', 'hvac_action') | replace
('cooling','Cooling') | replace ('heating','Heating') | replace
('idle','Idle') }}
icon: |-
{% set mode = states('climate.daniel_s') %}
{% if mode == 'off' %}
mdi:fan-off
{% elif mode == 'cool' %}
fas:fan
{% elif mode == 'heat' %}
fas:fan
{% else %}
mdi:home-thermometer
{% endif %}
icon_color: |-
{% set status = state_attr('climate.daniel_s','hvac_action') %}
{% if status == 'idle' %}
grey
{% elif status == 'cooling' %}
blue
{% elif status == 'heating' %}
red
{% else %}
grey
{% endif %}
card_mod:
style:
mushroom-shape-icon:
$: |
.shape ha-icon {
{% set status = state_attr('climate.daniel_s','hvac_action') %}
{% if status == 'cooling' or status == 'heating' %}
--icon-animation: rotation 1s linear infinite;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.: |
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
padding-bottom: 14px !important;
}
1 Like
rhysb
August 11, 2022, 7:04pm
2285
But you haven’t followed my example
If you have more than one Chip, you need to select the Chip with nth-child(3):. You need to use animation: not --icon-animation:.
This is the second chip. I tried this and it’s not working.
card_mod:
style:
div:
mushroom-template-chip:nth-child(2):
$:
mushroom-chip: |
ha-icon {
{% set status = state_attr('climate.daniel_s','fan_mode') %}
{% if status == 'Low' %}
animation: rotation 1s linear infinite;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
rhysb
August 11, 2022, 7:55pm
2287
Post your complete chip code and we can have a look.
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.2em
}
alignment: justify
chips:
- type: template
content: '{{state_attr(entity, ''current_temperature'')}} °F'
entity: climate.daniel_s
icon: mdi:home-thermometer
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state=='cool' %}
blue
{% elif state=='heat' %}
red
{% else %}
grey
{% endif %}
style: |
ha-card {
margin-left: 6px;
}
- type: template
entity: climate.daniel_s
content: |
{{ state_attr(entity,'fan_mode') }}
icon: |-
{% set mode = state_attr(entity,'fan_mode') %}
{% if mode == 'Auto low' %}
mdi:fan-off
{% elif mode == 'Low' %}
fas:fan
{% endif %}
icon_color: |-
{% set status = state_attr(entity,'fan_mode') %}
{% if status == 'Auto low' %}
grey
{% elif status == 'Low' and states(entity) == 'cool' %}
blue
{% elif status == 'Low' and states(entity) == 'heat' %}
red
{% else %}
grey
{% endif %}
tap_action: none
card_mod:
style:
div:
mushroom-template-chip:nth-child(2):
$:
mushroom-chip: |
ha-icon {
{% set status = state_attr('climate.daniel_s','fan_mode') %}
{% if status == 'Low' %}
animation: rotation 1s linear infinite;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
- type: template
tap_action:
action: more-info
content: >
{{ states('sensor.daniels_humidifier_status') | replace('off','Off') |
replace('on','On') }}
entity: sensor.daniels_humidifier_status
icon: mdi:air-humidifier
icon_color: blue
hold_action:
action: none
- type: template
double_tap_action:
action: none
content: '{{ states(entity) | round(0) }}% Humidity'
entity: sensor.daniels_humidity
icon: mdi:water
icon_color: blue
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
--ha-card-background: transparent
.