Picture-Elemtns: dynamically changing color of a State-Label and conditionals elements based on attribute

Hello,

Two Questions:

  1. Is it possible to change the color of a state-label in a picture-element based on a state?
    I tried the following:
type: picture-elements
elements:
  - type: state-label
    entity: sensor.valve_livingroom
    style: |
      ha-card {
        color: {% if states('sensor.valve_livingroom') | float > 0 %} red {% else %} blue {% endif %};
      top: 60%
      left: 60%
      }

Even if I move “top” and “left” outside of “ha-card”, it’s not working. It’s just empty. No error message.

  1. Is it possible to set a conditional element based on an attribute in a picture-element?
type: picture-elements
elements:
  - type: conditional
    conditions:
      - entity: climate.002018a99c23ba
        attribute: 'level', > '0.14' (or somethin similar, instead of state)
    elements:
      - type: image
        image: /local/valve-open.png
        style:
          transform: none
          top: 0%

Thanks for your help!

Jens

do you have card mod installed? If not, that won’t work. Also, the styling needs to be aplied to the picture-elements card. You can’t style elements in the card because there’s already a style field. Card mod cannot step on the toes of existing fields. So you have to use a selector from the picture-elements level to the element you want to change.

You can make a template sensor to pull the attribute out into a state. In your case, I would just build your template into the sensor itself because conditional cannot handle greater than or less than checks.

Thank you for enlightening things up.

I have installed card mod. But yes, if it only works on the picture-element itself, it’s not worth it.
Are there any other possibilities to change the color based on a state?

Thank you. I didn’t thought about that, but good to know that this is a workaround for this question.

Regards,
Jens

Not for picture elements card. You have to get into selectors with card mod.