Picture Element and state icon change color

jugla · April 16, 2020, 10:24am

Hello,
I’ve just found the picture-element https://www.home-assistant.io/lovelace/picture-elements/

I drawn my appartment plan , and I wanted to change the color of my PC depending on its state (whether it is on or not).
I have a device tracker that say “home” or “not_home”.

I don’t know how to do it in a easy way. What I have done is with a conditional element.
Here after the PC is call bonite and device tracker is managed by my freebox.
The PC icon comes green if at home and red if not

type: picture-elements
title: state of device (action=history)
elements:

  - type: conditional
    conditions:
      - entity: device_tracker.bonite_2
        state: home
    elements:
      - type: state-icon
        entity: device_tracker.bonite_2
        title: PC Windows
        style:
          top: 28%
          left: 34%
          '--paper-item-icon-color': green
  - type: conditional
    conditions:
      - entity: device_tracker.bonite_2
        state: not_home
    elements:
      - type: state-icon
        entity: device_tracker.bonite_2
        title: PC Windows
        style:
          top: 28%
          left: 34%
          '--paper-item-icon-color': red

image: /local/plan_home_N.jpg

I would like to use a template . For instance in '--paper-item-icon-color': red
But no way.

Any idea ?

jugla · April 16, 2020, 1:04pm

Here is anyone, who can give some help with https://github.com/thomasloven/lovelace-card-mod#mod-card. I’m stuck.

jugla · April 16, 2020, 2:14pm

Here a solution with card-mod (get idea from https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/102)

Add in the main part of picture-element

title: state of device (action=history)
type: picture-elements
style: |
  ha-card {
    --my-color-plug-balcon: {% if states('device_tracker.meross_smart_switch_2') == "home" %} green {% else %} red {% endif %};
    --my-color-cpl1: {% if states('device_tracker.cpl1200ac_1_2') == "home" %} green {% else %} red {% endif %};
  }

and use these variables inside elements

elements:
  - entity: device_tracker.meross_smart_switch_2
    icon: 'mdi:power-socket-eu'
    style:
      left: 15%
      top: 35%
      '--paper-item-icon-color': var(--my-color-plug-balcon)
    title: main plug
    type: state-icon
  - entity: device_tracker.cpl1200ac_1_2
    icon: 'mdi:power-plug'
    style:
      left: 65%
      top: 49%
      '--paper-item-icon-color': var(--my-color-cpl1)
    title: CPL1
    type: state-icon

It 's an ok solution since the color definition can be more complicated (e.g. different threshold for a battery)

jugla · April 17, 2022, 8:36pm

Since HA 2022.4.x, you have to say you want to overwrite state_color.

elements:
  - entity: device_tracker.meross_smart_switch_2
    icon: 'mdi:power-socket-eu'
    state_color: false
    style:
      left: 15%
      top: 35%
      '--paper-item-icon-color': var(--my-color-plug-balcon)
    title: main plug
    type: state-icon
  - entity: device_tracker.cpl1200ac_1_2
    icon: 'mdi:power-plug'
    state_color: false
    style:
      left: 65%
      top: 49%
      '--paper-item-icon-color': var(--my-color-cpl1)
    title: CPL1
    type: state-icon

Tinkerworks · February 11, 2023, 2:46pm

hmmm, trying out to color an icon in regards of a humidity sensor here. Cant get it to work. have i forgotten something? Wont save like this .

type: picture-elements
style: |
  ha-card {
    --my-color-humidity: {% if states('sensor.bad_feuchte')|float > 70 %} red {% else %} green {% endif %}
  }
elements:
  - type: state-icon
    entity: sensor.bad_feuchte
    state_color: false
    style:
      top: 29.7%
      left: 33.5%
      '--paper-item-icon-color': var(--my-color-humidity)
      opacity: 65% 
image: /local/Raumplan.png

jugla · February 11, 2023, 3:15pm

Hello,
Please, in which color , you see your device ?

Tinkerworks · February 11, 2023, 3:51pm

blue, atm as it is the normale state color.
grafik

jugla · February 11, 2023, 6:33pm

Please can you add ; at the end of --my-color-humidity: {% if states('sensor.bad_feuchte')|float > 70 %} red {% else %} green {% endif %}

Msmax · October 10, 2023, 10:00am

Thanks. This was very helpful.
Been struggling for hours and this solved my icon color problem.

kkdahl · January 9, 2024, 9:54pm

Found this post and thought; finally!
But I can’t get it to work, it will not fetch the variable-defined color. It only shows the default blue icon-color. What am I doing wrong?
(Yes, I have the card-mod )

type: picture-elements
image: local/test-floorplan.jpg
style: |
  ha-card {
    --my-color-vindue-kontor: {% if states('binary_sensor.kontor_sensor_vindue_contact') == "open" %} red {% else %} green {% endif %};
  }
elements:
  - type: state-icon
    entity: binary_sensor.kontor_sensor_vindue_contact
    icon: mdi:window-closed
    state_color: false
    style:
      left: 80%
      top: 80%
      '--paper-item-icon-color': var(--my-color-vindue-kontor)

kkdahl · January 10, 2024, 1:04pm

Got it to work:

type: picture-elements
image: local/test-floorplan.jpg
card_mod:
  style: |
    :host {
      --color-vindue-kontor: {% if states('binary_sensor.kontor_sensor_vindue_contact')== 'on' %} red {% elif states('binary_sensor.kontor_sensor_vindue_contact')== 'unavailable' %} grey {% else %} green {% endif %};
    }
elements:
  - type: state-icon
    entity: binary_sensor.kontor_sensor_vindue_contact
    icon: mdi:window-closed-variant
    state_color: false
    style:
      left: 80%
      top: 80%
      '--paper-item-icon-color': var(--color-vindue-kontor)

jugla · January 10, 2024, 8:38pm

Thanks for the new way to use card_mod.

Wingnut · January 12, 2024, 4:48pm

I just tried your solution but it only shows the required color in the off state. Once on I get the default yellow. Here’s my code in case I got something wrong.

  - type: picture-elements
    image: /local/FloorPlanGround4FirePanel695Y.jpg
    card_mod:
      style: |
        :host {
          --color-vindue-kontor: {% if states('light.socket5')== 'on' %} purple {% elif states('light.socket5')== 'unavailable' %} grey {% else %} blue {% endif %};
        }
    elements:
      - type: state-icon
        entity: light.socket5
        icon: mdi:television-ambient-light
        tap_action:
          action: toggle
        style:
          top: 25%
          left: 70%
          '--mdc-icon-size': 40px
          '--paper-item-icon-color': var(--color-vindue-kontor)

Can I change the --color-vindue-kontor: bit to something in english.

Thanks

kkdahl · January 30, 2024, 9:05am

Try adding “state_color: false”
and the --color-vindue-kontor is just a variable, you can change that to anything you want.

  - type: picture-elements
    image: /local/FloorPlanGround4FirePanel695Y.jpg
    card_mod:
      style: |
        :host {
          --whateveryouwant: {% if states('light.socket5')== 'on' %} purple {% elif states('light.socket5')== 'unavailable' %} grey {% else %} blue {% endif %};
        }
    elements:
      - type: state-icon
        entity: light.socket5
        state_color: false
        icon: mdi:television-ambient-light
        tap_action:
          action: toggle
        style:
          top: 25%
          left: 70%
          '--mdc-icon-size': 40px
          '--paper-item-icon-color': var(--whateveryouwant)

Th_User · February 7, 2024, 8:57am

for some reason this is not working?

type: picture-elements
image: /local/ioniq5/HomeScreen.png
width: 100%
hight: 100%
card_mod:
      style: |
        :host {
          --whateveryouwant: {% if states('binary_sensor.ioniq_5_engine')== 'on' %} purple {% elif states('binary_sensor.ioniq_5_engine')== 'unavailable' %} grey {% else %} green {% endif %};
        }
elements:
  - type: state-label
    entity: sensor.ioniq_5_total_driving_range
    style:
      top: 10.7%
      right: 15%
      font-size: 200%
  - type: custom:bar-card
    entity: sensor.ioniq_5_ev_battery_level
    positions:
      name: null
      icon: 'off'
      value: inside
    style:
      top: 6.5%
      left: 10%
      background: none
      box-shadow: none
      text-shadow: none
      transform: none
      overflow: hidden
      border-radius: 0px
      width: 38%
    height: 25px
    min: 0
    max: 100
    severity:
      - color: Red
        from: 0
        to: 25
      - color: Orange
        from: 26
        to: 50
      - color: Green
        from: 51
        to: 100
  - type: state-icon
    entity: binary_sensor.ioniq_5_engine
    icon: mdi:power
    state_color: false
    style:
      top: 22%
      left: 15%
      '--paper-item-icon-color': var(--whateveryouwant)
      transform: scale(2.3,2.3)

Th_User · February 7, 2024, 8:57am

nevermind works but not in the preview xD
sorry!

homie22 · October 20, 2024, 8:51pm

This works!
But how would I do it, if I have more than one light?

I wouldn’t want to repeat the code x-times for each light.