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.

6 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 …