Sensor template Icon color depending on state attribute

Configuration
,
1

Hi

I’m new to HS and hope someone can help me out with this issue. I have a lovelace card, with a custom senor I created for a device (TRV) and I want the sensors icon color to change depending on the state of the sensor.

I have a TRV which outputs a State > Attribute > hvac_action. The hvac_action attribute can be either:

“heating” (if the thermostat is calling for the heating to be turned on) or

“idle” (if the thermostat is satisfied wants the heating to be turned off)

These attributes are not exposed to home assistant as a sensor by default so I cannot show what the TRV is calling for in a lovelace dashboard.

What I did was create a senor by doing the following:

In configuration.yaml add the following code:

sensor: !include sensors.yaml

Make new file > sensors.yaml in HS config root

Created a new sensor “trv_hvac_action” to display if the TRV hvac_action attribute is “heating” or “idle” - added the code below to sensors.yaml:

  - platform: template
    sensors:
      trv_hvac_action:
        friendly_name: "TRV HVAC Action"
        value_template: "{{ states.climate.tze200_ywdxldoj_ts0601_1c1e0dfe_thermostat.attributes.hvac_action }}"

Rebooted the system.

The new sensor “trv_hvac_action” works fine in that when the TVR is “heating” it displays “heating”, and when “idle” it displays “idle”. I would also like the icon to be shown as yellow when “heating” and blue when “idle”. I have attached pictures below showing this with a light switch which does change color (would just like the default blue for “off” and yellow for “on”).

The icon I’m using is: mdi:lightbulb-outline

Hope this makes sense and thanks in advance for any help!!

HS - Icons colour changing
HS - Icons colour changing523×611 13.5 KB

2

You have 2 options here.

Option A: Create a binary_sensor template with device_class: heat. Then use state_color: true in lovelace. This route is more configuration, but it’s using all built in and ‘easy to use’ functions of home assistant.

Option B: Use card_mod to color the icon based on the state of your current sensor. This route tends to be more advanced and it requires custom card mod, but it’s less configuration.

1 Like
3

Thanks for the quick reply Petro. I think I will use option A.

I did the following:

Deleted the “sensors.yaml” file and removed “sensor: !include sensors.yaml” from configuration.yaml

Added to configuration.yaml > binary_sensor: !include binary_sensors.yaml

Created new file in /config > binary_sensors.yaml with the following code:

- platform: template
  sensors:
    trv_hvac_action:
      device_class: heat
      friendly_name: "TRV HVAC Action"
      value_template: "{{ states.climate.tze200_ywdxldoj_ts0601_1c1e0dfe_thermostat.attributes.hvac_action }}"

I am getting the following issues now:

  1. When I add add the code “state_color: true” in lovelace I get the follwoing error:

image
image1089×661 29.2 KB

  1. The TRV output State > Attribute > hvac_action is now only showing “Normal” regardless if the TRV is in “heating” or “idle”

In Idle mode:

image

In Heating mode:

image

4

Your value template is incorrect, and the states will be Normal & Heat. Binary sensors are on or off, nothing else. For device_class: heat, on is Heat off is Normal. You won’t be able to get it to say Idle & Heating.

Change your value_template to:

      value_template: "{{ is_state_attr('climate.tze200_ywdxldoj_ts0601_1c1e0dfe_thermostat', 'hvac_action', 'heating') }}"
2 Likes
5

Also, don’t reply to the thread, reply to the person. Otherwise, they do not get notified.

1 Like
7

Not sure how to reply to person, did this reply to you OK?

8

Thank you very much Petro. worked perfectly and now icons change color as they should.

I did the following if anyone else has the same issue:

In configuration.yaml add:

binary_sensor: !include binary_sensors.yaml

Make new file > binary_sensors.yaml in /config root

For icon to change color depending on TRV mode (heating or idle) add code below to binary_sensors.yaml:

- platform: template
  sensors:
    trv_hvac_action:
      device_class: heat
      friendly_name: "TRV HVAC Action"
      value_template: "{{ is_state_attr('climate.tze200_ywdxldoj_ts0601_1c1e0dfe_thermostat', 'hvac_action', 'heating') }}"

Reboot HS

NOTE: no need add state_color: true in lovelace, everything just works:

TRV in Idle mode:

image

TRV in Heating mode:

image

9

It would be nice to set the color of the TRV icon depending on % open of the valve. % = 0 - blue,%> 0 - yellow. How to do it?

10

Just use the code above, when TVR %=0 it means its not heating and will be blue, when it is heating the %>0 and then changes to yellow.