Custom Component: HACS

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

Você precisa estar com o seu Home Assistant na versão 0.97.0 ou mais recente, para que a versão mais recente do HACS funcione.
Se você utiliza “ custom_updater “, você precisa removê-lo, você também precisará remover a entrada custom_updater do arquivo configuration.yaml.
HACS e custom_updater não podem operar na mesma instalação.

Download

  1. Baixe a versão mais recente do HACS através desse link: https://github.com/custom-components/hacs/releases/latest
  2. Inicialize o download clicando no link “Código-fonte (zip)” na parte inferior da página.
  3. Extraia o conteúdo. Você precisa descompactar isto antes de continuar.
  4. Com o conteúdo extraído, você verá uma pasta custom_components ( não confunda com o custom_updater ), e dentro dessa pasta outra chamado hacs .
    Você precisará colocar essa pasta hacs dentro da pasta custom_components no seu HA. Para isso utilize a sua ferramenta favorita, nesse caso utilizamos o FileZilla. Se você não tem a pasta custom_components no seu HA, crie essa pasta e jogue a pasta hacs dentro.
    Observação: Os demais arquivos extraídos não são necessários .
  5. O resultado, tem que ficar assim em seu Home Assistant (Hass.io) “ /config/custom_components/hacs “.

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

Dentro do seu arquivo de configuração ( configuration.yaml ), você precisa colocar o seguinte código:

hacs:
  token: d73jds8f73jkr9d8sufv2br8sd9fy92nr9f80u23r97fhse #(Não copie e cole este token, crie o seu próprio)

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 “ Community “, onde estará todo o gerenciamento dos seus componentes personalizados, algo semelhante aos Add-ons.

  • :rotating_light: Observação: O nome agora no menu á HACS.*

Basta selecionar os componentes que você desejar e instalar.

gif

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

Dentro do menu Community, você pode clicar em SETTINGS no canto superior direito da sua tela, e no campo ADD CUSTOM REPOSITORY

Após instalar os componentes? Você verá que após instalar, terá uma orientação para você referenciar o arquivo javascript (.js) dentro do seu arquivo “ ui-locelace.yaml “, na parte de “resources:”.

Exemplo, se você adicionar o componente Button Card, você precisará adicionar o seguinte código:

  - url: /community_plugin/button-card/button-card.js
    type: module

Essa parte fica dentro do “ui-locelace.yaml”, na parte de “resources:”.

Ao adicionar um componente, preciso reiniciar meu Home Assistant?

Não, você adiciona o componente personalizado, referencia no ui-locelace.yaml , atualiza seu arquivo e pronto, já pode utilizar. Caso algo não funcione corretamente, então recomenda-se a reiniciar.

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

3 Curtidas

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 Curtida

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