Lovelace with state-dependant colors

Configuration Frontend
1

I’ve searched the community pages, the HA-reddit-sub and read whatever google spewed out, but it seems all tricks to use value_templates, customization and whatever to change the color of icons or text, like icon_color or rgb_color, only seems to apply to CustomUI and not to Lovelace. Can anyone confirm that?

What I would like to do is painting the rooms temperature blue/green/yellow/red if it is cold/fine/warm/hot, or a red warning if there is a severe weather alert. But, as mentioned above, all to no avail.

If this isn’t possible with Lovelace, I hope it is on the dev to-do list.

2

It’s possible but with a custom card that you yourself develop.

Also, if you spend the time, you can make images with color tints. Then use a picture-glance card and change the image based on the state of a sensor. That’s probably the closest “out of the box” solution that you can do without a custom card.

3

Perhaps take a look at @thomasloven card-modder, a lot can be done with css style and filter.

4

Thanks for pointing me towards card-modder. I got it working without much of a problem, but it paints the whole card - not just one entity.

What I didn’t get is what you mean with filter. Do you mean entity_filters, or state_filters?

What I would like to recreate is the behaviour of the old ha-floorplan. I used to show all door and window-sensor-icons in green and red, depending on wether they are opened or closed, light-icons in yellow if switched on (as it is now) and dark when switched off, and the temperature (displayed as text) in even more colors, depending on the temperature.

5

I’ve been playing with a small form of icon colour depending upon state. I use it with icons to show movement and door opening state being returned from my alarm system. Each alarm sensor returns a value ‘T’ for triggered state and ‘-’ when in a non-triggered state.

I have defined binary_sensors, like this;

- platform: template
  sensors:
  office_movement:
    device_class: motion
    value_template: "{{ is_state('sensor.visonic_z07', 'T') }}"
  front_door:
    device_class: door
    value_template: "{{ is_state('sensor.visonic_z01', 'T') }}"

which means that I can then place sensors on picture-elements cards to show the entity icon only, using

      - type: state-icon
        tap_action: more-info
        entity: binary_sensor.office_movement
        style:
          top: 89%
          left: 53%

image

vs

image
or onto entity cards for the full status

  - type: entities
    entities:
      - entity: binary_sensor.hallway_movement
        name: Hallway Movement
        secondary_info: last-changed
      - entity: binary_sensor.kitchen_movement
        name: Kitchen Movement
        secondary_info: last-changed
      - entity: binary_sensor.office_movement
        name: Office Movement
        secondary_info: last-changed

image

vs
image

Hope that helps.

1 Like
6

Thanks, that is exactly what I am doing right now:

image

As you can see, doors, windows, lights (and motion sensors too) turn yellow if triggered or switched on. That is fine for lights, but for the “alarms” (windows, doors and motion sensors) I would like to have green and red instead. That is something which can’t seem to be done with standard Lovelace, as it seems.

7

Don’t think that is possible yet, at least I’ve not come across any of doing it. Only other option I can offer is the setting of the initial state, but that would still leave the ‘on’ state as yellow.

The off state colour can be set using the style colour setting in the ui card definition

      - type: state-icon
        tap_action: more-info
        entity: climate.office
        style:
          top: 85%
          left: 53%
          "--paper-item-icon-color": green

Ideally you’d want the ‘on’ state to be red, but that doesn’t seem possible.
Hope that helps.

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.