Yes it certainly is. I have edited my above post to make it a bit clearer. The output of the template in the sensor must be below 250 characters for this to work. Sensor State character limit.
The code may be easier to interpret like this
value_template: >-
--ha-card-background:
{%- set dew = states('sensor.text_dewpoint_comfort_outside') %}
{%- if dew == 'Very Dry' %} radial-gradient(circle, deepskyblue, 55%, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15)
{%- elif dew == 'Dry' %} radial-gradient(circle, mediumaquamarine, 55%, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15))
{%- elif dew == 'Pleasant' %} radial-gradient(circle, limegreen, 55%, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15))
etc...
{%- endif %} !important;
2 Likes
Right so if I wanted to add a generic one considering I want to keep the colors constant between all AC Split units, how would I achieve this?
The entities I have are
climate.living_ac_living_ac
climate.garage_ac_garage_ac
climate.master_ac_master_ac
Dont think I have deciphered how to do this.
This effect is what I need.
ha-card {
--chip-background:
{% if is_state("climate.living_ac_living_ac", "heat_cool") %}
rgba(255, 165, 0, 0.2);
{% elif is_state("climate.living_ac_living_ac", "heat") %}
rgba(255, 99, 71, 0.2);
{% elif is_state("climate.living_ac_living_ac", "cool") %}
rgba(0, 191, 255, 0.2);
{% elif is_state("climate.living_ac_living_ac", "fan_only") %}
rgba(60, 179, 113, 0.2);
{% elif is_state("climate.living_ac_living_ac", "dry") %}
rgba(147, 112, 219, 0.2);
{% else %}
rgba(180, 160, 0, 0.2); /* Default color */
{% endif %}
padding: 0.5px !important;
border-radius: 100px !important;
}
# TEMPLATE SENSORS -----------------------------------------------------------
- platform: template
sensors:
# Template AC Color display
ac_color:
unique_id: 99999999999999
friendly_name: "AC Color"
value_template: >-
{% if is_state('ac_color','heat_cool') %}
--ha-card-background: rgba(255, 165, 0, 1);
{% if is_state('ac_color','auto') %}
--ha-card-background: rgba(255, 165, 0, 1);
{% if is_state('ac_color','heat') %}
--ha-card-background: rgba(247, 2, 2, 1);
{% if is_state('ac_color','cool') %}
--ha-card-background: rgba(18, 60, 250, 1);
{% if is_state('ac_color','fan_only') %}
--ha-card-background: rgba(6, 148, 148, 1);
{% if is_state('ac_color','dry') %}
--ha-card-background: rgba(235, 157, 2, 1);
{% else %}
--ha-card-background: rgba(180, 160, 0, 0.2);
{% endif %}
card_mod:
style: |
ha-card {
{{states('ac_color')}}
Yep that is how you would do it. But you would need a sensor for each A/C to reflect the state colour. Unless you set them all to the same mode everytime.
Oh right. This is why I could not understand how its going to know which AC to cater for
Whats the benefit of doing this in the config.yaml in that case?
Advantage is if it is a long template repeated on multiple lovelace dashboards like the
sticky floating navigation menu or simple air comfort card. You just change the colours from configuration.yaml and it will update all.
Plus reduces the amount of scrolling when editing lovelace dashboards in yaml. I have reduced 100’s of lines in my dashboards.
I forgot one level
sensor:
- platform: template
sensors:
Yes but the --ha-card-background: has to be Infront of radial-gradient.
The output of the template sensor, creates the full line of code that would be used in the card-mod to change the colour.
This is an example of what my template colour sensors output.
Try
sensor:
- platform: template
sensors:
color:
friendly_name: "Color"
unique_id: color
value_template: |
--ha-card-background:
{%- set dew = states('climate.living_room') %}
{%- if dew == 'heat' %} orange
{%- elif dew == 'cool' %} green
{%- elif dew == 'off' %} red
{%- endif %} !important;
not perfect, but should provide an example of what I mean.
1 Like
The --ha-card-background has to output inline with the colour. You create the sensor to output the line of code you would insert into the card mod.
sensor:
- platform: template
sensors:
color:
friendly_name: "Color"
unique_id: color
value_template: >-
{%- set dew = states('climate.living_room') %}
{%- if dew == 'heat' %}--ha-card-background: orange;
{%- elif dew == 'cool' %}--ha-card-background: green;
{%- elif dew == 'off' %}--ha-card-background: red;
{%- endif %} !important;
1 Like
I also create sensors that combine attribute states
fan_direction_speed:
friendly_name: "Fan Direction Speed"
unique_id: fan2
value_template: |
{% set direction = state_attr('fan.bedroom_fan', 'direction') %}
{% set speed = state_attr('fan.bedroom_fan', 'percentage') %}
{{[direction,speed]|join("")}}
entity_picture_template: >-
{% set direction = state_attr('fan.bedroom_fan', 'direction') %}
{% set path = "/local/animated/" %}
{% set speed = state_attr('fan.bedroom_fan', 'percentage') %}
{% set ext = ".svg"%}
{{[path,direction,speed,ext]|join("")}}
This one was for applying different SVGs
1 Like
ok definitely makes sense there. Thanks
Can you advise why
sensor:
- platform: template
sensors:
while I have
template:
- sensors:
.....
sensor:
- platform: integration
and others in my config. So whats the difference? Just trying to figure it out. thanks
I use the “>-” to truncate the template I assume the “|” does the same thing in your format.
I will have to try it, apologies on my tablet at the moment which I am struggling to even write post responses with let alone test code.
To my knowledge:
Legacy format
sensor:
- platform: template
sensors:
Current format
template:
- sensors:
.....
1 Like
No worries, this has been a great back and forth.
You need to watch the spaces. Hence why I use >- to truncate spaces. Make sure your template is not putting in spaces. Probably also better off replacing the entire line i.e. icon: mdi.weather
Thanks for that.
I am now trying to do the weather chip background and icon and it aint working for me. Not sure what is wrong this time.
Maybe missing those icons?
- type: action
tap_action:
action: navigate
navigation_path: "#Weather"
icon: |-
{% if is_state("weather.city_hourly", "clear-night") %}
mdi:weather-night
{% elif is_state("weather.city_hourly", "cloudy") %}
mdi:weather-cloudy
{% elif is_state("weather.city_hourly", "fog") %}
mdi:weather-fog
{% elif is_state("weather.city_hourly", "hail") %}
mdi:weather-hail
{% elif is_state("weather.city_hourly", "lightning") %}
mdi:weather-lightning
{% elif is_state("weather.city_hourly", "lightning-rainy") %}
mdi:weather-lightning-rainy
{% elif is_state("weather.city_hourly", "partlycloudy") %}
mdi:weather-partlycloudy
{% elif is_state("weather.city_hourly", "pouring") %}
mdi:weather-pouring
{% elif is_state("weather.city_hourly", "rainy") %}
mdi:weather-rainy
{% elif is_state("weather.city_hourly", "snowy") %}
mdi:weather-snowy
{% elif is_state("weather.city_hourly", "snowy-rainy") %}
mdi:weather-snowy-rainy
{% elif is_state("weather.city_hourly", "sunny") %}
mdi:weather-sunny
{% elif is_state("weather.city_hourly", "windy") %}
mdi:weather-windy
{% elif is_state("weather.city_hourly", "windy-variant") %}
mdi:weather-windy-variant
{% elif is_state("weather.city_hourly", "exceptional") %}
mdi:weather-exceptional
{% endif %}
card_mod:
style: |
ha-card {
--chip-background:
{% if is_state("weather.city_hourly", "clear-night") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.city_hourly", "cloudy") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.city_hourly", "fog") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.city_hourly", "hail") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.city_hourly", "lightning") %}
rgba(6, 148,148, 1);
{% if is_state("weather.city_hourly", "lightning-rainy") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.city_hourly", "partlycloudy") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.city_hourly", "pouring") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.city_hourly", "rainy") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.city_hourly", "snowy") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.city_hourly", "snowy-rainy") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.city_hourly", "sunny") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.city_hourly", "windy") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.city_hourly", "windy-variant") %}
rgba(6, 148,148, 1);
{% elif is_state("weather.city_hourly", "exceptional") %}
rgba(6, 148,148, 1);
{% else %}
rgba(6, 148,148, 0.2); /* Default color */
{% endif %}
padding: 0.5px !important;
border-radius: 100px !important;
}
> and | are very similar and simply format the output differently.
I agree always good to have good conversation and learn new template styles. I am a Luddite with templates, just learned by reading and copying code. Even though I have a reasonable enough knowledge now to write templates, not a journey without its frustrations.
1 Like