Card de cômodo: Mushroom + Stack-in-Card + ícone de fundo
Nome, ícone que acende com a luz, chips de luz, porta e TV e um ícone grande ao fundo que brilha quando a luz está ligada.
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;
}
Como usar
Precisa de três cards do HACS: Stack-in-Card, Mushroom e Card Mod.
Troque light.luz_sala (aparece quatro vezes), as entidades da porta e da TV e o navigation_path. Para outro cômodo, mude o ícone de fundo trocando sofa.svg no link pelo nome do ícone do MDI (pot-steam, bed-queen, washing-machine, toilet...).
O passo a passo, trecho por trecho, está no artigo.
0 comentários
Carregando comentários…
Também respondo os comentários no YouTube.
Escolhidos para você
Veja também
ArtigoSua casa em 3D no Home Assistant: NeonPlan 3D do zero
Do download à planta funcionando: desenhe a casa, ligue luzes, sensores e portas, e monte um painel com a planta 3D ao lado de energia e temperatura.
VídeoCard de notificações com condições e markdown no Home Assistant
Neste vídeo mostro como configurar notificações do meu projeto. Utilizando os cards markdown e conditional.
VídeoLovelace Mode Yaml - Português - Home Assistant
VídeoCustom Layout Card - Home Assistant
Blueprint: sincroniza luz e interruptor nos dois sentidos
Liga a luz pelo interruptor e o interruptor pela luz, sem loop. Uso na escada e na garagem aqui de casa.
Aviso de porta ou janela aberta quando todos saem
Casa vazia por 2 minutos e algo ficou aberto? Chega uma notificação dizendo exatamente o quê.