Conditional icon colors with picture-elements

Configuration Frontend
1

Good morning all,

I am working with HA for a while now, and i thought let’s take it to the next step and create an interactive template.

I got it reasonably working, but now i want to adjust the icon color’s when a ‘helper’ is changing value. In this case i have a numeric helper defined and i would like the color of a specific icon to reflect on it.

I have tried several approaches, but nothing seems to be working.
Can you maybe give me a hint what i am doing wrong here?

Many Thanks in advance!

type: picture-elements
elements:
  - type: icon
    style:
      left: 75%
      top: 25%
      color: |-
              {% set e = states('input_number.stal_1_toestand') %}
              {% if (e < 30.0) %}red
              {% else %}green
              {% endif %}
    icon: mdi:liquid-spot
    entity: input_number.stal_1_toestand
    tap_action:
      action: perform-action
      perform_action: ""
      target: {}
    title: Testing icon
image: /api/image/serve/c365f6dd36c4e56420cda973dedc5fb3/512x512
dark_mode_image: /api/image/serve/c365f6dd36c4e56420cda973dedc5fb3/512x512

I also tried it with this approach;

{% if int(states('input_number.stal_1_toestand')) < 30 %}red{% elif int(states('input_number.stal_1_toestand')) > 30 %}green{% endif %}
2

You cannot use templates here. None of stock cards support templating (except Markdown).
Google “picture elements small tutorial” - 1st post - select a link smth like “how to style dynamically”.
In short: set “color: var(—my-color)” and define that “—my-color” variable by card-mod.

1 Like
3

Hi @Ildar_Gabdullin ,

Wow, thanks so much for this!
I searched Google for everything (i thought), but with this you see i need to search better :see_no_evil:

Thanks again, working perfectly :slight_smile:

1 Like
4

You just need to use another search engine.
Use the one of the forum instead.