# Lovelace - cores dos ícones em função do estado

**URL:** <https://forum.cpha.pt/t/lovelace-cores-dos-icones-em-funcao-do-estado/2185>\
**Category:** Configuração\
**Tags:** lovelace\
**Created:** [22 Março , 2019 11:15 UTC](https://forum.cpha.pt/t/lovelace-cores-dos-icones-em-funcao-do-estado/2185 "2019-03-22T11:15:19Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![lmesousa](https://forum.cpha.pt/letter_avatar_proxy/v4/letter/l/e0b2c6/32.png) [@lmesousa](https://forum.cpha.pt/u/lmesousa)\
**Post date:** [22 Março , 2019 11:15 UTC](https://forum.cpha.pt/t/lovelace-cores-dos-icones-em-funcao-do-estado/2185/1 "2019-03-22T11:15:20Z")

</div>

Bom dia

Alguém sabe como definir a cor de um icon de  
um sensor em funçāo do seu estado.

Desde já os meus agradecimentos!

---

<div class="post-metadata">

**Author:** ![RodolfoVieira](https://forum.cpha.pt/user_avatar/forum.cpha.pt/rodolfovieira/32/14633_2.png) [@RodolfoVieira](https://forum.cpha.pt/u/RodolfoVieira)\
**Post date:** [22 Março , 2019 16:25 UTC](https://forum.cpha.pt/t/lovelace-cores-dos-icones-em-funcao-do-estado/2185/2 "2019-03-22T16:25:41Z")

</div>

Exemplo:

```auto
sensor.sensorkikouki*:
  custom_ui_state_card: state-card-custom-ui
  templates:
    hs_color: "if (state === 'Água Turva') return [0, 100, 100];
    else if (state === 'Água Limpa') return [120, 100, 100];"

```

---

<div class="post-metadata">

**Author:** ![lmesousa](https://forum.cpha.pt/letter_avatar_proxy/v4/letter/l/e0b2c6/32.png) [@lmesousa](https://forum.cpha.pt/u/lmesousa)\
**Post date:** [25 Março , 2019 08:36 UTC](https://forum.cpha.pt/t/lovelace-cores-dos-icones-em-funcao-do-estado/2185/3 "2019-03-25T08:36:45Z")

</div>

Bom dia

Já fiz várias experiências, entre as quais na configuração do sensor mas no Lovelace não faz qualquer efeito.  
Com a alteração do icon consigo em função do estado funcionou à primeira, com a cor do icon não acontece nada!

```auto
device_tracker.*:
  templates:
    icon_color: "if (state === 'home') return rgb(0, 102, 0);
    else if (state === 'not_home') return rgb(128, 0, 0);
    else return rgb(115, 115, 115)"

```

isto não funciona!

---

<div class="post-metadata">

**Author:** ![RodolfoVieira](https://forum.cpha.pt/user_avatar/forum.cpha.pt/rodolfovieira/32/14633_2.png) [@RodolfoVieira](https://forum.cpha.pt/u/RodolfoVieira)\
**Post date:** [25 Março , 2019 10:29 UTC](https://forum.cpha.pt/t/lovelace-cores-dos-icones-em-funcao-do-estado/2185/4 "2019-03-25T10:29:48Z")

</div>

Experimentas-te o exemplo que eu pus?

---

<div class="post-metadata">

**Author:** ![j\_assuncao](https://forum.cpha.pt/user_avatar/forum.cpha.pt/j_assuncao/32/3_2.png) [@j\_assuncao](https://forum.cpha.pt/u/j_assuncao)\
**Post date:** [25 Março , 2019 10:34 UTC](https://forum.cpha.pt/t/lovelace-cores-dos-icones-em-funcao-do-estado/2185/5 "2019-03-25T10:34:30Z")

</div>

Já experimentas-te com `==` em vez de `===`?

---

<div class="post-metadata">

**Author:** ![maxcalavera](https://forum.cpha.pt/user_avatar/forum.cpha.pt/maxcalavera/32/1039_2.png) [@maxcalavera](https://forum.cpha.pt/u/maxcalavera)\
**Post date:** [26 Março , 2019 09:51 UTC](https://forum.cpha.pt/t/lovelace-cores-dos-icones-em-funcao-do-estado/2185/6 "2019-03-26T09:51:57Z")

</div>

Bom dia. É possível fazer o mesmo mas com icons? Por exemplo porta aberta e porta fechada…?

---

<div class="post-metadata">

**Author:** ![lmesousa](https://forum.cpha.pt/letter_avatar_proxy/v4/letter/l/e0b2c6/32.png) [@lmesousa](https://forum.cpha.pt/u/lmesousa)\
**Post date:** [26 Março , 2019 12:49 UTC](https://forum.cpha.pt/t/lovelace-cores-dos-icones-em-funcao-do-estado/2185/7 "2019-03-26T12:49:32Z")

</div>

no costumize.yaml tenho:

```auto
device_tracker.dt_desktop:
  friendly_name: Desktop
  templates:
    icon: >
      if (state == 'home') return 'mdi:desktop-tower-monitor';
      else return 'mdi:desktop-tower';
    value: >
      if (state == 'home') return 'Ligado';
      else return 'Desligado';
    icon_color: >
      if (state === 'home') return rgb(0, 102, 0);
      else if (state === 'not_home') return rgb(128, 0, 0);
      else return rgb(115, 115, 115)

```

Já procurei pelos fóruns todos.  
O icon funciona

 ![image](https://forum.cpha.pt/uploads/default/original/2X/b/b09effaad852a59b169058bab6eca2efceb90b44.png)  
mas as cores não! Nem o valor (value)!

---

<div class="post-metadata">

**Author:** ![karma](https://forum.cpha.pt/letter_avatar_proxy/v4/letter/k/bcef8e/32.png) [@karma](https://forum.cpha.pt/u/karma)\
**Post date:** [29 Março , 2019 08:17 UTC](https://forum.cpha.pt/t/lovelace-cores-dos-icones-em-funcao-do-estado/2185/8 "2019-03-29T08:17:11Z")

</div>

Como disse o @RodolfoVieira, experimentaste o código em cima ?  
No Lovelace o exemplo da “Central de alarme” ainda não funciona até a data. O exemplo do “sensor câmera” sim. Reve a tua configuração

 ![imagem](https://forum.cpha.pt/uploads/default/original/2X/e/ea9c2f98a65fc1982fe78cddf22d62f6611e74eb.jpeg)

---

<div class="post-metadata">

**Author:** ![lmesousa](https://forum.cpha.pt/letter_avatar_proxy/v4/letter/l/e0b2c6/32.png) [@lmesousa](https://forum.cpha.pt/u/lmesousa)\
**Post date:** [29 Março , 2019 09:12 UTC](https://forum.cpha.pt/t/lovelace-cores-dos-icones-em-funcao-do-estado/2185/9 "2019-03-29T09:12:51Z")

</div>

Mais uma vez!  
O que eu tenho:

 ![op2](https://forum.cpha.pt/uploads/default/original/2X/5/516795cd4a8cdd2f92ecbb5d8010529593dba093.png)  
o que pretendo é:  
 ![op1](https://forum.cpha.pt/uploads/default/original/2X/f/f59f919259d3e6bfc7c00ab98980c6e2d2c1c13c.png)  
o que eu consigo:  
 ![op3](https://forum.cpha.pt/uploads/default/original/2X/f/f54ed5204c393a8c85dc2e5d4fb2d7f4ada53e83.png)  
Como programador nunca fico contente enquanto não consigo apresentar a aplicação como pretendo!  
Agradeço a vossa ajuda. Já experimentei todas as soluções dos fóruns, mas ainda não consegui.  
Assim que tiver a solução (que hei-de conseguir), partilho-a com todos.

---

<div class="post-metadata">

**Author:** ![karma](https://forum.cpha.pt/letter_avatar_proxy/v4/letter/k/bcef8e/32.png) [@karma](https://forum.cpha.pt/u/karma)\
**Post date:** [29 Março , 2019 13:57 UTC](https://forum.cpha.pt/t/lovelace-cores-dos-icones-em-funcao-do-estado/2185/10 "2019-03-29T13:57:26Z")

</div>

@lmesousa, vamos por partes. No início do tópico tens a dúvida acerca da alteração da cor do icon. Coisa que pelos vistos já conseguiste… E aquilo que estás agora a dizer é outra coisa. Tu estás a filtrar entre o “Home” e o “not home” em cada card. Nunca aparecerá tudo numa só card assim

---

<div class="post-metadata">

**Author:** ![lmesousa](https://forum.cpha.pt/letter_avatar_proxy/v4/letter/l/e0b2c6/32.png) [@lmesousa](https://forum.cpha.pt/u/lmesousa)\
**Post date:** [29 Março , 2019 14:12 UTC](https://forum.cpha.pt/t/lovelace-cores-dos-icones-em-funcao-do-estado/2185/11 "2019-03-29T14:12:20Z")

</div>

O que pretendo é que a cor do icon nude email função do estado sem que ter de ser eu a filtrar o estado. Iria simplificar tudo.

---

<div class="post-metadata">

**Author:** ![karma](https://forum.cpha.pt/letter_avatar_proxy/v4/letter/k/bcef8e/32.png) [@karma](https://forum.cpha.pt/u/karma)\
**Post date:** [29 Março , 2019 16:59 UTC](https://forum.cpha.pt/t/lovelace-cores-dos-icones-em-funcao-do-estado/2185/12 "2019-03-29T16:59:32Z")

</div>

Experimenta assim:

```auto
homeassistant:
####################################################
# #
# Customize #
# #
####################################################
  customize_glob:
    sensor.interruptorcamera*:
      custom_ui_state_card: state-card-custom-ui
      templates:
        hs_color: "if (state === 'Desligado') return [0, 100, 100];
        else if (state === 'Ligado') return [120, 100, 100];"

```

E na configuração do Lovelace não tenho nenhum style. Chamo só o sensor que já aparece com a cor acima configurada

---

<div class="post-metadata">

**Author:** ![lmesousa](https://forum.cpha.pt/letter_avatar_proxy/v4/letter/l/e0b2c6/32.png) [@lmesousa](https://forum.cpha.pt/u/lmesousa)\
**Post date:** [31 Março , 2019 09:34 UTC](https://forum.cpha.pt/t/lovelace-cores-dos-icones-em-funcao-do-estado/2185/13 "2019-03-31T09:34:09Z")

</div>

experimentei individualmente:

```auto
device_tracker.dt_desktop:
  custom_ui_state_card: state-card-custom-ui
  templates:
    hs_color: "if (state === 'not_home') return [0, 100, 100];
    else if (state === 'home') return [120, 100, 100];"  
    
device_tracker.dt_desktop_pc:
  custom_ui_state_card: state-card-custom-ui
  templates:
    hs_color: "if (state === 'not_home') return [0, 100, 100];
    else if (state === 'home') return [120, 100, 100];"  

```

não funcionou!

---

<div class="post-metadata">

**Author:** ![karma](https://forum.cpha.pt/letter_avatar_proxy/v4/letter/k/bcef8e/32.png) [@karma](https://forum.cpha.pt/u/karma)\
**Post date:** [31 Março , 2019 16:44 UTC](https://forum.cpha.pt/t/lovelace-cores-dos-icones-em-funcao-do-estado/2185/14 "2019-03-31T16:44:16Z")

</div>

@lmesousa e antes desta configuração tens o que? onde está inserido?? Mostra o resto da configuração… Tens de inserir em “customize\_glob:” e tens também de ter o card " CustomUI" em “~/.homeassistant/www/custom\_ui/” por exemplo ( não sei se já tens se não)…

---

<div class="post-metadata">

**Author:** ![lmesousa](https://forum.cpha.pt/letter_avatar_proxy/v4/letter/l/e0b2c6/32.png) [@lmesousa](https://forum.cpha.pt/u/lmesousa)\
**Post date:** [1 Abril , 2019 11:50 UTC](https://forum.cpha.pt/t/lovelace-cores-dos-icones-em-funcao-do-estado/2185/15 "2019-04-01T11:50:34Z")

</div>

Já consegui!  
Por partes!  
no ficheiro configuration.yaml:

```auto
  customize_glob: !include_dir_merge_named customize_glob

```

na pasta customize\_glob

 ![img002](https://forum.cpha.pt/uploads/default/original/2X/8/857937f7620219bd8a26d56950a3471d597c361c.png)  
criei um ficheiro com as configurações que pretendi para os device\_trackers que são computadores fixos (desktops)  
device\_trackers\_computadores.yaml

```auto
device_tracker.dt_desktop:
  custom_ui_state_card: state-card-custom-ui
  templates:
    hs_color: "if (state === 'not_home') return [0, 100, 100];
    else if (state === 'home') return [120, 100, 100];
    else return [115, 115, 115];"  
    icon: >
      if (state === 'home') return 'mdi:desktop-tower-monitor';
      else return 'mdi:desktop-tower';
    
device_tracker.dt_desktop_pc:
  custom_ui_state_card: state-card-custom-ui
  templates:
    hs_color: "if (state === 'not_home') return [0, 100, 100];
    else if (state === 'home') return [120, 100, 100];"  
    icon: >
      if (state === 'home') return 'mdi:desktop-tower-monitor';
      else return 'mdi:desktop-tower';
 

```

resultado:

 ![img003](https://forum.cpha.pt/uploads/default/original/2X/6/6ad8520aceeb8c18e362d5b26e70bcec6254c50d.png)

---

<div class="post-metadata">

**Author:** ![maxcalavera](https://forum.cpha.pt/user_avatar/forum.cpha.pt/maxcalavera/32/1039_2.png) [@maxcalavera](https://forum.cpha.pt/u/maxcalavera)\
**Post date:** [3 Abril , 2019 11:08 UTC](https://forum.cpha.pt/t/lovelace-cores-dos-icones-em-funcao-do-estado/2185/16 "2019-04-03T11:08:00Z")

</div>

> [@lmesousa](#):
>
> device\_tracker.dt\_desktop: custom\_ui\_state\_card: state-card-custom-ui templates: hs\_color: “if (state === ‘not\_home’) return [0, 100, 100]; else if (state === ‘home’) return [120, 100, 100]; else return [115, 115, 115];”

Boas, desculpa a pergunta mas como configuraste o custom card?

---

<div class="post-metadata">

**Author:** ![lmesousa](https://forum.cpha.pt/letter_avatar_proxy/v4/letter/l/e0b2c6/32.png) [@lmesousa](https://forum.cpha.pt/u/lmesousa)\
**Post date:** [4 Abril , 2019 05:28 UTC](https://forum.cpha.pt/t/lovelace-cores-dos-icones-em-funcao-do-estado/2185/17 "2019-04-04T05:28:56Z")

</div>

segue este link:

> **[GitHub - andrey-git/home-assistant-custom-ui: Custom UI elements for https://home-assistant.io](https://github.com/andrey-git/home-assistant-custom-ui)**
>
> Custom UI elements for https://home-assistant.io

---

<div class="post-metadata">

**Author:** ![system](https://forum.cpha.pt/user_avatar/forum.cpha.pt/system/32/2_2.png) [@system](https://forum.cpha.pt/u/system)\
**Post date:** [3 Julho , 2019 05:28 UTC](https://forum.cpha.pt/t/lovelace-cores-dos-icones-em-funcao-do-estado/2185/18 "2019-07-03T05:28:59Z")

</div>

Este tópico foi automaticamente fechado 90 dias após a última resposta. Novas respostas não são permitidas.