Step by step guide: Change icon based on state

I resolved it. Looks like with 2022.3.0 or greater the style elements get overwritten by the default color of the item.

     - type: picture-elements
        elements:
          - type: conditional
            conditions:
              - entity: remote.basementxbox1s_remote
                state_not: unavailable
              - entity: remote.basementxbox1s_remote
                state: 'off'
            elements:
              - type: state-icon
                entity: remote.basementxbox1s_remote
                tap_action:
                  action: toggle
                style:
                  top: 13%
                  left: 83%
          - type: conditional
            conditions:
              - entity: remote.basementxbox1s_remote
                state: 'on'
            elements:
              - type: state-icon
                entity: remote.basementxbox1s_remote
                state_color: false
                tap_action:
                  action: toggle
                style:
                  top: 13%
                  left: 83%
                  '--paper-item-icon-color': '#107C11'

if I add

                state_color: false

Then it works again. Prior to 2022.3.0, I didn’t need this in there. But now I do.

I’m so lost in where all the configurations should go…

I got a similar situation: I got a night-hook on the front-door → when it’s unhooked the read-contact is closed (off) but Lovelace treat this by default as closed and when you tell lovelace it’s either a door or a lock becomes locked/closed when the contact is closed (off)…
I did a lot of reading and searching the internet, but I don’t understand how this all is fitted into lovelace… I mean if I put the example from @matthijsberg into the developer → template window (for my own sensor) it does seems to work on the template-output, but I am absolutely clueless how to add it to the dashboard -
Handling this (on is off, and off is on) in node-red to activate a light with a certain color is not a problem. Just rewiring the logic.
So where and how do I make this work so lovelace sees a closed binary_sensor as “on” (with appropriate color - become yellow by default when open but should be red - in my case - and pref be green when closed)
Lot of questions - srry that I hijacked/piggy-bagged the thread but I did not really find an answer.
So yeah - where in hassio should this be placed to use on the lovelace dashboard?

- platform: template
  sensors:
    frontdoor_hook: # <-- does this become a new "virtual" sensor ??
                    # binary_sensor.openclose_64 is the actual name of the sensor
      friendly_name: "front-door hook"
      value_template: >-
        {% if is_state("binary_sensor.openclose_64", "on") %}
          hooked
        {% else %}
          unhooked
        {% endif %}
      icon_template: >-
        {% if is_state("binary_sensor.openclose_64", "on") %}
          mdi:door-closed
        {% else %}
          mdi:door
        {% endif %}

Regard

It doesn’t tie into lovelace. You’re making a new sensor (not a binary_sensor). binary_sensors can only be on or off, becuase you want to use hooked/unhooked… you’ll need to create a sensor which accepts any state. Then you’ll use that new sensor in the interface instead of the previous binary_sensor.

Changing colors in dashboards requires custom solutions. It’s not something that native home assistant can do.

Oke,

I understand that.
But where do I exactly add the new sensor.

Regards

It goes in your sensor: section of configuration.yaml.

Thank you @petro

I had to install the file editor plugin for that… While searching I found that I could add an include file like so which makes a lot more sense now:

binary_sensor: !include binary_sensor.yaml

Then I added this yaml into it - some trial and error got involved since I’m (for now) not entirely sure what I’m doing but I got it working. My /config/binary_sensor.yaml has this content now and does what I want (except for the color but that’s for an other day):

- platform: template
  sensors:
    frontdoor_hook:
      device_class: opening
      friendly_name: "front-door hook"
      value_template: >-
        {% if is_state("binary_sensor.openclose_64", "on") %}
          off
        {% else %}
          on
        {% endif %}
      icon_template: >-
        {% if is_state("binary_sensor.openclose_64", "on") %}
          mdi:lock-outline
        {% else %}
          mdi:lock-open-variant-outline
        {% endif %}

image

image

And this is the card I added to lovelace where openclose_64 is the original sensor and frontdoor_hook the custom sensor:

type: entities
entities:
  - entity: binary_sensor.openclose_64
    state_color: true
    name: Test Contact
  - entity: binary_sensor.frontdoor_hook
state_color: true

Things are getting a bit more clear now (but not crystal-)

Regards

3 Likes

I also try to changed icon when the state is changed, but in a Entities Card Configuration

i try several examples but nothing works

does somebody know the solution?

type: entities
entities:
  - entity: binary_sensor.shelly_2_5_volume_wtw_overheating
  - entity: sensor.shelly_2_5_volume_wtw_voltage
  - entity: sensor.shelly_2_5_volume_wtw_device_temperature
  - entity: input_number.wtw_luchtvolume
    icon: mdi:fan-speed-1
  - entity: cover.shelly_2_5_volume_wtw
title: WTW
show_header_toggle: false
state_color: true

“input_number.wtw_luchtvolume”" is an helper with standard mdi:fan icon
and should be :
0.0 = mdi:fan
1.0 = mdi:fan-speed-1
2.0 = mdi:fan-speed-2

I think you only can change an icon at the properties popup of an entity as shown here (my read-contact):


Or when you created a custom sensor you can use the icon_template
Regards

1 Like

what if it’s an existing sensor? I keep getting an error.

It depends a bit on your use case. If you want to give a sensor 3 states it might need to be a different sensor type (typically those sensors are binary sensors that can only have state on/off). So if you want to have > 2 states you need a different sensor type thus a new one.

I know we could go down a rabbit hole with this one. But the state the device reports may only be 2 fundamentally. But the system interface will then have a number of others including unavailable which needs to be taken care of in automations / blueprints. Additionally there is also the ability to build using other HA sensors such as Template, Bayesian, Threshold, Trend add with the ability to add command line and formulas to the math. My point is that even though the devices may only report the basic 2 Binary states there is the ability with Zigbee and Zwave to drill down to the actual device interfaces and obtain other data, as well as apply other math to the change states.

Hi Sjoer,

I am glad you got the custom value and icon template working for binary sensors. From what I understand one creates a new/dummy sensor that “inherits” certain values from your main sensor and those values such as color, icon, state value output can be amended through the template.

What I struggle with is the actual hierarchy/structure of how to put. this into the customisation.yaml file.

Here is my top line file including the part with your code.

default_config:

http:
  use_x_forwarded_for: true
  trusted_proxies:
    - 10.21.0.0/16

automation: !include automations.yaml


sensor:
  - platform: bitcoin
    display_options:
      - exchangerate
      - trade_volume_btc
      - hash_rate
      - market_price_usd


homeassistant:

  binary_sensor:
    - platform: template
      sensors:
        frontdoor_hook:
          device_class: opening
          friendly_name: "front-door hook"
          value_template: >-
            {% if is_state("binary_sensor.status_main_entrance_gate", "on") %}
              off
            {% else %}
              on
            {% endif %}
          icon_template: >-
            {% if is_state("binary_sensor.status_main_entrance_gate", "on") %}
              mdi:lock-outline
            {% else %}
              mdi:lock-open-variant-outline
            {% endif %}


  customize:
    binary_sensor.status_ufh_circulation_pump:
      friendly_name: "G0294 UFH Circulation Pump"
      icon: mdi:kettle


  packages:
    pack_borehole:
      knx:
        switch:
          - name: "G0399 Borehole Pump"
            address: "7/3/14"
            state_address: "7/3/15"

.........
.........
.......

I am getting this error: " extra keys not allowed @ data[‘binary_sensor’]" which I don’t understand.

Any chance to please point me in the right direction?

I am on container installation version 2023.02 which comes as part of the umbrel.com server.
Thanks
Martin

binary_sensor: should be on the same level as home_assistant:, not a child of it.
Better yet, you’d use the more current config schema

template:
  - binary_sensor:

See https://www.home-assistant.io/integrations/template/#state-based-template-binary-sensors-buttons-numbers-selects-and-sensors

Hi Matthias,

Thanks for your help, much appreciated. I must say I struggle a bit (new top HA) when combining information from the main documentation then mixed with community suggestions that (here and there) date back a few years. Obviously schemas and concepts have changed/improved over the years and it was good to now understand how templates in relationship to sensors work.

Here is the code that now works - creating two sensors (not to be mixed up with binary_sensors that are the triggers) that show correct state value and icon. The code is in configuration.yaml and not nested within the homeassistant: object.

template:
  - sensor:
      #Main Garage Door
      - name: "Status Main Garage Door"
        state: >
          {% if is_state("binary_sensor.status_garage_roll_gate", "on") %}
            closed
          {% else %}
            open
          {% endif %}
        icon: >
          {% if is_state("binary_sensor.status_garage_roll_gate", "on") %}
            mdi:garage-variant-lock
          {% else %}
            mdi:garage-open-variant
          {% endif %}
      #Main Entrance Gate
      - name: "Status Main Entrance Gate"
        state: >
          {% if is_state("binary_sensor. status_main_entrance_gate", "on") %}
            closed
          {% else %}
            open
          {% endif %}
        icon: >
          {% if is_state("binary_sensor. status_main_entrance_gate", "on") %}
            mdi:gate
          {% else %}
            mdi:gate-arrow-right
          {% endif %}



homeassistant:



  customize:
    binary_sensor.status_ufh_circulation_pump:

...
...
...
...
    pack_security:
      knx:
        binary_sensor:
          - name: "Status Main Entrance Gate"
            # Closed = 1, Open = 0
            state_address: "9/7/3"

          - name: "Status Garage Roll Gate"
            # Closed = 1, Open = 0
            state_address: "9/7/6"

        button:
          - name: "Button Main Gate"
            address: "9/2/0"
 
          - name: "Button Main Garage"
            address: "9/2/1"
 
          - name: "Button Guest House Gate"
            address: "9/2/2"

Again, thanks for your help.
Rgds
Martin

This is very similar to my code for my garage doors, but I also changed the colors. I’m using custom-ui in HACS and added this to my customize.yaml file

cover.2_car_garage_door_opener:
    friendly_name: '2-Car Garage Door Opener'
    templates:
      icon: >
        if (state == 'open') return 'mdi:garage-open-variant';
        if (state == 'closed') return 'mdi:garage-variant';
        return 'mdi:garage-alert-variant';
      icon_color: >
        if (state == 'open') return 'red';
        if (state == 'closed') return 'green';
        return 'yellow';

cover.1_car_garage_door_opener:
    friendly_name: '1-Car Garage Door Opener'
    templates:
      icon: >
        if (state == 'open') return 'mdi:garage-open';
        if (state == 'closed') return 'mdi:garage';
        return 'mdi:garage-alert';
      icon_color: >
        if (state == 'open') return 'red';
        if (state == 'closed') return 'green';
        return 'yellow';          

1 Like

Thanks for this, Helped me to change text on a single mushroom card chip to peak/off peak/shoulder to show what electricity i’m currently using!

I came up with a solution to control garage doors and show the open/close status with icons. I posted the guide here: Garage Door Openers/Sensors Combo Card - Community Guides - Home Assistant Community (home-assistant.io)

@matthijsberg I got the icon to change, but the state is always Off.

I tried the following to change the left balcony icons without making a new sensor:
(Didn’t work)

###################################
# Change Icons - Attempt
###################################
homeassistant:
  customize:
    binary_sensor.left_balcony_door_contact:
      templates:
        icon: >
          if (state == 'on') return 'mdi:door-sliding-open';
          return 'mdi:door-sliding';
      # icon_template: >
      # {{'mdi:door-sliding-open' if is_state('binary_sensor.right_balcony_door_contact','on') else 'mdi:door-sliding'}};
    # binary_sensor.right_balcony_door_contact:

I tried making a new binary sensor for the right balcony door. The icon works, but the value/state doesn't.

###################################
# Binary Sensors
###################################
binary_sensor:
  - platform: template
    sensors:
      right_balcony_door_contact_template:
        friendly_name: Right Balcony Door Contact Template
        value_template: >-
          {%- if is_state("binary_sensor.right_balcony_door_contact", "on")  -%}
            Open
          {%- else -%}
            Closed
          {%- endif %}
        icon_template: "mdi:door-sliding{{ '-open' if is_state('binary_sensor.right_balcony_door_contact','on') else '' }}"




For the pictures below, the top two sensors are from the devices themselves. The bottom one is the binary sensor I created. Thanks!


Hi,
I am trying similar thing but I don’t have lovelace installed.
I am trying to change state of my wifi icon , based on the signal strength of the wifi_signal.

I have added following to the yaml file


- platform: wifi_signal

    name: "Wifi_signal_db"

    id: wifi_signal_db

    update_interval: 5s

    entity_category: "diagnostic"

  - platform: copy

    source_id: wifi_signal_db

    id: room1_db

    name: "Wifi Signal %"

    filters:

    - lambda: return min(max(2 * (x + 100.0), 0.0), 100.0);

    icon: >-

          {% if sensor.room1_wifi_signal >= '52' %} mdi:wifi-strength-4

          {% elif sensor.room1_wifi_signal < '52' %} mdi:wifi-strength-3

          {% endif %}

    unit_of_measurement: "%"

    entity_category: "diagnostic"

I am gettting following errors

Icons must match the format "[icon pack]:[icon]", e.g. "mdi:home-assistant".

As adanced users here can see, I am new to home assistant, can somebody guide me in solvoing the problem ?

Thanks and Regards

Hi, addind to the above, seeing a post i have modifief the yaml file of my esp32 to following, but the icon is not changing dynamically, it changes only once.
Can any body guide , what is the problem in my yaml code.

esphome:
  name: "room1"
  friendly_name: room1

esp32:
  board: esp32dev
  framework:
    type: arduino

# Enable logging
logger:

# Enable Home Assistant API
api:
  encryption:
    key: "KKaUZtsqqkZuzECMn7rWXmSyNaj/NCfQrwJw6oN/2Bk="

ota:
  
i2c:
  sda: 21
  scl: 22
  scan: true
  id: bus_a

wifi:
  ssid: !secret wifi_ssid
  password: !secret wifi_password

  # Enable fallback hotspot (captive portal) in case wifi connection fails
  ap:
    ssid: "Esphome-Web-Cb77A0"
    password: "dqW2cJNSPWHg"

captive_portal:

sensor:
  - platform: sht4x
    precision: Med
    heater_time: Short
    update_interval: 5s
    temperature:
      id: r1tem
      name: "Temperature"
      accuracy_decimals: 3
    humidity:
      id: r1hum
      name: "Relative Humidity"
      accuracy_decimals: 3
  - platform: wifi_signal
    name: "Wifi_signal_db"
    id: wifi_signal_db
    update_interval: 5s
    entity_category: "diagnostic"
  - platform: copy
    source_id: wifi_signal_db
    id: room1_db
    name: "Wifi Signal %"
    filters: 
    - lambda: >
            int y=min(max(2 * (x + 100.0), 0.0), 100.0);
            if(y>=85) id(room1_db).set_icon("mdi:wifi-strength-4");
            else if (y>65) id(room1_db).set_icon("mdi:wifi-strength-3");
            else if (y>30) id(room1_db).set_icon("mdi:wifi-strength-2");
            else if (y>10) id(room1_db).set_icon("mdi:wifi-strength-1");
            else id(room1_db).set_icon("mdi:wifi-strength-off-outline");
            return y;
    unit_of_measurement: "%"
    entity_category: "diagnostic"

Thanks and Regards,