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

 

DEIXE UMA RESPOSTA

Please enter your comment!
Please enter your name here