Hoy recapitulamos una serie de tutoriales para crear nuestro floorplan en lovelace.
Home Assistant incluyó a modo experimental la interface Lovelace UI a partir de la versión 0.72 y es inminente que dicha interface sea definitiva y única para utilizar en las versiones venideras.
Su desarrollo se ha potenciado, convirtiéndose en una herramienta rápida, muy personalizable y con gran potencial gráfico que ayudarán a los usuarios de la plataforma a interactuar con sus casas de una forma muy intuitiva, y su diseño se adapta tanto a pantallas de teléfonos móviles, como tablets y escritorios de equipos informáticos.
La implementación se basa en la utilización de diferentes “cards”, tarjetas que se adaptarán a las diferentes necesidades de sus usuarios, y sobre las que trabajaremos especialmente en las que poseen potencial gráfico, y en menor medida, en otras que servirán de apoyo al entorno gráfico para dar más funcionalidad a nuestros diseños.
El desarrollo de este tutorial se centrará principalmente en dos líneas, la creación de los planos (2D o 3D) con el programa de diseño Sweet Home, y la integración de estos planos en Home Assistant, de una parte, con las funcionalidades de los dispositivos de seguridad (sensores de puertas, presencia, humo y CO2, inundación, etc.), y de otra, con la interactuación de luces, quedando pendiente para otros tutoriales la integración de otros dispositivos. Algo parecido a los tutoriales de floorplan en el frontend tradicional
El aprendizaje será escalonado, para terminar con trucos y tips que darán como resultado unos diseños espectaculares.
Iniciaremos el tutorial con la utilización y diseño de nuestros planos en este magnífico programa. Se trata de un programa “open source” -libre- para diseño de interiores, sobre un plano en 2D y vista previa en 3D, disponible para las plataformas Linux, Windows y Mac, y que podrás instalar en tu ordenador y/o usarlo online en tu navegador que soporte Java. El programa incluye 26 idiomas, entre los que esta disponible el español, conteniendo ayuda también en nuestro idioma. El programa esta disponible en Sweethome3d
En esta parte empezaremos a ver la utilización de la “card” de HA denominada “picture-elements” (Home-assistant - lovelace -picture elements), iniciándonos con la representación de iconos anidados con los estados de las entidades que representan.
Daremos un paso más sobre lo ya aprendido en Sweet Home e iniciaremos la utilización de elementos de imagen en la card picture-elements, las propiedades de los filtros CSS Developer mozilla - CSS filter y los trucos y tips para representar en nuestros diseños el encendido y apagado de luces. Por último, con lo aprendido integraremos mediante nuevos tips los dispositivos de seguridad ((sensores de puertas, presencia, humo y CO2, inundación, etc.) en nuestro diseño y adelantaremos otras muchas posibilidades que ofrece la utilización avanzada de la card picture-elements para que la imaginación nos lleve más allá en nuestros diseños. 
Y hasta aquí por hoy, no a muy tardar estaré con vosotros nuevamente para seguir iniciandonos en este apasionado mundo de la domótica.
Ah! y no olvidéis que ya podéis empezar a instalar la aplicación Sweet Home 3D, ver sus posibilidades, lo fácil e intuitiva que es, y si queréis empezar a diseñar vuestros planos, disponéis de decenas de videos en youtube tanto en castellano como en otros idiomas que os serán muy útiles para iniciaros.
