Surely my examples were about styling in general.
I believe that templates will not break the styles: it works with static values, it is supposed to work with templated values.
This code causes the icon to change color in animation âOFF â ONâ, do you need it?
Then, the code is wrong, check this: colorize 5s linear 1 normal
all is well, and both color and animation kick in when turned on. If I use the binary_sensor.vijverpompen, I only get the animation and no color is set.
So, the code must be ok, its just that it wont work somehow for the binary. the forwards makes it a gradual coloring, and that is a nice touch, working with the input_boolean.
I thought it might be interfering with the glob customize I have for binary_sensors:
Ive disabled it, and cleared all⌠no effect. as it shouldnât. I also use the same glob for booleans âŚ
input_boolean:
templates:
<<: *state_color
which as said, does work. How odd. As a last resort, Ill make a new binary sensor, based on the boolean.
UPDATE:
yes! that works! now how on earth does this go wrong for the original binary, and not for this tester. Only thing I can think of is I tested it in the dev tools states, and not the real entity state. that cant be, when I posted the original question, the binary was âonâ so should have worked correctly. hmmm
@Ildar_Gabdullin Ive dug into this some more, and I am still very much surprise. If I use config.entity in all fields for the TER, obviously there is a need for an entity (âŚ) and with that, I can not make the coloring happen on the binary. This seems to be caused by custom-ui which sets these domain templates:
as you can see, automation and input_boolean use the identical templates. And be stunned: these do work correctly using the card_mod with config.entity. so both make the icon spin, and color it.
If I take out the config.entity, and use the explicit entity in all templates, like:
- type: entities
title: Color Icon T-e-r
entities:
- type: custom:template-entity-row
# entity: binary_sensor.vijverpompen
icon: >
{{'mdi:engine' if is_state(config.entity,'on') else 'mdi:engine-off-outline'}}
card_mod:
style:
div#wrapper: |
state-badge {
{% if is_state('binary_sensor.vijverpompen','off') %}
animation: rotation 4s linear infinite, colorize 5s linear forwards 1;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes colorize {
0% {
color: var(--text-color-off);
}
100% {
color: aquamarine;
}
}
name: >
Vijverpompen {{'moeten:' if is_state('binary_sensor.vijverpompen','on') else 'mogen:'}}
secondary: >
{% set temp = states('sensor.pond_buiten_sensor_calibrated_temperature')|float %}
{% set dark = 'Licht' if is_state('binary_sensor.dark_outside','off') else 'Donker'%}
{{relative_time(states['binary_sensor.vijverpompen'].last_changed)}} ago, {{dark}} en {{temp}}°C
state: >
{{'Aan' if is_state('binary_sensor.vijverpompen','on') else 'Uit'}}
icon: >
{{'mdi:engine' if is_state('binary_sensor.vijverpompen','on') else 'mdi:engine-off-outline'}}
I also see the icon spin and get colorizedâŚ
now what is going on here. why does binary_sensor not behave like input_boolean and automation⌠for now, beats me.
got his card that auto extracts the attributes of my playing flex players into a markdown card. Id love to add the background of the player to the background using card_mod, but am not sure I can get that out of the template somehow. Would appreciate a look of your keen eyes here.:
- type: custom:auto-entities
show_empty: false
card:
type: entities
title: Plex Playing
filter:
include:
- entity_id: 'media_player.plex*'
state: /playing|paused|'on'/
options:
type: custom:hui-element
card_type: markdown
card_mod:
style: |
ha-card {
box-shadow: none;
margin: 0px -8px 0px -8px;
background: #can I get the config.entity.attributes.entity_picture here?? ;
}
content: >
{% set player = config.entity %}
{%- for attr in states[player].attributes %}
{%- if not attr in ['media_content_id','icon','entity_picture',
'hide_attributes','media_position_updated_at',
'media_duration','media_position','player_source',
'media_content_rating',
'is_volume_muted','username','friendly_name',
'volume_level','supported_features'] %}
{{attr|title|replace('_',' ')}}: {{states[player].attributes[attr]|title}}
{%- endif %}
{% endfor %}
User: {{state_attr(config.entity,'username')}}
- type: custom:auto-entities
show_empty: false
card:
type: entities
title: Plex Playing
filter:
include:
- entity_id: 'media_player.plex*'
state: /playing|paused|'on'/
options:
type: custom:hui-element
card_type: markdown
card_mod:
style: |
ha-card {
box-shadow: none;
background: url({{state_attr(config.entity,'entity_picture')}});
background-size: 100%;
}
content: >
{% set player = config.entity %}
{%- for attr in states[player].attributes %}
{%- if not attr in ['media_content_id','icon','entity_picture',
'hide_attributes','media_position_updated_at',
'media_duration','media_position','player_source',
'media_content_rating',
'is_volume_muted','username','friendly_name',
'volume_level','supported_features'] %}
{{attr|title|replace('_',' ')}}: {{states[player].attributes[attr]|title}}
{%- endif %}
{% endfor %}
User: {{state_attr(config.entity,'username')}}
now only thing left is color the text in an âauto contrastâ color⌠and maybe the auto fit code I cant find right now. background: cover; does about the same, still too big to see all
I canât, its a picture set by/embedded in the playing Plex media file.
about the filter, thatâs not immediately very easy⌠ive also tried mix-blend-mode: difference; and that seems a nice starter, thought it doesnât work as beautifully as here:
its a bit too dark now, and the text doesnt change as it does in the linked examples. As I see it, the filter or mix-blend-mode are applied to the picture, not the text.
