Change color using card-mod

Configuration Frontend
1

changing it hardcoded to red works, so the card works, but not when using “if”, which is supposed to change the first entry to red if any of the other three is lower.

this works:

type: entities
entities:
  - entity: sensor.temp_eg_schlafzimmer_temperature
    name: Schlafzimmer
    card_mod:
      style: |
        :host {
          color: red
        }
  - entity: sensor.temp_og_ost_temperature
    name: Ost
  - entity: sensor.temp_og_west_temperature
    name: West
  - entity: sensor.temp_og_sud_temperature
    name: Süd
show_header_toggle: false
title: Temperature Sensors

this doesn't:

type: entities
entities:
  - entity: sensor.temp_eg_schlafzimmer_temperature
    name: Schlafzimmer
    card_mod:
      style: |
        :host {
          color: |
          [[[
              if (states['sensor.temp_og_ost_temperature'].state < states['sensor.temp_eg_schlafzimmer_temperature'].state ||
                  states['sensor.temp_og_west_temperature'].state < states['sensor.temp_eg_schlafzimmer_temperature'].state ||
                  states['sensor.temp_og_sud_temperature'].state < states['sensor.temp_eg_schlafzimmer_temperature'].state) {
                return 'red';
              } else {
                return 'inherit';
              }
          ]]]
          }
        }
  - entity: sensor.temp_og_ost_temperature
    name: Ost
  - entity: sensor.temp_og_west_temperature
    name: West
  - entity: sensor.temp_og_sud_temperature
    name: Süd
show_header_toggle: false
title: Temperature Sensors

ideas?

2

card_mod uses jinja templates (the syntax used in dev tools templates and all of backend HA), and not the Javascript you are using.

rewrite that template, test it in dev tools and you’re set. for a gazillion examples, visit the dedicated thread… if you had searched for that, you could not have missed it…

3

thanks for the tip.
I asked chatgpt to rewrite the code to jinja.
Worked immediately :slight_smile:

type: entities
entities:
  - entity: sensor.temp_eg_schlafzimmer_temperature
    name: Schlafzimmer
    card_mod:
      style: |
        :host {
          color: red;
          {% if states['sensor.temp_og_ost_temperature'].state < states['sensor.temp_eg_schlafzimmer_temperature'].state or
                states['sensor.temp_og_west_temperature'].state < states['sensor.temp_eg_schlafzimmer_temperature'].state or
                states['sensor.temp_og_sud_temperature'].state < states['sensor.temp_eg_schlafzimmer_temperature'].state %}
            color: red;
          {% else %}
            color: inherit;
          {% endif %}
        }
  - entity: sensor.temp_og_ost_temperature
    name: Ost
  - entity: sensor.temp_og_west_temperature
    name: West
  - entity: sensor.temp_og_sud_temperature
    name: Süd
show_header_toggle: false
title: Temperature Sensors
4

yeah, well that is obvious… not the best of templates, you should really try and understand why asking ChatGpt is not an accepted tool in this community.
its just a very bad template you are using now.

5

Didn’t know that, sorry, but this is actually working, with minimal effort.
I’m looking into all that yaml code etc. but that takes a lot more time.

In case you want to elaborate, what would be a better code?
I guess not setting it red first and then overwriting it again?

6

no, most importantly the jinja syntax is not right. you’ve got to learn some basic templating stuff, and understand all templates return strings. You are comparing strings, not numbers…
it might seem to work, but it really doesnt. you need to ‘cast’ those states to a float or int.

next, you would need to add defaults to those numbers because if the entity would become unavailable the template would fail.

lastly, the main syntax error here is states['sensor.temp_og_ost_temperature'].state while it should be
states('sensor.temp_og_ost_temperature')

but that is all explained in the template documentation as linked on developer-tools/template which I repeat you should try and grasp

if, and only if, all of that would be fixed, then you could have a look and use it in card_mod, which has its own challenges.

7

I see, I’m gonna take a look.

Using strings instead of float is certainly a problem, this looking better ? (already learning)

states('sensor.temp_og_west_temperature') | float < states('sensor.temp_eg_schlafzimmer_temperature') | float

and I removed the first red definition.

But for the sake of the discussion, it doesn’t need to be foolproof, like the default values.

8

yes that is better. but the default values isnt simply a matter of foolproof… you got to understand the system can break on those things, and the errors will be abundant

simply adding the default value there or some other guard (is_number would be good) could save lives on occasion…

back to card_mod: when these templates start to become a bit too complicated, you can also create a template sensor, and use that in the card_mod

    card_mod:
      style: |
        :host {
          color: {{'red' if is_state('binary_sensor.color_alert_schlafzimmer_temperature','on') else 'inherit'}};
        }

:wink:

like this:

template:

  - binary_sensor:

      - unique_id: color_alert_schlafzimmer_temperature
        name: Color alert schlafzimmer temperature
        state: >
          {{ states('sensor.temp_og_ost_temperature')|float(0) < 
             states('sensor.temp_eg_schlafzimmer_temperature')|float(0) or

             states('sensor.temp_og_west_temperature')|float(0) < 
             states('sensor.temp_eg_schlafzimmer_temperature')|float(0) or

             states('sensor.temp_og_sud_temperature')|float(0) < 
             states('sensor.temp_eg_schlafzimmer_temperature')|float(0) }}
9

Saving lives? :slight_smile:
it’s only to remind me to open the window, let the room cool down and there is also an automation telling me that using alexa.

This is me learning :slight_smile:

thanks mate