Domine o Dashboard no Home Assistant: Botões Personalizados e Layouts!
Вставка
- Опубліковано 23 лип 2024
- Eleve seu Home Assistant a outro nível com este tutorial detalhado de personalização de dashboard usando o 'button-card'! Aprenda a criar botões personalizados que não só parecem incríveis, mas também aprimoram sua experiência de usuário. Domine o layout de seções para organizar seu dashboard com facilidade e descubra o poder do 'button-card', um componente customizado do HACS que traz uma flexibilidade fantástica para seus controles.
⭐ Neste vídeo, você vai ver:
🔹 Como instalar o 'button-card' via HACS
🔹 Passos para criar botões personalizados com 'button-card'
🔹 Organização do dashboard com o layout de seções
Link para biblioteca de ícones:
icon-sets.iconify.design/
Código botão personalizado:
github.com/caduvalsesia/exemp...
Seja membro deste canal e ganhe benefícios:
/ @nodeinsights
📣 Inscreva-se agora para não perder nossos guias práticos e melhorar sua casa inteligente! Ative o sininho para atualizações!
👍 Gostou do vídeo? Dê um like e compartilhe suas ideias nos comentários! Queremos saber como o 'button-card' ajudou você a personalizar seu dashboard.
#ButtonCard #HomeAssistant #DashboardCustom #SmartHome #HACS #AutomaçãoResidencial #TechDIY #HomeAssistantBrasil
💡 Fique por dentro das melhores práticas de personalização de Home Assistant e transforme sua casa numa verdadeira smart home!
📲 𝗦𝗶𝗴𝗮 𝐦𝐢𝐧𝐡𝐚𝐬 𝗿𝗲𝗱𝗲𝘀 𝘀𝗼𝗰𝗶𝗮𝗶𝘀:
Grupo do telegram:
🔷 t.me/+eh4vGe8ZYXw3YjQx
Instagram:
/ nodeinsights
TikTok
/ nodeinsights
Se inscreva no canal:
/ @nodeinsights
★ Contato Empresarial (não respondemos dúvidas por este e-mail)
nodeinsights@gmail.com
★ Edição/Gravação:
Final Cut Pro, OBS Studio e Audacity
★ Equipamentos:
Câmera: Sony A6400 - Lente Sigma 16mm 1.4
Microfone: HyperX Quadcast S
Iluminação:
Softbox Triopo
Aputure Amaran 60x
Bastões de led Luxceo Q508A
Bastão de Led Luxceo P200
Led Ulanzi Vl120
----------------------------------------------------------------------------------------------------------------------
Capítulos do vídeo:
00:00 Introdução
01:47 Criando um dashboard
03:27 Criando e configurando um botão
07:50 Criando um conjunto de entidades
10:38 Criando visualizações com seções
12:49 Instalando o button-card no HACS
14:35 Criando botões e cards personalizados
25:00 Deixe seu Like
25:15 Erros de Gravação
---------------------------------------------------------------------------------------------------------------------- - Наука та технологія
Increible leccion de como configurar un boton, obrigado Brasilero, muchas gracias por tus explicaciones desde españa aprendo un monton
Un abrazo grande desde Brasil y a seguir aprendiendo.
Boa Cadu! Como sempre, videos muito didáticos. Poderia explorar isto: videos de destrinchar automações, scripts, cenas, z2m e interface. Addons úteis após instalação do HA.... enfim, algumas sugestões de videos..rs Grande abraço! Queno canal cresça mais e mais. Vc merece🎉!
Rodrigo, agradeço muito seu comentário e as sugestões de vídeo.
Vou focar nessa parte também, mta gente tem pedido.
Grande abraço
Parabéns Cadu,amo seus vídeos e tb no final erros de gravação
Obrigado. Abs
Carlos un saludo , lo que mas me ha gustado del video fue ver que estas usando el iHost 👍🏻
Hola Christian ¿cómo estás?
Sí, es un gran dispositivo y creo que mejorará aún más en el futuro.
Gran abrazo
@@nodeinsights Super bien y tu qué tal ?
Bueno pues aprovecho para contarte que compré el mío hace un año, para poder crear automatizaciones de forma local con mis dispositivos Sonoff y hace poco decidí probar HA con Docker .... He visto comentarios de que preferiblemente no se debe instalar HA ahí porque "es muy pesado y podría no resistir el iHost" . Dime que opinas al respecto !
Mira, si no utilizas muchas cámaras ni procesamiento de imágenes, es suficiente. Si tu iHost tiene 4 GB de memoria, es mejor, tendría más capacidad que la de 2 GB.
Abrazos
Muito bom conteúdo. Curti
Obrigado pelo seu comentário Henrique.
Abs
show de bola!!!!!!
Obrigado Henrique pelo seu comentário.
Grande abraço
Seus vídeos são fantásticos, excelente qualidade de áudio e vídeo. Porém mesmo assistindo em HD, não é possível ler o que está nas abas , as letras ficam muito pequenas. Muito obrigado pela material que tem apresentado. Aprendi usar o home assistant com você.
Olá amigo, obrigado pelo seu comentário.
Vou tentar melhorar para os próximos vídeos, valeu pelo feedback.
Apesar que todo código usado, eu deixo na descrição.
Grande abraço
gostaria de colocar por exemplo balcao sao 2 lampadas, mas gostaria que ficasse 1 icone so balcao que quando click ele acende as duas lampadas, é possivel?
Top de mais!!!
Valeu João. Abs
Didática muito boa! Explicou muito bem e direto ao ponto! Parabéns!
Olá Bruno,
Obrigado pelo seu comentário.
Caso queira ver algum conteúdo específico, fique à vontade em sugerir.
Abraços
@@nodeinsights um assunto que estou um pouco perdido é com o addon FloorPlan do HA. Vejo o pessoal cada um usando uma ferramenta pra modelar, e depois a integração parece um pouco complexa.
Olá Bruno, esse addon preciso testar. Não tinha ouvido falar dele ainda.
Mas legal a sugestão.
Grande abraço
Top meu amigo! Parabéns pelo video!
Obrigado Rogério. Grande abraço
Obrigado por compartilhar!
Obrigado pelo comentário Jefferson. Abs
Mais um video show. Parabéns Cadu.
Valeu Gustavo.
Obrigado pelo seu comentário.
Abs
Muito bom vídeo
Valeu Tortoreto.
Abração
Conteúdo maravilhoso. Com certeza irei aplicar no meu Home Assistant. Parabéns.
Muito obrigado pelo comentário Victor.
Grande abraço
Caraca meu, esse video ficou muito sensacional e didatico, parabens
Obrigado pelo seu comentário Edson.
Se tiver algum vídeo que gostaria de ver no canal, fique à vontade em sugerir.
Grande abraço
Caramba, excelente! Conteúdo de muito valor. Obrigado e parabéns!
Obrigado pelo seu comentário Admilton.
Grande abraço
Boa noite !!!
Muito boa a explicação, bem direto e fácil.
Qual essa integração que uso com a Apple Tv que mostra essa animção de capa de disco?
Olá Leonardo,
É um card personalizado que faz parte desse projeto originalmente: github.com/matt8707/hass-config/
Fiz algumas adaptações.
Obrigado pelo seu comentário.
Abs
Muito bom, depois ensina para gente a fazer do zero essa sua dashboard do video , eu uso no tablet e achei essa sua muito top , gostei desse relogio que você deixou de lateral tbm , pode explicar como fazelo? Obrigado
Valeu Lucas, obrigado pelo seu comentário.
Tem um repositório que usei pra fazer. E adaptei algumas coisas. Segue:
github.com/matt8707/hass-config/
Abs
GRANDE video :) Parabéns !!!! Faz outro video ensinando a fazer um dashboard igualzinho ao teu... está lindo, espetacular !!!!
Olá amigo. Obrigado pelo seu comentário.
Em breve teremos mais vídeos no canal em relação aos dashboard. A ideia é chegar nesse meu mesmo.
Abs
Cara, muito bom!!!
Meus parabéns pelo video e obrigado por compartilhar seu conhecimento🙂
Obrigado pelo seu comentário Wilson.
Grande abraço
Mandou muito bem, vejo novos Dashboard mais bonitos no futuro.
Ola Marcelo,
Vamos ter muita coisa legal ainda no canal em relação a isso. Tem muito componente personalizado que faz milagres.
Obrigado pelo seu comentário.
Abraços
@@nodeinsights Estou aguardando na expectativa para renovar os meus Dashboard.
Estou preparando o material. Logo teremos novidades.
Abs
ganhou um inscrito
Obrigado por seguir o canal. Ative as notificações que toda semana tem video novo. Abraços
Video show e de facil entendimento. Parabens!!
No minuto20:38 você mos tra um Dash quem tem uns icons bem bacana, onde conseguir esses icones?
Abracos.
Olá Felipe,
Obrigado pelo seu comentário.
Tem um vídeo que eu fiz recentemente explicando um pouco sobre Dashboard.
ua-cam.com/video/Y467wGk4u3s/v-deo.htmlsi=1LHAGT1k0huV39wu
Mas o projeto original é esse: github.com/matt8707/hass-config/
Abs
Salve Cadu, tem que ensinar fazer igual esse seu com esse Icones ai.
Olá Augusto, vou ensinar sim. Estou preparando uma sequência de vídeos para isso.
Abs
👍
Valeu.
Abs
Cadu, vc não consegue compartilhar esse botão " luz da sala" conosco? Tentei fazer aqui, mas ta complicado.
Olá Maurício,
Nesse vídeo tem na descrição vários ícones e exemplos de como fazer:
ua-cam.com/video/HBAc-dlB6h0/v-deo.htmlsi=FppvjuVFp_H6TT5T
Esse da Sala é o icon_hue.
Abs
Cadu, sabe uma forma dos cards não trocarem de posição, eu tenho um tablet, criei os botões bem alinhados com tamanho da tela mas vezes quando reinicio o fully kiok os cards saem das posições que estavam originalmente ai tenho que ficar atualizado a pagina até volte da forma que deixei
Ola home,
Já tentou usar grid area?
Ou até mesmo as seções agora. Isso vai resolver.
Abs
Show de vídeo... como sempre. Mas esses teu ícones (que você usa na sua dashboard) são esses que você está falando? ;)
Olá Marcelo.
São feitos com o button-card também, mas tem outros componentes. Vou explicando em alguns vídeo, senão ficaria mto longo.
Mas caso queira ver o projeto original, não é meu, só adaptei.
github.com/matt8707/hass-config/
Obrigado pelo seu comentário.
Abs
@@nodeinsights Cadu, o seu também é top!!!! Sempre seguindo o amigo!
Valeu amigo. Abs
Valeu Cadu. O único que consigo seguir as instruções sem problemas. Até agora tudo indo 100%.
@regisricci5896 obrigado. Abs
Cadu no home assistant ele encontra qualquer camera IP de qualquer marca? Ex: icsee
Olá Igor, se sua câmera tiver acesso por um endereço, tipo RTSP, você consegue configurar sim.
Abs
Segue meu like
Obrigado Eduardo. Abs
Boa noite. Usei o exemplo que disponibilizou mas esta sempre ficando um fundo preto largo atrás do icone. Mesmo eu diminuindo a fonte, icone ou borda , ainda continua o tal fundo como uma imagem que acaba ocupando espaço no dashboard.
Olá Junior, em que tipo de ícone que vc criou que aconteceu isso? Com o button-card?
Abs
@@nodeinsights Sim. O button-card. Usei o exemplo que disponibilizou em um link do video
Junior, verifique se não é alguma questão de indentação.
Abs
Cadu estava brincando um pouco com esse botão alarme e queria diminuir ele, pois o código traz um tamanho grande, tentei redimensionar com card_size mas não rolou
Olá Edson,
Usa assim:
styles:
card:
- height: 230px
- width: 230px
Sempre o styles altera o estilos do componente, tanto o Card, quanto o name, state, etc.
Abs
Meu HACS não tem essa barra de busca não e daí ainda não consegui achar o "button-card". Quando clico no HACS vejo quatro botões: Integrações, Frontend, Add-ons e Sobre. No "Sobre" tem que a versão da integração é a 1.34.0 e a versão do frontend é 20220906112053... Refiz o procedimento de instalar o HACS lá pelo SSH, mas não mudou essas versões aí não. 😔
Achei. Cliquei em Integrações, na janela que se abriu cliquei na opção Frontend e em seguida no botão azul "EXPLORAR E BAIXAR REPOSITÓRIOS" e por algum mistério do universo "button-card" era a primeira opção que tava na janela-pop-up que se apresentou....
Dependendo do tipo de instalação do seu Home Assistant, acontece isso. Se instalar pelo SSH ou Terminal principalmente.
Abs
Isso mesmo, muda um pouquinho a forma de buscar. Que ótimo que encontrou.
Grande abraço
Boa tarde, posso usar um botão desse para acionar um script? Ou seja, Criei um scritp "ligar luzes da sala"e "desligar luzes da sala" posso criar um botão de forma que quando aperte o botão 1x acione o script de ligar e apertando novamente acione o script desligar luzes da sala?
Olá Rodrigo, você precisa criar uma entidade ajudante booleana para poder controlar isso.
Um exemplo aproximado do que vc precisa:
type: 'custom:button-card'
entity: input_boolean.toggle_script
name: Alternar Script
show_state: false
show_icon: true
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.toggle_script
state:
- operator: template
value: >
[[[
if (states['input_boolean.toggle_script'].state == 'on') return 'on';
return 'off';
]]]
name: Script 1
tap_action:
action: call-service
service: script.run_first_script
- operator: template
value: >
[[[
if (states['input_boolean.toggle_script'].state == 'off') return 'off';
return 'on';
]]]
name: Script 2
tap_action:
action: call-service
service: script.run_second_script
@@nodeinsights Muito obrigado! Vou tentar fazer aqui
@@nodeinsights So mais uma dúvida, estou no meu dashboards principal estou incluido varias automações ou scripts, por exemplo: Assistir Tv, quando clico ele vai acionar a tc e tv acabo, como faço para que na hora que clica em assistir tv mude o dashboard para o dash que tem o controle remoto
Olá Rodrigo,
Sei que você consegue pelo button-card, como no exemplo:
type: custom:button-card
name: Navegar para Aba
tap_action:
action: navigate
navigation_path: /lovelace/alarme
Se você precisa num tablet por exemplo ou celular, tem o Browser-mod tb.
Abs