Minha lovelace é uma modificação da configuração do Mattias Parson do forum Home Assistant da gringa. é o tipo de lovelace que mais gosto, bem limpa, objetiva e visualmente simetrica…
Configuração no GitHub - GitHub - matt8707/hass-config: A different take on designing a Lovelace UI
Tópico no Forum Home Assistant - A different take on designing a Lovelace UI - Share your Projects! - Home Assistant Community (home-assistant.io)
Passando para compartilhar o CARD de temperaturas:
Código:
cards:
- type: custom:button-card
color_type: label-card
icon: mdi:thermometer
layout: icon_name_state
name: Temperaturas Internas
styles:
card:
- height: 40px
- background-color: var(--card-background-color)
- font-size: 14px
- padding: 8px
- color: var(--state-icon-active-color)
- box-shadow: 4px 0px 0px 0px var(--state-icon-active-color)
- type: horizontal-stack
cards:
- custom_fields:
icone: |
[[[
return `
<ha-icon icon="mdi:sofa"
style="width: 48px; height: 48px;">
</ha-icon><br>Sala</span>`
]]]
temp: |
[[[
return `<ha-icon
icon="hass:thermometer"
style="width: 24px; height: 24px; color: #B2FF59;">
</ha-icon><span><span style="margin-left: 5px; color: var(--text-color-sensor);">
<b>${entity ? entity.state : '0'} °C</span></span>`
]]]
temp_sensacao: |
[[[
return `<ha-icon
icon="mdi:thermometer-lines"
style="width: 24px; height: 24px; color: #FF7F07;">
</ha-icon><span><span style="margin-left: 5px; color: var(--text-color-sensor);">
<b>${states['sensor.sensacao_termica_sala'] ? states['sensor.sensacao_termica_sala'].state : '0'} °C</span></span>`
]]]
umidade: |
[[[
return `<ha-icon
icon="hass:water-percent"
style="width: 24px; height: 24px; color: #42A5F5;">
</ha-icon><span><span style="margin-left: 5px; color: var(--text-color-sensor);">
<b>${states['sensor.humidade_sala'] ? states['sensor.humidade_sala'].state : 0} %</b></span></span>`
]]]
entity: sensor.temperatura_sala
show_icon: false
show_name: false
show_state: false
styles:
card:
- padding: 20%
- font-size: 18px
custom_fields:
icone:
- position: absolute
- left: 10%
- top: 15%
- font-size: 14px
temp:
- position: absolute
- left: 50%
- top: 10%
temp_sensacao:
- position: absolute
- left: 50%
- top: 40%
umidade:
- position: absolute
- left: 50%
- top: 70%
type: custom:button-card
- custom_fields:
icone: |
[[[
return `
<ha-icon icon="mdi:pot-mix"
style="width: 48px; height: 48px;">
</ha-icon><br>Cozinha</span>`
]]]
temp: |
[[[
return `<ha-icon
icon="hass:thermometer"
style="width: 24px; height: 24px; color: #B2FF59;">
</ha-icon><span><span style="margin-left: 5px; color: var(--text-color-sensor);">
<b>${entity ? entity.state : '0'} °C</span></span>`
]]]
temp_sensacao: |
[[[
return `<ha-icon
icon="mdi:thermometer-lines"
style="width: 24px; height: 24px; color: #FF7F07;">
</ha-icon><span><span style="margin-left: 5px; color: var(--text-color-sensor);">
<b>${states['sensor.sensacao_termica_cozinha'] ? states['sensor.sensacao_termica_cozinha'].state : '0'} °C</span></span>`
]]]
umidade: |
[[[
return `<ha-icon
icon="hass:water-percent"
style="width: 24px; height: 24px; color: #42A5F5;">
</ha-icon><span><span style="margin-left: 5px; color: var(--text-color-sensor);">
<b>${states['sensor.humidade_cozinha'] ? states['sensor.humidade_cozinha'].state : 0} %</b></span></span>`
]]]
entity: sensor.temperatura_cozinha
show_icon: false
show_name: false
show_state: false
styles:
card:
- padding: 20%
- font-size: 18px
custom_fields:
icone:
- position: absolute
- left: 10%
- top: 15%
- font-size: 14px
temp:
- position: absolute
- left: 50%
- top: 10%
temp_sensacao:
- position: absolute
- left: 50%
- top: 40%
umidade:
- position: absolute
- left: 50%
- top: 70%
type: custom:button-card
- type: horizontal-stack
cards:
- custom_fields:
icone: |
[[[
return `
<ha-icon icon="mdi:shower-head"
style="width: 48px; height: 48px;">
</ha-icon><br>Ban. Social</span>`
]]]
temp: |
[[[
return `<ha-icon
icon="hass:thermometer"
style="width: 24px; height: 24px; color: #B2FF59;">
</ha-icon><span><span style="margin-left: 5px; color: var(--text-color-sensor);">
<b>${entity ? entity.state : '0'} °C</span></span>`
]]]
temp_sensacao: |
[[[
return `<ha-icon
icon="mdi:thermometer-lines"
style="width: 24px; height: 24px; color: #FF7F07;">
</ha-icon><span><span style="margin-left: 5px; color: var(--text-color-sensor);">
<b>${states['sensor.sensacao_termica_banheiro_social'] ? states['sensor.sensacao_termica_banheiro_social'].state : '0'} °C</span></span>`
]]]
umidade: |
[[[
return `<ha-icon
icon="hass:water-percent"
style="width: 24px; height: 24px; color: #42A5F5;">
</ha-icon><span><span style="margin-left: 5px; color: var(--text-color-sensor);">
<b>${states['sensor.humidade_banheiro_social'] ? states['sensor.humidade_banheiro_social'].state : 0} %</b></span></span>`
]]]
entity: sensor.temperatura_banheiro_social
show_icon: false
show_name: false
show_state: false
styles:
card:
- padding: 20%
- font-size: 18px
custom_fields:
icone:
- position: absolute
- left: 10%
- top: 15%
- font-size: 14px
temp:
- position: absolute
- left: 50%
- top: 10%
temp_sensacao:
- position: absolute
- left: 50%
- top: 40%
umidade:
- position: absolute
- left: 50%
- top: 70%
type: custom:button-card
- custom_fields:
icone: |
[[[
return `
<ha-icon icon="mdi:desktop-tower-monitor"
style="width: 48px; height: 48px;">
</ha-icon><br>Escritório</span>`
]]]
temp: |
[[[
return `<ha-icon
icon="hass:thermometer"
style="width: 24px; height: 24px; color: #B2FF59;">
</ha-icon><span><span style="margin-left: 5px; color: var(--text-color-sensor);">
<b>${entity ? entity.state : '0'} °C</span></span>`
]]]
temp_sensacao: |
[[[
return `<ha-icon
icon="mdi:thermometer-lines"
style="width: 24px; height: 24px; color: #FF7F07;">
</ha-icon><span><span style="margin-left: 5px; color: var(--text-color-sensor);">
<b>${states['sensor.sensacao_termica_escritorio'] ? states['sensor.sensacao_termica_escritorio'].state : '0'} °C</span></span>`
]]]
umidade: |
[[[
return `<ha-icon
icon="hass:water-percent"
style="width: 24px; height: 24px; color: #42A5F5;">
</ha-icon><span><span style="margin-left: 5px; color: var(--text-color-sensor);">
<b>${states['sensor.humidade_escritorio'] ? states['sensor.humidade_escritorio'].state : 0} %</b></span></span>`
]]]
entity: sensor.temperatura_escritorio
show_icon: false
show_name: false
show_state: false
styles:
card:
- padding: 20%
- font-size: 18px
custom_fields:
icone:
- position: absolute
- left: 10%
- top: 15%
- font-size: 14px
temp:
- position: absolute
- left: 50%
- top: 10%
temp_sensacao:
- position: absolute
- left: 50%
- top: 40%
umidade:
- position: absolute
- left: 50%
- top: 70%
type: custom:button-card
- type: horizontal-stack
cards:
- custom_fields:
icone: |
[[[
return `
<ha-icon icon="mdi:bed"
style="width: 48px; height: 48px;">
</ha-icon><br>Quarto Visita</span>`
]]]
temp: |
[[[
return `<ha-icon
icon="hass:thermometer"
style="width: 24px; height: 24px; color: #B2FF59;">
</ha-icon><span><span style="margin-left: 5px; color: var(--text-color-sensor);">
<b>${entity ? entity.state : '0'} °C</span></span>`
]]]
temp_sensacao: |
[[[
return `<ha-icon
icon="mdi:thermometer-lines"
style="width: 24px; height: 24px; color: #FF7F07;">
</ha-icon><span><span style="margin-left: 5px; color: var(--text-color-sensor);">
<b>${states['sensor.sensacao_termica_quarto_visita'] ? states['sensor.sensacao_termica_quarto_visita'].state : '0'} °C</span></span>`
]]]
umidade: |
[[[
return `<ha-icon
icon="hass:water-percent"
style="width: 24px; height: 24px; color: #42A5F5;">
</ha-icon><span><span style="margin-left: 5px; color: var(--text-color-sensor);">
<b>${states['sensor.humidade_quarto_visita'] ? states['sensor.humidade_quarto_visita'].state : 0} %</b></span></span>`
]]]
entity: sensor.temperatura_quarto_visita
show_icon: false
show_name: false
show_state: false
styles:
card:
- padding: 20%
- font-size: 18px
custom_fields:
icone:
- position: absolute
- left: 10%
- top: 15%
- font-size: 14px
temp:
- position: absolute
- left: 50%
- top: 10%
temp_sensacao:
- position: absolute
- left: 50%
- top: 40%
umidade:
- position: absolute
- left: 50%
- top: 70%
type: custom:button-card
- custom_fields:
icone: |
[[[
return `
<ha-icon icon="mdi:bed-king"
style="width: 48px; height: 48px;">
</ha-icon><br>Suíte</span>`
]]]
temp: |
[[[
return `<ha-icon
icon="hass:thermometer"
style="width: 24px; height: 24px; color: #B2FF59;">
</ha-icon><span><span style="margin-left: 5px; color: var(--text-color-sensor);">
<b>${entity ? entity.state : '0'} °C</span></span>`
]]]
temp_sensacao: |
[[[
return `<ha-icon
icon="mdi:thermometer-lines"
style="width: 24px; height: 24px; color: #FF7F07;">
</ha-icon><span><span style="margin-left: 5px; color: var(--text-color-sensor);">
<b>${states['sensor.sensacao_termica_suite'] ? states['sensor.sensacao_termica_suite'].state : '0'} °C</span></span>`
]]]
umidade: |
[[[
return `<ha-icon
icon="hass:water-percent"
style="width: 24px; height: 24px; color: #42A5F5;">
</ha-icon><span><span style="margin-left: 5px; color: var(--text-color-sensor);">
<b>${states['sensor.humidade_suite'] ? states['sensor.humidade_suite'].state : 0} %</b></span></span>`
]]]
entity: sensor.temperatura_suite
show_icon: false
show_name: false
show_state: false
styles:
card:
- padding: 20%
- font-size: 18px
custom_fields:
icone:
- position: absolute
- left: 10%
- top: 15%
- font-size: 14px
temp:
- position: absolute
- left: 50%
- top: 10%
temp_sensacao:
- position: absolute
- left: 50%
- top: 40%
umidade:
- position: absolute
- left: 50%
- top: 70%
type: custom:button-card
- type: horizontal-stack
cards:
- custom_fields:
icone: |
[[[
return `
<ha-icon icon="mdi:tshirt-crew"
style="width: 48px; height: 48px;">
</ha-icon><br>Closet</span>`
]]]
temp: |
[[[
return `<ha-icon
icon="hass:thermometer"
style="width: 24px; height: 24px; color: #B2FF59;">
</ha-icon><span><span style="margin-left: 5px; color: var(--text-color-sensor);">
<b>${entity ? entity.state : '0'} °C</span></span>`
]]]
temp_sensacao: |
[[[
return `<ha-icon
icon="mdi:thermometer-lines"
style="width: 24px; height: 24px; color: #FF7F07;">
</ha-icon><span><span style="margin-left: 5px; color: var(--text-color-sensor);">
<b>${states['sensor.sensacao_termica_closet'] ? states['sensor.sensacao_termica_closet'].state : '0'} °C</span></span>`
]]]
umidade: |
[[[
return `<ha-icon
icon="hass:water-percent"
style="width: 24px; height: 24px; color: #42A5F5;">
</ha-icon><span><span style="margin-left: 5px; color: var(--text-color-sensor);">
<b>${states['sensor.humidade_closet'] ? states['sensor.humidade_closet'].state : 0} %</b></span></span>`
]]]
entity: sensor.temperatura_closet
show_icon: false
show_name: false
show_state: false
styles:
card:
- padding: 20%
- font-size: 18px
custom_fields:
icone:
- position: absolute
- left: 10%
- top: 15%
- font-size: 14px
temp:
- position: absolute
- left: 50%
- top: 10%
temp_sensacao:
- position: absolute
- left: 50%
- top: 40%
umidade:
- position: absolute
- left: 50%
- top: 70%
type: custom:button-card
- custom_fields:
icone: |
[[[
return `
<ha-icon icon="mdi:shower"
style="width: 48px; height: 48px;">
</ha-icon><br>Ban. Suíte</span>`
]]]
temp: |
[[[
return `<ha-icon
icon="hass:thermometer"
style="width: 24px; height: 24px; color: #B2FF59;">
</ha-icon><span><span style="margin-left: 5px; color: var(--text-color-sensor);">
<b>${entity ? entity.state : '0'} °C</span></span>`
]]]
temp_sensacao: |
[[[
return `<ha-icon
icon="mdi:thermometer-lines"
style="width: 24px; height: 24px; color: #FF7F07;">
</ha-icon><span><span style="margin-left: 5px; color: var(--text-color-sensor);">
<b>${states['sensor.sensacao_termica_banheiro_suite'] ? states['sensor.sensacao_termica_banheiro_suite'].state : '0'} °C</span></span>`
]]]
umidade: |
[[[
return `<ha-icon
icon="hass:water-percent"
style="width: 24px; height: 24px; color: #42A5F5;">
</ha-icon><span><span style="margin-left: 5px; color: var(--text-color-sensor);">
<b>${states['sensor.humidade_banheiro_suite'] ? states['sensor.humidade_banheiro_suite'].state : 0} %</b></span></span>`
]]]
entity: sensor.temperatura_banheiro_suite
show_icon: false
show_name: false
show_state: false
styles:
card:
- padding: 20%
- font-size: 18px
custom_fields:
icone:
- position: absolute
- left: 10%
- top: 15%
- font-size: 14px
temp:
- position: absolute
- left: 50%
- top: 10%
temp_sensacao:
- position: absolute
- left: 50%
- top: 40%
umidade:
- position: absolute
- left: 50%
- top: 70%
type: custom:button-card
- type: custom:button-card
color_type: label-card
icon: mdi:thermometer
layout: icon_name_state
name: Temperaturas Externas
styles:
card:
- height: 40px
- background-color: var(--card-background-color)
- font-size: 14px
- padding: 8px
- color: var(--state-icon-active-color)
- box-shadow: 4px 0px 0px 0px var(--state-icon-active-color)
- type: horizontal-stack
cards:
- custom_fields:
icone: |
[[[
return `
<ha-icon icon="mdi:garage-variant"
style="width: 48px; height: 48px;">
</ha-icon><br>Garagem</span>`
]]]
temp: |
[[[
return `<ha-icon
icon="hass:thermometer"
style="width: 24px; height: 24px; color: #B2FF59;">
</ha-icon><span><span style="margin-left: 5px; color: var(--text-color-sensor);">
<b>${entity ? entity.state : '0'} °C</span></span>`
]]]
temp_sensacao: |
[[[
return `<ha-icon
icon="mdi:thermometer-lines"
style="width: 24px; height: 24px; color: #FF7F07;">
</ha-icon><span><span style="margin-left: 5px; color: var(--text-color-sensor);">
<b>${states['sensor.sensacao_termica_garagem'] ? states['sensor.sensacao_termica_garagem'].state : '0'} °C</span></span>`
]]]
umidade: |
[[[
return `<ha-icon
icon="hass:water-percent"
style="width: 24px; height: 24px; color: #42A5F5;">
</ha-icon><span><span style="margin-left: 5px; color: var(--text-color-sensor);">
<b>${states['sensor.humidade_garagem'] ? states['sensor.humidade_garagem'].state : 0} %</b></span></span>`
]]]
entity: sensor.temperatura_garagem
show_icon: false
show_name: false
show_state: false
styles:
card:
- padding: 20%
- font-size: 18px
custom_fields:
icone:
- position: absolute
- left: 10%
- top: 15%
- font-size: 14px
temp:
- position: absolute
- left: 50%
- top: 10%
temp_sensacao:
- position: absolute
- left: 50%
- top: 40%
umidade:
- position: absolute
- left: 50%
- top: 70%
type: custom:button-card
- custom_fields:
icone: |
[[[
return `
<ha-icon icon="mdi:grill"
style="width: 48px; height: 48px;">
</ha-icon><br>Área Gourmet</span>`
]]]
temp: |
[[[
return `<ha-icon
icon="hass:thermometer"
style="width: 24px; height: 24px; color: #B2FF59;">
</ha-icon><span><span style="margin-left: 5px; color: var(--text-color-sensor);">
<b>${entity ? entity.state : '0'} °C</span></span>`
]]]
temp_sensacao: |
[[[
return `<ha-icon
icon="mdi:thermometer-lines"
style="width: 24px; height: 24px; color: #FF7F07;">
</ha-icon><span><span style="margin-left: 5px; color: var(--text-color-sensor);">
<b>${states['sensor.sensacao_termica_area_gourmet'] ? states['sensor.sensacao_termica_area_gourmet'].state : '0'} °C</span></span>`
]]]
umidade: |
[[[
return `<ha-icon
icon="hass:water-percent"
style="width: 24px; height: 24px; color: #42A5F5;">
</ha-icon><span><span style="margin-left: 5px; color: var(--text-color-sensor);">
<b>${states['sensor.humidade_area_gourmet'] ? states['sensor.humidade_area_gourmet'].state : 0} %</b></span></span>`
]]]
entity: sensor.temperatura_area_gourmet
show_icon: false
show_name: false
show_state: false
styles:
card:
- padding: 20%
- font-size: 18px
custom_fields:
icone:
- position: absolute
- left: 10%
- top: 15%
- font-size: 14px
temp:
- position: absolute
- left: 50%
- top: 10%
temp_sensacao:
- position: absolute
- left: 50%
- top: 40%
umidade:
- position: absolute
- left: 50%
- top: 70%
type: custom:button-card
Muito bom cara.
Já peguei algumas ideias.
Valeu
celoko!! Isso é nível hard, só uma vídeo aula (vendo e revendo) pra fazer isso.
Não consegui usar seu codigo, achei bem maneiro
Recentemente passei a adotar uma interface mais clean, esse é o resultado:
Sala:
Quarto:
Escritório:
Cozinha:
Os três banheiros são exatamente iguais:
Garagem:
Amigo, como pegou essas infos do seu carro??
Provavelmente o @hudsonbrendon deve estar inserindo manualmente, e o sistema fazendo os calculos através de alguma template.
Claro é possível ter um scanner OBD2 no carro conectado por bluetooth no celular e o home assistant pega essas informações, mas se fosse essa opção acho que ele colocaria mais informações no painel.
Top! Estou começando a pouco tempo com o HA, tem coisas que fez ai, que não tenho ideia como faz, mas obrigado por compartilhar! Vamos tendo ideias e procurando por aqui, youtube, etc como fazer!
@Alesson parabéns pela iniciativa.
Ficou muito bom mesmo.
Vi muita coisa ali q eu gostaria de usar no meu (não sei nem onde eu colocaria o código que vc disponibilizou) kkkk.
Vou continuar minha evolução no HA, e esse post seu com certeza vai ajudar como muitos outros aqui também estão me ajudando. 
Parabéns, tentei fazer mas não consegui
Por enquanto estamos assim. Estou esperando chegar as câmeras para adicionar a visualização certinho e com o tempo vou adicionando mais coisas importantes também.
A idéia é fazer uma primeira visualização somente com informações como portas e janelas abertas, e por aí vai.
Abraços!
Ficou MT show mano!
Alguma chance de ver esse post e postar o codigo? haha.
Até cheguei a instalar o que estava no link postado, mas fiquei meio perdido de ontem ele buscar varios parametros!
alem de carias coisas ta em outra lingua q nao é ingles kkk
vlw
Podia disponibilizar os arquivos ja editados meu querido.
cara editei somente as entidades pro que eu queria, as entidades do Mattias ou as minhas pra vc editar vai dar no mesmo. recomendo pegar as dele pois o processo dele já passou por atualização.
Instalei o bar-card mas por algum motivo não esta funcionando, poderia me auxiliar??
como instalou? pelo hacs certo? viu se a url do modulo (/hacsfiles/bar-card/bar-card.js) esta aparecendo em configurações>dashboards>resources ?
