Aprendemos a utilizar la potencia gráfica de Lovelace UI. Introducción.

Hola a todos, hoy iniciamos 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.

Partes del tutorial:

I.- SWEET HOME 3D. DISEÑO DE NUESTRO PLANO BÁSICO.

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 http://www.sweethome3d.com/es

II.- INTEGRACIÓN DE NUESTROS PLANOS EN HOME ASSISTANT CON LA UTILIZACIÓN DE ICONOS.

En esta parte empezaremos a ver la utilización de la ­­­­­­­“card” de HA denominada “picture-elements” (https://www.home-assistant.io/lovelace/picture-elements/), iniciándonos con la representación de iconos anidados con los estados de las entidades que representan.

III.- SWEET HOME 3D. DISEÑOS AVANZADOS CON ILUMINACION, RENDERIZACION DE IMÁGENES  Y SU INTEGRACIÓN EN HA (TRUCOS Y TIPS).PARTE I.

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 https://developer.mozilla.org/en-US/docs/Web/CSS/filter  y los trucos y tips para representar en nuestros diseños el encendido y apagado de luces.

IV.- SWEET HOME 3D. DISEÑOS AVANZADOS CON ILUMINACION, RENDERIZACION DE IMÁGENES  Y SU INTEGRACIÓN EN HA (TRUCOS Y TIPS). PARTE II.

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.

Para mi es un placer compartir con vosotros lo poco que sé, rodeado de tantos craks como hay en esta web. Y recordad, si necesitáis algo ya sabéis nuestros canales de comunicación donde podréis resolver vuestras dudas.

Telegram
Twitter
Facebook

Un comentario sobre “Aprendemos a utilizar la potencia gráfica de Lovelace UI. Introducción.

Deja un comentario

Síguenos

Siguenos en facebook