Badge States - "And" state

I am new to this.

I have managed to create badges for my hybrid car. Right now it shows a badge when the car is not charging. I would like to make this more advanced in that it should only show the badge when the car is not charging but only if the battery level is below 50%

Is this possible?

Here is my raw code so far.

         - entity: switch.gte_charging
            name: GTE
            style: |
              :host {
                  --ha-label-badge-size: 40px;
                     }   
            state_filter:
              - 'off'
            show_last_changed: true
            image: /local/passat1.png

What card are you talking about, what do you mean by “badges”?

Sorry…

State Label Badges that pops up in the top of the dashboard view.

Kind of this?

  - entity: switch.test_switch
    name: xxxxx
    image: /local/images/test/blue.jpg
    card_mod:
      style: |
        :host {
          {% if is_state('input_boolean.test_boolean','off') and states('input_number.test_number')|int(0)<35 %}
          display: none;
          {% endif %}
        }

Also, “show_last_changed” option is not available for a badge.

This is my code now. Didnt work. The badge is not showing up even that the charger isnt connected and the battery level is 20%

          - entity: sensor.gte_battery_level
            name: GTE
            image: /local/passat1.png
            card_mod:
              style: |
                :host {
                  {% if is_state('switch.gte_charging','off') and states('sensor.gte_battery_level')|int(0)<80 %}
                  display: none;
                  {% endif %}
                }
  1. Test w/o conditions to check if the badge is hidden.
  2. Place whole code into Dev tools → Template and see how it works. May be your conditions are wrong.
  3. I am not getting “is not showing up even that the charger”, isn’t a typo here?
  4. This “charger isnt connected and the battery level is 20%” - is it same as your condition? If yes - then the “display=none” and the badge is supposed to be hidden, right?

Thank you for trying to help me.

I apologize if I was unclear.

I’ve started using the State Badge as a notification for some devices. This is to get my attention. For example, if a door is open, a small icon of the door appears at the top of my dashboard. I got this to work.

What I want now is for my car to appear as an icon (just like the door) when the charging cable is not connected AND the battery level is below, for example, 50%.

When I try in Developer Tools, I get the following response:

This template listens for the following state-changed events:

Entity: sensor.gte_battery_level
Entity: switch.gte_charging

Post a screenshot with your template.
Like this:

@Ildar_Gabdullin

It seems to return correct values.

Good, than your template is correct:
if switch=OFF and level<50% → hide the badge
But probably you needed opposite:
hide the badge if switch=ON or level>=50 ?

                  {% if is_state('switch.gte_charging','on') or states('sensor.gte_battery_level')|int(0)>=80 %}
                  display: none;
                  {% endif %}

Thanks, i will try that opposite code.

My car is 100% and the external power is ON right now so I tried:

                :host {
                  {% if is_state('binary_sensor.gte_external_power','off') or states('sensor.gte_battery_level')|int(0)<10 %}
                  display: none;
                  {% endif %}
                }

Just to see if the badge appears… It didnt…

We are trying to solve the SIMPLEST task for a few hours.

To debug the code, do what I did - create two test helpers & use them for testing (just to not depend on a real car status):
– input_boolean.test_is_charging (I used switch, this does not matter);
– input_number.test_battery_level (0-100%).

Then again define a rule when the badge should appear:
– if CHARGING or level>=XXX → hide the badge
– if NOT CAHRGING and level<XXX → show the badge

If this is exactly the rule you need - then use my last code:

{% if is_state('input_boolean.test_is_charging','on') or states('input_number.test_battery_level')|int(0)>=80 %}
  display: none;
{% endif %}

If you need the opposite rule - use the previous code:

{% if is_state('input_boolean.test_is_charging','off') and states('input_number.test_battery_level')|int(0)<80 %}
  display: none;
{% endif %}

Add the simple card on the same view:

type: entities
entities:
  - input_boolean.test_is_charging
  - input_number.test_battery_level

and test the card.
And be sure that you have card-mod installed.

@Ildar_Gabdullin
Thank you for your patience. This code did it. :star_struck:

          - entity: binary_sensor.gte_external_power
            name: GTE
            image: /local/passat1.png
            state_filter:
              - 'off'
            card_mod:
              style: |
                :host {
                  {% if is_state('binary_sensor.gte_external_power','on') or states('sensor.gte_battery_level')|int(0)>=80 %}
                  display: none;
                {% endif %}
                }
1 Like

Not sure this is required…