Marius, what I need to know is how to call the “variables.var_select_option_value” in jinja2? I don’t know the syntax? Thanks!
that might be a problem, because that is something that lives in the Frontend, and Jinja is connected with backend…
It makes me speak out my earlier thought, on why you would want to write this ‘generic’ template for all button cards? why not only do this on these specific cards, so you can leave out that test.
Could any CSS gurus help me with this. What I am trying to achieve is the fade in animation on page load. And then when I hover over the card, transition the opacity again. The opacity on hover changes but it does not respect the duration/fade.
- type: "custom:button-card"
entity: sun.sun
styles:
card:
- animation: fade-in 1s forwards 0.3s ease-in
- visibility: hidden
- transition: opacity 1.5s ease-in-out
extra_styles: |
@keyframes fade-in {
0% {opacity: 0;}
100% {opacity: 1; visibility: visible;}
}
@media (hover: hover) {
ha-card:hover {
opacity: 0.5 !important;
}
}
1 Like
Not a big issue for card-mod & SOME other use-cases for jinja, but compare these variants:
where the last variant leads to
i.e. here for card-mod it is a matter of a compact look (although card-mod will work anyway).
Marius, because I have many cards with the same needs… So basically it’s not possible to read a variable set in each card? Unless it’s the main entity? That’s pretty frustrating?
I’ll need to fing a workaround…
type: custom:button-card
entity: sun.sun
variables:
COLOR: red
card_mod:
style: |
div#img-cell > ha-state-icon {
{% if config.entity.startswith('sun.') -%}
color: {{config.variables['COLOR']}} !important;
{%- endif %}
}
Ildar, if this is possible it would be amazing!
I tried the following code, but it doesn’t seem to work, unfortunately. I might have done something wrong?:
card_mod:
style: |
div#img-cell > ha-state-icon {
{% if config.entity.startswith('switch.') -%}
{%- if states(config.entity) == 'on' -%}
color: rgb(0,100,255) !important;
{%- else -%}
color: Silver !important;
{%- endif -%}
{%- elif states(config.entity) == {{config.variables['var_select_option_value']}} -%}
color: rgb(0,100,255) !important;
{%- endif %}
}
I don’t know if the “elif” part is OK?
Many thanks!!
Because you tried to use a template inside a template.
Should be like (untested)
{%- elif states(config.entity) == config.variables['var_select_option_value'] -%}
Ildar, wow, it works! Many thanks again, you’re too much 
One more thing, how can I do a negation in jinja? Is it possible to use the exclamation mark?:
{%- if !config.variables['var_select_option_value'] -%}
Not a huge expert in jinja.
What is a purpose of this “!config.variables[‘xxx’]”?
Just to check that this variable is defined?
If yes - try smth like
{% if config.variables['xxx'] is defined %}
...
Well, you’re right, I set it as null unless the card defines it, so I’ll need to check if it’s null or “is defined” as you suggest…
Can I do:
{% if config.variables['xxx'] is defined && config.variables['xxx'] is not null %}
Try smth like
{% if config.variables['xxx'] is defined and config.variables['xxx'] != 'null' %}
See, most of these things you may test yourself in Dev tools → Template
{% set config = {
'variables': {'a': 1, 'b': 2, 'c': 'null'},
'd': 3
} %}
{{config.variables['a']}}
{{config.variables['c'] is defined}}
{{config.variables['d'] is defined}}
{{config.variables['c'] != 'null' }}
{{config.variables['c'] == 'null' }}
Ildar I just found this:
{%- elif config.variables['var_select_option_value'] is defined and config.variables['var_select_option_value'] is not null -%}
But it doesn’t work?
I also tried
{%- elif config.variables['var_select_option_value'] != null -%}
It doesn’t work either?
I do not think that “null” is a correct word in jinja…
Check my example from Dev tools, try comparing with a STRING “null”.
I am a “C/C++” person, for me these python/jinja things are smth weird.
I just realized the quotes ‘null’, but it doesn’t work…
How to you initialise unused variables with “null”?
Not even this is workig…:
{%- elif config.variables['var_select_option_value'] is defined -%}
{%- if states(config.entity) == config.variables['var_select_option_value'] -%}
color: rgb(0,100,255) !important;
{%- else -%}
color: Silver !important;
This works:
type: custom:button-card
entity: sun.sun
variables:
COLOR: null
card_mod:
style: |
div#img-cell > ha-state-icon {
{% if config.entity.startswith('sun.') -%}
{%- if config.variables['COLOR'] is defined -%}
color: {{config.variables['COLOR']}} !important;
{%- endif -%}
{%- endif %}
}
I think you can make a template only for switch entities and apply it to the specific entity you want.
- type: horizontal-stack
cards:
- type: custom:button-card # with switch template - custom colors
entity: switch.decorative_lights
name: Switch with template
show_icon: true
show_state: true
template:
- switch_icon_color
- type: custom:button-card # without template - using default state colors
entity: switch.decorative_lights
name: Switch without template
show_icon: true
show_state: true
switch_icon_color:
styles:
icon:
- color: >
[[[
if (entity.state === 'on')
return 'rgb(0,100,255)';
else if (entity.state === variables.var_select_option_value)
return 'rgb(255,0,0)';
else
return 'silver';
]]]
1 Like