HADashboard - Instalação e Configuração básica

Pessoal, bom dia!

Gostaria de compartilhar o passo a passo que segui para instalar e configurar o HADashboard. Segui a documentação disponibilizada pelos desenvolvedores e a instalação é muito fácil pra quem usa Hass.io, pois, se trata somente de incluir um Addon no Home assistant (AppDaemon). Já a configuração e customização avançada da interface gráfica, depende um pouco de conhecimentos em CSS mas também não é nada muito complexo e existem Skins que podem ser utilizadas para customizar a interface.

1- Instalação do AppDaemon (HADashboard):

Dependendo da sua arquitetura do Home Assistant, a instalação do AppDaemon seguirá diferentes passos. No meu caso, eu utilizao o Hass.io e a instalação é bem simples.

Aqui o passo a passo para outros tipos de instalação:

https://appdaemon.readthedocs.io/en/stable/INSTALL.html

Se você tem o hass.io, os passos são os seguintes:

  • Adicionar o repositório de Addons abaixo, por onde o AppDaemons pode ser instalado. No meu caso, ele ja estava instalado, recomendo buscar pelo nome e verificar se o AppDaemons ja aparece pra você. Se não, basta adicionar o repositório abaixo.

    https://github.com/hassio-addons/repository

  • Clique no AppDaemon e depois em Install.

  • Eu marquei as opções para iniciar no boot e reiniciei o serviço

  • Pronto, o AppDaemon ja esta instalado e também o HADashboard. Para testar, clique em “Open web ui”. Se estiver tudo instalado corretamente, vai abrir uma nova página no endereço do seu Home Assistant, na porta 5050. Essas configurações podem ser modificadas caso queira.

    image

  • Como eu ja tenho outros Dashboards criados, eles aparecem listados aqui. Pra você deve aparecer um Dashboard simples de teste “Hello Word”:

  • Se quiser, algumas configurações podem ser feitas no Configuration.yaml:

SSL:

dash_ssl_certificate: /etc/letsencrypt/live/somehost/fullchain.pem
dash_ssl_key: /etc/letsencrypt/live/somehost/privkey.pem

Senha:

dash_password: !secret dash_password

Diretório dos arquivos de Dashboard:
O padrão é que os arquivos fiquem no diretório: /config/appdaemon/dashboards/ mas se você quiser alterar, é so incluir o novo caminho no configuration.yaml

hadashboard:
dashboard_dir: /etc/appdaemon/dashboards

2 - Criação dos Dashboards

Os Dashboards seguem o mesmo princípio de configuração dos arquivos YAML, com uma extensão diferente (*.DASH), portanto, a identação é muito importante.

No link abaixo, está toda a documentação de configuração dos Dashboards. Não vou detalhar tudo aqui, pois são muitas as configurações disponíveis.

https://appdaemon.readthedocs.io/en/stable/DASHBOARD_CREATION.html

Os Dashboards utilizam todas as entidades (e atributos) criadas no Home Assistant e consistem em uma estrutura bem simples, composta de:

  • Configuração geral da pagina (Nome, Qtd, colunas, etc…)
  • Configuração dos Widgets (opcional)
  • Layout

Todo Dashboard, deve ter a configuração geral da página que pode ser igual ao código abaixo, onde você customiza por exemplo o tamanho e espaçamento dos Widgets e quantidade de colunas do Dashboard.

##
## Main arguments, all optional
##
title: Main Panel
widget_dimensions: [120, 120]
widget_size: [1, 1]
widget_margins: [5, 5]
columns: 8
global_parameters:
    use_comma: 0
    precision: 1
    use_hass_icon: 1
    namespace: default
    devices:
      media_player:
        step: 5

Logo depois, pode-se criar o Layout do Dashboard inserindo diretamente as entidades do Home assistant da seguinte forma:

layout:
  - <entidade1>, <entidade2>, <entidade3>
  - <entidade4>, <entidade5>

Cada linha do Dashboard começa com um “-” e as colunas (Widgets) são separadas por “,”.

No exemplo abaixo será criado um arquivo chamado exemplo.dash no diretório configurado anteriormente. O Dashboard terá duas linhas. Na primeira linha temos 3 Widgets e na segunda linha 2 Widgets:

##
## Main arguments, all optional
##
title: Painel Principal
widget_dimensions: [120, 120]
widget_size: [1, 1]
widget_margins: [5, 5]
columns: 8
global_parameters:
    use_comma: 0
    precision: 1
    use_hass_icon: 1
    namespace: default
    devices:
      media_player:
        step: 5
    use_hass_icon: 0

layout:
    - climate.ar_sala, switch.54021313dc4f225b9756_102, light.luz_da_lareira
    - media_player.chromecast(2x2), light.luz_do_closet

Note que no media_player.chromecast foi configurado para que o Widget tenha seu tamanho alterado para 2 linhas por 2 colunas simplismente adicionando (2x2) no final do nome da entidade. Levar em consideração que as linhas abaixo e colunas ao lado serão ocupadas pelo widget com o tamanho modificado.

Para testar seu novo Dashboard, entre com o endereço da seguinte forma: IP_DO_HOMEASSISTANT:5050/exemplo

Note que foram criados Widgets de tipos diferentes de uma forma automática. Esses tipos foram “importados” de acordo com o tipo da entidade utilizada no Layout. Mas podemos ter um controle um pouco maior sobre o tipo do widget e as suas configurações de aparência. Como exemplo, vou mudar o tipo do Widget utiliado para controlar o Ar-Condicionado e mostrar somente a sua temperatura e vamos criar/incluir outro Widget de relógio.

Entre a Configuração da pagina e o layout do Dashboard, vamos adicionar a configuração dos widgets:

ar_da_sala:
    widget_type: sensor
    entity: climate.ar_sala.temperature

relogio:
  widget_type: clock
  widget_style: "background: white"
  date_style: "color: black"
  time_style: "color: green"

No caso do Ar-Condicionado foi declarado um Widget do tipo “sensor” chamado ar_da_sala que recebe o valor do atributo temperature da entidade climate.ar_sala. Para o relógio, foi criado um Widget novo com as configurações de data e hora do dispositivo que exibe o Dashboard.

Para mostrar os novos Widgets no Dashboard, substituímos o nome da entidade utilizada no layout pelo nome declarado na criação do Widget. Ficando o layout da seguinte forma:

##
## Main arguments, all optional
##
title: Painel Principal
widget_dimensions: [120, 120]
widget_size: [1, 1]
widget_margins: [5, 5]
columns: 8
global_parameters:
    use_comma: 0
    precision: 1
    use_hass_icon: 1
    namespace: default
    devices:
      media_player:
        step: 5
    use_hass_icon: 0

ar_da_sala:
    widget_type: sensor
    entity: climate.ar_sala.temperature

relogio:
    widget_type: clock
    widget_style: "background: white"
    date_style: "color: black"
    time_style: "color: green"

layout:
    - relogio(2x1), ar_da_sala, switch.54021313dc4f225b9756_102, light.luz_da_lareira
    - media_player.chromecast(2x2), light.luz_do_closet

Diversos tipos de customizações podem ser feitas nos Widgets, mas não vou detalhar tudo aqui pois a documentação já esta bem completa:

https://appdaemon.readthedocs.io/en/stable/DASHBOARD_CREATION.html#widget-customization

Além das customizações que podem ser feitas nos Widgets, é possivel selecionar SKINS que mudam totalmente a aparência do Dashboard. Com a instalação do HADashboard já são entregues algumas skins que podem ser utilizadas entrando com o endereço do Dashboard + ?skin=<nome_da_skin> . Exemplo:

http://192.168.1.14:5050/exemplo?skin=obsidian

As seguintes skins estão disponíveis:

  • default
  • obsidian
  • zen
  • simplyred
  • glassic

Para criar uma skin personalizada, você precisará conhecer um pouco de CSS. Comece criando um diretório chamado custom_css no diretório de configuração (/config/appdaemon/custom_widgets), no mesmo nível que o diretório dos Dashboards. Em seguida, crie um subdiretório em custom_css com o nome da sua Skin.

A skin em si consiste em 2 arquivos separados:

dashboard.css - Este é o CSS básico do painel que define estilos de widget, aparência de segundo plano etc.
variables.yaml - Esta é uma lista de variáveis que descrevem a aparência de diferentes elementos dos widgets. Usando as variáveis corretas, você pode filtrar praticamente todos os elementos de cada tipo de widget.

Recomendo a leitura da documentação disponível no endereço abaixo pois são muitas as opções de Widgets e configurações aplicáveis por tipo de objeto.

https://appdaemon.readthedocs.io/en/stable/DASHBOARD_CREATION.html#

A utilização do HADashboard fica muito legal em Tablets. Esse é o exemplo da interface que eu estou iniciando:

image

image

Espero ter ajudado!

Abraços!
Renato.

7 Curtidas

Muito bom!! Parabéns!! :clap::clap::clap:

Renato, muito show sua postagem.
Segui seu tutorial e instalei o Appdaemon, o arquivo de teste abre nosmalmente, logo acredito que a instalação esteja ok, porem, quando eu adiciono outro widget e especifico a entidade, o dashboard aparece mas com um erro de “entidade não encontrada”. Ja testei com todas as entidades disponiveis no meu HA e todas apresentam o erro. Sabe me dizer onde estou errando?
Grande abraço!

Paulo, boa tarde!

Acredito que pode ser algum problema de autenticaçao entre o Addon e o Home Assistant.

Para verificar se é mesmo isso, veja o o que apresenta o log do Addon AppDaemon:

Clique em Hass.io, e vá para o AppDaemon:

Role a barra de rolagem até o final e de um refresh no LOG e veja o que apresenta as mensagens do AppDaemon. Se tiver algo relacionado a falha de autorização ou autenticação, creio ser necessario fazer algumas configurações adicionais no arquivo: /config/appdaemon/appdaemon.yaml

Vou colocar o meu arquivo aqui para servir como guia, mas faça as configurações de acordo com a sua instalação do Home Assistant.

  • Crie um novo “Token de acesso de longa duração” (bote o nome que quiser e copie o código gerado)

Faça algumas alterações no arquivo /config/appdaemon/appdaemon.yaml conforme abaixo:

secrets: /config/secrets.yaml
log:
  logfile: STDOUT
  errorfile: STDERR
appdaemon:
  threads: 10
  app_dir: /config/appdaemon/apps # CASO TENHA ALTERADO O DIRETORIO, COLOQUE AQUI
  plugins:
    HASS:
      type: hass
      ha_url: http://192.168.1.14:8123 # COLOQUE O ENDEREÇO DO SEU HOME ASSISTANT AQUI
      token: !secrets appdaemon # COLOQUE O NOVO TOKEN GERADO AQUI
hadashboard:
  dash_url: http://192.168.1.14:5050 # COLOQUE O ENDEREÇO DO SEU HADASHBOARD AQUI
  dash_dir: /config/appdaemon/dashboards # CASO TENHA ALTERADO O DIRETORIO, COLOQUE AQUI

Salve o arquivo, reinicie o Addon do AppDaemon, depois de um refresh no LOG para ver se conectou. Isso deve solucionar o problema caso seja relacionado a falta de autorização ou autenticação com o Home Assistant.

Renato, sem palavras. Agradeço a ajuda do amigo, era isso mesmo.
Grande Abraço!

1 Curtida

Rapaziada, uma ajuda. É possivel colocar o painel de alarme abaixo no HADashboard?
Se for possivel, alguem poderia me orientar no codigo?

image

Paulo, boa tarde!

Da sim! Bastar você especificar o tipo do widget como “alarm” e colocar a sua entidade. Segue o Exemplo:

alarme:
    widget_type: alarm
    entity: alarm_control_panel.alarme_de_casa

layout:
    - relogio(2x1), ar_da_sala, switch.54021313dc4f225b9756_102, light.luz_da_lareira, alarme
    - media_player.chromecast(2x2), light.luz_do_closet

Clicando no Widget, aparece o teclado:

Abraços,
Renato

1 Curtida

Obrigado Renato, eu já havia configurado dessa forma, porem como só vi o status do alarme e nao cliquei na informação, não vi o painel da senha. Mais uma vez, obrigado pela ajuda.

Grande abraço

Tutorial top!
E teria algum exemplo para inserir aquela foto de fundo do painel?
Abs!

1 Curtida

Show … Agora vamos aprender a mexer um pouco mais …

Grande partilha. Também já tenho o meu apesar de agora existir o lovelace dashboard que é bastante mais simples…


É depois fiz um pequeno upgrade para a minha impressora 3d

Mas todos os dias faço ajustes.
Abraço.

Esse tablet fica conectado a energia ou sempre tem que tirar para carregar? Estou atras de um suporte de parede para o meu, se puder indicar eu agradeço.

O meu está sempre ligado a corrente. Tenho o quadro mesmo ao lado. Este suporte tirei do thingiverse. Mas tens de ver lá se tem algum para a tua tablet.

1 Curtida

Renato,

Consegue me dizer qual a maior diferença entre usar o Lovelace e o HADashboard?

Hoje uso o Lovelace no meu terminal mas acho um pouco limitado.

Boa tarde!

Aqui eu usei o HA Dashboard como uma maneira de reaproveitar um iPad 2 que não é compatível com a interface Lovelace. Acho que o HA Dashboard tem como principal conceito o uso em telas expostas pela facilidade e geralmente simplicidade na interface.

Nada impede que você use o lovelace também em um tablet exposto na parede! Creio que não há regra pra se usar esse ou aquele. O conceito de liberdade que o Home Assistant nos proporciona na minha opinião é que faz toda a diferença!

Você encontrará tanto na Play store ou na App store da Apple opções de aplicativos que também fazem essa funcionalidade de apresentação em “kiosk”. Alguns com mais opções de customização e outros mais simples. Tudo é questão de gosto.

O lovelace na minha opinião é a interface que oferece a maior possibilidade de customização. E é o que eu gostaria de usar no meu tablet. Mas como disse, o meu ipad 2 velho de guerra não suporta.

Hj eu tenho uma interface toda modificada com temas, custom header e papeis de parede animados e que mudam de acordo com a previsão do tempo. Eu acho bem bonito e tem muito recurso ainda pra utilizar e melhorar, mas também gosto de uma interface mais simples para usar no celular. Vai depender de cada um!

Esse é minha lovelace:

2020-05-23 14-20-31

1 Curtida

caros,

pequena contribuição ao tópico: pra facilitar a leitura do código yaml e reaproveitar partes dele, eu gosto de definir os sensores em um arquivo separado e importar no arquivo de dashboard. Por exemplo, tenho um arquivo chamado devices.yaml e nele eu defino os dispositivos que eu tenho:

dev_ventilador_quarto:
  widget_type: switch
  title: Ventilador quarto
  entity: switch.ventilador_quarto
  icon_on: mdi-fan
  icon_off: mdi-fan-off

dai no arquivo dashboard:

layout:
- include: devices
- clock(2x1), dev_ventilador_quarto

Outra dica é criar paineis. Tenho uma arquivo “paneis” com definições como:

painel_remote:
   widget_type: navigate
   title: Remote
   dashboard: Cozinha8-remotes
   icon_active: mdi-remote
   icon_inactive: mdi-remote

painel_cameras:
   widget_type: navigate
   title: Cameras
   dashboard: Cozinha8-cameras
   icon_active: mdi-cctv
  icon_inactive: mdi-cctv

Dai em cada arquivo de dashboard eu faço o include de forma a poder incluir botões que te levam para outros dashboards (1a coluna de botões no exemplo abaixo):

ah sim… por fim um dica legal pra quem vai rodar em tablet: wallpannel. Um app que vc consegue controlar via mqtt. É no estilo do fully kiosk browser.

Cara, como vc colocou a data nesse formato?
Aqui não encontro de maneira nenhuma onde faço essa alteração.

@Leo,

Não fiz nenhuma configuração especial… tá no formato americano (mes/dia). A configuração é a mais simples possível:

clock:
    widget_type: clock

layout:
    - painel_cozinha,  clock(2x1), temp_outside, temp_quarto, temp_escritorio, temp_sala 

Talvez a configuração geral do appdaemon tenha alguma influencia:

appdaemon:
  total_threads: 10
  latitude: -25.xx
  longitude: -49.xx
  elevation: 908
  time_zone: America/Sao_Paulo