Step by step guide: Change icon based on state

Configuration
#1

Hi,

I am new to Home assistant and just trying a few things out.

I have magnet sensors on all my doors and windows. By default they have a square icon that changes based on their state.

I want to use another mdi icon and read about templates.

What am I doing wrong here? This is a test for just one sensor, but I would rather have it for all off the same device_Class “Opening”.

# Configure a default setup of Home Assistant (frontend, api, etc)
default_config:

# Text to speech
tts:
  - platform: google_translate

group: !include groups.yaml
automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml


template:
  - binary_sensor:
      - name: Opening
        state: >
          {{ is_state("binary_sensor.lumi_lumi_sensor_magnet_aq2_821ef106_on_off", "on") }}
        icon: >
          {% if is_state("binary_sensor.lumi_lumi_sensor_magnet_aq2_821ef106_on_off", "on") %}
            mdi:lock
          {% else %}
            mdi:lock-open-variant
          {% endif %}

Could someone explain it to me like I was 5?
This seems to be such a basic task to do, yet I struggle to find any similar example and the docs are still a bit confusing for me.

2 Likes
Template icon based on state... without duplicating the logic
Change Dynamic Icon on Garage Door Cover - Does this Require a Sensor Template?
#2

Make the following changes

 - name: Opening
   value_template: |
          {{ is_state("binary_sensor.lumi_lumi_sensor_magnet_aq2_821ef106_on_off", "on") }}
   icon_template: |
          {% if is_state("binary_sensor.lumi_lumi_sensor_magnet_aq2_821ef106_on_off", "on") %}
            mdi:lock
          {% else %}
            mdi:lock-open-variant
          {% endif %}
#3

Did not work for me.

Also any guidance on what is wrong with my config above?
And I would prefer to do this on a per device class basis instead of each sensor.

#4

I am not familiar with the modern template sensors yaml configuration.

Maybe try the old approach.

binary_sensor:
  - platform: template
    sensors:
      opening:
        friendly_name: Opening
        value_template: |
              {{ is_state("binary_sensor.lumi_lumi_sensor_magnet_aq2_821ef106_on_off", "on") }}
        icon_template: |
          {% if is_state("binary_sensor.lumi_lumi_sensor_magnet_aq2_821ef106_on_off", "on") %}
            mdi:lock
          {% else %}
            mdi:lock-open-variant
          {% endif %}
#5

I still cant get it to work.

Instead; how can I set it per device class? The sensors are binary_sensor and device_class opening

Please dumb this down as much as you can and an basic explanation of how it works.

#6

Ran into this and use some of the code for my purpose (a door that can be open / closed or locked). Thank you! In my case a binary sensor does not work since that can only have 2 states, not 3, so I build a “normal” sensor that you can use in Lovelace. Code below, works for me.

@thompy93 perhaps you can try this. Please do make sure that you add the sensor under the correct part of the config. I see in your initial post that you start with “template”, instead of binary sensor: and than template (extra indent).

for example, my code below is in the “sensors” part of my config.

- platform: template
  sensors:
    voordeur:
      friendly_name: "Voordeur"
      #device_class: door # does not work since copy from bin sens.
      value_template: >-
        {% if is_state("binary_sensor.voordeur_contact", "on") %}
          Open
        {% elif is_state("binary_sensor.voordeur_slot", "off") %}
          Locked
        {% else %}
          Closed
        {% endif %}
      icon_template: >-
        {% if is_state("binary_sensor.voordeur_contact", "on") %}
          mdi:door-open
        {% elif is_state("binary_sensor.voordeur_slot", "off") %}
          mdi:door-closed-lock
        {% else %}
          mdi:door-closed
        {% endif %}
3 Likes
#7

Thank you for your suggestion. By the looks of it that should work.
I wrote this post when I was just starting up with Home Assistant, and a little bit confused on how it all worked.

#8

Sounds like you found another solution. Care to share? Tnx

#9

Yeah, sure. The above solutions works fine for groups and entities, and the solution I am using myself.
matthijsberg has a good example.

When I was writing this I was working on a picture card with a house map. Using above solutions and

  - type: state-icon
    entity: vacuum.cleaner
    style:
      position: absolute
      top: 125px
      left: 255px
      transform: scale(0.8,0.8)
      '--paper-item-icon-color': rgb(100,210,255)
      '--paper-item-icon-active-color': rgb(255,69,58)

where

‘–paper-item-icon-color’: rgb(100,210,255)
‘–paper-item-icon-active-color’: rgb(255,69,58)

does the trick setting colors based on state as well.

#10

Thanks.
I am using exactly this code for icon color change.
But was looking for icon change (mdi:icon-name) with state change.
The default icons used by device_class are not always what I need.
Have been struggling with this for a while with a picture-elements card.

This added to my customize.yaml file will change to default icon from the device_class one, but haven’t found a way to change it by state.

binary_sensor.frontporchsmoke:
  friendly_name: FrontPorchSmoke
  icon: mdi:smoke-detector-variant

Thanks again for the reply.

#11

This should work for you as well. You will get a new sensor which changes icon based on state. If you just want to show it in lovelace somewhere there are multiple ways, like the custom button card.

1 Like
#12

Hi! Question, I had a few State Icons - Style Paper Item Icon Colors in a Pictures Elements Card (floorplan)

          - type: state-icon
            style:
              '--paper-item-icon-color': '#107C11'

Since 2022.3.0, they seem to have stopped working. Are you experiencing this as well?

#13

Hi,

Currently on 2022.3.0 and can not see any issues.

#14

Interesting, so I use conditionals (to alert me of the states of things), for example:

      - 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
                tap_action:
                  action: toggle
                style:
                  top: 13%
                  left: 83%
                  '--paper-item-icon-color': '#107C11'

In this case, if the Xbox is off, then there’s an icon that turns it on. If the Xbox is on, then it turns the green. This stopped working after 2022.3.0.

If I drop conditional, and just do

      - type: picture-elements
        elements:
          - type: state-icon
            tap_action:
              action: toggle
            entity: remote.basementxbox1s_remote
            style:
              top: 13%
              left: 83%
              '--paper-item-icon-color': '#107C11'

You are correct, color still works. Think I will file an issue.

#15

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.

#16

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

#17

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.

#18

Oke,

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

Regards

#19

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

#20

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

1 Like