Dashboard YAML mode

O que é o Lovelace YAML mode?

É possível escrever sua configuração do Lovelace em arquivos YAML sem ser através da interface do usuário. Para fazer isso, você precisará configurar a integração do Lovelace para estar no modo yaml adicionando o seguinte código no ser arquivo “ configuration.yaml “:

lovelace:
  mode: yaml

Após adicionar, reinicie o Home Assistant para o modo a ser alterado. Crie um novo arquivo chamado “ ui-lovelace.yaml ” e pronto, seu HA já está no modo Lovelace YAML pronto para iniciar as configurações de tela do seu HA através de arquivos YAML.

Mas como eu começo?

Você simplesmente cria as “views” e adiciona os cards com seus devices (dispositivos como sensores, switchs, etc.)

A primeira coisa a fazer, é colocar um título, e em seguida a tag view. Abaixo da tag view serão configuradas as visões do seu HA. Visões são as páginas, telas ou abas que você adiciona e configura. Exemplo:

# Aqui é onde você adicionar os cards que não são nativos, ou seja, que são cards customizados e disponibilizados pela comunidade.
resources:

# Defina o title que será o título do seu HA
title: Meu home Assistant

# Aqui você pode definir um plano de fundo para todas as "views" (páginas).
background: center / cover no-repeat url("/local/background.png") fixed # nesse caso, a imagem "background.png" deve estar dentro da pasta www para mostrar na sua tela.

# views - Aqui será onde você irá adicionar todas as suas views, ou seja, todas as suas páginas.
views:

    # Página 01 - Defina um título
  - title: Home
  
    # Caminho único para acesso direto - Exemplo: /lovelace/${path}
    path: home

    # Especifique um ícone de guia se você quiser que a guia de visualização seja um ícone. Se não colocar o ícone, ficará o texto no topo.
    icon: mdi:home-assistant

    # Plano de fundo opcional (sobrescreve o plano de fundo global). Você pode adicionar um plano de fundo diferente para cada página. BACKGROUND: É opcional, não é obrigado a definir.
    background: radial-gradient(crimson, skyblue)
    
    # Inclusive, cada view pode ter um tema diferente aplicado. O tema deve ser definido no frontend. THEME: É opcional, não é obrigado a definir.
    theme: dark-mode
    
    # Agora você começa a adicionar os cards dessa visão. Você pode adicionar quantos cards quiser, todos ficarão abaixo de cards.
    cards:
    
      # CARD 01
      # O cartão de remarcação (markdown) renderiza o texto na tela.
      - type: markdown
        title: Lovelace
        content: >
          Bem vindo ao seu **Lovelace UI**.
          
      # CARD 02
      # O cartão de entidades terá uma lista de entidades e mostrará seu estado.
      - type: entities
      
        # Título do cartão de entidades
        title: Teste

        # Aqui começo a colocar meus devices como entidades. As entidades aqui serão mostradas na mesma ordem especificada no código.
        entities:
          - light.cozinha
          - switch.ar_condicionado
          - entity: light.escritorio
            # Caso você queria colocar um nome especifico nessa tela - Substituir o nome pelo nome definido abaixo
            name: Escritório

Simples. Você precisa ficar atendo a sua indentação, ou seja, ao alinhamento. Caso o alinhamento não esteja correto, sua interface não irá funcionar.

Exemplo das páginas com as abas das views:

Views toolbar

No site do HA tem mais informações de como configurar uma view:
https://www.home-assistant.io/lovelace/views/

ATENÇÃO

A partir do momento que você habilita o mode lovelace YAML, sua interface personalizada do lovelace não será mais modificável e não será mais exibida depois que você começar a escrever o código no arquivo /ui-lovelace.yaml. Caso você queira importá-lo suas configurações para o arquivo ui-lovelace.yaml e não perder tudo que você já tem configurado, basta seguir os seguintes passo.

  • Clique no menu “Visão geral”.
  • Vá no menu de três pontos (canto superior direito) e clique em Configurar interface do usuário (Configure UI).
  • Vá no menu de três pontos novamente e clique em Editor de configuração RAW (Raw config editor).
  • Abrirá a tela com o código de seu lovelace, você pode copiá-la para o arquivo /ui-lovelace.yaml e não irá perder nenhuma informação.

VANTAGENS

  • Você terá muito mais liberdade e “poder” para desenhar sua tela;
  • Você entenderá toda padronização de configuração do mode lovcelace e estará preparado para todas as novidades;
  • Conseguirá colocar cards customizados sem grandes dificuldades;
  • Toda modificação no arquivo ui-lovelace.yaml não precisa reiniciar o seu HA;

Você também pode ver mais informações no site do home assistant sobre Lovelace YAML mode :

https://www.home-assistant.io/lovelace/yaml-mode/

Cards

Abaixo segue uma lista de cards nativos (você não precisa instalar) que você poderá aplicar em suas views.

Dicas

Antes de alterar para o mode lovelace, configure o SSH para que você possa atualizar seus arquivos via FTP. Com isso você poderá utilizar editores para editar seu lovelace, abaixo segue alguns editores que recomendo:

Vídeo

4 Likes

Olá Douglas.
Muito interessante.
Eu penso em partir para esse tipo de configuração, mas fico temeroso apenas com a questão de que dessa maneira, as novas entidades não aparecem mais automaticamente em nenhuma aba.
Existiria uma maneira de criar uma view que mostrasse todas as entidades automaticamente? Se sim, eu habilitaria essa view apenas para um Super Usuário por exemplo. Eu acho esse recurso interessante principalmente quando estamos criando novas entidades, antes de sabermos muito bem onde elas devem ficar.
Desde já agradeço.

1 Like

Valeu pelo tutorial!
Alguém sabe como eu faço para colocar os cards um ao lado do outro e não um em baixo do outro?
Estou aprendendo agora montar o painel, mas ele fica igual a imagem que estou mandando.

Eu estou com a mesma dificuldade em organizar os cards. Abri o post pensando em ler alguma resposta. Instalei semana passada o Home Assistant e eu só consegui colocar um ao lado do outro na hora que eu coloquei vários cards. Mas eu não sei organizá-los ainda.

Utilizo esse que pode ser instalado pelo HACS
Instalação: https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins

Só seguir o tutorial e fazer alguns testes para entender como funciona, mas tem várias maneiras de organizar e utilizando o “break” para quebrar a linha/coluna como vc achar melhor…

Você pode acessar as entidades não utilizadas:
https://endereco-do-seu-ha/lovelace/hass-unused-entities

Poderia compartilhar duas configurações por gentileza?

- type: custom:layout-card

        layout: vertical
        cards:

          - type: entity
            entity: light.luz_cozinha

          - break # Quebra coluna

          - type: entity
            entity: light.luz_escritorio

          - break # Quebra coluna

          - type: entity
            entity: light.luz_gateway

@douglas

Parabéns e obrigado por este e outros tutoriais compartilhados aqui e no Youtube!

1 Like

Douglas, bom dia!

Meu arquivo ui-lovelace.yaml esta enorme, eu percebi nos seus videos que voce separou todos para cada opção do menu superior! Eu pesquisei sobre mas esta meio confuso de como separar esses arquivos, você tem algum tutorial para indicar ou alguma dica?

Obrigado.

2 Likes

fiz isso e a minha lovelace desapareceu

Conseguiu?
Quero fazer o mesmo com o meu, porém não faço ideia com…

Douglas, parabéns, uma pergunta, teria como compartilhar seus flows do node-red?