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