Custom Component: HACS - Home Assistant Community Store

O que é HACS?
É uma abreviação de “Home Assistant Community Store”.

Você certamente já precisou, ou já visualizou em vídeos, projetos uma interface com componentes customizados. Como um botão, gráficos diferentes, com linhas mais atraentes, ou com barras, etc. Para poder personalizar as views (telas) do seu HA como os exemplos citados, é necessário a instalação de componentes customizados.

Antes da existência do HACS, todo componente era instalado manualmente. Agora com o HACS, o usuário utiliza de uma interface poderosa para lidar com downloads de necessidades personalizadas.

As principais vantagens do HACS são:

  • Ajudar você a descobrir novos elementos personalizados;
  • Ajudá-lo a instalar (download) novos elementos personalizados;
  • Ajudar você a acompanhar (atualizações) seus elementos personalizados;
  • Gerenciar (Instalar / Atualizar / Remover);
  • Atalhos para repositórios / rastreador de problemas;

Esse artigo irá auxiliar a instalar e configurar esse componente que gerencia outros componentes personalizados, dando mais personalidade para seu HA.

Instalação

Pré-requisitos

  • Versão do Home Assistant 2020.12.0 ou mais recente
  • Uma conta no GitHub
  • Uma instalação do Home Assistant
  • Acesso a pasta config do Home Assistant

Download

  1. Baixe a versão mais recente do HACS através desse link: https://github.com/custom-components/hacs/releases/latest
  2. Desça a página até a parte Ativos e clique em “hacs.zip” para baixar.

  1. Vá até o config do seu Home Assistant e veja se você já tem a pasta custom_components no seu Home Assistant, se não tiver crie essa pasta e dentro dela crie uma chamada hacs.
  2. Extraia o conteúdo do “hacs.zip” dentro da pasta “hacs”.
  3. O resultado, tem que ficar assim em seu Home Assistant (Hass.io) “ /config/custom_components/hacs “.
  4. Reinicie o Home Assistant.

Gerando o Token no Github

  1. Para completar a configuração, você deve primeiro criar um token no Github.
  2. Acesse o site https://github.com/settings/tokens, se você não tem uma conta você irá precisar criar uma.
  3. Dentro da página “Personal access tokens”, você deve clicar no botão “ Generate new token “.
  4. Na tela seguinte, dê um nome lógico para que você possa reconhecê-lo. Em seguida, clique no botão “Gerar token” na parte inferior.
    Observação: Você não precisa selecionar nenhuma das caixas/opções .
  5. Agora você tem o token gerado, esta será a única vez que você irá realizar esse processo, certifique-se de copiá-lo manualmente ou clicando no ícone da área de transferência, para configurar em seu HA.

Configurando seu Home Assistant

Vá em Configurações e depois em Integrações

Clique no canto direito embaixo para Adicionar Integração e ache o HACS na lista

Coloque o Token

Clique em Finish

4

Pronto!

5

Instalando componentes personalizados

Agora que você finalizou as etapas de instalações e configurações, basta reiniciar seu Home Assistant.

Após reiniciar, você verá um novo menu chamado “ HACS “, onde estará todo o gerenciamento dos seus componentes personalizados, algo semelhante aos Add-ons.

Clicando em HACS irão aparecer duas opções: Integrations e Frontend.

Integrations são integrações de dispositivos ou plataformas que a comunidade fez para serem adicionadas ao Home Assistant.

Frontend são opções de temas e cartões para a Lovelace (tela de visão geral) do Home Assistant.

Clicando em Integrations visualizamos abaixo as integrações mais recentes adicionadas. Clique em Explore e ADD Repositories no canto direito abaixo.

Aqui podemos achar as integrações que a comunidade elaborou

Depois de escolher qual instalar é só clicar em Install This Repository in HACS.

Clicando em Frontend temos a opção de visualizar abaixo os temas e cartões da Lovelace mais recentes adicionados. Clique em Explore e ADD Repositories no canto direito abaixo.

Aqui podemos pesquisar cartões da lovelace e temas para o Home Assistant.

Escolhendo um é só clicar em Install This Repository in HACS para instalar.

E se o componente não estiver disponível dentro do HACS?

Simples, você pode instalar o componente pelo github dele!

Dentro do menu HACS, em Integrations no menu no canto superior direito da sua tela, vá no campo CUSTOM REPOSITORIES.

Aqui coloque a URL do github do componente, selecione se é uma integração, um tema ou um cartão da lovelace e clique em ADD.

Ao adicionar um componente, preciso reiniciar meu Home Assistant?

Depende, alguns componentes pedem que se reinicie o Home Assistant. Integrações geralmente pedem, cartões e temas não.

1

Onde ficam os arquivos adicionados via HACS?

Você verá que todos os componentes instalados via HACS, ficarão dentro da pasta www -> community .

Sendo assim, se você tinha algum componente personalizado instalado manualmente antes do HACS, você deve remover, e também do seu resources. Você agora utilizará tudo via HACS.

Vídeo

6 Likes

Douglas,

Parabéns pelos seus posts e vídeos, venho seguindo e tenho aprendido muito.

Fiz toda a instalação do HACS como você orientou, mas ainda estou tendo problema para adicionar qualquer CARD customizado.

Não utilizo custom_update, bom pelo menos eu não tinha essa pasta e nenhuma referência no arquivo conf.
minha versão do Home Assistant é a 0.110.4
a versão do HACS é a 1.0.3

Coloquei a conf com as informações do HACS com meu token do Github
Coloquei a pasta hacs dentro da pasta custom_components

Reiniciei e em vez de aparecer community apareceu HACS mas acredito ser a versão

fui em addons fiz a instalação do CARD

Fui na arquivo ui-lovelace.yaml e adicionei o resource: da forma que pediu

criei o card e ai que vem o problema a resposta é sempre a mesma:
Custom element doesn’t exist: mini-graph-card

olhei fisicamente e o arquivo está em www\community\mini-graph-card\mini-graph-card-bundle.js

Já tentei mudar o resource para os seguintes caminhos
/local/www/community/mini-graph-card/mini/graph-card-bundle.js
local/www/community/mini-graph-card/mini/graph-card-bundle.js
/www/community/mini-graph-card/mini/graph-card-bundle.js
www/community/mini-graph-card/mini/graph-card-bundle.js
/community/mini-graph-card/mini/graph-card-bundle.js
local/www/community/mini-graph-card/mini/graph-card-bundle.js
/community/mini-graph-card/mini/graph-card-bundle.js
community/mini-graph-card/mini/graph-card-bundle.js
/community_plugin/mini-graph-card/mini/graph-card-bundle.js

todos sem sucesso.

o que estou fazendo de errado?

qualquer card que adiciono é o mesmo problema.

Obrigado

No topo do arquivo ui-lovelace.yaml, vc tem que indicar o caminho de cada card que vc instala e o tipo (que vc encontra na descrição de cada card instalado)

Se sua pasta community, ou community_plugin estiverem dentro da pasta www, basta vc colocar /local/

No meu home assistant, depois das ultimas atualizações, a maioria dos cards passou pra pasta community_plugin, mas alguns ainda estão na pasta community

veja como eu fiz:

1

2

Mesmo assim o erro continua

Veja se existe esse card na pasta community_plugin. Se existir use o caminho dessa pastabpra ver se funciona. Se ele nao existir na pasta, tente remover o card e reinstalar novamente

não existe a pasta community_plugin.
Todos os plugin estão na community

Removi e reinstalei todos os plugin mas mesmo assim não funciona, qualquer um que eu instalo mesmo que seja só pra fazer um teste o erro é o mesmo.

Achei o problema, bom não existia problema de configuração, estava tudo ok.

para resolver fui em visão geral \ três pontos no canto superior direito \ cliquei em recarregar recursos

Funcionou na hora todos os cards

Obrigado pela ajuda

1 Like

Você conseguiu instalar seguindo o passo a passo? Colocando o hacs: > token no arquivo config?
O meu HA, não consegue verificar e validar com esse código no arquivo. Quando retiro ele, ele volta a validar.

Olá Vinicius, qual versão do seu HA?

Olhando na documentação do HACS, atualmente está com o requisito de Home Assistant versão 0.110.0 ou mais recente.

Outro detalhe é verificar se aparece algo no Log.

Oi Douglas, obigado por todos os videos e dicas por aqui.

Sim, estou utilizando a versão do Home Assistant 0.111.4 e atendo todos os pré requisitos.

Quando vou na parte de integrações e clico no “+” e digito hacs, aparece ele pra poder instalar, mas quando clico, aparece uma janela com “Por favor, aguarde enquanto a integração está a ser instalada”, e não sai dessa janela.

Tente refazer o processo. Estranho ficar assim, não tive essa experiência.

Bom dia! no meu caso todos os plugins que instalo ficam assim…(Not loaded in Lovelace
You have 2 Lovelace elements that are not loaded properly in Lovelace.). O HACS instala normalmente sem erro algum, mas assim que termina ja aparece o erro. Reinstalei o plugins e o erro persiste… os cars apresentam o mesma mesagem de erro do topico (Custom element doesn’t exist:)

Nada. Desinstalei tudo, recomecei do zero, rodei o Virtual Box e aprimeira coisa que fui fazer foi instalar o hacs e fica na mesma.

Você está com a versão mais recente do HA e Hacks?

Sim, baixei tudo agora novamente.

@douglas @Fabio_Wielewski Acabei de reiniciar o HA novamente, depois de ter deletado a maquina virtual e feito todo o processo do início e por algum motivo, agora deu certo.
Obrigado a todos!

Geralmente quando não funciona as atualizações com o reinicio do HA eu faço reinicialização do SO no meu caso raspbian

Obrigado amigo, pela ajuda!

1 Like

Se alguém tiver esse problema com o HACS, de aparecer que ele está desabilitado.

photo_2021-01-08_21-35-04

Para resolver é só ir no config, custom_components e na pasta hacs e apagar a pasta _ pycache_ e reiniciar o Home Assistant.

photo_2021-01-08_21-36-08