zxman
May 15, 2020, 3:12pm
1
I am trying to set up a picture elements card with conditional formatting.
sensor.server_temp_n:m
where n:m is a number 0:29
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
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
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
May 15, 2020, 10:33pm
5
Hmm that seems like a kinda fundamental thing to have?
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
8 Likes
conditional seems to work… but does not get updated, you need to refresh the view
type: picture-elements
tap_action:
action: none
elements:
- type: conditional
conditions:
- entity: input_boolean.bmw_in_tha_house
state: "on"
elements:
- type: custom:config-template-card
variables:
- states['sensor.img_path_2d'].state
tap_action: none
hold_action: none
entities:
- sensor.img_path_2d
element:
type: image
image: ${vars[0] +'/BMW_in_garage.png'}
style:
top: 50%
left: 50%
width: 100%
