Picture Elements Card conditional

I am trying to set up a picture elements card with conditional formatting.
What I am trying to do is set the color of each element based on the numerical state of the entity
my sensors are on

sensor.server_temp_n:m

where n:m is a number 0:29
they correspond to sensors on my home server.
I want to be able to show the heatmap of the server based on their values.

elements:
  - type: conditional
    conditions:
      - entity: sensor.server_temp_0
        value_template: '{{state.state > 20.00 }}'
        
    elements:
      - type: state-badge
        entity: sensor.server_temp_0
        style:
          top: 40%
          left: 40%
image: 'https://demo.home-assistant.io/stub_config/floorplan.png'
type: picture-elements

This is what I have so far, but obviously it is wrong.

Any help greatly appreciated

I have noticed that I can check for a single value

elements:
  - type: conditional
    conditions:
      - entity: sensor.server_temp_0
        state: "26.00"
    elements:
      - type: state-badge
        entity: sensor.server_temp_0
        style:
          top: 40%
          left: 40%
image: 'https://demo.home-assistant.io/stub_config/floorplan.png'
type: picture-elements

But how do I check if the value is over a certain amount and then change the color

2 Likes

I think I am getting closer but its just not clicking

elements:
  - type: state-label
    entity: sensor.server_temp_0
    condition:
      condition: numeric_state
      above: 30.00
      below: 40.00
    style:
      top: 30%
      left: 40%
      color: white
      background-color: green
      opacity: 80%
image: /local/dl380.jpg
type: picture-elements

According to the docs the only condition options are state and not_state, not condition: numeric_state.

i.e. it only supports binary sensors. Not numeric.

If you want numeric options you will have to create template binary sensors.

Hmm that seems like a kinda fundamental thing to have?
OK thanks for your reply

How did you go with this @zxman?

I’m also pretty interested in this to show in red on a floor plan rooms that have poor air quality.

So far I didn’t find a solution unless I develop a custom element for this. https://www.reddit.com/r/homeassistant/comments/drt84n/picture_elements_card_control_over_css_based_on/ hints towards an ugly workaround that I don’t quite understand yet and is unlikely to work for me.

Note on a few possible options until picture-elements supports more:

Just to confirm the config-template-card works:

type: 'custom:config-template-card'
variables:
  CO2: states['sensor.value'].state
entities:
  - sensor.co2_value
card:
  type: picture-elements
  image: local/floor-plan.png
  elements:
    - type: state-label
      entity: sensor.co2_value
      style:
        top: 10%
        left: 56.5%
        width: 45%
        height: 17%
        background-color: "${CO2 < 1000 ? 'transparent' : CO2 < 2000 ? '#ffcc0050' : '#ff000050'}"
1 Like

Having picture elements support numerical evaluation on state-image and state-filter would be fantastic.

The workarounds represent a mess in what is otherwise a very good solution. Being able to basically just configure picture elements and have the logic simple makes it fun, quick, easy and maintainable.

pls consider this request as an enhancement.

Thanks

7 Likes

Any updates here?

2 Likes