Lovelace with state-dependant colors

Configuration Frontend
8

Current state of playing around:

  - type: custom:card-modder
    card: 
      type: entity-filter
      entities:
        - binary_sensor.door_window_sensor_158d0001A
        - binary_sensor.door_window_sensor_158d0001B
        - binary_sensor.door_window_sensor_158d0001C
        - binary_sensor.door_window_sensor_158d0001D
      state_filter:
        - "on"
      card:
        type: entities
        title: doors open
    style:
      "--paper-item-icon-color": "red"

  - type: custom:card-modder
    card: 
      type: entity-filter
      entities:
        - binary_sensor.door_window_sensor_158d0001A
        - binary_sensor.door_window_sensor_158d0001B
        - binary_sensor.door_window_sensor_158d0001C
        - binary_sensor.door_window_sensor_158d0001D
      state_filter:
        - "off"
      card:
        type: entities
        title: doors closed
    style:
      "--paper-item-icon-color": "green"

“green/closed” works fine, “open/red” not so much:

image

9

Here is what I used to force any state-icon with binary_sensor to be green when off and red when on:

  - type: state-icon
    entity: binary_sensor.entry_doors
    style:
      top: 21%
      left: 97%
      "--paper-item-icon-color": lightgreen
      "--paper-item-icon-active-color": red

Not sure this approach works on temperature though.

Also, what I meant with filter is you can use filter: opacity(n), n=0 (invisible) to 1 to change visibility of images especially ones with state:

  - type: image
    entity: group.garage_mvmnt
    camera_image: camera.carport
    filter: opacity(.4)
    state_filter:
      'on': opacity(1)
5 Likes
10

Great, this does exactly what I wanted!

image

I will still have to look into the temperature thing, but that’s fine.

11

The state-icon worked for me. Is it also possible to change the normal icon to another color.
I use them with a tap action to navigate to another screen.

Thanks

12

Hi, I’m looking for something at home like writing the color of the icon but the text

    entity: binary_sensor.0x158d0002e34367_contact
    style:
      top: 18.5%
      left: 10%
     `--rgb-primary-text-color': lightgreen
     `--rgb-primary-text-active-color`: red

Can you help me?

13

Hi tiimsvk, sure we can try.
What Picture Element are you using, state_icon or state_label, etc.?
What exactly do you want to change color on, only the icon or the text?

14

I need dynamically changing text on state_label

15

The only way I know of to change text color of state_label based on state need to use the config-template-card.

Here is an example, when binary_sensor.wyze_sensors is on, text is cyan, when off, it’s red:

      - type: 'custom:config-template-card'
        entities: [binary_sensor.wyze_sensors]
        card:
           type: picture-elements
           image: /local/banner2.png?v=3
           elements:     
           - type: state-label
             entity: binary_sensor.wyze_sensors
             style: 
               top:  50%
               left: 50%
               font-size: 0.7vw
               color: "${if (states['binary_sensor.wyze_sensors'].state === 'off') 'red';else 'cyan'}"

Help that helps.

16

Hello JTPublic. This code isnt working

17

This format worked for me. Test

type: custom:config-template-card
entities:
  - binary_sensor.wyze_sensors
card:
  type: picture-elements
  image: /local/your_pic.png
  elements:
    - type: state-label
      entity: binary_sensor.wyze_sensors
      style:
        top: 50%
        left: 50%
        font-size: 40px
        color: >-
          ${if (states['binary_sensor.wyze_sensors'].state === 'off')
          'red';else 'cyan'}
18

Placing whole picture-elements card inside a config-template-card (CTC) - not a good way.
Place a particular element inside CTC instead.
Also, using CTC for CSS styling - not good at all; better to use card-mod dynamic variable inside a native “style” option.

1 Like
19

Appreciate the advice! I’m not real familiar with the in and outs of the config template card… I did notice a slight delay.

20

Jinja operates on a server, JS on a client. Same result (like “colorize a text”) may take different time for processing.

21

I was simply focus on the card code and didn’t look at the bigger picture. Something like this?

type: picture-elements
elements:
  - type: state-label
    entity: 'light.pc_lights'
    style:
      top: 32%
      left: 40%
    card_mod:
      style: |
        :host {
          color: {{ 'red' if is_state(config.entity, 'on') else 'green' }}
              }
image: /local/your_pic.png
22

What you are doing is:

  • do not define a color by a native “style” option
  • define a color by card-mod.

Alternative way - what I am using and which I recommend:

  • define a color = variable in the native “style”
  • define a variable by card-mod.
23

Gotcha, I’ll try that method.

24

Is this the method you suggested?

type: picture-elements
card_mod:
  style: |
    ha-card {
      {{ '--var:red' if is_state('light.pc_lights', 'on') else '--var:blue' }}
            }
elements:
  - type: state-label
    entity: sensor.basement_sensor
    style:
      top: 32%
      left: 40%
      font-size: 40px
      color: var(--var)
25

@kosakenzipfel, the same code still works in my setup.
First, please make sure config-template-card is used and indentations are correct.

As suggested, using config-template-card may not be the best way.
If this still does not work for you, please consider trying suggestions in other helpful posts here.

26

There are 2 ways:

  1. Declare a variable on a picture-elements card’s level - then this variable may be used for a few elements.
  2. Declare a variable on some element’s level - to use this variable for this element only.
27

Thank you all. It works now :slight_smile: