Try this, let me know.
icon_color: |
{{"#%02x%02x%02x" %state_attr(config.entity,"rgb_color") }}
I should have been a little clearer. This will eliminate the need for the if statement. If the light is off it will show the device disabled color.
1 Like
One general question. Is there a possibility to defined “somewhere” centrally, e.g.,…
}
@keyframes blink {
50% {opacity: 0;
}
…and use it then simply at the cards via …
animation: blink 2s linear infinite;
… so that in case I would like to change the definition of “blink” I change it only at the central position and do not need to search everywhere and I only need to defined it once?
Many thanks!
1 Like
Great question…Mushroom’s animations are imbedded in the JavaScript to eliminate the need for keyframes so you could adjust the settings there, but there may be another way. Let me think about it…
1 Like
the colour when it is on is ok, but disabled gives me a white icon , I want it in 36,36,36 
This should do it…
icon_color: |
{% if is_state(config.entity, 'on') %}
{{"#%02x%02x%02x" %state_attr(config.entity,"rgb_color") }}
{% else %}
#242424
{% endif %}
1 Like
You will need to figure out how to post the code. but also this isnt related to mushroom so please create a new topic.
1 Like
Hi,
I Also want to have the icon rotate when it is on, but I have this and doesn’t work
- type: template
icon: mdi:fan
icon_color: red
card_mod:
style: |
ha-card {
background: none !important;
border: none !important;
position: absolute;
left: 280px;
{% if not is_state('sensor.ventilatie', 'hoog') %}
display: none !important;
{% endif %}
ha-state-icon {
animation: rotate 1s linear infinite;
}
Chips are a little more complex than the standard cards, check the topic linked in my profile for some simple examples.
But for yours specifically it would be like this. (mushroom-template-chip:nth-child(1)$: | refers to the first chip and the chip type, so change it to the type you are targeting.)
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:fan
icon_color: red
card_mod:
style: |
ha-card {
background: none !important;
border: none !important;
position: absolute;
left: 280px;
{% if not is_state('sensor.ventilatie', 'hoog') %}
display: none !important;
{% endif %}
}
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
1 Like
Thnx Dimitri. One more question. I need to change the size of the card with card mod. If I do this the animation will stop. I added the ha-card section and it stops
card_mod:
style: |
ha-card {
height: 45px !important;
width: 450px; !important;
}
mushroom-template-chip:nth-child(7)$: |
ha-state-icon {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
mushroom-template-chip:nth-child(6)$: |
ha-state-icon {
animation: beat 1.3s ease-out infinite both;
transform-origin: 50% 60%;
}
@keyframes beat {
0% { transform: scale(1); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.25); }
60% { transform: scale(1); }
}
Have a look at my guide in the section thats called what the .: | and $ symbols do. But esentially it is like this:
card_mod:
style:
mushroom-template-chip:nth-child(7)$: |
ha-state-icon {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
mushroom-template-chip:nth-child(6)$: |
ha-state-icon {
animation: beat 1.3s ease-out infinite both;
transform-origin: 50% 60%;
}
@keyframes beat {
0% { transform: scale(1); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.25); }
60% { transform: scale(1); }
}
.: |
ha-card {
height: 45px !important;
width: 450px; !important;
}
2 Likes
nice one!
I made a pulse for when my phones is charging.
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:lightning-bolt
icon_color: yellow
card_mod:
style: |
ha-card {
background: none !important;
border: none !important;
position: absolute;
left: 280px;
{% if not is_state('sensor.xxx_battery_state', 'Charging') %}
display: none !important;
{% endif %}
}
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
animation: pulse 2s linear infinite;
}
@keyframes pulse {
0% {transform:scale(0.6);color:firebrick; left:0px; top:0px;}
50% {transform:scale(0.8);color:yellow; left:0px; top:0px;}
100% {transform:rotate(360deg);color:green; left:0px; top:0px;}
}
Is there a way to get just 1 icon not clickabele on the chips card ?
Do you mean no action is taken if it’s clicked?
If so the action function can prevent that.
type: custom:mushroom-chips-card
chips:
- type: action
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
@rhysb Hi mate, ive been using this for a year now, recently it has stopped displaying the extra percentage state:
decluttering template:
salt_gauge:
default:
- entity: null
- min: 0
- max: 100
- high: green
- medium: orange
- low: red
- high_max: 100
- high_min: 61
- medium_max: 60
- medium_min: 21
- low_max: 20
- low_min: 0
- severity_low: 20
- severity_medium: 40
- severity_high: 60
card:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 42px auto
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-template-card
entity: '[[entity]]'
icon: mdi:[[icon]]
icon_color: |
{% set colour = states(entity) | int %}
{% if colour <= [[low_max]] %}
[[low]]
{% elif colour <= [[medium_max]] %}
[[medium]]
{% else %}
[[high]]
{% endif %}
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:bar-card
entity: '[[entity]]'
height: 42px
min: '[[min]]'
max: '[[max]]'
entity_row: true
severity:
- color: rgb(var(--mush-rgb-[[high]]))
to: '[[high_max]]'
from: '[[high_min]]'
- color: rgb(var(--mush-rgb-[[medium]]))
to: '[[medium_max]]'
from: '[[medium_min]]'
- color: rgb(var(--mush-rgb-[[low]]))
to: '[[low_max]]'
from: '[[low_min]]'
positions:
icon: 'off'
indicator: 'off'
card_mod: null
style: |
ha-card {
padding: 12px;
margin-left: 12px;
--bar-card-border-radius: 12px;
--mush-rgb-red: 244, 67, 54;
--mush-rgb-pink: 233, 30, 99;
--mush-rgb-purple: 156, 39, 176;
--mush-rgb-deep-purple: 103, 58, 183;
--mush-rgb-indigo: 63, 81, 181;
--mush-rgb-blue: 33, 150, 243;
--mush-rgb-light-blue: 3, 169, 244;
--mush-rgb-cyan: 0, 188, 212;
--mush-rgb-teal: 0, 150, 136;
--mush-rgb-green: 76, 175, 80;
--mush-rgb-light-green: 139, 195, 74;
--mush-rgb-lime: 205, 220, 57;
--mush-rgb-yellow: 255, 235, 59;
--mush-rgb-amber: 255, 193, 7;
--mush-rgb-orange: 255, 152, 0;
--mush-rgb-deep-orange: 255, 87, 34;
--mush-rgb-brown: 121, 85, 72;
--mush-rgb-grey: 158, 158, 158;
--mush-rgb-blue-grey: 96, 125, 139;
--mush-rgb-black: 0, 0, 0;
--mush-rgb-white: 255, 255, 255;
}
bar-card-value {
margin: 12px;
font-size: 12px;
font-weight: bolder;
}
bar-card-name {
margin: 12px;
font-size: 12px;
font-weight: bolder;
}
bar-card-backgroundbar {
opacity: 0.2;
filter: brightness(1);
}
bar-card-value::before {
content: " {{ states.sensor.saltlevel_in_percent.state }} % / ";
}
card itself:
- title: Water Softener
cards:
- type: vertical-stack
card_mod:
class: hki
cards:
- type: custom:decluttering-card
template: salt_gauge
variables:
- entity: sensor.saltlevel_in_cm
- icon: cube-outline
- low_max: 2.9
- medium_min: 3
- medium_max: 6.9
- high_min: 7.0
- max: 35
Displays like this:
Used to be like so:
You simply have a small indent issue from what I see.
salt_gauge:
default:
- entity: null
- min: 0
- max: 100
- high: green
- medium: orange
- low: red
- high_max: 100
- high_min: 61
- medium_max: 60
- medium_min: 21
- low_max: 20
- low_min: 0
- severity_low: 20
- severity_medium: 40
- severity_high: 60
card:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 42px auto
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-template-card
entity: '[[entity]]'
icon: mdi:[[icon]]
icon_color: |
{% set colour = states(entity) | int %}
{% if colour <= [[low_max]] %}
[[low]]
{% elif colour <= [[medium_max]] %}
[[medium]]
{% else %}
[[high]]
{% endif %}
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:bar-card
entity: '[[entity]]'
height: 42px
min: '[[min]]'
max: '[[max]]'
entity_row: true
severity:
- color: rgb(var(--mush-rgb-[[high]]))
to: '[[high_max]]'
from: '[[high_min]]'
- color: rgb(var(--mush-rgb-[[medium]]))
to: '[[medium_max]]'
from: '[[medium_min]]'
- color: rgb(var(--mush-rgb-[[low]]))
to: '[[low_max]]'
from: '[[low_min]]'
positions:
icon: 'off'
indicator: 'off'
card_mod:
style: |
ha-card {
padding: 12px;
margin-left: 12px;
--bar-card-border-radius: 12px;
--mush-rgb-red: 244, 67, 54;
--mush-rgb-pink: 233, 30, 99;
--mush-rgb-purple: 156, 39, 176;
--mush-rgb-deep-purple: 103, 58, 183;
--mush-rgb-indigo: 63, 81, 181;
--mush-rgb-blue: 33, 150, 243;
--mush-rgb-light-blue: 3, 169, 244;
--mush-rgb-cyan: 0, 188, 212;
--mush-rgb-teal: 0, 150, 136;
--mush-rgb-green: 76, 175, 80;
--mush-rgb-light-green: 139, 195, 74;
--mush-rgb-lime: 205, 220, 57;
--mush-rgb-yellow: 255, 235, 59;
--mush-rgb-amber: 255, 193, 7;
--mush-rgb-orange: 255, 152, 0;
--mush-rgb-deep-orange: 255, 87, 34;
--mush-rgb-brown: 121, 85, 72;
--mush-rgb-grey: 158, 158, 158;
--mush-rgb-blue-grey: 96, 125, 139;
--mush-rgb-black: 0, 0, 0;
--mush-rgb-white: 255, 255, 255;
}
bar-card-value {
margin: 12px;
font-size: 12px;
font-weight: bolder;
}
bar-card-name {
margin: 12px;
font-size: 12px;
font-weight: bolder;
}
bar-card-backgroundbar {
opacity: 0.2;
filter: brightness(1);
}
bar-card-value::before {
content: " {{ states.sensor.saltlevel_in_percent.state }} % / ";
}
Thanks, I have tried to change indentation and remove null. the card then doesnt load.
has the entity always been null as well?
salt_gauge:
default:
- entity: null
- min: 0
entity was null because I was playing with the ha card editor. my dashboard is all yaml based.
Indentation fixed as you mentioned. Im unsure why it kept breaking when using ha card editor.
