Behaglichkeit im Dashboard

[Gentleman]

Guten Abend,

weiß jemand wie ich im Dashboard mit zwei Werten (Temperatur und Feuchtigkeit) und dem Hintergrundbild "Behaglichkeit" von Wiki dynamisch ein Schnittpunkt zeigen kann? Statisch geht es ja mit einem picture-elements, aber wie kann ich das dynamisch zeigen?
Das sind meine bisherigen Schitte:
image.png

type: picture-elements
image: /local/Temperatur_Feuchtigkeit_behaglich.png
elements:
- type: icon
entity: sensor.air_housekeeper_temperatur
icon: mdi:circle
style:
color: red
width: 100px
top: 50%
left: 50%

[hartmut]

Ich mache das mit einem Diagramm für meine Wärmepumpe.
Screenshot 2024-10-27 165233.png

type: picture-elements
style: |
ha-card {
width: 410px !important;
}
elements:
- type: state-label
entity: sensor.wp_hochdruck_ber
style:
top: 12%
left: 13%
color: red
transform: none
- type: state-label
entity: sensor.wp_saugdruck_ber
style:
top: 63%
left: 78%
color: blue
transform: none
- type: icon
icon: mdi:vector-point
entity: sensor.wp_heissgastemp
card_mod:
style: |
:host {
{% set sauggas = states('sensor.wp_saugdruck_ber') | float %}
{% set min_sauggas = -40 %}
{% set max_sauggas = 5 %}
{% set normalized_sauggas = ((sauggas - min_sauggas) / (max_sauggas - min_sauggas)) %}
{% set left_pos = 16 + (normalized_sauggas * (89 - 16)) %}
{% if left_pos > 100 %}
{% set left_pos = 100 %}
{% elif left_pos < 0 %}
{% set left_pos = 0 %}
{% endif %}

{% set heissgas = states('sensor.wp_hochdruck_ber') | float %}
{% set min_heissgas = 10 %}
{% set max_heissgas = 60 %}
{% set normalized_heissgas = ((heissgas - min_heissgas) / (max_heissgas - min_heissgas)) %}
{% set top_pos = 68 - (normalized_heissgas * (68 - 11)) %}
{% if top_pos > 100 %}
{% set top_pos = 100 %}
{% elif top_pos < 0 %}
{% set top_pos = 0 %}
{% endif %}

left: calc({{ left_pos }}% - 0px);
top: calc({{ top_pos }}% + 0px);
}
style:
"--mdc-icon-size": 50px
transform: translate(-50%, -50%)
color: red
image: local/Einsatzgrenzen.png