# Vamos falar de Lovelace UI?
**URL:** https://forum.cpha.pt/t/vamos-falar-de-lovelace-ui/667
**Category:** Dúvidas
**Created:** [18 Julho , 2018 15:53 UTC](https://forum.cpha.pt/t/vamos-falar-de-lovelace-ui/667 "2018-07-18T15:53:49Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@jhows](https://forum.cpha.pt/u/jhows)
#### Post date: [18 Julho , 2018 15:53 UTC](https://forum.cpha.pt/t/vamos-falar-de-lovelace-ui/667/1 "2018-07-18T15:53:49Z")
Malta
Vamos dedicar um tópico para trabalhar com Lovelace?
Compartilhar dashboards, configs, ideias, imagens.
Eu por exemplo, não consegui ainda entender a estrutura do yaml que monta a Lovelace 🙂
---
### Author:  [@j\_assuncao](https://forum.cpha.pt/u/j_assuncao)
#### Post date: [18 Julho , 2018 18:22 UTC](https://forum.cpha.pt/t/vamos-falar-de-lovelace-ui/667/2 "2018-07-18T18:22:25Z")
Acho uma optima ideia! Se for um tópico com muita actividade podemos depois criar uma subcategoria própria para o Lovelace.
---
### Author:  [@RodolfoVieira](https://forum.cpha.pt/u/RodolfoVieira)
#### Post date: [18 Julho , 2018 18:34 UTC](https://forum.cpha.pt/t/vamos-falar-de-lovelace-ui/667/3 "2018-07-18T18:34:41Z")
Força nisso @jhows, eu já era para ter começado mas colocou se umas coisas pelo meio.
---
### Author:  [@jhows](https://forum.cpha.pt/u/jhows)
#### Post date: [18 Julho , 2018 18:47 UTC](https://forum.cpha.pt/t/vamos-falar-de-lovelace-ui/667/4 "2018-07-18T18:47:17Z")
Que bom que gostaram! Vamos movimentar o tópico para “virar” uma subcategoria exclusiva 🙂
Vou começar a trabalhar na interface em breve.
---
### Author:  [@jhows](https://forum.cpha.pt/u/jhows)
#### Post date: [18 Julho , 2018 21:05 UTC](https://forum.cpha.pt/t/vamos-falar-de-lovelace-ui/667/5 "2018-07-18T21:05:17Z")
[Windy.com](http://Windy.com) embedded via iframe, bem interessante esse recurso da Lovelace, permite incorporar a dash conteúdo externo sem a necessidade de um custom\_component por exemplo.
E o melhor de tudo, não precisa reiniciar o HA a cada modificação 🙂
```
title: Lovelace
views:
- title: Teste
cards:
- type: iframe
url: https://embed.windy.com/embed2.html?lat=-23.534&lon=-46.647&zoom=11&level=surface&overlay=wind&menu=&message=&marker=&calendar=&pressure=&type=map&location=coordinates&detail=&detailLat=-23.554&detailLon=-46.636&metricWind=default&metricTemp=default&radarRange=-1
aspect_ratio: 100%
title: Previsão do Tempo
```
Você pode obter sua url do Windy para “embedar” em:
> **[Professional weather forecast](https://www.windy.com/widgets)**
>
> 50+ weather layers, weather radar and satellite
---
### Author:  [@RodolfoVieira](https://forum.cpha.pt/u/RodolfoVieira)
#### Post date: [19 Julho , 2018 22:04 UTC](https://forum.cpha.pt/t/vamos-falar-de-lovelace-ui/667/6 "2018-07-19T22:04:16Z")
@jhows mais alguma evolução? coloca um screen shot do que tens de momento.
---
### Author:  [@jhows](https://forum.cpha.pt/u/jhows)
#### Post date: [20 Julho , 2018 16:48 UTC](https://forum.cpha.pt/t/vamos-falar-de-lovelace-ui/667/7 "2018-07-20T16:48:04Z")
Nada ainda…
Vou voltar a trabalhar nele em breve.
---
### Author:  [@Encarnacao](https://forum.cpha.pt/u/Encarnacao)
#### Post date: [23 Julho , 2018 21:59 UTC](https://forum.cpha.pt/t/vamos-falar-de-lovelace-ui/667/8 "2018-07-23T21:59:24Z")
Já que se quer falar sobre lovelace, neste momento as opçoes sao tantas que nem se sabe por onde começar
Aqui fica um exemplo de novas possibilidades, neste caso criei um cartao da monitorizacao do meu raspberry pi
---
### Author:  [@CarlosMartins](https://forum.cpha.pt/u/CarlosMartins)
#### Post date: [24 Julho , 2018 11:32 UTC](https://forum.cpha.pt/t/vamos-falar-de-lovelace-ui/667/9 "2018-07-24T11:32:13Z")
Muito bonito, Publica o codigo.
---
### Author:  [@Encarnacao](https://forum.cpha.pt/u/Encarnacao)
#### Post date: [24 Julho , 2018 17:51 UTC](https://forum.cpha.pt/t/vamos-falar-de-lovelace-ui/667/10 "2018-07-24T17:51:49Z")
vao necessitar deste cartao que ainda nao é official
> **[GitHub - custom-cards/text-element: An element that can be used to show static text on...](https://github.com/custom-cards/text-element)**
>
> An element that can be used to show static text on the \`picture-elements\` card
poem dentro da pasta www o ficheiro:
`text-element.js`
no ficheiro ui-lovelace.yaml
```
resources:
- url: /local/text-element.js?v=0
type: js
```
depois o codigo neste caso seria:
```
- type: picture-elements
#title: Raspberry PI B
image: /local/raspb.jpg
elements:
- type: state-label
entity: sensor.processor_use
style:
top: 23.5%
left: 22%
transform: none
- type: custom:text-element
text: "CPU Use:"
style:
top: 29.6%
left: 12.8%
- type: state-label
entity: sensor.cpu_temperature
style:
top: 33.6%
left: 22%
transform: none
- type: custom:text-element
text: "CPU Temp:"
style:
top: 39.6%
left: 14%
- type: state-label
entity: sensor.disk_free_home
style:
top: 43.4%
left: 22%
transform: none
- type: custom:text-element
text: "Disk Free:"
style:
top: 49.6%
left: 13.3%
- type: state-label
entity: sensor.disk_use_home
style:
top: 53%
left: 22%
transform: none
- type: custom:text-element
text: "Disk Use:"
style:
top: 59.6%
left: 13%
- type: state-label
entity: sensor.memory_use
style:
top: 63.5%
left: 22%
transform: none
- type: custom:text-element
text: "RAM Use:"
style:
top: 69.6%
left: 13.3%
```
poem a foto na pasta www com o nome raspb.jpg:, ou tentao basta porem a foto que querem, mudando o nome na secçao de codigo
`image: /local/raspb.jpg`
---
### Author:  [@CarlosMartins](https://forum.cpha.pt/u/CarlosMartins)
#### Post date: [25 Julho , 2018 18:32 UTC](https://forum.cpha.pt/t/vamos-falar-de-lovelace-ui/667/11 "2018-07-25T18:32:18Z")
Como troco a cor do texto ? meu texto ficou preto, e não achei essa opção no github.
---
### Author:  [@Encarnacao](https://forum.cpha.pt/u/Encarnacao)
#### Post date: [25 Julho , 2018 19:25 UTC](https://forum.cpha.pt/t/vamos-falar-de-lovelace-ui/667/12 "2018-07-25T19:25:57Z")
na secçao de style:
color: blue
---
### Author:  [@CarlosMartins](https://forum.cpha.pt/u/CarlosMartins)
#### Post date: [25 Julho , 2018 20:26 UTC](https://forum.cpha.pt/t/vamos-falar-de-lovelace-ui/667/13 "2018-07-25T20:26:30Z")
Perfeito, obrigado.
---
### Author:  [@CarlosMartins](https://forum.cpha.pt/u/CarlosMartins)
#### Post date: [25 Julho , 2018 20:36 UTC](https://forum.cpha.pt/t/vamos-falar-de-lovelace-ui/667/14 "2018-07-25T20:36:01Z")
Segue um exemplo que utilizo:
```
- type: vertical-stack
cards:
- type: picture-glance
title: Garagem
image:
camera_image: camera.garagem
entities:
- light.garagem
- binary_sensor.door_window_sensor_158d0001f4081d
- cover.garage_door
```
---
### Author:  [@Encarnacao](https://forum.cpha.pt/u/Encarnacao)
#### Post date: [25 Julho , 2018 20:40 UTC](https://forum.cpha.pt/t/vamos-falar-de-lovelace-ui/667/15 "2018-07-25T20:40:47Z")
já usei isso assim mas depois deixei de usar pelo facto de ao clickares na camera e nao abrir uma janela para ver em fullscreen, nao sei se já arranjaram forma de adicionar cameras com icons e dar para abrir janela em fullscreen?
ouvi informaçao que ia haver update nisso
---
### Author:  [@CarlosMartins](https://forum.cpha.pt/u/CarlosMartins)
#### Post date: [25 Julho , 2018 20:44 UTC](https://forum.cpha.pt/t/vamos-falar-de-lovelace-ui/667/16 "2018-07-25T20:44:03Z")
Quando clica abre em Fullscreen sim.
Tb uso desse modo,
---
### Author:  [@Encarnacao](https://forum.cpha.pt/u/Encarnacao)
#### Post date: [25 Julho , 2018 20:45 UTC](https://forum.cpha.pt/t/vamos-falar-de-lovelace-ui/667/17 "2018-07-25T20:45:43Z")
@CarlosMartins já agora em relaçao ao text-elementes nao sei se ja notaste que ao redimensionar as janelas o text desalinha muito, ja reportei a situaçao.
por enquanto parece que usar top: e left: com px em vez de % parece resolver bem melhor o problema
---
### Author:  [@CarlosMartins](https://forum.cpha.pt/u/CarlosMartins)
#### Post date: [25 Julho , 2018 21:10 UTC](https://forum.cpha.pt/t/vamos-falar-de-lovelace-ui/667/18 "2018-07-25T21:10:48Z")
isso acontece pq a imagem se redimenciona, mas o texto não.
Eu usei EM, pelo menos não fica um por cima do outro, segue exemplo:
```
- type: state-label
entity: sensor.ssl
style:
color: white
top: 12.2em
left: 8.2em
transform: none
- type: custom:text-element
text: "Certificate Expiry:"
style:
color: white
top: 13.5em
left: 4.5em
```
---
### Author:  [@j\_assuncao](https://forum.cpha.pt/u/j_assuncao)
#### Post date: [26 Julho , 2018 11:45 UTC](https://forum.cpha.pt/t/vamos-falar-de-lovelace-ui/667/19 "2018-07-26T11:45:09Z")
A melhor opção é utilizar unidades de medida proporcionais com o `em` ou o `rem`. É uma técnica muito utilizada em webdesign.
---
### Author:  [@Encarnacao](https://forum.cpha.pt/u/Encarnacao)
#### Post date: [26 Julho , 2018 21:13 UTC](https://forum.cpha.pt/t/vamos-falar-de-lovelace-ui/667/20 "2018-07-26T21:13:57Z")
Aqui deixo mais uma boa opcao para ter:
com o tracker-card podemos estar sempre a par de novas actualizaçoes dos custom cards e fazer o seu update num click the butao 🙂
a parte boa tambem é que quando carregam no nome do cartao sao redirecionados para a sua pagina, assim podendo ver as suas funcoes etc…
[Próxima página](https://forum.cpha.pt/t/vamos-falar-de-lovelace-ui/667.md?page=2)