Nesse vídeo você vai conhecer um pouco da minha interface do Home Assistant e também vou mostrar alguns dos principais cards que utilizo para que você customize o seu Dashboard.
Não se esqueça de deixar o seu LIKE lá no vídeo! Obrigado! 😁
1. Temas Utilizados (Disponíveis no HACS)
- Google Light Theme
- Google Dark Theme
2. Automação para mudança automática do tema conforme o horário
# Tema Muda Automaticamente
- id: muda_tema_automaticamente
alias: Muda o Tema Automaticamente
initial_state: 'true'
trigger:
- platform: homeassistant
event: start
- platform: state
entity_id: sun.sun
to: above_horizon
- platform: sun
event: sunset
offset: "+00:30:00"
action:
- service_template: frontend.set_theme
data_template:
name: >
{% if states.sun.sun.state == "above_horizon" %}
Google Light Theme
{% else %}
Google Dark Theme
{% endif %}
3. Principais Cards Utilizados (Disponíveis no HACS)
- Button Card
- Mini Graph Card
- Mini Media Player
- Bar Card
- Simple Weather Card
- Vertical Card
- Horizontal Card
4. Exemplo Button, Vertical e Horizontal Cards
type: vertical-stack
cards:
- color: 'rgb(102, 140, 255)'
color_type: label-card
name: Status
styles:
card:
- height: 20px
- font-size: 14px
type: 'custom:button-card'
- type: horizontal-stack
cards:
- entity: alarm_control_panel.alarme
name: Alarme
size: 30%
color: auto
show_state: true
state:
- styles:
card:
- color: green
icon:
- color: green
value: disarmed
- styles:
card:
- color: 'rgb(255, 204, 102)'
- '-webkit-box-shadow': 0px 0px 9px 3px var(--button-card-light-color)
- box-shadow: '0px 0px 2px 1px rgb(255, 204, 102)'
icon:
- animations:
- blink .5s linear infinite
value: armed_night
color_type: card
- styles:
card:
- color: red
- '-webkit-box-shadow': 0px 0px 9px 3px var(--button-card-light-color)
- box-shadow: 0px 0px 2px 1px red
icon:
- animations:
- blink .5s linear infinite
value: armed_away
color_type: card
- styles:
card:
- color: gray
- '-webkit-box-shadow': 0px 0px 9px 3px var(--button-card-light-color)
- box-shadow: 0px 0px 2px 1px gray
icon:
- animations:
- blink .5s linear infinite
value: arming
color_type: card
- styles:
card:
- color: gray
- '-webkit-box-shadow': 0px 0px 9px 3px var(--button-card-light-color)
- box-shadow: 0px 0px 2px 1px green
value: armed_home
color_type: card
styles:
card:
- height: 100px
name:
- font-weight: 500
- font-size: 12px
state:
- font-size: 10px
type: 'custom:button-card'
- entity: switch.ventilador
name: Ventilador
show_state: false
size: 30%
color: auto
hold_action:
action: more-info
styles:
card:
- height: 100px
name:
- color: var(--button-card-light-color)
- font-weight: 500
- font-size: 12px
state:
- styles:
card:
- '-webkit-box-shadow': 0px 0px 9px 3px var(--button-card-light-color)
- box-shadow: 0px 0px 2px 1px var(--button-card-light-color)
value: 'on'
spin: true
type: 'custom:button-card'
- entity: vacuum.rockrobo_vacuum_v1
name: Robô Limpeza
show_state: true
size: 30%
hold_action:
action: more-info
state:
- styles:
card:
- filter: opacity(50%)
value: docked
- styles:
card:
- filter: opacity(50%)
- color: var(--disabled-text-color)
value: unavailable
- styles:
card:
- box-shadow: 1px 1px var(--state-icon-active-color)
state:
- color: var(--state-icon-active-color)
value: based
styles:
card:
- height: 100px
name:
- font-weight: 500
- font-size: 12px
state:
- font-size: 10px
type: 'custom:button-card'
- type: horizontal-stack
cards:
- entity: switch.difusor
name: Difusor
show_state: false
size: 30%
color: auto
hold_action:
action: more-info
styles:
card:
- height: 100px
name:
- color: var(--button-card-light-color)
- font-weight: 500
- font-size: 12px
state:
- styles:
card:
- '-webkit-box-shadow': 0px 0px 9px 3px var(--button-card-light-color)
- box-shadow: 0px 0px 2px 1px var(--button-card-light-color)
value: 'on'
type: 'custom:button-card'
- entity: lock.fechadura_entrada
name: Entrada
icon: 'mdi:lock'
show_state: false
size: 30%
color: auto
hold_action:
action: more-info
styles:
card:
- height: 100px
name:
- color: var(--button-card-light-color)
- font-weight: 500
- font-size: 12px
state:
- styles:
card:
- '-webkit-box-shadow': 0px 0px 9px 3px var(--button-card-light-color)
- box-shadow: 0px 0px 2px 1px var(--button-card-light-color)
value: unlocked
type: 'custom:button-card'
- entity: input_select.maqlavar_status
name: Máquina Lavar
show_state: true
size: 30%
hold_action:
action: more-info
state:
- styles:
card:
- filter: opacity(50%)
value: docked
- styles:
card:
- filter: opacity(50%)
- color: var(--disabled-text-color)
value: unavailable
- styles:
card:
- box-shadow: 1px 1px var(--state-icon-active-color)
state:
- color: var(--state-icon-active-color)
value: Enchendo
styles:
card:
- height: 100px
name:
- font-weight: 500
- font-size: 12px
state:
- font-size: 10px
type: 'custom:button-card'
5. Exemplo Mini Graph Card
type: 'custom:mini-graph-card' name: Sala entities: - sensor.porta_da_sala_temperature animate: true line_width: 4 font_size: 65 font_size_header: 10
6. Exemplo Simple Weather Card
type: 'custom:simple-weather-card' entity: weather.casa name: ' ' backdrop: day: var(--primary-color) night: '#40445a' secondary_info: - humidity - precipitation_probability
7. Exemplo Bar Card
type: 'custom:bar-card'
entities:
- entity: sensor.iphone_patrick_bateria
name: Patrick
animation:
state: 'on'
positions:
indicator: inside
icon: inside
name: 'off'
direction: right
limit_value: true
severity:
- from: '0'
to: '20'
color: red
- from: '21'
to: '50'
color: orange
- from: '51'
to: '100'
color: green
8. Exemplo Mini Media Player
- type: 'custom:mini-media-player'
entity: media_player.nest_hub_max
hide:
volume: false
power_state: false
artwork: cover
group: false
