Elif statments stop working after the 3rd statment

Configuration Frontend
1

When trying to write code to have the background change colors based on the humidity, it appears that the code works until the second statement, but the third statement fails to execute giving the wrong color.

Here’s an example:

entity: sensor.purpleair_indoor_humidity
color: black;
scale: 35px
title: Outdoor Humidity
type: custom:bignumber-card
noneCardClass: custom:bignumber-card
style: |
  ha-card {

  {% set humidity = states('sensor.purpleair_indoor_humidity') %}

  {% if is_number(humidity) and humidity | int < 25 %}
  background: #ff0015;

  {% elif is_number(humidity) and humidity | int >= 25 | int <= 30 %}
  background: #fbff00;

  {% elif is_number(humidity) and humidity | int > 30 | int < 60 %}
  background: #00E400;

  {% elif is_number(humidity) and humidity | int >= 60 | int < 70 %}
  background: #fbff00;

  {% elif is_number(humidity) and humidity | int >= 70 %}
  background: #ff0015;


  {% endif %}


                 }

As you can see, the humidity should be green, but it’s displaying as yellow.

image
image2019×1580 208 KB

Any ideas on how to fix this would be incredibly helpful!

2

You have a few issues with comparing numbers to numbers instead of the sensor to your numbers.

Try this:

style: |
  ha-card {

  {% set humidity = states('sensor.purpleair_indoor_humidity')|float(0) %}

  {% if humidity = 0 %}
  background: #ff00ff;

  {% elif humidity < 25 %}
  background: #ff0015;

  {% elif 25 <= humidity <= 30 %}
  background: #fbff00;

  {% elif  30 < humidity < 60 %}
  background: #00E400;

  {% elif 60 <= humidity < 70 %}
  background: #fbff00;

  {% elif humidity >= 70 %}
  background: #ff0015;

  {% endif %}

There’s no need to check if the humidity is a number with this as the float filter will replace it with 0 if it is not. In this case the background will turn fuchsia to indicate there is an issue with the sensor.

3

Thank you, I really appreciate your help!

I tried the code you suggested, but it made the background transparent instead of assigning a color to the background like it should have.

image
image2093×1680 217 KB

4

I think Tom inadvertently left out the closing curly bracket for the ha-card { } styling element.

Incidentally, if you are using the latest version of card-mod (which I assume you are using here), then it is strongly advised to use the card_mod keyword for styling Lovelace elements:

card_mod:
  style: |
    ha-card {
      {% set humidity = states('sensor.purpleair_indoor_humidity')|float(0) %}
      {% if humidity = 0 %}
      background: #ff00ff;
      {% elif humidity < 25 %}
      background: #ff0015;
      {% elif 25 <= humidity <= 30 %}
      background: #fbff00;
      {% elif  30 < humidity < 60 %}
      background: #00E400;
      {% elif 60 <= humidity < 70 %}
      background: #fbff00;
      {% elif humidity >= 70 %}
      background: #ff0015;
      {% endif %}
    }
1 Like
5

Doh! Thanks.