¿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 esta imagen se aprecia cómo era el archivo original con el que trabajábamos hasta este momento.
Aquí se muestra cómo será nuestro nuevo archivo ui-lovelace.yaml
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
