Skip to content

Panel Custom Home Assistant

La integración Panel Custom Home Assistant, le permite escribir sus propios paneles en JavaScript y agregarlos a Home Assistant.

Los paneles son páginas que muestran información dentro de Home Assistant y pueden permitir controlarla. Los paneles están vinculados desde el menú lateral y se representan a pantalla completa. Tienen acceso en tiempo real al objeto Home Assistant a través de JavaScript. Ejemplos de paneles en la aplicación son tableros, mapa, libro de registro e historial.

Además de los paneles de registro de componentes, los usuarios también pueden registrar paneles utilizando el componente panel_custom. Esto permite a los usuarios crear rápidamente sus propias interfaces personalizadas para Home Assistant.

Índice de contenido

    Introducción Panel Custom Home Assistant

    Los paneles se definen como elementos personalizados. Puede usar cualquier marco que desee, siempre que lo incluya como un elemento personalizado. Para comenzar con un panel, lo primero que tiene que hacer es descargar este archivo y copiarlo en la carpeta config/www de su Home Assistant.

    En este punto, hay reiniciar su Home Assistant, de lo contrario, es posible que más adelante no le deje reiniciar

    Luego cree el archivo panel_custom.yaml  y copie esta línea en su archivo configuration.yaml

    panel_custom: !include panel_custom.yaml

    Ahora, toca reiniciar su Home Assistant.

    A continuación, ya  está listo para crear sus enlaces. Aquí le dejo unos ejemplos y después vamos a repasar que es cada línea.

      - name: Server Controls
        url_path: developer-tools/yaml
        sidebar_title: Server Controls
        sidebar_icon: mdi:server # https://materialdesignicons.com/
        module_url: /local/panel-redirect.js  # 'local' is '/config/www/'
    
      - name: panel-redirect
        url_path: redirect-supervisor
        sidebar_title: Supervisor
        sidebar_icon: mdi:home-assistant # https://materialdesignicons.com/
        module_url: /local/panel-redirect.js
        config:
          target: /hassio/dashboard # Hacia dónde quieres redirigir
    
      - name: Zones
        url_path: config/zone
        sidebar_title: Zones
        sidebar_icon: mdi:google-maps
        module_url: /local/panel-redirect.js

    VARIABLES DE CONFIGURACIÓN

    name (OBLIGATORIO)

    Nombre de la integración web que representa su panel.

    sidebar_title ( opcional)

    Título descriptivo para el panel en la barra lateral. Omitirlo significa que no hay entrada en la barra lateral (pero aún accesible a través de la URL).

    sidebar_icon ( opcional , predeterminado: mdi: marcador )

    Icono de entrada. Elija un ícono que pueda encontrar en materialdesignicons.com para usar para su entrada y prefije el nombre con mdi:. Por ejemplo mdi:car, mdi:ambulanceo mdi:motorbike.

    url_path ( opcional)

    La URL en la que estará disponible su panel en la interfaz. Si se omite, el nombre del panel será predeterminado.

    js_url ( opcional)

    La URL que contiene el JavaScript de tu panel. Si se usa junto con module_url, solo se servirá a los usuarios que usen la compilación ES5 de la interfaz.

    module_url ( opcional)

    La URL que contiene el módulo JavaScript de tu panel. Cargado como un módulo de JavaScript en lugar de un script. Si se usa junto con module_url, solo se servirá a los usuarios que usen la versión «más reciente» de la interfaz.

    config ( opcional)

    Configuración que se pasará a su componente web cuando se cree una instancia.

    require_admin ( opcional , predeterminado: falso )

    Si se requiere acceso de administrador para ver este panel.

    embed_iframe ( opcional , predeterminado: falso )

    Configúrelo truepara incrustar el panel en iframe. Esto es necesario si el panel usa el marco React o si contiene componentes web en conflicto.

    trust_external_script ( opcional , predeterminado: falso )

    De forma predeterminada, el usuario debe confirmar antes de cargar un script desde una fuente externa. Establecer esto en true, omitirá esta confirmación.

    Sígueme a Youtube

    Sígueme en Youtube - Panel Custom Home Assistant
    Ajustes