Hi,
I am desperately trying to build a heatmap of my floors based on the temperature of the sensors in each room…
I found some samples, but I can’t make any of them work…
Here’s my last attempt:
type: picture-elements
elements:
- type: image
entity: sensor.temperature_sensor_kitchen_kitchen_temperature
style:
left: 40%
top: 55%
width: 25%
opacity: 80%
filter: >
{% set temp =
states('sensor.temperature_sensor_kitchen_kitchen_temperature') | float
%} {% if temp <= 18 %}
hue-rotate(240deg) # Cold (blue)
{% elif temp <= 22 %}
hue-rotate(120deg) # Mild (green)
{% elif temp <= 25 %}
hue-rotate(60deg) # Warm (yellow/orange)
{% else %}
hue-rotate(0deg) # Hot (red)
{% endif %}
image: /local/images/kitchen.png
image: /local/images/firstFloor.png
title: First Floor
The kitchen.png, which is a red square over the kitchen room in the main map doesn’t change color at all…
Previously, I tried this…which didn’t work either…I can’t figure out what is wrong here.
type: picture-elements
elements:
- type: image
entity: sensor.temperature_sensor_kitchen_kitchen_temperature
style:
left: 40%
top: 55%
width: 25%
opacity: 80%
filter: hue-rotate(165deg)
image: /local/images/kitchen.png
state_filter:
# Define filters for different temperature ranges
'> 12': hue-rotate(240deg) # Example for cooler temperatures
'> 13': hue-rotate(240deg)
# ... and so on for different temperatures ...
'> 18': hue-rotate(205deg)
'> 19': hue-rotate(165deg)
'> 23': hue-rotate(0deg) # Example for warmer temperatures
'> 24': hue-rotate(0deg)
image: /local/images/firstFloor.png
title: First Floor