Trabajar fácilmente en Lovelace

¿No pensáis que es engorroso trabajar con la nueva interfaz Lovelace de nuestro Home Assistant, obligatoria desde versión 0.85, porque todo el código se encuentra dentro de un único archivo “ui-lovelace.yaml”?

Pues hoy daremos solución a ese problema, el cual nos obligaba a trabajar con una increíble cantidad de líneas de código en el archivo anteriormente comentado, “ui-lovelace.yaml”. La solución pasa por tener PARTICIONADO dicho código en archivos más pequeños, es decir, este caso cada archivo corresponderá a cada pestaña que tenemos en nuestra interfaz.

PASOS A SEGUIR:

Nosotros tenemos un archivo en raíz que se denomina ui-lovelace.yaml, en el cual se encuentra todo el código y el cual hace que se nos muestre la interfaz gráfica a nuestro gusto; a este archivo le cambiaremos el nombre o le quitaremos la extensión “.yaml”, ya que crearemos uno con el mismo nombre al que teníamos (ui-lovelace.yaml) y también deberemos crear una carpeta en la raíz con el nombre que queramos, en mi caso, lovelace.

 

A continuación unas imágenes que corresponden a los dos archivos  ui-lovelace.yaml, el antiguo como el nuevo.  El antiguo archivo lleva por nombre ui-lovelace_ORIGINAL.yaml (arriba) y el nuevo archivo con el cual trabajará HA a partir de este momento que lleva el nombre de ui-lovelace.yaml (abajo).

• 

En el nuevo archivo ui-lovelace.yaml copiaremos las líneas del antiguo archivo dónde declarábamos los recursos (resources), que utilizamos  en nuestra interfaz, y también deberemos declarar los nuevos “archivos.yaml” que vamos a utilizar  y que corresponden a cada pestaña, los cuales se encuentran en la carpeta lovelace, pero OJO, debemos declarar cada archivo a medida que lo vayamos creando porque si declaramos todos los archivos (pestañas) y no están creados los archivos no nos cargará HA. Eso es lo único que contendrá el nuevo archivo ui-lovelace.yaml.

Ahora crearemos los archivos de cada pestaña dentro de la carpeta lovelace.

Ahora es cuestión de ir copiando en cada archivo, por ejemplo 00_principal.yaml, la parte de código de la pestaña correspondiente que se encuentra en el antiguo archivo ui-lovelace.yaml y que en este momento le habremos cambiado el nombre o quitado la extensión como se ha explicado antes.

La parte de código que hay que copiar es la que va desde “tittle” hasta el final que corresponda a dicha pestaña, teniendo en cuenta de ELIMINAR el guion que precede a tittle y tener alineados totalmente a la izquierda tittle, icon y cards.

Imágenes para tener más claro las explicaciones que se han dado en el párrafo anterior.

En la imagen de arriba tenemos el antiguo archivo ui-lovelace.yaml que contenía el código de todas las pestañas y abajo el archivo 00_principal.yaml que se encuentra en la carpeta lovelace y que sólo contiene el archivo que corresponde a esa pestaña con las modificaciones mencionadas  (eliminar guion y alineamiento a la izquierda de los elementos descritos anteriormente ).

Si nos queremos ahorrar trabajo de alinear todas las líneas de código podemos SOLAMENTE  alinear las líneas mencionadas y dejar el resto tal y como quedan una vez copiado.

No queda estético, el código, pero es efectivo y nos ahorra muchísimo trabajo.

Y aquí acaba este pequeño tutorial que hará más cómodo el trabajar y localizar cualquier parte de código de nuestro Home Assistant.

Espero os sirva de ayuda y haberme explicado correctamente.

Como siempre, si tienes cualquier duda déjanos tu comentario o pásate por el grupo de telegram de @Domology

Si quieres conocer otros artículos parecidos a Trabajar fácilmente en Lovelace puedes visitar la categoría Configuraciones HA.