# Encja - kolor tła na podstawie temperatury

**URL:** <https://forum.arturhome.pl/t/encja-kolor-tla-na-podstawie-temperatury/6459>\
**Category:** Home Assistant\
**Created:** [27 Wrzesień 2022 20:08 UTC](https://forum.arturhome.pl/t/encja-kolor-tla-na-podstawie-temperatury/6459 "2022-09-27T20:08:25Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Autor:** ![ralff\_212](https://forum.arturhome.pl/user_avatar/forum.arturhome.pl/ralff_212/32/11361_2.png) [@ralff\_212](https://forum.arturhome.pl/u/ralff_212)\
**Data wpisu:** [27 Wrzesień 2022 20:08 UTC](https://forum.arturhome.pl/t/encja-kolor-tla-na-podstawie-temperatury/6459/1 "2022-09-27T20:08:25Z")

</div>

Witajcie.  
Chciałbym wykonać karty Encji dla głowic kaloryfera. Mam Encje **climate.korytarz\_degc** w niej atrybut **current\_temperature** chciałbym żeby kolor tła encji był zależny od temperatury

Mam też zewnętrzny termometr czy da radę aby jeśli na dworze jest poniżej 8 stopni na dworze i w pokoju poniżej 22 żeby pokazało przycisk automatyzacji o włączeniu ogrzewania? Ważne to bo np latem 21 w domu jest spoko i nie musi się pojawiać.

---

<div class="post-metadata">

**Autor:** ![krskrab](https://forum.arturhome.pl/user_avatar/forum.arturhome.pl/krskrab/32/8566_2.png) [@krskrab](https://forum.arturhome.pl/u/krskrab)\
**Data wpisu:** [27 Wrzesień 2022 20:37 UTC](https://forum.arturhome.pl/t/encja-kolor-tla-na-podstawie-temperatury/6459/2 "2022-09-27T20:37:09Z")

</div>

> [@Szybkie porady - Kolory i style](https://forum.arturhome.pl/t/szybkie-porady-kolory-i-style/225):
>
> [[Konfiguracja Home Assistant - Szybkie porady - Kolory i style] ](https://www.youtube.com/watch?v=CkVHd60_mHE) Poniżej zamieszczam fragment kodu wykorzystany w filmie szybkie porady: Kolory i style style: | ha-card { background: {% if states('sensor.serwerownia\_tempsensor\_0\_temperature') | int \< 20 %} green {% else %} red {% endif %} ; } span.value { font-size: 38px; margin-right: 4px; } span.measurement { font-size:…

---

<div class="post-metadata">

**Autor:** ![ralff\_212](https://forum.arturhome.pl/user_avatar/forum.arturhome.pl/ralff_212/32/11361_2.png) [@ralff\_212](https://forum.arturhome.pl/u/ralff_212)\
**Data wpisu:** [27 Wrzesień 2022 21:09 UTC](https://forum.arturhome.pl/t/encja-kolor-tla-na-podstawie-temperatury/6459/3 "2022-09-27T21:09:37Z")

</div>

Też tak próbowałem ale mój sensor podaje tylko grzanie\chlodzenie a dane temperatury mam w atrybucie i tego nie umiem przeskoczyć , nigdy nie wiem jak oprzeć coś na danych z atrybutu

---

<div class="post-metadata">

**Autor:** ![krskrab](https://forum.arturhome.pl/user_avatar/forum.arturhome.pl/krskrab/32/8566_2.png) [@krskrab](https://forum.arturhome.pl/u/krskrab)\
**Data wpisu:** [27 Wrzesień 2022 21:29 UTC](https://forum.arturhome.pl/t/encja-kolor-tla-na-podstawie-temperatury/6459/4 "2022-09-27T21:29:04Z")

</div>

A próbowałeś

```auto
...
background: {% if state_attr('sensor.sensor', 'temperatura') | int < 2 %} 
# encja ^ atrybut encji ^ 
....

```

Więcej informacji na temat template, atrybutów…  
[Template sensors - #2 przez artpc](https://forum.arturhome.pl/t/template-sensors/2753/2)

---

<div class="post-metadata">

**Autor:** ![artpc](https://forum.arturhome.pl/user_avatar/forum.arturhome.pl/artpc/32/848_2.png) [@artpc](https://forum.arturhome.pl/u/artpc)\
**Data wpisu:** [27 Wrzesień 2022 22:39 UTC](https://forum.arturhome.pl/t/encja-kolor-tla-na-podstawie-temperatury/6459/5 "2022-09-27T22:39:47Z")

</div>

Kod Karty

```auto
type: custom:vertical-stack-in-card
cards:
  - type: thermostat
    entity: climate.termostat_p
    style: |
      ha-card {
        color: white;
        box-shadow: none;
        background:
        {% if is_state_attr('climate.termostat_p', 'hvac_action', 'heating') %}
          #EB6D00
        {% endif %} ;
        background: 
        {% if is_state_attr('climate.termostat_p', 'hvac_action', 'cooling') %}
          blue 
        {% endif %} ;
        background:
        {% if is_state_attr('climate.termostat_p', 'hvac_action', 'off') %}
          #373F48
        {% endif %} ;
      }
    theme: iOS Dark Mode
  - type: entities
    entities:
      - entity: sensor.pokoj_tw_temperature
        name: W Domu
        icon: hass:none
      - entity: sensor.openweathermap_temperature
        name: Na zewnątrz
        icon: hass:none
    style: |
      ha-card {
        color: white;
        box-shadow: none;
        background:
        {% if is_state_attr('climate.termostat_p', 'hvac_action', 'heating') %}
          #EB6D00
        {% endif %} ;
        background: 
        {% if is_state_attr('climate.termostat_p', 'hvac_action', 'cooling') %}
          blue 
        {% endif %} ;
        background:
        {% if is_state_attr('climate.termostat_p', 'hvac_action', 'off') %}
          #373F48
        {% endif %} ;
      }
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        entity: input_select.hvac_mode
        name: TRYB
        show_name: true
        tap_action:
          action: call-service
          service: input_select.select_next
          service_data:
            entity_id: input_select.hvac_mode
        color_type: icon
        state:
          - operator: template
            value: |
              [[[return states['climate.termostat_p'].state === 'off' ]]]
            icon: mdi:power
            color: white
          - operator: template
            value: |
              [[[return states['climate.termostat_p'].state === 'heat' ]]]
            icon: mdi:fire
            color: rgb(239, 140, 0)
          - operator: template
            value: |
              [[[return states['climate.termostat_p'].state === 'cool' ]]]
            color: blue
            icon: mdi:snowflake
        styles:
          card:
            - background-color: |
                [[[
                  if (states['climate.termostat_p'].attributes.hvac_action == 'heating') 
                    return '#EB6D00';
                  if (states['climate.termostat_p'].attributes.hvac_action == 'cooling')
                    return 'blue';
                  else return '#373F48';
                ]]]
            - color: white
        show_state: false
      - type: custom:button-card
        entity: input_select.preset_mode
        name: ECO
        label: ECO
        tap_action:
          action: call-service
          service: input_select.select_next
          service_data:
            entity_id: input_select.preset_mode
        color_type: icon
        color: white
        icon: mdi:leaf-off
        state:
          - operator: template
            value: >
              [[[return states['climate.termostat_p'].attributes.preset_mode ==
              'eco' ]]]
            icon: mdi:leaf
            color: green
        show_state: false
        show_name: true
        styles:
          card:
            - background-color: |
                [[[
                  if (states['climate.termostat_p'].attributes.hvac_action == 'heating') 
                    return '#EB6D00';
                  if (states['climate.termostat_p'].attributes.hvac_action == 'cooling')
                    return 'blue';
                  else return '#373F48';
                ]]]
            - color: white
      - type: custom:button-card
        entity: climate.termostat_p
        name: SCHEDULE
        action: url
        navigation_path: https://home.nest.com
        color_type: card
        icon: mdi:calendar-clock
        show_state: false
        show_name: true
        styles:
          card:
            - background-color: |
                [[[
                  if (states['climate.termostat_p'].attributes.hvac_action == 'heating') 
                    return '#EB6D00';
                  if (states['climate.termostat_p'].attributes.hvac_action == 'cooling')
                    return 'blue';
                  else return '#373F48';
                ]]]
            - color: white
      - type: custom:button-card
        entity: sensor.0x00124b002214f7f7_temperature
        name: HISTORIA
        action: url
        navigation_path: https://home.nest.com
        color_type: card
        icon: mdi:progress-clock
        show_state: false
        show_name: true
        styles:
          card:
            - background-color: |
                [[[
                  if (states['climate.termostat_p'].attributes.hvac_action == 'heating') 
                    return '#EB6D00';
                  if (states['climate.termostat_p'].attributes.hvac_action == 'cooling')
                    return 'blue';
                  else return '#373F48';
                ]]]
            - color: white

```

Kolor karty zależny od trybu  
 ![Screenshot - 28.09.2022 , 00_38_20](https://forum.arturhome.pl/uploads/default/original/2X/2/2b438b1ff650fb4df6c454c99739333b834d8923.png)  
 ![Screenshot - 28.09.2022 , 00_39_02](https://forum.arturhome.pl/uploads/default/original/2X/d/d1b4ceb98d7f734da076a027abb7fae475609172.png)

---

<div class="post-metadata">

**Autor:** ![ralff\_212](https://forum.arturhome.pl/user_avatar/forum.arturhome.pl/ralff_212/32/11361_2.png) [@ralff\_212](https://forum.arturhome.pl/u/ralff_212)\
**Data wpisu:** [29 Wrzesień 2022 16:58 UTC](https://forum.arturhome.pl/t/encja-kolor-tla-na-podstawie-temperatury/6459/6 "2022-09-29T16:58:49Z")

</div>

działa co peawna dałem sobie kolor tylko ramkę bo fajniej ale nie wiem jak uzależnić dwie zmienne

> ha-card {  
> border: solid 2px;  
> border-color: {% if state\_attr(‘climate.jasiu\_degc’, ‘current\_temperature’) | int \>= 20 and if states('sensor.temp\_temperature) | int \>= 10 %}  
> green  
> {% else %}  
> red  
> {% endif %}  
> ;  
> }

na bank mam skopane połaczączenie AND daje & && i and i nic 😃

Edit:

@artpc Obcykałem to tak i działa

> style: |  
> ha-card {  
> justify-content: center !important;  
> border: solid 2px;  
> border-color: {% set sped = state\_attr(‘climate.termostat’, ‘current\_temperature’) | float(0) %}  
> {% if sped \>= 19 and sped \<= 19.5 %}  
> #white;  
> {% elif sped \>= 19.6 and sped \<= 20 %}  
> #22ABD5;  
> {% elif sped \>= 20.1 and sped \<= 20.5 %}  
> #26ABCA;  
> {% elif sped \>= 20.6 and sped \<= 21 %}  
> #2AACAB;  
> {% elif sped \>= 21.1 and sped \<= 21.5 %}  
> #2AAC97;  
> {% elif sped \>= 21.6 and sped \<= 22 %}  
> #2CAC82;  
> {% elif sped \>= 22.1 and sped \<= 22.5 %}  
> #62B061;  
> {% elif sped \>= 22.6 and sped \<= 23 %}  
> #A7B654;  
> {% elif sped \>= 23.1 and sped \<= 23.5 %}  
> #C0B74C;  
> {% elif sped \>= 23.6 and sped \<= 24 %}  
> #D6B743;  
> {% elif sped \>= 24.1 and sped \<= 24.5 %}  
> #EDB53A;  
> {% elif sped \>= 24.6 and sped \<= 25 %}  
> #F0B438;  
> {% elif sped \>= 25.1 and sped \<= 25.5 %}  
> #F7AB30;  
> {% elif sped \>= 26.6 and sped \<= 27 %}  
> #F4982B;  
> {% elif sped \>= 27.1 and sped \<= 27.5 %}  
> #F18522;  
> {% elif sped \>= 27.6 and sped \<= 28 %}  
> #EB5E1A;  
> {% elif sped \>= 28.1 and sped \<= 28.5 %}  
> #EB5E1A;  
> {% elif sped \>= 28.6 and sped \<= 29 %}  
> red;  
> {% elif sped \>= 29.1 and sped \<= 29.5 %}  
> red;  
> {% elif sped \>= 29.6 and sped \<= 30 %}  
> red;  
> {% elif sped \>= 30.1 and sped \<= 30.5 %}  
> red;  
> {% else %}  
> ?  
> {% endif %}  
> ;  
> }  
> div.name {  
> font-size: 10px;  
> }  
> span.value {  
> font-size: 14px;  
> }  
> span.measurement {  
> font-size: 14px;  
> }  
> div.header {  
> justify-content: center;  
> padding: 0px 0px 0px 0px  
> }  
> div.info {  
> justify-content: center !important;  
> padding: 0px 0px 0px 0px !important;  
> display: flex;  
> }  
> div.icon {  
> display: none;  
> }  
> type: entity  
> entity: climate.termostat

mam pytanie jak zrobić zeby karta termostatu miał inne tło przy grzaniu a inne przy cool?

jak połączyć dwa stany atrybutów?