Como Criar uma Interface Personalizada no Home Assistant com Stack-in-Card e Mushroom Cards

16/02/2025

O Home Assistant é uma plataforma incrível para automação residencial, e personalizar sua interface pode tornar a experiência muito mais intuitiva e agradável. Neste artigo, vamos apresentar como criar um card funcional e agradável utilizando os componentes Stack-in-Card, Mushroom Template Card, Mushroom Chips Card e Card Mod.

1. Introdução aos Cards Utilizados

Para construir um painel estilizado, utilizamos a combinação dos seguintes cards:

Stack-in-Card: Agrupa vários cards dentro de um único bloco.
Mushroom Template Card: Exibe o nome do cômodo, um ícone e permite navegação.
Mushroom Chips Card: Cria botões rápidos para controlar dispositivos.
Card Mod: Personaliza a aparência dos cards com cores, sombras e imagens de fundo.

2. Criando a Estrutura Base com Stack-in-Card

Após a instalação dos card customizados, já podemos iniciar a construção do card. E ao entrar no modo de edição, podemos iniciar com o card de pilha Horizontal.

3. Criando a Estrutura Base com Stack-in-Card

Agora começamos adicionando o Stack-in-Card, que será a estrutura para cada cômodo. No painel, clique em Mostrar editor de código e cole o seguinte código abaixo de horizontal-stack:

type: custom:stack-in-card
cards:

Este card permite organizar múltiplos elementos dentro de um único bloco, mantendo a interface limpa e organizada.

4. Criando o Card Principal do Cômodo

Dentro do Stack-in-Card, adicionamos o Mushroom Template Card, que exibe o nome do cômodo e um ícone representativo.

- type: custom:mushroom-template-card
  primary: Sala
  icon: mdi:sofa
  entity: light.luz_sala
  tap_action:
    action: navigate
    navigation_path: /dashboard-ambientes/sala
  hold_action:
    action: toggle
  icon_color: "{{ 'amber' if is_state(entity, 'on') }}"
  fill_container: true
  layout: horizontal

O ícone muda de cor automaticamente quando a luz está acesa, e um clique no card leva para a tela do cômodo.

5. Adicionando Controles com Mushroom Chips Card

Agora, incluímos o Mushroom Chips Card para adicionar botões interativos para luzes, sensores e TV.

- type: custom:mushroom-chips-card
  chips:
    - type: entity
      entity: light.luz_sala
      icon_color: yellow
      icon: mdi:lightbulb
      content_info: none
      tap_action:
        action: toggle
    - type: entity
      entity: binary_sensor.porta_sala_contact
      icon: mdi:door-closed
      icon_color: red
      content_info: none
    - type: entity
      entity: binary_sensor.tv_samsung
      content_info: none
      icon: mdi:television
      icon_color: blue
      tap_action:
        action: more-info
        entity: media_player.samsung_6_series_58

Com isso, podemos ligar/desligar luzes, monitorar portas e acessar informações da TV diretamente pelo painel.

6. Personalizando com Card Mod

Para melhorar ainda mais a estética do painel, usamos o Card Mod para alterar cores e adicionar um fundo nos chips.

    card_mod:
      style: |
        .chip-container {
          display: flex;
          flex-wrap: wrap;
        }
        .chip-container > * {
          min-width: 32px; /* Aplica o min-width a todos os chips */
        }
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
          --chip-border-color: transparent;
          background-color: #222222;
          box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.15);
          display: block;
        }
        :host {
          background-color: #222222;
          box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.15);
          display: block;
        }

Para melhorar ainda mais a estética do painel, usamos o Card Mod para alterar cores e adicionar um fundo nos chips.

 
card_mod:
  style: |
    ha-card {
      position: relative;
      box-shadow: none;
      --ha-card-border-width: 0px;
      background: {{
        '#1c1c1c' if is_state('light.luz_sala', 'on') else '#1c1c1c'
      }};
    }
    ha-card::before {
      content: "";
      position: absolute;
      top: -12px;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url('https://cdn.jsdelivr.net/gh/Templarian/MaterialDesign@master/svg/sofa.svg');
      background-repeat: no-repeat;
      background-position: right top;
      background-size: 40%;
      filter: brightness(0) saturate(100%) invert(96%) sepia(4%) saturate(500%) hue-rotate(314deg) brightness(96%) contrast(92%);
      opacity: {{
        '0.3' if is_state('light.luz_sala', 'on') else '0.05'
      }};
      z-index: 0;
    }

Este código melhora o visual, adicionando um fundo escuro, uma sombra leve e um ícone no canto superior do card.

7. Duplicando para Outros Cômodos

Agora que criamos um card completo, podemos replicá-lo para outros ambientes. Basta copiar o código e alterar as entidades e ícones. Abaixo segue o código completo:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Sala
    icon: mdi:sofa
    entity: light.luz_sala
    tap_action:
      action: navigate
      navigation_path: /dashboard-ambientes/sala
    hold_action:
      action: toggle
    icon_color: "{{ 'amber' if is_state(entity, 'on') }}"
    fill_container: true
    layout: horizontal
  - type: custom:mushroom-chips-card
    alignment: end
    chips:
      - type: entity
        entity: light.luz_sala
        icon_color: yellow
        icon: mdi:lightbulb
        content_info: none
        tap_action:
          action: toggle
      - type: entity
        entity: binary_sensor.porta_sala_contact
        icon: mdi:door-closed
        icon_color: red
        content_info: none
      - type: entity
        entity: binary_sensor.tv_samsung
        content_info: none
        icon: mdi:television
        icon_color: blue
        tap_action:
          action: more-info
          entity: media_player.samsung_6_series_58
    card_mod:
      style: |
        .chip-container {
          display: flex;
          flex-wrap: wrap;
        }
        .chip-container > * {
          min-width: 32px; /* Aplica o min-width a todos os chips */
        }
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
          --chip-border-color: transparent;
          background-color: #222222;
          box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.15);
          display: block;
        }
        :host {
          background-color: #222222;
          box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.15);
          display: block;
        }  
card_mod:
  style: |
    ha-card {
      position: relative;
      box-shadow: none;
      --ha-card-border-width: 0px;
      background: {{
        '#1c1c1c' if is_state('light.luz_sala', 'on') else '#1c1c1c'
      }};
    }
    ha-card::before {
      content: "";
      position: absolute;
      top: -12px;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url('https://cdn.jsdelivr.net/gh/Templarian/MaterialDesign@master/svg/sofa.svg');
      background-repeat: no-repeat;
      background-position: right top;
      background-size: 40%;
      filter: brightness(0) saturate(100%) invert(96%) sepia(4%) saturate(500%) hue-rotate(314deg) brightness(96%) contrast(92%);
      opacity: {{
        '0.3' if is_state('light.luz_sala', 'on') else '0.05'
      }};
      z-index: 0;
    }

Com isso, conseguimos um painel completo para monitorar e controlar toda a casa!

Conclusão

Com a combinação do Stack-in-Card, Mushroom Cards e Card Mod, criamos uma interface moderna, prática e bonita no Home Assistant. Personalizar sua casa inteligente nunca foi tão fácil! Se tiver dúvidas ou sugestões, deixe nos comentários. E continue explorando novas formas de otimizar sua automação residencial!

Bônus

As imagens você pode pegar através dos links abaixo, basta alterar o nome da imagem no final do link colocando o mesmo nome do ícone.

🎥 Se você quiser ver mais detalhes, assista ao vídeo abaixo:

2 comentários sobre “Como Criar uma Interface Personalizada no Home Assistant com Stack-in-Card e Mushroom Cards”

Simao Pereira

24/02/2025 em 09:34
Link permanente

Optimo vido Obrigado !
Tenho muita dificulade com quando colo o código… dá sempre erro de tabulações… 🙂
Ja tentei tudo e depois aparece-me a mensagem Visual editor not supported
De qualquer das formas obrigado ! Show di bola (como voces dizem) – Eu sou de Portugal 🙂
Resposta
- doug.baptista@gmail.com
  
  24/02/2025 em 13:01
  Link permanente
  
  Olá, eu fiz os testes e se copiar exatamente como está, deve funcionar, não deveria aparecer nenhum erro.
  Mas tentarei ajudar, coloquei o o card “horizontal-stack” que iniciar antes para ver se resolver, coloquei o arquivo no meu github para facilitar na hora de copiar, tente verificar se desta forma funciona por favor.
  
  https://raw.githubusercontent.com/dougbaptista/arquivos_compartilhados/refs/heads/main/card_comodo.yaml
  Resposta