Cómo crear un panel de Home Assistant

Home Assistant es un sistema de hogar inteligente realmente versátil que le permite conectar todos sus dispositivos domésticos inteligentes.

Pero para controlarlos, o para obtener información sobre su hogar inteligente, probablemente desee mejorar un Panel de Home Assistant.

Este es el 3rd artículo en una miniserie sobre la creación de mi panel de Smart Home con Home Assistant.

En el primer artículo, expliqué cómo podemos usar y montar una tableta FireHD como panel de control de una casa inteligente.

En el segundo artículo, nos dividimos en configurar Home Assistant y MQTT. Y en este artículo, vamos a crear un Panel de Home Assistant.

Es bueno saber que estoy usando Homey como mi controlador Smart Home. Home Assistant solo se usa para mostrar el tablero interactivo.

Para el tablero, no importa si HA es su controlador o Homey.

Bueno saber

No soy un experto en Home Assistant, he visto paneles que tienen funciones realmente avanzadas (y agradables), pero que también son complicados de hacer.

Mi objetivo para este tablero era obtener información sobre mi hogar inteligente y permitir que los miembros de mi familia cambiaran fácilmente las escenas en la casa.

Home Assistant está configurado en archivos Yaml, he escrito casi todo en el archivo ui-lovelace.yaml para mantener las cosas claras y fáciles de seguir.

Pero es mejor separarlo más. en archivos separados con configuraciones más grandes.

Con HA no puede simplemente copiar y pegar configuraciones de otros usuarios. Realmente necesita escribir sus propios archivos de configuración para su entorno.

En este artículo, intentaré explicar cómo se crean los botones, las funciones y los diseños y cómo interactúan.

Para que pueda crearlos para sus dispositivos domésticos inteligentes.

No he creado ninguna automatización o secuencia de comandos porque Homey hace casi todo automáticamente.

Solo necesitamos apagar las luces por la noche con una sola pulsación en el botón.

Pero a veces desea cambiar las escenas de iluminación, haciendo que las luces sean un poco más brillantes cuando juega un juego de mesa, por ejemplo, aquí es donde entra la tableta.

Vincular a Homey con Home Assistant

He vinculado Homey con Home Assistant a través de MQTT. De esta forma, todos los dispositivos que tengo en Homey también están disponibles como entidades en HA.

Creé variables desencadenantes en Homey con la ayuda de la aplicación Better Logic (aplicación Homey).

Estos disparadores se pueden agregar como un botón (dispositivo) en Homey, que luego está disponible en HA como una entidad.

El botón puede iniciar un flujo en Homey, de esta manera podemos iniciar flujos en Homey a través de Home Assistant.

Creación de un panel de Home Assistant

Lo guiaré paso a paso a través del proceso de creación del tablero. Si tiene alguna pregunta, simplemente deje un comentario a continuación.

El diseño y el estilo del tablero se basan en el diseño de Dejan Markovic.

Vamos a utilizar diferentes complementos de Home Assistant. Los nombraré nuevamente cuando sea necesario, pero asegúrese de haber instalado los siguientes complementos:

  • Tarjeta meteorológica
  • Botón-Tarjeta
  • Tarjeta de plantilla de configuración
  • Mini reproductor multimedia
  • Mini tarjeta gráfica
  • Modo Quiosco
  • Tarjeta de texto de botón
  • Modo de tarjeta
  • Tarjeta de diseño
  • Cambio de estado
  • Calendario atómico revivir

Es más fácil instalar los complementos a través de HACS (Home Assistant Community Store).

Así que asegúrese de haber instalado esto en su instalación de alta disponibilidad.

Creación de la cuadrícula del tablero

El primer paso es crear la grilla del tablero. La cuadrícula determina dónde podemos colocar los diferentes botones, gráficos y otros contenidos en nuestro panel de control del asistente doméstico.

Para crear nuestra grilla personalizada vamos a necesitar.

Siga el para instalar el complemento en su instalación de alta disponibilidad. Le recomiendo que utilice HACS para esto.

He creado una grilla de 5 columnas y 3 filas. La base es una celda de 160px de ancho y 160px de alto. Solo la primera fila es más alta y la última columna es más ancha que el resto.

rejilla del tablero

Abre tu ui-lovelace.yaml archivo, usando el editor de archivos en Home Assistant (vea el paso 2 en este artículo) o directamente a través de FTP.

Tenemos nuestra vista principal definida: home y establecemos el tipo de la primera tarjeta en el complemento custom: grid-layout.

# Background color
background: rgb(248,250,251)

# Views
views:
  - title: Home
    id: home
    type: 'custom:grid-layout'
    layout:
      max_cols: 5
      # Define the width of the columns
      grid-template-columns: 160px 160px 160px 160px 280px

      # Define the height of the rows
      grid-template-rows: 220px 160px 160px

He definido un máximo de 5 columnas, el ancho de cada columna y la altura de cada fila. También configuré el color de fondo en un color blanquecino/gris claro.

Adición de botones a nuestro Panel HA

Para los botones, he usado el que también puede instalar a través de HACS. La ventaja de la tarjeta de botón personalizado es que le permite crear un diseño personalizado para los botones y usar plantillas personalizadas para esto.

También vamos a usar el plugin . Esto nos permite usar un estilo personalizado en las tarjetas.

El tablero funciona con tarjetas, por lo que primero debemos agregar una sección de tarjetas en nuestra vista (tablero) que acabamos de crear. Agregar tarjetas debajo de la sección de diseño:

# Views
views:
  - title: Home
    id: home
    type: 'custom:grid-layout'
    layout:
      max_cols: 5
      # Define the width of the columns
      grid-template-columns: 160px 160px 160px 160px 280px

      # Define the height of the rows
      grid-template-rows: 220px 160px 160px
    # Cards (buttons) section
    cards:

Con Yaml, es importante vigilar las sangrías. Deben ser de 2 espacios. Uno más o menos y su configuración no funcionará.

Vamos a comenzar con un botón simple que puede encender o apagar una entidad. Agregue lo siguiente para crear un botón:

Nota

Los archivos YAML pueden crecer bastante, para mantener el artículo legible, solo mostraré las partes relevantes. Puedes ver dónde lo dejé con las secciones de comentarios (en este caso # Cards (buttons) section )

    # Cards (buttons) section
    cards:
    # Simple button
    - type: 'custom:button-card'
      template:
        - base  # Used for styling of the card
        - quick-action  # Additional styling of the card
      entity: light.kitchen # entity to light
      name: Kitchen lights  # Name on the card
      icon:  mdi:lightbulb-outline # Icon on the card
      show_state: false  # Show state of the entity (true of false)
      show_header_toggle: false 
      view_layout:
        grid-column: 1  # column position, first column
        grid-row: 2 # row position, second row
      styles:
        icon:
        - color: rgb(255,213,113) # icon color

Como puede ver, hemos colocado la tarjeta en la columna 1 en la segunda fila. Si desea crear una tarjeta que tenga dos filas de ancho, simplemente puede configurar la columna de cuadrícula en 1/3.

Comenzará en la posición 1 y terminará antes de la posición 3.

Para los íconos, puede usar la mayoría de los íconos de materialdesignicons.com.

Plantillas de tarjetas de botones

El complemento de tarjeta de botón le permite crear plantillas para sus botones. De esta manera, puede diseñar fácilmente sus tarjetas de botones.

He creado dos plantillas, una base para todas las tarjetas y una plantilla de acción rápida para los botones de la segunda fila.

Para usar las plantillas, agregue el siguiente código en su archivo ui-lovelace.yaml, debajo del color de fondo y arriba de las vistas que hemos creado anteriormente.

# Templates
button_card_templates:
  base:
    styles:
      card:
        - height: 100%          
        - padding: 15px
        - background-color: rgba(255, 255, 255, 1);
      name:
        - color: rgb(24, 24, 24);
        - justify-self: start;
        - font-weight: 400
        - font-family: "LatoWeb"
      state:
        - color: rgb(117,124,136);
        - justify-self: start
        - font-weight: 400
        - font-family: "LatoWeb"
        - font-size: 14px
        - margin-top: -10px
    style: |
      ha-card {
        background-color: rgba(255, 255, 255, 1);
        border: 1px solid rgba(0, 0, 0, 0.05);
        border-radius: 3px;
        box-shadow: none !important;
        transition: width ease-in-out 0.5s,height ease-in-out 0.5s,border ease-in-out 0.2s,transform ease-in-out 0.2s !important;
      }
      #icon {
        width: 25px !important;
        margin-right: 8px;
        margin-top: -20px;
      }
      #container{
        margin: -10px 0;
      }
  quick-action:
    styles:
        card:
        - paddding: 15px;
        grid:
        - grid-template-areas: '"i" "n" "s"'
        - grid-template-columns: 1fr
        - grid-template-rows: 2fr 1fr 1fr
        img_cell:
        - align-self: start
        - text-align: start
        - justify-content: start
        name:
        - font-size: 17px
        - justify-self: start
        - color: #213953;
        - margin-top: 10px;
        state:
        - font-size: 13px
        - align-self: left
        - justify-self: start
        - color: rgb(170,171,175)

# Views

Estoy usando la fuente web Lato. Necesitarás descargar esta fuente aquí de Google Fonts y guárdelos en la carpeta de instalación de Home Assistant en /www/fonts

Cargue el archivo latofonts.css en el /www y cree un archivo style.css en la misma ubicación con el siguiente contenido:

body, html {
    font-family: "LatoWeb", sans-serif;
}

Luego, el último paso para usar la fuente personalizada es editar el archivo configuration.yaml. Asegúrese de que las dos últimas líneas se agreguen a la lista de recursos.

Tenga en cuenta que deberá reiniciar Home Assistant para aplicar los cambios que realizó en el archivo de configuración.

lovelace:
  mode: yaml
  resources:
    [ { url: /hacsfiles/lovelace-card-mod/card-mod.js,                             type: module },
      { url: /hacsfiles/lovelace-layout-card/layout-card.js,                       type: module },
      { url: /hacsfiles/mini-graph-card/mini-graph-card-bundle.js,                 type: module },
      { url: /hacsfiles/mini-media-player/mini-media-player-bundle.js,             type: module },
      { url: /hacsfiles/atomic-calendar-revive/atomic-calendar-revive.js,          type: module },
      { url: /hacsfiles/weather-card/weather-card.js,                              type: module },
      { url: /hacsfiles/config-template-card/config-template-card.js,              type: module },
      { url: /hacsfiles/button-card/button-card.js,                                type: module },
      { url: /hacsfiles/lovelace-state-switch/state-switch.js,                     type: module },
      { url: /hacsfiles/kiosk-mode/kiosk-mode.js,                                  type: module },
      { url: /local/style.css,                                                     type: css },
      { url: /local/latofonts.css,                                                 type: css }]

Si agregó las plantillas y configuró las fuentes, debería ver un resultado similar a este:

crear un panel de control del asistente doméstico

Cambio de estado de los botones

Ahora, como puede notar, el estado de las luces de la cocina está encendido, pero el ícono no representa el estado encendido. Aquí es donde el entra. Le permite reemplazar las tarjetas en función del estado de una entidad.

los también es capaz de mostrar diferentes íconos según el estado de la entidad, pero mis botones deben activar una entidad diferente (interruptor) en Homey. Así que no solo necesitaba cambiar el diseño del botón, sino también la funcionalidad.

He reemplazado el tipo de tarjeta de botón personalizado con custom:state-switch. Para la entidad, deberá usar una entidad en la que desee cambiar el estado. En este caso un grupo de luces.

    cards: 
    # Simple button
    - type: custom:state-switch # Set the card to custom:state-switch type
      entity: light.lampen_woonkamer  # Entity to base state on
      default: off
      view_layout:
        grid-column: 1
        grid-row: 2
      states:
        "on": # When the state of the entity light.lampen_woonkamer = on      
          # BUTTON WHEN LIGHTS ARE ON
          type: 'custom:button-card'  # Show our custom button card
          template:
          - base
          - quick-action
          entity: switch.lampen_uit_knop  # entity to trigger
          name: Room
          icon:  mdi:lightbulb-on # Icon
          show_state: true
          show_header_toggle: false
          state_display: "Turn off all lights"  # I like to display the action of the button
          styles: # Some custom styling
            icon:
            - color: rgb(255,213,113)
            style: |
                .button-card-main{
                    height:148px !important;
                    border: 1px solid rgba(0, 0, 0, 0.05);
                }
                #icon {
                    width: 25px !important;
                    margin-right: 8px;
                    margin-top: -20px;
                }
                #container{
                    margin: -10px 0;
                }
        "off":  # When the state of the entity light.lampen_woonkamer = off
          # BUTTON WHEN LIGHTS ARE OFF
          type: 'custom:button-card'
          template:
          - base
          - quick-action
          entity: switch.lampen_aan_knop
          name: Room
          icon:  mdi:lightbulb-outline
          show_state: true  
          show_header_toggle: false
          state_display: "Turn on all lights"
          styles:
            icon:
            - color: rgb(255,213,113)
            style: |
                .button-card-main{
                    height: 148px !important;
                    border: 1px solid rgba(0, 0, 0, 0.05);
                }
                #icon {
                    width: 25px !important;
                    margin-right: 8px;
                    margin-top: -20px;
                }
                #container{
                    margin: -10px 0;
                }

Este cambio de estado es bastante sencillo. Si el estado de la entidad light.lampen_woonkamer está encendido, muestra el primer botón (# BOTÓN CUANDO LAS LUCES ESTÁN ENCENDIDAS).

De lo contrario, muestre la otra tarjeta de botón personalizada.

Botón personalizado en Home Assistant

Las entidades no siempre están activadas o desactivadas, a veces desea cambiar el botón según el valor de una entidad.

Para lograr esto, podemos usar una plantilla de estado para esto:

    cards: 
    # Simple button
    - type: custom:state-switch # Set the card to custom:state-switch type
      entity: template
      template: >
         {% if state_attr('light.ks_6', 'brightness') != None %} 
           {% if state_attr('light.ks_6', 'brightness') > 45 %} 
             cooking 
           {% else %}
             dimmed
           {% endif %}
         {% else %}
           turnedOff
         {% endif %}
       states:
         "cooking":
           # Add your button card here

Home Assistant está usando la plantilla Jinja2 emotor, que puede ser un poco difícil de entender. Una buena manera de probar sus plantillas es usar las herramientas de desarrollo en Home Assistant. Abre el herramientas de desarrollo (menú de la izquierda, justo encima del icono de configuración) y seleccione el Modelo pestaña.

Inicio Asistente Herramientas para desarrolladores

Aquí puede probar sus plantillas y ver los resultados en el lado derecho de la pantalla (en el área gris)

Creación de tarjetas gráficas

En la fila inferior del tablero, tengo 3 gráficos. Estos gráficos brindan información sobre la casa, como la temperatura, la humedad y los paneles solares.

Para crear los gráficos vamos a utilizar el para Asistente de Hogar. Nuevamente, descárguelo a través de HACS.

        # Humidity
        - type: 'custom:mini-graph-card'  # mini graph card type
          name: Humidity
          icon: 'mdi:water'
          entities:
            - entity: sensor.tado_humidity  # Entity to display
              show_legend: false
              show_state: true
              show_fill: false # Set fill to false for line chart
          show_state: true
          show_header_toggle: true
          view_layout:  # position on the grid
            grid-column: 2
            grid-row: 3
          hours_to_show: 12  # Show only last 12 hours
          points_per_hour: 2 # Show 2 data points per hour
          line_width: 8 # line thickness
          height: 140 # height of the chart
          animate: true # animate on reload of the screen
          upper_bound: 80 # Set upper limit of the chart (height possible value)
          lower_bound: 40 # Set lower limit of the cart
          align_icon: left
          align_header: left
          color_thresholds:  # Colors of the line, based on the value
            - value: 50
              color: "#00B4DB"
            - value: 70
              color: "#0083B0"
          show:
            labels: false
          style: |  # Styling of the card
            ha-card, :host{
                font-family: "LatoWeb";
                background-color: rgba(255, 255, 255, 1) !important;
            }
            ha-card{
                border: 1px solid rgba(0, 0, 0, 0.05) !important;
                border-radius: 3px !important;
                box-shadow: none !important;
                transition: width ease-in-out 0.5s,height ease-in-out 0.5s,border ease-in-out 0.2s,transform ease-in-out 0.2s !important;
            }
            .name > span {
                color: rgb(170,171,175);
                font-weight: 400 !important;
                font-size: 13px !important;
                font-family: "LatoWeb";
                opacity: 1 !important;
                width: 100px !important;
            }
            .icon {
                margin-right: 0px !important;
                color: rgb(170,171,175) !important;
                margin-left: -5px !important;
            }
            .header.flex .icon {
                --mdc-icon-size: 20px;
              }
            .states{
                font-size: 16px !important;
                font-weight: 400;
                color: #213953;
                font-family: "LatoWeb"
            }
            .state__value{
                font-size: 24px !important;
                font-weight: 400;
                color: #213953;
                font-family: "LatoWeb"
            }
            .state__uom{
                color: rgb(117,125,135) !important;
                font-size: 14px !important;
                font-family: "LatoWeb";
                opacity: 1 !important;
            }
            .graph {
                padding: 0 15px !important;
                margin-top: -10px !important;
            }

Un par de configuraciones que son importantes para mostrar buenos gráficos son la línea de tiempo, la cantidad de puntos de datos y los límites:

hours_to_show: 12
points_per_hour: 2
line_width: 8
height: 140
upper_bound: 80
lower_bound: 40

Para temperatura o humedad, una línea de tiempo de 12 horas puede ser perfecta con dos puntos por hora. Pero para la energía solar, es posible que desee utilizar más puntos por hora.

Además, los límites superior e inferior realmente ayudan a mostrar un gráfico agradable y consistente. Tome los paneles solares, por ejemplo. Un día puede generar 4000w como máximo, pero el otro día solo 500w.

Como puede ver, sin límites, parece que hoy alcanzamos el máximo rendimiento.

Reproductor multimedia

Para el reproductor multimedia, primero conecté Sonos directamente a Home Assistant. Simplemente ve a configuración > integraciones y agregue su Sonos (u otro reproductor multimedia) a HA.

los La tarjeta es bastante sencilla, agregue el sistema Sonos como una entidad y, en mi caso, configuré la obra de arte para Cubrir.

- type: 'custom:mini-media-player'
          noPadding: true
          entity: media_player.sonos  # Your media player entity (Sonos in my case)
          artwork: cover # Display artwork, cover the whole card
          icon: mdi:play
          view_layout: # Position on the grid
            grid-column: 5  
            grid-row: 3
          hide:  # Hide what we don't need
            icon: true
            volume: true
            power: true
            prev: true
            next: true
            source: false
            controls: false
            mute: false
          style: |
            :host{
                font-family: "LatoWeb";
                background-color: rgba(255, 255, 255, 1) !important;
                --mini-media-player-base-color: #213953;
                --mini-media-player-overlay-base-color: #213953;
                --mini-media-player-overlay-accent-color: #213953;
            }
            ha-card{
                height: 100%;
                padding: 15px;
                border: 1px solid rgba(0, 0, 0, 0.05) !important;
                border-radius: 3px !important;
                box-shadow: none !important;
                transition: width ease-in-out 0.5s,height ease-in-out 0.5s,border ease-in-out 0.2s,transform ease-in-out 0.2s !important;
            }
            .ratio {
                padding-bottom: 70%!important;
            }
            .title-controls { 
                width: 100%; 
                height: 100%; 
            }
            ha-card.--has-artwork .cover{
                opacity: 0.3 !important; # Change the artwork opacity
                filter: grayscale(80%);  # Change the artwork color
            }
            ha-icon-button{
                color: #333 !important;
            }
            .mmp__bg{
                -webkit-filter: invert(1);
                filter: invert(1);
            }
            .entity__info__name{
                color: rgb(117,125,135) !important;
                font-weight: 400 !important;
                font-size: 16px !important;
            }

El único cambio que hice fue agregar un estilo personalizado para combinar la obra de arte un poco más con el diseño del tablero. Al convertirlo al 80% de escala de grises y una opacidad de 0.3.

Panel de alta disponibilidad

Tarjeta meteorológica

Con las filas inferiores completadas, ahora vamos a comenzar con el elemento más grande en el tablero del asistente de inicio, la tarjeta meteorológica.

Para ello, he modificado el plugin Weather Card y he utilizado iconos creados por lai ming. Puede descargar los iconos personalizados y el complemento modificado .

Tarjeta Meteorológica Home Assistant

Primero, instale el complemento Weather Card a través de HACS y luego cargue los archivos desde mi a la carpeta /www/community/weather-card en la instalación de Home Assistant.

Estoy usando la integración de Meteorologisk institutt (Met.no) para extraer los datos meteorológicos.

Pero también puede usar OpenWeather Map o DarkSky API. Simplemente lea la guía de instalación del complemento.

        #
        # Weather card
        #
        - type: custom:weather-card
          entity: weather.home # Weather entity
          icons: "/local/community/weather-card/icons/"  # load custom icons
          current: true  # Show current weather
          details: false
          forecast: true
          hourly_forecast: false
          number_of_forecasts: 3 # 3 days for case
          view_layout:
            grid-column: 1 / 5  # Span over the 4 colums
            grid-row: 1
          style: |  # Custom styling
            ha-card, :host{
                font-family: "LatoWeb";
                background-color: rgba(255, 255, 255, 1) !important;
            }
            ha-card{
                border: 1px solid rgba(0, 0, 0, 0.05) !important;
                border-radius: 3px !important;
                box-shadow: none !important;
                transition: width ease-in-out 0.5s,height ease-in-out 0.5s,border ease-in-out 0.2s,transform ease-in-out 0.2s !important;
                grid-template-columns: 1fr 2fr;
                grid-template-rows: 1fr;
                display: grid;
            }
            .current{
                width: 200px;
                margin-bottom: 0 !important;
                grid-template-columns: 1fr 1fr 1fr;
                grid-template-rows: 50px 30px 30px;
                display: grid;
            }
            .current .icon.bigger, .current .temp, .current .tempc {
                position: inherit;
            }
            .currentWeather{
                font-size: 18px !important;
                grid-column-start: 2;
                grid-column-end: 2;
                grid-row-start: 2;
                margin-top: 15px;
                color: rgb(114,114,114);
                text-align: left;
            }
             .current .temp {
                color: #213953;;
                font-size: 40px;
                grid-column-start: 1;
                grid-row-start: 1;
                justify-self: right;
                margin-top: 15px;
                opacity: 0.8
            }
            .current .tempc {
                color: rgb(170,171,175);
                opacity: 0.6;
                font-size: 20px;
                grid-column-start: 2;
                justify-self: left;
                grid-row-start: 1;
                margin-top: 8px !important;               
            }
            .current .icon{
                grid-column-start: 1;
                grid-column-end: 3;
                grid-row-start: 2;
                width: 50px !important;
                height: 50px !important;
                margin-top: 0px !important;
                text-indent: 0 !important;

                text-align: right;
                line-height: 50px;
            }
            .forecast .highTemp{
                color: #213953;
            }
            .forecast .precipitation{
                color: rgb(170,171,175);
            }
            .forecast .dayname{
                color: #213953;
            }

Agregar un calendario al tablero

El último elemento (tarjeta) que vamos a añadir es el calendario. Para ello, vamos a utilizar el . Deberá tener Google Calendar conectado a su instalación de Home Assistant. Para ello puedes seguir esta guía oficial de HA.

Agregué un estilo personalizado a la tarjeta del calendario y oculté la barra de desplazamiento. Para que pueda desplazarse por los próximos eventos, sin mostrar la barra de desplazamiento.

        #
        # Upcoming Events
        #
        - type: custom:atomic-calendar-revive
          entities:
          - entity: calendar.family  # Calendar name in Google
            titleColor: #213953;
            maxEventCount: 5  # Show max 5 events
          language: nl 
          europeanDate: true
          noEventsForNextDaysText: Geen afspraken komende dagen
          noEventsForTodayText: Geen afspraken vandaag
          untilText: tot
          fullDayEventText: Hele dag
          refreshInterval: 300
          dateFormat: LL
          locationLinkColor: rgb(170,171,175);
          showProgressBar: false
          view_layout:  # Position on the grid
            grid-column: 5 / 6
            grid-row: 1
          style: |
            ::-webkit-scrollbar {
                display: none;  # Remove the scrollbar
            }
            ha-card, :host{
                font-family: "LatoWeb";
                background-color: rgba(255, 255, 255, 1) !important;
            }
            ha-card{
                border: 1px solid rgba(0, 0, 0, 0.05) !important;
                border-radius: 3px !important;
                box-shadow: none !important;
                transition: width ease-in-out 0.5s,height ease-in-out 0.5s,border ease-in-out 0.2s,transform ease-in-out 0.2s !important;
            }
            .event-titleRunning {
                color: #213953;
            }
            .cal-card {
                padding: 0;
            }
            .cal-eventContainer{
                padding-top: 15px !important;
            }
            .event-title{
                color: #213953;
            }
            .daywrap {
                border-top: 10px solid rgb(248,250,251);
            }
            .hoursHTML, .relativeTime{
                color: rgb(170,171,175);
            }

Modo Quiosco

El último paso es eliminar el encabezado y la barra lateral de Home Assistant al ver el tablero en la tableta. Para esto, estamos usando el ugin Una vez que haya instalado el complemento, simplemente agregue el siguiente código en su ui-lovelace.yaml, justo encima de las vistas.

kiosk_mode:
  mobile_settings:
    hide_header: true
    hide_sidebar: true
    ignore_entity_settings: true
    custom_width: 1320 # Set this to the max width (or slightly higher) then the width of your tablet

# Views

Solo queremos eliminar el encabezado y la barra lateral de la tableta. Por eso solo lo aplicamos en dispositivos móviles, con un tamaño de pantalla inferior a 1320px.

Terminando

Crear su propio tablero personalizado en Home Assistant puede ser todo un desafío.

Hay mucha información y consejos en los foros de la comunidad de HA, pero la mayoría asume que ya tiene algún conocimiento de HA.

Espero que este artículo te haya ayudado a crear tu propio tablero en Home Assistant. Si tienes alguna pregunta, solo deja un comentario a continuación.

Otros artículos relacionados

Cómo crear un TimeLapse de Unifi Protect

Cómo crear un TimeLapse de Unifi Protect

Las cámaras Unifi son excelentes dispositivos versátiles que puede usar en prácticamente cualquier situación. En este caso, necesitaba hacer un ...
Leer Más
Cómo asusté a mi niñera con mi Smart Home

Cómo asusté a mi niñera con mi Smart Home

Construir tu Hogar Inteligente es divertido, cada semana agrego nuevas funciones, haciéndolo más inteligente. Ahora nuestro comportamiento de Smart Home ...
Leer Más
Instalación del controlador Unifi en un Synology Nas en 5 minutos — (2022)

Instalación del controlador Unifi en un Synology Nas en 5 minutos — (2022)

Si tiene equipo de red Unifi, también necesita el controlador Unifi. Y lo mejor es mantener el controlador funcionando las ...
Leer Más
Guía de configuración y revisión de UniFi Viewport

Guía de configuración y revisión de UniFi Viewport

Cuando tiene varias cámaras UniFi Protect, es posible que desee verlas todas en un televisor o monitor grande. Puede abrir ...
Leer Más
Unifi USG frente a EdgeRouter

Unifi USG frente a EdgeRouter

Está planeando su nueva red doméstica, quiere esos increíbles puntos de acceso Unifi, pero ¿qué enrutador debería agregarle? ¿Está optando ...
Leer Más
Revisión de UniFi Smart Chime

Revisión de UniFi Smart Chime

Encontrar un timbre compatible para su timbre UniFi puede ser un desafío. Es posible conectar un timbre mecánico o digital, ...
Leer Más

Deja un comentario