zxman
(zxman)
May 15, 2020, 3:12pm
1
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
zxman
(zxman)
May 15, 2020, 3:17pm
2
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
zxman
(zxman)
May 15, 2020, 3:54pm
3
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
tom_l
May 15, 2020, 7:15pm
4
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.
zxman
(zxman)
May 15, 2020, 10:33pm
5
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