marcel510
(Marcel)
November 23, 2023, 8:03pm
1
Hello everyone,
I have another question.
I have created a beautiful picture element map, and in this, my room temperature is also displayed.
I would like to display this in color depending on the condition of the heating (if the heating is on, show the temperature in red / if the heating is off, show it in green).
Currently, the label is kept quite simple:
- type: state-label
entity: sensor.schlafzimmer_temperatur
style:
top: 48%
left: 42%
color: green
transform: scale(1.5)
Can someone tell me if, and if so, how I can implement it?
Thank you very much in advance and have a nice day.
And sorry for my bad English
Greetings, Marcel
Please check here .
In short:
– define a variable dynamically by card-mod;
– use this variable in “style” option to define a color.
marcel510
(Marcel)
November 27, 2023, 5:44am
3
Thank you,
I read through all this and tried it for a long time.
Unfortunately without success.
Can you perhaps write this to me for the card?
title: Wohn-Essbereich
type: picture-elements
elements:
- type: state-label
entity: sensor.wohnzimmerzieltemperatur
style:
top: 36%
left: 46%
color: black
transform: scale(1.0)
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.more_info
data:
entity: climate.wohnzimmer_raumklima
image: /local/wohnzimmer_neu
Greetings Marcel
Show your code with an attempt, we’ll try to fix it.
marcel510
(Marcel)
November 27, 2023, 8:10am
5
This is my attempt:
title: Wohn-Essbereich
type: picture-elements
elements:
- type: entities
entities:
- entity: input_boolean.fruhschicht
- type: picture-elements
style: |
ha-card {
{% if is_state('input_boolean.fruhschicht','on') %}
--my-state-color: magenta;
--my-transform-style:
{% else %}
--my-state-color: cyan;
--my-transform-style: translate(-50%,-50%)
{% endif %}
}
- type: state-label
entity: sensor.wohnzimmerzieltemperatur
style:
top: 36%
left: 46%
color: var(--my-state-color)
transform: scale(1.0)
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.more_info
data:
entity: climate.wohnzimmer_raumklima
image: /local/wohnzimmer_neu
marcel510
(Marcel)
November 27, 2023, 8:59am
6
I think I got it.
title: Wohn-Essbereich
type: picture-elements
elements:
- type: state-label
entity: sensor.wohnzimmerzieltemperatur
card_mod:
style: >
:host {
color: {% if is_state('climate.wohnzimmer_raumklima', 'heat') %} red {%
else %} green {% endif %};
}
style:
top: 36%
left: 46%
transform: scale(1.0)
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.more_info
data:
entity: climate.wohnzimmer_raumklima
image: /local/wohnzimmer_neu