Hello Guys, I would like to ask you I have issue with installing blueprints it shows me this. Do you have any tips how to solve it? Thank you in advance
That didn’t work.
You have an extra space in front of card_mod.
Button Card and Auto Entities are front end addons you need to install through HACS. did you do that?
Still not working. Hm.
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
style: |
ha-card {
padding-bottom: 14px !important;
}
primary: Daniels
secondary: |
Currently: {{ state_attr('climate.daniel_s', 'hvac_action') }}
icon: |-
{% set mode = states('climate.daniel_s') %}
{% if mode == 'off' %}
mdi:power
{% elif mode == 'cool' %}
mdi:snowflake
{% elif mode == 'heat' %}
mdi:fire
{% 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:
styles: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
--icon-box-shadow: 0px 0px;
animation: rotation linear infinite;
{%- set status = state_attr('climate.daniel_s','hvac_action') %}
{%- if status == 'cooling' or status == 'heating' %}
animation-duration: 3s;
{%- endif %}
}
entity: climate.daniel_s
tap_action:
action: more-info
Move it to be inline with type and remove the style at the top. You can add your padding-bottom to the ha-card that contains your animation.
Also looks like @keyframes needs to be inline with ha-card.
So I had styles instead of style and now the entire area is spinning.
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
primary: Daniels
secondary: |
Currently: {{ state_attr('climate.daniel_s', 'hvac_action') }}
icon: |-
{% set mode = states('climate.daniel_s') %}
{% if mode == 'off' %}
mdi:power
{% elif mode == 'cool' %}
mdi:snowflake
{% elif mode == 'heat' %}
mdi:fire
{% 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: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
--icon-box-shadow: 0px 0px;
padding-bottom: 14px !important;
animation: rotation linear infinite;
{%- set status = state_attr('climate.daniel_s','hvac_action') %}
{%- if status == 'cooling' or status == 'heating' %}
animation-duration: 3s;
{%- endif %}
}
entity: climate.daniel_s
tap_action:
action: more-info
Still spinning lol. Looks like I broke the ability to remove the shadow around the icon too.
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
primary: Daniels
secondary: |
Currently: {{ state_attr('climate.daniel_s', 'hvac_action') }}
icon: |-
{% set mode = states('climate.daniel_s') %}
{% if mode == 'off' %}
mdi:power
{% elif mode == 'cool' %}
mdi:snowflake
{% elif mode == 'heat' %}
mdi:fire
{% 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: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
--icon-box-shadow: 0px 0px;
padding-bottom: 14px !important;
animation: rotation linear infinite;
{%- set status = state_attr('climate.daniel_s','hvac_action') %}
{%- if status == 'cooling' or status == 'heating' %}
animation-duration: 3s;
{%- endif %}
}
entity: climate.daniel_s
tap_action:
action: more-info
As in stop using card mod as it may break everything using it in the future?
Finally. I got the snowflake to spin. Any idea why the icon shadow still exists?
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
primary: Daniels
secondary: |
Currently: {{ state_attr('climate.daniel_s', 'hvac_action') }}
icon: |-
{% set mode = states('climate.daniel_s') %}
{% if mode == 'off' %}
mdi:power
{% elif mode == 'cool' %}
mdi:snowflake
{% elif mode == 'heat' %}
mdi:fire
{% 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
{
--icon-animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
--icon-box-shadow: 0px 0px;
padding-bottom: 14px !important;
{%- set status = state_attr('climate.daniel_s','hvac_action') %}
{%- if status == 'cooling' or status == 'heating' %}
animation-duration: 3s;
{%- endif %}
}
entity: climate.daniel_s
tap_action:
action: more-info
And somehow even with the conditions the icon keeps spinning when it’s not cooling or heating.
1 Like
Finally had some time to adjust the really nice looking fan card.
Mine looks like this:
There are a couple of things I can’t seem to get. For example. The currently. I want to have this like ‘cooling’ / ‘heating’, Now my fan doesn’t have a hvac_actions. But for some reason the default card shows this:
It does a translation from Off → Uit and Cool → Koelen, which is exactly what i’m looking for. I do have the state, but that’s all English so if I change the currently to: Currently: {{ states(‘climate.kantoor’) }} it just presents the current state. Which is what i’m asking from the code.
Where does the default card get is ‘status’ from? I found someone translating the state to a different name, but this seems a bit much if the default card is able to translate and I guess it get’s stored somewhere, right?
I found the following:
secondary: |-
{% if is_state(entity, 'heat_cool') %}
Heat/Cool
{% elif is_state(entity, 'heat') %}
Verwarmen
{% elif is_state(entity, 'cool') %}
Cool
{% elif is_state(entity, 'dry') %}
Dry
{% elif is_state(entity, 'fan_only') %}
Fan
{% else %}
Off
{% endif %} / {{ states('sensor.presence_h0') | round(1) }} °C
But for some reason this doesn’t translate to the actual value, it just presents the code as plain text. While in another card it does translate to the code. Any reason?
3 Likes
Super dumm question!
How can I change the state when I have numbers for states.
The entity:
select.heater_jose_temperature_level
can have states 1 or 2.
I need to make a simple card like so:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: select.heater_jose_temperature_level
content_info: state
tap_action:
action: toggle
The state attributes are:
options:
- '1'
- '2'
icon: mdi:thermometer-lines
friendly_name: Heater Jose Temperature Level
Thanks!!!
Thanks for this. I finally got it working after several weeks. Also learnt a lot more on how to navigate the DOM. There is one final thing though - I’d also like to define a few style variable in the same block of code, but it doesn’t like it:
card_mod:
style:
div:
mushroom-conditional-chip:nth-child(7):
mushroom-entity-chip:
$:
mushroom-chip: |
ha-icon {
animation: rotation 3s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
Configuration errors detected:
can not read a block mapping entry; a multiline key may not be an implicit key (131:28)128 | }
129 | }
130 | ha-card {
131 | --chip-box-shadow: none;
----------------------------------^
132 | --chip-background: none;
133 | --chip-spacing: 0;
If I remove the ha-card { … } block it works fine. I think I’m missing the syntax to properly define the ha-card block separately from the main ‘div’ block. Thanks in advance.
Have you gone to Developer Tools → States to look for your climate entity and see what the main state is, and what attributes are available? One of those should give you the ‘status’ you’re looking for.
your fan card look awesome!
would you mind sharing the code please :)?
Yes I have seen those but that isn’t there.
hvac_modes:
- heat_cool
- heat
- dry
- fan_only
- cool
- 'off'
min_temp: 18
max_temp: 30
target_temp_step: 1
fan_modes:
- quiet
- low
- medium
- high
swing_modes:
- 'off'
- vertical
current_temperature: 24
temperature: null
fan_mode: quiet
swing _mode: vertical
outdoor_temp: 14
icon: mdi:air-conditioner
friendly_name: Kantoor - Airco
supported_features: 41
Like this
card_mod:
style:
mushroom-template-chip:nth-child(7)$: |
ha-icon {
animation: rotation 3s linear infinite;
}
@keyframes rotation {
100% {
transform: rotate(360deg);
}
}
.: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
3 Likes
Perfect!!! Thank you!!